（GIMP）5分でできるWeb2.0風ボタン
by zakki
今回も前回、「5分でできるWeb2.0風バッジ」と同様、当初はジェネレータ・サービスを使用しようと考えていました。
そのサイトは、「Forgot the Milk.」さんの「これは楽しい！10秒でWeb2.0風のボタンをサクサク作れちゃうボタン・ジェネレータ・サービス | My cool button」で紹介されている「My cool button」と言うジェネレータ・サービスです。
ですが、今回もやっぱり、日本語対応しておりません。残念です。
と言うことで、GIMPにて、Web2.0風ボタンを作成しました。
作成方法は
１、 [ファイル]→[新規]で新規画像を作成します
２、[選択]→[角を丸める]を選択します
半径（％）は50にします
３、[編集]→[描画色で塗りつぶす]を選択します
今回は描画色を#ff2c00にしました
４、[レイヤー]→[新規レイヤー]を選択します
５、[選択]→[選択領域の縮小]を選択します
選択領域の縮小量を入力します。今回は1pxにしました
６、矩形選択ツールを選び、「Ctrl」キーを押したまま新規レイヤーの下半分を選択します。
・矩形ツール
・「Ctrl」キーを押したまま新規レイヤーの下半分を選択した状態
すると、選んだ下半分の選択領域は解除され、上半分が選択されます。
７、上半分が選択された状態のまま、グラデーションをかけます
今回は白（#FFFFFF）でグラデーションをかけます
このときグラデーションは「前景から透明に」を選択します
上半分にグラデーションをかけると下図のようになります
８、[レイヤー]→[新規レイヤー]を選択します
このとき選択域が上半分になっているので、[選択]→[ALL]を選択し、選択域を全部にします。
再度、２の、[選択]→[角を丸める]を行ないます。半径（％）は50にします
５の[選択]→[選択領域の縮小]を選択します。選択領域の縮小量を今回は2pxにしました
９、６と同じ要領で、矩形選択ツールを選び、「Ctrl」キーを押したまま新規レイヤーの上半分を選択します。
すると、選んだ上半分の選択領域は解除され、下半分が選択されます。
10、７と同じ要領で、下半分が選択された状態のまま、グラデーションをかけます。その際、下図のように、不透明度を20くらいにします
以上、保存して完成です。
「あの人のセリフ」では文字はSEO対策をかねて、画像で描かれていません。
HTMLで出力しています。
また、ボタンにフォーカスが当たった場合の画像の変化、文字の位置の変化はCSSで制御しています。
晋遊舎 (2006/12)
売り上げランキング: 22875
本のデザインは一見取っ付き易いように見えるが・・・ 私も素人ですが・・・・・・
広告のプロもオススメです！
Popularity: 26 %
この記事のお役立ち度を評価してください
(3 投票, 平均: 4 中 5)
Loading ...ブックマークの追加はこちらから、どうぞ
コメントはまだありません。