Home > スポンサー広告 > つやのあるボタンを作るチュートリアル - Sleek Button

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

toshi URL 2008-03-18 (火) 03:38

ボタンの影の有る画像と無い画像を作成すれば、ロールオーバーするボタンが作れますね。

STEP6
選択領域を解除してから、明るさ-コントラスト
GIMP2.4では、色>明るさ-コントラスト

STEP7.5
GIMP2.4では移動ツールのオプションウィンドウはデフォルテではレイヤーかガイドにチェックが有ります。
この場合、アクティブなレイヤーを移動する場合マウスポインターは四方矢ですが、他のレイヤーを移動させる場合は手の形が表示され、
要はマウスポインターの下の画像のレイヤーが移動するようです。

STEP10
しきい値はGIMP2.4では
色>閾値
右の△を左にスライド
閾値で黒くすることが出来るなんて知りませんでした。
もっと早くこちらのTUTに気付くべきでした。

highstar URL 2008-03-18 (火) 20:27

>ボタンの影の有る画像と無い画像を作成すれば、ロールオーバーするボタンが作れますね。
そうですねー。それもありです。
あとはグレースケールで保存してマウスが乗ったときにカラーが出るとか。

移動に関しては2.4からAlignツールだったかが出たので、中央に移動とかはやりやすくなってるはずです。

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://archivlog.blog107.fc2.com/tb.php/21-601dc92d
Listed below are links to weblogs that reference
スポンサーサイト from GIMPTICA

Home > スポンサー広告 > つやのあるボタンを作るチュートリアル - Sleek Button

Home > Button > つやのあるボタンを作るチュートリアル - Sleek Button

つやのあるボタンを作るチュートリアル - Sleek Button

sleek08.jpg

今回はつやのあるボタンを作るチュートリアルです。
なんとなく使い勝手が良さそうなボタンなので紹介しておきます。

このチュートリアルは、Create sleek buttonsを参考にしています。
リンク先を参照すればより良い結果が得られるでしょう!
STEP1
新規作成
- サイズ:400*200
- 背景色:白


STEP2
新規にレイヤーを作成後、矩形選択ツールで選択し、選択>角を丸める
- レイヤー名:button
- 半径:30%
sleek01.jpg



STEP3
グラデーションツールで選択領域を塗る
- 前景色:#45698d
- 背景色:#1a548e
- 方向:上から下
※前景と背景の色はあんまり違わないのがドラマティックなんだって
sleek02.jpg



STEP4
選択>選択領域の縮小
- 縮小量:3px


STEP5
グラデーションツールで選択領域を塗る
- 前景色:#45698d
- 背景色:#1a548e
- 方向:下から上!
sleek03.jpg



STEP6
buttonレイヤーを複製し、レイヤー>色>明るさ-コントラスト
- 明るさ:-127
- コントラスト:127
- レイヤー位置:buttonの下
※画像はbuttonを不可視にしているので、ご安心を
sleek04.jpg



STEP7
フィルタ>ぼかす>ガウシアンぼかし
- ぼかし半径:32px
sleek05.jpg



STEP7.5
移動ツールで影になるレイヤーを右下に移動してもOK
- 移動後、レイヤーを画像サイズに合わせる
sleek06.jpg



STEP8
文字ツールで文字を描く
- 設定は全て自由ということで
sleek07.jpg



STEP9
文字レイヤーを右クリックし、レイヤーを画像サイズに合わせる


STEP10
文字レイヤーを複製し、レイヤー>色>しきい値などで文字を黒くする
- レイヤー位置:文字レイヤーの直下


STEP11
フィルタ>ガウシアンぼかしを繰り返す
sleek08.jpg



※最終的なレイヤー
- text
- textのコピー
- button
- buttonのコピー
- 背景


以上で完成です!
いい感じのボタンができたことと思います。
ページのメニューボタンに最適じゃないですかねー。

では、お疲れ様でしたー。
スポンサーサイト

Comments:2

toshi URL 2008-03-18 (火) 03:38

ボタンの影の有る画像と無い画像を作成すれば、ロールオーバーするボタンが作れますね。

STEP6
選択領域を解除してから、明るさ-コントラスト
GIMP2.4では、色>明るさ-コントラスト

STEP7.5
GIMP2.4では移動ツールのオプションウィンドウはデフォルテではレイヤーかガイドにチェックが有ります。
この場合、アクティブなレイヤーを移動する場合マウスポインターは四方矢ですが、他のレイヤーを移動させる場合は手の形が表示され、
要はマウスポインターの下の画像のレイヤーが移動するようです。

STEP10
しきい値はGIMP2.4では
色>閾値
右の△を左にスライド
閾値で黒くすることが出来るなんて知りませんでした。
もっと早くこちらのTUTに気付くべきでした。

highstar URL 2008-03-18 (火) 20:27

>ボタンの影の有る画像と無い画像を作成すれば、ロールオーバーするボタンが作れますね。
そうですねー。それもありです。
あとはグレースケールで保存してマウスが乗ったときにカラーが出るとか。

移動に関しては2.4からAlignツールだったかが出たので、中央に移動とかはやりやすくなってるはずです。

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://archivlog.blog107.fc2.com/tb.php/21-601dc92d
Listed below are links to weblogs that reference
つやのあるボタンを作るチュートリアル - Sleek Button from GIMPTICA

Home > Button > つやのあるボタンを作るチュートリアル - Sleek Button

Recent Comments
Recent Trackback
Search
Meta
Links
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。