スライスとは?
Webデザインからコーディングへ移る工程の前に、モックアップから、サイトに利用する画像を書きだす工程をスライスと呼ぶ。
スライスを行う理由
1.画像のファイルサイズの最適化
サイトを表示するスピードを落とさず、尚かつ、綺麗な画像を表示させるためには、画像を個別にファイルサイズの最適化する必要があります。
2.JavaScriptなどのマウスイベントなどの設定ができる
スライス処理により、マウスイベントで変化する画像の領域を個別に切りわけることができる。
画像の切り出しの考え方
下記を考慮し、スライスしない画像を決める。
- CSS3では、ボタンなどを画像を使わずに、表現できるようになっている。
- Photoshop CCでは、「シェイプ」から、CSS3のコードを抽出することができる。
画像の切り出し時に考慮する点
1.テキストは、画像かWebフォントの利用かの検討。
2.CSSでデザインするかどうかの検討。
3.CSS3で角丸、ドロップシャドウ、グラデーションを表現するかどうかの検討。
※ IE8以下はCSS3に対応していない。
CSS 2.1 まで
- 「べた塗りで角が四角いもの」以外は、原則として全て画像素材を用意しなければならない。
- 1つの要素に使える背景画像は1枚だけ。
最終的には、「ターゲットブラウザ」と「制作ポリシー」を考慮し、決定する。
【参照】
[amazonjs asin=”4844362607″ locale=”JP” tmpl=”Small” title=”現場のワークフローで覚える Webサイト制作教室”]
この記事を読んだ人はこんな記事にもご興味があるかも
(Visited 54 times, 1 visits today)
固定ページ: 1 2