元のPSDファイルを紛失したスプライト画像の位置を移動する方法

PSDファイルとは

PSDファイルとはPhotoshop Documentの略で、要するにPhotoshop形式のファイルである。

最近だとSketchというソフトで作成した.sketchファイルが多くなってきたが、古い元画像ファイルの大半はPSDファイルだ。

PSDファイルを紛失したスプライト画像

Web業界の人間はファイルの管理が甘いので、画像の元ファイルを紛失することが多い。(個人の意見です)

特にCSSスプライト画像の元ファイルの紛失が多い。

CSSスプライトは画像内の画像の入れ替わりや一部が未使用になることがあるため、変更がほかの画像ファイルよりも発生しやすい。

そんなときにPhotoshopの選択ツールで画像を選択して削除や移動を行うケースがあるのだが、これはやってはいけない。

選択ツールを使用してはいけない理由

選択ツールだと画像を正しく選択できているとは限らない。

例えばこのようなドロップシャドウがかかっている画像ではどこまでが画像なのかの境界が目視だとわかりづらく、選択ツールで正確に範囲を切り取るのは難しい。
ドロップシャドウがかかっている画像ではどこまでが画像なのかの境界が目視だとわかりづらく、選択ツールで正確に範囲を切り取るのは難しい

自動選択ツールを使う

Photoshopの自動選択ツールを使えばスプライト画像をきれいに切り抜くことができる。

SketchにもMagic Wandという自動選択ツールのようなものがあるがPhotoshopと同等のことはできない。

やり方はまず画像を開く。画像がインデックスでレイヤーにロックがかかっている場合はイメージ=>モード=>RGBカラーに変換してからロックを解除する。

次に自動選択ツールを選択して許容値255、アンチエイリアスと隣接のチェックをオンにする。自動選択ツールを選択して許容値255、アンチエイリアスと隣接のチェックをオンにする

あとは画像のなるべく色の濃い箇所をクリックして選択するだけだ。

切り抜く際はカット(Command + X)では貼り付けたときにレイヤーの位置が変わってしまうので、レイヤー=>新規=>選択範囲をカットしたレイヤー(Command + Shift + J)を使用したほうが良い。

スプライト画像のサンプルをダウンロード