Webで使うアイコンなどで、何かのリアルな質感を出すときにはPhotoshopを使う場合が多いと思います。しかし、文字入力などを行ったり、図形を描画するのはイラストレーターの方が便利なので、PhotoshopとIllustratorを行ったり来たりして作業することになります。そこで今回は、イラストレーターだけで作成できる素材づくりを紹介します。
工夫次第でさまざまなものの質感を表現するテクニックは、Illustratorにもたくさんあるのです。今回はホームページなどで手芸やハンドメイドなどの、かわいいイメージで画面を構成するシーンを想定して、ジーンズのようなデニム生地に刺しゅうをしたイメージを作ってみましょう。
デニムの生地を作成する
1. まずは準備として、「ファイル」メニューから「ドキュメントのカラーモード」を「RGB」に、「Illustrator」メニューから「環境設定」→「単位」の「一般」と「線」を「ピクセル」に変更、「表示」メニューから「ピクセルビュー」にしておきます。カラーパレットも「RGB」モードにしておきます。（IllustratorでWebコンテンツをつくる際の基本です）
2. 幅160px、高さ80pxの長方形を描画し、「塗り：R10 G60 B160、線：なし」の色設定をします。色を薄くすればデニムの色あせた感じも出せます。
設定し終わったらその長方形を選択して「⌘+C」でコピーしておきます。（この先、4の行程まで長方形を移動しないようにしてください）
3. 長方形を選択したまま「効果」メニューから「スケッチ」→「クレヨンのコンテ画」を選択します。詳細設定は「描画レベル：1、背景レベル10、テクスチャ：麻布、拡大・縮小：135%、レリーフ：30、照射方向：上へ、階調の反転：OFF」
4. ⌘+Fで、フィルターをかける前にコピーした長方形を「前面にペースト」します。
5. 透明パレットを出し、前面の長方形のみを選択した状態で透明パレットを出し、「描画モード」を「ソフトライト」にします。これで、デニムの生地の完成です。
デニム生地の内側にステッチを作成
1. 描画した長方形よりもひとまわり小さい長方形を描画します。
2. 「塗り：なし、線：R242 G150 B0」の色設定線の色は任意でも構いません。
3. 線パレットを出し、点線の設定をします。「線幅：2px、線端：丸形線端、角の形状：ラウンド結合、点線：ON、線分：4px（その他はデフォルトでOK）」。
刺しゅう糸の作成
デニム地に文字の刺しゅうが入っているように加工していきます。刺しゅう文字の部分は「効果」メニューの掛け合わせで作ります。
かなりリアルに表現することはできるのですが、メモリが少ないと処理に時間がかかります。
作業環境を整え、余計なメモリはクリアにしておくことをオススメします。
1. なるべく太い文字で文字入力をします。「（例として）フォント：ヒラギノ角ゴ Std W8、フォントサイズ：50tp、段落：中央揃え」入力文字は「ABC」色の設定は「R255、G255、B255」を、先ほどのデニム生地の前面に配置します。
2. 入力した文字「ABC」を選択した状態で、「効果」メニューから「3D」→「押し出し・ベベル」を選択します。詳細設定は「X軸を中心とした回転角度を指定：0、Y軸を中心とした回転角度を指定：0、Z軸を中心とした回転角度を指定：0、押し出しの奥行き：2pt、フタ：側面を閉じて立体にする、ベベル：標準、高さ：2pt」に設定します。
3. 文字を選択したまま「効果」メニューから「スタイライズ」→「落書き」を選択します。詳細設定は「スタイル：カスタム、角度：-150°、アウトラインとの重なり0px、変位：0.3px」線のオプションは「線幅：1px、角の丸み：2%、変位1％、間隔2px、変位3px」に設定。
これで、デニム地に刺しゅうをしたディテールのボタンの完成です。なお、刺しゅうのディテールを登録しておけば、他のオブジェクトにも使えます。
現在、刺しゅう文字のアピアランスパレットはこうなっています。このアピアランスの状態を保存するためには「グラフィックスタイル」にスタイルを登録します。
アピアランスセットを登録
1. 文字を選択したまま、「ウィンドウ」メニューから「グラフィックスタイル」を選択します。
2. 「新規グラフィックスタイル」のボタンを押します。
応用編
登録したグラフィックスタイルを適用して画像を作ります。
1. ハート形のオブジェクトを作り、デニム生地（色を薄くしてみましょう）、オレンジのステッチを作成
2. 生地の上に任意の図形を描画して置きます。色指定は適当に設定します。
3. 描画したオブジェクトを選択して登録したアピアランスを適用します。
4. オブジェクトを選択し、塗りの設定を任意に行います。
※ Illustratorの画面上では「落書き」の設定が粗いように感じますが、設定が細かいと「Webおよびデバイス用に保存」をした時に刺繍の目がつぶれます。印刷用のコンテンツの場合は「落書き」効果の数値を変えると見栄えがいいです。
印刷用の例（同寸法の場合）：
設定した「落書き」の下記の詳細設定の数値のみを変えます。
線のオプション「線幅：0.4px、角の丸み：2%、変位1％、間隔0.9px、変位0.5px」
いかかでしょうか？ まだまだIllustratorには秘めたる可能性があります。立体表現も豊富でPhotoshopに引けを取らない機能や、フィルタも豊富にあります。
ただ、やはりベクトルデータを扱う分、立体表現などの計算に負荷がかかってしまって鈍くなってしまうことがあるので気をつけたいですね。
刺しゅうの表現では「3D」のフィルタが特に重いので「落書き」フィルタだけで表現してもいいと思います。文字はアウトラインをかけると、少し負荷が軽減されます。
ぜひ、お試し下さい。
