*

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

おすすめトピックス

関連記事

ネットショップ実務士検定
ネットショップ検定に合格すれば就職に有利になるかも

調べ物をしている時、たまたま「ネットショップ実務士」という検定を見つけました。コンセプトとしてはネットショップ業界で働くための新資格。ネットショップで働くための能力の基準を示し、認定する資格試験のようです。 ネットショッ […]

Photoshopで最近使用したファイルの履歴数を増やす方法

Photoshop では過去に開いたファイルの履歴をいくつか記録してくれる機能があります。ファイルを閉じてしまっても過去に開いたファイルをわざわざハードディスクの中から探してこなくてもすぐに開く事ができます。 それは、フ […]

ポンパレモールの商品ページで外部CSSを使用する方法

ポンパレモールに出店されている方向けの記事となります。 ポンパレモールと言えば、ページ作成において使用できるタグが制限されており作りづらい仕様でした。しかし、2014年12月からタグの規制が一部緩和されました。緩和された […]

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

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

Yahooショッピング及びヤフオクが常時SSL化へ。やるべき対応は?

Yahoo!ショッピングとヤフオクに限らず、Yahoo の全サービスが2017年3月までに常時 SSL 化されます。Yahoo 全体でSSL暗号化通信を行い利用者側にとっても安全でセキュアに Yahoo のサービスを利用 […]

メール
楽天メルマガR-Mailが週1回なら配信無料に!2015年9月から(※条件付)

楽天の各ショップから送る事ができるメールマガジン(R-Mail)が2015年4月から配信が有料になりました。お客様が求める最適なメールマガジンが届くような環境づくりの為の有料化でしたが、ここにきて手のひらを返したかのよう […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
月曜日に財布を忘れる時が多いので対策を考えた

財布、携帯電話、家の鍵など毎日の生活に日々身につけている物がた

Excel2010で最近使用したブックの一覧に表示しない、または表示数を指定する方法

Excel2010 で画面上部のタブからファイルをクリックして

宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

→もっと見る