きっかけ

有名エナジードリンクのプレゼントキャンペーンのポスター作成の際に実物のロゴを使ってはいけないとの話をされたため急遽写真ではなくイラストを描くことになったためその時に本物に近づけるためのコツを紹介したいと思います。

手順

1. 写真をトレース
2. 色ごとに部品を作成
3. グラデーションを使いまくる

1. 写真をトレース
写真のトレースで躓いてしまう人が多いと思うのですが、慣れれば簡単にできるようになります。 わからないところはぐぐりまくるということと、作業しているところの動画を見るのが参考になると思います。

ポイント
一つのオブジェクトとして一つの写真のトレースはせずに形の雰囲気等で分けられるところはオブジェクトを分けて作っていきましょう。 今回の場合だと缶の上の部分、本体の部分、下の部分、缶のタブの部分に分けてトレースしました。

2. 色ごとに部品を作成
トレースした部品をさらに色ごとに分けていきます。今回の場合だと缶の本体の部分に赤と青の色があるため分ける部分ごとに缶の本体を⌘C、⌘Fで複製します。 そしていらない部分のパスを消去しながら必要な色が出てくるように調整します。

ポイント
缶のへりなどの弧になっている部分は二つの楕円を重ねてパスファインダーで重なった部分だけを抜き取る方法で作るとうまく作れます。

3. グラデーションを使いまくる
実態のあるものを作るときはこれがリアルに見えるかどうかの決め手になります。これがあるとないでは全く違ってきます。現在一般的にウェブサービスにおけるデザインはフラットデザインが主流になりつつあると思います。グラデーションはインパクトのある背景として使われることが多くあると思います。しかし、一昔前のiOSアプリなどのスキューモフィズムデザインでもグラデーションは使われておりこちらではよりリアルに見せるための光と影としてグラデーションは多く目にすることがありました。今回はその要領で作っていきましょう。 Adobe Illustratorでは線を軸としてグラデーションにする方法と点を軸にしてグラデーションにする方法があります。

線形グラデーション↓

フリーグラデーション↓

 Adobe Illustratorでは線を軸としてグラデーションにする方法と点を軸にしてグラデーションにする方法があります。今回は、缶の本体の面となる部分は線を線形グラデーションにし、缶の本体の上部の光が反射している部分はフリーグラデーションでラインのグラデーションやポイントのグラデーションを使って作っていきました。

完成！

終わりに

全くそのものに見えなかったものがだんだん近づいていって最終的には本物と見間違えるくらいになる達成感がとても楽しいのでデザイナーを目指している人は試してみるのも手かもしれません。 今回のやったことは、このエナジードリンクブランドのデザインの構造を考えるきっかけにもなり、デザインの技術的にも構造的にも学べると思いました。そしてそのような教材は意外と身近なところにごろごろあるんだなと思いました。