3 返信 最新の回答 日時: Apr 21, 2016 2:25 AM ユーザー:i_ha_na

    WEB画像について。

    げんきげんぞう

      イラストレーターccでWEB用、最高画質に保存しても文字や画像がぼやけた感じでWEB上に映ります。

      フォトショップで作成したものだと画像がぼやけなく鮮明に映るのはなぜですか?

       

      サポートへ連絡しアドバイスをいただきましたが、書き出し をしても映り方は変わりません。

      ホームページ用画像なのであまり大きい容量にはしたくないです。

      ウインドウズ7、イラストレーターCC2015、フォトショップCC2015使用。

      スキルレベル初級です。

        • 1. Re: WEB画像について。
          kawacoco+ Level 2

          IllustratorでWeb用の画像を作る際にはベクターデータから書き出されるアンチエイリアスをコントロールするためのいくつかの設定とコツがあります。

           

          1:オブジェクトを作成する際、ピクセルグリッドに整合を適用するかしないかでアンチエイリアスのかかり具合が変わります。オブジェクトの少数点以下を0にしてピクセルに単位をあわせる設定で す。

              新規ドキュメントを作成する際「新規オブジェクトをピクセルグリッドに整合」にチェックを入れます。

              オブジェクトを変形する際、変形パネルの「ピクセルグリッドに整合」にチェックが入っていのを確認します。

              オブジェクトを作成/変形する際、特に水平垂直のラインがピクセルに整合するよう、変形パネルのサイズを確認しながら小数点以下を0にする必要があります。

           

          2:書き出しの際に文字に最適/アートに最適の切り替えで配置画像やオブジェクトのアンチエイリアスが変わります。配置した画像データ、オブジェクト、文字の有無などで、それぞれ適したものを 使う必要があります。

          • 2. Re: WEB画像について。
            げんきげんぞう Level 1

            kawacoco様

             

            すべてを選択後、ピクセルグリッド整合適用にチェックをいれ、文字に最適を選択、

            画像アップしてみましたところ少し改善しました。

            WEB用のカラーモードはCMYKではなくsRGBで設定してみました。

            「オブジェクトの小数点以下を0にして」という設定方法がわかりません。

            単位はすべてピクセルにしています。

            返信いただき、ありがとうございました。

            • 3. Re: WEB画像について。
              i_ha_na Level 1

              webの世界では「1px」が最小単位となります。

              ぼやけてしまうのは、例えば1.2pxの線を作った場合、Webでは「1pxの線?2pxの線?」と考えてしまうからだ、イメージすると分かりやすいと思います。

              ですからkawacocoさんが「オブジェクトの作成・変形で小数点以下を0にする必要がある」と回答したのです。

               

              この小数点以下を0にする方法ですが

              Adobe Illustrator * オブジェクトの変形

              変形パネルを利用して数値を整えると良いと思います。

              変形パネルの右側、Wがオブジェクトの横幅、Hがオブジェクトの高さを示しています。

              ここに例えばW11.5 px、H20.3 pxという数値があったとしたら、単純にW11px、H20pxと数値を整数にすればよいでしょう。