【Photoshop】WEBのボタンやスマホゲーム風ボタンの作り方【簡単】

Photoshop

今回は、Photoshopで簡単にできるボタンの作り方をお届けします。

この方法を使うと、Webサイト用のボタンや

Photoshopで簡単にできるボタンの作り方

 

スマホのゲームっぽいボタンを簡単に作ることができます。

Photoshopでスマホゲーム風のボタン

 

また、両端が丸くなったボタンも簡単にできます。

左右が丸いボタン

いろいろと応用がききますので、よかったら参考にしてみてください。

というわけで、さっそく作り方を紹介します。

WEBで使えるボタンの作り方

まずはシンプルなタイプのボタンを作成してみます。

ベースとなる長方形を作る

1.新規カンバスを作成します。

新規カンバスの作成

 

2.ツールバーから「角丸長方形ツール」を選択します。

角丸長方形ツールを選択

 

3.作りたいボタンのサイズを入力します。

ボタンのサイズを入力

「幅」「高さ」はボタンのサイズ、「半径」は角の丸みを設定する項目です。「半径」は4つの角それぞれの丸みを設定できます。

今回の作例では、幅300px、高さ100px、半径をすべて10pxにしています。それぞれの数字を入力したら「OK」をクリックします。

 

4.色などを設定できるウインドウが表示されます。赤で囲んだ部分をクリックすると、ボタンの色を設定できるようになります。

ボタンのカラーの設定

 

ボタンに使いたい色を選択します。

カラーパレット

 

5.これでボタンのベースとなる形ができました。

ボタンのベースが完成

つづいて、様々な効果を加えてボタンらしくしていきましょう。

ボタンを装飾する

1.レイヤーパレットで、先ほど作った長方形のレイヤーを選択します。

ボタンのレイヤーを選択

 

2.レイヤーパネルの下にある「レイヤースタイルを追加」をクリックします。

レイヤースタイルを追加

 

3.「光彩(内側)」を選択します。

光沢(内側)を選択

 

4.「光彩(内側)」では、ボタンの輪郭の内側に光沢や色の薄い部分を作ることができます。

光沢(内側)の設定

主に「不透明度」「サイズ」「範囲」あたりをいじると、ボタンの内側に光沢が入ります。

 

ここでは「不透明度」を60%、「サイズ」を5px、「範囲」を8%にしてみました。

光沢(内側)が適用されました

べた塗りだったボタンの内側に光沢ができました。入れる数字によって見た目がかなり変わりますので、いろいろと試してみてください。

 

5.つづいて、ボタンの輪郭を強調します。「境界線」を選択し、サイズとカラーを設定します。

境界線

「サイズ」でボタンの輪郭線の太さを、「カラー」で輪郭線の色を決めることができます。

 

今回は「サイズ」を1px、「カラー」をボタン本体の色と同じものにしてみました。

境界線が適用されました

輪郭線が入ったことで、ボタンの形がしゃきっとしました。

 

6.つづいて、ボタンにカゲを入れます。「ドロップシャドウ」を選択し、任意の数字を設定していきます。

ドロップシャドウの設定

各項目は、次のような効果があります。

  • 不透明度:カゲの濃さを決める項目です。
  • 距離:ボタンとカゲとの距離を決める項目です。数字を大きくするほど、カゲがボタンから離れていきます。
  • スプレッド:カゲのボケ具合を設定する項目です。数字を大きくするほど、カゲがくっきりします。
  • サイズ:カゲの大きさを決める項目です。数字を大きくするほど、カゲが大きく、ぼやけた感じになります。
  • 角度:どの方向から光があたっているかを設定する項目です。角度によって、カゲのできる位置が変わります。

 

今回は「不透明度」を25%、「距離」を6px、「サイズ」を9pxに設定してみました。

ドロップシャドウが適用されました

これでカゲが入りました。

スポンサーリンク

文字を入れます

ボタンができたら任意の文字を入れれば完成です。

文字を入力

 

・・・が、「文字がうまく真ん中に入らない」という方もいるかと思います。その場合は、次のようにすると、簡単にボタンの中央に持ってくることができます。

文字を中央に入れる方法

1.適当な位置に文字を入れます。

文字を中央に入れる方法

 

2.レイヤーパネルで、ボタンのレイヤーと文字のレイヤーを選択します。

レイヤーの複数選択

2つのレイヤーを選択する時は、レイヤーを1つ選択した状態で、Ctrlを押しながらもう1つのレイヤーをクリックすると、複数選択ができます。

 

3.ツールバーの赤で囲んだ部分を、それぞれ1回ずつクリックします。

水平方向と垂直方向の中央揃え

 

4.水平方向と垂直方向の中央が揃い、文字がボタンの中央に移動します。

文字が中央に入りました

このようにすれば、簡単に文字の位置を調整できます。

応用方法

上記ボタンができると、いろいろな応用ができます。

光彩(内側)を変更する

「レイヤースタイルの追加」から「光彩(内側)」を変更すると、輪郭の内側の雰囲気を変更できます。

こちらは、次のように設定したもの。

この設定で完成したものに、キラキラブラシをかぶせています。

キラキラブラシの作り方はこちらの記事でくわしく解説しています。

【とっても簡単】Photoshopでキラキラを作る方法【星模様】
Photoshopでキラキラを作る方法を紹介します。 こんな感じのキラキラした星模様をつくって、画面を彩ってみます。 シンプルですが、星模様があるといろいろと遊べます。今回はイラストに使ってい...

両端が丸いボタンを作る

最初の長方形(角丸長方形)を作るところで角の丸みを強くすると、両端が丸くなったボタンを作ることができます。

 左右が丸いボタン

 

こちらは角の丸みを次のように設定しています。

おしまいに

今回は、Photoshopで簡単にできるボタンの作り方でした。

各設定の数字を変えるだけで、かなり雰囲気がかわるのでいろいろとためしてみてくださいね。よかったら参考にしてみてください。