AzPainter使い倒し HOME画像作成

サンプル画像

角丸枠を使った、Webサイト用のボタンです。 「立体枠」フィルタは矩形にしか効かないので、このような角丸型を立体的に見せるには、少し工夫が必要です。 小さなボタンですが、意外とたくさんの機能を使いますよ。


角丸枠は、ツールのサイズによって角の丸みが変わります。 (サイズが大きいほど丸くなります)

これを考慮して、最初にツールのサイズを決め、それを鉛筆ツールと選択ツール、どちらも同じ値でセットしておいてください。 (5〜10ピクセルくらいがいいと思います)

作りたいボタンの大きさで「新規作成」し、ボタンの色を描画色にセットします。
鉛筆ツールにして、「フィルタ」⇒「「現在のツールで描画」⇒「角丸枠」を実行します。



角丸枠の内側を、描画色で塗りつぶします。



一番下のボタンレイヤの上に、新規レイヤ「明暗」を作ります。

描画色を黒に変更しておきます。


明暗レイヤで、「選択範囲」⇒「すべて選択」をクリックして、選択枠を表示させます。
そのまま「選択範囲」⇒「座標を指定して選択」をクリックします。

左下の空白のボックスに、ボタンの厚みとして見せたい幅を入力します。 (3〜5くらいがいいでしょう)
右端の「縮小」をクリックしてOKします。
選択枠が、少し小さくなりました。



「フィルタ」⇒「現在のツールで描画」⇒「角丸枠」をクリックします。
選択枠の内側に、黒の角丸枠が描画されました。

枠外をクリックして、選択範囲を解除します。



黒い角丸枠の内側を、黒で塗りつぶします。

この明暗レイヤで、レイヤウィンドウの「透明色保護」にチェックを入れて、透明部分(黒い部分の外側)に、描画できないようにします。



コントロールウィンドウ下の、カスタムグラデーションで、プリセットのグラデーションのうち、左から右に白⇒透明に緩やかに変化しているものを選んでOKします。

カスタムグラデーションをONにします。



線形グラデーションが描けるようにツールをセットし、明暗レイヤの上から下へ白⇒透明になるようにグラデーションを描画します。

この時、CTRLキーを押しながら上から下へドラッグすると、ポインタが垂直方向だけに動くので、グラデーションが傾かずに描けます。


この明暗レイヤの合成モードを「スクリーン」「オーバーレイ」「ソフトライト」などにし、必要なら不透明度も調整します。

ボタンの色により合成結果が違うので、好みのボタンになるよう、色々試してみましょう。

ちょうど良くできたら、レイヤを結合します。


一番上に新規レイヤ「文字」を作って、テキストツールで文字入れします。
作例では、ごく簡単に白で文字入れしただけですが、影をつけたり立体的にするなど、自由にアレンジすることも可能です。
文字レイヤを、ボタンレイヤと結合します。

なお、このまま透過色を指定せずにGIFやPNGで保存すると、丸めた角の外側部分は「白」になります。

Webサイトの背景が白ならそれでよいですが、そうでない場合は、Webサイトと同じ背景色で角の部分を塗りつぶすか、そこを透過させて保存する必要があります。



まず、ボタンに使っていない色で、角の外側を塗りつぶしておきます。
保存画面でファイル名を付けたら、ファイル形式にGIFを選び、「透過GIF/PNG」にチェックを入れて「保存」をクリックします。



透過色設定画面で、角の外側をクリックすると、画面中央上のカラーボックスの色が変わります。

左の例では、水色(RGBで0、255、255)が「透過色」になるわけです。

OKすると、透過GIFでの保存は完了です。

参考:ボタンを作る2

ボタンの「台」ができたら、文字を入れない状態で保存しておくと、後で何度も使えて便利です。
なお「透過色」とは、ブラウザやビューアで表示した時に、指定した色を描画(レンダリング)しない、という仕組みです。 実際に透明になっているわけではありません。 したがって、画像の閲覧環境によっては、透過されずに色が見えてしまうことがあります。 覚えておきましょう。