46日目 | web制作

本日は…

■カンプからスライスして画像制作→HTMLとCSSでサイト制作

今回は教材としてloftのHP（旧）を使用

これをフォトショップでスライスしていく
　→このサイトはグリッドデザインなのでとてもスライスしやすい

・Photoshopでルーラ表示、画像に合わせてガイドを引いていく
　※この作業をまじめにやっておくと、後でスライスツールを使った時にサクッと終わる
　※※なるべく拡大して１pxのズレもないように

　→右端のランキングアイコンのように、周囲と色が同じものは、ガイドが引けている他の画像に合わせた選択範囲を作り、それをわかっているガイドに合わせてセッティングして、その上でガイドを引くといい

　→ガイドが引き終わったらガイドをロック（表示から）

・スライスツールで一つ一つの画像をスライス（ドラッグで）
・スライスが終わったら名前をつける（スライスオプション）このときサイズが予定のものと違ってないかチェック

・全部名前がついたらweb用に保存
　→gifにしたいものがあればダブルクリックでハイライトにしてから、画像形式を変更
　　※まとめて変えたければShift＋ダブルクリックで追加していく
　→保存時、設定＞その他…から１．ファイルの互換性　２．画像をフォルダに保存☑　３．背景をコピー（しない）などのオプションを設定

・imgフォルダの中にスライスした画像が指定した形式で保存される

あとはHTMLとcssで組んでいくだけ！