忍者ブログ
GIMP思い込みチュートリアルGIMPの使い方

画像編集ソフトGIMPの使い方(チュートリアル)を中心に、GIMPに関する事を書いています。
思い込みで書いている部分もあると思いますので、コメントでのご指摘、随時募集中です。

ブログ内検索
カテゴリー一覧
月別記事一覧
ツイート

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

1つ新しい記事:gimp-painter-導入方法(Windowsバイナリ版)
1つ古い記事:GIMP関連記事リンク集(10年4月16日版)

▲ このページの1番上へ ▲

GIMPで凹凸感のあるシンプルなボタンを作る方法

凹凸感のあるシンプルなボタン右上に表示しているRSSのボタンを新しくし、さらにTwitterのボタンを追加したので、そのボタンの作成方法をまとめておきます。

今回のチュートリアルではLayer Effectに言及している部分があります。興味のある方は「再再掲 Layer Effects(レイヤー効果)の導入方法」を参照してください。

詳しくは以下のとおり。
今回の手順です。


以下、画像はクリックすると拡大します。
また、色の指定はHTML表記で行っています。下の画像は#を指定したときのものです。
081217infomation01.jpg


Step1.ファイルの作成


ファイル>新しい画像から、新しいファイルを作成します。
サイズは640×400ピクセル、背景は白色で説明していきます。

レイヤー>レイヤーを追加などから新しいレイヤーを作成します。
GIMPツールアイコン・塗りつぶし(塗りつぶし)を使って、#ffffffで塗りつぶします。

GIMPツールアイコン・矩形選択(矩形選択)で適当な位置に、適当な大きさで範囲を指定して、#000000で塗りつぶします。
選択>選択を解除
塗りつぶし



Step2.ボタンの輪郭をバンプマップで立体的に表示


フィルタ>ぼかし>ガウシアンぼかしでぼかし半径を20にして、ぼかしをかけます。

新しいレイヤーを作成。
#ff9900で塗りつぶします。

フィルタ>マップ>バンプマップで以下のように設定します。

バンプマップ

バンプマップぼかしをかけたレイヤーを指定
反転バンプマップチェック入れる
方向135
持ち上げ35
深度5


GIMPツールアイコン・矩形選択(矩形選択)で立体感のある部分を選択します。

矩形選択でボタンの輪郭を選択

このとき、四隅はツールオプションの「角を丸める」にチェックを入れて適当な大きさに丸めます。
矩形選択・角を丸める

選択>選択範囲を反転
編集>消去
選択>選択を解除
選択範囲の反転と消去



Step3.テキストの入力


GIMPツールアイコン・テキスト(テキスト)で適当に文字を打ち込みます。
ここでは、以下のように設定しています。

テキストの設定

フォントArial Heavy
大きさ50
#ffffff


テキストを適当な位置に配置します。
レイヤー>レイヤーをキャンパスに合わせる
テキストレイヤーのサイズ変更



Step4.バンプマップでテキストを立体的に


レイヤー>レイヤーを複製などからテキストのレイヤーを複製します。
2つあるテキストレイヤーの下側のレイヤーをアクティブにします。
色>諧調を反転
諧調の反転

テキストレイヤーの下に新しいレイヤーを作成。
背景を#ffffffで塗りつぶします。
このレイヤーと黒色のテキストレイヤーとを統合して1枚にします。
レイヤーの統合

フィルタ>ぼかし>ガウシアンぼかしでぼかし半径を10px位にしてぼかしをかけます。
このレイヤーは視覚的に必要ないので非表示にしておきまず。
ガウシアンぼかし

新しいレイヤーを作成。
#ff9900で塗りつぶします。
フィルタ>マップ>バンプマップで以下のように設定。

バンプマップの設定

バンプマップぼかしをかけたテキストレイヤーを指定
反転バンプマップチェックをつけない
方向135
持ち上げ35
深度5


バンプマップの結果

白色テキストのレイヤーをアクティブにします。
レイヤー>透明部分>不透明部分を選択範囲に
選択>選択範囲を拡大で選択範囲を7pxほど拡大します。
選択範囲の拡大

先ほどバンプマップを適用したレイヤーをアクティブにして、
選択>選択範囲を反転
編集>消去
選択>選択を解除
選択範囲の反転と消去



Step5.1.Inner Shadowでテキストの内側に影をつける


次に、テキストの内側に影をつけます。
このStep5.1ではLayerEffectを使って説明します。
LayerEffectを使用しないで影をつける場合は、次のStep5.2へ進んでください。

一番上のテキストのレイヤーをアクティブにします。
Script-Fu>Layer Effect>Inner Shadowで以下のように設定。
(使用しているスクリプトによってメニュー位置は異なります)

Inner Shadowの設定

不透明度50
サイズ3
Offset Angle135
Offset Distance3


Inner Shadowの結果



Step5.2.Inner Shadowを使わずにテキストの内側に影をつける


このステップでは、LayerEffectを使わないでテキストの内側に影をつける方法を説明します。Step5.1でInner Shadowを適用している方は、次のStep6へ進んでください。

テキストのレイヤーをアクティブに。
レイヤー>透明部分>不透明部分を選択範囲に
選択>選択範囲を反転

新しいレイヤーを作成
選択範囲を#000000で塗りつぶします。
塗りつぶし

GIMPツールアイコン・移動(移動)で、右に1ピクセル、下に1ピクセル移動させます。移動はキーボードの矢印キーで出来ます。
レイヤーの透明度を70くらいにします。
レイヤーの移動

このレイヤーを複製。
複製したレイヤーを右に1ピクセル、下に1ピクセル移動します。
レイヤーの透明度を40くらいに設定。
レイヤーの移動

2枚のレイヤーを1つのレイヤーにします。
レイヤーの統合

編集>消去
選択>選択を解除
レイヤーの不透明度を50くらいにしておきます。
レイヤーの不透明度変更



Step6.仕上げ、完成


最後に、下から2番目のレイヤーの不透明度を40くらいに
不透明度を変更

で、完成。
GIMPで凹凸感のあるシンプルなボタンを作る方法

あとは適当な大きさに縮小するなり、必要な部分だけ切り出したり、適当にしてください。

このチュートリアルではボタンの中身がテキストだけでしたが、TwitterのファヴィコンやRSSの画像をどっかからもってきて、テキストのときと同じような処理をすれば凹凸感のあるものが出来ます。


いつも書いていますが、途中で使っている設定や値などは、管理人が適当に決めたものです。画像のサイズ・テキストのフォントによって見栄えも変わってきますので、適宜変更して自分好みに仕上げてみてください。

ちなみに、今まで使っていたRSSのロゴ



はお役御免に


おしまい。
PR
1つ新しい記事:gimp-painter-導入方法(Windowsバイナリ版)
1つ古い記事:GIMP関連記事リンク集(10年4月16日版)

▲ このページの1番上へ ▲

コメント一覧

コメント数:1

No1.いつも

楽しくみさせています。
gimpは初心者ですが、すこしづつ慣れるようやってます。また、面白い記事期待してます。
簡単ですが、感想でした。

2010年 04月 21日

かめ

Re:いつも

コメントありがとうございます。

面白い記事書けるか分かりませんが、がんばってみます。
またの訪問お待ちしています。

2010年 04月 21日

管理人

この記事にコメントする

申し訳ありませんが、現在コメントは受け付けておりません。

▲ このページの1番上へ ▲

この記事へのトラックバック

この記事と関係ないトラックバックは削除させていただきます。

トラックバックURL:

最近の記事
最近のチュートリアル
GIMPで凹凸感のあるシンプルなボタンを作る方法 GIMPで氷のテキストを作成する方法 【GIMP】下から飛び出す感じの虹色のテキスト GIMPで虫メガネを描く方法 GIMPでカラフルなモザイクのテキストを作成する方法 GIMPを使ってインフォメーション・アイコンを作る方法 GIMPで回転する地球のgifアニメーションを作成する方法 GIMPでサイコロ(角丸な直方体)を描く方法 GIMPで雪だるまのクリスマスカードを作る方法 GIMPを使って消しゴムを描く方法 GIMPを使って鉛筆を描く方法 リング式メモ帳の描き方

画像をクリックするとチュートリアルのページを開きます