ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでオリジナルのシンプルなウェブサイトを作る方法

Photoshopでオリジナルのシンプルなウェブサイトを作る方法

投稿日:2009年06月12日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでオリジナルのシンプルなウェブサイトを作ってみたいと思います。


Step1:はじめに

まずはじめにメニューバーから背景を作ります。
「ファイル」−「新規」からサイズを800ピクセル×600ピクセルにして新規ドキュメントを作成したら、背景を白く塗ります。

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


Step2:ボタンを作る

長方形選択ツール長方形選択ツールで選択範囲を指定したら、「#78b000」で色を塗ります。

選択範囲を#78b000で塗る

「Ctrl」+「D」キーを押して選択範囲を解除します。
ここでメニューバーを作ります。
角丸長方形ツール角丸長方形ツール(半径:15ピクセル)で色は任意でまず形を作ります。

角丸長方形ツールで形を作る

レイヤーの不透明度を0%に指定したら次のブレンドオプションを設定します。

ドロップシャドウを設定する

シャドウ(内側)を設定する

光彩(外側)を設定する

光彩(内側)を設定する


べベルとエンボスを設定する

サテンを設定する

グラデーションオーバーレイを設定する

境界線を設定する

すると次のようなボタンができあがります。

結果

ボタンを5回複製したら、次のように配置します。

ボタンを配置する


Step3:ボタンに色をつける

他のボタンにも色をつけましょう。
それぞれのボタンに次のようにブレンドオプションを設定します。
2個目のボタン

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

3個目のボタン

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

4個目のボタン

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

5個目のボタン

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

6個目のボタン

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

すると次のようになります。

結果

それぞれのボタンにテキストを入力します。
横書き文字ツールで白い色を使ってタイトルを入力します。
フォントは「Myraid Pro」にします。
次の画像のように入力します。

テキストを入力する

テキストレイヤーのブレンドオプションを次のように設定します。

ドロップシャドウを設定する

テキストに影がつきます。

結果

「Ctrl」+「J」キーを使ってテキストレイヤーを5回複製して次のようにボタンの上に配置します。
それぞれのボタンを次のように入力します。

テキストレイヤーを複製する


Step4:ロゴを追加する

ここでメニュー周りの作業は終わりです。
ロゴを追加してサイト全体のデザインを終えましょう。
縦書き文字ツールで白い色を使って企業名やスローガンを入力します。
フォントは「AvantGarde Md BT」にします。

企業名やスローガンを入力する

ロゴを追加しましょう。
カスタムシェイプツールカスタムシェイプツールでパレットの中から次の形を選択します。

パズルのシェイプを選択する

画面左下にパズルのシェイプを描きます。

パズルのシェイプを描く

「Ctrl」+「T」キーを使って少しだけ回転させます。

回転する

同様にシェイプを追加します。

シェイプを追加する

仕上げの段階として、ボタンの後ろ側にうっすらとロゴを追加します。
パズルの3つのレイヤーをコピーしたら次のブレンドオプションをそれぞれのレイヤーに設定します。

カラーオーバーレイを設定する

すると次のようになります。

結果

グレーにしたパズルのコピーのレイヤーをメニューボタンの下に移動させたら、次のように拡大します。

メニューボタンの下に移動し拡大する

 


Step5:完成

シェイプはベクター化されているので拡大しても品質が下がることはありません。
これでレッスン終了です。
すばらしい企業ウェブサイトのデザインができあがったと思いませんか?

完成


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



スポンサードリンク

コメント

ランダム記事5件

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