スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

    ニュース

サイト内検索

 メールマガジン

レンタルサーバー比較

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

写真素材
写真素材 Photooo

Template Tune
テンプレート編集サービス
Template Tune

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

株式会社ネットオン
Webサイト構築
システム開発

KAGOYA×テンプレートモンスター ジャパン
専用・共用サーバ
KAGOYA

テクニック

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件

コメント

スクリーンショットが多数掲載されていてわかりやすいです!

投稿者 Mana : 2010年01月09日 18:36


こんにちわ。
このサイトをよく観覧する者ですが…

思ったのですがこういう画像をフォトショで作った後はどうプログラミングして実際にページにするかなどの記事はないのでしょうか?

なければ今後HTMLでもCSSでもクリッカブルマップ?でも書いていただきたいな、と思います。

投稿者 what : 2010年01月19日 00:30


いつもここで勉強させていただいてます。
自分はまたなんの知識もない状態なのですが、
作ったレイアウトをそのままビルダーとかに移動して
HPにすることはやはりできないのでしょうか?
しょうもない質問で申し訳ありません。

投稿者 you : 2010年01月24日 09:33





保存しますか?


2010年6月の人気記事ランキング

トラックバック

このエントリーのトラックバックURL: