こんにちは。私はここ最近iPhoneアプリを作っていました。
社内の役割としてはディレクター兼エンジニアなのですが、アプリを作っているとどうしてもデザイン素材やイラストが必要になってきます。

ボタンやアイコンなどであればフリーの素材を使ってできることもあるのですが、オリジナルイラストだとなかなかそうもいきません。
今回は弊社で運営しているノミトモというサービスに関連した暇潰しアプリということで開発を進めたのですが、受託制作も並行している都合上、どうしてもデザイナーの手が空かず困ってしまい自分で描くことにしました。

私はFireworks CS3を使っています。
もっと違うやり方はあると思いますが、そこは参考までにということで。

制作業界に入られる方の中には、今はエンジニアだけど昔マンガとかイラスト描いていたっていう方結構多いと思うんです。
限られた時間の中なので、なかなか難しいと思いますが、現在エンジニアやディレクターでも意外と面白いイラスト描ける人いると思いますよ。

是非チャレンジしてみてください。
自分のイラストでアプリ作るともっと作るの楽しくなりますよ！



1.　手書きで下書き

ノートに鉛筆で下書きをします。どうせトレースして調整するのでざっくりです。
ノミトモなので酩酊したおじさんです。

業務中に遊んでるのかと思われるので、手でガードしながらこっそり描いてスキャンしました。



2.　まずは輪郭をペンツールでなぞる

下書きをFireworksで開いて、その上からペンツールで顔の輪郭をなぞります。
初めは慣れませんでしたが、曲線の始点と終点を意識してポイントし、終点で湾曲を調整すると意外と簡単です。

かなり拡大して表示しながら作業すると楽です。
アプリのアイコンで使うので、こまかい歪みは気にせずどんどん進めます。
頭部も髪の毛で隠れる部分は適当で良いと思います。



始点と終点を意識してクイっと曲線を描きます。
線の色なしでやるより色を付けた線で引いて最終的にイラストのテイストによって色なしなど調整した方がやりやすいです。



3.　しわを描く

出来た顔の輪郭はどこか端に寄せて、次に皺を描いていきます。
輪郭と同じ要領で今度は塗りなしの線を下書きをなぞって引いていきます。



ある程度描いてみたら、輪郭に重ねてみます。
なんとなくそれっぽい！



4.　目などの素材もどんどん描く

なんとなく要領が分かってきたので、目なども含めて描いていきます。
ここまで描くと最後まで仕上げようという気持ちになってきます。



5.　影を描く

顔の素材を大方作ってみたら、顔の影を描きます。
光の当たる方向とか色々考えているとなかなか進まないので、その辺はなんとなくで進めます。

ペンツールで影の形を作ったら、プロパティの「エッジ」でエッジをぼかすを選択します。
なんとなくぼやかして影っぽくしていきます。

なんでテクスチャで「しわくちゃ」 が選択されているのかは分かりません。
でも影響ないのでそのまま進めます。





先ほどまで作っていた顔に影を乗せてみます。

それっぽくなってきました！



髪も付けると立派な顔です！

ここまで来ると「やればできるじゃん！」と思います。



6.　細かい部分を最終調整

酔っ払いなので、頬を赤くするなど、細かい部分を最終調整します。



ほんのり赤くしたいので、透明度を30％くらいにします。

うっすら肌にかかる紅色ですね。
本当は顔が真っ赤になった酔っ払いのほうが現実多いですが、ここはイラストなのでこんな感じで調整します。



作った頬の素材を乗せるとこんな感じ。



7.　完成

こんな人現実にはあんまりいませんが、ネクタイを額に巻きましょう。

これで完成です！
すぐこんなになっちゃう上司がいたら会社の飲み会ももっと嫌になっちゃいますね！



それでこのイラストをアプリアイコンに使うとこんな感じです。



このアプリは現在審査中ですので、何もなければ来週リリースされるかと思います。
正直慣れている方の数倍時間はかかったと思います。

でも待っているよりは自分でやっちゃえばできるもんだと思いました。

社内で得意げに見せたところ、「不快」「イラッとするアイコン」とのことでした。

なかなかに難しいですね。