1. TOP
  2. 今さら聞けない…画像編集ソフト「Photoshop」と「Illustrator」の違いって?

今さら聞けない…画像編集ソフト「Photoshop」と「Illustrator」の違いって?

 2014/09/30 Webデザイン  

Adobe社製品のいくつかは、ウェブデザイナー必携と言っても過言ではありません。すべてのAdobe社製品を個人でも4,980円/月で利用することのできるサービス「Adobe Creative Cloud」がソフトウェアのパッケージ販売に取って代わったこともあり、これまでPhotoshopのみを使っていた方がIllustratorをインストールしてみて・・・そして説明文では同じようなことができると言っているのに画面構成や操作方法が大きく異なって面食らったりもしているのではないでしょうか。

今回の記事では、ウェブデザインの基本として、
Adobe社の画像編集ソフトPhotoshopとIllustratorの違いをご紹介していきます。

ビットマップデータとベクターデータ

s1

PhotoshopもIllustratorも、画像編集ソフトと呼ばれています。

両者の大きな違いは、Photoshopがビットマップデータを編集するソフト、Illustratorがベクターデータを編集するソフトであるということです。

ビットマップデータとはとても細かいドット(ピクセル)の集まりのことで、どんなに高解像度であっても拡大していくといずれモザイク状に正方形が並んでいるように表示されます。つまり画像本来の解像度以上に拡大するとボヤけてしまうので、画像解像度に気をつける必要があります。ただしピクセル単位でのグラデーションなど、きめ細やかな色彩表現がビットマップデータでは可能です。そのため、デジタルカメラで撮った写真などはビットマップデータとして保存されています。

一方ベクターデータはそれぞれの図形の座標がどこに存在しているのかを記録し1枚の画像としているため、どんなに拡大してもボヤけることはありません。(MS Office Powerpointも図形や文字をベクターデータとして保持しているため、拡大してもボヤけません)ただし色彩の指定は「A座標・B座標・C座標で囲まれた部分は青色・・・」のような方法となるため、ビットマップデータで可能なきめ細やかな色彩表現を行うことは難しいです。

ウェブデザインにおける主な用途

ウェブデザインにおけるそれぞれの主な用途は以下の通りです。

Photoshopはビットマップデータ編集ソフトですので、画像内のそれぞれのオブジェクトの絶対的な大きさをピクセルで測るのに最適です。そのため、デザインカンプ作成用ツールとして多くのウェブデザイナーに重宝されています。また画像補正機能もひと通り揃っていますので、その名の通り写真の修正もこなすことができます。

一方Illustratorはベクターデータ編集ソフトですので、ピクセルを用いた画像作成に向いていません。しかしどんなに拡大しても、どんな大きさで画像データに出力してもボヤけないという特徴を活かして、ウェブデザインだけではなく印刷物での使用も考えられるロゴデータなどの画像を作成する際に利用されることが多いです。

ウェブデザイナーがまず持つべきはPhotoshop、ロゴデータ作成などに関わるようであればIllustratorの操作方法も学習すると良いでしょう。

ただしロゴデータ作成に直接関わらなくともaiファイル(Illustratorで作成したファイルの形式)でのデータのやり取りはウェブデザインの最中にしばしば起こりますので、インストールと最低限の使い方は確認しておいた方が良いのではないかなと思います。

まとめ

Adobe社の画像編集ソフトPhotoshopとIllustratorの違いはお伝えできたでしょうか。

Photoshopはイラスト制作のためのソフトウェアとしても有名で、イラスト制作であれば競合ソフトも多く存在します。ただウェブデザインという用途に絞ってみると、現時点では競合ソフトが存在しないと言えるでしょう。 次回はAdobe社のウェブサイト制作ソフトDreamweaverとFireworksの違いをご紹介していく予定です。

Related Articles:



Post Footer automatically generated by Add Post Footer Plugin for wordpress.

\ SNSでシェアしよう! /

注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!