ウェブ用のGIFデータのつくりかた

質問

イラストレーターで作ったロゴをweb用に保存として、GIFで保存し、webサイトにのせてみましたが、文字がギザギザになってしまいまいした。
GIF128ディザありもディザなしも試しましたが、あまり変わりませんでした。
どういう手順を踏めば、滑らかなフォントをweb用に作れるのでしょうか？
photoshopおよびimage readyもありますので、
何か良い方法があれば、教えてください。
よろしくお願いいたします。

回答No.5

HAL2（@HALTWO） · ベストアンサー

＞しかし・・・肝心なことを忘れておりました。
＞背景が写真なので、透明にしたいのですが、jpegでは、背景を透明にできないようなのです。

あと一息ですね(^_^)/

上手い具合に行った JPEG ファイルを Photoshop で読み出し、GIF89a (透過 GIF) 形式で保存し直してください。

この時、24bit (1677 万色) あった JPEG データは 8bit (256 色) の GIF データになりますので、再度 Photoshop に開いてみてギザギザが出ていないかどうか確認します。

ギザギザが出ているようでしたら JPEG の圧縮比を変えるなどの操作を行ってギザギザを少なくします。

GIF89a (透過 GIF) 形式で iWeb に取り込めるようでしたら背景写真を阻害することのない透明化した画像を Web にアップできる筈です。

私は iWeb を使っていないので判らないのですが、もしも iWeb が JPEG しか扱えないのであれば GIF を扱える別の HTML Composer (例えば無料でダウンロードできる SeaMonkey など) と FTP ソフトウェア (例えば Cyberduck や FileZilla など) を用いることになります。

GIF ではなく PNG で透過画像を作ることもできますが、Photoshop でできるかどうかまでは知りません m(_ _)m

透過 PNG のサンプル・ページを参照 URL に記しておきます(^_^)/

参考URL：

http://redline.hippy.jp/redline_sample/0812/0812_04.html

お礼

色々と詳しく教えていただきまして、ありがとうございます。
結局、イラストレーターにPSDの画像を配置して、
別レイヤーのロゴと合わせてから、
JPEGに書き出しましたら、きれいに仕上がりました。
教えていただいたことは、別ページで試して、
今後に活かします。
ありがとうございました！

回答No.4

cell1900

当方のmacは10.5.8
iWebは2.0.4
ですので
同じに、とはいかないとおもいますが、
こちらからは、参考まで、ということで。

CS2で制作されたロゴを
倍率100%、jpg100%または最高画質で書き出して下さい。
書き出したファイルをphotoshopで開いてみて、
思い通りの結果になっていれば、あとはiWebのほうの問題です。
もし、webで出すには大きすぎるサイズであるならば、
解像度を72dpi、バイキュービックで縮小すると
ぎざぎざせずに画像を縮小することができます。

iWebでの表示に関しては、
プレースホルダーにドラッグ&ドロップする事で
読み込まれて表示されますが、
プレースホルダーのサイズを基準にオートでリサイズされてしまいます。
画像を選択した状態でインスペクタ内の画像という項目を見て、
元のサイズ、というボタンをクリックするか、
書き出した時点での画像のたてよこピクセルが同じになるように
数値を変更します。
インスペクタが表示されていない場合は、
コマンドキー+iで表示されると思います。
バージョンが違うので、正しいかは判りません。
当方のバージョンでは、
環境設定内に
読み込み時、イメージを最適化
という項目があるので、
劣化が気に入らない場合は外します。

バージョンが上の桁で違いますので、
だいぶ違う箇所もあるかも知れません。

同じ環境の方が
教えて下さると
いいですね。

お礼

度々ありがとうございます。
教えていただいた通りに作業しましたら、とてもきれいにi webへ移動できました。
しかし・・・肝心なことを忘れておりました。
背景が写真なので、透明にしたいのですが、jpegでは、背景を透明にできないようなのです。

回答No.3

cell1900

iWebでgifの画像を入れたことがありますが、
勝手にjpgにされました。
jpgの%を100とか90で入れてみても、
60ぐらいの画像にされてしまいました。
バージョンによってだいぶ違うと思いますが、
「最適に調整する」とかの指定をいじると
なんとかなる場合もあります。

gifで書き出した時点でぎざぎざになっている、
ということであれば、
jpgでの書き出しを試みてみては
いかがでしょうか。
でも質問者さんはgifデータをつくりたい、と
仰られているので、
jpgでできたとしても、それは解決では
ないような気がします。

蛇足とは思いますが、
質問者さんが
ご使用になられている
OSのバージョンx.x.xと
iWebのバージョンx.x.xと
photoshopのバージョンを
質問内容に書き足しておけば、
更におおくの親切な方から
あなたへの助言が投稿され、
解決への道が短くなるやもしれません。

お礼

ありがとうございます。
Mac OS 10.5.8
iweb　3.0.3
illustrator および photoshopは、CS2
です。
どうしてもGIFでという訳ではなく、結果が滑らかな文字になれば、
どんなデータでもOKです。
よろしくお願いいたします。

回答No.2

HAL2（@HALTWO）

Web Site に載せる以前に、保存した GIF ファイルを Photoshop で読み出してみて「ギザギザ」にはなっていませんでしたか？

問題は「Web Site にアップしたこと」に因るものではなく「スケーラブル形式で保存しなかったこと」にあります。

イラストレーターはベクトル形式で曲線を表示することから拡大してもギザギザを生じないものですが、ビット・マップ形式で保存した画像はとビット (ピクセル) で曲線が表示されることからどうしてもギザギザが生じます。

ギザギザを目立たなくさせるために JPEG 形式で保存するというのも手ですが、JPEG 形式にしてもビット・マップ形式であることに変わりはありませんので、拡大すればギザギザが生じます。

拡大してもギザギザが生じないスケーラブル (ベクトル) 形式で画像を保存して Web Site にアップには GIF や JPEG ではなく SVG (Scalable Vector Graphics) 形式で保存する必要があります・・・下記参照 URL

参考URL：

http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

お礼

ありがとうございます。
基本的なことが分かっておりませんので、ありがたいです。

SVGで保存してみましたが、i web（でウェブサイトをつくっています）にドラッグ＆ドロップはできず、挿入から入れると、そのままの形で入りませんでした。
もう少し、試してみます。

回答No.1

harurumoka

アンチエイリアスがかかっているために、そのような見え方になっている可能性があります。
お使いのバージョンが分かりませんが、過去の質問・回答に下記がありました。
http://okwave.jp/qa/q4846232.html
多分、↑はクラッシック環境（CS以前のバージョン）の場合でのやり方だと思います。

また、CSバージョンのやり方では、下記が参考になると思います。
http://shunkantoeien.com/share/illustrator-rasterize.html

参考になれば幸いです。

お礼

ご丁寧にありがとうございます。
やってみましたが、上手くできませんでした。
何か手順が違うかもしれませんので、再トライしてみます。