Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/html/dolphin-cms.net/wp/wp-content/themes/mytheme/functions.php on line 752

Warning: file_get_contents(http://urls.api.twitter.com/1/urls/count.json?url=http%3A%2F%2Fwww.dolphin-cms.net%2Fblog%2Fgif-gradation-fireworks): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/html/dolphin-cms.net/wp/wp-content/themes/mytheme/functions.php on line 752
美しいグラデーションのGIFを作るための設定 Fireworks編

新米ウェブマスターのためのウェブマスターブログ

美しいグラデーションのGIFを作るための設定 Fireworks編

2014年1月10日 01:37

gif-gradation-fireworks

今日は、Fireworksを使って美しいグラデーションのGIF画像を作成する場合の書き出し設定を検証してみたいと思います。

 

最適化の設定

Fireworksにはカラーパレットと呼ばれる色の設定があります。
GIFであれば最大256色が設定可能で、画像を書き出す際にこれらの色が使われます。

色をひとつひとつ選んで設定することもできますが、通常はFireworksの自動設定に任せます。
最適化の方法は以下の10種で、作成した画像のカラー数等によって選択します。

  • アダプティブ
  • Web アダプティブ
  • すべての色を割り付け
  • Windows
  • Macintosh
  • Web 216 色
  • RGB を均等に割り付け
  • グレースケール
  • モノクロ2階調
  • カスタム

以下の設定を基本とした上で、それぞれ検証してみます。

マット 画質とは無関係なので、特に指定はありません。
カラー 選択したパレットの最大値
非可逆圧縮 0
ディザ 100%
透過設定 透明化なし

非可逆圧縮は、数値を上げると画質は落ちますがファイルサイズを小さくすることができます。より美しくが今回の目的なので、「0(圧縮しない)」に設定します。
ディザは100%に設定します。ディザについては、「ディザリングとは何ぞや?今さら聞けない知ったかワードその2」をご覧下さい。

実際に書き出したGIFを見比べてみる

主観ですが、美しいと感じる順に並べてみました。左から、

  • アダプティブ
  • Web アダプティブ
  • すべての色を割り付け
  • Macintosh
  • Web 216 色
  • RGB を均等に割り付け
  • Windows

です。
今回の例では256色を超えているので、「すべての色を割り付け」は使用できません。それでも選択した場合は、代わりに「Web アダプティブ」が使用されます。
なお、

  • グレースケール
  • モノクロ2階調

は問題外なので除外しました。
それぞれの説明を以下に記します。

 

アダプティブ

もっとも美しいのはアダプティブでした。
アドビのドキュメントにも、「一般的に最も高画質である」との記載がありました。
Fireworksまかせで美しく書き出したいならアダプティブを選択しておけば間違いないでしょう。

ただし、256色以下の画像をアダプティブで書き出すと必要以上に減色されてしまうことがあるので、「すべての色を割り付け」の方が良い場合もあるので注意が必要です。

Web アダプティブ

カラーが最も近い Web セーフカラーに変換される割り付けパレットです。Web セーフカラーとは、Web 216 色パレットに含まれているカラーです。

Adobeのドキュメントより転載

Web セーフカラーに変換される」とあるので、Web 216 色と同じなのかなと思いきや、実際に書き出してみると全然セーフカラーになりません。

左は24ビットカラーで、右がWeb アダプティブ(セーフカラーではない色に黒丸を付けてます)で書き出した画像です。

画質はアダプティブに劣るし、セーフカラーでもないし、一体どういう時に使うんでしょうか・・・

すべての色を割り付け

256色以下の場合にのみ使用可能です。
256色を超えているにも関わらずこれを選択した場合、代わりに「Web アダプティブ」が使用されます。

Macintosh

Macintoshの標準カラー256色らしいです。
セーフカラー216色はすべて備えていて、右下の行が細かくなっているので、たぶんその辺りの色がMacintoshの標準カラーなんでしょう。
ちなみに、256色で書き出しましたが、書き出された画像は226色でした。

Web 216 色

セーフカラー216色のパレットです。
セーフカラーについては「8ビットカラー、セーフカラー、ハイカラ―、トゥルーカラーとは」をご覧下さい。

RGB を均等に割り付け

RGBを均等にということなので、それぞれ最大6階調、6×6×6で最大216色です。

例えば以下の、#FF0000#CC0000のグラデーションですが、Web 216 色で書き出せば#FF0000#CC0000の2色になります。

RGB を均等に割り付けならば、Rを6階調に分割してくれるはずなので6色になるのかと思いきや、Web 216 色と全くおなじ結果でした。

つまり、RGBをそれぞれ0%、20%、40%、60%、80%、100%の階調に分割したカラー、すなわちセーフカラーに変換されるカラーパレットで、Web 216 色とまったく同じのようです。

Windows

Windowsの標準カラー256色らしいのですが、見ての通り色落ちが著しいです。
ちなみに、256色で書き出しましたが、書き出された画像は146色でした。

まとめ

256色以内なら「すべての色を割り付け」256色を超えるなら「アダプティブ」で書き出すと良い。
ちなみに僕はいつも、デフォルトを「アダプティブ 256色 ディザ100%」にしておいて、256色以下の画像だけ「すべての色を割り付け」に変更しています。

コメント / トラックバック

このエントリーに対するコメント / トラックバックはまだありません。

メールアドレスが公開されることはありません。
*が付いている欄は必須項目です

*
*

次のHTMLタグと属性が使えます : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

トラックバック :

ページの先頭へ