簡単。スクラッチでカブト虫をトレースして描く

トレースの題材を考えている時に「子ども科学電話相談」の昆虫スペシャル(2020.1.4) を聞き、やっぱり昆虫の人気はすごい、ならば便乗するべしで中でも人気のヘラクレスオオカブトトレースして「スプライト」を作ろう◎です。

 

完成はこうです。カブト虫は上野の国立科学博物館で撮影。

 

スクラッチで写真をトレースして簡単にカブト虫を描きましょう

 

 

難しそうだなぁ
下の写真をトレースすればいいから大丈夫

 

トレースに使う写真をアップロードします

スクラッチのサイトへ行き「スプライトを選ぶ」→「スプライトをアップロード」を選びます。写真だと「背景をアップロード」と勘違いしそうですがスプライトで◎

 

今回は「beetle.jpg」と言うファイル名で画像の大きさは600×700pxにしました。(描く時に結構拡大するので大きい画像の方がいいかと1200×1000pxでも試したのですが、どちらも画像の粗さは同じだったので制限があるのかもしれません)

 

上の「コスチューム」タブをクリックするとこんな感じでアップロード直後は「ビットマップ」で左の表示がガタガタです。「ベクターに変換」します。

 

表示がスッキリしました。

 

ツールのおさらいです。1つ1つの詳しい説明は「12時限」をご参照ください

 

準備が終わったので今から描くよ

 

写真をトレースします

好みですが「直線」ツールで描きました。ポイントは下のカブト虫が見えるようにこの段階では”塗り潰し”せずに枠線のみ、後から色を変更すれば良いので目立つ色で描きます。

触覚、目、頭の左半分を描いたら「グループ化」して(その方がバラバラにならず便利なので)1:コピー 2:貼り付け 3:左右反転 します。

 

 

塗り潰し」してみました。(すみません、いつの間にか線が黄色からピンクに)」が邪魔になって来たので

 

「枠線」を無しにします。

 

頭とツノのトレース完成です。

「直線」ツールと「筆」ツールの違い

ここで少し脱線して「直線」ツールと「」ツールで描いた時の違いです。

 

「筆」→「塗り潰し」でもOKなのですが

 

手の動きのせいで「点(丸いポイント)」が多くなるのが煩わしいので、足やツノなどは直線ツールで描きました。

描く物にもよるし、好みの問題です


左の前足を描いたらコピペして左右反転し右の前足とします。

 

体は「円」ツールで楕円を描き、「形を変える」で点を追加しました。

 

追加した点を持って体の形に沿うように上に持って行きます。

 

これも左半分だけ作りたいので半分より少し右に点を上下1つずつ追加して1番右にある点を削除します。

何で左半分だけで全体を描かないの?
左右対称にしたくて。そのためには全体を描くより半分描いてコピペした方が楽だから

 

1:コピー 2:貼り付け 3:左右反転 します。

 

画面を拡大して左右を合わせます。

今作ったパーツは体全体(グループ化しておきます)なので、上に乗せるの分1つコピーします。

 

羽の色を本物のカブト虫に簡単に似せる方法、「スポイト」で写真の羽部分をクリックします。(明るい所と暗いところで結構違いますが)

 

少し緑がかったヘラクレスオオカブトの色が作れました。体部分は黒にしました。

 

足が羽のに出ていて変だよ

12時限」の「6」で書いたように後から書いた新しいものほど上に来ます。なので足を選択して「下げる」で一番後ろに持って行きます。(写真より後ろに行ってしまってイラストが見えなくなったら写真を「下げる」で一番後ろに行かせてください)

 

左の中足、後ろ足を 1:コピー 2:貼り付け 3:左右反転「下げる」します。

 

頭、足などをカブト虫と同じ色にします。

 

最初にアップロードした写真は不要になったので削除します。写真が残っているとこれも含めて1つの「スプライト」になってしまうからです。

 

スクラッチでトレースしたヘラクレスオオカブト完成です。

 

お疲れ様でした◎

この時間で描いたものはスクラッチのページ「写真をトレースしてカブト虫を描く」で公開しています。ヘラクレスオオカブトの写真も付けました。

 

 


2020年8月26日 追記

作ったイラストをアイコンにして使いましょう

スクラッチで描いた物は保存形式がsvgなのでwebアイコンフォントにしてこんな感じでサイト上で使う事が出来ます。イラストを書き出す方法は「スクラッチを保存してファイルの中身を見てみる

または

「WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編」のイラストを書き出しますへ。

 

 

※書き出す(ダウンロード)前に黒1色にする、線の部分は残さない、などいくつかポイントがあるのでこちらをご一読ください。

webアイコンフォントを描く時の注意点

 

その後、イラストをwebアイコンフォントにする方法は「WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編」の「4. IcoMoonでwebアイコンフォントにする」へ。

 

 


こちらもオススメです

INKSCAPE 5時限:写真をトレースすれば簡単にイラストが描けます」はツールの違いなどありますが同じ「トレースお絵描き」で参考になるかもしれません。アンバルクマンのサイトで1番人気の記事です。

 

ピシッとした工業製品をトレースしたいときはこちら。「INKSCAPE 7時限:写真をトレースして簡単にイラストを_工業製品変編

 


2020年5月11日追記

19時限YouTubeにスクラッチでカブト虫を1から描く方法を載せました。同じ操作をすればこんな感じで描けると思います◎