スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでウェブサイトをデザインする方法

Photoshopでウェブサイトをデザインする方法

投稿日:2010年01月12日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopでウェブサイトをデザインする方法を紹介します。

Step1:はじめに

新規ドキュメントを1000ピクセル×1355ピクセルで作成し、
「#2493b0」と「#23454c」の色を選択してグラデーションツールグラデーションツールのリニアグラデーションを使って背景を塗ります。
最も明るい色を画面の上にします。

長方形選択ツール長方形選択ツールで、横がキャンバス幅、縦が50-150ピクセルの長方形を描いたら、
「#222223」の色で塗ります。すると次のようになります。

ヘッダー用に長方形を描く



Step2:タブ型のボタンを作る

長方形に幾らかのウェルカムテキストと角丸長方形ツール角丸長方形ツールで作ったタブ型のボタン2個を追加します。
その際、角丸長方形の下側の端を切り取ります。

次のレイヤースタイルを設定すれば効果がつきます。

シャドウ(内側)

次のようになります。

タブ型のボタンを作る





Step3:ロゴ、スローガンを配置する

ウェブサイトのタイトル、ロゴ、スローガンを最適な位置に追加し、テキストに「光彩(外側)」の効果を加えます。

光彩(外側)

ここで雲ブラシ(PSDダウンロードファイルに含んでいます)を使って、画面上部の長方形とタイトルの下に雲を追加します。

雲ブラシで雲を追加する

雲をキャンバスの右側へかかるほどには作り過ぎないようにしてください。
できるだけ中央部に配置します。

角丸長方形ツール角丸長方形ツールで長方形を2つ描いて、一つを白で、もう一つを「#212121」で塗りつぶします。
すると次のようになります。

2つの長方形を描く



Step4:6つのボックスを作る

長方形選択ツール長方形選択ツールで「#ebebeb」の色を選択し、白い角丸長方形の上部に長方形を描きます。
「Ctrl」キーを押したままで白い長方形のレイヤーをクリックし、選択範囲を作成します。
グレーの長方形をクリックして、「選択範囲」−「選択範囲を反転」してから「Delete」キーを押すと、次のようになります。

選択範囲を反転してからDeleteする

同じように操作し、角に三角形を作ります。

三角形を作る

同じ操作を繰り返して、合計6つのボックスを作ります。

6つのボックスを作る



Step5:テキスト・画像を配置する

それぞれのボックスに内容を加えます。

内容を追加する

一番下の二つのボックスの下に少し雲を加えます。
私はここでは2セットの雲のブラシを加え、不透明度を下げてよりリアルに仕上げます。

2セットの雲ブラシで仕上げる



Step6:完成

最後に、ページ上部と同じ方法でフッターを加えます。
これで完成です。

フッターを追加する



引用:Web Design Library 著者:hv-designs.co.uk 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング