Photoshopのスライスツールで書き出しする方法をお探しですね。
広告
PhotoshopのスライスツールでWebデザインの画像を切り出す方法
Photoshopで作ったWebデザインをコーディング担当者に渡すとき、ボタンやバナー、背景画像などをどうやって切り出せばいいか迷ったことはありませんか？スライスツールを使えば、1枚のデザインデータから必要な部分だけをサクッと分割して、画像としてまとめて書き出せるんです。
この記事では、Photoshopのスライスツールの基本的な使い方から、書き出すときの設定、コーディング前にチェックしておきたいポイントまで、初心者の方にも分かりやすく解説していきます。
1. Photoshopのスライスツールって何？なぜWebデザインで使うの？
Photoshopのスライスツールは、デザインデータの好きな範囲を「スライス」として区切って、それぞれを別々の画像ファイルとして保存できる機能です。
Webデザインのカンプには、ヘッダー、ロゴ、ボタン、アイコン、メインビジュアル、バナーなど、いろんなパーツが入っていますよね。
スライスツールを使えば、これらのパーツを必要な単位でサクサク分割して、コーディングで使いやすい画像素材として整理できるんです。
特に便利なのが、1枚のPSDファイルから複数の画像を一気に書き出したいとき。
例えば、同じページ内にあるバナーや装飾を一括で画像化したい場合、いちいち範囲選択してコピーするより断然ラクです。
範囲をきっちり指定できるので、余白を取りすぎたり、切り抜き位置がズレたりするミスも防げます。
ただし注意したいのは、今どきのWeb制作では、すべてのパーツを画像にするわけじゃないってこと。
テキストはHTMLとCSSで表現しますし、ボタンの背景色や角丸、影なんかもCSSで作るのが一般的です。
スライスツールは「デザイン全体を画像にする道具」じゃなくて、「画像として必要な部分だけを正しく切り出すお助けツール」って考えると、使い方を間違えにくくなります。
コーディング準備で大事なのは、画像として書き出すものとCSSで再現するものを事前に分けておくこと。
ロゴ、写真、複雑な装飾、イラスト、背景画像などは画像化の候補になります。
一方、見出しテキスト、シンプルなボタン、罫線、単純なグラデーションなどは、CSSで表現した方が軽くて後から修正もしやすいんです。
この判断をしてからスライスを作れば、無駄な画像を増やさず、コーディングしやすい素材をバッチリ準備できます。
2. スライスする前に整えておきたいPSDデータと画像化する範囲の決め方
スライス作業に入る前に、Photoshopのデザインデータを整理しておくことがすごく大事です。
レイヤー名が「レイヤー1」「レイヤー2」みたいな状態だったり、使ってないレイヤーがゴチャゴチャ残ってたりすると、どこを画像として切り出せばいいのか分かりにくくなっちゃいます。
まずは、ロゴ、画像、アイコン、背景、テキスト、共通パーツなど、レイヤーやグループに分かりやすい名前をつけておきましょう。
コーディング担当者に渡すときも、レイヤーがきちんと整理されてるだけで確認作業がめちゃくちゃスムーズになります。
次に、どこを画像として書き出すか決めていきます。
Webページって、見た目が同じでも作り方が違うことがあるんです。
例えば、装飾付きのボタンを画像として書き出すこともできますが、シンプルな角丸や背景色ならCSSで作った方が表示速度も速いし、レスポンシブ対応もしやすいです。
逆に、写真や複雑なイラスト、質感のある背景なんかはCSSで再現しにくいので、画像として書き出すのが自然ですね。
スライス範囲を決めるときは、余白の扱いにも気をつけましょう。
画像の周りに不要な透明余白が入ってると、CSSで配置したときに意図しないズレが起きちゃいます。
でも、影やぼかしがあるパーツは、見た目が切れないように少し余裕を持たせる必要があります。
ただ見えてる範囲だけを囲むんじゃなくて、実際にHTMLとCSSで配置したときに扱いやすいサイズになってるかを考えることが大切です。
スライス前に確認しておきたいポイントは、こんな感じです。
– 画像として必要なパーツと、CSSで再現するパーツを分ける
– レイヤーやグループ名を整理して、探しやすくしておく
– 余白、影、透明部分を含めるかどうかを事前に決める
– Retina対応が必要かどうかを確認する
Retina対応っていうのは、高解像度ディスプレイでも画像がぼやけないように、表示サイズの2倍くらいの画像を用意する考え方です。
例えば、Web上で幅100pxで表示するアイコンを、実際には幅200pxの画像で書き出してCSSで100px表示にする、みたいな感じ。
案件やサイトによって必要な対応は変わるので、スライス前に「1倍画像だけでいいのか」「@2x画像も必要なのか」を確認しておくと、後から書き出し直す手間が省けます。
3. スライスツールで画像を分割する具体的な手順
Photoshopでスライスツールを使うには、ツールバーから「スライスツール」を選びます。
見当たらない場合は、切り抜きツールのグループの中に隠れてることが多いので、ツールアイコンを長押しして探してみてください。
スライスツールを選んだら、画像として書き出したい範囲をドラッグして囲みます。
作った範囲はスライスとして認識されて、後で個別の画像として書き出せるようになります。
正確な位置で切り出したいときは、ガイドを活用すると便利です。
Photoshopの定規を表示して、カンプ上にガイドを引いておくと、スライスの境界線をピシッと揃えやすくなります。
レイアウトのカラム幅や余白、パーツの端に合わせてガイドを配置しておけば、複数のスライスを作るときもズレを防げます。
デザインカンプの寸法に沿って正確に画像を書き出すには、感覚でドラッグするより、ガイドを基準にした方が安心です。
スライスを作った後は、「スライス選択ツール」で範囲の調整や名前の設定をします。
スライスをダブルクリックすると、スライスオプションが開けます。
ここで画像のファイル名を指定しておくと、書き出した後のファイル管理がめちゃくちゃ楽になります。
例えば、ロゴなら「logo」、メインビジュアルなら「mainvisual」、お問い合わせボタンなら「btn_contact」みたいに、何に使うか分かる名前にしておくとコーディングのとき迷いません。
また、デザイン全体を複数の範囲に均等分割したいときは、スライスの分割機能を使う方法もあります。
作ったスライスを選択して、横方向や縦方向に指定した数で分割すると、バナー一覧や画像グリッドみたいなパーツをまとめて切り出しやすくなります。
ただし、自動的に細かく分割しすぎると不要な画像まで作られちゃうことがあるので、必要な範囲だけをユーザースライスとして作る意識が大切です。
スライス作成のときに押さえておきたい流れは、こんな感じです。
– スライスツールを選んで、書き出したい範囲をドラッグする
– 必要に応じてガイドを使って、境界線を正確に合わせる
– スライス選択ツールでサイズや位置を微調整する
– スライスオプションで分かりやすいファイル名をつける
ここで注意したいのが、自動スライスとユーザースライスの違い。
自分で作ったスライスは「ユーザースライス」って呼ばれて、書き出し対象として管理しやすいんです。
一方、Photoshopが自動的に補完するスライスも表示されることがあります。
書き出すときに不要なファイルが大量に作られちゃう原因になるので、どのスライスを書き出すのかを確認しながら作業しましょう。
4. 画像の書き出し設定とコーディング前の最終確認
スライスを作ったら、いよいよ画像を書き出します。
Photoshopでは「ファイル」メニューから「書き出し」または「Web用に保存（従来）」を選んで、スライス単位で画像を書き出す方法がよく使われます。
バージョンによってメニュー名や場所が違うことがありますが、スライスをまとめて書き出す場合は「Web用に保存（従来）」が使われることが多いです。
書き出し画面では、画像形式や画質、透明部分の有無、書き出すスライスの範囲を確認します。
画像形式は、用途に合わせて選ぶことがめちゃくちゃ重要です。
写真やグラデーションが多い画像はJPEGが向いてます。
透明背景が必要なロゴやアイコン、装飾パーツはPNGが適してます。
アニメーションが必要な場合はGIFが使われることもありますが、最近はCSSアニメーションや動画形式が選ばれるケースも多いので、目的に合わせて判断しましょう。
画像形式を間違えると、ファイルサイズが無駄に大きくなったり、透明部分が消えちゃったりするので注意です。
書き出すときは、不要なスライスまで出力しない設定にすることも大事。
すべてのスライスを書き出すと、自動生成された不要な画像まで含まれちゃうことがあります。
必要なユーザースライスだけを書き出す、または選択したスライスのみを書き出す設定を確認しましょう。
書き出し先のフォルダも、コーディングで使いやすいように「images」や「img」などにまとめて、ファイル名は英数字とハイフン、アンダースコアを中心にすると扱いやすくなります。
書き出した後は、実際に作られた画像を確認します。
サイズが意図した通りか、余白が入りすぎてないか、影や装飾が切れてないか、透明背景が保たれてるかをチェックしましょう。
特に、PNGで書き出すべき画像をJPEGにしちゃうと透明部分が白くなって、デザインと合わなくなっちゃいます。
また、画質を下げすぎると写真が劣化するし、逆に高画質にしすぎるとファイルサイズが重くなります。
表示品質と読み込み速度のバランスを見ながら調整しましょう。
コーディング前の最終確認では、画像をただ書き出すだけじゃなくて、HTMLやCSSでどう使うかまで想定することが大切です。
背景画像として使うのか、imgタグで配置するのか、アイコンとしてCSSで読み込むのかによって、必要なサイズや余白の考え方が変わります。
ファイル名も、後から見て何に使うか分かる名前にしておくと、保守や修正がしやすくなります。
チームで作業してる場合は、命名ルールや画像フォルダの構成を事前に揃えておくと、実装時の混乱を防げます。
最後に、スライスツールは便利な機能ですが、今どきのWeb制作では万能じゃありません。
Photoshopには「書き出し形式」や「画像アセット生成」など、レイヤー単位で画像を書き出す方法もあります。
スライスツールは、カンプ上の見た目に沿って範囲指定したいときや、複数の画像をまとめて分割したいときに向いてます。
一方で、個別のレイヤーを正確に書き出したいときは、別の書き出し機能の方が効率的なこともあります。
目的に合わせて使い分けることで、Photoshopからコーディングへスムーズに移行できます。
PhotoshopのWebデザインをコーディングに渡す準備では、スライスツールで画像を分割して書き出す方法を理解しておくと、デザインデータから必要な素材を効率よく取り出せます。
大切なのは、何でもかんでも画像化するんじゃなくて、CSSで再現できるものと画像として必要なものをしっかり見極めること。
スライス範囲、ファイル名、画像形式、ファイルサイズまでちゃんと確認しておけば、実装しやすくて表示品質も保ちやすい素材を準備できます。
ぜひこの記事を参考に、スライスツールを使いこなしてみてくださいね！
広告
