BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. Photoshopの画像アセットの書き出し先を擬似的に変更する
by 漢ムラタ 漢ムラタ

Photoshopの画像アセットの書き出し先を擬似的に変更する

Photoshopの画像アセットの書き出し先を擬似的に変更する

こんにちは、最近20年振りにポケ●ンマスターを目指してマサラタウンにさよならバイバイしたポケモ●トレーナー(31)のムラタです。

最初に貰う一匹のみを鍛え抜き、酷使し続け、ただひたすらに効率のみを求めるプレイスタイルに心の汚れを感じます。

そんな少年の心を忘れた汚い●ケモンマスターからの今回の投稿はPhotoshopの「画像のアセット」で切り出される画像の出力先を「シンボリックリンク」を使って擬似的に変更させるというものです。

この記事読んでる人はだいたい「画像のアセット」がどんな機能なのか知っていると思いますが、一応ざっくり説明しておきます。

画像アセットとは

従来のスライスツールでの範囲を指定して書き出すのとは違い、レイヤー単位での書き出しとなり、レイヤー名に「parts.png」や「banner.jpg」といった具合に「画像名+拡張子」を指定しておくことで、その名前と拡張子で勝手に書きだしてくれます。

一度「画像アセット」を実行しておくと、今後は対象のレイヤーに変更があれば即座に前回書きだした画像にも変更が反映されるので、都度「画像アセット」を実行する必要はありません。

img01

ちなみにFireWorksでも書き出し時に「レイヤーからファイル」を選ぶことで同じようにレイヤー名で各ファイルをまとめて書き出すことができましたが、パーツごとの拡張子や画質などが設定できませんでしたし、書き出したくないパーツに関してはいちいち非表示にしておく必要がありました。

画像アセットの書き出し先

さて、ここからが本題ですが、画像アセットを使用した場合、書き出し先は現在作業しているファイルと同じフォルダ内に「作業ファイル名-assets」というフォルダを生成してその中に格納されます。

img02

この書き出し先は今のところ設定などはなく、変更することはできません。
なのでほとんどの人が書き出し先の「作業ファイル名-assets」から任意のフォルダへ書きだしたファイルを移すという作業が発生します。

1回だけならまだしも画像に修正があるたびに生成したファイルを移動させるのは地味に面倒くさいですよね。

シンボリックリンクの生成

では「シンボリックリンク」を使って書き出し先を擬似的に変更していきましょう。

シンボリックリンクって?

そもそもシンボリックリンクって何?って話ですが、正直自分も詳しくないので各自ググってください。たぶんよくわからないと思います。

「ショートカット」と同じように特定のファイルやディレクトリへのパスを記述したものですが、ショートカットはそのパスへ移動するだけなのに対してシンボリックリンクはそのパスのファイルやディレクトリそのものとして扱える。ということだと自分は認識してます。違ってたらごめんなさい。

img03

ちなみにシンボリックリンクはwindows Vista以降のOSなら作成可能なようなので、大体の人は問題ないと思います。

作成の流れ

では早速シンボリックリンクを作成していきましょう。

下記のディレクトリ構成を例として「/works/top-assets」にアセットされた画像が「/assets/img/top」に入るようにします。

photoshopが生成した「top-assets」フォルダが既にある場合は一旦削除しておいてください。

img04

シンボリックリンクを作成するには「コマンドプロンプト」を管理者権限で開く必要があります。

コマンドプロンプトが開いたら
「mklink /d “アセットで書き出されるフォルダのパス” “シンボリックリンクさせたいフォルダのパス”」
とします。

なので今回のディレクトリ構成ならこうなります。

パスを手打ちで入力するのはパスが長いと面倒だし間違えると困るので、コピペするのがいいでしょう。

ただコマンドプロンプトでは「Ctrl+V」で貼り付けることができません。右クリックから「貼り付け」を実行できます。

上記コマンドを叩くと
D:\works\htdocs\test\works\test-assets <<==>> D:\works\htdocs\test\assets\img\top のシンボリックリンクが作成されました
とメッセージが出るはずです。これでシンボリックリンクの作成は完了です。

command

シンボリックリンクできているか確認

では「D:\works\htdocs\test\works\」に「test-assets」フォルダが生成されているか、test.psdからアセットした画像が「D:\works\htdocs\test\assets\img\top」に入るか確認してみましょう。

ということで早速top.psdを開き画像をアセットしてみます。
そして「D:\works\htdocs\test\assets\img\top」の方を見ると・・・

img05

ちゃんと入っています!これで毎回書き出す度にファイルを移す必要がなくなりましたね。

終わりに

この記事を書いていて思ったのですが、アセットした画像を全て同じディレクトリに入れるなら良いのですが、パーツによっては「top」だったり共通画像フォルダの「common」だったりするわけで、そういった場合だと結局今回のような方法は逆に使えないですよね・・・うーん。

結局のところ真面目に毎回ファイルを移動させるか、そもそも画像のアセットを使わずにパーツごとにクイック書き出しやスライスツールなどで任意のディレクトリに書き出すのが正解なのでしょうか。

とにかくシンボリックリンクについては今回以外にも色々活用できそうなので、調べてみるといいかもですね。

ページの先頭に戻る