ただのコーダーがIllustratorでSNS用アイコンを作れるようになるまで

Zennに記事を書くのははじめましてです。
普段は駆け出し…ならぬ歩き出しのWeb屋をやっております。

動機

Illustratorを触るのは、デザイナーさんから頂いたデータからアセットを書き出す程度で、その過程でも基本的な操作に困ることがあり、一度勉強したいと思っていました。
そんな中、GWで手が空く時間ができ、体調もよくなってきたのでこのタイミングだ！と思い公式チュートリアルをやってみることに。

ちょうどTwitterとZennを始めることを検討していたので、成果物としてSNS用のアイコンを設定して始めることにしました。

初めてちゃんと触るイラレは…

Illustratorすごい！こりゃAdobe様に高い税金を納めるのも納得。
シェイプツールを触るだけで感動してしまう程度のイラレ力なので、チュートリアルがだいぶ楽しく進められました。特に「シェイプ形成ツール」は度肝を抜かれました…。
学んだことはZennのスクラップの練習も兼ねて以下にメモしています。
https://zenn.dev/nawomat/scraps/6704fa2c053040
あ、それとAdobe製品は、ソフトのホーム画面から各種チュートリアルに進めるのが素敵ですね。

基礎を学んだあとは自分のアイコン作りへ

基本的なツールの使い方を学んだあとはいよいよアイコン作りへ。
まずは下書きが必要とのことだったので、久しぶりに筆箱を取り出してきてざっくりイメージを描いてみることに。

洗脳されているタイプの瞳

一応自分の顔をイメージしているつもりですが、絵心は小学校の自由帳の中に置いてきたためお察しください…。
むちゃくちゃシンプルですが、最初はこんなもんでしょと割り切って進めました。

下書きをカメラで撮影してPhotoshopで白黒を少しパキッとさせました。

だいぶ線が見やすくなった！

そしたら、これをイラレに取り込んでブラシでなぞっていきます。
この作業はマウスでやるにはちょっと難しかったので、iPad&Apple Pencil（古い方）でやりました。

なかなかええやん？
線があとから編集できるのすごくいいですね。伸ばしたり太さや角度を変えたりと微調整しました。

そして最後に色塗り。
ぼくはけっこう色黒なので、そこを忠実に再現しつつ、髪も真っ黒よりはちょいグレーに。
（肌の部分を塗らずに白くするパターンも考えましたが、なんだか大蛇丸味があるので今回はやめました。）

これで今回は完成！

まとめ

今回はIllustratorのチュートリアルから自作のアイコンをつくるまでの過程を、簡単にですが記事にしてみました。
ちょっとした時間があればできるので、同じようなイラレ初心者コーダーさんの参考になれば幸いです。

GWにツールを開発！…みたいなつよつよエンジニアなことはまだできない僕ですが、それはゆくゆくの課題として頑張っていきたいものです。

最後に、 「背景にサイケデリックなグラデーションを施したバージョン」 を紹介します。なにかアレンジできないかと考えた末路です。ここまでお読みいただいてありがとうございました！

アイコンには不採用