Inkscape写真をイラストに

ビットマップのトレース」だけでInksscapeに取り込んだ写真を一瞬でイラストに。

 

その後不要な部分を削除したり色を変更したりしてアンディ・ウォーホル風に、までを解説します。

 

 

 

上野の国立科学博物館で撮影したカブトムシの標本の中からこのカブトムシを650×400pxで切り取って使います。

写真画像を加工する場合はこちらフリーソフトGIMPギンプ

GIMP SNS用に画像を作って保存

 

実際に使った写真画像。同じ作業をする場合よければ使ってください

 

それではInkscapeを立ち上げます。

Inkscapeに写真画像を取り込みます

ファイル>インポート

 

使う写真を選択>Open

 

画像を「埋め込み」か「リンク」か選びます。今回はどちらでもいいのでリンクにしました。(リンクにした場合、画像部分は右上の様な水色の「?」で表示されますがファイルを開けばちゃんと表示されます)

 

リンクと埋め込みの違い詳しくはこちら◎

INKSCAPE 9時限:画像の埋め込み?リンク?

 

インポートで配置したら全体はこんな感じです。

 

 

「ビットマップのトレース」でイラストに変換

画像を「選択」ツールで選択した状態でパス>ビットマップのトレース

 

「ビットマップのトレース」詳細設定の小窓が出ます。Single scanの方はこんな設定に、(右下Updateを押すとイメージが表示されます)

 

Multiple scansはこんな感じの設定にしてみました。設定が済んだらOK。

Scans:3で進めましたが結局6にした物を使いました。せっかくなので3と6の違いも解説しています

 

 

イラストが出来たので小窓は×で閉じます。

 

出来たては数枚に分けたイラストが1つのグループになっています。個別に扱いたいのでオブジェクト>グループ解除 します。

 

ビットマップのトレース数 Scans:3 の場合

Scans:3 の設定で作った物は4枚のイラストに分かれます。左の1番濃いのが1番上にあった物で、右に行くほど下で薄くなります。

 

ビットマップのトレース数 Scans:6 の場合

Scans:6 の設定で作った物は7枚のイラストに分かれます。左の1番濃いのが1番上にあった物で、右に行くほど下で薄くなります。

 

こうして見ると3より6の方が写真に近く分割されているのが分かります。ざっくりした分け方もそれはそれで味があって好きですが今回は、

 

6の方の1、2、4を使う事にしました。解説がし易いようにフィル/ストロークのフィルで色を付けました。移動した時に位置がバラバラになった場合は揃えたい物を複数選んで「整列と配置」の「上端で揃える」、

フィル/ストローク詳しくはこちら

 

 

上が揃ったら続けて「左端で揃える」で3枚の版が元の様にぴったり揃いました。

 

 

レイヤーを分けて作業しやすく

これから3つの版(黒、緑、黄)を加工するのですが、レイヤーを分けて作業しやすい環境を作ります。

 

現在3つの版(黒、緑、黄)は全部「レイヤー1」にあります。

今までは全部「レイヤー1」で作業してきたのです。捨てていなければ写真画像も「レイヤー1」にあるはずです。(これはもう捨てても問題ありません)

今からレイヤーを2つ増やして黒、緑、黄、1色ごとにレイヤーに分けます(移動します)。まず分かり易い名前に変更しようと思うので「レイヤー1」をクリックして「下 黄色版」と書き換えます。

 

次に下の方にある「」マークでレイヤーを追加します。レイヤー名を「真ん中 緑版」とし「追加」をクリック。これをもう1回繰り返して次のレイヤー名は「上 黒版」とします。

新しく作った物ほど上に来るんだね

 

レイヤーの準備が出来たので現在「下 黄色版」にある緑と黒を移動します。「選択」ツールでカブトムシをクリック(1番上にある「黒」が選択されるはずです)。レイヤー>選択オブジェクトをレイヤーに移動

 

「レイヤーへ移動」の小窓が出るので、「黒」を移動させたいレイヤー、つまり「上 黒版」を選択>移動 

 

「上 黒版」レイヤーに入りました。「上 黒版」の目のマークをクリックして閉じると黒が見えなくなる事でも確認できます。

 

同じように「緑」は「真ん中 緑版」に移動します。「黒」が選択されてしまう場合は「上 黒版」の横の鍵マークをクリックしてロックして動かない(選択出来ない)ようにすれば「緑」が楽に選択出来ます。

 

左のカブトムシのイラストには何も変化がありませんが、レイヤーが3つに分かれてそれぞれの色も分かれました◎

 

ここから先は適宜レイヤーをロック(鍵マーク)したり表示、非表示(目のマーク)にして作業して行きます。

 


レイヤーを分けずにオブジェクト>オブジェクトのプロパティロックにチェックでも動かないように出来るのですがレイヤー分けすると表示、非表示もパパッと切り替えられて便利なのでこの方法も覚えておいて損は無いかと。


 

 

「下 黄色版」レイヤーにある黄色の不要な部分を削除したいので、上2つのレイヤーはロックして動かないようにします。左のツールの中の「ノードツール」で黄色い部分をクリックして全体を選択、

 

更に同じノードツールでノードを削除したい部分(つまり黄色の不要な部分)をドラックで選択、上の「選択したノードを削除」ボタンで削除してもいいですし、deleteキーでも削除できます。

 

四角やら丸やらが消えてスッキリしたね

 

次に棒の先にある丸(ノードツールで選択すると赤くなります)を動かして黒いカブトムシの中に隠れるように微調整します。この辺は完全に好みで。

 

”ノード”(四角)を削除しすぎて追加したい時は「新規ノードを選択セグメントに追加」で増やせます。2つのノードを(shiftを押しながら)選んだ間に1つ追加されます

 

 

「下 黄色版」が済んだらロックして「真ん中 緑版」のロックを外し作業をします。次は「上 黒版」と言った感じです。

 

小さな点や上の版に隠れている物(黒い032の後ろに黄色の032)などあるので「ズームツール」で拡大したりレイヤーで表示、非表示(目のマーク)を切り替えてチェックします◎

 

不要な所が取り除けました。

 

もうちょっと加工してアンディ・ウォーホル風にしたいと思います

 

アンディ・ウォーホル風の加工

「上 黒版」と「下 黄色版」のロックを外してコピペします。

 

パス>排他

 

黒い部分が抜けて黄色の細かい版が出来ました。続けてパス>分解

 

パスがバラバラになりました。

 

オブジェクトもバラバラになってしまったのでグループ化します。

グループにするなら何でバラバラにしたの?

バラバラにしたかったのはパスでオブジェクトはグループのままの方が移動などしやすいからよ

 

これらの操作をするとノードツールでバラバラのパーツが選択(そして色を変える)できて、選択ツールだと全体が選択できます。

 

 

コピペの元になった黄色いカブトムシを削除して、今作った黄色のカブトムシを黒、緑のカブトムシの元に入れます。

 

「整列と配置」を使うなどしてピタッと合わせてください。その際は「真ん中 緑版」と「上 黒版」のロックも外してください。

 

「下 黄色版」の色を変えたい部分をノードツールでクリック、「フィル/ストローク」で好みの色に変更します。

 

ザックリ適当にもまた良しです。

 

右は「真ん中 緑版」を無しにしてみました。

こっちの方がシンプルで好きかも

 

 

 

お疲れ様でした◎

 

 

こんな使い方も

フリー素材を提供しているPAKUTASOさんのサイトの水族館写真を使って。

 

Scansを2に設定して出来た3枚のイラストの1、人のシルエット(の下の部分)を使いました。

 

YouTubeでBubble(バブル:ノーコードでアプリやサイトが作れます)のスライダーの作り方の解説に。パクタソさんでの画像ダウンロードからInkscapeで作るまで、も動画の最初の方に出ています。→「Bubbleの使い方_スライダー Flickity、文字の大きさを変える

 

 


 

今回のような「ビットマップのトレース」では無く、ペンツールで描く方法はこちら。

INKSCAPEで写真をトレースして簡単に描く

よりイラストに近くアイコンなどに使いやすいかもしれません。

 

 


 

作ったイラストをアイコン(webアイコンフォント)にして使う方法はこちら。WordPressで使う方法です。

Inkscapeで描く→アイコンフォントにする→WordPress子テーマに入れる

 

 

次の記事

8月です