コラムColumn

【デザイナー視点による】イラレとフォトショの違いってナニ?

はじめまして~~、こんにちはーーっ!

DTPデザイナー歴7年、
そしてこちらの会社に入社してWebデザイナー歴2ヶ月のあおみどろです!

 

長年、Illustrator(イラストレーター、通称:イラレ)を使って、

チラシやフリーペーパー等を作っていましたが
今年!華麗にPhotoshop(フォトショップ、通称:フォトショ)

をメインに使うWebデザイナーに転身いたしました。

 

「ソフトと使ってレイアウトをする」ということではDTP・Webどちらも同じです。
しかし、「真逆なんだな~」と思うところ……結構あります。
そんな私の体験談をもとに、「ふたつのソフトの違うところ」を書き出してみたいと思います。

 

わたしもまだ、2つの職種のどこが異なるか確認しながら作業しているので
「違うぞ~~」というところございましたら、ぜひお問い合わせください。m(_ _)m

 

 

「DTPデザインとWebデザインってなんですか?」

冒頭で自分のことをチラッと紹介しました。
「DTP」デザイナーから「Web」デザイナーに…。
まずは、そのことについて触れてみたいと思います。

 

DTPデザイナーって?

 

本、チラシやフリーペーパーの版下を作ります。<誌面レイアウト>を行うデザインですね。
DTP は、デスクトップパブリッシング(卓上出版〉という意味です。
アルファベット3文字で覚えにくいと思いますが、ぜひ覚えていって下さい!
作りながら、校正で文字の間違いを見つけたりもします。
印刷所に頼んで、刷り上がったものが一般的に流通するまでドキドキしますね。

 

Webデザイナーって?

名前の通りWebサイト(ホームページなど)を作ります。
作り方は色々あるのですが…

わたしたちは「フォトショップ」を使って表面上の見た目を作っています。

 

DTPデザインと大きく異る点は、

「動く・流動的デザインも取り入れられる」ということでしょうか!

 

(※ちなみにホームページが動くのはコーダーさんのおかげです)
こちらは文字が間違ったとしても、見つけた時点で修正可能な点が素晴らしいですね。

 

ふたつの職種

比べてみると、作るものが違いますね。

ただ、どちらも「ページ構成」をするデザイナーさんです。

 

広告やサイトを見る流れや、

そこから与える印象は、手法・手段が異なれど「同じ理論」が当てはまることが多いです。

 

しかし、デザイナーたるもの、普段DTPデザイナーでもWebサイトを作ることもありますし、
Webデザイナーでも名刺を作ったりします。

弘法筆を選ばずとはこのことでしょうね…。(片方しか出来ない人も多いんです!)

わたしは、まだフォトショについては勉強になることが多いです…

 

「イラレとフォトショの特徴、違い、同じこと」

デザイナーの仕組みはわかりましたか?
ではなぜ、使うソフトが違うんでしょう。
どちらもAdobe社のソフトです。ざっくり説明すると以下のとおり。

 

02

イラストレーター

 

「誰でもイラストが簡単にかけるソフト」。
いちからデザインをしたり、

キャラクターのような単純な線のイラストやロゴの制作に向いているソフトです。

 

上記の拡大図では、綺麗な曲線を描いていますね。

これは「ベジェ曲線」という座標や数値で描かれる図形で表されています。

座標というと

「おっ?数学かな…難しいな」と思われるかもしれませんが、そんなことはありません。

このベジェ曲線で描かれたものは「画像の劣化」を知りません。

小さい絵や文字を拡大コピーしたとき、

ボンヤリぼけてしまったことはありませんか?

 

Illustratorのベクターは小さく制作したとしても

「数値で構築されている図形」

なのでドーンと大きく拡大してもボケたりしません!

 

また、複雑な効果(影をつけたり)をつけないかぎり、容量は軽いです。
そして、印刷をメインに考えられているので、
キャンバスは基本的に紙の「A・Bサイズ」を指定しています。

 

(※サイズは自由に変更OKですが、得意分野をここで示しているということですね。)

 

フォトショップ

 

「写真の補正・修正・合成に向いているソフト」。
写真はもとより、

イラストレーターより精密なイラスト(水彩塗りのようなもの等)を描く場合に重宝します。

 

青く囲った「フォトショップ」の拡大図では、

丸い図形が四角のツブで構成されていますね。

 

このツブは「pixel(ピクセル)」をいうパソコンの画面の一番小さな単位です。
この粒がそれぞれ色を表現して合わさって、
わたしたちはパソコンの文字や写真を認識しています。
(1ピクセルにつき、1色の色そ指定して配置できるということです)

 

内容量にもよりますが、

このキャンバスが大きいほどPhotoshopの容量は単純に重たくなります…!

(※イラレはキャンバス大きさより内容の濃さに比例します)

 

昔、ピクロスというゲームがありました。
あれをイメージしていただくのが一番わかりやすいかもしれません。

 

パソコンの画面の単位もピクセルです。
ですので、ホームページを作る上で、

Photoshopとパソコンはとっても相性がいいことがわかりますね。

 

*****************

ここまでいかがだったでしょうか!
まだまだ足りない部分も多いですね…。

 

しかし、どっちも使えると
「これは○○で作ったほうがいいな」と、シーンによってソフトの使い分けができます!
どちらもマスターしてハイパー最強なデザイナーを目指していきましょう!!

 

次回は実践編ができたらいいな!

ここまで読んでくださり、ありがとうございました。

デザイン / Illustrator / Photoshop / デザイナー / DTPデザイン / Webデザイン、ベジェ曲線 / ピクセル / ベクター

執筆者:ブログ担当

お問い合わせフォーム