気まま赴くままに。デザインからプログラミングまでをたまにまとめてます。

デザイン

イラストを描く際に確認しておきたいことまとめ

カバー・アイキャッチ画像6

主にphotoshopとIllustratorで画像を扱う際に、

確認しておきたいことをまとめておきます。

色: 液晶モニタ等では光の強弱により表現している。

ドット: 点。光の強弱を表現する最小単位。

ピクセル: 色を表現するために必要な最小ドット数。

インチ:ヤード・ポンド法。2.54cm。ディスプレイは米国発。

スポンサーリンク



目次

ベクター画像とラスター画像

Illustrator:ベクター画像というベクトル(パス、絶対座標)情報を扱う。

座標情報しかないので、「線と線を繋いで」とPCにお願いすれば綺麗に線を引いてくれます。

ロゴやポスター等の「デザイン」に向いていますね。

Photoshop:ラスター画像というラスタ(ピクセル)情報を扱う。

これはピクセル単位に色を指定しているので近くで(拡大して)見ると荒く見えます。

ですがベクトル情報では難しい複雑な曲線などが表現できるため、

「イラスト」、「アート」に向いています。

どちらも適した場面があり、「使い分け」が重要になります。

illustratorで描いたものを、Photoshopにインポートすると、その時点で

ラスタライズ(写真・画像化。ピクセル情報化)してしまいます。

そこで手動でラスタライズを行いますが、

「解像度」の知識が必要になります。

ちなみに

一部オブジェクトにベクトル情報を扱わせることにより、一つのソフトで完結しやすくなっています。

この様な点で「画像編集ソフト」から「何でもできるソフト」と言われてる訳ですね。

解像度について

解像度:1インチ中のドット(ピクセル)数。画面解像度と画像解像度に分けて考えます。

モニタ解像度:モニタで表現される情報密度。1280×960やdpi・ppi単位での表記方法がある。

VGA、XGA、UXGA、FHDというのは通称。

画像解像度:モニタの表示領域に対する情報密度。dpiやppi単位での表記。

モニタそのものか、モニタの一部分かで違うということですね。

モニタ解像度はパソコンの画面を見る際に使われる解像度です。

画像解像度はWEB上で使う際と印刷する際それぞれに対応させるために使われる訳です。

画像サイズはモニタの中の領域。画像解像度はその密度。

PhotoshopやIllustrator、その他画像編集ソフトでは基本的に画像解像度を用います。

dpiとppi

dpi:dots per inch(ドット/インチ)。入出力機器に使われる。1インチ当たりのドット数。

ppi:pixel per inch。ソフトで使われる単位。1インチ当たりのピクセル数。

適正解像度

72dpi:Webに使うのに適している。

200dpi:離れて見るポスターなど。

350~400dpi:印刷物に適している。

RGBとCMYK

RGB: 光の三原色。PCでの色彩表現は「Red, Green, Blue」を用いる。

混ぜるほど明るく。「加法混色」。

CMYK:色の三原色。紙面での表現は「Cyan, Magenta, Yellow, Kay plate」を用いる。

混ぜるほど暗く。「減法混色」。

WEB上で使うものにはRGB、紙面上で使うものにはCMYKを使いましょう。

ちなみに

Kay plateは黒の役割を担うが、100%の黒は表現できない。

その為広範囲に黒を指定すると透ける等問題が発生。「スミベタ」と呼ばれる。

まとめ

覚えることが多く難しい気がしますが、イメージ的には

  • 液晶モニタ上ではピクセル単位、光で色を表現。RGB、ppi。
  • 紙面上ではドット単位、インクで色を表現。CMYK、dpi。

と考えるのがいいと思います。

何故この様にいろいろな表現方法があるのかというと、

色の表現方法が光とインクで違うから複雑になっているわけなんですね。

ここまでの知識があれば、

編集→環境設定

の各種設定が任意に行えるかと思います。

今回参考にしたサイトは以下。

https://qiita.com/1987yama3/items/5ff58b6195fe6c3f268b

https://proengineer.internous.co.jp/content/columnfeature/5890#13

https://shared-blog.kddi-web.com/webinfo/242/

https://core-canvas.com/photoshop-7-249

感謝感謝です。

-デザイン
-

関連記事

カバー・アイキャッチ画像7

Illustratorで作ったイラストをPhotoshopで扱う

Illustratorで作った画像をPhotoshopで編集する際に 気を付けている点をまとめてみました。   スマートオブジェクトを利用する方法もありますが、 ここではラスタライズ処理をき …