立体的なアクアボタンのチュートリアル

立体的なアクアボタンのチュートリアル。ここを参考に日本語訳。

Round Web 2.0 Button with a Metal Ring

 

Step 1

背景白で新規作成。サイズは任意で。

レイヤーを追加して楕円選択ツールで円を描く。

250x250 selection

 

Step 2

描画色をグレー(333333)、背景色を白(ffffff)にする。

ブレンドツールで以下の設定をして円の上から下にドラッグ。

Gradient settings

※グラデーション:描画色から背景色(RGB)、形状:放射状

Selection with radial gradient

 

Step 3

選択→選択範囲の縮小でいい感じに縮小する。

Shrink selection by 25

Step 2の設定で縮小した選択範囲を下から上へドラッグ

Gradient inside the other gradient

 

Step 4

レイヤーを追加して、選択範囲をさらに数ピクセル縮小し、任意の色で塗りつぶす。

Sphere layer

塗りつぶした色より明るい色を選択して以下の設定で下の線くらいを下から上へドラッグ

Gradient settings

※グラデーション:描画色から透明、形状:放射状

Cyan gradient added

 

 

Step 5

描画色を白(ffffff)にして「ブラシで描画」ツールのサイズを選択範囲とおなじくらいにして、下図のマウスポインタの位置くらいでクリック。

Adding white with fuzzy brush

こうなる↓

Gentel touch of white

 

Step 6

レイヤーを追加して「選択→選択範囲の拡大」で数ピクセル拡大。

Grow selection by 1

選択範囲を黒(000000)で塗りつぶして「選択→境界をぼかす」で20ピクセル。

Feather by 20

そのままDeleteキー押下して「選択→選択を解除」

こうなる↓

After deleting

 

今のレイヤーをコピー。シャドウが濃くなる。

Duplicate the inner shadow layer

 

 

Step 7

レイヤー追加して下図のように楕円選択。

Gloss selection

 

描画色を白(ffffff)にして下の設定でブレンドツールで楕円の上から下へドラッグ。

Gloss gradient

※グラデーション:描画色から透明、形状:線形

レイヤーの不透明度を下げて選択を解除。

Reduce opacity to 75

 

Step 8

テキストを配置するなりなんなりと。ここは省略。

 

 

Step 9

シルバーのボタンレイヤーを選択して「フィルタ→照明と投影→ドロップシャドウ」を選択してお好みで。

Add dropshadow to the ring layer

ドロップシャドウ参考値

Drop shadow settings

 

Step 6でコピーしてできた2つの同じレイヤーのうち上にあるレイヤーを「右クリック→下のレイヤーと統合」で2つのレイヤーが1つになる。

統合されたレイヤーを選択して「フィルタ→ぼかし→ガウスぼかし」

Gaussian blur the inner shadow

 

 

完成

Round Web 2.0 Button with a Metal Ring

 

応用

Round Web 2.0 Metal Ring button deep sea gradient

Round Web 2.0 Metal Ring button

Round Web 2.0 Metal Ring button Incandescent gradient

 

 

 

 

カテゴリー: Gimp パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です