ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > ラーヴァランプのレイアウトデザイン

ラーヴァランプのレイアウトデザイン

投稿日:2006年5月30日   レベル:中級    ソフトウェア:PhotoShop


1. 550×220ピクセル、黒の背景の新しいキャンバスを使います。これと似たものにしてください、望むなら大きくしてもかまいません。

2. あなたが使いたいような素敵な背景を見つけましょう。これが私のスタート時のキャンバスです。もし同じものを使いたいなら、
このイメージをクリックすれば、高画質のJpeg画像として使えますよ。底の部分はメニューを配置するために黒くしてあります。

200_201_002_1.jpg

次は効果を与えるために、いくつかの矢印を付け加えていきます。

3a. 新しいレイヤーを作成してください、文字ツールを使って、「a」と入力してください。
フォントはWingdings 3bとしてください。そして、「a」レイヤーの上で右クリックしてラスタライズを選択しましょう。

3b. 少しだけ拡大して、矢印の内側の色を白にしましょう。

3c. 「a」レイヤーの不透明度を20%程度まで落としましょう。そうすれば、私のもののように背景にフェイドインするはずです。

200_201_002_2.jpg

そして、私はいくつかのランダムなテキストと2,3のラインを加えました。
テキストに用いたフォントは’Silkscreen’と呼ばれています。ラインを作るために、次のステップに従ってください。

4a. 新しいレイヤーを作成しましょう。

4b. 3ピクセルの鉛筆ツールを選択してください、前景の色が白であることを確認して、高さを変えて、Shiftを押しながら何本か線を描いてください。

200_201_002_3.jpg

後はタイトルです。

5a. 不透明度75%に、距離5px、サイズ5pxで影を落としました。

5b. 外側の光彩のために、不透明度75%、カラー#8FE077、2pxの広がりにサイズ6pxとしました。

5c. 最後に1pxの黒でストロークを加えました。

200_201_002_4.jpg

次はメニューの作成です。私のものはとてもシンプルにしました。シンプルすぎると思うのなら、いくつか手を加えてください。

6a. メニューの区切りのめに新しいレイヤーを作成しましょう。

6b. 1pxの白の鉛筆を使って、私のような白のラインを垂直に書きましょう。

6c. レイヤーの不透明度を50%程度にします。

6d. それぞれのパートにテキストを加えて、影を落とすなり、好きな効果を加えてください。

200_201_002_5.jpg

7. 最後に、1pxの黒の線をイメージの外側に加えて、背景と区別できるようにしましょう。

8. 私はラーヴァランプが明るすぎると思ったので、少し暗くするため、対角にストライプをいれました。

200_201_002_6.jpg

さて、あとは分割して、使うのを待つばかりです!


引用:Web Design Library著者:Crunked-Designs.com翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

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