トップ 差分 一覧 ソース 検索 ヘルプ RSS ログイン

Inkscapeでボタン作成

フリーのドローソフト『Inkscape』でよくあるタイプのボタンを作るときのメモ。

clip_1a.png
Inkscapeの起動画面。A4横で新規作成したところ。

基本的なボタン

 元になるオブジェクトを作成

clip_2.png
四角いオブジェクトを作って、少しだけ角を丸めたもの。

 文字と影を追加

clip_3.png
文字は普通に上にのせただけ。
影は元のオブジェクトをコピーして、一番後ろに移動。ぼかしをかけたもの。

てかりつきボタン

clip_4.png
よくあるタイプのこんなボタンを作成。

 元になるパーツを作成

clip_5.png
今回は基本的なボタンをコピーして使用。

 グラデーションで塗りつぶし

clip_6.png
線形グラデーションでフィル。グラデーションを上下にしておく。
今回は『元の色→透明』のグラデーションだけど、好みに応じて『元の色→白』でも良いかもしれない。

 てかり用のパーツを作成する

clip_7.png
元になるオブジェクトをコピー。
その上に、直線を作成して『パス→パスをカット』で形状を分割する。
下の方は使わないので削除。上の方がてかり用のパーツになる。

 てかりを設定

clip_8.png
てかり用のパーツを少し縮小して元のパーツの上に移動。
あとは、それっぽくグラデーションを設定するだけ。

 完成

clip_9.png
文字と影を追加して完成。

その他、いろいろ

以下、簡単に手順だけをメモ。

 Vistaのスタートメニュー風

clip_10.png
濃い青色の基本オブジェクトを作成。
水色+ぼかしで下の方にハイライトを追加。
白色+ぼかしでさらにハイライトを追加。
白色グラデーションで上の方にハイライト。
白色グラデーションで下の方にもハイライト。
基本オブジェクトのコピーを黒でぼかして影を作成。
文字を載せて完成。

 Vistaのタスクバー風

clip_11.png
基本オブジェクトでそれっぽく上下グラデーション。
基本をコピー。ストロークを白にして太くしてぼかす。
基本をコピー。ストロークだけにする。
ここまでのオブジェクトをまとめてグループ化。

基本をコピー。ストロークもフィルも真っ白に。
グループ化したオブジェクトに真っ白をのせてマスクを設定。
文字を載せて完成。

 Mac OS XのAqua風

clip_12.png
基本オブジェクトを作成。
上下にグラデーション。上が青、下が水色。
オブジェクトをコピー。上下50%、左右80%ぐらいに縮小。
ハイライトっぽくグラデーションを設定。
文字を載せて完成。

感想

いろいろやってると、いろんなてかりボタンが気になってくる罠が(´∀`;)
Wiiとかそれなりに凝ってておもしろい。

実際に作ってみると、Aqua風が一番楽だったり・・・
やっぱり、後から出てきた方が手が込んでるのかな、と。

Inkscapeの場合、グラデーションとぼかしでどこまで工夫できるかが勝負なんだよなぁ。
重ね合わせでAddモードとか、自由度の高いグラデーションペイントがあれば・・・
まぁ、そこまで贅沢は言えませんか(´∀`;)