IllustratorとPhotoshopの違い・使い分け・設定

IllustratorとPhotoshopの違い・使い分け・設定

webサイトのデザイン案を制作する際、主にPhotoshopで行うのですが、Illustratorでの操作の方が配置やレイヤーの管理が楽なため、どちらもうまく合わせて使えたらと感じることがあります。
そもそもIllustratorとPhotoshopはどのような違いがあるか、どんな場面で使い分けるかについて書かせていただこうと思います。
また、Illustratorでweb上に使用する画像を制作する際は、先にいくつか設定を行う必要があるため、その作業注意点について最後にご紹介したいと思います。

1.PhotoshopとIllustratorの違い

Illustratorは紙面製作でphotoshopは画像加工を得意とするソフトというイメージがありましたが、この2つのソフトの一番の違いには画像の作り方でした。

Photoshopの画像方式は「ラスタ画像」といい、小さな色の点を集めて作られた画像の事です。

一方、Illustratorの画像方式は「ベクタ画像」といい、たくさんの座標の点を作り、点同士を線で繋ぐことで表現しているそうです。画像を数値で記録し、コードで表現します。

以前本で読みましたが、Illustratorは画像を数値とコードで表現しているため、拡大した際、画像が荒れることなく表示できていることが分かりました。

参考サイト:http://www.geocities.jp/para_core/kouza/vrpi.html
http://online.dhw.co.jp/kuritama/difference-of-photoshop-and-illustrator/




では、どういう風に使い分けていくのがいいのでしょうか。

2.使い分け

Photoshopは、

  • 写真加工や微妙な色の変化を表現したい場合
  • データの処理はピクセル単位で基本できるため、細かい画像の切り抜き、色や形の調整・変化をつけたい場合。
  • ピクセルで表現されているWebデザインとの相性が良いため、Webデザイン案を作る場合。

Illustratorは、

  • 絵や文字を拡大して使う必要がある場合
  • イラストや図などで線や面がはっきりしているものを作るとき
  • 紙面制作

参考サイト:http://webgaku.hateblo.jp/entry/20120408/1333859650
https://geechs-magazine.com/tag/lifehack/20160616#title1
https://www.internetacademy.jp/it/difference-between-photoshop-and-illustrator.html




最後に、Illustratorで配置の変更や文章の組み方に慣れているため、Illustratorでデザイン案を作りたいという場合は、まずweb用に設定が必要なので、手順がかかれている記事をご紹介いたします。

3.Illustratorでwebサイトのデザイン案を作りたい場合

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版)
http://www.dtp-transit.jp/adobe/illustrator/post_1896.html

illustratorでUIデザイン:設定編
http://2-hats.hateblo.jp/entry/2014/08/14/091440

この記事をシェアする