パーツデザイン

前回に引き続き「Ken School」のWebサイトの

パーツデザインに挑戦してみましょう。

今回はグローバルナビゲーションのボタンを作ります。

正直以前の「無料体験のバナー」よりもシンプルで簡単なので、

今回はロールオーバーする所までやってみます。

まずはオリジナルを見てみましょう。

アップ画像

オーバー画像

ロールオーバー用に画像を2枚用意する必要があります。

まずはお決まりのStripe Generator 2.0 betaを使用します。

便利ですね。
 

下記の設定でストライプを作成・保存します。
 

• stripe size:3
• spacing:3
• stripe color(s):#eeeeee
• background color(s):#ffffff
• stripe orientation:左から３番目

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

Photoshopを起動し、新規ファイルを作成します。
（幅159x高さ32ピクセル）

パターンで塗りつぶします。
（「編集メニュー」→ 「塗りつぶし」→「パターン」 ）

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

さらにレイヤーを新規作成し、 上下左右１ピクセルの枠線を塗ります。
（サンプルは#cccccc）
（一行選択ツール・一列選択ツールが便利）

任意の色・任意の書体で「Web/DTPコース」と文字を書きます。
（サンプルは#be3019）
 

また好みでアクセントに小さな四角形を並べます。

こちらの「Webおよびデバイス用に保存」で保存しておきます。

これでアップ画像の完成です。

続きの作業はまた次回に書きます。

その間にいろいろと試してみてください！

※次回も使いますのでレイヤーに分かれた状態も保存をしておきましょう！

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

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

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