Web屋のーりー

ウェブ作ったり、デザインしたり、広告についてかんがえるブログ。

powered by 36℃社

  • twitter
  • Facebook
  • Linked in
  • RSS

初心者さん向け情報の詰まった記事です。デザインのイロハをご紹介

かわいいデザイン・優れたデザイン、広告、コピーライティング

その他のお役立ち情報、たまにおもしろ情報も?

初心者デザイナーさんに告ぐ! Illustratorを使いこなして一歩進んだデザイナーになろう。

このエントリーをはてなブックマークに追加
Pocket

「ベジェってなに? パス? わかんないよー!」と、思わず叫びたくなる皆さんのための記事です。
Illustratorでできることから、つまずきやすい用語解説、ちょっとだけ背伸びしてチャレンジしてみるチュートリアルまでをご紹介。

もくじ

Illustratorなら、イラストが描ける!

もちろん、Illustratorはイラストが描けます! 当たり前……? でも、イラレを触ったことのない方がよく勘違いされるんですが、じつは手描きのようなイラストを描く場合、イラレよりもフォトショップのほうが適しています。
じゃあどんなイラストが描けるのかというと、線のはっきりした絵を描くのが得意です。

こんなイラストとかですね。

上記画像は、Free Vectorで探しました。無料のベクターデータ(Illustratorでいじれるデータ)を多数掲載しているサイトです。(※ライセンスに注意)

印刷用のデータ(ポスター・チラシなど)をデザインする

チラシやポスターを作るときって、印刷屋さんに頼みますよね。お願いするときに「AIデータで入稿してください」と言われることが多いです。(AIは、Adobe Illustratorの略)

「じゃあ、手書きのようなイラストのポスターを作りたいときも、Illustratorなの?」っていうと、そうじゃない。Illustratorは、jpgファイルやPSDファイルなどの画像データを配置することができるんです。
そして、文字の扱いなら、Illustratorはお手のもの。
つまり、画像はフォトショップで作って、Illustratorで文字を配置。そして印刷屋さんに持っていくのが黄金パターンです。

ただし、Illustratorには印刷のための様々な設定ができて、印刷屋さんによっては「これがいい」「こっちじゃないとダメ」などがたくさんあります。そこは、発注したい印刷屋さんのウェブサイトを確認してくださいね。
そうでないと突き返されてしまうか、意図しなかった状態で刷り上がってしまいますので。

こんど、「ウェブ屋さんのための印刷設定記事」を書きたいので、詳しくはそのときにでも。

プレゼン資料をイラレで作る

それから、PDFデータにもできるので、プレゼン用・企画書用のスライド作成もできます。

デザイナーだと、スライドはパワポよりイラレで作る方が多い気がします。
(Macユーザーならキーノートでしょうけど)

ちなみに「印刷用データならIllustrator」と言いましたが、冊子などのページものの制作の場合は、同じくアドビのInDesign(インデザイン)やQuarkXPress(クオークエクスプレス)で制作します。どんなソフトもそうですが、Illustratorにも得意と不得意なジャンルがあるってことですね。

ウェブサイトのワイヤーフレームを作成する

ワイヤーフレームって、ご存じでしょうか。初心者の方には聞き慣れない言葉ですが、ワイヤーフレームとは、要素・パーツの配置の位置を線や枠だけであらわした設計図のことです。ワイヤー(線)フレーム(枠)。そのままですね!

ワイヤーフレームはどんなふうに使われるのかと言えば、制作チームやクライアントさんの間でのレイアウトの共有ツールとして、デザインが破綻しないかどうかを確認するために使われます。

イラレは線を描くのが得意なので、Illustratorとワイヤーフレームの相性はもちろん良くて、多くの方がイラレでワイヤーフレームを制作されるのではないでしょうか。
ただ、会社さんによってはワイヤーフレーム作成はディレクターさんがやるので、その方がデザイナー出身じゃない場合(イラレなどのソフトが得意じゃない場合)、パワポやエクセルで作る場合もあります。
ちなみに、最近私はFireworksでワイヤーフレームを制作してます。ぶっちゃけ上の画像はファイヤーワークスで作った画像だったり。

また、ワイヤーフレームなど設計図を作るのに特化したソフトはたくさんあるので、それらを使うことも。

上記リンクは、ワイヤーフレームを作成できるツール・ソフトを紹介した、Webクリエイターボックスさんの記事です。

Illustratorの用語を知ろう

Illustratorに限らず、海外の製品はけっこうカタカナ語が多いです。私もたまに映像系のソフトを立ち上げるんですが、そのときは「このカタカナ語なんだっけ」っていうのがすごーくよくあります。
Illustratorを開いたのはいいけど、単語がわからないから直感的に操作ができないっていうのはよくある話で、私も最初のころはそうでした。
必要なのは慣れなので、「この単語なんだっけ?」ってのに負けずにどんどん触ってみてください。

パス

パスは、英語だとpathと書くんですが、その意味は「小道、経路」だそうです。
そこから転じて、Illustratorでは、図形をかたちづくっているラインのことを指します。

アンカーポイントとパス

青色のラインや点は実際に出力されるときは非表示になります。Illustrator上での操作のための表示で、「パスがそこにありますよ」という表示をしているだけです。
また、パスには「アンカーポイント」と「セグメント」の二つがあって、それらをあわせてパスと呼ぶそうなんですけど、正直言って、私はついさっきまでその二つをあわせてパスと呼ぶだなんて知らなかったです。「知らなくても何とかなる!」ってこともあります……。

アンカーポイント・ハンドル

さきほど取り上げた用語で、パスに含まれる点のことです。パスのうちのラインはセグメントだそうですが、だいじなのはアンカーポイントのほう。
パスの終点というか、切り替わる点のことがアンカーポイントなんですけど、たとえば四角形なら四隅にアンカーポイントがあることになります。
じゃあ円や曲線はどう作るのかと言えば、アンカーポイントからハンドルというのを伸ばすことで、その線を曲線にできます。

ハンドル

伸びたハンドルの長さを伸ばすほど、ゆるやかな曲線になります。

ペンツール

アンカーポイントを打ってパスを描いていったり、ハンドルを操作したりするためのツールです。Illustratorの作業中に発生するクリック音の8割は、ペンツールから鳴っています。
ペン、って名前ですけど、ペンっぽいのはむしろ鉛筆ツールとかブラシツールですよね。ペンツールがアンカーポイントをポチポチと打っていくのに対して、鉛筆とブラシはマウスを押しっぱなしで描きますので。
ちなみに、鉛筆ツールやブラシツールで線を描いても、それらはパスになるのがIllustratorの面白いところです。

ベジェ曲線

Illustratorで作られる曲線のことがベジェ曲線のことだと考えてもらって差し支えないです。フランス人のベジェさんが考えたからそう呼ぶんだそうですよ(私もさっき知った)。
ハンドルを操作して、曲線のまがりかたを変えるわけなんですけど、日常生活でベジェ曲線に触れることはないわけで、ベジェ曲線をきれいに描くのは、Illustrator初心者さんにとって最初にして最大の難関ではないでしょうか。
コツとしては、必要最低限のアンカーポイントで曲線を作ることです。アンカーポイントが増えちゃうと、線がガタガタすることが多いんです。ま……、こればっかりは慣れなんですけどね。

それから、ベジェ曲線がどういう原理でできるのか、という点を解説している記事がありました。目からうろこ!

オブジェクト

Illustratorで作った「モノ」のことです。線とか丸とか四角とか、パスとか。深く考える必要はないんですけど、日本語にしづらいので「オブジェクト」と読んでいるんでしょうね。

レイヤー

Illustratorで、つまづきやすいポイントの一つがレイヤーの考え方です。レイヤーとは層のことで、そこにオブジェクトを配置していくことになります。レイヤーそれ自体は何も色や塗りなどを持ちません。
最初の状態だとレイヤーは一枚なんですが、手動でレイヤーを増やすことができて、たとえば「文字のレイヤー」や「背景画像のレイヤー」などにしておくと非常に管理が楽になります。
何枚もレイヤーを重ねることができるのですが、上のレイヤーに置いたオブジェクトが大きいと、その下のレイヤーにあるオブジェクトが隠れます。

レイヤー

コスプ……いえ、なんでもありません。

パスファインダ

ペーンツールや長方形ツールだけでパーツを作ろうとすると、穴が空いていたり、へこんだ多角形などを作ることが難しいんです。それを解決するための手段が、パスファインダを使うことです。
すごくよく使うものなんですが、パスファインダだけで重厚な記事が一本書けちゃうくらいのモノなので今回は軽くご紹介にとどめます。
以下に紹介するサイトがわかりやすかったので、良ければ参考にしてみてください。

ベクターデータ・AIデータ・EPS・SVG

EPSとSVG、AIデータについては、データの種類です。イラストレーターで作ったデータを、どのようなかたちで保存するかの違いですね。
一方、ベクターデータとは、パスがあってペンツールでいじれるデータ(主にEPS、SVG、AI)をひとくくりにした呼び方です。

AIデータ

拡張子がAIのときは、これはIllustrator専用のデータです。他のソフトでは編集できません(例外もあるみたいですが)。

EPS

EPSについては、Illustrator以外のベクター編集ソフトでも互換性のあるデータ形式、という考え方で良いでしょう。「無料配布ベクターデータ」なんていうのだと、よくEPSの形式になっています。

SVG

最後に、SVGです。Scalable Vector Graphics(スケーラブル ベクター グラフィックス)の略です。ここでも「ベクター」が出てきたわけですが、この形式は主にウェブ上で使うことを想定されています。よく、HTML5と一緒に語られることが多い形式ですね。

私は、ベクターデータ3種類の中では、ほとんどAI形式のデータを保存しますし、利用します。EPSは上記の配布データとして使う、SVGはHTML5で使いたいときに用いる、といったような限定されたときでしか使わないですね。

ただし、ひとつだけAIデータを用いるときに注意したいのが、Illustratorのバージョンの違いです。古いバージョンのIllustrator(現在最新のバージョンはCS5)は、新しいバージョンのIllustratorの形式で保存されたデータを開けません。
自分一人がIllustratorを使っているとか、周囲がすべて同じバージョンのIllustratorならば問題ないのですが、外部の方とご一緒するときや、印刷屋さんにお願いするときなどに、「開けない」ということがよく起こります。そこで、相手に合わせたバージョンの形式で保存する必要があります。

illustrator バージョン

たとえば、自分がCS5で相手がCS3なら、CS3形式で保存したデータをお渡ししましょう。

パスに慣れておくと、Photoshopでも生かせるんです

Photoshopで私がいちばんよくお世話になっている使い方といえば、画像の切り抜きです。人物写真の、背景だけ切り抜いて使いたいとか、商品だけ使いたいとか。選択ツール等で一発で切り抜くことができればいいんですが、それだけだとスムーズにいかないときも多々あります。
そんなときに、ペンツールを使って人物や商品の輪郭をベジェで囲むことで、その部分を切り抜くことができるんです。

ペンツールまみれアヒル

慣れてくれば、選択範囲をちょっとずつ増やしてむりくり切り抜き範囲を作るより、ずっと早く作れます。もっとも、髪の毛みたいな複雑なかたちはペンツールでの作成は向いてないんですけどね。

特訓! 特訓! 特訓!

ここまでIllustratorでできること、そして用語解説とご紹介してきましたが、じゃあ実際に作ってみましょう・やってみましょうのコーナーです。

最初はIllustratorの本を用意して、それを参考に使い方を習っていくのがセオリーです。

私はあんまりいい学習者じゃなかったので、けっこうすぐ、そういうのに飽きちゃうんですね。
そんなときは、ウェブ上で公開されているチュートリアルをやってみるのはいかがでしょう。

無料で公開されているものでも、「これ、私も作れたらすごくない?」っていうような、すごくグラフィカルでかっこいい素材を作れるチュートリアルがたくさんあります。
海外のチュートリアル(つまり英語の)が多いんですが、用語と訳さえわかってしまえばなんとなくつかめますよ。
もちろん、「これはどうやって作ったらいいんだろう」という、技術的なところから選んでもいいですしね。

上記リンクは、いつも良記事ばかりで参考になる、Photoshop vipさんのチュートリアル集の紹介記事です。私もいろいろ作ってみたい!

最後に

この記事はそもそも使い方を解説してないし、初学者さんにとってはまだまだ分からないことだらけかと思います。そこで、Illustratorの使い方について非常に参考になる記事をご紹介しておきます。
Webデザインレシピさんというすてきなブログさんが、しっかりとした記事を書かれています。「やってやるぜ」って方はぜひ、そちらもご覧になってみてください!

もし、もっと知りたい部分、こんなことを書いてほしいってことがありましたら、ぜひぜひお待ちしてますんで、お気軽にどうぞ!
また、私の認識不足や間違い等ございましたら、こそっと教えていただけるとありがたいです……!

コメントする

ページの先頭に戻る