くずWebデザイナーのなれの果て

今回は少し難しくなってスコップをトレースしてみます。まずは元画像。

こちらが完成図。画像を見た感じ土を掘る部分（左半分）と手で持つ柄の部分（右半分）の2つに分けられます。右半分は今までと同様にグラデーションとオブジェクトを組み合わせていきます。

左半分の作り方

今回のポイントは、左半分のグラデーションのかけ方。画像は縁に当たる部分のオブジェクト2つ。金属のような複雑な反射をしている物体にグラデーションをかける場合、必要であればオブジェクトを割りましょう。

その上から被せるように別なオブジェクトを重ねています。上から重ねることを考えれば、下にあるオブジェクトが隠れる部分の形は自由です。

右半分の作り方

右半分は端のくり抜かれている部分の作り込みです。各オブジェクトを色から分割し、形に添って組み合わせています。

くり抜きのアウトライン。オブジェクトとしてそれほど難しいことはしていません。各パーツをどのように組み合わせると違和感なく見えるか想像すると良いと思います。

次は電池をトレースしてみましょう（サイコロと同じく細かいトレスしないという条件です）。円柱型の電池を立たせたまま正面から見ると、突起と本体の長方形が2つあることが分かります。ですので、まずこの長方形を作りましょう。

次に作った長方形にグラデーションを入れます。塗りをグラデーションに設定し、グラデーションスライダ上で色を切り替えたいポイントに合わせてクリック。各マーカーを選択した状態で画像から拾いたい場所でShift＋クリック。これを繰り返してグラデーションを作っていきます。参考にグラデーションの詳細を掲載しておきます。
同様にオレンジの部分もグラデーションを使います。黒い細い線は、長方形でもパスでも構いません。

最後に文字です。似たような文字で書いておきます。ただ、このままでは角がとがりすぎで違和感を感じます。ですので、上の長方形には「効果」－「スタイライズ」－「角を丸くする」を掛け、オブジェクトを大きい長方形の下に移動します。大きい長方形の方は、オレンジと黒を一緒に複製した大きい長方形でマスクします。クリッピングマスクした長方形に対して「角を丸くする」を掛け
、完成です。

ここからは実際にリアルトレースを作ってみたいと思います。しかし、いきなり難しいお題に取り組んでも挫折しがちです。ですので、最初はリアルではなく簡単なモノのトレスから始めてみようと思います。

トレスしやすいモノは、情報量が少なく、目印のあるモノや色の境目のはっきりした画像がやりやすいです。また、立体で奥行きのあるものは難易度が上がります。トレスの度合いも段階を少なめにアニメのようにしていくとその分楽になります。

ですので、身近にあるトレスできそうなモノとして、サイコロを簡易トレスしてみましょう。

不透明度は色の透明度を数値で設定する機能で、Illustratorなどドロー、ペイント系ソフトを使っている人にはおなじみのツールです。塗りの透明度を下げることで（通常は100%）明るい表現を得ることができます。透明度には描画モードを一緒に設定することで、重ねた色同士の混ざり具合を変化させることができます。

リアルトレースなどでは「ぼかし」と併用してよりなじませた色合いの表現が可能です。

リアルトレースをするときに、よりリアルに近づけるため写真の色が必要な場合があります。IllustratorではShift＋スポイトツールで配置した写真の色を拾うことができます。基準としたい色のあたりをクリックしてスウォッチに登録することで、必要な色をストックすることができ自然な色合いを出すことができます。

欲しい色が小さすぎるときには拡大して拾えますが、やりすぎるとスウォッチが似た色だらけになり訳が分からなくなりますので、やり過ぎには注意しましょう。