*

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

おすすめトピックス

関連記事

手間不要!楽天スマホページ自動で楽に作れる「Snapp」が凄い

ネットショップにおいてもスマートフォンからの利用者が PC 利用者を上回りつつある事は周知の事実となっています。PC のページは作りこんでいても、スマートフォンページまでは手が回らない!という方もいらっしゃると思います。 […]

スマートフォン
楽天ショップの商品ページスマホ版が見やすく改善されリニューアルしてました

2015年9月下旬、楽天ショップの商品ページのスマートフォン版が見やすく、買いやすく改善されました。楽天本家の仕様改善です。告知はされていますが、ひっそりといつの間にか改善されていたので知らない方もいるかもしれません。そ […]

Photoshopで画像を開こうとしたら「要求された操作を完了できません。プログラムエラーです。」で開けない

+ Photoshop で画像を開こうとしたら上図のようなエラーが出ました。「要求された操作を完了できません。プログラムエラーです。 これから編集しようとしたのに画像を開けずじまいです。クライアントから送られてきた画像で […]

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

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

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

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る