ILLUSTRATOR PHOTOSHOP

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるお得なプランも紹介。

 

INTRODUCTION

Adobeの代表的なアプリPhotoshop(フォトショップ)とIllustrator(イラストレーター)の違いや、それぞれが得意なことについて実例をあげて説明していきます。

これから使い始めたい人にもどちらのアプリが自分のやりたいことにあっているか、わかるように解説していきます。

Adobe CC

PhotoshopとIllustrator

PhotoshopとIllustratorの違いについて結論から先に言うとこちらです。

{

違い : 扱うデータの種類が違う

Photoshopはラスターデータ、Illustratorはベクターデータを扱うソフトです。

簡単に言うと、

▶︎ 複雑な表現ができるけど拡大縮小に弱いのがPhotoshopのデータ

▶︎ シンプルな要素の表現が得意で画質が劣化しないのがIllustratorのデータ

です。

この違いによってPhotoshopとIlustratorで得意な表現が異なります。

それぞれの特徴について説明していきます。

Photoshopの特徴

Photoshopはラスターデータを扱うアプリです。

ラスターデータとは

行と列がグリッド状に並んだセル「ピクセル」 で構成されるデータのこと。

これは、Photoshop上で編集しているデータを拡大すればその特性がよくわかります。

Photoshopのデータ

カクカクしているのがわかりますが、この四角をピクセルと言い、その集合で画像が作られています。

ピクセルごとに色を指定できるので、水彩画のような繊細な滲みの表現などを再現することができます。

写真など要素が複雑なものに関してはこのラスターデータの方が向いています。

ラスター形式のデータ :jpeg, png, gifなど

Illustratorの特徴

Illustratorはベクターデータを扱うアプリです。ベクターはベクトルとも言います。

ベクターデータとは

形状を座標値や属性などの「情報」で表現するデータのこと。

点をつないで作られた要素で構成されたデータのことを指します。

Illustratorのデータ

点と境界線の情報と線の内部の塗りでできているので、輪郭線がはっきりした仕上がりになります。

ベクターデータの場合、いくら拡大してもデータが劣化することがないのでロゴやアイコンに向いています。

ベクター形式の画像データ:svg

タブレットでも使える

PhotoshopのiPad版がリリースされ、作業効率が更に上がりました。

デスクトップ版のライセンスと共通しており、タブレット・パソコン間で何度も往復してやりとりできるのでかなり便利です。

AdobeのiPad版 Photoshopのページに移動します。

iPad版のIllustratorも2020年中のリリースが予定されており、Adobeでページも作成されています。

AdobeのiPad版Illustratorのページに移動します。

どちらのアプリでもMac/Windows問わず使用することができます。

それぞれのアプリが得意なことに関して説明していきます。

ILLUSTRATOR & PHOTOSHOP

共通してできること 3例

機能や操作性は異なりますが、PhotoshopとIllustratorで共通して作成できるものもあります。例えば

共通してできること

① :イラスト作成

② :ポスター/バナー制作

③ :Web/UI/UXデザイン

共通してできることを挙げましたが、制作物のテイストなどプロジェクトによって適正アプリは変わってきます。

1. イラスト作成

どちらを選択してもOKですが、作風によって適しているアプリが特に異なってくるのがイラストです。

例を見れば違いがわかると思います。

Illustratorが得意なイラスト

Photoshopが得意なイラスト

適したイラスト

Illustrator :外形線がはっきりしたベタ塗り系

Photoshop :水彩画/油絵などアーティスティック系

日本ではIllustrator系イラストの馴染みが薄いですが、海外ではかなり人気のテイストです。

2. ポスター/バナー制作

1枚で見る人に大きい印象を与えるポスターやバナーはどちらのアプリを利用しても制作できます。

ポスターデザイン

文字が多いポスターに関してはIllustratorで制作する方がデータ管理が楽なのでおすすめです。

適したポスター/バナー

Illustrator :文字が多いもの

Photoshop :画像メインや画像数が多いもの

3. Web/UI/UXデザイン

Photoshopでの作業が多かったWebデザインに関してもIllustratorを使って作成する事も多くなっている印象です。

アイコンなどの視覚的にわかりやすい情報を入れる必要性が高まっているのでIllustratorは使えた方が良いです。

Webデザイン

プロジェクトやクライアントの提出要望に応じて使い分けられるとベターです。

Web/UI/UXデザインをするのであればあわせて使いたいAdobeのアプリがこちら。

Web/UI/UXデザインに特化したAdobeのアプリです。ページ遷移など、ページ全体の流れを作成してシェアすることができます。

IllustratorやPhotoshopとも互換性が高いです。

PHOTOSHOP

Photoshopの方が適している4つの事例

Photoshopにしかできない、またはPhotoshopの方が適しているものについて紹介していきます。

1. 写真加工・修正

画像の加工や修正はPhotoshopで行います。

画像の加工・修正

一度に編集する写真枚数が多く、明度・色調調整などをするのであれば、Lightroomを利用する方が適しています。

2. 要素切り抜き・コラージュ

写真の一部を切り抜いたり、複数の写真を用いてコラージュを作成するのであればPhotoshopがおすすめです。

コラージュ画像

切り抜くテイストによってはIllustratorでもできないことはないですが、髪1本まできれいに切り抜けるのはPhotoshopです。

2. 画像要素の削除や修正

写真に写っているものを自然に消したり、形状を変えるのはPhotoshopの専売特許です。Illustratorではできません。

元の写真

被写体消去後の写真

AdobeのAIが発達したおかげで、要素の選択から消去までが初心者でもかなり簡単にできるようになりました。上の例は3分程度でできます。

ちなみにスマホアプリのPhotoshop Fixでも要素消去ができたりします。

4. モックアップ制作

プロダクト・パッケージなどでデザインモックアップを制作するのであればデータの合成作業となるのでPhotoshopが適しています。

マグカップのモックアップ

クライアントへのプレゼン資料用の画像を作成する際などに、利用時のイメージが湧きやすくなるのでとても効果的です。

ILLUSTRATOR

Illustratorの方が適している5つの事例

Ilustratorでしかできないこと、Illustratorの方が適しているものについて説明していきます。

1. ロゴ・アイコンデザイン

ブランドロゴやアイコンははっきりした外形線のものが多く、ベクターデータでの制作が必要になるのでIllustratorが最適です。

ロゴやアイコン

Webサイトなどでよく使われる、拡大縮小しても画質を損なわないsvg(scalable vector graphics)データの出力が簡単にできます。

2. タイポグラフィデザイン

フォントを自分で作ったり、文字をカスタマイズする場合はIllustratorを使いましょう。

タイポグラフィやフォントカスタマイズ

クライアントへのプレゼン資料用の画像を作成する際などに、利用時のイメージが湧きやすくなるのでとても効果的です。

3. インフォグラフィックス・グラフ・地図

視覚的に数値の情報を伝えるインフォグラフィックスやグラフ、地図の作成などもIllustratorが適しています。

インフォグラフィックス

Photoshopはキャンパス内で自由に描く方に向いているので、数値などの情報を持ったデータを制作する場合はIllustratorを選択すると作業が楽です。

4. キャラクター/LINEスタンプ制作

キャラクターのデザインやLINEのスタンプ制作は各パーツの作成やはっきりとした輪郭線が必要なのでIllustratorが適しています。

キャラクターデザインなど

一緒に使いたいアプリ

手書きのデータをスマホで撮影するとベクターデータで読み込んでくれるスマホ用アプリCapture CCと組み合わせて制作すると効率的です。

5. 名刺・印刷物制作

名刺デザインや飲食店のメニューデザインなど、文字が関わってくる印刷物に関してはIllustratorの方がおすすめです。

名刺や印刷物のデザイン

冊子系のデザインをするなら

雑誌やパンフレットなど、複数枚にわたるページの制作を行うのであれば、IllustratorやPhotoshopよりもIndesignの方が向いています。

WHICH TO USE

どちらも使うことが多い

実際、PhotoshopとIllustratorはデータの連携もできるので組み合わせて使うことが多いです。

背景用の画像をPhotoshopで作成し、Illustratorでロゴやアイコンを作成してデータを合わせるというフローです。

オススメのプラン

PhotoshopとIllustratorの2つのソフトを使いたい場合、オススメのプランはこちら。

▶︎Illustrator 単体プラン + フォトプラン (¥3,460/月)

使えるアプリ : Illustrator / Photoshop / Lightroom / Lightroom Classic

>>プランと料金を確認する(Adobe公式サイト)

PhotoshopとIllustratorの2つを単体プランで利用するより¥1,500/月もお得です。

3つ以上のアプリを使うならコンプリートプラン

他にもIndesignや動画編集のPremiere Proなど、3つ以上のアプリを使いたい方はコンプリートプラン一択です。

▶︎ コンプリートプラン (¥5,680/月)

20以上のAdobeソフト全てを利用できるプラン

>>すべてのプランと料金を確認する(Adobe公式サイト)

*表示は月額の税抜き価格

Adobeのアプリは組み合わせて使うことで作業効率が格段に上がります。全部使えるこのプランが一番オススメです。

Adobe Stockのテンプレートが勉強になる

Adobe StockはPhotoshopやIllustratorのテンプレートデータが豊富でスキルの勉強になる素材がたくさんあります。

1ヶ月の無料体験期間があり、最大40点の素材が無料で手に入るのでうまく利用していきましょう。

無料期間中の解約は自由で、期間中にライセンスを取得した素材に関しては、解約後も利用できます。

Adobe Stockホームページに移動します。

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。

併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【動画編集】Premiere「Rush」と「Pro」8つの違いと使い方を解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Illustratorでできるデザインや機能について解説しています。

Adobe XDでできるデザインや機能について解説しています。

Dimensionでできるデザインや機能について解説しています。

Pick UP Articles

ブログ内のおすすめの記事を紹介します。ぜひ併せてご覧ください!

Bilbao空港から市街地への移動方法を解説!

ビルバオ空港から市街地までバスでの移動方法について解説しています。

Bilbao観光でオススメのスポットを紹介!

ビルバオでオススメの観光スポットを紹介しています。

Bilbaoを巡るならBarikカードを作ろう!

ビルバオの公共機関の利用がラクに安くなるbarikカードを紹介します。

Gaztelugatxeへのアクセス方法を解説!

ビルバオからガステルガチェへの行き方/帰り方を解説しています!

Pin It on Pinterest

Share This