スライスする前に考えておくべきこと

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

 

Webデザインからコーディングへ移る工程の前に、モックアップから、サイトに利用する画像を書きだす工程をスライスと呼ぶ。

1.画像のファイルサイズの最適化

サイトを表示するスピードを落とさず、尚かつ、綺麗な画像を表示させるためには、画像を個別にファイルサイズの最適化する必要があります。

2.JavaScriptなどのマウスイベントなどの設定ができる

スライス処理により、マウスイベントで変化する画像の領域を個別に切りわけることができる。

下記を考慮し、スライスしない画像を決める。

  • CSS3では、ボタンなどを画像を使わずに、表現できるようになっている。
  • Photoshop CCでは、「シェイプ」から、CSS3のコードを抽出することができる。
画像の切り出し時に考慮する点
1.テキストは、画像かWebフォントの利用かの検討。

2.CSSでデザインするかどうかの検討。

3.CSS3で角丸、ドロップシャドウ、グラデーションを表現するかどうかの検討。

※ IE8以下はCSS3に対応していない。

  • 「べた塗りで角が四角いもの」以外は、原則として全て画像素材を用意しなければならない。
  • 1つの要素に使える背景画像は1枚だけ。

最終的には、「ターゲットブラウザ」「制作ポリシー」を考慮し、決定する。

【参照】

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です