初心者から始めるPhotoshopでWEBデザインその④

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

4回目は、画面幅一杯のワイドメニューの作成を行っていきたいと思います。
ワイドメニューは、今のWEBデザインでも比較的多く取り入れられているデザイン手法の一つですね。重要なリンクをしっかりと表現したい時に使うと良いと思います。またスマートフォンでも表示しやすいということもあります。

※Photoshopは最新版を使用してください(執筆時のバージョンはCS6)。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command(Ctrl)」のように、Windowsの場合を括弧内で表記しています。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

横いっぱいのワイドメニューの作成

今回は「カラーメンバー募集エリア」と「リクルートエリア」の2つを作っていきましょう。基本的な技術は、1回目〜3回目の間でご紹介しているものを使って作っていきます。

1.カラーメンバー募集エリアのデザイン作成

1.メニューエリアの枠を最初に作ります

パレットメニューから「長方形ツール」を選択しメニューエリアの長方形の枠を作成します。

サイズは横1,400pxで縦480pxとしています。この辺りは、大体でもOKです。

2.画像の枠を作り画像を挿入する

次に画像の枠を作ります。画像の枠サイズは、横600px縦400pxとします。
(600pxは、コンテンツエリアのちょうど半分のサイズとなります。ガイドを引いてあるので位置を合わせるのが簡単です)

3.画像を配置画像の配置方法は、もう大丈夫ですよね。

まず画像を挿入したら、「画像レイヤー」と先に作った「画像の枠レイヤー」の間を「option(alt)」を押しながらクリックです。すると画像枠のサイズに合わせて画像が配置(マスク)されたことがわかると思います。画像のサイズが大きかったり小さかったりした場合は、画像レイヤーを選択してサイズを調整してください。

4.見出しとテキストを配置する

画像が配置できたら、見出しとテキストを書いていきます。
見出しは、「Century Gothic」の48ptでつくっていますので、そのサイズで「Color Member」と入力します。見出しの下には1pxの黒のラインをパレットメニューの「ラインツール」を使って引いていきます。

見出しの下に「会員募集のサブ見出し」と紹介文をそれぞれテキストで入力していきます。

5.リンクボタンの作成

最後に詳細ページへのリンクボタンを作成します。今回のリンクは、外枠に1pxの黒のラインを中は透明色とします。
まず、長方形ツールを選択して長方形を作成します。この時の色は、見えればなんでもOKです。

次に、先ほど作った長方形のレイヤー「リンクボタン」をダブルクリックし、レイヤースタイルが表示されたら「境界線」を選択、右側のメニューから「サイズ」を1px、「位置」を内側、「カラー」をグレーにします。

次に、レイヤーパレットの上部にある「塗り」を0%にすれば1pxの枠線のボタンが完成です。

最後に、ボタンの中にテキストで「view detail」と記載し、ラインツールで矢印を作成して完成となります。

2.リクルートエリアのデザインの作成

次にリクルートエリアを作っていきます。基本的な作成方法は、「カラーメンバー募集エリア」とほぼ一緒です。

1.長方形の枠を作る

サイズは、「カラーメンバー募集エリア」と合わせた方が綺麗ですね。なので、横1,400pxで縦480pxとしましょう。(キャプチャのデザインは、少し縦幅を大きくしてます。)
枠の色は、白にしておいてください。

2.画像を配置してマスクをかける

ここが「カラーメンバー募集エリア」と大きく違うところです。ここでの画像は、縦幅一杯に大きく使っています。
まずは、画像を普通に配置して、1で作った長方形の枠に合わせてマスクをかけます。

すると上部の画像のようになったかと思います。ここでちょっと画像に加工をいれます。
配置した画像の左端をグラデーションをかけてぼかします。
まず、画像レイヤーを選択した状態で、レイヤーパレットの下部にあるカメラのようなアイコン「ベクトルマスクの追加」ボタンを押します。

するとレイヤーそのものにマスクがかかります。
次にパレットメニューからグラデーションツールをクリックします。

グラデーションツールを選択したら、photoshop画面上部にあるグラデーションエディターボタンをクリックします。

グラデーションエディターパネルが開きますので、ここで「描画色から透明に」になっていることを確認してください。なっていない場合は、左上から2つ目を選んでみてください。

これで画像に対してグラデーションをかけることで透明にすることができます。
OKボタンを押した後、カーソルを画像の真ん中あたりに持っていきます。そこでクリックをして離さずに左端までカーソルをドラッグして離します。
すると画像の左端がだんだんと透明になっていることがわかるかと思います。

上の画像は、わかりやすいように強めに透過をしています。
(モデルさんの顔が消えちゃっているのでダメですね。)
ちょっとかけすぎたかなと思ったら、「commnd(control)+z」で戻ってかけ直してみてください。何回かやったり直したりを繰り返すと感覚がつかめるようになるので、良い位置を探してみてください。

3.見出しとテキストを記載する

ここは、「カラーメンバー募集エリア」とまったく同じです。同じようにテキストを新しく売っても良いですし、上からコピーしてきてテキストを修正してもどちらでも大丈夫です。コピーした方が早いですね。

4.リンクボタンを作る

リンクボタンもさっきと同様です。できればコピーしてきた方が早いですので、コピーして持ってきましょう。
色が透明で外枠1pxのボタンになっているので、今度はレイヤーパレット上部の「塗り」を0%から100%に戻して色を黒にしましょう。

ボタンの色を黒にしたことでテキストと矢印が見えなくなりました。
そうしたら次に「view detail」のテキストの色を白にかえて、「contact」と打ち直します。
最後に矢印の色を白に変えて完成です。

以上で「画面幅一杯のワイドメニュー」エリアの作成は完了です。いかがでしたでしょうか。技術的にはいままで使ってきた技術でできる内容だと思います。画像をグラデーションツールで透過させるところが新しいスキルだったかと思いますが、この透過のデザインも色々なところで使えるテクニックですのでぜひ覚えておいてくださいね。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク