00:01
前々回に、お絵かきツールのニチとアンチエイリアスについて話しました。
お絵かきツールに限らず、グラフィックツール全般でも知っておいた方がいい話かなと思っています。
そして、今回もそういう感じの話題です。
お絵かきツール、グラフィックツールにおいて、レイヤーと透明というのを知っておいた方がいいと思います。
すでにもう理解してるよという人も多いと思います。
まず、レイヤーについてなんですけども、レイヤーはよくセルガに例えられて、
アニメを作る時のセルガに例えて説明されていたんですけども、
もうセルガ自体が古すぎて、若い世代には伝わりにくいのかもしれません。
その昔、デジタル化されていないアナログの手描きの時代、
アニメを作る時に背景と人物などの動く部分とは別々に描いておいて、
それらを重ね合わせて撮影していたんですね。
背景に重ね合わせる、動く部分の絵は、セルと呼ばれる透明のフィルムに描いていました。
絵がない部分が透けて、後ろの背景とかが見えるようにするためですね。
さらに、例えば人物の目の部分だけ動かしたいとかいう場合には、
背景の上にセルで人物、さらにその上にセルで目の部分と、
動かす部分の絵だけを複数枚描いて、
1枚ずつ変えながら撮影して動いているように見せるということで効率化していたんですね。
まさにこれをデジタルに置き換えたのが、
お絵かきツールやグラフィックツールのレイヤーという機能だと言えます。
レイヤーとは日本語で層、階層のことです。
複数のレイヤーを重ねて表示するということで、作業がやりやすく効率的になります。
画像編集では、例えば背景があって、その上に人物を切り抜いたもの、背景をなくしたものを重ね合わせたときに、
レイヤーに分かれていなかったら、合成した後でその人物をやっぱりもうちょっと右に動かしたいとか、
03:05
そういう試行錯誤、修正などができなくなっちゃうんですね。
レイヤーに分かれていれば、後からいくらでも人物の位置を調整したりできるということですね。
イラストを描くときも、背景と人物とかを別レイヤーで描いておけば、後からの調整がしやすいです。
一つの絵に複数のキャラクターを描く場合でも、キャラクターごとにレイヤーを分けておくとか、
後から色の変更がしやすいように線画と塗りでレイヤーを分けておくとか、
絵を描く人それぞれでレイヤーの分け方の自分のルールみたいなのがあったりすると思うんですが、
レイヤーを利用することで後から修正しやすいデータ作りができます。
次に透明についてです。これは専門用語でもなんでもなくて透明なんですが、
お絵かきツールやグラフィックツールでは扱える色の中に透明という色もあるとも言えると思います。
アナログで紙に絵を描くときには紙の色というものが必ずありますが、
デジタルの場合はそれすらない、字の色がない、字の色が透明ですと、透明という色ですという扱い方ができるんですね。
グラフィックツールにおいての透明という色を発明したのはアドビなのかもしれません。
少なくとも透明を表す格子状の柄はアドビの発明ですね。
ここは白じゃなくて何もない透明の部分ですよを表現する必要があったので、
白と薄いグレーの格子状というパターンの柄を使うようになったのはアドビフォトショップからでした。
他のツールも後にそれを真似したんですね。
フォトショップの最初のバージョンではそもそもレイヤーもなかったんで、
透明を表すその格子状のパターンもなかったはずです。
そしてグラフィックツール、お絵かきツールには透明か他の色かというだけではなく、
不透明度という設定もあります。
レイヤーがあるツールには大体あると思うんですが、
レイヤーごとに不透明度という設定があって、
06:02
パーセントによる指定でどれくらい透けているか、何パーセントの不透明度かを調整できます。
100%が完全に見えている状態で、0%が完全に透明な状態です。
100%の時に全部見えているという方が感覚的に自然なので、
用語的には透明度ではなくて不透明度になるんですね。
英語では透明度がトランスペアレントで、不透明度がオパシティ。
オパシティですかね。違う単語なんですね。面白いですね。
そして例えば背景を透明にした人物を別の背景に重ね合わせる場合などに、
不透明度完全に0の透明な部分と不透明度100%の完全に表示されている色のドットの部分とだけだと、
合成した時に不自然に見えてしまうことが多いです。
切り抜いて貼ったんだなということが境目の部分でわかりやすくなってしまうんですね。
ここで前々回に話したアンチエイリアスが必要になってきます。
フォトショップなどで被写体を選ぶときにアンチエイリアスをオンにしておくと、
境界線の部分をちょっとぼかしたような感じで段階的に不透明度を調整してくれるんですね。
徐々に透明になっていくような感じの境界部分になるので、
合成した時にその境目がわかりにくく自然な感じになると。
そういう調整をフォトショップなどのツールが自動でうまいことやってくれるということです。
最後に透明という要素を持っている画像フォーマットの話をします。
フォトショップのPSDというファイル形式だとレイヤーや透明度などを全部持っているファイル形式になるんですが、
これは開けるツールが限られているあまり一般的ではないファイルフォーマットです。
ただ画像を表示したいというだけの目的にしてはファイル容量も大きくなってしまいます。
なので一般的なウェブブラウザでも表示できるようなファイル形式で透明という情報を持っているのは
09:01
GIFとPNGのファイルフォーマットが一般的です。
ウェブ用の新しい画像フォーマットと呼ばれるWEBPと書くんですけども
WEBPも透明度を持っています。
ベクター形式のファイルフォーマットのSVGも要素がない部分は透明という扱いになります。
このWEBPとSVGが登場する前は
ウェブページ上で透明が扱える画像フォーマットはGIFとPNGしかなかったんですね。
そしてPNGが登場する前はGIFしかありませんでした。
ウェブページ上で複数の画像を重ね合わせるようなレイアウトをすることはあまりないんですが
背景に背景色を色を入れたいあるいは画像の繰り返しパターンとかを背景にしたいということは
昔からありました。
そういう時にロゴなどの画像を背景を透明にした画像として扱いたいというニーズは多いんですね。
昔はそういう時はGIF画像を使っていました。
ただしGIFには弱点があって色数が256色までしか扱えません。
そして不透明度の情報は扱えないので先ほど説明したアンチエイリアス的な処理ができずに
どうしてもギザギザ感のある画像になってしまいます。
透明な部分か色がある部分かしかないデータなんですね。
なので不透明度が扱えるアンチエイリアスの効いた不透明度をうまい感じに使って
どんな背景の色の時にも綺麗にロゴとか画像がある部分だけがギザギザっぽくなく綺麗に表示される
PNGのフォーマットが登場したことで
透明が扱えるからという理由でGIFを使うことはほとんどなくなりました。
ただGIFはアニメーションを作れるというもう一つの大きな特徴があるので
アニメーションする画像のフォーマットとして今でも生き残っています。
なのでGIFといえばアニメーションするものという印象が強いと思うんですが
昔から使っている私からすると動くものに関しては
12:01
アニメーションGIFとかGIFアニメーション、GIFアニメという呼び方の方がしっくりきます。
画像をアップロードするとTシャツが作れるサービスがありますが
ああいうサービスでは画像データはPNGで用意するのが一般的です。
透明度のあるデータにしておけばTシャツの生地の色が何色でも
絵柄とか文字じゃない部分は透明なんで生地の色が透けて
絵柄だけがプリントされるということになります。
通常のプリンターでは白は印刷されませんが
Tシャツの場合黒いTシャツとか濃い色のTシャツには
白色は白インクで印刷します。
白と透明は違いますよということが理解しやすい事例かなと思います。
今回は以上です。
アシカガコウジがお届けしました。
