webgonia

フォトショップでバナーを作る時に知っておきたいテクニック

フォトショップでバナーを作る時に知っておきたいテクニック

バナー広告は紹介したい内容を小さなボックスに入れる必要があるので、どうしてもつ言葉をつめこみすぎたりゴチャゴチャしてしまいがちです。

そんなバナーで迷わないためにフォトショップでバナーを作るときにこれだけは覚えておきたい3つのテクニックと参考になるサイトを紹介するので役立ててください。

背景にグラデーションをかける

バナーの背景にグラデーションことによって雰囲気をだすことができます。

メニューから「ファイル」→「新規」でワークスペースを開き「長方形ツール」で描画します。

  • ワークスペース:500px×250px
  • カラー:#ffa22e

バナーテクニック背景色「レイヤーパネル」から描画した図形に「レイヤースタイルを追加」して「グラデーションオーバーレイ」を適用します、今回はの設定は以下のとおりです。

  • グラデーション:左→右、角度90°
  • グラデーションカラー#ffa22e→#ffffff

バナーテクニックグラデーションオーバーレイ「OK」をクリックして背景にグラデーションがかけれたら完了です。

バナーテクニック背景色グラデーション

背景にテクスチャで質感をだす

バナーの背景色にテクスチャをいれることによって質感をつけることができます。

メニューから「ファイル」→「新規」でワークスペースを開き「長方形ツール」で描画します。

  • ワークスペース:500px×250px
  • カラー:#ffa22e

バナーテクニック背景色「レイヤーパネル」から描画した図形に「レイヤースタイルを追加」して「パターンオーバーレイ」を適用します、今回はデニムのテクスチャを選択します。
バナーテクニックパターンオーバーレイ「OK」をクリックしてデニムのテクスチャで図形に質感がつけれたら完了です。
バナーテクニック背景色デニム

画像を少しづつ透明にして行く方法

メニューから「ファイル」→「新規」でワークスペースを開きいたら「ファイル」→「配置」で画像を読み込みます。
バナーテクニック画像グラデーション「レイヤーパネル」を開いて画像に「レイヤーマスクを追加」をクリックします、「グラデーションツール」を選択して右から左にドラッグ&ドロップするとマスクにグラデーションが追加されて画像が少しづつ透明にしていくことができます。
バナーテクニック画像グラデーションレイヤーマスクバナーを作るときには最低これだけはおさえておきましょう。

頭のなかでデザインを作っていくだけでは、よほどセンスがあるか経験がないと難しいのです、そんな時には実際のバナーを参考にしてみましょう。

バナーを作るときに参考にしたいサイト3選

バリエーションの多いバナーを色、サイズによって検索できるサイトを紹介しています、かなり量をストックされているのでバナー作成の参考にしてくださいね。

1.バナーデザインアーカイブ

バナーデザインアーカイブhttp://banner.keizine.net/

2.バナーデザインDB

バナーデザインDBhttp://aka-design.sub.jp/bd/

3.Retrobanner レトロバナー

レトロバナーhttp://retrobanner.net/

これでバナー作成でもう迷うことはないと思います。

フォトショップでバナーを作る時に知っておきたいテクニックは以上になります。

最後までお読みいただきありがとうございました。

Return Top