Web Studio
印刷バージョン
(PDF: 341 KB / 4 ページ)
page:
Slice images for quick Web creation
スライス画像には多くの活用法があります。Photoshop® 6.0であらかじめ作成しておいた単一の大きな画像をスライスすることによってWebページ全体を作成することも可能です。Photoshop 6.0に付属しているAdobe® ImageReady® 3.0を使うと、画像を別々のスライスに分割することができます。スライスは、ナビゲーションリンク、ロールオーバー効果のトリガ、またはほかの画像を表示するためのプレースホルダに使います。次にAdobe GoLive®で、スマートPhotoshopオブジェクトとして画像をページ上に配置します。以下の手順では、画像をスライスしてWebページで使う方法を紹介します。
1.ImageReadyで画像を開く
まず、画像をどのように分割してWebページを作成するか決めます。一般的なWebページには、ナビゲーションバー、バナー、ボタン、メインの画像や情報の表示領域などがあります。まず内容に沿った大きな区分を作り、その後、ボタンなど個別の要素のスライスを作成します。画像をどのようにスライスに分割するかを考えるときには、ガイドを使うと便利です。
step01.gif
2.画像をスライスに分割する
スライスツールを選択し、画像の一部分をドラッグして囲むとスライスが作成されます。画像が複数のスライスに分割されたことに注意してください(作成したユーザ定義スライスと、画像の残りの部分にできる自動スライス)。引き続き、画像のそれぞれの部分をドラッグして囲み、さらにスライスを作成します。画像をスライスに分割するときには[スナップ先]-[ガイド]および[スナップ先]-[スライス]コマンドを使うと便利です。
スライス選択ツールを使うと、ユーザ定義スライスを選択してサイズを変更することができます。スライスのサイズを変更するには、スライス選択ツールでスライスをクリックし、いずれかのハンドルをドラッグします。
step02.jpg