Inkscapeでグラデーションをかける

ブログが作りたい!Inkscapeの使い方 > Inkscapeでグラデーションをかける

Inkscapeでグラデーションをかける

Inkscapeでグラデーションをかける

Inkscapeで星形アイコンを作ってみる(3/3)

前回の記事『Inkscapeでオブジェクトを編集する』の続きです。引き続き、Inkscapeを使って簡単なアイコンを作っていきましょう。

全3回シリーズの第3回(最終回)です。今回は、前回作成した星形のアイコンに、グラデーションをかけます。

▲ページの先頭に戻る

Inkscapeでグラデーションをかける

1:画像ファイルを開く

(01)

前回作成した画像ファイルを、ダブルクリックしてください。(すでに開いている場合は、もちろん必要ありません)

Inkscapeファイルをダブルクリック

拡張子svgが、Inkscapeに関連付けされていない場合は、記事『いつも使うプログラムを選択しておく方法』が参考になります。

(02)

前回作成した画像ファイルが開きます。

画像ファイルが開く

▲ページの先頭に戻る

2:グラデーションをかける

(03)

矢印ツール(オブジェクト選択)をクリックします。

矢印ツール(オブジェクト選択)をクリック

(04)

星形オブジェクトを、クリックします。(すでにオブジェクトが選択されている場合は、もちろん必要ありません)

オブジェクトが選択されると、破線で囲まれ、四方八方に矢印マークが表示されるはずです。

オブジェクトをクリック

(05)

Inkscape画面の左下に、「Fill:」と「Stroke:」として、フィルとストロークの色が表示されている箇所があります。

この色の箇所の「Fill:」の側をクリックしてください。

「Fill:」の色の箇所をクリック

(06)

そうすると、右側にオプションウィンドウが表示されます。

オプションウィンドウが表示される

このオプションウィンドウは、「フィル / ストローク」のオプションウィンドウです。主に次のようなことが出来ます。

  • 色を詳細に指定できる。
  • グラデーションを指定できる。
  • ストロークの線の太さや形状を指定できる。
  • 透過が指定できる。
「フィル / ストローク」のオプションウィンドウ

(07)

それでは、グラデーションをかけてみましょう。

「線形グラデーション」のボタンをクリックしてください。

フィルの線形グラデーションのボタンをクリック

(08)

さらに、タブ「ストロークの塗り」をクリックし、フィルと同様に「線形グラデーション」のボタンをクリックしてください。

ストロークの線形グラデーションのボタンをクリック

(09)

表示状態は、次のようになります。フィルとストロークにグラデーションがかかった状態です。

この表示倍率で見ると、予想とは違う感じがするかもしれませんが、表示倍率を100%にすると特におかしな感じにはなりませんから大丈夫です。

グラデーションがかかった状態

(10)

左サイドのツールボックスの中から、「グラデーション」ツールをクリックします。(下の方にあります)

グラデーションツールをクリック

▲ページの先頭に戻る

3:グラデーションの方向を変更する

(11)

「グラデーション」ツールを選択すると、前述(07)、(08)で「線形グラデーション」を指定してあるので、グラデーションのかかっている方向が、一本の直線で表示されます。

四角マークが色の濃い方で、丸マークが色の薄い方になります。このマークを移動することで、グラデーションのかかり方を変更できます。

試しに、四角マークをドラッグして、お好きなように変更してみてください。

グラデーションのかかり方を変更1

(12)

さらに丸マークもドラッグして、お好きなように変更してみてください。

グラデーションのかかり方を変更2

▲ページの先頭に戻る

4:表示倍率を変更して確認する

(13)

このままだとあまりにもどんな感じか分からないので、表示倍率を変えてみましょう。

Inkscape画面の右下に、表示倍率を変更する箇所があります。「100%」を入力してみてください。

表示倍率を100%に変更

(14)

そしてさらに、描画エリア(16x16)の外をダブルクリックすると、「グラデーション」ツールが解除されて見やすくなります。

グラデーションツールを解除

いかがでしょうか?すてきな星ができたかしら?納得がいかない場合は、何度か試して作成してみましょう。

▲ページの先頭に戻る

5:保存する

(15)

SVG保存しておきましょう。

(16)

さらに、pngで保存したい人は、エクスポート(png保存)してみてください。

png保存(エクスポート)の方法は、記事『Inkscapeでpng保存する』をご覧ください。

▲ページの先頭に戻る

前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回のInkscapeは、ベジエ、パスツールで矢印を作ってみようかと思います。

▲ページの先頭に戻る

関連記事

画像編集ソフトInkscapeに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2009/03/14 更新日:2009/03/14

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

「星 / ポリゴン」ツールは使えそうですね!
多角形を描くときよく悩みますが、Inkscapeのこの機能を使えば
複雑な形とかでもいけそうです(^o^)丿
グラデーションってついつい色んな色を追加してみたくなるけども、
単純に明暗だけで十分なんですよね。
光と影の陰影を自在に操ることができれば・・・違う仕事していたかも
しれません・・・。

栗 瑛太

fuminchuさん、こんにちは!(・∀・)/
コメントありがとうございます。


今回は、少しだけ実用的だったみたいですね~。
良かったわん。▼・ェ・▼ワンワン

星って、なんだかかわいいですねぇ。
この星形って、誰が考えたんでしょう。(´Д`;)


グラデーションは、
基本はやはり白で抜いていく感じでしょうか。

違う仕事というのは、デザイナーとかかしら。
fuminchuさんは、クリエイティブあふれてますものねー。

実はかなり絵がうまいとふんでいます。



それでは、またー。(*´∀`)人(´∀`*)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/441-270971d3
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて