*

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

公開日: : 最終更新日:2016/11/19 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 で作る簡単なボタン作成方法でした。

  • Pocket

おすすめトピックス

関連記事

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

Yahoo×CSS
Yahoo!ショッピングの商品ページで外部CSSを使用する方法

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。 Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイ […]

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

Photoshopで線の円や長方形を書く2つの方法

Photoshop で線の円や正方形を書く…見ただけでは基本中の基本に見える事かもしれません。しかし、Photoshop で線の円を書く事に躓く人も多いのではないかと思います。私も最初はそうだったのです。具体的には上の画 […]

楽天ショップの会社概要のスマホ版をリリース。画像の幅をレスポンシブにする方法

楽天の各ショップには会社概要ページ、お支払・送料のページがあります。しかし、あれだけスマホ最適化、モバイルファーストが叫ばれようともここだけはスマホで見ても PC 版のままでした。 ようやく楽天が重い腰を上げて、楽天ショ […]

ポスト
どう違うの?ゆうメールとゆうパケットの違い

荷物を送るための郵便局のサービスも多種多様なものがあり、種類が多くてどれがどう違うのかもわからなくなる事もあると思います。今回はゆうメールとゆうパケットの違いについてまとめたいと思います。 目次1 ゆうメールとは1.1 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
朝食もできる古民家パン屋カフェ、米原駅徒歩5分「cafe du MBF」

滋賀県の米原駅東口から徒歩5分程度の場所にcafe du MBF とい

フリーソフトAviUtlで動画に音楽に同期する棒グラフを付ける方法(オーディオスペクトラム)

動画サイトなどで音楽が主体なものを見ていると、よく音楽に同期す

AviUtlを動画編集ソフトとして使う最低限の導入方法【2018年版】

フリーの動画編集ソフトを探していたところ、AviUtl という

エアアジア国内線に搭乗する際にチェックインなどの注意点

エアアジアとは格安航空会社(LCC)の一つです。スカイマーク、

Premiere Elementsで動画を白くフェードアウトするには?

動画をフェードイン、フェードアウトする事は動画編集の基本中の基

→もっと見る