ホームページを作る際に

質問

ホームページを作ろうと思っている初心者です。イラストレーター10.00とフォトショップ8.00を使い、イラストレーターで作った絵をフォトショップでＷＥＢ用に保存して変換、ＧＩＦやＪＰＥＧにしてホームページの壁紙やロゴを作るという作業をしていました。
が、イラレやフォトショでの画面では綺麗だった画像がホームページのディレクタに送ると画像が微妙に粗くなってしまいます。イラレで透明処理をした画像を
貼ると透明が白っぽくなってすこぶる汚くなってしまいます。試しに解像度を上げて見ましたが、どれだけ上げてもあまり変わりません
普段見る良く出来たホームページの画像のように粗さの無いクリアな画像を貼りたいのですが、やはり何らかのソフトを使う必要があるのでしょうか。教えてください。

回答No.2

fab76 · ベストアンサー

ver10のIllustratorなら単体で【WEB用に保存】可能です。リサイズも右のタブから可能なのでここで行ってください。

>イラレで透明処理をした画像を…
そのパーツの[不透明度の設定]ということですか？　特別な方法でなければ反映するはずなんですけれど？？

イラストのタッチがベタが多ければ.GIFに、グラデーションを多用したものは.Jpegの方が都合のいい場合があります。透明部分を利用したければ.GIF（透明部分にチェックです）

ファイルサイズはプレビューを観ながら決めてください、使用色数を減らすと劇的にサイズが減る場合が多いですが、表現出来ない部分が出てきます。

Adobeの.PNGは…　いまいち信用しきれない、個人的に

お礼

フォトショップでかなり細かい調整をしないとイラストレーターの綺麗な画像を反映できないのですね。透明画像は透明にした画像に背景をつけずに単体でＷＥＢ用に保存していたのが白っぽくなる原因だったと思います。これからファイルサイズも確認しながらやってみようと思います。ありがとうございます。

回答No.3

hinatamama

>やはり何らかのソフトを使う必要があるのでしょうか

イラレとフォトショで充分です。最強です。

解像度は「web用に保存」を実行した時点で、72dpiになると思います。

・ロゴや、ベタの多いイラストなど、色の階調の少ないものはGIF形式で保存します。
・写真など色の階調が多いものはJPEG形式で保存します。

GIF形式の場合で、「粗い」と感じる原因は、
圧縮の際のカラー数が少ないのではないでしょうか？
カラー数を上げたり、ディザを適用したりします。
「カラー」を「128」や「256」まで上げたり、
「誤差拡散法」、「ディザ」を100％にしたりします。
透明部分にチェックを入れると透過処理されます。

JPEG形式の場合で、「粗い」と感じる原因は、
画質が低くモアレを起こしているのかもしれません。
この場合は、「画質」を上げます。
「高画質」や「最高画質」を選択、あるいは「画質」のスライダを上げます。

web用に保存の際は、
元画像ではなく最適化や2アップ、4アップ画面で
調整の様子を確認しながら作業します。

>イラレで透明処理をした画像を
貼ると透明が白っぽくなってすこぶる汚くなってしまいます

これは、透過処理した画像のフチの部分のことでしょうか？ホームページに背景色がついていて、フチが白っぽく見えるなら、透過処理が甘いです。背景色となじませる処理をします。

まずイラレで作ったものをコピーして、フォトショへ貼り付けます。このとき対象のオブジェクトよりカンバスサイズを一回り大きくします。
「背景」をHPの背景色で塗り潰し、画像を統合します。
レイヤーパレットで、背景をダブルクリックして「背景」をレイヤー化（レイヤー0）にします。
自動選択ツールで、許容範囲を1、アンチエイリアスをオフにして、背景色の部分をクリックします。選択範囲→選択範囲を反転→選択範囲を変更→選択範囲を拡張で、1(px)を入力しOKを押します。ここまでで、オブジェクトの縁のアンチエイリアス部分を含むオブジェクトを選択しています。つづけて、再度、選択範囲の反転をし、Deleteを押します。web用に保存を実行します。
一例ですが、こうすることで、ホームページの背景色と馴染む画像を作成できます。

お礼

画像の解像度を調節したり、色々な作業が必要なのですね。フォトショップに関して知識が無かったのでやってみようと思います。有難うございます。

回答No.1

noname#10657

.jpgって、汚くなりますが、そのことでしょうか？
pngとか、gifだと、綺麗だと思います。

お礼

そうですね。JPEGは「写真に適する」という概念は理解していたのですが、JPEGにすれば画像が細かく綺麗になると倒錯していたようでした。ＰＮＧやＧＩＦなど、形式の特性を理解してやっていこうと思います。有難うございました。