Web2.0っぽいボタンを作るチュートリアル


元ネタ:Grass Button Tutorial


Paint.NET で Web2.0 っぽいボタンを作ります


(1)Drop ShadowのPluginをダウンロードし、インストールする


(2)800px×600pxで新規作成


(3)"楕円選択ツール"を使い、SHIFTキーを押しながら400px×400pxの円を作る


(4)セカンダリ色に透明をセットする


(5)"キャンバス サイズ"を125%で指定し、アンカーを中央に指定することによって円をキャンバスの中央に持ってくる


(6)外側を選択し、"選択の切り替え"(Ctrl+I)を行う


(7)150px分下に移動させ、DELETEを押す


(8)一番上のレイヤに行き、効果>ノイズ>中央値 で 半径10 パーセント0 を行う


(9)"魔法の杖"を使って外側を選択し、"選択の切り替え"(Ctrl+I)を行う


(10)プライマリ色に白、セカンダリ色に濃い灰色をセットする


(11)今作った三日月を白で塗りつぶす


(12)選択をはずし、効果>ぼかし>放射状のぼかし を 値2 で行う


(13)真ん中のレイヤに戻り、効果>ノイズ>中央値 で 半径10 パーセント0 を行う


(14)"魔法の杖"を使って外側を選択し、"選択の切り替え"(Ctrl+I)を行う


(15)"グラデーション"ツールで"線状"を設定し、左クリックを押しながら三日月にグラデーションを塗っていく


(16)選択をはずし、効果>ぼかし>放射状のぼかし を 値2 で行う


(17)一番下のレイヤに行き、効果>ぼかし>放射状のぼかし を 値2 で行う


(18)一番上のレイヤのプロパティを開き(レイヤ上でダブルクリック)ブレンドモードスクリーン、不透明度100に設定する


(19)真ん中のレイヤに対しても同様のことをやる


(20)一番下と真ん中のレイヤの間に"新しいレイヤの追加"をする


(21)新しく作ったレイヤにお好きなアイコンを貼り付ける


(22)効果>様式>Drop Shadow:Offset-x 0, Offset-y 10, Blur Radius 10 を行う


(23)一番下のレイヤでおも同様のことを行う


(24)すべてのレイヤを結合し、完成です。お疲れ様でした。



アイコンは以下のサイトより頂きました
無料アイコン素材