スライスとは？
Webデザインからコーディングへ移る工程の前に、モックアップから、サイトに利用する画像を書きだす工程をスライスと呼ぶ。
スライスを行う理由
１．画像のファイルサイズの最適化
サイトを表示するスピードを落とさず、尚かつ、綺麗な画像を表示させるためには、画像を個別にファイルサイズの最適化する必要があります。
２．JavaScriptなどのマウスイベントなどの設定ができる
スライス処理により、マウスイベントで変化する画像の領域を個別に切りわけることができる。
画像の切り出しの考え方
下記を考慮し、スライスしない画像を決める。
- CSS３では、ボタンなどを画像を使わずに、表現できるようになっている。
- Photoshop CCでは、「シェイプ」から、CSS3のコードを抽出することができる。
画像の切り出し時に考慮する点
１．テキストは、画像かWebフォントの利用かの検討。
２．CSSでデザインするかどうかの検討。
３．CSS３で角丸、ドロップシャドウ、グラデーションを表現するかどうかの検討。
※ IE８以下はCSS３に対応していない。
CSS 2.1 まで
- 「べた塗りで角が四角いもの」以外は、原則として全て画像素材を用意しなければならない。
- １つの要素に使える背景画像は１枚だけ。
最終的には、「ターゲットブラウザ」と｢制作ポリシー｣を考慮し、決定する。
【参照】
[amazonjs asin=”4844362607″ locale=”JP” tmpl=”Small” title=”現場のワークフローで覚える Webサイト制作教室”]
この記事を読んだ人はこんな記事にもご興味があるかも
2016-12-24 スライス機能を使った書き出しの2種類のスライスの作成方法
2016-12-23 Photoshop CCの画像を書き出す2通りの方法
2017-10-04 Free Responsive Web PSD Template Web Site![[-コーディング-]-ナビゲーション（グローバルメニュー）の作成法](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 [ コーディング ] ナビゲーション（グローバルナビゲーション）の作成法
2014-05-29 Webレイアウトの構成要素
2016-05-22 Illustrator カラー設定を設定する
(Visited 103 times, 1 visits today)
固定ページ: 1 2