1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:
はじめまして!デザイナーのマチダです。2012年4月に新卒入社し、現在はスマートフォンゲームのイラストを制作しています。

今回はIllustratorでイラストを制作する際の基本や小技についてご紹介したいと思います。
これからIllustratorでイラストを描いてみたいと思っている方に是非読んでいただきたいです!

はじめに-Illustratorの仕組み-

多機能によってグラフィックだけでなく文書作成などマルチに活躍できるIllustratorですが、機能の多さに最初は何をどのように使ったらいいのか戸惑うかと思います。

<illustratorでイラストを描く際に心がけていただきたいこと>
普通絵を描く時は線画を描いて着彩すると思いますがIllustratorは少々違い、"様々な形をした図形を配置"して絵を描きます。図形を上に重ねていくことで形が作られていきます。

↑福笑いのようなパーツが図形です。色紙を切って輪郭を作り、目を貼って口を貼って…と図工の時間にこんな工作をしたことがあるかと思いますがIllustratorのイラスト制作はそれによく似ています。


<illustratorの特徴>
各々の図形の輪郭線(パス)には数値による情報を持っています。変形させると数値も変動するのでどんなに拡大しても形を変えても劣化しない、という点がIllustratorのメリットです。

↑Illustratorのデータを試しにテキストエディタで開いてみると、文字化けしてしまう画像データとは違いデータに含まれる要素のコードが書かれています。


またIllustratorで作った素材はこの情報を保持したままFlashやFireworksにコピー・ペーストで持ち込むことができるのでIllustrator以外のツールでも再編集ができます。

↑ロゴはIllustratorで作りPhotoshopで加工しました。加工はIllustratorでも出来ますがより細かい加工をする場合はPhotoshopやFireworksでの編集をおすすめします。


ではイラストをもとによく使う機能と使い方についてご紹介します。具体的な操作説明ではなく、どんなときにどの機能を使うのか覚えていただけると嬉しいです。

※現在業務にて制作しているゲームは未発表なので、技術研修にて制作したイラストを例に挙げます。こちらのリリース予定はございません。


Illustratorの基本機能とそれを用いた小技

<0:その前に…下書きと完成の比較>
前述の通りIllustratorは線画を描いて塗るものではないので、下書きでは構図とキャラクターの特徴がわかるレベルで描いています。違和感のあった部分もIllustrator上で修正していきます。


<1:図形の描き方>
基本の幾何学図形ツールで図形を組み合わせで大半のイラストを描くことができます。

※図形の組み合わせに使用するパスファインダについては後述にて説明します。


複雑な図形を描く場合はいちから描くことも出来ます。また一度描いたものはアンカーポイント(線と線をつなぐ点)を動かして修正ができるので幾何学図形から編集して描くこともあります。


<2:アンカーポイントの数を必要最小限まで減らす>

幾何学図形ではなく自分で描いた場合、どうしてもアンカーポイントが余分に出来てしまい滑らかな曲線になりません。美しいフォルムを作るためにもアンカーポイントの数は出来る限り減らしハンドル操作(曲線の角度を決めるもの)で曲線を調整していきます。



<2.5:ガイドを利用したアンカーポイントを減らす小技>
アンカーポイントを減らしていくともとのフォルムから大きく崩れてしまいます。修正部分をもう1つ同じ位置にペーストし、パスをガイド化すると以下の図のようになり、元のフォルムを参考にながらパスを減らして輪郭を調整することができます。ロゴを作る際にフォントをアウトライン化してパスを減らす、オリジナルのロゴへと変形させるのにも使える小技です。


<3:クリッピングマスクとパスファインダ>
キャラクターを立体的にするために影やツヤを付けますが、その際よくこの2つの機能を使用します。

※クリッピングマスク
はみ出た部分の情報を残したまま必要な部分だけを表示することが出来るツールです。パス以外にも画像の切り抜きなどに使えます。



※パスファインダ
はみ出た部分の情報を切り抜いて完全に消す際に使用するツールです。画像には使えませんが、切り抜く他にも、2つの図形を組み合わせる、2つの重なってる部分だけ切り抜くなどシーンに合わせて色々な機能が使えるツールです。手描きではなく幾何学図形からより複雑な形を作る際によく使います。


<3.5:パスファインダでイラストをシルエット化する小技>
イラストが完成したら全選択しもうひとつペーストします。その1つをパスファインダですべて統合させるとシルエットのみの図形を作ることが出来ます。シルエットデザインの他にも周りに境界線を付ける、ずらして影を作る、など色々効果を出すのに使える小技です。


<4:他、イラスト制作の際によく使うツール>
●線、フォントのアウトライン化:
輪郭線の強調、ロゴや服の模様に文字を変形させる等に使います。


●透明ツール:
通常は不透明度50%ほどにして髪などの光彩に、乗算は影などに使えますが、Illustrator以外のデータに持ち込む場合には正しく表示されないことがあります。画像で書き出すだけのときならば便利な機能です。



Illustratorの機能は数多くありますが、以上の機能がイラストによく使用されるものです。

最後に

今回Illustratorによるイラスト制作の基本と小技について描かせていただきましたが、合わせて是非イラストを描く際のテイストや世界観について書かれている「ピグアイテムのイラストレーションについて」の記事も読んでいただきたいです。

<Illustratorの操作方法について勉強するのにオススメ書籍>
ひとつひとつの機能を細かく書かれている本よりも、どのシーンでどの機能を使っているか書かれているメイキングの本をお薦めします。

MdN(http://www.mdn.co.jp/di/
MdN (エムディエヌ) 2012年 01月号 [雑誌]/著者不明
¥1,590
Amazon.co.jp
実際にクリエイターが描いた作品から学べる雑誌です。どのような小技を使って描いたのか、部分的に解説しています。学生時代はこれを手本にしながら絵を描いて小技を使い機能を覚えていきました。

<キャラクターを描く際のモデルにオススメなソフトウェア>
Poser(http://graphic.e-frontier.co.jp/poser/
Poser 9 日本語版/イーフロンティア
¥19,800
Amazon.co.jp
リアルな人体を360°どの角度からでも人体を観察することができ、男性、女性、子供、人骨、筋肉など豊富なモデルに関節の動き、頭や手のサイズも自由に変更できます。頭や腕のバランスを変えて描きたいポーズを作り、ディフォルメされたキャラクターデザインのポーズの参考によく観察しています。

最後まで読んで頂き、ありがとうございました!

---------------------------------------------
written by マチダ
twitter:@macheri67
facebook:Machi Eri

いいね!(6)  |  リブログ(0)
ページトップへ戻る