gifとグラデーション

WEB用漫画はgifで作っています。gifの場合、白黒はっきり分かれた画像は得意ですが、滑らかなグラデーションは苦手という特徴があります。グラデーション部分をwebセーフカラーで出力するとドット打ちのようなディザリングになりますが、時にこれがトーンのような点描効果を生み出すことがあるので、意図的にgif特有のディザリングを表現に利用することがあります。

例えばロイド３話の１頁目。 左がディザリング無し、右が有り。

剣の周囲はgif特有のディザ点描効果を生かしたい。が、剣の内部はそれだとあまり美しくないので、点描にはならない滑らかなグラデーションにしたい。

そういう場合はどうすればいいのか？

ちょっと一手間かけます。ディザ点描になってもかまわない部分とならない方がよい部分を分けてレイヤーにします。

A 　B

まずはAをwebセーフカラーでエクスポートし点描効果を出して、別名で保存。

それを呼び出してBのレイヤーを乗算で重ねます。次にこれをwebセーフカラー以外でエクスポート。gifの場合、グラデーションを滑らかにすると重たくなってしまうので、色数とディザリングの％をいろいろ変えてみて、見た目ギリギリ許容範囲でかつ60KB台辺りで収まるようなバランスを探します。

なんとかＯＫ。

普段は40～50KBで収めているので、ちょっと重たいな～という感じですが、たまに１枚くらいならまあいいかと。gifならではの苦労もありますが、それもまた楽しみの１つという感じでやってます。

☆図はPaintShopProのものですが、photoshopでも手順は同じです。