【Photoshop】「画像アセットの生成」の書き出し先を変更する方法

Web制作を行うにあたって、Photoshopでデザインを作っている方は多いかと思います。デザインが完成したら、コーディングを行う前に行うこととして画像の書き出しがあります。昔はスライスを使って画像の書き出しを行っていましたが、今は「画像アセット」から生成するのが主流かと思います。今日はこの「画像アセット」の書き出し先を変更する設定について書きたいと思います。

「画像アセットの生成」の書き出し先は固定されている

便利な画像アセットですが、この機能で書き出される画像の場所は、PSDファイルと同階層に固定されています。例えばdesignというフォルダにpsdファイルがあれば、生成される画像が格納されるフォルダもそのpsdファイルと同じ階層に生成されるんですよね。

公開用のimgフォルダに画像アセットを生成できない問題

デザインからコーディングまでのサイト制作を一人で行う場合、まずはローカル環境でデザインを作るかと思います。で、デザインが完成していざコーディングを行うにあたっては、例えば「public」という別のフォルダを作り、その中で実際に公開するファイルを作っていく方が多いのではないでしょうか。

でも上に書いた通り、画像アセットで生成されるフォルダはPSDファイルがある場所になるので、生成された画像ファイルを「pubic」の中に用意した画像用フォルダの中に移動させる必要が出てくるんですよね。

図で表すとこんな感じです。

この作業が2度手間だなと感じました。出来れば実際に公開する用の画像フォルダの中に画像が生成される様にしたいですよね。

「シンボリックリンク」という裏技

ここで登場するのが「シンボリックリンク」という仕組みです(Windowsに限定して話を進めます)。このシンボリックリンクとは、あるファイルから特定のファイルやフォルダを参照できる様にする仕組みのことです。詳しい説明は調べていただければと思うのですが、ざっくりショートカットに近い仕組みの様です。これを使うと、擬似的に「画像アセットの生成」の書き出し先を変更することが可能になります

シンボリックリンク作成前にやっておくこと

シンボリックリンクを作成する前にやっておかないといけないことが2つあります。

①Windowsの権限を開発者モードにする

「シンボリックリンク」の作成にはコマンドプロンプトを使用するのですが、開発者モードでないとコマンドプロンプトで命令を出すことが出来ません。Windowsの設定→「更新とセキュリティ」→「開発者向け」と進んで「開発者モード」をオンにします。

これをやらないと「この操作を実行するための十分な特権がありません。」というエラーが出ます。

②書き出し先フォルダを削除しておく

どのフォルダに書き出すかを決めたら、そのフォルダまでのパスを控えた後、フォルダ自体を一旦削除します。例えば以下の場合であれば、「img」フォルダですね。シンボリックリンクの作成では、リンク先のフォルダを生成する指示を出すので、既にフォルダがあるとエラーが出てしまうんですよね。そもそもフォルダを作っていなければ、この項目はスルーしてもらって大丈夫です!

これをやらないと「既に存在するファイルを作成することはできません。」というエラーが出ます。

シンボリックリンクを作成する手順

では準備が整ったところで、具体的にシンボリックリンクを作成していきたいと思います。シンボリックリンクの作成自体はとても簡単です!まず、[Windowsボタン]+[R]キーを押し、て「ファイル名を指定して実行」ダイアログを開きます。表示された検索窓で「cmd」と入力して、コマンドプロンプトを立ち上げます。

コマンドプロンプトでは、

mklink /d [画像を置きたい場所] [画像アセットが生成される場所]
と書きます。例えば以下の様なフォルダ構成だった場合、

次の様に入力します。
mklink /d D:\デスクトップ\public\assets\img D:\デスクトップ\design\index-assets

Cドライブにデータを置いている方は頭の「D」は「C」に差し替えてくださいね。また、以下の3箇所には半角スペースが必要なので気をつけましょう。

シンボリックリンクが作成された!

構文に問題がなければ次の様に表示されて、シンボリックリンクが作成されます。

実際にフォルダを確認してみるとショートカットアイコンの様なフォルダが生成されているのが分かります。

シンボリックリンクの動作確認

では希望する画像フォルダにちゃんと書き出しが行われているか確認してみましょう。拡張子が付いたファイルやフォルダがある状態で、生成→画像アセットへと進みます。

すると、画像アセット機能で生成された画像ファイルが、シンボリックで作ったフォルダの中にも生成されていることが分かります!やった!

おわりに

これで画像アセットから生成された画像ファイルを公開用フォルダにイチイチ移動させる必要がなくなりました。PSDファイル内で画像ファイルをちょこちょこ編集することはよくあると思いますが、コーディングの際に差分を気にせず作業出来るとストレスも軽減されますよね。是非一度試してみてください。

以上、どなたかのお役に立てれば幸いです!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です