Photoshopのボタン画像の作り方!初心者でもオシャレなデザインで簡単作成!

この記事は5分で読めます

こんにちは、カズーイです。

 

インターネットでのビジネスや集客を考えていると、

Webサイトの商品購入ページやメルマガ登録ページなどで、

登録(申し込み)用ボタンを設置する機会は多いと思います。

 

しかし無料で使えるボタン作成ツールなどは、

簡単に作れる反面、少々デザインが汚かったり、

ライバルサイトと被ったりしてしまいがちです。

 

そこで今回はPhotoshop(フォトショップ)を使用して、

シンプルだけどオシャレなデザインのWebボタンを、

簡単に作る方法について解説します。

 

Photoshopを全然使ったことが無い初心者でも、

簡単に作成できるように解説していますので、

ぜひボタンの作り方を覚えてご自身のサイト等で使ってみて下さい。

 

 

Photoshop(フォトショップ)で作成するボタンの見本

 

今回、作成するWebボタンの見本は以下のような感じです↓

 

button

 

良くあるデザインのボタンだと思いますが、

フォトショで作っているだけあって綺麗ですね。

 

「こんなのが簡単に作れるの?」と思う方もいるでしょう。

 

でも大丈夫です、安心して下さい。

 

パッと見は作成するのが難しく感じるかもしれませんが、

実はフォトショを使えば幾つかの工程をクリアするだけで、

簡単に作れてしまうのです。

 

それでは早速、制作工程を解説していきましょう。

 

 

Photoshop(フォトショップ)の初期設定

 

まずフォトショップを開きます。

 

ws000052

 

「新規」をクリックして下さい。

 

 

ws000053

 

すると、このような初期設定をする画面が開きますので、

まずは幅と高さを設定していきましょう。

 

 

ws000054

 

単位は「pixel」が1番馴染みがあると思うのでおすすめです。

 

ちなみに幅と高さは後から変更することも可能なので、

適当に決めたら「OK」をクリックして構いません。

 

 

ws000085

 

「OK」をクリックすると、こんな感じの画面が開きます。

 

この白い背景にボタン画像を作っていくのですが、

こちらのサイズを変更したい場合は上部のメニューから、

「イメージ」→「カンバスサイズ」でできるので覚えておいて下さい。

 

 

Photoshop(フォトショップ)を使用したボタンの作り方

 

では、いよいよボタン画像を作成していきます。

 

ws000055

 

まず左側のメニューから角丸長方形ツールを選択します。

 

 

ws000056

 

そして、この様にボタンのベースとなる長方形を作って下さい。

 

 

ws000059

 

長方形の色を変える場合は左上に、

このようなカラーパレットが表示されているはずなので、

イメージに合う色を選択しましょう。

 

もしイメージ通りの色が無い場合は、

レインボーの四角い箇所をクリックすると…

 

 

ws000058

 

このように色味を自由に調節できるのでやってみると良いです。

 

 

ws000086

 

ちなみに今回はこのような色の画像をベースに、

ボタンを作成していきたいと思います。

 

余談ですがボタンのカラーは、

緑が1番クリック率が高いというデータがあるので、

合わせて覚えておくと良いですね。

 

 

ws000060

 

そして、次の工程ですが右下にあるレイヤーを右クリックすると、

 

 

ws000061

 

このようなメニューが表示されるので、

1番上にある「レイヤー効果」を選択して下さい。

 

 

ws000062

 

すると、このような画面が表示されますので、

ここから画像を編集していきたいと思います。

 

今回のボタンで使用するのは、

「境界線」「光彩」「ドロップシャドウ」の3つです。

 

では順番に解説していきましょう。

 

 

ws000064

 

まずは境界線から効果を付加していきます。

 

チェックを入れると…

 

 

ws000065

 

画像だとわかりにくいかもしれませんが、

画像の縁に濃い緑の境界線が現れたのが分かるでしょうか。

 

この境界線をもっと太くなるように編集すると、

 

 

ws000066

 

このような感じになります。

 

これが境界線の効果なので覚えておいて下さい。

 

 

ws000067

 

続いて光彩を施した画像がこちらです。

 

これも画像だと分かりにくいかもしれませんが、

画像の内側が白く光ったように加工されています。

 

 

ws000068

 

そして最後にドロップシャドウを加えます。

 

画像の下側に影が現れているのが分かると思います。

 

これでボタン画像の大体のベースは完成しました。

 

ws000071

 

後はこちらに文字を加えていけば、ほぼ完成するのですが、

その前に画像を中央に移動させたいと思います。

 

 

ws000072

 

画像やテキストを移動させたいときは左メニューの1番上にある、

「移動ツール」をクリックして使用します。

 

 

ws000074

 

後は移動したいレイヤーを選択して、

 

 

ws000075

 

画像をクリックしたままマウスを動かすと、

このように移動できます。

 

中央に揃うと画像のように線が表示されるので、

これで画像の移動は完了です。

 

これもフォトショップを使っていると、

よく使う機能なので覚えておいて下さい。

 

 

ws000076

 

画像の移動が済んだら次はいよいよテキストを挿入します。

 

左メニューのTのマークがテキスト入力になるのでクリックして下さい。

 

 

ws000077

 

今回は「無料登録はこちら」と入力しました。

 

画像は既に中央に移動させていますが、

もしズレている場合は先ほどの移動ツールで、

テキストを移動させて中央に揃えて下さい。

 

 

ボタンに光沢を加える方法

 

先ほどまでの過程でボタンはほぼ完成しました。

 

シンプルなデザインが好きな場合は、

あのまま使って頂いても構いません。

 

しかし、今回は追加でボタンに光沢を加えたいと思います。

 

 

ws000078

 

まず左メニューから楕円形ツールを選択して下さい。

 

 

ws000079

 

そして、このようにボタン画像に半分重なるように楕円を作ります。

 

楕円の色は白を選択して下さい。

 

 

ws000080

 

そしたら楕円のレイヤー効果で「不透明度」を30%程度に設定します。

 

すると…

 

 

ws000081

 

このように楕円が透けてボタン画像に光沢を加えることが出来ました。

 

後は楕円を移動ツールで中央に揃えて、

 

 

ws000082

 

光沢感のあるオシャレなボタンの完成です。

 

あとはこの画像を書き出しして終了ですね。

 

 

ws000083

 

画像の書き出しは、

「ファイル」→「書き出し」→「書き出し形式」でできます。

 

 

ws000084

 

こちらの画面から右下にある「すべてを書き出し」をクリックしたら、

一瞬で画像が生成されます。

 

これでフォトショップでのボタン作成方法は以上です。

 

 

まとめ

 

ということで今回は、

フォトショップを使ってボタンを作る方法を解説しました。

 

ただのテキストリンクをボタンに変更することで、

目立つだけでなくページ全体のデザインも引き締まりますので、

ぜひ今回の記事を参考にオシャレなボタンを作ってみて下さい。

 

また、動画ではより分かりやすく丁寧に解説していますので、

ぜひ一度ご覧になってみてくださいね。

 

もし、何かわからないことなどあれば、

問い合わせフォームからお気軽にご連絡頂ければと思います。

 

問い合わせフォームはこちら

 

メルマガに登録して下さっている場合は、

直接返信して頂いても構いません。

 

それでは最後までご覧頂き、ありがとうございました!

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

管理人:カズーイ


こんにちは。カズーイと申します。

僕はコミュ障、中退、ニート、父の死、借金、叔父の脅迫、夜逃げと、壮絶な人生を歩んできました。

しかし、どん底からたった6ヶ月で月収100万円を達成。現在はパソコン1台で月200万円以上を稼いで自由な人生を送っています。

さらに詳しいプロフィールは下記からご覧下さい。
プロフィールはこちら

・2013年10月サイトアフィリで100万円突破
・2016年6月オリジナル企画で200万円突破
・2017年4月メルマガ自動化で60万円突破

いつもクリックありがとうございます。
カズーイの順位はこちらからチェック↓

人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • LINEで送る

ビジネスを成功へ導く知識を詰め込んだクラウドサービス「Success Cloud」


ダウンロード数1000人突破。

メルマガにご登録頂けると、動画本数111本、総再生時間1100分以上、総文字数20万字以上で構成された業界初のクラウドサービス「Success Cloud」をお渡ししています。

数百万円以上かけて学んだ思考やノウハウを1つに凝縮するために3ヶ月かけて作成しました。

全てのコンテンツがネット上にあるため、PCからでもスマホからでも見たい時にいつでも好きなだけ学んで頂けます。

メルマガ登録は無料、必要ないと感じれば本文内の解除URLからいつでも解除できます。