ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでミニブラウザのフレームを作成する方法

Photoshopでミニブラウザのフレームを作成する方法

投稿日:2012年8月3日   レベル:初心者    ソフトウェア:Photoshop

このチュートリアルでは、ミニブラウザのフレームを作成する方法を紹介します。

Step1:はじめに

あなたが作成したウェブサイトの作品集を誰かに見せる際に、ブラウザのフレーム画像を加えることによって、
ウェブサイトが実際のブラウザ上でどのように見えるかを感じてもらうというのは良い方法です。

作品集を掲載している様々なブログを見ていて、デザイナーがブラウザのフレーム画像を使うことがトレンドになってきていることに気づきました。
例えばdevpressのテーマのページです。ここでは最小限しか使われていませんが、ブラウザのフレーム画像がサイト上でどのように使われているかをご覧いただけると思います。

前置きはこのぐらいにして、作品集のページに載せるミニブラウザのフレームをPhotoshopで作成する方法を学びましょう。
それでは始めましょう。

Photoshopを開いて、キャンバスを400pxx300pxに設定してください。

新規作成



Step2:角丸長方形ツールを使って色を塗る

角丸長方形ツール(U)を選んで半径を5pxにセットし、本体と名付け、#ffffffの色で塗ってください。

角丸長方形ツールで色を塗る



Step3:新規レイヤーを作成する

新規レイヤーを作成し、フッターと名付け、長方形選択ツール長方形選択ツール(M)で本体レイヤーの下に長方形を描き、#cfcfcfの色で塗ってください。
次に、フッターレイヤーが選択された状態で、本体レイヤー上でCTRLを押しながらクリックして、CTRL + SHIFT + Delを押してください。
これにより本体レイヤーの外側のはみ出した部分が消去されます。

新規レイヤーを設定
Step4:グラデーションオーバーレイを設定する

フッターレイヤー上で右クリックをして、「レイヤー効果」−「グラデーションオーバーレイ」を選択して、色を選んでください。

レイヤー効果を設定

グラデーションの設定をします。

グラデーションを設定
Step5:フッターの線を設定する

フッターの線には#b7b7b7の色を使い、サイズは1pxにしてください。

フッターに境界線を設定

ヘッダーを作成する手順はフッターと同じです。今回は少し大きめにしてください。
フッターのレイヤースタイルをコピーするために、フッターレイヤー上で右クリックをして、
「レイヤースタイルをコピー」を選び、ヘッダーレイヤーの上で右クリックをして、レイヤースタイルをペーストしてください。



Step6:カスタムシェイプツールを使う

戻ると進むのボタンにはカスタムシェイプツールカスタムシェイプツール(U)を選んで、シェイプを使ってください。

ボタンを作る

次に、進むボタンをコピーして、CTRL+Tを押し、右クリックをして水平方向に反転を選んでください。
図と同じようになっているはずです。

コピーして作る

Step7:アドレスバーを作る

角丸長方形角丸長方形ツール(U)を選んで半径を3pxにセットして、#ffffffの色で塗ってください。このレイヤーはアドレスバーと名付けます。

アドレスバーを作る

Step8:境界線を設定する

アドレスバーレイヤー上で「レイヤー効果」−「境界線」を選んで、前景色を#bebcbcに、サイズは1pxに設定してください。

境界線を設定する

Step9:テキストを設定する

アドレスバーの中にテキストを加えました。フォントはArialの2ptで色は#7e7e7eです。

文字を入力

Step10:影を作る

影を作ります。新規レイヤーを作成し、影と名付けてください。楕円形選択ツール楕円形選択ツール(M)を選んで、同じようにシェイプを描いて下さい。色は#000で塗ります。

影を作る

Step11:フィルタのぼかしを設定する

「フィルタ」−「ぼかし(ガウス)」を選んで3.6pxにセットし、不透明度は33%にします。CTRL+Jを押して複製を作成し、、左側の本体レイヤーの下に置きます。

フィルターを設定

Step12:完成

最後に細部の仕上げをすると完成です。

完成

最初にミニブラウザを作成した際にはサイズやデザインが限られるので難しいだろうと思っていましたが、 実際にやってみるととても簡単でした。


引用:Web Design Library 著者:sanjaykhemlani 翻訳:幕澤/p>



スポンサードリンク

コメント

ランダム記事5件

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