ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで3Dのクリスタルアイコンを作る方法

Photoshopで3Dのクリスタルアイコンを作る方法

投稿日:2009年02月27日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopで3Dのクリスタルアイコンを作ってみたいと思います。


Step1:はじめに

750ピクセル×550ピクセルのドキュメントを作成します。

カスタムシェイプツールカスタムシェイプツールのプリセットから「オスマーク」を選択します。

次の図のようにパスを描きます。

カスタムシェイプのオスマークからパスを描く

新規レイヤーを作成して「上面」と名前を入れます。

パスパネルで、作成したばかりの作業用パスを選択します。

レイヤーパネルに戻り、「上面」の選択範囲を「#497923」で塗ります。

新規レイヤーで上面を作成


Step2:本体レイヤーを作成する

「上面」レイヤーを隠し、次のように新規レイヤーを作成して「本体」と名前を入れます。

上面を作った操作を繰り返しますが、今回は選択範囲を「#4AC1FF」で塗ります。
本体の不透明度を50%に設定します。

新規レイヤーを作成して不透明度を50%に

ここが難しいところです。
「本体」レイヤーを選択して「Ctrl」+「A」キーを押してレイヤーを全部選択します。

移動ツールを選択してから「Ctrl」+「Alt」+「T」キーを押します。
下矢印キーを1度押して(1ピクセルだけ下に動かします)Enterキーを押します。

「Ctrl」+「Alt」+「Shift」+「T」キーを押して移動の操作を繰り返します。
希望する本体の厚みができるまで操作を繰り返します。

希望の厚みになるまで位置をずらして複製する

「上面」レイヤーを再表示させてブレンドモードを「オーバーレイ」に変更して不透明度を50%にします。

レイヤーを右クリックしてレイヤー効果を選択します。
「光彩(外側)」を選択して、描画モードを「比較(明)」、色を「#FFFFFF」、不透明度を100%、サイズを5ピクセル、その他についてはデフォルトの設定にします。

ブレンドモードをオーバーレイにし不透明度を50%に


Step3:底面レイヤーを作成する

新規レイヤーを作成して「底面」と名前を入れます。
このレイヤーを「上面」レイヤーと「本体」レイヤーの下に入れます。

上面を作った操作を繰り返して選択範囲を「#00F5FF」で塗ります。
底面の位置を調整して次の画像のようにします。

上面のレイヤーを作成する操作を繰り返し底面を作成

「底面」レイヤーを複製して「影」と名前を変えます。
「影」レイヤーを「底面」レイヤーの下に配置します。

「影」レイヤーで、「フィルタ」−「ぼかし」−「ぼかし(ガウス)」を選択します。
半径を10ピクセルに設定します。

ぼかし(ガウス)を適用し半径を10ピクセルに


Step4:光沢や反射を追加する

新規レイヤーを作成したら他のレイヤーの上に配置して「光沢」と名前を入れます。

楕円形選択ツール楕円形選択ツールで大きい円形の選択範囲を作ります。
ブラシツールブラシツールで300ピクセルのソフトエアブラシを選択します。
円形の選択範囲の下の部分のわずかに外側を塗ります。

このレイヤーの不透明度を60%に設定します。

楕円形選択ツールで選択した箇所の外側を塗る

同じ操作をオスマークの矢印部分に対して行います。

同じ操作を矢印部分にも

新規レイヤーを作成して「反射」と名前を入れます。

次のように2つの白い帯を描きます。
本体の外側の帯を消します。

このレイヤーの不透明度を30%にします。

2つの白い帯を描き外側の帯を消す

同じ操作を本体の内側に対しても行います。

同じ操作を本体の内側にも


Step5:完成

最後に

これでいい感じに光る3Dクリスタルアイコンができました。
さらに青の背景と輝きを追加してデザインに磨きをかけてみます。

完成

このセッションがお役に立つことを願っています。
ありがとう!


引用:Web Design Library 著者:10steps.sg  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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