Category: 画像処理

自分メモ。
規格判(A判、B判、郵便、印画紙、画面解像度、広告バナーサイズ)を携帯から見られるように画像にまとめました。
元々紙で持ち歩いていたのですが、使う頻度も減ったので携帯でいいかと。

http://pw6.jp/images/flash/777-kikaku.jpg

携帯からのアクセスの方は直接上のリンクで開けます。
PCからのアクセスの方はここから携帯宛にこのURLをメールできます。

Flashで[ムービーの書き出し]を使用すると、Flashの機能を利用してGIFアニメを作れます。
直接アニメーションGIFを書き出すと減色や微調整がいまひとつなので、
まずFlashでフルカラーの静止画を書き出してからGIFアニメ化します。

まずFlashムービーを静止画＋連番で書き出す

(1)[ファイル]→[書き出し]→[ムービーの書き出し]
(2)[ファイルの種類]で[PNG シーケンス(*.png)]を選択
(3)カラーには24ビットを選択し、[OK]を押します。

アニメーションGIFに変換する

◇Fireworksを使う場合(おすすめ)
(4-f)[ファイル]→[開く]で、連番で書き出された画像をすべて選択します。[アニメーションとして開く]にチェックを入れます。
(5-f)[ファイル]→[書き出しウィザード]→[書き出すファイル形式を選択]→[アニメーションGIF]を選択します。
(6-f)[オプション]でアニメGIFの色数や透過色を設定します。
(7-f)[アニメーション]のタブでフレームの表示時間、ループ等を設定します。
(8-f)[書き出し」から出来上がったアニメGIFを保存します。

◇Giam(フリーソフト)を使う場合
(4-g)画面左下の白い部分に、連番で書き出された画像をドラッグ＆ドロップします。
(5-g)画面の右側で表示時間、ループ等を設定します。
(6-g)ファイルサイズの最適化を行う場合は、[編集]→[各コマサイズの最適化]を選択します。
(7-g)[ファイル]→[名前をつけて保存]から保存します。
※Giamで作ったアニメで、絵柄のふちに黒いドットが見えてしまう場合は[オプション]→[その他オプション]で「サイズを最適化するとき透過色を使った最適化を行う」のチェックを外してください。

Photoshop CS2で選択範囲内を移動しようとすると、「選択範囲を移動できません。プログラムエラーです。」と出る時は、動かそうとしているレイヤが文字レイヤ、またはベクトルスマートオブジェクトになっている場合があります。
選択範囲内を移動するためには、レイヤをラスタライズする必要があります。

なんで「レイヤをラスタライズしてください」ではなく「プログラムエラー」なんて言われたんだろ、、、

PNG画像の軽量化/ファイルサイズ対策あれこれ。

減色をする

画像処理ソフト付属の機能よりも、Yukariなどの減色専用ツールの方がきれいに減色できることがあります。

また半透明を含むPNG画像は、PNGquantでアルファつきの256色以下に減色できます(→PNGquantの使い方)。
PNGquantを通した後の画像は一部のソフト(photoshop含む)で正常に開けないので、必ず最後の工程で減色をして元画像は残すようにします。
Flash(PC/モバイル)上での再生に関して問題が起きたことはありませんが、よほどファイルサイズの制限がきつい場合でない限り使わない方が無難かもしれません。

スライスを使う

一つのイメージの中にJPGの方が適した部分とPNGの方が適した部分がある場合は、画像を切り分けて別々の形式で保存した方が良い場合があります。
Photoshopの場合、スライスツールとWeb用に保存が便利。
また、パーツによって色数を変えることでも大幅にファイルサイズを落とせることがあります。

最適化を行う

PNGの圧縮を最適化するツールを使用して、画質を変えずにファイルサイズを落とします。
BlastPNGは、OptiPNG、PNGOUT、pngrewite、cPNGCを一括でかけることができます。
ソフトをインストールできない環境では、ブラウザから利用できるpunypngが便利です。

携帯Flash向けには、アルファつき24ビットPNGの減色と最適化を行うバッチファイルを書きました。
こちらの記事もあわせてごらんください。→携帯Flash向け：PNG画像の最適化バッチファイル

JPG画像の軽量化/ファイルサイズ対策あれこれ。

圧縮率を操作する

画像の圧縮率を上げて、画質を落とすとファイルサイズが小さくなります。
QUAJPGやPhotoshopの[Web用に保存]など画質をプレビューしながら圧縮率を決められるものが便利。

PhotoshopのWeb用に保存では、画質重視の場合は画質51～80で保存すると良い。
画質50以下と画質51以上では圧縮に使われるアルゴリズムが変わるため、50以下では急激に画質が落ちてしまう。また、画質90以上では感覚的な見た目の画質が変わらない割にファイルサイズが大きくなってしまう。

ぼかしをかける

JPEG画像はノイズや変化の多い画像でファイルサイズが大きくなります。
コントラストを弱めたり、画像をぼかすことでも軽量化できます。
[フィルタ]→[ノイズ]の[ノイズを軽減][明るさの中間値][輪郭以外をぼかす]はそれぞれノイズを低減するためのフィルタです。
また、[フィルタ]→[ぼかし]の各ぼかしツールやツールバーの[ぼかしツール]で画像自体をぼかしたり、
画像によっては[フィルタ]→[アーティスティック]→[カットアウト]でイラスト調にして細部を飛ばすのも効果があります。

フィルタによって印象を変えたくない時は、色のチャンネルのみにこれらのフィルタをかけます。
[イメージ]→[モード]から[Labカラーモード]を選択しaとbのチャンネルにフィルタをかけると、輪郭(明度)をぼかさないので、シャープな印象を保ったままファイルサイズを落とすことができます。

ハフマンテーブルの最適化を行う

JPEGファイル圧縮プログラム carmineを使用して、圧縮を最適化することで画質を変えずにファイルサイズを落とすことができます。
photoshopの「Web用に保存」を使って保存した場合は更にこのツールを使用しても効果がないようです(CS3 Extendedで確認)。

直線を含む場合は、8pxの倍数を意識する

JPEGで保存の際に圧縮率を上げると、ブロックノイズ(長方形の模様)が出てしまうことがあります。
このブロックノイズは画面の左上を基点として8pxの正方形に現われるため、はっきりした直線を含む画像の場合はこの正方形の端を意識すると線のエッジをぼかさずに表現でき、ファイルサイズも小さくなります。

画像をスライスする

一つのイメージの中にJPGの方が適した部分とPNGの方が適した部分がある場合は、画像を切り分けて別々の形式で保存した方が良い場合があります。
Photoshopの場合、スライスツールとWeb用に保存が便利。

JPEG画像では圧縮率を上げると赤系統の色が汚くなってしまうため、赤色の部分のみPNGで保存することで画質を落としながらきれいに見せることができます。

パソコンで画像を作る際には、おおざっぱに2種類の方式があります。ここではその違いについて説明します。

・ラスタデータ (ビットマップ画像)
主にphotoshopで編集したり、ウェブブラウザ(インターネット)で表示させるのに使っているのがこちらです。
絵や写真を細かい点の集まりで表現します。

・ベクタデータ (ベクトルデータ)
主にilustratorで編集したり、flashアニメで使われることが多いのがこちらです。
絵や写真を座標と数式で表現します。
そのため、拡大や縮小をしても画質が悪くなってしまうことがありません。

それぞれの方式について、もう少し掘り下げてみます。

・ラスタデータの基礎知識
ラスタデータは細かい点の集まりでできています。
そのため、細かい表現や複雑なグラデーションを表現するのに向いています。
デジカメや携帯の写真はもちろんですし、インターネット上で見かける画像はほとんどがビットマップ画像です。
特別なソフトがなくても表示できるため、一度ベクタデータで作った画像もラスタデータに変換して公開することが多く、一番身近な画像です。
ベクタデータに比べて表現の幅がとても広く、できる処理の種類も豊富で制約が少ないのが特徴です。

一つの点のことをドットといいます。また、画像の大きさはこのドットがいくつあるかで決まります。ドットはピクセルとも呼びます。
点と点の間に何も記録していないため、拡大すると画質が落ちてしまいます。

・扱える主なソフトウェア
photoshop や painter 、 paintshoppro など。
フリーソフトでは GIMP、PictBearなどがあります。

・ベクタデータ
・ベクタデータの基礎知識
ベクタデータ(ベクトルデータ)は、ラスタデータとは異なり、座標と数式で色と形を表します。
そのため写真のような複雑な色は表現が難しいのですが、そのぶん規則的な線やグラデーションを表現しやすく、またflashなどを使ってアニメーションさせることができます。
線の始まりと終わりの座標を示しているのが、アンカーです。
また、アンカーからアンカーまでどのようなカーブの線を描くかを決めているのが、ハンドルです。
このようなアンカーとハンドルでできている曲線をベジェ曲線といいます。また、ベジェ曲線やその組み合わせで描かれている線のことをパスといいます。
数式と点で表されているため、ラスタデータと違い何度拡大・縮小しても画質が劣化しません。
ラスタデータよりも正確できれいな線が引けるため、ベクタデータで作った絵をラスタデータに変換して使われる事が多いです。

・扱える主なソフトウェア
Adobe Ilustrator、Adobe Flash、Microsoft Expression などがあります。
フリーソフトでは、Inkscape やparadraw などがあります。

また、ベクトルデータには三次元の情報をもったものもあります。
こういった三次元のデータは、3DCG用のソフトウェアで作成することができます。