「無料体験レッスン」バナーの作成

前回ご紹介したStripe Generator 2.0 betaを使ったパーツデザインに挑戦します。
 

今回はパソコンスクール　Ken Schoolのトップページにある

「無料体験レッスン」のバナーを作ってみましょう。

まずはPhotoshopを起動し、190x50程度のキャンバスを新規作成し、

任意の色で塗りつぶします。（サンプルは#e74f30）

Internet Explorerを起動しStripe Generator 2.0 betaを開きます。
 

下記の設定をし、ダウンロードして保存します。

• stripe size:4
• spacing:4
• stripe color(s):e95919
• background color(s):f19061
• stripe orientation:左から３番目

保存したファイルをPhotoshopで開き、パターンとして登録します。
（「編集メニュー」→ 「パターンを定義」 ）

レイヤーを新規作成し、パターンで塗りつぶします。
（「編集メニュー」→ 「塗りつぶし」→「パターン」 ）

上下左右を１ピクセルずつ削除します。
（一行選択ツール・一列選択ツールが便利）

今作成したレイヤーのサムネイルを

Ctrlキーを押しながらクリックし、選択します。

新規レイヤーを作成し、白で塗りつぶします。

選択範囲を１ピクセル縮小し削除します。
（「選択範囲メニュー」→ 「選択範囲を変更」→「縮小」 ）

ここまできたら完成間近です！

任意の書体で内容を書きます。
（サンプルは「無料体験レッスン・個別相談を予約する」）

レイヤースタイルのドロップシャドウを適用します。
 

ここでのポイントはさり気なくかけるところです。

• 距離：2px
• サイズ：1ｐｘ
• 不透明度：30％程度

いかがでしょうか？

好みで三角形や丸などの記号も入れてください。

このようにサイトのデザインを模写するトレーニングをたくさんすると、

テクニックやスピード、デザインの引き出しが増えます。

是非、チャレンジしてください！

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでグラフィックデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html