DESIGNMAP

Web制作のための、Illustratorの独学方法

記事公開日:2012年11月17日最終更新日:2015年11月13日

Illustrator 独学でWeb制作を身につける

まずは大まかに基本操作をさわっていこう。
細かい機能、コマンドなどは覚えようとせず、さっと流そう。例えば、パスファインダであれば、[合体]、[分割]、[全面オブジェクトで型抜き]だけを理解すれば、当面は十分である。ツールもすべて理解したり、覚えたりする必要はない。色の付け方、複製、グラデーション、回転、縮小・拡大、リフレクトなどベーシックな機能だけをおさえる。

一冊目として、おすすめなのは『Illustrator トレーニングブック』である。安定した内容で、これ以上分かりやすく解説するのは難しいくらいの構成になっている。

もしくは、『Illustratorではじめてのイラスト』もおもしろい。実践編の作例をこなすと、自然と基礎コマンドがみにつくようになっている。使うツールやコマンドを、すべて解説するのではなく、実務で使うところだけを選んで構成されている。手順説明も丁寧で、カップ、ケトル、テレビ、円だけでつくってゆく犬のキャラクターなどの作例が楽しい。


入門書を例として2冊あげたが、自分で選ぶ場合は、リファレンスや逆引き形式の本ではなく、チュートリアル形式の本を選ぶことである。あと、作例の質が高いか、自分がつくってみたくなる作例か、どうかも選ぶ際のポイントになる。

理論をしっかり理解するPhotoshopと違い、Illustratorは手を動かして覚えるソフトである。触る時間を増やすことが大事である。

徹底的にトレースの練習をしよう

ある程度、基礎操作ができるようになったら、トレースの練習をしよう。
トレースとは正確になぞることである。ロゴ、文字、ピクトグラム、サインなどの画像を、Illustratorにテンプレートで配置する。その上に、ペンツールを使って、正確に奇麗にパスを描く練習をしよう。何度も何度も練習すると、ハンドルの角度や長さのコツがつかめてくるだろう。トレースの際は、平均・合体・連結などのコマンドを援用して使ってゆく。

ペンツール、トレースが苦手という人は『Illustratorで学ぶ「ベジェ曲線」習熟ドリル』が類書の中ではもっともおすすめである。一見、地味な本だが、何度も版を重ねているロングセラー。様々な角度から、丁寧にパスの引き方が解説してある。

トレースがしっかりできるようになれば、Illustratorの習得の半分がおわったようなものだ。一番、基礎になる土台のところがおわったといえる。

ロゴ、アイコン制作の勉強のやり方

Web制作でIllustratorをつかう場面はアイコン制作やロゴ制作である。チュートリアル形式の本を選んで、手を動かすところから始めよう。『Illustratorで作る ロゴ・マークデザインブック』は、作例のクオリティが高くおすすめしたい。手順もステップバイステップで、省略がまったくなく、わかりやすい。ひとつひとつの作例手順が長く、決してラクに読める本ではない。一つの作例をつくるのに、時間がかかるだろう。


Illustratorの本ではないが、ロゴ作成の教科書として『たのしいロゴづくり -文字の形からの着想と展開』をおすすめしておきたい。ここまで実用に徹したロゴ作成の解説本は初めてである。[欧文ロゴのテクニック]という章では作り方をあえて公式化、[文字の形をしろう]という章では、アルファベット別に、モンセンの清刷りを基にした、いろんな文字のバリエーションがのっている。このバリエーションをベースに自分で変形してゆくとよいだろう。ロゴ作りのヒントとして使える良書である。


また、アイコンの練習として有効なのは、iPhoneアプリのアイコンをIllustratorで模写してみることである。通常、作り方は何通りもあるが、慣れてくると手順が瞬時に浮かぶようになるだろう。

インハウスデザイナーを目指す方へ

Webデザイナーの働き方のひとつに、一般企業のインハウスデザイナーという選択肢がある。例えば、アパレル企業にはいって、デザイナーとして内部のWebサイトや販促物をつくるというケースである。この場合、Web制作だけでなく、紙のデザインの仕事も要求されることが多い。名刺、リーフレットなどのペラ物(1枚物の印刷物)、会社案内などの小冊子、うちわ、ボールペン、Tシャツなどの販促物のデザインデータもつくれるようにしておく。どれもIllustratorで作り、最終的に完全版下というデータにして入稿する。

社内のプリンターで印刷する場合は適当につくってもよいが、できれば印刷屋さんに入稿できる完全版下の作り方を知っておきたい。『Illustratorプロフェッショナルの教科書』は、カレンダー、ポップ、CDジェケット、Webカンプ、雑誌など、幅広いデータ作成の作り方が解説されている。この本の著者の1人である高野徹さんのIllustratorとPhotoshop本は、全て私は買っていて、どれもおすすめである。

プロのデザイナーでも怪しい人が多いのが、文字組み周りの機能である。特に、IllustratorはバージョンCS以降、文字周りの機能が増えている。本文組みのある紙物を効率よく作成するときに役に立つ。合成フォント、段落スタイル、文字スタイルの機能をおさえておきたい。

アピアランス

Illustratorでアイコンなど作る場合に、キモになってくるのが、バージョン9から導入されたアピアランスだろう。
定番の袋文字や鉄道線などは、従来の線を重ねて作ることはせず、アピアランスをつかって、一つのオブジェクトのままで、線を重ねて作成するのはもはや常識である。例えば、角丸の長方形をつくる場合も、[効果]メニュー→[スタイライズ]→[角を丸くする]からつくると、アピアランス上で角丸のプロパティを管理できる。この場合、あとから、角丸の変更や削除ができる。本当に角丸にする場合は、[アピアランスを分割]というコマンドで普通の角丸に変換できる。

長い間アピアランスだけを学ぶ本はなかったのだが、『Illustratorジャパンメソッド』という本が発売された。なんと一冊まるまるアピアランスのテクニック本で、基礎から応用までを学ぶことができる。


CS5以降はWebカンプ制作ツールとしても有効

現在Web制作において、カンプ制作はPhotoshopかFireworksがつかわれている。ただし、IllustratorはCS5以降ならば、Webのカンプツールとしても使える。

スマートフォンサイトの作成の場合、同じテイストでサイズが違うボタンを作らないといけないことが多い。そのため、Illustratorで素材をつくっておくと、サイズ違いのボタンも作りやすい。

IllustratorCS5以降は、ビットマップに変換したときの、線や縁のピクセルのつぶれが大きく改善している。文字も、CS5以降から、文字パネルでアンチエイリアスをオフにできるようになった。Illustratorを使ったカンプ制作のチュートリアルは、本でもWebでもあまりみない。先ほど紹介した『Illustratorプロフェッショナルの教科書』にカンプの作例が1つのっているので参考にしてほしい。



↑このページの上に戻る