スライスの便利な書き出し方法

スライスの便利な書き出し方法 Design

Photoshopで「Web用に保存」とすると、スライスした画像を自動で読み取り書き出してくれる、そんな便利な機能があるのはみなさんもちろんご存知だと思います。
ただ、そうやってしまうと意図しないimageフォルダが作られて、しかもなんか「_01」のような番号までついてしまうやん!?って私は以前そうなってしまっていました…。いちいち各ファイルの名前を変えるのも面倒ですよね。

なので今回はめんどくさくなくて済む方法を書いておきます!

スライス画像の名前を一括で設定する場合

「Web用に保存」を選択すると、各スライス場像が選択できるウィンドウが表示されますよね。右側に拡張子などの設定ができる箇所があるのですが、赤丸の部分をクリックしてみると…

Web用に保存ウィンドウの画像

色々メニューが出てきます。
今は「出力設定の編集」を選択してみます。

出力設定の編集部分の画像

実はここで各書き出し形式に対応した設定の編集が可能になっています。
今回はスライスの画像ファイルの設定を変更したいので、デフォルトだと「HTML」になっている部分をクリックし、「ファイルの保存」を選択します。

出力設定の編集ウィンドウの画像

書き出す画像がたくさんあって、一括でファイル名などを変更したい場合などはここで設定してあげると便利です!
ロールオーバーで使う画像だったりとかすると、ちゃんとそれ用に名前つけてくれるので、わざわざ後から名前を変更する手間が省けます。こりゃ便利!Σ(@ω@;)

ちなみに、

出力設定のウィンドウ画像その2

この赤枠内の箇所で、保存した時にimageフォルダを作成するかどうか選択できます。
フォルダの名前の変更も可能です!

こんな感じで設定してあげると、画像が多い場合などはとっても便利になりますよ〜〜〜

とは言っても、私の場合だとバナーのサイズごとに名前を変更しなければいけないので、そこの設定方法なども記載しますね!

スライス画像ごとに名前を設定する方法

スライスした画像の左上に、青っぽい部分があると思います。スライス番号とリンクしている箇所なのですが、ここをスライスツールを持ったまま右クリックしてみると…

スライスオプションが表示されている画像

こんな風にメニューが表示されます。
ここの、「スライスオプションを編集」をクリックしてみてください!

スライスオプションの設定画面の画像

このウィンドウが出ると思います。

スライスの種類は「イメージ」のまま、

  • URL
  • target
  • テキスト
  • alt

などの設定も可能なので、必要であればしておきましょう!

ここの部分で名前を設定しておくと、最初に書いた出力設定より優先して書き出してくれます。とても重宝している機能の一つですね。

まとめ!

バナーを実際に作るにあたって、前任のデザイナーさんが残してくださっていたテンプレートや設定などそのまま使用していたので、なぜ勝手に名前をつけてくれちゃっているのか結構謎だったのですが、色々試しているうちに発見できました。

私個人でスライスする時ってあまり深く考えないでバーっと書き出してしまっていたのですが、これからの現場では少しでも自分がわかりやすく、他の人にもわかりやすいような保存方法・命名などするように努力します(`・ω・´)

Photoshop、奥が深いです…(・´ェ`・)

コメント