ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでミニレイアウトを作る方法

Photoshopでミニレイアウトを作る方法

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

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

Step1:はじめに

800x600の新規ドキュメントを作成し、背景を#262626の色で塗りつぶします。
新しいレイヤーを作成し、「ヘッダー」という名前を付けます。
カンバスの一番上の部分を長方形選択ツール長方形選択ツールで次のように選択します。

新規ドキュメント



Step2:塗りつぶす

グラデーションツールグラデーションツールを選択し、次の色のグラデーションで塗りつぶします。

グラデーション塗りつぶし

ヘッダーレイヤーの下に新規レイヤーを作成し、「カラーバー」と名前を付け、
長方形選択ツール長方形選択ツールでヘッダーの下に先ほどより小さな長方形を描き、
オレンジ色のグラデーションで塗りつぶします。
次に、そこに1ピクセルの黒い線を描きます。こんな感じです。

オレンジ色のグラデーション





Step3:タイトルなどを追加

お好きなタイトル、キャッチフレーズ、ロゴ、ナビゲーションを追加してください。

タイトルなどを追加



Step4:本文を追加

角丸長方形ツールオレンジの線を追加を選択して、本文を書く部分を描きます。
1ピクセルのオレンジの線を使用してください。

オレンジの線を追加

本文を追加して、本文エリアのボックスにラベルを貼ってください。

本文を追加



Step5:完成

最後に、フッターに重要事項を加えれば完成です。

重要事項

完成

             【クリックして拡大】



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



スポンサードリンク

コメント

ランダム記事5件

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