モックアップから画像を最適化、切り出す２つの方法
- 従来の方法
- レイヤーの書き出し機能を使った画像を書き出す方法
全てのスライスが設定できたら、最適化を行う。
１．［ファイル］→［書き出し］→［Web用に保存（従来）］
２．［Web用に保存］ダイアログボックスが開くので、［最適化］パネルで設定し、プリセットなどを調整していく。
３．最適な画像を書き出す方法は、ファイル形式によって異なる。
写真画像 → JPEG形式
画質、圧縮
「最適化」チェックボックスにチェックを入れておくと、画質を落とさずにファイルサイズを軽くできるので、必ずチェックを入れておきましょう。
色分けがクッキリされており、色数が少ない画像
PNG形式、GIF形式
インターレース最初はぼんやりとした画像が、ダウンロードが進むにつれて、ハッキリしてくる画像の表示方式。
インターレース
最初はぼんやりとした画像が、ダウンロードが進むにつれて、ハッキリしてくる画像の表示方式。オプションは、プレビューを見ながら、［最適化］パネルで設定していく。
最適なオプションを使用することにより、画質とファイルサイズを最適なバランスで書き出すことができる。
書き出し設定はすべてのスライスに適用されますが、スライスごとに設定を変更したい場合は、［スライス選択ツール］を選択し、該当するスライスをクリックで選び、書き出しの設定を変更していく。
この記事を読んだ人はこんな記事にもご興味があるかも
2017-01-16 Best 9 Free Web Material Market![[ JavaScript ] 変数](https://i0.wp.com/webdesign.ki-blog.biz/files/JavaScript%E5%A4%89%E6%95%B0.png?resize=150%2C150)
2020-06-06 [ JavaScript ] 変数
2020-07-02 [ WordPress 開発環境構築 ]ローカル環境にWordPressをインストールする for Windows Mac![[-コーディング-]-ナビゲーション（グローバルメニュー）の作成法](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99-%E3%83%8A%E3%83%92%E3%82%99%E3%82%B1%E3%82%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%88%E3%82%AF%E3%82%99%E3%83%AD%E3%83%BC%E3%83%8F%E3%82%99%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%EF%BC%89%E3%81%AE%E4%BD%9C%E6%88%90%E6%B3%95-2.png?resize=150%2C150)
2020-03-19 [ コーディング ] ナビゲーション（グローバルナビゲーション）の作成法![[ CSS ] ボーダーの指定](https://i0.wp.com/webdesign.ki-blog.biz/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/1.jpg?resize=150%2C150)
2017-08-04 [ CSS ] ボーダーの指定
2015-02-01 Photoshop グラデーションの作成方法
(Visited 358 times, 1 visits today)