３～６はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、２度の劣化が原因だと思います。
５．Photoshopに貼り付け後、「Web用に保存」でjpg
ご指導頂きたくお願い申し上げます。, それらの本に書かれている通り、一度アウトライン化をすると元には戻せません。
Paint等を開きCtrl+Vで貼り付けます。
The following two tabs change content below. Adobeのソフトは一般的にWeb保存の環境設定を、一般的な環境設定とは別のところに保存しています。 こちらはMac + Elements 15の場合ですので、Windows + El.14では違うかもしれませんが、Web保存の環境設定は「次の起動時に環境設定を初期化」とは別に捨てる必要があるかもしれません。
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
環境：
よろしくお願いいたします。, Illustratorには背景色という物が存在しません イラストレーター10で一度Web用に保存をするとその後Web用に保存を選んでもなんのアクションも起きないようになってしまいます。Web用に保存をキャンセルした場合も同じです。ファイルを保存し、イラストレーターを閉じて再起動するとWeb アウトライン化したデータを作った場合はアウトラインする前のデータも
２）「データ書き出し」（この時出るウィンドウの
しかし私自身も興味深かったので、以下の６種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
※PS CC2015以降、Ai CC2017以降, ２．透明部分……グラフィック内の透明部分を透明として保存する場合はチェックを入れましょう。透明部分を作りたくない場合はチェックを外します。, ３．マット……透明部分のチェックを外した際に、透明部分を何色で塗りつぶすかの指定です。, マットは、透明部分にチェックが入っている場合には特に指定がいらないような気がしますが、そうではありません。, その画像を白い背景のホームページに表示した場合と、暗い背景のホームページに表示した場合では表示結果に以下の違いがあります。, こちらは逆で、黒い背景のイラストが美しく、白い背景の方にはイラスト周りに黒い線が見えています。, つまり、背景を透明にした場合の「マット」は、イラストのエッジを何色の背景になじませるのか？という役割を持っています。, 今まで「GIF画像って綺麗に保存できないんだよね」と思っていた方は、ここを確認してみてください。, バイオリンのエッジ部分に蚊がたかっているようなノイズが見えます。これをモスキートノイズと呼びます。, 写真によってノイズが目立つもの、目立たないものがありますので、保存時に「なるべくノイズがわからないギリギリのライン」を見極めることが大切です。, PNG保存の場合、気になるのがPhotoshopやIllustratorの保存画面には「PNG-32」が出てきません。, また、イラストを保存する場合もPNG-32（PNG-24＋透明部分チェックあり）で保存すると、エッジ部分を半透明処理するため、どんな背景のホームページに配置をした場合もかならずエッジがなじむといった利点があります。, ですので、いろんなページで使いまわす画像はPNG-32で保存した方がぐっと扱いやすくなります。, 最初からいろんな背景で扱うとわかっている透過画像はPNG-32で保存するようにしましょう。, Photoshop CC2015より「ファイル」メニュー→「書き出し」内に「書き出し形式」が搭載されました。, やはりダイアログ右上でファイル形式の選択をしますが、こちらにはSVG形式があります。, JPEG、GIF、PNGもこちらから指定が行えます。「Web用に保存」よりも画質が良く、ファイルサイズも軽くなる強力な保存機能なので、できればこちらを利用しましょう！, 最後にSVGの保存です。SVG保存はPhotoshopの「書き出し形式」でも可能ですが、SVG保存がベクター画像ですのでイラストレーターから書き出すことが多そうです。, イラストレーターの「ファイル」メニューから「別名で保存」を実行し、「ファイルの種類」から「SVG」を選択します。, ※レスポンシブサイトで使うか否かで設定を変える場合もありますが、今回は割愛します。またタイミングがあれば記事にします。, PCサイトに掲載するサイトのロゴマークです。ブルーで色がついているところ以外は透過のデータです。, ロゴマークはたくさんのページに掲載されること＋背景に別の色や柄が入ったページにも利用されるかもしれないことを考えた場合、PNGで保存するのが良さそうです。, PC向けサイトですから、拡大されたら……という心配はいらないと思いますが、Retinaディスプレイなどの高解像度ディスプレイのことを考えると、あまり複雑な形状でないロゴならSVGで保存しておいた方が今後の対応はしやすそうです。, スマートフォン上でのズームアップやレスポンシブサイト（ウインドウサイズによってレイアウトが変化するデザイン）のことを考えるとSVGでの保存が良さそうです。, 角丸の外側は透過、ドロップシャドウ部分は半透明であることを考えるとPNGでの保存一択になりそうですが……, CSSで上記の作業を行うことで、「やっぱり角丸やめたいなー」とか「角丸の半径を変えたいなー」なんてときに画像を作り直す必要がなくなるんですね。, とはいえ、皆様の手掛けているサイトによってケースバイケースなところもあると思いますので、あくまでも参考程度に考えていただければ。, バンフートレーニングスクールでは、イラストレーターも、フォトショップも、ホームページ作成だって学べちゃいます。, バンフートレーニングスクールは PNG-32 6.