Photoshopを使ってWebサイト(ブログ)用のボタンを作る方法

PhotoshopでWebサイト(ブログ)で使えるボタンの作り方を書いていきます。

例えば、下記のような簡易的なボタンなら簡単に作成できます。

今回はPhotoshopで作りますがGIMPでも同様の手順で作れますので、興味がある方は作ってみて下さい。

以下、手順です

①Photoshopを起動してファイル>新規作成>Web>カンパスカラーは透明を選択。

②長方形選択ツールで適当にボタンの形を作ります。

③描画色を指定したら塗りつぶしツールで塗りつぶします(もし透明のボタンを作りたい場合は後から変更できますので、今は適当に塗りつぶしてください)

④ウィンドウ>スタイルを開きます。ここで色々なボタンのスタイルを試すことができます(透明なども選択可能)

⑤ボタンのスタイルパターンを増やすために右上の設定ボタン(下記画像)をクリック>『ボタン』を選択してスタイルを置き換えます。

⑥横書き文字ツールを選択して文字を入力します。

⑦好みのフォント・サイズ・色を指定します。

⑧レイヤー効果にある効果『ベベルとエンボス』『ドロップシャドウ』の数値を変更して好みのボタンにします。

⑧形が出来たらスライスツールを使用して少し大きめに囲います。

⑨ここでボタンをクリックすることでURLなどの埋め込みも可能ですが、HTMLでリンクしたほうが楽だと思いますので設定する必要もないと思います。

⑩ファイル>書き出し>Web用に保存を選択。

⑪スライス選択ツールでボタンを選択したら、タブを『元画像』から『4アップ』に変更して画質を選択します。保存形式はPNGの方が個人的に好きなのでPNGを選択(JPEGの方がファイルサイズは小さくなります)。ここでボタンのサイズが大きい場合はプレビューを見ながらサイズを調整してください。

⑫最後にフォーマットを選択します。HTMLと画像で選択してもいいですがHTMLが分かるなら画像だけでいいと思います。スライスは『選択したスライス』。

色やデザインはセンスのみですし、もし複数のレイヤーを重ねてボタンを作る時はスライスツールで切り抜く前に画像を統合化しておいたほうがいいと思います。

以上です。

スポンサーリンク