スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > 3D吹き出しアイコンの作り方

3D吹き出しアイコンの作り方

投稿日:2007年9月18日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、見栄えの良い吹き出しアイコンの作り方について学びます。


Step1:基本形を作る
まず背景を黒で塗りつぶします。それから楕円ツールでシェイプを作って白く塗ります。テンキーの「+」ボタンを押します。ペンツールペンツールを選択して以下の画像のようにシェイプを描きます。

ps_11730_1.jpg

ps_11730_2.jpg

ps_11730_3.jpg

Step2:グラデーション効果
ここで、以下の画像のようにグラデーションオーバレイを適用します。

ps_11730_4.jpg

ps_11730_5.jpg

以下の画像のようにもう一つシェイプを作ります。

ps_11730_6.jpg

最初のシェイプに適用した同じグラデーションオーバレイを適用しますがアングルを(最初のシェイプの)-90度から+90度に変更します。

ps_11730_7.jpg

ps_11730_8.jpg

最初のレイヤを複製してラスタライズします。以下の画像のように複製したレイヤを(「Shift + Control + { 」キーを押して)背後に置きます。

ps_11730_9.jpg

Step3:立体的にする
新しいレイヤを作成します。以下の画像のように多角形選択ツールで選択範囲を決定します。

ps_11730_10.jpg

選択範囲を「#0588BC」で塗ります。

ps_11730_11.jpg

ここで、レイヤパレットの3番目のレイヤ名を「Control+クリック」で選択します(前のステップで複製して背後に置いたレイヤ)。

ps_11730_12.jpg

新しいレイヤを作成します。ブラシストロークのはねを使います。「#013C54」を選択して最初のシェイプの下の色を塗って影のような効果を出します。

ps_11730_13.jpg

ps_11730_14.jpg

Step4:Web2.0仕様にする
ここで、全部のレイヤをグループ化して統合します。もう一度レイヤを複製して背後に置きます。また、矢印キーを12-15回押して新しいレイヤを下側に12-15ピクセル移動します。

ps_11730_15.jpg

最後に、このレイヤの不透明度を50%前後に変更します。これで3D吹き出しアイコンの完成です。

ps_11730_16.jpg

引用:Web Design Library 著者:YourPhotoshopGuide.com翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング