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

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

3回目は、コンセプトエリアとニュース・ブログエリアの作成を行っていきたいと思います。
コンセプトは、メイン画像の下によく位置することが多く、会社や店舗からのメッセージ文を載せることが多いです。
ニュースやブログは、多くのWEBサイトで掲載するコンテンツですよね。今回は、ニュースとブログをそれぞれ2段組(2カラム)でデザインをしていきます。

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

<今回作成する部分の完成図>

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

コンセプトエリアを作る

<手順>
1.コンセプトエリアに合わせてガイドを引く
2.ガイドに合わせて長方形ツールで図形を作る。図形の色は白。
3.画像を配置して、図形の枠に合わせてマスクをかける。(前回と作業手順は同様)
4.画像を透明にする
5.テキストを入力する

1.コンセプトエリアに合わせてガイドを引く

今回のコンセプトエリアの高さは550pxとしています。メイン画像の下から550pxのところでガイドを引いていきましょう。(ガイドの引き方は、定規からドラッグして引っ張ってくることで引くことができます。前回学習しましたね)

2.ガイドに合わせて長方形ツールで図形を作る


長方形ツールを使って四角形を作りました。(本当は白色なんですけど、見えないので・・・便宜上グレーの色をつけてます。皆さんは白にしておいてくださいね)

3.画像を配置して、図形の枠に合わせてマスクをかける。

上記が、画像を配置して2.で作った四角形にマスクをかけた状態です。マスクのかけ方はもう覚えましたか? 一応おさらいをしておきますと、

レイヤーパレットの「画像の枠」と「画像」レイヤーの間を[option(alt)]を押しながらクリックですよ。すると画像レイヤーの左に矢印がでて少し右に移動していることがわかります。
※必ずレイヤーの順番として枠の上に画像があることを確認!

4.画像を透明にする

次に今回は画像の上に文字(テキスト)を載せるので、文字が見えやすいように画像を半透明にします。
画像レイヤーをクリックして選択した状態にしておいてください。
次にレイヤーパレットの上に、「不透明度」という枠がありますので、それをクリックして15%にしてください。(通常は、100%となっています)

すると下記のように画像が半透明になったことがわかります。

5.テキストを入力する

最後に画像の上にテキストを入力して完成です。
(テキスト入力については、説明しなくても良いですよね)

ニュース&ブログエリアを作成する

<手順>
1.見出しを作る
2.サムネイル画像の枠を作る
3.日付とテキストを入力する
4.同じものを2つ下にコピーする
5.コピーした画像とテキストをそれぞれ変更する
6.ニュースで作ったエリアをそのままコピーしてブログエリアとする
7.見出し・画像・テキストをそれぞれ変更する

1.見出しを作る

まず始めにニュースエリアから作っていきます。最初は見出しを作りましょう。

今回の見出しは、フォント「Century Gothic」、サイズ40pt、ブラックとしています。また、見出しの下に1pxの黒のラインを引いて少し目立たせています。

2.サムネイル画像の枠を作る

じつはここがこのWEBサイトのデザインで一番手を加えているところです。以外と思いますが、小さなところこだわっておくとデザインの仕上がりも変わります。
まず、外枠を 「長方形ツール」を使って書きます。色はグレーです。

次に外枠に1pxの枠線をつけていきます。Photoshopでは枠線をつけるのが結構めんどくさいのですが、非常によく使いますので頑張って覚えましょう。

1 作った長方形レイヤーをダブルクリック(※文字をクリックしないように)
2 レイヤースタイルが表示されるので、左のメニューから「境界性」を選択
3 境界線のメニュー上部の「サイズ」を1pxに設定
4 「位置」を内側に変更
5 「カラー」をクリックしてグレーの色を選択する
6 最後にレイヤーパレットの上部にある「塗り」の数字を0%にします。

すると下記のように1pxの外枠が引けたかと思います。

次に外枠の内側に画像を配置します。ここでの画像の配置の方法も少し手間をかけてます。
1.さっき作った長方形をコピーしてまったく同じ位置に配置します。
2.四角形(レイヤー)の色を黒にしてください。
2.コピーしたレイヤーをダブルクリックしてレイヤースタイルを表示させます。
3.左メニューから「境界線」を選択し、「サイズ」を3pxにします。
4.「カラー」をクリックして白の色を選択します。

すると、下記のように最初に作った枠の中に、黒い四角形が入るようなデザインになります。

次に黒いレイヤーの上に画像を配置してマスクをかけると、下のようなサムネイル画像が完成となります。

3.日付とテキストをつける

サムネイル画像が完成したら、その横に日付とテキストを追加すれば、ニュースの出来上がりです。

4.作ったニュースをコピーして内容を差し替える

1つのニュースができたらそれを丸っとコピーしましょう。
今回のNEWエリアは、3つの情報を掲載して、それ以外は一覧ページへリンクするデザインとしています。コピーのやり方は大丈夫ですか? 一応書いておきますね。
①パレットメニューから「選択ツール」を選択
②サムネイル画像・日付・テキストを囲むように範囲選択する
③選択されている状態で、どれか一つのレイヤー(コンテンツ)をクリックしたまま「option(alt)」を押したまま下にドラッグします。
④先ほど作ったNEWがもう一つできたのが確認できます。
⑤位置をキーボードの矢印キーなどえ微調整をして完成


コピーが完了したら、コピーした方の写真とテキストを変更します。それをもう一度繰り返して3つNEWができたら完成となります。

5.Blogエリアを作る

続けてBlogエリアを作りましょう。こちらは、基本NEWエリアのコピーで作れてしまいます。
①NEWエリアを「選択ツール」で全選択し、そのまま右へコピーをしましょう。
②NEWSの見出しをBlogに変更します。
③3つそれぞれのNEWを画像とテキストを変更して完成です。

はい。以上でコンセプトエリア、NEW&BLOGエリアの完成となります。
NEWSエリアのサムネイル画像が少し手間をかけているので、難しいところもあったかもしれません。でもこちらもよく使う技術でもあるので、ぜひ覚えてみてください。

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


スポンサーリンク







シェアする

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

フォローする

スポンサーリンク