こんにちは、三浦です!

今回の記事は、誰にでも簡単に作れるボタンを紹介します。

アイキャッチを押してもホームへは戻りませんので注意してください。

立体感を表せたと思いますのでボタンでお悩みの方は参考にしてくれるとうれしいです。

 

使用環境・制作時間

  • 使用ソフト:Adobe Photoshop cc 2014(最新版)
  • 制作時間:10分

 

スポンサーリンク


 

Lesson1:カンバスの設定

まず、PhotoShopを立ち上げ「幅:900、高さ:500、カンバスカラー:透明」を作成します。

b1

背景は、「塗りつぶしツール」を使っております。背景色は、#4d4946です。

 

Lesson2:ボタン作成とスタイル設定

次に、ボタンを作成します。「角丸長方形ツール」を使い、下の様な形にしています。。

b2

この時のボタンの色は適当配分で構いませんが、私の場合は#686868で作成しております。

次にスタイルの設定を適用させます。

レイヤーパネル

「角丸長方形レイヤー」を選択した状態で「レイヤー効果(メニューの「レイヤー」→「レイヤースタイル」→「レイヤー効果)」を選択します。

ベベルとエンボス

botan1

境界線

botan2

「境界線」の塗りつぶしタイプをグラデーションに設定して以下のように色を配置する。

botan2_1

この色を変更すると様々な表現が付きます。

  • 1:#000000
  • 2:#f5f5f5

光彩(内側)

botan3

色は、#000000です。

グラデーションオーバーレイ

botan4

グラデーションを以下のように色を配置する。

botan4_1

好きな色に設定する事で、色違いのボタンを作成する事が出来ます。

  • 1:#63b3fa / 位置:0%
  • 2:#3886d4 / 位置:15%
  • 3:#2f83dd / 位置:49%
  • 4:#56adff / 位置:49%
  • 5:#70b6f2 / 位置:100%

設定完了後「OK」をおす。

設定後

b3

Lesson3:テキストの設定

まず、テキストの設定は以下のようにしております。

  • フォント:Verdana Bold
  • 大きさ:40pt

大体真ん中になるように、テキストを配置しています。スタイル効果の適用方法はLesson2を参考にしましょう。

ドロップシャドウ

botan5

設定完了後「OK」を押すと、完成となります。

設定後

b4

最後に

この他にも、ボタンの種類は色々ありますので今後作成方法を交えて紹介していきます。

この記事は2015年1月30日現在のものです。

スポンサーリンク

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

▼スポンサーリンク
▼LINEスタンプ販売中です!
▼おすすめの記事
▼スポンサーリンク

お知らせ

12月28日~1月3日はお休みとさせていただきます。

新着記事

  1. Windows10がディスク使用率99%や100%で激重になる場合にチェックする項目や対処法
  2. 5分でできる!いろいろな形の円を作成するチュートリアル:Illustrator
  3. Adobe CCで「ログイン」「続行」がループしてアプリを起動できない場合に確認するポイント
ページ上部へ戻る