CMSでホームページの作成 [ フリーソフトの紹介]




 クリスタルボタンの作成!


レイヤー構成:
6枚のレイヤーと1枚のテキストレイヤー、上からHighlight/Text/Ring/Shade/Circle/Drop-Shadow/Background/となります。
GUGのクリスタルボールを参考にGIMP2.6用にアレンジしました。

作成手順
1.)Background(背景)レイヤーの作成
ファイル(F)-新しい画像(N) 新しい画像を作成ダイアログ画像のサイズ幅300 高さ300 ピクセル 高度なオプションA[+] 塗りつぶし色(F) 背景色を選択(背景色:白)
作成後レイヤーダイアログ、目玉アイコンをOFFしてください。


2.)Ring(リング)レイヤーの作成
レイヤー(L)-レイヤーを追加(N)-新規レイヤー レイヤー名(N) Ring レイヤー塗りつぶし 透明を選択し ます。

ここでガイド作成して置きます。
ガイド作成は、画像(I)-ガイド(G)-新規ガイド(G) Script-Fu:新規ガイドダイアログ 方向:水平 位置  149ピクセルに設定
ふたたび、画像(I)から同じ手順で方向:垂直 149ピクセルに設定します。
水平・垂直の接点が中心になります。

楕円選択ツール(E)を選択daen オプション チェックボックス中央から広げる・値を固定にチェックし水平・垂直の接点が中心から任意 の大きさで円を作成します。 image01

次にブレンドツール(L)burendo 色の選択 前景色をライトブルー(8fbee8)、背景色を黒(000000)にします。
オプション グラデーション ボタンより 描画色より背景色を選択 形状:放射状 反復なしに設定後 選択領域左斜め(座標94.94あたり)からドラッグします。 image02

次に選択(S)-選択範囲を縮小(H)-選択範囲を縮小 選択範囲縮小量:9ピクセルとし、縮小された領域を消去します。 編集(E)-消去(E) (選択領域はそのまま継続) image03 image04

3.)Circle(サークル)レイヤーの作成
レイヤー(L)-レイヤーを追加(N)-新規レイヤー レイヤー名(N) Circle レイヤー塗りつぶし 透明を選択します。
次に選択(S)-選択範囲を縮小(G)-選択範囲を拡大(G) 選択範囲縮小量:2ピクセルとし、領域内を塗りつぶします。
塗りつぶしツール(Shift+B)nuritubusi色の選択(a3db1d)オプション 塗りつぶし範囲 選択範囲を塗りつぶしにチェックし塗りつぶします。
次に現在のレイヤーを一段下げます。レイヤー(L)-重なり(K)-レイヤーを背面に(L)


4.)Shade(影)レイヤーの作成 レイヤー(L)-レイヤーを追加(N)-新規レイヤー レイヤー名(N) Shade レイヤー塗りつぶし 透明を選択します。
左部分を三日月のように影を作成します。
楕円ツール(E)daen オプション 境界をぼかすを18に、チェックボックス中央から広げる・値を固定にチェックしガイド中心より右(173.149くらい)左にCtrlを押しながらドラッグし任意の三日月を作成します。
image05 レイヤーダイアログ。Shade(影)
次にその三日月を塗りつぶします。
塗りつぶしツール(Shift+B)nuritubusi 描画色 黒 オプション 塗りつぶし範囲 選択範囲を塗りつぶしにチェックし塗りつぶします。
レイヤーダイアログ、不透明度を30に設定します。
image06

上部に三日月のような影を作成します。
選択(S)-選択領域を解除(N)で選択領域を解除し、レイヤーダイアログからCircleをアクティブにして、そのCircleから選択領域を作成します。
レイヤー(L)-透明部分(A)-選択範囲に加える(D)
次にレイヤーダイアログからShadeをアクティブにして、楕円ツール(E)daen オプション チェックボックス中央から広げる・値を固定にし境界線をぼかすを半径100にセットします。
垂直ガイド最下段(選択領域)よりCtrlを押しながらドラッグし任意ちょっと太目の三日月を作成します。
塗りつぶしツール(Shift+B)nuritubusi 描画色 黒 オプション 塗りつぶし範囲 選択範囲を塗りつぶしにチェックし塗りつぶします。
image07

5.)Highlight(ハイライト)レイヤーの作成
レイヤー(L)-レイヤーを追加(N)-新規レイヤー レイヤー名(N) Highlight レイヤー塗りつぶし 透明を選択します。
楕円ツール(E)daen オプション チェックボックス中央から広げるにチェックしガイド中心より上1/3(149.105)くらいの所から楕円を作成します。
大きさは任意、領域を好みの位置にドラッグして調整してください。
image08
次にブレンドツール(L)burendo 色の選択を白にして、オプション グラデーションボックスをクリックし描画色から透明色を選択し形状:線形 反復なしにします。
選択領域の上部からドラッグして塗りつぶします。
レイヤーダイアログ、不透明度でハイライト部分を調整してください。
image09

6.)Textを入力します。
Shadeをアクティブにして下さい。(Shade上にTextレイヤーが表示されます)
Textツール(T)text を選択してください。
オプション フォント:フォントボックスより使いたいフォントを選択大きさは28PXくらい
文字の色をオプション 色:色ボックスをクリックして:黒を選択し画像をクリックするとテキストエデイタのダイアログが開きますので文字を入力してください。
位置をドラッグしてお好みの位置でクリックしてください。
オプション 揃え位置で文字の位置を変えてお好みにして下さい。
(レフト・ライト・センタリング 文字間隔など)
image10 レイヤーダイアログ。テキストを挿入位置

7.)ボタンの影を作ります。
レイヤーダイアログからCircleをアクティブにして、レイヤー(L)-レイヤーを追加(N)-新規レイヤー レイヤー名(N) Drop-Shadow レイヤー塗りつぶし 透明を選択します。(Circleの上にDrop-Shadowが作成されます)
レイヤーダイアログからRingをアクティブにし、レイヤー(L)-透明部分(A)-選択範囲に加える(D)で選択領域を作成します。
image11
レイヤーダイアログからDrop-Shadowをアクティブし、他の目玉アイコンをOFFにします。
塗りつぶしツール(Shift+B)nuritubusi 描画色 黒 オプション 塗りつぶし範囲 選択範囲を塗りつぶしにチェックし塗りつぶします。
選択領域を解除します。
image12
フィルタ(R)-ぼかし(B)-ガウシアンのぼかし(G) ガウシアンのぼかしダイアログでぼかし半径を10にセットしてください。
image13
Circle・Drop-Shadow・Backgroundの目玉アイコンをONにして、Drop-Shadowをアクティブにして移動ツール(M)で影の部分をクリック、そのままドラッグして位置を調整してください。
image14 レイヤーダイアログ。影位置調整
調整が終わったらすべての目玉アイコンをONします。
ガイドの削除
画像(I)-ガイド(G)-ガイドを削除(R)
全体の雰囲気をレイヤーダイアログのハイライト部分・影の部分をお好みで調整しリアルに見えるようにします。
完成:
image15
最上段サンプルデモ右画像はDrop-ShadowをCircleとRingの間に上げてみました。(ちょっと深みが出たかな?)