*

初心者でも簡単、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

おすすめトピックス

関連記事

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

楽天ショップで売り切れ商品が入荷したら通知する機能があります

(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]

カレンダー
ネットショップの営業日カレンダーを自動更新にして手間を省く

ネットショップと言えば必ずと言っていいほどありますよね。休業日と営業日をお客様に知らせる為の営業日カレンダー。お店によって実装方法は様々です。カレンダーは画像であったり、table タグでカレンダーを html で直打ち […]

ストライプ線
簡単!Photoshopで斜めのストライプ線の作り方

Webデザインやバナーなどでもストライプ線(斜めの縞々模様)はよく見かけるデザイン手法です。ウェブサイトで見出しの背景に使っても良い感じになります。しかしいざ作ってみようとすると作り方が思いつかないという方もいらっしゃる […]

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

著者について

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

フォローはこちら

       

       
滋賀県長浜市のキーマカレー専門店!倉庫を改装したレトロな「キャリールーム」でランチ

滋賀県長浜市にキーマカレー専門店があるという事を instag

病院経営ゲームのテーマホスピタル新作が2018年秋にSTEAMで発売「Two Point Hospital」

2018年1月16日に病院経営シミュレーションゲーム「Two

Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

→もっと見る