Designer's Guide > スポンサー広告[GIMPチュートリアル]ボタン > GIMP(メニューバーに埋まったボタンを作るチュートリアル)


最新エントリー

大量のフォトショップブラシ&グラデがダウンロード出来るサイト5つ
フォトショップ(輝きのある鉛筆アイコン作成チュートリアル)
GIMP(折れ曲がり・めくれ画像を作るチュートリアル)
フォトショップ(芝生画像を使ったテキストチュートリアル)
なかなか使えそうなフォトショップPSDファイル6つ
フォトショップ(モサモサしたジャガーなフォルダアイコンチュートリアル)
フォトショップ(炎で燃えたような文字を作るチュートリアル)
GIMP(Vista風ボタンのチュートリアル)
GIMP(MacOSXレパードのオーロラ背景を作るチュートリアル)
フォトショップ(モサモサしたジャガーなフォルダアイコンチュートリアル)

スポンサーサイト

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

Advertisement
ブックマークに追加する

GIMP(メニューバーに埋まったボタンを作るチュートリアル)

メニューボタン

上画像のような、メニューバーに埋まったボタンを作っていく
GIMPチュートリアルです。(すごく簡単)

いわゆるナビゲーションバーですね。
と言ってもボタンだけのチュートリアルですよ。

では早速行ってみましょう!



では、始めに『四角選択ツール』を使い
凹んだ部分を選択します。

選択後、『選択→角を丸める』で
任意の数値で丸めます。(上の画像)



次は、角丸になった選択領域にグラデーションをかけます。

グラデーションツールを使い、ここでは
前景から背景『#000000→#ffffff』
形状『Linear』
上から下方向へグラデーションをかけます。(上の画像)



角丸選択はそのままで
『レイヤー→新規レイヤー』でレイヤーを作成後、
『選択→選択領域の縮小』で2px縮小します。(任意の数値でどうぞ)

その後、選択領域を『#000000』を塗りつぶします。

※別に、新規レイヤーを増やす必要は無いですが、
後々修正する場合に作りなおす必要が無くなる為に
増やしました。



次も同じような事をします。
角丸選択はそのままで
『レイヤー→新規レイヤー』でレイヤーを作成後、
『選択→選択領域の縮小』で1px縮小します。

その後、グラデーションツールを使い、
前景から背景『#2a2a2a→#000000』
形状『Linear』
上から下方向へグラデーションをかけます。(上の画像)

※マウスオーバーのボタン(マウスが乗った時)を作りたい場合は、
この画像を使うといいかも。



最後に、一番上のレイーヤーに『ロック』をかけた後、
『四角選択ツール』で上半分を選択し、
グラデーションツールを使い
前景から透明『#ffffff』
形状『Linear』
上から下方向へグラデーションをかけます。(上の画像)

これで完成!
背景にも同じようなグラデーションをかけ
光沢感をだしてみたのが下の画像です。



少しアレンジして、中側を『Vista風』のボタンにしても
カッコよくなると思います。
参考ページ : GIMP(Vista風ボタンのチュートリアル)

と言うことで
『メニューバーに埋まったボタン』GIMPチュートリアル終了!

最後に、動画でチュートリアルを見ることができます。
(作ってる画像は若干違います)


お疲れ様でした。ではまた
Advertisement
ブックマークに追加する



« フォトショップ(炎で燃えたような文字を作るチュートリアル) |Designer's Guide| 無料でダウンロード!ハイクオリティなアイコン40セット »

コメントの投稿

  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

URL :http://designtutorial.blog32.fc2.com/tb.php/65-018b8b64


TagList


チュートリアル Photoshop GIMP テキスト アイコン Illustrator ブラシ ボタン 壁紙 フォント PSD 動画 インスピレーション ナビゲーションバー テクスチャ CSS 背景 グラデーション デザインサイト テンプレート アニメーション 

link

profile

kom.ken

無料カウンター
無料カウンター
管理人 : kom.ken
このブログは、WEBデザインに役立ちそうな、PhotoshopやGIMPのチュートリアルなどを紹介しています。また、私のブックマーク代わりも兼ねています。

formmail

名前:
メール:
件名:
本文:

copyright©


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