PhotoshopとIllustratorの違いとは?webデザイナーには必須?

IllustratorとPhotoshopの使用用途

最初にIllustratorとPhotoshopが全く何に使われているか想像つかない人のためにザックリとソフトの使用用途のイメージを書きます。
まずIllustratorは印刷物(DTP)をデザインしたり、会社のロゴをデザインする際に使います。
名刺を作ってもらいたい場合、Illustratorで制作します。

Photoshopは写真のモデルさんの肌を綺麗にしたり細くするレタッチをする際に使います。
写真スタジオなどで写真を撮った際に「顔の影消しておきますね〜」「目の下のクマを消しておきますね〜」と言われた時はPhotoshopで修正されていると考えて間違い無いです。

写真のレタッチ機能はIllustratorにはありませんが、IllustratorでデザインしているものにPhotoshopでレタッチした画像を貼るなど、組み合わせて使うことも可能です。

ベクター画像とビットマップ画像

ロゴや印刷物(DTP)を作成する場合、Illustratorを使用します。
直線や多角形や楕円や星など1から描かなくてもは元々Illustratorのデフォルトのツールで入っているため、そのような図形を使った簡単な図形やロゴやイラストであれば簡単に作ることができます。

でも実はPhotoshopでも絵を描くことはできますし、手で描いたものをデータとして取り込んで色付けするのはPhotoshopも得意です。
それなのに何故印刷物にはIllustratorを使われるかというと、今私たちが見ている画像は「ベクトル画像」と「ビットマップ画像」の2種類しかありません
そしてIllustratorはベクトル画像、Photoshopはビットマップ画像を扱うのが得意なソフトです。

ベクター画像とは

ベクター画像とは画像を数値化して記録し、点と点を線で結んで図形を描画していく画像形式です。
上記の画像は実際にIllustratorのブラシツールで小さい点を描いたものですが、この画像のようにどんなに拡大縮小しても丸いままで画質が荒くなったりぼやけません。

ロゴであれば、ソフトに最初から入っている素材を組み合わせるだけで簡単に作ることもできます。
写真はベクトル画像では再現できません。

ビットマップ画像とは

ビットマップ画像とはピクセル(pixel)という細かい点で集めて作られた画像で、1pixel毎に情報を記録する画像形式です。
先程のIllustratorの画像と同じように実際にPhotoshopのブラシツールで小さい点を描き拡大すると、この画像のように1つ1つが細かい点になっており、その点が外に向かって画像の濃度を変えて丸を表していることがわかります。

よくデジタルカメラを購入する際に、「こちらの商品は○ピクセルです」と言われますが、ピクセルが大きければ大きい程写真は細かい写せます。
この点1つ1つを細かく調整することによって影をなくしたり、身体を細くしたり、写真を切り抜いて背景を合成することができます。
それなので、ビットマップで保存されている写真を加工するのはPhotoshopが得意で、会社のロゴなど拡大して荒くなっては困るものはIllustratorで作成するのが向いています

Illustratorの特技

文字も図も画像も簡単に綺麗に配置できる

先程Illustratorは簡単に図形を作れると書きましたが、勿論文字を打つことができます。
そのためチラシのように文章と写真が混合してレイアウトするのはIllustratorが得意です。
そこの貼る写真はPhotoshopで加工します。

0から絵を描ける

Photoshopは写真など既にある素材をより良く加工するものですが、Illustratorは鉛筆や下絵なしに0から絵を描くことができます。
そのため写真を使わないロゴやキャラクターやイラストの作成が得意です。
サイズを拡大して印刷しても画質が落ちないので、会社のロゴのように多くの用途があるものはIllustratorで作る方が良いです。
Photoshopは0から作るというよりは、既にある素材を加工してよりよくするイメージです。

Photoshopの特技

写真の補正・コントラストが変えられる

IllustratorになくてPhotoshopにあるものは何と言っても画像のレタッチです。
色調補正やトーン補正はIllustratorにありません。
色調やトーンやコントラストを変えることによってより綺麗で、自分のイメージに合う写真に変えられます。

人の見た目を細かく修正できる

人の写真の素材を使う人が1番Photoshopで気になるのは見た目をより美しくできるツールだと思います。

例えばこのゆがみツールを使うと

このように自動で人を認識し、細かくパーツまで細くしたり太くしたり、口角の上げ下げまでできてしまいます。
近頃スマフォアプリで簡単に画像の加工ができるようになりましたが、ここまで簡単に丁寧に写真を加工できるのは、やはりPhotoshopが1番です。

Webデザイナーは実際の現場での使い方

未経験者
IllustratorとPhotoshopの違いはわかりましたが、実際のWeb制作現場でWebデザイナーはIllustratorとPhotoshopをどう使っているの?

 

実際のWeb製作の現場では

① webサイトのデザインデータと各種画像をすべてPhotoshopで作る人
② webサイトのデザインデータをフォトショ、各種画像をIllustratorで作る人

の2種類に分かれますが、ほとんどの会社はデザインデータをPhotoshop(psd)データで渡すのが一般的です。

WebデザイナーはPhotoshopでデザインデータを作成し、できたデザインデータをコーダーに渡し、コーダーがデザインデータをスライスしてサイトを作ります。
ちなみにコーダーはほぼIllustratorが使えない上に、ソフト自体インストールすらしていません。

データをIllustratorで作ることも可能ですが、今現在の現場では一般的ではなく、Photoshopの方が重要度が高いです。

Webデザイナーを目指す方はIllustratorより先にPhotoshopを勉強した方が良さそうです。

 

まとめ

 

Illustratorは

・ベクター画像
・画像を拡大、縮小しても画質が変わらない
・画質が変わらないので様々な用途のあるものを作るのに向いている
・文字と画像を綺麗に配置するのDTPも得意
・画像の加工はできないがPhotoshopで加工した画像は貼れる
・Webデザイナーはあまり使わない

Photoshopは

・ビットマップ画像
・写真もビットマップ画像なので写真の加工に向いている
・細やかな写真の修正ができる
・文字も打てるがDTPには不向き
・画質が落ちてしまう可能性があるので様々な用途のあるものには使用できない
・Webデザイナーが一般的なデザインデータを作る時に使われる

それなので、IllustratorとPhotoshopはそれぞれの得意分野とできないことがあります。

頑張って勉強してみてください。

 

 

最新情報をチェックしよう!