モックアップから画像を最適化、切り出す２つの方法
- 従来の方法
- レイヤーの書き出し機能を使った画像を書き出す方法
全てのスライスが設定できたら、最適化を行う。
１．［ファイル］→［書き出し］→［Web用に保存（従来）］
２．［Web用に保存］ダイアログボックスが開くので、［最適化］パネルで設定し、プリセットなどを調整していく。
３．最適な画像を書き出す方法は、ファイル形式によって異なる。
写真画像 → JPEG形式
画質、圧縮
「最適化」チェックボックスにチェックを入れておくと、画質を落とさずにファイルサイズを軽くできるので、必ずチェックを入れておきましょう。
色分けがクッキリされており、色数が少ない画像
PNG形式、GIF形式
インターレース最初はぼんやりとした画像が、ダウンロードが進むにつれて、ハッキリしてくる画像の表示方式。
インターレース
最初はぼんやりとした画像が、ダウンロードが進むにつれて、ハッキリしてくる画像の表示方式。オプションは、プレビューを見ながら、［最適化］パネルで設定していく。
最適なオプションを使用することにより、画質とファイルサイズを最適なバランスで書き出すことができる。
書き出し設定はすべてのスライスに適用されますが、スライスごとに設定を変更したい場合は、［スライス選択ツール］を選択し、該当するスライスをクリックで選び、書き出しの設定を変更していく。
この記事を読んだ人はこんな記事にもご興味があるかも
2016-12-11 8 Best Mockups Market Site
2016-05-11 和文書体の分類と特徴
2016-10-22 CSS記述の基礎、基本
2017-04-25 14 Best Free HTML Website Templates まとめ![[ タイポグラフィー ] 覚えておきたい定番明朝体フォント](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%BF%E3%82%A4%E3%83%9B%E3%82%9A%E3%82%AF%E3%82%99%E3%83%A9%E3%83%95%E3%82%A3%E3%83%BC-%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E5%AE%9A%E7%95%AA%E6%98%8E%E6%9C%9D%E4%BD%93%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88.png?resize=150%2C150)
2020-06-30 [ タイポグラフィー ] 覚えておきたい定番明朝体フォント
2021-04-29 グルーピングと要素の差別化ーデザインの基礎、基本
(Visited 296 times, 1 visits today)