ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでウェブレイアウトを作成する方法

Photoshopでウェブレイアウトを作成する方法

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

このチュートリアルでは、Photoshopでウェブレイアウトを作ってみたいと思います。

Step1:はじめに

900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色/描画色に設定します。
次に、長方形選択ツール長方形選択ツールでカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。
さらに、次のようなレイヤースタイルをその長方形に追加してください。

ドロップシャドウ

境界線

今のところこんな感じです。

レイヤースタイル効果



Step2:タイトル・キャッチコピーを入力する

横書き文字ツールでウェブサイトのタイトルとキャッチコピーを入力します。

タイトル・キャッチコピー

タイトルに次のようなレイヤースタイルを追加します。

グラデーション

レイヤースタイル効果02

【クリックして拡大】





Step3:ボタンを作成する

角丸長方形ツール角丸長方形ツールを選択しヘッダーの下に小さな長方形を描きます。

小さな長方形

その小さな長方形に、下記のようなレイヤースタイルを追加してください。

光彩(外側)

光彩(内側)

グラデーションオーバーレイ

境界線

小さな長方形はきれいなボタンみたいになったはずです。

レイヤースタイル効果03



Step4:必要な情報を入力する

このボタンをウェブサイトに必要な数だけ複製して、ヘッダーの一番下に合わせて並べ、メニュー名を書き入れてください。

ボタン複製

【クリックして拡大】

ヘッダーを複製し、「編集」−「変形」−「垂直方向に反転」を適用し、
複製したレイヤーをカンバスの一番下に移動します。これがフッターになります。

横書き文字ツールでフッターに必要な情報を入力してください。

フッター

【クリックして拡大】



Step5:コンテンツボックスを作成する

それでは、コンテンツボックスを作成しましょう。
長方形選択ツール長方形選択ツールで次のような2つのボックスを描いてください。

コンテンツボックス

次のようなレイヤースタイルを両方のボックスに適用します。

グラデーションオーバーレイ

境界線

2つのボックスを上下に並ぶように配置してください。

こんな感じになっているはずです。

レイヤースタイル効果04



Step6:コンテンツボックスを複製する

両方のボックスを複製して、それぞれ独立したコンテンツボックスを作成してください。

ボックス複製

【クリックして拡大】

全てのコンテンツボックスに見出しを付けてください。

見出し

【クリックして拡大】



Step7:完成

これで出来上がりです。 コンテンツを加えれば下記のような感じになります。

完成

【クリックして拡大】



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



スポンサードリンク

コメント

ランダム記事5件

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