読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

デザイナーが使うIllustratorとPhotoshopとは?

mockup 2443050 1920 - デザイナーが使うIllustratorとPhotoshopとは?

デザイナーの方であれば、「Illustrator」や「Photoshop」を一度は耳にしたことがあると思います。

 

今回は、「Illustrator」や「Photoshop」の使い方やその違いについてお伝えしていきます。

 

Illustratorとは?

 

drawing 1919080 640 - デザイナーが使うIllustratorとPhotoshopとは?

 

まずは、Illustratorについてお伝えしていきます。

 

「Illustrator」は、アドビシステムズが販売するベクターイメージ編集ソフトウェアです。(Wikipediaより)

(ベクターイメージ:コンピュータグラフィックスなどにおいて、画像を円や直線などのような解析幾何的な「図形」の集まりとして表現する形式)

 

頭文字をとって「Ai」と呼ばれたり、「イラレ」と呼ばれたりしています。

 

イラスト制作だけでなく、ロゴや図面、広告、パッケージなどをデザインするためのツールとして印刷業界などのあらゆる分野で使用されています。

 

デザイン全般で使われるソフトであるため、グラフィックデザイナーやイラストデザイナーの方には必須のソフトになっています。

 

利用するためにはライセンス契約が必要になります。料金など詳しいことについては、以下のURLをご覧ください。

 

http://www.adobe.com/jp/products/illustrator.html

 

Illustratorでできることとは?

 

Illustratorでできることを簡単に挙げておきます。

 

  •  ポスター・チラシ・広告・パンフレットを作る
  •  イラストを描く
  •  名刺・プレゼン用資料を作る
  •  Web・ホームページ制作用の素材を作る
  •  Tシャツなど衣類にプリントするデータを作る
  •  アプリのグラフィックを描く

 

このように様々なことができます。

 

使い方については、以下のWebサイトで詳しく説明されていますので、そちらをご覧ください。初心者でもわかりやすいように細かく書いてあるので、オススメです。

 

http://webdesignrecipes.com/illustrator-basic-tips/

 

Photoshopとは?

 

camera 1447349 640 - デザイナーが使うIllustratorとPhotoshopとは?

 

「Photoshop」とは、アドビシステムズが販売しているビットマップ画像編集ソフトウェアである。(Wikipediaより)

ビットマップ画像:コンピュータグラフィックスにおける画像の表現形式

 

「フォトショ」と略して呼ばれていることが多いです。

 

こちらも利用するためには、Photoshopのライセンス契約が必要になります。また、Illustratorと一緒に使えるセットプランも用意されています。

 

詳しくは以下のURLをご覧ください。

 

http://www.adobe.com/jp/products/photoshop.html

 

Photoshopでできることとは?

 

Photoshopでできることを簡単に挙げておきます。

 

  •  写真加工・編集
  •  デザイン
  •  Web制作(デザイン制作)

 

その中でもPhotoshopでメインとして行われることとしては、「写真加工・編集」です。例えば、撮影した写真の色やサイズの調整、合成なども行われています。

 

使い方については、こちらのページで詳しく説明されていますので、そちらをご覧ください。

https://liginc.co.jp/web/design/photoshop/105768

 

フォトグラファーやWebデザイナーの方に使われていることが多いです。

 

IllustratorとPhotoshopの違いとは?

 

imac 606765 640 - デザイナーが使うIllustratorとPhotoshopとは?

 

IllustratorとPhotoshopでできることが似ているため、初心者の方によく混同されがちです。ここで2つのソフトの機能や使い方の違いなどをしっかりと押さえていきましょう。

 

2つの違いとして最も大きな違いとして挙げられるのが、画像方式の違いです。

 

Illustratorでは、ベクタ画像方式が採用されています。

 

ベクタ画像方式は、画像を数値で記録し、多角形や円などの複雑な図形もコードで表現されます。そのため、拡大しても荒れることがなく、なめらかできれいな画像になっています。

 

Photoshopは、ビットマップ画像方式が採用されています。

 

ビットマップ画像方式は、1ピクセルごとに色と濃度の情報を記録しています。画像はすべて点で構成されているため、拡大すると画像が荒くなり、あまりきれいではありません。

 

2つのソフトで作った画像を示しておきます。(出典:LIG

 

photo - デザイナーが使うIllustratorとPhotoshopとは?

 

見ていただくとわかるように、「Photoshop」で作成した方が少しギザギザして粗くなっています。逆に「Illustrator」では、なめらかできれいな画像になっています。

 

ベクタ画像方式は、サイズを大きくしてもファイル容量があまり変わらないのも特徴です。逆に、ビットマップ画像方式では、画像サイズを大きくするとファイル容量が大きくなってしまいます

 

そのため、大きな画像を扱う場合は、Illustratorの方がファイル容量を気にせずにあなたの思い通りの画像にすることができます。

 

Illustratorに向いている作業とは?

 

2つの違いを理解した上でそれぞれに向いた作業について紹介していきます。

 

Illustratorは画像を数値で記録されているため、正確なデータの作成や細かな配置に向いています。

 

例えば、以下のような作業に向いています。

  •  企業のロゴやシンボルマークを作成する場合
  •  レイアウトを細かく指定したい場合
  •  セル画などの正確な線が重要視される画像を扱う場合など

 

Photoshopに向いている作業とは?

 

Photoshopは、1ピクセルごとに色と濃度を記録しているため、自由度の高い加工ができます。ビットマップデータの編集やドットの集合体で構成されている写真データの加工などに向いています。

 

例えば、以下のような作業に向いています。

  •  手書き風の細かな質感を出したい場合
  •  写真にぼかしなどを入れてきれいな見た目に仕上げたい場合
  •  複雑なグラフィックを加工したい場合

 

このようにそれぞれに特性があります。なので、2つのソフトを使い分けて使われていることが多いです。

 

例えば、ポスターを作成するときであれば、以下のように使い分けられています。

 

  1.  Illustratorでロゴを作成
  2.  Photoshopで写真の加工・編集
  3.  Illustratorでテキストの配置などレイアウトを決める

 

Fireworksとは?

 

paper 2221812 640 - デザイナーが使うIllustratorとPhotoshopとは?

 

「Fireworks」とは、かつてアドビソフトウェアが販売していたグラフィックソフトウェアである(Wikipediaより)

 

IllustratorとPhotoshopと同じようなデザインツールとして「Fireworks」もあります。Photoshopよりも効率よく作業できるというメリットがあります。

 

簡単にFireworksの特徴についてまとめておきます。

  •  Webデザインに特化している
  •  ビットマップ画像形式とベクタ画像形式を同時に扱える

 

2013年5月以降新しいバージョンの開発がされていないので、使われることは少なくなってきています。ただし、OSさえ対応していれば、使い続けることはできるので、使い続けているユーザの方もいるようです。

 

まとめ

 

これを読んでIllustratorとPhotoshopの違いについては、理解していただけたでしょうか?

 

それぞれの使い方については、私よりも使い方をよく知っていて、詳しく説明しているWebサイトも多いので、そちらを参考にしていただければと思います。

 

Webデザインを仕事にする場合は、どちらも扱えるようになっていることが望ましいです。

 

どちらも体験版で手軽に使用することもできるので、まずは触れてみることをおすすめします。

 

最後まで読んでいただき、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら