実践Webデザインスキル - 第3章 Lesson10

最終回:スライスツールを使って、画像を書き出してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

スライスツールを使って画像をスライスし、適切な形式で画像をパーツ毎に書き出しましょう。



この動画で学べること

・スライスツールの使い方
・Web用に保存する方法



スライスツールを使って書き出すパーツを作っていこう

Webサイトで表示させる画像を書き出していきましょう。



まずツールバーよりスライスツールに切り替え、ドラッグで範囲を指定すると、その部分だけを書き出すことができるようになります。
おおまかに範囲を指定し、大体できればズームツールで拡大して1pxのズレもなく、きっちりと画像に沿ってスライス部分を作ってください。



これで書き出したいパーツを全て範囲していくのですが、
スライスツールでは枠線が茶色のものしか編集できません。
枠線が青いものを再度調整したいときには、スライスツールの状態で、ショートカットキー
[Mac] command ⌘+スライスの上でクリック
[Windows] Ctrl +スライスの上でクリック
で調整が可能になります。


画像をWeb用に保存しよう

スライスが完成したら、画像を保存(書き出し)していきましょう。
今回は、背景を透明にして保存していので、背景の色を非表示にします。
メニューバーのファイルから「Web用に保存」に進み、設定をしていきます。
タブを「元画像」に変更、画像の枠線をクリックして茶色にします。保存する形式をPNG-8にし、
すべての画像の枠線をShift+クリックで茶色くし、保存を選択します。
すると、新たなボックスが立ち上がります。スライス:選択したスライスに変更して保存で書き出しが完了です。