Photoshopを使って100x100pxのシンプルな丸ボタンを作る方法を紹介します。
完成するボタン画像はこちら。
丸ボタン
■丸いボタンの制作手順
ファイル->新規で100x100pxの新規ファイルを作成します。
丸ボタン
ツールバーから[楕円形ツール]を選択して
100×100の円を[Shift]キーを押しながらドラッグして
正円を描きます。
丸ボタン
丸ボタン
あらかじめ[ガイド]を右側に引いておくと
スナップするので正円の幅を簡単に合わせられるので楽です。
レイヤーウインドウで正円を描いたシェイプ1が
選択されていることを確認してレイヤースタイルから
「ベベルとエンボス…」を選択します。
丸ボタン
「ベベルとエンボス…」ウインドウが表示されて
正円に影が表示されます。
丸ボタン
ベベルとエンボスの構造を
「深さ:150% サイズ:10px」に変更します。
丸ボタン
画像がより立体的になります。
丸ボタン
ツールバーから[多角形ツール]を選択します。
丸ボタン
[多角形ツール]の設定を「角数:3」にして
以下のように設定します。
丸ボタン
丸ボタン
レイヤーウインドウの[シェイプ2]の階層にある
「ベベルとエンボス」をダブルクリックして
レイヤースタイルを表示します。
丸ボタン
「ベベルとエンボス」の構造で「深さ:下へ」に設定します。
丸ボタン
画像の編集はこれで完成です。
丸ボタン
あとは、ファイルメニューから「Webおよびデバイス用に保存」を
選択して保存したい画像形式で保存すれば完了です。