グーグル先生に「PNG回り 白い 粒々」、「PNG回り 白い ブツブツ」とか「PNG回り 白い部分」、「イラレ アンチエイリアシング オフ」とかで調べまくったのに全然求めているものが返ってきませんでした。
最終的には自分で解決できたので、同じように悩んでいる人のために記事に残しておくことにしました。
PNG画像の回りの白い点々
まずは今回の問題を整理しましょう。
イラストレーターで作成したPNG画像を他のものと重ねた時にフチに白い点々が現れるという現象です。（Webサイトの背景に重ねたり、動画編集ソフトに挿入した時）
具体的に見てみると以下のような感じです。
これは動画の上にPNG画像を重ねた場合です。
白いブツブツが出ています。
今回はこのPNG画像周りのブツブツを消す方法について書いていきます。
Google先生に聞いてみた
ググった結果、冒頭でも言いましたが全然答えを得られませんでした。
白いブツブツに反応して目の周りにできる白いブツブツの検索結果が得られたりしました。
ツイッターで聞いてみた
僕のツイッターのフォロワーさんに聞いてみることにしました。
▲ワードプレスに画像をアップロードして、背景の上に画像が乗っている状態
するとありがたいことに、すぐに以下のような返信がきました。
「アンチエイリアシング」という謎の言葉がでてきました。（ちぇるにゃとほてぷさんありがとうございました。）
曲線がギザギザになってしまうのを滑らかにする技術
このアンチエイリアシングがオンになっているから白い点が出現するということなのです。
やったー！ついに解決だー！と思って、とりあえず再度グーグル先生に「イラレ アンチエイリアシング オフ」とかでググったら出てきました。
イラストレーションでアンチエイリアシングをオフにする方法
イラレでアンチエイリアシングをオフにするのは簡単で、「編集」タブ→「環境設定」→「一般」で
アートワークのアンチエイリアスのチェックをはずせばいいだけです。
また他にも「効果」→「ラスタライズ」でアンチエイリアスを無しにする方法もありました。
（ただ、こっちはよくわかりませんでした。）
だがしかし、どちらの方法でも解決しませんでした。
これで解決するケースもあるかもしれないので、やってみて損はないでしょう。
PNG周りの白い粒々を消す方法
もう諦めかけたその時、イラレでPNG画像を作成するときの方法について考えてみることにしました。
いつもはPNG-8という形式で出力していたのですが、試しにPNG-24という形式で作成してみることにしました。
▲Web用に書き出しから形式を指定します。
すると以下のような結果となりました。
白い粒々は完全に消えました。
歓喜です。ずっと悩んでいただけにスッキリ感は半端ありません。
最後に
PNG-24が何なのか、とかいうのは置いておいて取りあえず白い枠が消えて良かったです。
同じように悩んでいる方は一度PNG-24で画像を出力してみてください。
以上です。
コメント