スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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月の人気記事ランキング