ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでゲーム関連のサイトをデザインする方法

Photoshopでゲーム関連のサイトをデザインする方法

投稿日:2009年05月29日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでゲーム関連のサイトをデザインしたいと思います。


Step1:はじめに

サイズが900ピクセル×740ピクセルの新規ドキュメントを作成し、色は「#fafafb」と「#d8d8d8」を選択します。
グラデーションツールグラデーションツールで反射型グラデーションを選択し、キャンバス上でドラッグします。
キャンバスの真ん中付近から上に向けて目いっぱいドラッグします。


グラデーションをかける


Step2:ナビゲーションを作る

2つの色を使ってウェブサイトのタイトルを作ります。
ここでは「#505b64」と「#0c83be」にしてみました。
フォントは「dirty ego」を使います。

タイトルを作る

長方形ツール長方形ツールか長方形選択ツール長方形選択ツールで小さな四角形を作ります。
小さな四角形を作る

好みの色で塗ったら「編集」−「変形」−「遠近法」を選択します。
下の真ん中のアンカーを左に向かってドラッグします。

四角形を変形させる

四角形にグラデーションオーバーレイを適用します。

グラデーションオーバーレイを適用させる

四角形をウェブサイトのタイトルとスローガンのそばに配置します。
四角形を必要な分複製します。
ここではナビゲーション用に6つ複製します。
間隔を1ピクセルずつ空けて四角形を並べます。

四角形を並べる

ナビゲーションの一番左のボタンのグラデーションオーバーレイを次のように変更します。

グラデーションオーバーレイを変更する

ナビゲーションボタンに文字を入れたら、テキストのナビゲーションを画像の右上に入れます。

テキストのナビゲーションを入れる


Step3:トップ画像を配置する

トップ画像をナビゲーションバーの下に配置する際は、画像の幅がナビゲーションバーと同じになるのが最適です。

画像を配置する

画像のレイヤースタイルを次のように設定すると完璧な効果を出すことができます。

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

境界線を設定する

トップ画像の下側に不透明度50%の黒い長方形を加えます。

不透明度50%の黒い長方形を加える


Step4:コンテンツを作る

トップ画像の左側の空間に次のレイヤースタイルを設定した別の長方形を加えます。

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

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

境界線を設定する

作った長方形にダミーのニュース記事を加えます。
ダミーのニュース記事を加える

次のように同じレイヤースタイルの箱をさらに3つ作ります。

同じレイヤースタイルの箱を3つ作る

大きい2つの箱はプレビューとレビューに、小さい箱は残った空間に入る広告との区切りに使います。
それぞれの箱にダミーのコンテンツを作ります。

ダミーのコンテンツを作る

それから画像の横幅と同じ幅の箱を作ってひとまとめにします。

画像の横幅と同じ幅の箱を作ってひとまとめにする

次のようにレイヤースタイルを設定すると完璧な効果を出すことができます。

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

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

境界線を設定する


Step5:完成

一番下の箱の内部にフッターを入れればウェブサイトの完成です。

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

完成


引用:Web Design Library 著者:www.hv-designs.co.uk 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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