WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >イラスト

フラットデザインの流行がまだまだ続いていて、装飾が控えめなデザインが多いですが、手書き風のデザインって結構よく見かけますよね。
むしろシンプルなデザインだからこそ、手書き風の装飾やイラストが映えて、個性が出せるように思います。

以前、シェイプなどを利用してイラストアイコンを作る方法をご紹介しましたが、今回は紙に描いたイラストをWebに活用する方法をご紹介します！
PhotoshopとIllustratorの両方を使います。なお、バージョンはCS5を使います。

紙に描いたイラストをPCに取り込む

まずは紙にイラストを描きます。イラストの上手い・下手については触れないでください（切実）。
無地で真っ白な紙に描くのが断然おすすめですが、罫線の入った紙に描いても大丈夫です。罫線のある紙の場合は、鉛筆書きではなくペンで清書したほうが、後がラクです。

手書きで色まで塗ってしまうのであれば、このまま明るさなどを調整してjpg化すればイラストとして使えますが、今回は線画のみ手書きで、その後の処理はPCで行なうやり方でいきます。

Photoshopで余分な要素を消す

必要な線をくっきりと、不要なものは白飛びしてくれるように明るさ調整をします。場合によっては少し線が虹色になってしまうので、白黒化もしています。
この状態で一度、jpgなどに書き出します。

ほぼ、必要な線のみ見えるようになりました。

Illustratorで線をパス化

良い感じに線を抽出できましたら、書き出した画像をIllustratorで開きます。この画像を選択した状態で、画面上部の「ライブトレース」をクリックします。
最初からうまく線が拾えると良いのですが、かすれてしまったり、線が太すぎて筆で勢いよく描いたような線になりがちです。
線の感じを調整します。

ライブトレースをクリックすると、その左に「しきい値」があります。ここの数値を動かすことで、線の感じを調整できます。しきい値が低いほど線が薄く、高いほど濃くなります。
どのくらいの値が良いかはやってみないと分からないので、実際に調整して、お好みの線になる数値を見つけましょう。

良い感じに線がとれたら、「拡張」をクリック。

これで、線がパスになりました！
パスになってしまえば、あとは線の色を変えるなり、着色するなり、加工が可能になります。

実際に加工してみよう

加工の前に、余分なパスが残っていることがあるので、消しましょう。
また、どうしてもライブトレースのような自動調整機能を使うと、思わぬ形に線がとれてしまうので、気に入らないところは手動で調整します。

加工例1

それでは、楽しい加工作業をしていきます。
まずは、線画自体の色を調整してみます。手書きなので、真っ黒よりも茶系やグレーの線にしたほうが、温かみが増してより手書きの雰囲気を生かせるのかな、と思います。
これはお好みです。

加工例2

着色してみました。絵本風になりました（笑）
線の色や塗りの色で、印象が多少変わるので、使う目的に合わせて遊んでみてください。
こちらは、とりあえず無難な配色にしています。

加工例3

実際にWebサイトのデザインに取り入れてみた、と見せかけてみました。この例のように、フッターにイラストがあるデザインってよく見かけますよね。
描いたイラストを複製して、街っぽくしています。

PhotoshopやIllustratorだけでもイラストは作れますが、人間もともとは紙に手で絵を描いてきていますので、手書きのほうが思うように描けるかと思います。また、PCだけで描こうとするとどうしても固くなってしまいがちなので、手書きの整いすぎていない感じ、ゆるい感じ、人間味のある感じを出したい場合は、手書きベースのイラストを取り入れてみるとおもしろいです！