Photoshop ネットショップ

初心者でも簡単、Photoshopでバナーのボタンを簡単に作成できる作り方

投稿日: / 更新日:

photoshop-bt

Photoshop で簡単にバナー画像などに付けるボタンの作成方法を紹介します。Web 制作や EC ショップ運営をされている方なら作成する機会も多い事でしょう。Photoshop でボタン作成は難しく感じますが、知ってしまえば上図のようなボタンであれば意外と簡単ですから覚えておいて損はないですよ。

photoshopbt2

まずボタン作成には角丸長方形ツールを使います。これを使ってボタン風に長方形を作ってみましょう。

photoshopbt3

作りました。次はこれに色を付けてみましょう。レイヤーウィンドウに注目してください。

photoshop4

先程作った角丸長方形、シェイプ1をダブルクリックします。文字の部分をダブルクリックするとレイヤーの名称変更になるので、文字がない所でダブルクリックします。

photoshopbt5

レイヤースタイルのウィンドウが表示されます。ここでは色々な効果を付ける事が可能ですが、ここにあるグラデーションオーバーレイを使うと簡単にグラデーションをかける事が可能です。左メニューのスタイルからグラデーションオーバーレイにチェックをつけましょう。そして、中央からグラデーションのボックスをクリックします。

photoshopbt6

グラデーションエディターが開きます。2つの赤丸部分をダブルクリックしてお好みのグラデーションカラーを選択します。そして、2度 OK をクリックしましょう。

photoshopbt7

グラデーションが付きました。これではまだイマイチボタンっぽくないので、もう一度レイヤーをダブルクリックしてレイヤースタイルウィンドウを開いてみましょう。

photoshopbt8

ドロップシャドウっで影を付けると立体感が増すのでおすすめです。左メニューのスタイルからドロップシャドウにチェックを入れましょう。調整部分は不透明度・距離・サイズの3箇所です。

不透明度は影の濃さを調整します。だいたい50%くらいがおすすめです。距離は影を付ける物と影の距離を設定します。サイズは影の大きさです。小さいほど影がくっきりしますし、大きいほど影がぼやけます。

お好みの影ができたら OK をクリックしましょう。

photoshopbt9

だんだんボタンっぽくなりました。次はテキストを入れてみましょう。

photoshopbt10

テキストツールを使って文字を入力します。

photoshopbt11

ボタンにテキストを入れました。後は、▲を45度回転させて少し小さくするとよりそれっぽくなりますよ。これがバナー画像の右下とかにあれば押せるような印象になりますね。

以上、Photoshop で作る簡単なボタン作成方法でした。

-Photoshop, ネットショップ

Copyright© ウェブミスト(Webmist) , 2020 AllRights Reserved Powered by STINGER.