イラレで作った画像がぼやけて、色も保存するとなぜかずれます。

法人・ビジネスホームページ・Web制作 2013/12/01 22:47

イラレで作った画像がぼやけて、色も保存するとなぜかずれます。
右上の福岡市中央区許可保育園という部分です。
一番上の線と同じ色にしたいのですが、ずれます。#990000にしたいのですが993333などに勝手にずれます。

なぜ勝手にずれるのでしょうか？
ｐｎｇ24にしています。
フォトショップで作ればこのようにはならないのでしょうか？
http://sample1.digi2.jp/kindergarten/index.htmlより

補足

2013/12/02 12:41

おかげさまで色はうまくいったのですが、文字はやはりぼやけているような気がします。
フォントがHGP明朝Eなのが悪いのでしょうか？

ラスタライズはなしが初期設定になっています。効果＞ラスタライズにはなしと表記してあります。

park123さん（東京都 / 男性 / 41歳）

回答：1件

専門家

磯部茂
コピーライター

カラーモードのチェックをしてみてください

2013/12/02 10:53 詳細リンク

: (5.0)

park123 さま

はじめまして。
まず、少し情報が足りないので、推測での解答となることをお許しください。

もしかすると、イラストレーターのカラーモードがCMYKになっているのかもしれません。
CMYKモードでPNGファイルを書き出してしまうと、
書き出した画像の色味が変わってしまうことがございます。

イラストレーターの画面より、
左上のファイルをクリックして→ドキュメントのカラーモードより、
カラーモードをRGBに変更することができます。

CMYKは基本的に印刷データを作成するときに使うカラーモードです。
WEBの制作時には、カラーモードをRGBにするようにしてください。

もし、カラーモードがすでにRGBでしたら、申し訳ありません。
そうなると画像の書き出しの設定により、色味が変わっているのかもしれません。

ただ、park123のご質問から、おそらくはカラーモードに起因するエラーのように思います。

以上、参考になれば幸いです。

補足

画像がぼやけてしまっている件について、補足解答です。

該当の画像は、サイズが239px✕42pxとなりますが、
CSSのh1 imgのwidth指定が260pxとなっています。

そのため、ブラウザ上で画像を無理矢理に引き延ばしているため、
画像がボケて表示されているものと思います。

対処法として、

１．画像の横サイズを260pxにリサイズして使用する
２．CSSのH1のwidth指定を画像に合わせる（現状は239px）

ただ、画像のサイズ指定はhtml内で行うのが一般的ですので、

<img src="images/topimg/h1.png" alt="福岡市中央区許可保育園" width="239" height="42">

とするのが良いかもしれません。

以上、簡単ではございますが、こちらも参考にしていただければ幸いです。