スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第13回目の授業です。

WEBサイトのデザインをPhotoshopで作成した後、「で、次にどうしたらいいんですか…?」とよく聞かれます。

スライスツールで、HTMLに組み込むために画像をパーツに分ける、ということは学習するのですが、実際に自分の作ったデザインデータを前にすると、テキストの課題とは勝手が違いますよね。

では今日は、このスライスからWEB用保存までの作業について具体的に学びましょう!

[大まかな流れ]

  1. スライスツールでスライスする
  2. スライス選択ツールでスライス定義をする
  3. 切り出したい画像以外の部分が入っている場合は、そのレイヤーを非表示にする
  4. [Webおよびデバイス用に保存]ダイアログで、各スライスの画像形式などを設定する
  5. 保存先を決めるウィンドウで、「すべてのユーザー定義スライス」を選択し、保存する

[ポイント]

  1. 透明で書き出したい場合は背景にあるレイヤーを非表示にする
  2. 繰り返し表示させる画像はその一つ分だけスライスする
  3. ナビゲーション等のオン・オフの画像は2回に分けて保存する
  4. スライス同士が重なっている場合は重ね順を入れ替えて1つずつ
  5. 一部のスライスのみ変更があった場合は、保存時に「選択したスライス」に
  6. 無駄な「images」フォルダが増えないよう、2度目以降は保存先に注意

1.スライスツールでスライスする

まずはスライスツールで、切り出したい画像に沿ってスライスします。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

この時、1pxでもずれるとコーディングの時に困ることが多いです。 画像を拡大してぴったりに合わせましょう。

スライス選択ツールで、スライスのバウンディングボックスを伸縮させることができます。 (または、スライスツールを持ったまま[Ctrl]キーを押している間、スライス選択ツールになります。) デザインの段階でずれている場合はデザインを直します。

この時、スナップをオンにしておくと作業がしやすいですが、場合によっては思い通りに吸着してくれないこともあるので[Ctrl+Shift+:(コロン)]でスナップのオン・オフを適宜切り替えましょう。

2.スライス選択ツールでスライス定義をする

スライス選択ツールで、スライスをダブルクリックすると、「スライスオプション」ダイアログボックスが出ます。
ここで、スライスの名前を変えます。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

この設定をしない場合、Web用保存した際に各画像のファイル名は「mamatokocafe_01.jpg」「mamatokocafe_02.jpg」のように、「psdファイル名_スライス番号」で保存されます。
これでは後のコーディング作業の際に、それがどんな画像かが分かりづらく管理もしづらいです。(参照→初めてWEBサイトを作る時にしがちな6つの失敗

ここでスライスに名前を付けておくと、その名前でファイル名が付くので、あとでいちいちファイル名だけ直すという手間も省けます。
ダイアログ下部ではサイズの確認と変更もできます。

3.切り出したい画像以外の部分が入っている場合は、そのレイヤーを非表示にする

背景の画像だけ切り出したい場合など、スライスの中に他の画像やテキスト等が入っている場合、そのレイヤーを非表示にしておきましょう。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

ここで、デザインデータのレイヤー構造がぐちゃぐちゃの場合は該当レイヤーを探すのに苦労します。レイヤーを整頓させる大切さが分かります。

4.[Webおよびデバイス用に保存]ダイアログで、各スライスの画像形式などを設定する

以上の準備ができたら、[ファイル]メニューの[Webおよびデバイス用に保存]よりダイアログを呼び出します。

左側のプレビュー画面でスライスをクリックして、右側の設定画面で各スライスの画像形式などを設定します。
同じ設定のスライスは、Shiftキーを押しながら複数選択して一気に設定できます。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

※画面操作のショートカット(スペースキー+画面ドラッグ→手のひらツール、Ctrl+スペースキー+クリック→画面拡大など)がこのダイアログ内でも使えます。

5.保存先を決めるウィンドウで、「すべてのユーザー定義スライス」を選択し、保存する

[Webおよびデバイス用に保存]ダイアログで設定完了後、[保存]ボタンを押すと、保存先を選択するウィンドウが出ます。

Webサイトのデータを格納するフォルダを選択し、ウィンドウ下部の「フォーマット」を「画像のみ」、「スライス」を「すべてのユーザー定義スライス」に切り替えます。
ここでのユーザー定義スライスとは、手順2で名前を付けたスライス全てを指します。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

保存が完了したら、さっき選択していたフォルダの中に「images」フォルダができていて、その中にスライスの名前の付いた画像が、設定した形式で保存されています。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

スライス→Web用保存の大まかな流れは以上です。
次からは、もう少し場合によっての細かい操作方法を見ていきましょう。

ポイント1:透明で書き出したい場合は背景にあるレイヤーを非表示にする

パターンや画像などが背景にあり、その上に重ねる別の要素として書き出したい場合は、手順3の要領で下にあるレイヤーを非表示にします。

透明を含む画像は、Web用保存のダイアログでGIFまたはPNG-24にし、「透明部分」にチェックを入れます。
ドロップシャドウのかかっているものや半透明の画像であればPNG-24に。

ポイント2:繰り返し表示させる画像はその一つ分だけスライスする

コーディングの際、CSSのbackgroundプロパティなどでリピートさせる画像は、1つ分だけスライスしておきます。その際、継ぎ目が不自然にならないよう調整しましょう。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

ポイント3:ナビゲーション等のオン・オフの画像は2回に分けて保存する

グローバルナビゲーション等のロールオーバー画像は、まずはオフの画像でWeb用保存しておきます。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

そのあとレイヤーパネルの操作でオンの画像を表示させて、スライス選択ツールでスライス名を変更し(navi01_off→navi01_on)、そのボタン部分だけ再度Web用保存します。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

スライス自体はそのままで、スライス名だけ変更すれば、新たな画像としてimagesフォルダ内に追加されます。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

ポイント4:スライス同士が重なっている場合は重ね順を入れ替えて1つずつ

背景と、その上に配置している画像の両方を別の画像として書き出したいときがあります。

その時、重なったスライスを両方選択してWeb用保存をすると、前面にあるものが優先され、下のスライスは無駄に分割されてしまいます。

なのでこの場合は、スライスを選択し、コントロールパネルまたは右クリックでスライスの重ね順を最前面にし、まずその一つだけ書き出します。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

その後、背面のスライスを最前面に入れ替えてもう一度書き出します。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

ポイント5:一部のスライスのみ変更があって再度書き出す場合は、保存時に「選択したスライス」に

ポイント1、3、4の場合も同じですが、2度目以降の書き出しの際、保存先を選ぶウィンドウの下部でスライスを[すべてのユーザー定義スライス]のままにしておくと、またすべてのユーザー定義スライスについて書き出し作業が行われます。それでも特に支障のない場合もありますが、分割されたスライスができてしまう場合もあり、処理にかかる時間ももったいないので、必要なスライスだけ書き出すようにしましょう。

その際、[Webおよびデバイス用に保存]ダイアログで書き出したいスライスだけ選択しておきます(複数ある場合はShiftキーを押しながら選択)。

そして保存先を選ぶウィンドウで、スライスを[選択したスライス]に切り替えて保存します。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

ポイント6.無駄な「images」フォルダが増えないよう、2度目以降は保存先に注意

ファイルを保存するとき、普通は、保存先を選ぶウィンドウ上部の[保存する場所]に保存したいフォルダを表示させて保存します。

なのでWeb用保存の際も、サイトのフォルダ内のimagesフォルダの中に保存…とするのがいつもの感覚なのですが、そうするとimagesフォルダの中にまたimagesフォルダができてしまいます。
Web用保存をすると、いつも勝手にimagesフォルダができてしまうので、保存する際はその点に気を付けます(設定をかえることもできますが、ここでは割愛)。

最初に保存先に指定したところと同じ場所を指定して(ウィンドウには既にあるimagesフォルダが見えている状態で)、2度目以降は保存するといいです。

[Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする

いかがでしたか?
初めは少し複雑に感じるかもしれませんが、デザインからコーディングに移る際には必須の作業です。スライスが効率よくできると、あとのコーディング作業にもとてもスムーズに移行できますので、ぜひ身に付けてくださいね。

それでは、お疲れ様でした!

関連記事
このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

No title

とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。

コメントありがとうございました!

履歴書の見本さま、読んでいただきありがとうございました^^
今後ともどうぞよろしくお願いします!

No title

スライスはわかるんですが、その先のCSS組立については誰も書いてくれないんですよね…
だからスライスは使いません。
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。