AzPainter使い倒し HOME画像作成

サンプル画像

俗にWeb2.0風などと言われている、上半分が光っているようなボタンの作り方です。 最初にカスタムグラデーションさえ作っておけば、後はとても簡単にできます。


コントロールウィンドウ下からカスタムグラデーションの編集画面を開いて、左図のようにグラデーションを作ります。
カッコ内はRGBカラーで、全て完全不透明です。

要するに左から「暗い⇒急に明るく⇒徐々に暗く⇒暗い」となっていれば、必ずしも左の数値と同じでなくても構いません。
これを参考に、色々研究してみてください。



作りたいボタンの大きさで「新規作成」します。
全体を、ボタンの基調になる色で塗りつぶします。
(これを「色」レイヤとします)

色レイヤの上に、新規レイヤ「グラデーション」を作ります。


コントロールウィンドウで、先ほど作ったカスタムグラデーションが選択されていることを確認します。

線形グラデーションが描画できるようにツールをセットし、画像の上端から下端へドラッグして、グラデーションを描きます。
この時、CTRLキーを押しながらドラッグすると、垂直にポインタが動くので、グラデーションが斜めになりません。



ボタンに細い縁をつけます。

描画色を黒にして、ツールのサイズを1〜2にします。
「フィルタ」⇒「現在のツールで描画」⇒「枠線」をクリックすると、画像が黒い線で囲まれます。



このグラデーションレイヤの合成モードを「スクリーン」にすると、下レイヤの色が反映されて、立体的なボタンのようになります。

なお、不透明度を調整したり、場合によっては他の合成モードも使えるので、色々試してみてください。


後は文字を入れるだけです。
新規レイヤ「文字」を作って、描画色をセットしてからテキストツールで文字を入力します。
ボタンの色に対して、文字が見えにくくならないように注意しましょう。

このようなボタンは、同じ大きさで色違い・文字違いなど、一度に複数作ることが多いと思います。
必ずしもレイヤを結合しなくても、左図の状態でGIFやPNG保存した方が、次の作業に移りやすいです。



グラデーションレイヤはそのままで、文字レイヤを替えたり、色レイヤを塗り替えれば、どんどんボタンが作れます!

また、このグラデーションレイヤだけを保存しておけば、後日また同様のボタンを作る必要ができた時にも、すぐに作業ができて便利ですよ。

参考:ボタンを作る1

一見難しそうなWeb2.0風ボタンですが、意外と簡単に作れてしまいます。 このように光った感じを出すには、グラデーションの使い方がポイントなんですね。