簡単バナー作成例|ソガネットドットコムBLOG

2009年10月03日

簡単バナー作成例

エラそうに人に教えに行ったりして、お前は作れんのかよー?ということで、
範囲選択も何もしない、超簡単なバナーの作成例の紹介です。
ビャーっとやってガーっとするだけです。

素材は先日福島潟イベントでの小林佳史さんのライブで私が撮影した画像を使用しました。
勝手にバナー作っちゃいましたが、おこられるかな?

psgamen01.jpg

まず、合成する3枚の画像を開きます。

左上の画像に右の画像をビャーっとドラッグアンドドロップしてレイヤー(通常)を作ります。
シフトキーを押しながらその画像をマウスでテキトーな大きさに縮小します。
レイヤー上と下の画像の境目をエッジのぼけた丸ブラシでガーっとテキトーに消しごむで消します。
(消しゴムのブラシの透明度を落としてやると、境目が滑らかになります。)

次に、下の画像をシフトキーを押しながら、ドラッグアンドドロップ。
そうするときちっと隅が合います(二つの画像が同じ大きさの場合)
このレイヤーは比較(明)にして、明るいところだけ重なって見えるようにします。
レイヤーの透明度を少し下げて下の画像とブレンドさせてなじませます。

psgamen02.jpg

で、出来たのが下の画像。
不自然さをなじませるため、ほんの少しだけソフト系とシャープ系のフィルター
をかけたコピーレイヤー画像を薄くブレンドします。(しなくても自由)

gousei01.jpg

次に文字を入れて、新規レイヤーに範囲選択を作ってグラデーションで文字の背景を作ったり、
レイヤースタイルで影を作ったりして見やすくします。
(背景はなくてもあっても自由)

gouseidekiagari.jpg

出来上がり。

*PC画面はPhotoshopですが、エレメンツでも同じ手順で作成可能です。

ご質問はコメント欄へ。

***************************

以下、補足説明用

1.いずみやさんの質問用画像。
kore.jpg
まるで囲んだ部分がエッジのぼけた丸ブラシ(ソフトブラシ)。

comments

アゴスさん…(泣)
境目をエッジのぼけた丸ブラシとは??
全然ダメです、時間切れのためまた後ほど…。
あー、私のバカバカ!!

いづみや女将さん、
まだ時間切れではありません、あきらめずに。

境目を「エッジのぼけた丸ブラシ」とは「ソフトブラシ」のことです。
左にあるツールバーの中から「消しゴムツール」を選び、
ブラシをソフトブラシにして消すということです。
記事の一番下に画像を載せました。ご覧ください。

こんばんわ。

さすがはアゴスさん。

> ビャーっとやってガーっとするだけです。

そう言われると、メッチャ簡単そうに見えるから、自分でも出来そうな錯覚起こしそうになります。(^^;)

が、まずフォトショを手に入れなきゃ(^^;) フリーソフトでも何とかならないかなあ(^^;)

こんばんは。

こ、これはスゴイじゃないですか!(@_@;)

しかも、最近フォトショップの練習やってたんで、タイムリーです(^-^)

後でチャレンジしてみますが、出来るかなぁ?(*_*;


  • 4 Z400GP
  • 2009年10月03日 21:45

復活しました、こんばんは。
質問の件、ありがとうございます。
消しゴムツールの記述を見逃し、さまよいました(恥)。
えーと、それから…。
>シフトキーを押しながら、ドラッグアンドペースト
が、できません(泣)!
しょうがないので各画像のサイズを合わせてからくっつけました。
それってナンセンスでしょうか??
文字入力は明日、…頑張ります(小さな声で)!

おはようございます。

これは夜景なんかを合成する時に、すごく簡単で
効果的な手法ですよね(^^)

レイヤースタイルは種類がたくさんあって
初心者の人は混乱するかもしれないけど、
要は実際スタイルを変えてみて
どんな効果になるのか確認していけばいいわけですよね。

ソフト円ブラシでも画面右上にでている『不透明度』を
100%で使うと境界がはっきりすることがあるので
その時は数字を下げて(60とか50、場合によっては10とか)
使うといいんですよね(^^;)

  • 6 twins
  • 2009年10月04日 06:57

はじめまして
いずみ屋さん経由でやってきました
お噂はかねがね伺っておりました。
よろしくお願いいたします。

フォトショップは高価で、使っていませんので
こんな風にきれいに出来るのなら、と考えてしまいます。

> ビャーっとやってガーっとするだけです。
 すぐ出来そうな気分になれます(笑

やばい。
かっこいいじゃないですか!!^^

・・・惚れました・・・(照)

サンクリーン塩尻さん、
これはほんとうに簡単な合成方法です。
ほんとはもっと難しい方法もあるのですが、
エレメンツ使用の初心者向けを想定しています。
でも、出来上がりを事前にイメージするのが一番大事で難しいことです。
フリーソフトだったら、GIMPをお勧めしますが、マスターするには自力でマスターする必要があります。
フォトショップなら、ウェブ上で解説しているサイトもたくさんあるし、使える人が多いので誰かに教えてもらったりできるし、解説本もすごく沢山ありますし。

Z400GPさん、
ありがとうございます。
同じことをするのにいろんなやり方があるのがフォトショップの特徴で、どうやっても自由なのですが、とりあえず、このとおりにやればこのようなものは出来上がります。

いづみやさん、
シフトキーを押しながら、ドラッグ・・・
は記述してなかったけど、同じ大きさの画像が前提でした。
つまり、各画像のサイズを合わせて・・・というのは
まったくの正解です。

twinsさん、
そうそう、
ソフト円ブラシの『不透明度』を変えて消すというのも大事でしたね。本文についかさせてもらいます。
ありがとうございます。

リワーク職人さん、
はじめまして、リンク先見させてもらいました。
山梨の方の書き込みは初めてです。
ブログ上で山梨の知り合いは残念ながらいませんでした。
リアルでも山梨の方とはお会いしたことがないです。
おいでいただき、どうもありがとうございました。
これからもどうぞよろしくおねがいいたします。
ブログリンクしておきますね。

フォトショップは商売に使うんだったら、たとえフルバージョンの価格を出してもぜんぜん惜しくないと思います。

サッシーさん、
実物はもっとかっこいいよ。
三味線持つとさらにかっこいいです。

こんにちは。
たいへん参考になります
ありがとうございました

いづみやさんのオフ会
楽しそうですね。
私も行きたかったなあ
(´Д⊂グスン

  • 15 あい
  • 2009年10月04日 16:51

あいさん、
お役に立てれば幸いです。
オフ会楽しかったですよ。
ま、それが目的で行ったみたいなものですから。

すごーい。
お給料支払って、仕事が一段落したらゆっくり拝見。
チャレンジします。
元の画像を選ぶ段階で、アゴスさんは頭の中に絵が出来てるんですよね。それが完成度にもろ影響しますよね。
要は、センス?かなしいです。

こんばんは。

アゴスさん流石です!
なかなか画像の合成とかに手を出せませんでしたが、この手法を元に
練習してみますね。
次回の経営革新塾も近いもので、何の準備もしてなくて焦ってます(^^ゞ

  • 18 豆蔵
  • 2009年10月04日 23:45

こんばんは。
先日、お聞きできなかったので、プリントアウトさせて頂きましたょ!!
そう言っても、なかなか理解に苦しみますが・・・。
頑張ります!!

フォトショップエレメンツ8を、予約しました。(^^)

アゴスさん こんばんは

簡単そうですが、写真の選び方から
凄いですね。どこにどれをと
ご自分の撮影した写真でですね。
明暗、色合い等も統一した写真がいいのですね。
恥ずかしながら私未だにやった事無いです。
凄く透明感を感じるバナーです。
いつもながら参考にさせて頂きます♪

アゴスさん

おはようございます。

>エラそうに人に教えに行ったりして、お前は作れんのかよー?ということで、

きっと誰も思っていないと思いますよ・・・(∩.∩)

>範囲選択も何もしない、超簡単なバナーの作成例の紹介です。

ほうほう!!

>ビャーっとやってガーっとするだけです。

そんなに簡単にできるのですね(∩.∩)

・・でもその前にフォトショップ購入する必要があります^_^;

ティンカーベルさん、
そうなんですよ。
作る前に頭の中で絵が出来ていないと、ノープランではぐちゃぐちゃになってしまいます。それにはセンスではなくて、まずコンセプトを決めておくと、絵がイメージしやすいです。

豆蔵さん、
ありがとうございます。
たしかに切り抜きは地道で練習の必要な作業です。
すべての基本になるので、ぜひマスターしたいですが、
短時間ではなかなか難しいかもしれませんね。

いそべの若大将さん、
ちょっっとふざけた文章になってしまいましたが
ゆっくり手順どおりにやればできるはず。
わからない用語があったら、ヘルプを見るなり、教則本をみるなり、ネットで検索するなりしてみてください。

かいりさん、
「明暗、色合い等も統一した写真」に注目したのは鋭いです。
この簡単方法を成功させるポイントはまさにそこです。
そうでない場合はやはり、地道に範囲選択を作って切り抜くしかないです。

溶射屋さん、
>きっと誰も思っていないと思いますよ
いえいえ、溶射屋さんのような超常連や常連の方はそうかもしれませんが、そうでない人はそう思うんじゃないかなとおもいまして。
フォトショップはレンズをもう1本買うくらいの、いやそれ以上の価値があります。

こんばんは!

すごい。いづみやさんの通信教育になってる!
しかもそれが分かりやすかったりして。

新しいブログの可能性でしょうか??

素肌美エールさん、
こーゆーブログ記事って昔からよくありますよ。
私もよく利用します。

  • 28 アゴス
  • 2009年10月05日 20:53

こんばんは☆
すごいです!アゴスさん!
すごいです!フォトショップ!
してみます!

延本石油の嫁さん、
そんなにすごくないです。簡単な方法です。
でも、そのシンプルさゆえにちょっとしたコツがあります。TWINSさん、ティンカーベルさん、かいりさんのコメントも御参考に!

  • 30 アゴス
  • 2009年10月05日 23:04

アゴスさん こんばんは

お焦げご飯本当に美味しかったです。
twinsさんの土鍋炊きを
思い出してしまいました♪

カッコいいですね~
フォトショップの無い私は、いまだにウエブアートデザイナーで頑張ってます。

こんな事ウエブアートデザイナーでも出来るんでしょうかね~
暇になったら色々見てみよ~っと。

かいりさん、
とれたての魚沼コシヒカリのおこげはさぞおいしかったことでしょう。でも、やっぱり、稲刈り体験というシチュエーションがいちばんおいしさを引き立てたのでは?

新潟米販売おやじさん、
本日より、江藤先生の経営革新塾が始まります。
おやじさんは去年の松本先生の経営革新塾に続いて参加なされないみたいですが、ものすごく身になる講座なので、とても残念です。
なお、この方法はレイヤー機能がないと出来ないので、ウエブアートデザイナーでは同じことは出来ません。

こんばんわ。

GINP情報ありがとうございました。ちょうどタイムリーな事に、松本ZUKUDASUの自主勉強会にて、GINPを使ったバナー作成についての勉強会が開催される事になりました。

アゴスさんは意識してる訳ないでしょうが、キッカケ作ってくれたのかな?と嬉しく思います。(^^) あざ~っす♪ (^^)/

サンクリーン塩尻さん、
そうですか、実はGIMPもたまに使うので、今度GIMPネタもやります。

  • 36 アゴス
  • 2009年10月07日 23:06

こんばんは

すごいです。
こんな事が、フォトショップで出来るなんて。
ひとつひとつ立ち止まって確認しながらでないと
理解出来ないけど、これは絶対チャレンジして
みたいことです。

できたらいいな・・です。

お菓子処東京堂のどらさん、
ありがとうございます。
こういう画像加工のスキルはサイト構築に必ず役立ちますので、がんばってやってみてください。

comment form
comment form