2012.12.11

Photoshop – 簡単なボタンを作ってみたよ!

サイト制作の時に使える、簡単なボタンの作り方のご紹介です。

Step01 ボタン作成

フォトショップを開いて、新規ファイルを500px × 200pxで作成します。

Photoshop-スタイル1

角丸長方形ツール(U)で、丸み5pxの240px × 60pxの長方形を描きます。

Photoshop-スタイル2

描いた長方形に「レイヤー」→「レイヤースタイル」→「レイヤー効果」を設定します。

Photoshop-スタイル3

Photoshop-スタイル4

Photoshop-スタイル5

Photoshop-スタイル6

すべての効果を適用すると、最初に描いた長方形がこのようになります。これでボタンの本体が完成!!

Photoshop-スタイル7

Step02 テキストとアイコンの追加

できたボタンの本体に、アイコンとテキストを追加します。

Photoshop-スタイル8

これで完成でもOKですが、少しさびしいから私は、簡単にテキストとアイコンにレイヤー効果を加えるよ!

Photoshop-スタイル9

完成です!!これを利用していろいろアレンジすれば時間をあまりかけないで、簡単にボタンができますねぇ。