はじめに

Web開発者のあいだで人気の高いCSSフレームワーク、 Twitter Bootstrap

今回はphotoshopを使ってBootstrap風の今っぽいボタンをデザインする方法をご紹介します。

Twitter Bootstrap
http://twitter.github.com/bootstrap/

手順を細かく説明しますので、photoshopの操作になれない初心者の方もぜひ挑戦して下さい!

作成方法

PhotoshopのバージョンやOSによってインタフェースが異なります(今回はPhotoshop CS5 Mac版 を使用)

STEP1 新規ファイルを作成

まずは新規ファイルを作成しましょう。

  • :250px
  • 高さ:250px

上記の値を入力し、「OK」ボタンを押して下さい。

新規ファイルが作成されました。

STEP2 シェイプを作成

次に、ボタンの土台となるシェイプを作成しましょう。

ツールバーから「角丸長方形ツール」を選択し、

photoshopメニュー上部の「オプションウィンドウ」から「丸み:5px」を設定、カラーを「#006fcf」に設定しましょう

値が入力し終わったら「角丸長方形ツール」を使って

  • :130px
  • 高さ:40px

のシェイプを作成して下さい。

STEP3 シェイプにレイヤースタイルを設定

レイヤーウィンドウから、先程作成したシェイプレイヤーの右側のエリア、キャプチャのカーソルあたりをダブルクリック(もしくは「右クリック>レイヤー効果>」を選択)し、「レイヤースタイル」ウィンドウを呼び出します。

「レイヤースタイル」ウィンドウの左のメニューから、「シャドウ(内側)」を選択し、以下の値を設定して下さい。

  • 描画モード:スクリーン(カラー:#ffffff)
  • 不透明度:35%
  • 角度:90度
  • 距離:2px
  • チョーク:0%
  • サイズ:0px

次に、ウィンドウ左メニューから、「グラデーションオーバーレイ」を選択し、以下の値を設定して下さい。

  • 描画モード:オーバーレイ
  • 不透明度:23%
  • グラデーション:黒、白(初期値)

次に、ウィンドウ左メニューから、「境界線」を選択し、以下の値を設定して下さい。

  • サイズ:1px
  • 位置:内側
  • 塗りつぶしタイプ:カラー(#0065b8)

カラーは「スポイトツール」でキャプチャのカーソルあたりの色を取得するとよいでしょう

ボタンの土台ができました!

STEP4 テキストを入力

次にツールバーから「テキストツール」を選択しましょう。

「文字ウィンドウ」で入力するテキストを以下のように設定します

  • フォント:Arial
  • フォントサイズ:15pt
  • カラー:#ffffff

テキストツールの設定が終わったら、テキストを入力していきましょう。

STEP4 テキストを装飾

テキストの入力が完了したら、シェイプのレイヤーと同様に、テキストのレイヤースタイルを設定していきましょう。

ウィンドウ左メニューから、「ドロップシャドウ」を選択し、以下の値を設定して下さい。

  • 描画モード:乗算(カラー:#000000)
  • 不透明度:25%
  • 角度:-90度
  • 距離:1px
  • スプレッド:0%
  • サイズ:0px

テキストにうっすらとデボス加工(オブジェクトが凹んだような効果)が加わりました!

これでボタンの完成です!

カラーバリエーション

今回のやり方では、シェイプのカラーと、境界線のレイヤーオプションを変更するだけで、簡単にカラーバリエーションを作成できますので、みなさんも好みのカラーでボタンを作ってみてください!

おわりに

いかがでしたか?はじめはレイヤースタイルの設定が少し面倒に思われるかもしれませんが、慣れてくれば感覚的に設定できるようになってきます。今回のやり方を参考に、レイヤーオプションの設定を色々学んでみてはいかがでしょうか。

(キャプチャ by 著者)