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

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

↑私が10年以上利用している会計ソフト!

実践で学ぶ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クリエイターズガイドブックも参考にして頂ければ幸いです!

シェアする

コメント

“Photoshop Website Design Tutorial” への1件のコメント

  1. Roman Maximyuk より:

    “Make every page as a landing page. People use search engines when looking for information. So don’t assume they enter your website from the homepage”.. There is a link to the next chapter, but no link to the previous chapter? That’s a bit sad to see on a “How to design a good website” website.

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)