SHINOBLOG

WEBデザイナーを目指す人向けブログ

ソフト・ツール

PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説

投稿日:2018年9月6日 更新日:


  • PhotoshopとIllustratorの違いがわからない…
  • 勉強するなら、どっちをやればいいの…?

そんなモヤモヤを解消していきます。
読み終わった時には違いが理解でき、やるべき勉強が明らかになるように丁寧に説明していきます。

<本記事の内容>
  • PhotoshopとIllustratorの違いって?それぞれの用途の話
  • Photoshopで出来ること
  • Illustratorで出来ること
  • まとめ:どっちを勉強すれば良いか

では、早速本題へ!!!

PhotoshopとIllustratorの違いとは?それぞれの用途の話

PhotoshopとIllustratorはAdobe製品の代表格であり、どちらもWEBデザインの仕事では欠かせないツールです。
似ているようで、実は全く別物なので、その違いについて説明していきます。

まずは、違いを簡単にまとめます。

Photoshopは写真加工(レタッチや合成)に向いている。
Illustratorはロゴやキャラクターなどイラストの作成に向いている。

それでは、細かく見ていきましょう。

Photoshopは写真加工(レタッチや合成)に向いている

Photoshopが本来の力を発揮するのは、写真加工などの作業です。

例えば、こんな時。
「この写真ちょっと暗いなあ。明るくして綺麗にしよ♪」

レタッチ例①

こんな時も。
「花の色をもう少し鮮やかに見せたいなあ。」

Photoshopレタッチ例②

こんな合成もPhotoshopで出来ちゃいます。

Photoshop合成例①

上の例のように、写真などの元ある素材にエフェクトをかけて編集するものとイメージしていただければわかりやすいかもしれません。

少し難しい話をすると、Photoshopはビットマップデータを扱うのが得意です。
ビットマップ画像とは、画像のデータ形式の1種です。簡単に言うと、細かい点がたくさん集ってできた画像です。
JPEG(JPG)やPNGといった単語を聞いたことがあるかと思いますが、これらはビットマップ画像のデータ形式です。写真を撮った時に、データを見ると「.jpg」などの拡張子がついています。
ビットマップ画像の編集を得意とするPhotoshopが、写真加工向きのソフトである理由はこの点からもわかります。

Illustratorはロゴやキャラクターの作成に向いている

Illustratorが本領発揮するのは、ロゴやキャラクター、イラスト、図面を作成するタイミングです。

例えば、こんなの。

Illustratorイラスト例①

こんなのも、Illustratorで作れます。

Illustratorイラスト例②

例からも、なんとなくわかるように、写真素材などを使わず0から形を作り上げるものとイメージしていただくと想像しやすいです。

またまた少し難しい話をします。(飛ばしていただいてもOKです笑)
Photoshopはビットマップデータが得意でした。
一方でIllustratorは、ベクターデータが得意です。
ベクターデータ(ベクトルデータ)を簡単に説明すると、数式で点・線・面を表現したものと言えます。

…?

データの中には座標値があり、それらを結んで形を作った情報として画像を表現しています。

…??

まずは、頭で理解しなくても大丈夫です。
絵で見て特徴を理解するだけで問題ありませんので、ご安心を。

では、実例と合わせてPhotoshopとIllustratorの特徴を見ていきましょう!

Photoshopで出来ること

具体的な例と一緒に説明していきます。

出来ること①:写真加工

単純なエフェクト

Photoshopエフェクト例

色を変えて、油絵のようなタッチに加工しています。
こういった加工はPhotoshopで行うことが多く、Illustratorではこのような作業はあまりしません。

レタッチ

Photoshopレタッチ例

作成:Kohey Ikeda

こちらはPhotoshopならではの技です。Illustratorでは出来ません。
それにしても、すごい…。

合成

Photoshop合成例

作成:Kohey Ikeda

マスターするとこんなことも。ちなみにこれもIllustratorでは出来ません。
このレベルまで行けば、もうPhotoshopでなんでもできちゃいます。

出来ること②:WEBサイトのデザインやバナーの作成

写真加工に向いていると言いましたが、このような作業もPhotoshopで出来ちゃいます。

サイトデザイン


こういったカンプ(サイトの骨組み、デザインのベース)やサイトデザインはPhotoshopで作れます。

バナー作成

先ほどの写真加工とは少し毛色が変わりますが、PhotoshopはWEBサイトのデザインを作成する際にメインで使用するツールでもあります。
ちなみにサイトデザインの作業はIllustratorでも可能です。ケースバイケースで使い分けます。
バナーはPhotoshopで作成する人が多いのではないでしょうか。

ちなみに、上の画像を拡大表示すると、下の図のようにぼやけて見えてきます

ビットマップ画像ぼやけて見える例

これが先ほど説明したビットマップ画像の特徴です。
拡大表示すると共に、構成要素である細かなドット(ピクセル)も拡大されて見えてくるというわけです。
だから良い悪い、といった話ではなく、特徴として覚えていただければOKです。

Illustratorで出来ること

具体的な例と一緒に説明していきます。

ロゴの作成

Illustratorロゴ例

Photoshopでも作成は可能ですが、線で形を作り上げていく作業はIllustratorの得意分野です。ロゴデータの利用シーンを考慮すると、Aiデータ(Illustratorで作るデータ)で管理する方が望ましいという点でも、Illustratorに軍配が上がります。

アイコンなどのパーツ作成

Illustratorアイコン例

このようなよく見るアイコンはIllustratorで作れます。Photoshopでも作成は可能ですが、パーツなどの細かい素材はIllustratorが向いています

イラストの作成

Illustratorイラスト例

Illustratorで作るベクターデータはドローデータ(Draw data)とも呼ばれます。ドローデータは、その名の通りイラストや図面に適しています。
Photoshopでも頑張れば作れますが、断然Illustratorが向いています。

ちなみに、上のベクター画像を拡大すると…

ベクターデータぼやけない例

先ほどのビットマップ画像とは違い、ベクター画像はどれだけ拡大表示しても輪郭がくっきり見えます
これが、いわゆるベクターデータの特徴です。
ですので、ロゴや重要な図など、ぼやけてしまっては困るという画像はベクターデータで扱うのが良いかと思います。

まとめ:どっちを勉強すれば良いか

まとめます。

できれば、両方勉強するのが良いです。
…… そりゃそうでしょ。

WEBデザイナーとして仕事をするなら、両方使えるのが望ましいです。
というより、マストと言っても言い過ぎではありません。

ただ、そうは行かないという人も多いと思いますので、まずは「自分のやりたい事が出来る方」を勉強するのが良いと思います。
そもそも、やりたいことが片方で完結するという場合は、どちらか一方で問題ありません。

そこで先ほどの比較を思い出してみると、「Photoshopのが出来ること多くない?」と感じるかもしれません。
確かに極端な言い方をすれば、Illustratorで作れて、Photoshopで作れないものはあまりありません。(細かな機能レベルで言えば出来ないことはたくさんありますが)

しかし、やはり向き不向きがあるため、どちらかで全て済ませようとすると無理が出てきます

なので、例えばWEBサイト自体のデザインはPhotoshopで進め、アイコンやイラストなどのパーツはIllustratorで作る、みたいな使い分けが出来たら一番良いでしょう。




  1. […] 関連記事 おすすめ参考書5選!Illustratorの勉強はこの本だけでOK(準備中) PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説 (adsbygoogle = window.adsbygoogle || []).push({}); […]

  2. […] 事 おすすめ参考書5選!Illustratorの勉強はこの本だけでOK(準備中) PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説>>> (adsbygoogle = window.adsbygoogle || []).push({}); […]

  3. […] 関連記事 >>>PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説 […]

  4. […] 関連記事 >>>PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説 (adsbygoogle = window.adsbygoogle || []).push({}); […]

  5. […] 案を作っていく際はPhotoshopやillustratorなどが挙げられます。 これらのソフトの詳細については「PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説」で解説しています。 […]

  6. […] の作成ソフトです。 すごく簡単に言っているので、詳細はPhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説で解説しています。 どちらもWEBデザイナー、特にデザイン […]

  7. […] ださい。 >>>PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説 […]

  8. […] ださい。 >>>PhotoshopとIllustratorの違いは?どっちを勉強するべき?用途を簡単解説 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

おすすめ記事

プロフィール画像
 
SHINOBU

フリーランスのWEBデザイナー兼フロントエンドエンジニア。イラストレーター。
新卒は某ベンチャー営業職→半年間WEBを勉強→WEB制作会社入社→フリーランス転身。現在はIT大手のクリエイティブチームに所属しながら、プロジェクト単位で複数チームに参加。
4大卒で、デザインの勉強は25歳から。美大でもない、経験もない。そこから2年後フリーランスとしてスタートするまでのこと、そしてフリーになってからの色々なことを記録していきます。