Inkscapeでも使える無料イラスト

商用利用OK、無料のお洒落なイラスト素材サイト

 

FLAT ICON DESIGNフラットアイコンデザインさんのイラストをダウンロードして実際にInkscapeで使うまでの解説です。

 

 

今回はファミコンのコントローラーを使おうと思いますのでトップページの検索窓に「ゲーム」と記入して検索します。

 

イラストのダウンロード

左からイラストレーターで使えるAi、EPS、お馴染みのJPEG、PNG そしてInkscapeで使える形式のSVGが並んでいます。SVGを選択します。

 

次にサイズや背景あり、なしが選べます。SVGの場合サイズは16×16 も 512×512 も同じです。

同じって?

データ容量が同じって事よ◎ Inkscapeで開いて大きさは拡大縮小できるので、ここでの「サイズ」はJPEGやPNGの場合に関係してきます

背景の有無は好みで大丈夫です。今回は「なし」の1番左にしました。

 

決まったら緑のボタン「表示中の画像をダウンロード」します。自分のパソコンにダウンロードされました。

(確認の意味でA: 16×16、B: 512×512 の2種類をダウンロード。どちらも21KBで開いた時の大きさも同じでした)

 

 

Inkscapeで開いて加工する

ダウンロードしたファイルを開きました。懐かしくかっこいいです。

 

「グループ解除」するとパーツごとに扱える

選択ツールでイラストをクリックすると、最初は1塊のグループになっているので オブジェクト>グループ解除 して1パーツずつ個別に扱えるようにします。

 

1回”オブジェクト>グループ解除”をするとこんな感じです。

何回「グループ解除」をすれば全部がバラバラになるの?

それはこのイラストを制作した方がどんな風に(どれとどれをグループにしたか)、何回グループにしたかによるので分からないわ

 

オブジェクトの「グループ」の考え方

グループについて少し解説します。Inkscape(やイラレ)ではよく使いますし知っているといい知識です◎

左の女の子は1つのグループにまとめていて右は全てのパーツ(目、鼻、口、輪郭、影、ピンクのカバー、カバーの艶など)がバラバラでグループにしていない状態です。「選択ツール」で選択すると破線で囲われて違いが分かります。

 

バラバラのパーツをグループにしたい時は複数のパーツをshift(Macの場合)を押しながら選択、メニューの オブジェクト>グループ化 です。右上のアイコン(この位置に無い場合は 表示>デフォルト で出ると思います)を押しても出来ます。

グループにした方が作業し易いと思えばグループにする、必要無くなったらグループ解除するなど人それぞれのやり方で◎

私も仕事でデータを送る時は先方が見易いようにグループ分け(やレイヤー分け)しますが自分だけで使う時は結構いい加減です。

 

目、鼻、口はグループにした方が1まとまりで移動、色を変える事も出来て便利なのでグループにしました。

 

ピンクのカバーは 1:ベースのピンクと 2:キラリ光る白いグラデーション で出来ていてこの2つは離す事は無さそうなのでグループに。右の丸いパーツ1,2もグループに。

 

それを更にグループ(右)にしました。
ですので右のパーツを1回「グループ解除」すると左の1、2に分かれ、もう1回「グループ解除」すると1つ上の画像のように4パーツ(1,2 1,2)に分かれます。

 

 

グループの中の1パーツだけ色を変える方法として(上)「選択ツール」では無く(下)「ノードツール」でクリックする方法があります。(ここでは解説しませんがノードツールはパスの変形も出来ます)

 

 

コントローラーに戻ります。

 

 

グループ解除を何回か繰り返すと右に斜めにかかっている薄い影が選択出来ます。「フィル/ストローク」の窓を右に表示させると不透明度が低く設定されていて控えめで絶妙な影なのだと分かります。

 

例えばこの不透明度を高くすると影が濃くなって晴れた日のようなイメージにする事が出来ます。

夏みたいな

 

グループ解除を繰り返して全てのパーツをパラバラに。

 

オブジェクトの「ロック」で動かないようにする

ここで「Bボタン」の色を変更したいとします。でもボタンを選択しようとすると手前にある「斜めの影」が選択されてしまいます。

 

そんな時は「斜めの影」を選択した状態で オブジェクト>オブジェクトのプロパティ

 

右に「オブジェクトのプロパティ」の窓が出ますのでその中の「ロック」にチェックを入れます。すると「斜めの影」(これには path1029と言うIDが付いているようです)は動かず選択出来なくなりました。

 

これで下にあったBボタンが選択出来るようになりました。

 

ボタン周りの赤を緑に変更出来ました。

 

 

ダウンロードしたコントローラーはこんなに沢山のパーツでできていました。

 

このまま使わせてもらったり、好みの色に変えたり、必要なパーツだけ他のイラストに使ったりと色々使えそうです。

 

 

他にも、、

「ミル・マスカラス風のマスクアイコン」を使って

 

マスクの目鼻口を パス>差分 など使って開けて

 

こんな風にしたり。

 

 

「博士のフラットアイコン」の

 

眼鏡と髭を拝借。

 

眼鏡のレンズは フィル/ストロークの「不透明度」を調節しました。