WAN Will Way素材集TOP > パーツ素材作成講座 >

Iconの作り方(3D丸ボタン)

Adobe®Photoshop®4.0を使ってIcon作りに挑戦!
立体的に見せるのって、凄く難しいような気がしますが、照明を当てるだけで、簡単に出来てしまいます。ぜひぜひ挑戦して下さい!

今回作る作品はこれ!
完成品サンプル
( )の中の記述は、ショートカットキーになっています。

STEP 1 新規作成

Photoshopを起動してください。
[ファイル(F)−新規作成(N)](Ctrl+N)で、新しくキャンパスを開きます。
ここでは、幅(W)、高さ(H)共に16Pixles・解像度(R)72・画像モード(M)RGBカラーで作成します。
初期表示内容は、透明(T)で始めましょう。



STEP 2 作業キャンパスを拡大

作業をしやすくする為に、キャンパスを400%に拡大します。
[ビュー(V)−ズームイン(I)](Ctrl++)



STEP 3 ●を描く

図1の赤い丸い部分をクリックして、文字ツールを選択します。
キャンパスの左下でシングルクリックをすると、図2のような画面が出て来ます。
フォントを「MS P ゴシック」サイズは「15pixels」に設定し、”まる”で変換し、●を書きます。

ツールウィンドウ←図1 文字ツール←図2

STEP 4 ●をキャンパスの中心に移動させる

[フィルタ(T)−その他−スクロール]で、下の図のような、画面が出ます。
プレビューで確認しながら、右移動、下移動させて調節して下さい。
直接数字を入力してもOKですが、右移動の場合は、← →のカーソルで、下の場合は↑↓のカーソルで移動させると便利です。


スクロール

STEP 5 照明効果で立体的にする

[フィルタ(T)−描画−照明効果]で、下図1の画面が出ます。
スタイルを2AMSPOT、光源タイプをオンにチェックしスポットライトに設定します。
プレビューで確認しながら、照度は強く、焦点は狭くし、属性の部分は、好みで設定して下さい。
下図の赤い丸い部分をクリックして照明の入る大きさと角度を変えます。
[編集(E)−やり直し](Ctrl+N)で何度かやっているうちに、要領がつかめてきます。


照明効果

STEP 6 ファイルの保存

出来上がった画像をGIF形式で保存します。
[ファイル(F)−出力用プラグ(R)−GIF89a出力...]でパレットを「適応させる」にして名前を付けて保存します。


 

by JUNCO

 

素材集TOP