こんにちは、三浦です!

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

前回の記事は、こちらです。

アイキャッチは信号機ではありません、ボタンです!たまたまそうなっただけです!

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

 

使用環境・制作時間

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

 

スポンサーリンク

Lesson1:カンバスの設定

まず、PhotoShopを立ち上げ「幅:1800、高さ:900、カンバスカラー:透明」を作成します。
「楕円形ツール」で適当な楕円を3つ配置します。

sg01

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

 

Lesson2:スタイル設定

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

レイヤーパネル

「楕円形レイヤー1/2/3」のどれか一つを選択した状態で「レイヤー効果(メニューの「レイヤー」→「レイヤースタイル」→「レイヤー効果)」を選択します。

ほとんど、同じ設定ですが違う部分はその都度表記してあります。


ベベルとエンボス

sgr01

赤枠内の色:#eaf3f5


輪郭

sgr02


光彩(内側)

sgr03

赤枠内のグラデーションを選択します。

グラデーションエディター

sgr03r-1

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

赤色の場合(左から)

  • #2a0000 / 位置:0%
  • #000000 / 位置:100%

黄色の場合(左から)

  • #211900 / 位置:0%
  • #000000 / 位置:100%

青色の場合(左から)

  • #002108 / 位置:0%
  • #000000 / 位置:100%

サテン

sgr04


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

sgr05

赤枠のグラデーションを選択します。

グラデーションエディター

sgr04r-1

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

赤色の場合(左から)

  • #b30404 / 位置:0%
  • #7e0101 / 位置:49%
  • #1b0000 / 位置:100%

黄色の場合(左から)

  • #fbb101 / 位置:0%
  • #5a3c01 / 位置:49%
  • #221300 / 位置:100%

青色の場合(左から)

  • #01a044 / 位置:0%
  • #015a29 / 位置:49%
  • #072200 / 位置:100%

ドロップシャドウ

sgr06

赤枠内をクリックして、

赤色の場合

  • #2f0000

黄色の場合

  • #251d00

青色の場合

  • #062500

となります。


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

スタイル設定後

sg02

Lesson3:背景の設定

背景レイヤーを作り、「塗りつぶしツール」を使い、#222222で塗りつぶして完成です。

背景設定後

sg03

最後に

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

この記事は2015年2月6日現在のものです。

スポンサーリンク

関連記事

コメント

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

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

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

お知らせ

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

新着記事

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