Photoshop9-7 Photoshopでのデザインカンプ作成その7 で作成したコンテンツページから画像を切り出していきます。
トップページから切り出してもいいのですが、今回トップページに使っている画像はコンテンツページと同じ画像なので、大きな画像のほうをHTML、CSS等で使いまわせるように切り出していきます。
この切り出す機能をスライスといいます。
スライス機能についての詳しい説明は Photoshop Help / スライスツールの使用方法 （Photoshop CS6） で確認してください。
最初に背景画像を作成します。
背景画像は切り取る必要がないので、背景写真のレイヤー以外を非表示にしてWeb用に保存を選択します。
ファイルサイズなどが大きすぎないか保存用画面で確認します。プリセットを JPEG高 最適化チェックボックスにチェックが入っているかを確認します。
左下のハンバーガーアイコンの▼をクリックするとダウンロード速度を表示と出るので、そちらでどの程度の処理になるのかを確認します。（DL時間＝表示時間と思ってください。）
プリセットがJPEG高では時間がかかる場合が想定されます。今回はプリセットを JPEG標準に変更してファイル名をback.jpgとしてportfolioというファイルを作り、保存しましょう。
よほどの高画質な状態をキープする必要がない限り、サイズを軽くしておくよう心掛けてください。
次に各部品を切り出していきます。ヘッダー コンテンツ1のみ表示させます。
背景画像や、白い背景は保存の際、非表示にしてください。
スライスツールを選択し、ロゴの周囲と写真の周囲のガイドに合わせてドラッグします。
このようにドラッグした箇所に枠ができます。
切り出してから切り出しの箇所を修正したい場合は、スライス修正ツールで修正します。スライス修正ツールはスライスツールを長押しすると出てきます。
修正したいスライスをクリックすると、茶色い枠に変わります。パスを選択し移動させるとスライスのサイズが変更になります。
Web用に保存を選択し、保存用確認画面を表示させます。スライスした画像は二つですが、たくさんのスライスガイドが出ています。これは、その周囲にも自動でスライスが入っているためです。ロゴと写真のスライスをshiftを押しながらクリックします。青い枠で囲まれていたロゴ画像が茶色く変わります。
今回はこの二つの画像をpng形式で保存します。プリセットをpng24に変更して、保存をクリックします。
保存先が出るのでportfolioという名前で保存します。この時、保存ダイアログ左下のすべてのスライスの▼をクリックし選択したスライスに変更します。
保存先のフォルダは、先ほど作成したportfolioフォルダを選択してください。
エクスプローラーを開き、最近表示した場所を選択すると、imagesフォルダが出来上がっており、画像が格納されているはずです。
同じようにコンテンツ２と３の写真も切り出します。コンテンツ2と、3の写真は最初に切り出したスライスの中に入るのでレイヤーの表示を変更してスライスを選択し保存していきます。このとき、すでにportfolio-06というpngファイルが作られているので、portfolio2、portfolio3 という名前に変更して保存します。
エクスプローラーを開いて最近表示した場所を選択すると、imagesの中にすべての画像が入っています。他に別のpngがある場合、すべてのスライスを選択してしまったのが原因なので、不要な画像は削除してください。
次に切り出した画像を使ってHTML、CSSでマークアップ、コーディングをしていきます。
Photoshopでの作業はここでいったん終了です。