PhotoshopでWebサイトのデザインをしよう

thumb_airmail

「連載!実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X(

実践で学ぶWebサイト制作ガイド:その4

  • 目標:実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる
  • 必要なもの:Adobe Photoshop
  • 対象レベル:Photoshopの基本的なツールの使い方がわかる

事前知識は以下の記事でおさらい!

目次

  1. 誰のため?何のため?Webサイトを作り始める前に。
  2. Webサイトの構成図を簡単に作れる便利ツール
  3. Webサイト設計図 – ワイヤーフレームの作り方
  4. PhotoshopでWebサイトのデザインをしよう ←今ここ
  5. Photoshopでスライスし、パーツ画像を作成するコツと方法
  6. 文書構造を意識しながらHTMLマークアップしよう!
  7. CSSでWebサイトのレイアウト組み+装飾の基本プロセス
  8. ついに完成!ファイルをアップロードしてWebサイトを公開!

※今回使用したPhotoshopのバージョンはCS6です。
※ショートカットキーはMacの物を掲載しています。Windowsの場合、多くのショートカットキーは⌘をCtrlに代用して使えるはず…です…。

1. 新規ファイルを作成

1200x1200pxの新規ファイルを開きます

1-1. ファイル > 新規から1200x1200pxの新規ファイルを開きます。

ガイドを作ります

1-2. コンテンツ部分の幅を960pxにするので、左端から120px のところと、1080pxのところに表示 > 新規ガイドからガイドを作ります。この幅の内側にコンテンツを入力していきます。

2. 背景色を設定

背景色を設定
描画色を#ebe6d3に設定し、編集 > 塗りつぶし またはMacなら Alt + Delete で背景を描画色で塗りつぶします。

3. 背景のストライプ模様を作成

エアメール風ストライプを作成します

3-1. エアメール風ストライプを作成します。新規レイヤーを作成し、描画色 #6699cc長方形ツールでツールモードを「ピクセル」に設定。キャンバス上のどこでもいいのでクリックするとダイアログがでてくるので、ここから35x15pxの長方形を作成します。

水平方向に-30°傾けます

3-2. 自由変形ツール(⌘ + T)で水平方向に-30°傾けます。

複製したレイヤーを右に43pxほど移動

3-3. ⌘ + J でレイヤーを複製します。複製したレイヤーを右に43pxほど移動させます。

「レイヤースタイルを追加」アイコンをクリック

3-4. 移動させたレイヤーを選択した状態で「レイヤースタイルを追加」アイコンをクリック。「カラーオーバーレイ」をクリックし、#d95483を適応させます。

パターン化

3-5. 2つのレイヤーを選択し、右クリックもしくは⌘ + E でレイヤーを結合させます。範囲を選択し、編集 > パターンを定義でパターン化します。

上部ストライプが完成!
3-6. 新規レイヤーを作成し、「模様」と名付けます。選択ツールで上から15pxのところを選択し、編集 > 塗りつぶし(Shift + F5 )で「パターン」を選択。先ほど作成したパターンを適応させます。これで上部ストライプが完成!パターン作成のために描画した 3-5のレイヤーは非表示もしくは削除してOK。

4. ロゴを作成

長方形を描画

4-1. ここでは切手風のタイトルロゴを作成します。新規レイヤーを作成し、レイヤー名を「切手 白」に。長方形ツールを選択し、ツールモード:ピクセル、描画色:白でキャンバスをクリックして140×80の長方形を描画。

端をなぞって切手風に

4-2. 消しゴムツールを選択。ブラシの設定でサイズを8px、スペースを150%にし、端をなぞって切手風に。

レイヤースタイルでドロップシャドウをプラス

4-3. レイヤースタイルでドロップシャドウをプラス。透明度:35%、距離:1px、サイズ:2px。

切手 白」の上に120x60の長方形を描画

4-4. 新規レイヤー「切手 ピンク」を作成。描画色を#d95483にし、「切手 白」の上に120×60の長方形を描画。

テキストツールでタイトル名を入力

4-5. テキストツールでタイトル名を入力。

円と線を2本描きます

4-6. 新規レイヤー「枠」を作成。シェイプツールで線の色を#666666、線幅を4pxにして円と線を2本描きます。

テキストツールでスタンプっぽい文字を入力

4-7. テキストツールでスタンプっぽい文字を入力

全部まとめてフォルダーに入れます

4-8. 4-6・7で作成したレイヤーを全部まとめてフォルダーに入れます。レイヤーを選択して「新規フォルダーを作成」アイコンをクリックか、⌘ + G

フォルダ丸ごと15°に傾けます

4-9. 自由変形ツールでフォルダ丸ごと15°に傾けます。

フォルダの透明度を50%にし、マスクを追加

4-10. フォルダの透明度を50%にし、マスクを追加。消しゴムツールを選択し、スプラッターブラシでほどよく消していきます。

ロゴ完成!
ロゴ完成!

5. グローバルナビゲーション

グローバルナビゲーション
テキストツールで文字色:#666666、サイズ20pxのグローバルナビゲーションを入力。

6. メイン画像

線

960x400pxの画像を挿入

6-1. 960x400pxの画像を挿入します。レイヤースタイルで5pxの白い枠を画像の内側に追加。

長方形を描きます

6-2. メイン画像の下に新規レイヤー「シャドウ」を作成。描画色を#666666に設定し、長方形を描きます。

真ん中を少し上に持ち上げます

6-3. 編集 > 変形 > ワープを選択。真ん中を少し上に持ち上げます。

ガウシアンぼかし

6-4. フィルター > ぼかし > ガウシアンぼかしで半径を5pxに。透明度を50%にします。

メインエリア完成!
6-5. テキストツールでタグラインを入力し、メインエリア完成!

ポイント!レイヤーを整理しよう!

レイヤーを整理しよう
ここまで10枚以上のレイヤーを作成してきました。このまま進めていけば、更にレイヤーが増えて、どこにどのレイヤーがあるのかわからなくなってしまいます。そこで、関連のあるレイヤーをフォルダにまとめたり、順序を変更して整理しましょう!今回はこのタイミングで整理しましたが、最初からエリアごとにフォルダを作っておいてもOK。

7. 画像サムネイル

新たにガイドを追加

7-1. 790px, 820pxのところに新たにガイドを追加します。このラインの左側にサムネイル一覧、右側に自己紹介テキストを配置します。

テキストツールで見出しを入力

7-2. 新規レイヤー「ピンクの線」を作成し、5px・#d95483のラインを縦に引きます。テキストツールで見出しを入力。テキストは20px、#666666。

画像を20pxの間隔を開けて配置

7-3. 210x140pxの画像を20pxの間隔を開けて配置します。必要であればガイドを作成しておくと楽に配置できるかも。

5pxの白い線をプラス

7-4. メイン画像と同様、各画像の内側に5pxの白い線をプラスして、サムネイル一覧完成!

8. 自己紹介テキスト

ラインと見出しを入力

8-1. 7-1と同様、ラインと見出しを入力。

テキストツールで文章を入力

8−2. テキストツールで文章を入力して完成!

9. フッター

長方形を描きます

9-1. 新規レイヤーに#6699ccの長方形を描きます。

白で枠を描きます

9-2. 長方形ツールのツールモードをシェイプにし、塗り:なし、線:1px・白で枠を描きます。

エアメールのシール風に

9-3. テキストを入力して完成!エアメールのシール風になりました。

デザイン完成!

駆け足気味でしたが、デザイン完成!次回はHTML・CSSコーディングにあわせて画像をスライスしていきます!

» 次回:Photoshopでスライスし、パーツ画像を作成するコツと方法

Web制作の手順や方法をさらに詳しく説明している拙著 Webクリエイターズガイドブックも参考にして頂ければ幸いです!

シェアする

コメント

  • http://www.facebook.com/profile.php?id=1287626049 Watanabe Hiroki

    いつも楽しく拝見させていただいています。

    自分はディレクター兼SOHOデザイナーみたいな感じなのでPhotoshopを触ることがあるのですが、色々な作り方があるのだなと、大変勉強になりました。

    これからも、良記事を期待しています。

  • http://twitter.com/Hikaru_Itou 伊藤 輝

    こんばんは。
    今回も、とてもためになる記事をありがとうございます。
    今回のようなチュートリアルの記事は、日本のWebデザイン系のサイトではあまり紹介されていないのでとても勉強になりました。
    細かい部分もきちんと解説していらっしゃるので、友達にもこの記事を紹介したいと思います。

  • 昌樹 寺田

    いつも参考にさせてもらってます。
    記事について一つ質問があります。

    “3. 背景のストライプ模様を作成”のところで、
    「、描画色 #6699cc長方形ツールでツールモードを「ピクセル」に設定。キャンバス上のどこでもいいのでクリックするとダイアログがでてくるので、」とありますが、ツールモードをピクセルっという表現がありますが、そもそもツールモードってどこにあるのでしょうか?画像にあるダイアログの表示の仕方方法含めてちょっとつまずいてしまったのですが。。数値で長方形シェイプを作れれば便利なので、是非知りたいです。

  • http://webcreatorbox.com Webクリエイターボックス

    説明不足ですみません :( ツールモードはキャンバスの左上に表示されます。4.ロゴを作成 のところで「Pixels」が選択されていますが、ここがツールモードです!

  • Shoko

    いつも参考させて頂いています。

    突然すみません。
    この記事だけ、デザインが崩れているのはわざと、ですか?

    (記事の感想でなく、申し訳ないです><)

  • http://webcreatorbox.com Webクリエイターボックス

    どこがどのように崩れていますか?OSとブラウザーも教えてください。

  • Shoko

    済みません。コメントではなく、メールフォームから問い合わせるべきでしたね。
    後から気づきました。

    OSはWindows Vistaで、ブラウザはGoogle Chromeをつかっています。

    現象ですが、右側にある広告や検索フォームがそっくり見えなくなっていて、コンテンツ部分が画面いっぱいに広がって表示されています。

    再読み込みしてみましたが、直りませんでした。
    2013/03/08 17:45 “Disqus” :

  • http://webcreatorbox.com Webクリエイターボックス

    修正しました。ご報告ありがとうございました!

  • take

    はじめまして。参考にさせていただいています。
    3-5 でシェイプを結合すると描画色が二つとも、ピンクに
    なってしまいます。何かやり方が違うのでしょうか。
    初心者で申し訳ございません。

    すみません。自己解決しました。
    3-1 でピクセルに変更していませんでした。
    申し訳ございません。