ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Web2.0スタイルアイコン作成の基本

Web2.0スタイルアイコン作成の基本

投稿日:2007年6月19日   レベル:初心者    ソフトウェア:PhotoShop
Web2.0スタイルのアイコンはとても人気があり、多くのウェブサイトで使われています。このチュートリアルでは、Web2.0スタイルのアイコンをデザインする方法を学びます


Step1:Web2.0アイコンの共通点
Web2.0スタイルのアイコンに共通する特徴は以下のとおりです。

・ 端がなめらかであること
・ 色を過剰に混ぜ合わせていない。何か一つの色が中心となっている。
・ アイコンの背後の柔らかな光
・ 簡単だが目を引くデザイン

以上の4点を頭に入れて、シンプルなヘルプアイコンを作りましょう。

Step2:角丸の半径を2に設定
角丸長方形ツールを選択します。角丸の半径を2に設定します。

角丸の半径を2に設定

Step3:図を描く
図を描きます。背景色は#EFEFEFに設定します。レイヤースタイルで境界線を2px、 カラーを#5F5F5Fに設定します。

図を描く

ps_11763_3.gif

Step4:白い線を1px描く
図の中に1ピクセルの幅の白い線を描きます。

白い線を1px描く

Step5:紙のようにする
2ピクセルの幅の線を#B0B0B0のカラーで描き、紙の様に見えるようにします。

紙のようにする

Step6:ドロップシャドウを加える
3つの形(線、ベースおよび白い色のボーダー)をグループ化し、まとめます。以下の様にレイヤースタイルでドロップシャドウを加えます。

ドロップシャドウを加える

ドロップシャドウを加える2

Step7:?をタイプする
ここで、「?」とタイプします。フォントはVAG Round、サイズは50ポイントとします。 フォントがない場合は他のフォントで代用してください。

?をタイプする

Step8:ドロップシャドウを加える
テキストレイヤーに対して、以下の様にスタイルを適用します。

ドロップシャドウを加える

内部ドロップシャドウを加える

ps_11763_10.gif

Step9:完成
ヘルプアイコンができました。このチュートリアルがお役に立てば幸いです。:)

ps_11763_11.gif

引用:Web Design Library著者:YourPhotoshopGuide.com翻訳:中山



スポンサードリンク

コメント

ランダム記事5件

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