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

スクラッチでwebアイコンフォントの元になるイラストを描く方法を21時限の中の「3.Scratchでイラストを描く」で解説しました。

 

webアイコンフォントを描く時に気を付ける5つのポイント

そこでは詳しく書かなかったのですが実はIcomoonに取り込む時に以下の5つのポイントをクリアしていないとちゃんと表示されません。

 

 

１.２.３は21時限で説明済みですので残りの４と５を書きます◎

 

スクラッチで描いたイラストを書き出します。

 

書き出したファイルをIcomoonのImport Icons で取り込んだら注意が出てしまいました。

 

「ストローク（線）は無視されます」と注意しています。

 

とりあえずアイコンを選んで下のボタン、Generate Fontで進むと

 

イラストがちゃんと表示されていないね

 

ちょっと見にくいけれど、グレーの部分（目、鼻、ツノ）は表示されていて、黒い丸（体）の部分が表示されていないわね

この差は何だろう？

 

4.線は表示されないので筆ツールなどで描きます

スクラッチで描いた所までさかのぼると、ちゃんと表示されなかった（黒で表示された）部分は

 

円ツールの枠線を使って描いた30の太さの「線」でした。

 

直線ツール、四角形の枠線、円の枠線　は表示されないので注意

線以外のツールで描き直します。

 

例えば円ツールの中を塗りつぶして、消しゴムツール（Max100まで）で中を丸く消します。

 

見た目は同じでも右は「太さ30の線」で、左は線ではありません。

 

「線」が無くなったので、改めてこれをIcomoonにインポートします。

 

insect2、今回は大丈夫でした。

 

黒い表示もありません。

 

 

5.パスを統合しておいた方が安全です？

パスの統合というのは、イラストのパーツをバラバラで無く（水色のように）スッキリ1つにまとめる事です。ただ今回はこれをしなくても大丈夫だったので大きさや細かさにもよるのかもしれません。

 

以前バッグのアイコンを（イラストレーターで）作った時にこれが原因で綺麗に表示されず修正した経験がありました。

 

お絵かき機能がシンプルなスクラッチでパスの統合をするのは結構手間なので（もし綺麗に表示されなかったらこの記事を思い出していただくという事で）このままでいいのかもしれません◎

 

 

作ったアイコンをダンロードして実際に使う方法

 

この後、IcomoonでファイルをダウンロードしてWordPressや他で使うやり方は「プログラミング1年生」の21時限、22時限をご覧ください。

 

21時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編

 

22時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編

 

 

お疲れ様でした。