Inkscapeでアクア風ボタンを作ってみる: dara-j

□変更するスタイルは、『光彩（内側）』です。なんてことをしているんだけど、Inkscapeにはそんな機能がないので、ちょっと工夫。

見た感じは外周側が暗く、中心に向かって透明のグラデーションぽくなってるので、そんなようなオブジェクトを重ねてみることにする。

円オブジェクトを選択した状態で[編集] - [複製]で同じサイズの円オブジェクトを複製し、またもコンテキストメニューから[フィル／ストローク]を実行、「フィル」タブで「放射グラデーション」を選択する。

このままグラ編集をすると、最初の円オブジェクトのグラデーションを構成する色も編集されてしまうので、[コピー]をクリックしてグラデーションを複製しなきゃならない点に注意。

複製したグラデーションを編集して、外周部分を不透明の黒、中心を透明の白に変更する。中心は透明の白（FFFFFF00）の色フェーズを2～3個使ったほうが外周の暗い部分が狭くできるのでよい（ここではFFFFFF00を2つ使っている）。

(クリックで拡大)

で、作成したグラ円オブジェクトを元の円にぴったり重ねる。ただ、このままじゃグラ円がちょっと強いかもしれないので、そんな場合は「フィル／ストローク」で「マスター透明度」を調整してみるとよいかと。

(クリックで拡大)

ここでは「マスター透明度」を67%に設定してみている。

元記事と同じように、円の上部に楕円を重ねて、これに白→透明のグラをかける。透明部分の重なり具合を見て、グラデーションの範囲を適当に調整してみるとよいかも。

(クリックで拡大)

で、これまた元記事に準じてハイライト楕円を複製、[オブジェクト] - [垂直に反転]した後、円の下部にハイライトと上下対象になるような位置に配置する。

下部に配置したクローン楕円を選択したまま、「フィル／ストローク」で「ぼかし」とマスター透明度を適当に調整。この図ではぼかし：11.0、マスター透明度：70ってな感じ。

(クリックで拡大)

で、ビットマップエクスポートすると、こんな感じになりました。PNG出力ね。

Inkscapeで作成したSVGはこちら。NYSLでご自由にお使いください。使い道ないだろうけど。

色みやグラデーションのかけ方、ぼかし方なんかはあんまり考えないで行ったけど、そこそこうまくいったのでは。ハイライトに多少色みをつけたり、放射グラを黒ではなくほかの色にしてみたりするとも少しきれいになるかな。