• ベストアンサー

GIF保存の、画像が粗くなってしまいます。

はじめまして!よろしくお願いします。 目指しているのは、自作ホームページ上に(すごくシンプルな黒単色)ロゴを綺麗に貼ることです。 何度も踏んでいる失敗の手順は下記の通りです。 イラレでフォントtimes new romanを用いて文字を打ちます。 ファイル-データ書き出し-Gif89a-パレット/web用選択-インターレースにチェックをします。 このGIF保存したファイルを再度開くと(もちろんアップロードを済ませWeb画面上で確認しても同様に)画像がひどく粗くなっています。 ちなみに<img src="~.gif" width="257"height="60"> この幅と高さが目指しているロゴ配置枠なのです。 イラレの書類設定などはいじるべきでしょうか? 環境はMacOs9/IEを使用しています。 フォトショップもあります。 どなたか、教えてください。 お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ki_no_ko
  • ベストアンサー率48% (316/655)
回答No.2

(1)ロゴ作成の手順 イラストレーターで、長さの単位をピクセルにし(cmとかだと×)、 257×60ピクセルの長方形をとりあえず置いてください。 (長方形ツールを使う時、ちょん、とワンクリックすれば数値を入れて四角をかけます) その長方形からはみださないように、ロゴを作ってください。 ロゴができたら、長方形の枠、塗りを両方透明にしてください。 (2)WEB用保存の設定 「WEBで保存」の際、透過にチェックを入れ、GIFの色数を4~16色に。 パレットは「WEB用」ではなく「知覚的」にした方が良いかもしれません。 ロゴを置く部分のバックの色が決まっているのなら、 マットをアリにするとフチが綺麗に見えます。 マットのカラー設定があるなら、色数は8か16色が良いと思います。 …イラストレーターのバージョン9以上だとこれが簡単に行えます。 が、お使いのものは8以下でしょうか? どう設定できたかちょっと忘れてしまいましたが、 上記のような点をチェックしながらやってみてくださいな。

theriz
質問者

お礼

ありがとうございました。 説明が不足していましたが、イラレバージョンは8なんです。そのため、知覚的という保存がないこと。Web用では色数が指定できないこと。また、精密を選び、色数をしてみたり、透過をチェックしたりしてみましたが、どれもダメなんです。どの場合でも保存した後に再度開いてみると、画像が悲しいくらいに粗いんです。アップロード以前の問題のようです。引き続き、いろいろと試してゆきます!!

その他の回答 (1)

  • hibari_d
  • ベストアンサー率23% (32/136)
回答No.1

作った画像をむりやり<width="257"height="60>この大きさに引き伸ばして いるのが荒くなっている原因じゃないかと思います。 おっしゃるように書類設定等をいじって横257ピクセル×縦60ピクセルで 作ればよいとおもいます。 私はロゴ等はフォトショで作る派なので 嫌じゃなければフォトショでも作ってみる事をおすすめしますよ~。

theriz
質問者

お礼

早速の御返事ありがとうございました。 イラレ8.0の書類設定ではピクセル単位の選択が出来ない為、フォトショで257×60ピクセルの設定をした枠を張り付けてみました。 その枠内で文字を作成して、保存してみても、やはり 同じように、ひどく粗い文字になってしまいます。 アップロードの問題よりも、その前段階、Gif保存した 段階で画像が粗くなっているようです。 フォトショでも、出来るのですね! ひき続き両方で作業を進めていきます!

関連するQ&A

  • gif画像が表示してくれません

    <IMG src="20041027.gif" width="400" height="300" border="1"> で画像を表示したいですが、 表示してくれません。 画像は同じディレクトリのしたに置いてあります。 見えます。 なぜ表示してくれないでしょうか? 教えてください! お願いします。

    • ベストアンサー
    • HTML
  • cssヘッダー画像の下に配置したい画像が重なります

    css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー(常に画面の上にヘッダーがあるように)を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか? よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>

    • ベストアンサー
    • HTML
  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • 画像を縦に並べたら隙間ができることについて

    画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 横並びの画像で、ブラウザの幅を縮めても、二段にならない方法は?

    よろしくお願いします。 下記のように書いて、画像を横並びにしています。 ただ、ブラウザの幅を縮めると、二段になっていまいます。 幅を縮めても、一段のまま保持するには、どのように書けば良いでしょうか? <img src="aa1.gif" width="100px" height="100px'> <img src="aa2.gif" width="100px" height="100px'> <img src="aa3.gif" width="100px" height="100px'> <img src="aa4.gif" width="100px" height="100px'>

  • 画像をcssでレイアウトしたいです

    以下のボックスにあるイメージをボックスの左上を基準に2x2の形に並べたいです。その際にcssのpositionを使用してrelativeを指定して定義したのですがうまくいきません。正しい指定の方法を教えてください。 <div id="bottom_right"> <img src="images/image1.gif" width="176" height="57" /> <img src="images/image2.gif" width="176" height="57" /> <img src="images/image3.gif" width="176" height="57" /> <img src="images/image4.gif" width="176" height="57" /> </div>

    • ベストアンサー
    • HTML
  • HTML(画像の幅や高さの設定について)

    HTMLで画像の幅(width)や高さ(height)を設定する際、 次のようにピクセル「px」は省略してもよろしいのでしょうか? 【例】<img src="images/logo.gif" width="200" height="300">

  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか? 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • tableがずれる理由がわかりません

    上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう?? 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>

  • Webの表で画像を並べたい

    テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル(今後増やす予定です)を作り、画像を並べたいと思っています。 が、左の画像と右下(2つ)の画像、右下(2つ)の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか?どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>

    • ベストアンサー
    • HTML

専門家に質問してみよう