AzPainter2を使おう〜HOMEへWeb素材作成 > 角丸ボタン

角丸ボタン

さりげなく立体的な角丸ボタンの作り方で、明暗のバリエーションがあります。
背景を透過させれば、背景色が異なるページで使い回しできるので便利です。

角丸の形を作る



作りたいボタンの大きさより、わずかに大き目の幅と高さで新規作成します。

全体を白で塗りつぶします。



描画色を黒にします。

「フィルタ」⇒「描画」⇒「枠線」を初期設定のまま実行します。



続いて「フィルタ」⇒「ぼかし」⇒「ガウスぼかし」を、強さ4で実行します。



さらに「フィルタ」⇒「カラー」⇒「2値化」を初期設定のまま実行すると、黒字に白の角丸型ができます。

グラデーションを描いて角丸型に切り抜く


ツールを線形グラデーション・「描画色-背景色」にセットします。

コントロールウィンドウで描画色と背景色を、ボタンにしたい色の同系色濃淡にします。


角丸レイヤの上にレイヤを追加して、「ボタン」とします。

ボタンレイヤ上で、CTRLキーを押しながら上方向にドラッグして、下が暗く上が明るいグラデーションを描画します。

このボタンレイヤを角丸型に切り抜きます。

「フィルタ」⇒「アルファ操作」⇒「他のレイヤと操作」で、対象レイヤが「角丸」なのを確認して、操作に「対象レイヤの色の輝度からコピー」を選びOKします。


ボタンレイヤが角丸型に切り抜かれました。

★この状態でも角丸ボタンとして使えるので、文字などを入れた上、黒を透過色に指定して透過GIF・透過PNGで保存しても結構です。

ボタンを立体的にする


ボタンを立体的にするのに、下の角丸レイヤをちゃかり利用することにしました。(笑)

角丸レイヤをボタンレイヤの上に移動します。
(つまりレイヤの上下を入れ替えます)
角丸レイヤに対し、「フィルタ」⇒「ぼかし」⇒「ガウスぼかし」を、強さ3〜4で実行します。


← 角丸レイヤの合成モードを「焼き込み」にすると、ボタンに立体感がつきます。

この後、「フィルタ」⇒「アルファ操作」⇒「他のレイヤと操作」を、初期設定のまま実行すると、角丸レイヤの余分が消去されます。


← 一番上に文字レイヤ、一番下に背景レイヤをつけたところです。

背景は、Webサイトの背景と色を合わせるか(この場合は通常のGIFやPNG保存でOK)、又はボタンに使われていない色で塗りつぶして、それを透過色に指定し透過GIF・透過PNGで保存します。
(異なる背景色のページで使い回す場合は後者です)

縁が明るくなるバリエーション


角丸レイヤを選択し、「フィルタ」⇒「カラー」⇒「ネガポジ反転」します。
その後レイヤの合成モードを「スクリーン」にすると、ボタンの縁がぼんやり明るくなります。

柔らかな印象になるので、サイトの雰囲気によってはこちらのボタンをどうぞ。

******* 関連のある記事 *******
グラデーション描画レイヤ機能アルファ操作
画像を角丸に見せるカプセル型ボタンテキスト(文字入れ)ツール
HOMEへAzPainter2の基礎イラスト講座写真補正・加工切り抜き&透過Web素材作成
テクスチャ&パターン作成色々な加工とTIPSAzPainter2レストランこのサイトについて