透明っぽいボタンの作り方

Jul 3, 2012

白い背景に邪魔にならないシンプルで透明感のあるボタンの作り方を教えます。

文字を用意する

テキストツールで文字を書き、フィルター:ドロップシャドウをかける

ボタンを作る

角丸四角ツールで文字の大きさに合わせて、グラデーションのパーツを作ります。
それより少し小さい角丸四角(色#F6F6F6)
ペンツールで角のシャドウになるパーツ(色#000000 透明度9%)を書きます。

 
  
上から
小さめの角丸四角
↓角のシャドウパーツ
 ↓グラデーションパーツ
の順に重ねます。

 
  
上ふたつをぼかします。

 
  
グラデーションパーツを選択してコピー(⌘+C)しておきます。
その後3つ全てのパーツを選択し、グループ化(⌘+G)します。

 
  
グループ化したパーツを選択して
クリッピングマスク(⌘+shift+V)します。
前の行程でコピーしておいたグラデーションパーツの大きさに切り抜かれます。

 
  
フィルター:グローをかけます。

文字とボタンを重ねる

完成です!涼しげな雰囲気ですね。

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

痔になりたくないので、パトロンになってください