ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopでAppleのモニターをデザインする方法

PhotoshopでAppleのモニターをデザインする方法

投稿日:2009年05月19日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、PhotoshopでAppleのモニターをデザインしてみたいと思います。


Step1:はじめに

はじめに新規ファイルを作成します。
ここでは600ピクセル×500ピクセルで72dpiにして、背景を黒く塗ります。


Step2:外枠を作成する

新規レイヤーを作成して「Apple's Monitor Design」と名前をつけます。
新規レイヤー上でサイズ395ピクセル×250ピクセル、「#F4F4F4」の色で長方形を描きます。

長方形を描く

レイヤースタイル(「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択)で白い長方形のレイヤーの「シャドウ(内側)」、「光彩(内側)」、「グラデーションオーバーレイ」を次のように設定します。

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

光彩(内側)を設定する


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

新規レイヤーを作成して「#0A0A0A」の色でサイズ363ピクセル×217ピクセルの暗い長方形を描きます。
レイヤースタイル(「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択)で白い長方形のレイヤーの「光彩(外側)」、「光彩(内側)」を次のように設定します。

光彩(外側)を設定する

光彩(内側)を設定する

結果


Step3:台部分を作成する

新規レイヤーを作成して、角丸長方形ツール角丸長方形ツールで「#D9D9D9」の色でサイズ68ピクセル×29ピクセルの小さな角丸長方形を描きます。
楕円形選択ツール楕円形選択ツールでシェイプの端を切り取ります。

角丸長方形を描き、楕円形選択ツールでシェイプの端を切り取る

レイヤースタイル(「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択)で端を切り取った角丸長方形のレイヤーに対して「シャドウ(内側)」、「グラデーションオーバーレイ」を次のように設定します。

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


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


結果

新規レイヤーで、「#2B2B2B」の色でサイズが395ピクセル×29ピクセルの角丸長方形を描いてこれまで作業をしたレイヤーの下に配置します。

新規レイヤーで角丸長方形を描き、これまで作業したレイヤーの下に配置する


Step4:スクリーンにイメージをはめこむ

スクリーンにサイズが363ピクセル×213ピクセルのサンプルイメージを入れます。
Appleのロゴをスクリーンの下に入れます。
このデザインで使うAppleのロゴはここからダウンロードできます。

サンプルイメージを入れる

「Apple's Monitor Design」レイヤーを複製したら、「レイヤー」−「下のレイヤーと結合」を選択して、複製したデザインを作業レイヤーに結合します。
それから「フィルタ」−「ぼかし」−「ぼかし(ガウス)」で次のように設定します。

「ぼかし(ガウス)」を設定する


結果



Step5:完成

レイヤーパレット上で複製したデザインを最初に作業した「Apple's Monitor Design」レイヤーの後ろに配置します。
最後にぼかしを入れたデザインの上端と下端を削除すれば完成です。

完成


引用:Web Design Library 著者:PsDeluxe 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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