ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでフォトギャラリーを作る方法

Photoshopでフォトギャラリーを作る方法

投稿日:2009年03月06日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでフォトギャラリーを作ってみたいと思います。


Step1:はじめに

最初のステップで1024ピクセル×1000ピクセルのサイズの新規ドキュメントを作成します。
ドキュメントのサイズは好みに応じて選べます。

新規ドキュメントを作成する

次は塗りつぶしツール塗りつぶしツールを使って「#424347」の色で背景を塗ります。

続けて、長方形選択ツール長方形選択ツールを使って次のようにドキュメントの上部に選択範囲を作って「#353638」の色で塗ります。

塗りつぶしツールで背景を作成しヘッダー部の色を変える

内側のシャドウを追加します。
レイヤーパレット上でレイヤーを右クリックしたらドロップダウンメニューからブレンドオプションを選択して次のように設定します。

内側のシャドウを追加する

上部右側に、会社の住所をテキストで追加してみます。
フォントの色は「#999a9a」を使います。

ヘッダーテキストを追加する


Step2:ナビゲーションボタンを画面上部に作成する

ナビゲーションボタンを画面上部に追加します。
長方形選択ツール長方形選択ツールを選択して次のように選択範囲を作って好みの色で塗ります。

ナビゲーションボタンを画面上部に追加する

これからレイヤーにブレンドオプションを追加して、次のように設定します。

レイヤーにブレンドオプションを追加する

レイヤーにブレンドオプションを追加する2

続けてテキストツールテキストツールでボタンに入れるテキストを入力します。
フォントの色は「#B1EE85」を使います。

テキストツールでテキストを入力する

サブタイトルを「#A4A5A7」の色で作り、上部左に数字を配置してボタンを識別できるようにします。

サブタイトルを作成し数字を上部左に配置する

このステップを繰り返して次のようにボタンを追加します。

作成例


Step3:タイトルロゴを作成しグラデーションを入れる

左側の空いている空間に、小さなテキストロゴを追加して少しだけグラデーションを入れます。

空いている空間にテキストロゴを追加する

青色のグラデーションでは次のようにブレンドオプションを設定します。

青色のグラデーションのブレンドオプション

青色のグラデーションのブレンドオプション2

緑色のグラデーションでは次のようにブレンドオプションを設定します。

緑色のグラデーションのブレンドオプション

緑色のグラデーションのブレンドオプション2


Step4:サイドバー、コンテンツ、フッターを作成する

サイドバーと、メインコンテンツ表示エリアに背景を作りましょう。
長方形選択ツール長方形選択ツールか長方形ツール長方形ツールを使って、次のように二つの長方形を作って「#353638」の色で塗ります。

サイドバーとメインコンテンツ表示エリアを作成する

フッターエリアを作ります。
同様に「#353638」の色で塗ります。

フッターを作成する


Step5:完成

あとはコンテンツやテキストを載せれば完成です。

完成


引用:Web Design Library 著者:psdvibe.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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