コーダーのためのPhotoshopスライス効率化

  • 公開日:

この記事の目次

はじめに

コーダーのお仕事は、HTML・CSS・JavaScriptなどを使ってWebサイトを構築するだけではありません。PhotoshopやIllustratorで納品されたWebデザインのデータから画像を書き出す作業もコーダーのお仕事です。Illustratorでデザインが納品されることも時々ありますが、Photoshopでデザインデータが来る場合が多いです。

今回は、Photoshopのスライス作業を効率化する方法をいくつかご紹介します。

この記事では、OSはWindows、PhotoshopのバージョンはCS6を基本に解説していきます。ちなみに、2017年1月に公開されたアンケート調査によると、23.2%のユーザーがPhotoshop CS6をメインで使っているようです。私も職場ではCS6を使っています。

よく使う操作のショートカットキーを覚える

どのソフトウェアでもそうですが、よく使う操作をショートカットキーでおこなうだけで作業効率がアップします。

表示の拡大・縮小

表示の拡大・縮小は非常によく使います。

  • 表示倍率を100%にする:ctrl + 1
  • 画面サイズに合わせる:ctrl + 0
  • 拡大する:ctrl + ;
  • 縮小する:ctrl + –

レイヤーパネルの操作

altキーを押しながらレイヤーの表示アイコン(目のアイコン)をクリックすると、対象レイヤー以外の表示・非表示を切り替えることができます。この操作は、画像を透過PNGで書き出したい時に便利です。

ショートカットキーではありませんが、レイヤーパネルのエリアを広くして使いやすいようにワークスペースをカスタマイズすることをおすすめします。

スライスツールを使ったスライス

画像書き出ししたい部分をスライスツールでドラッグすると、スライスが作成されます。

スライスツールを使いやすくする設定

[表示]→[エクストラ]にチェックを入れます。また、[表示]→[表示・非表示]から、ガイド・スマートガイド・スライスにチェックを入れます。

[表示]→[スナップ]にチェックを入れます。また、[表示]→[スナップ]先から[ガイド]にチェックを入れます。

ツールの切り替え

Photoshopのツールはショートカットで簡単に切り替えることができます。画像の書き出し作業で主に使うのは「移動ツール」と「スライスツール(スライス選択ツール)」の2種類だけなので、簡単に覚えられます。

  • 移動ツール:V
  • スライスツール:C

スライスツールでCtrlキーを押すと、スライス選択ツールになります。また、スライス選択ツールでスライスをダブルクリックすると、[スライスオプション]ダイアログが表示されます。

「レイヤーに基づく新規スライス」でスライス

「レイヤーに基づく新規スライス」を使えば正確にスライスしてくれるので、スライスが1pxズレているなんてことは起こりません。また、ドロップシャドウや光彩(外側)といったレイヤースタイルが適用されてて肉眼では判別しづらい部分も正確にスライスできます。

ショートカットのカスタマイズ

初期設定では「レイヤーに基づく新規スライス」のショートカットキーはありません。そこで、[編集]→[キーボードショートカット]を選択して、「レイヤーに基づく新規スライス」にショートカットキーを割り当てます。私の場合、1つのキーで「レイヤーに基づく新規スライス」を使えるようにしたかったので、「F12」を割り当てています。

まとめ

Photoshop CC以降では、「画像アセットの生成」という機能が追加されました。「画像アセットの生成」については、『ベテランほど知らずに損してるPhotoshopの新常識(4)画像アセットの生成』が参考になります。

ただ、私のように職場の事情などでPhotoshop CCが使えない時は、スライスで画像を書き出すしかありません。そんな時に今回ご紹介した方法がお役に立てれば嬉しいです。