Curo.jp

Inkscapeでフィードアイコンをカスタマイズしてみよう！inkscapeであなた好みのフィードアイコンを作るチュートリアルです。

フィードアイコンのカスタマイズに関して注意事項があります。前回「オレンジ色のフィードアイコンをカスタマイズする前に」をご覧下さい。

inkscapeについては以前の記事「Inkscape:熱狂的チュートリアル」をご覧下さい。（基本的な操作が分からない場合は、リンク先も併せて参考にしてください）

Inkscape:線形グラデーションの使い方

Feed Iconsからダウンロードしたファイル群の中に「feed-icon.svg」があります。これをinkscapeで読み込んでください。

早速グラデーションの色を変えてみましょう。グラデーションのところを選択して、右クリックかCtrl+Shift+fでフィル・ストロークのダイアログを表示します。線形グラデーション「RSSg」を編集します。

このフィードアイコンのグラデーションは7つの色フェーズから成っています。色フェーズを一つ一つ編集してお好みの色に変えていきましょう。ここでは、簡単に灰色のグラデーションに変更しました。メタルっぽく質感を出すためにグラデーションの中央部を明るめにしてみました。

参考までに、私が実際にどのように変更したのか、例を示しておきます。

オフセットが少し分かりにくいかも知れませんね。これは線形グラデーションの位置を表しています。線形グラデーションの始点がオフセット0、終点がオフセット1.00です。この始点と終点の位置は自由に変更することができます。試しに始点と終点の位置を斜めから縦に変えてみます。

Ctrlを押しながら角度を変えると調整しやすいです。

外枠線の色を変える

次に外枠線の色を変えましょう。グラデーションの背面に2つの矩形（四角）シェイプがあります。これを選択して一つずつフィルの色を変えましょう。色はお好みで構いません。ストロークではなくフィルを変更するので注意してください。

選択しにくい場合は、Altキーを押しながら何度かクリックしてみてください。背面側に隠れているオブジェクトを選択できます。

おまけ（悪い例）

mozilla:フィードアイコンガイドラインによると、『アイコンの「丸みのある四角形」の要素の角を丸みではなく鋭角にして使用しないでください。』とのことなのでこれは悪い例です。ちょっと凝ったの（？）作ろうとすれば、すぐガイドラインに引っかかっちゃうんだな。

これは、ガイドライン以外の何かにも引っかかりそうですけど。

でも、角と色を調整すればいい感じのができるかもしれません。

ちなみに、これはInkscape:チュートリアル シェイプ（3Dの構図を作る）を参考にしました。