Inkscape導入に際しては前回エントリも参照してくださいね。ファイル容量に注意。現時点での最新版(ver.0.45.1)を用いて作業しています。
0.Inkscapeの起動
まずはどうにかして起動して下さい。下のような画面が出たと思います。
ここで数字の1キーを押します。これによって100%の倍率に変更します。いくら拡大縮小でデータ劣化しないSVGとは言え、あまりにでかいとやりづらいので。右下のZのパラメータが100%になっているのを確認して次へ。
1.正円を描く
左のツールバーの"円/弧を作成(F5)"を選択し、ドラッグすると楕円がかけます。鋭い方はお気づきになったかもですが、下にCtrl押しながらだと真円がかける、とあります。
Ctrl押しながらドラッグして適当な大きさの円を描きましょう。
2.円に線形グラデーションを施す
円が描けたら、その上で右クリックして出てくるメニュー中の"フィル／ストローク(F)"を選択します。
メニューから"オブジェクト(O)→フィル／ストローク(F)"や
ウィンドゥ左下の赤で囲った部分をクリックしてもダイアログを出せます。
Shift+Ctrl+Fでも出せますね。お好きな方法で。
ダイアログを出したら、フィルタブになっているのを確認して線形グラデーション→編集をクリック。
ここからちょっと操作に慣れるまでがめんどくさいところです。
グラデーションエディタを出したら最上部に色の変化が、その下に選択中の色が出ています。その中をクリックすると要素の色が現れます。
操作後のSSを貼っていますが、一番上が開始色（この場合は黒)になります。
一番下が停止色（黄色）。今は全て不透明にしています。つまりA=255ということ。
"色フェーズを追加"ボタンを押して、より滑らかなグラデーションを作成しましょう。黒と黄色の間のオレンジのような色を選択しました。
このとき、"オフセット"というものを操作する必要があります。これはその新しく設置した色がそのグラデーション中、どの場所にあるかを表すもの。0が開始色で、1が停止色です。
今回は0.81にしてみました。あと重要なことですが、元ウィンドゥをみると、四角と線がグラデーションを表しているのが解ります。
図のように四角形をドラッグして横線形から縦に直してやりましょう。
3.レイヤー追加・円のコピー
ここでレイヤーを追加してみましょう。
メニューから"レイヤー(L)→新規レイヤー(A)"
これで新しいレイヤーができました。これは一番下のレイヤーのプルダウンメニューで確認したり、レイヤーダイアログを出して確認できます。
この上に新しく円を作ります。
1-2で作った円を選択し、右クリック→"コピー"。ここで複製を選んではいけません！コピーは受け取った情報は可変ですが、複製はまったく同一のデータを保持するので、複製した先を変更すると複製前のデータも一緒に変換されてしまいます。注意。
同じく右クリ→貼り付け。このときちゃんと新しく作ったレイヤーに貼りついているか確認しましょう。LayerメニューでLayer1だけ、Layer２だけ表示させてみるのもいいかもですね。
まったく同じオブジェクトが得られたと思いますが、"フィル/ストローク"ダイアログを新しいオブジェクトについて出し、フィルを単色塗りに一旦戻します。
移動ツールを使って元の円にぴったり重ねてあげます。グリッドを使うといいかも。もっと賢い方法がありそう。
4.陰影をつける:放射グラデーション
再びフィル/ストロークダイアログを開き、フィルタブで今度は放射グラデーションを選択します。同じく編集画面を開く。
ここで重要なのは縁に黒っぽい感じを出す、ということです。色フェーズを追加して、4つの黒を適度に分散させて作ってみました。
開始色は透明の黒(A=0)
2番目はかなり薄めの黒(A=20)・オフセット:80
3番目も薄めの黒(A=63)・オフセット:90
停止色はそこそこ薄めの黒(A=160)
でした。3色ではちょっと厳しいかなと思います。色は多くても問題ないのでいろいろ試してみるのもいいかも。
5.上部のテカリを作る
新しいレイヤーをもう一回作って、（3枚目）
元の円の半分くらいにした楕円を上半分に置く。
この時、フィルは線形グラデーションで完全不透明な白から透明な白に。
ここでなんとなくぼかしをいれてみる。ちょっとだけ。下のスライドで2.0にしてみました。
こんな感じになりました。おおそれっぽい。
6.仕上げ:下部をちょっと明るくしてみる
同一レイヤー上でやってしまいます。
さっきの楕円をコピーして、180度反転させましょう。そして円の下部に持ってくる。
このフィルのグラデーションを変更します。下部ほど明るくなればよいのでそのように前と同じくグラデーションエディタで編集。
開始が不透明な明るい黄色(A=225)で、停止が透明な黄色(A=0)。
このままでは不自然なので、ぼかしをかけます。自然になるように…16.7ってなりましたけど好みで。
終わり！こんな感じでした！お疲れ様でした！
ここに作成したSVGファイルを置いておきます。
aqua.svg
勝手に持ってって使ってもらって結構です。寧ろどんどん改変しちゃってくださいな！
本当に初心者でもネットを漁りつつここまで出来るので、みなさんもっと色んな事教えてくださいね。
ここはこうした方がいいとかこの辺がわからないとかあれば対応しますので＞＜
インストールしっぱなしの凄いソフト、触ってみましょー。Inkscapeに限らず…
