フォトショップ のスライス(書き出し)方法

Photoshop

フォトショップ のスライス(書き出し)方法

この記事ではフォトショップのスライス方法をまとめておきます。

私が普段使う方法は簡単で便利な「アセット書き出し」です!

最初は王道の「スライスツール」を使っていましたが、時間がかかるのと、使っていくうちに不便さにも気づいたので今ではあまり使いません。そのことも書きますね。

以上を踏まえて、2つの方法を紹介します。
それぞれ見ていきましょう〜!

 

アセット書き出し

先に記事にしたXDの方法と似ています。

流れとしては、レイヤー名の後ろに書き出したい拡張子を付けて、「ファイル」>「生成」>「画像アセット」で書き出します。
至って簡単!

書き出す形式としてよく使うのはこの辺りです↓

  • JPG
  • PNG
  • SVG(CC2014以降)

SVGも対応しているのは嬉しいですね^^

 

手順

書き出したい対象のレイヤーを選択します。

 

小数点がついていないか確認

まず画像の情報を確認します。

もし対象の位置(X・Y)、幅・高さ(W・H)の数値に小数点がついていれば整数にしておきます。
ついていることによって1px余分に大きくなることがあるからです。

もし、書き出したあと大きさの数値がおかしかったら最初に小数点がついていないか確認しましょう!

 

名前を変える

レイヤー名が書き出し後のファイル名になります。
名前はダブルクリックで変えられます!

XDの書き出しと違う点は名前の後ろに拡張子を付ける点です。
上の例ではJPG形式でかつ画質は100%の意味で「.jpg10」としています。

以下名前の付け方の規則について簡単に書きます!

 

規則

・サイズを指定する場合

名前の先頭にサイズを記載し、半角スペースを空けてファイル名を入力します。(等倍の場合は指定する必要なし)

200% cont_img01.jpg10 →データ上に配置されている2倍サイズで画質100%のJPG画像

実務ではRetinaディスプレイ対応のため2倍で書き出すことが多いです。
ただ、2倍サイズが元画像より大きくなる場合はボヤけるので等倍にすることもあります。
また、スマホデザインで最初から2倍サイズ(750pxなど)で作られている場合も等倍で書き出します。

 

・書き出し形式

拡張子の後ろに数字を指定します。

JPG

  • cont_img01.jpg10→画質100%のJPG画像
  • cont_img01.jpg8→画質80%のJPG画像

指定がない限り一番高い画質100%で良いと思います。
ちなみに何も指定しない場合90%画質で書き出されるみたいなので、「.jpg10」は忘れず指定しましょう!

 

PNG

  • cont_img01.png8→8bitのPNG画像
  • cont_img01.png24→24bitのPNG画像
  • cont_img01.png32→32bitのPNG画像

私はあまり指定したことはなかったです。
ちなみに指定しない場合32bit画像で書き出されるみたいです。

 

SVG

SVGはシンプルに拡張子をつけるだけです。

  • icn_pen01.svg

 

・複数書き出す場合

1つの画像に対して複数書き出したい場合は「,(カンマ)」で区切ります。

  • 200% cont_img01.jpg10, cont_img01.jpg10

Retinaディスプレイ対応で使うことがあるかも?

 

アセットを生成

一通り名前を変えられたら「ファイル」>「生成」>「画像アセット」にチェックを入れます。

一度チェックを入れたら拡張子をつけたレイヤー名が増えるたびに自動で書き出してくれます。

途中でたまに反応しない時がありますが、そんなときはチェックを外す→上書き保存→再度チェックを入れ直すと良いです◎

 

保存先を確認

データファイルがある階層に自動で「assetsフォルダ」が作られ、その中にファイルが入っています。

ここで1つ注意点!!
書き出されたファイルは自動で更新されるのでこのフォルダ内でファイルを手直ししても無駄になってしまいます。なので別の場所にコピペする必要があります。

私の場合は書き出し専用フォルダの中に案件ごとにフォルダを作り、その中に保存しています。

 

書き出した画像を確認

書き出した画像を確認し、問題があれば修正します。

詳しくはこの記事に書いています↓

 

【補足】画像にマスクがかかっている場合

もし画像にマスクがかかっていたらマスクごとグループにして、そのグループ名を変えます。

複数のレイヤーをひとかたまりで書き出したい時も同様にグループにして書き出します。

アセット書き出しについては以上です。

 

スライスツール

始めに、今となってはあまり使わない理由を書いておきます。理由は2点あります。
もちろん場合によっては使うこともあります!(大きさを揃えたい時など)

まぁ、アセットが便利すぎて使わなくなったというのもあるのですが( ̄▽ ̄;)

 

あまり使わない理由

理由01

これが一番の理由なのですが、フォトショップではアートボードの縦横どちらかが8,192px以上になるとデザイン通りの大きさでスライスできないという謎の仕様(バグ?)になっています。(2022年5月現在)

初めの頃はなぜ書き出した画像のサイズが変わっているのか分からず、この理由を知ったとき「え、何このバグ!!」と思いました^^;

 

試しに縦サイズ8200pxのアートボードでスライスしてみますね↓

以下は「web用に保存」を押した後の詳細設定画面ですが、パーセントという項目が100%になっていないことがわかります。

特に警告もないので見落としがちなのですがこの部分が100%でないと書き出し後のサイズが変わってしまいます。

ちなみに8,192pxなんて数値はLPやSPのデザインでは超えることがザラにあります。
では対処法はというと、デザインファイルを複製して部分的に分けるなどしてスライスすることです。

ただ、ここから注意なのですが、スライスツール でのスライスの場合、画像を2倍サイズにする際、まずアートボード自体を2倍にしてから書き出します。なので2倍にした上で8,192pxに収まるようにしないといけません。

こう考えると、スライスツールでのスライスはまずデザインを分割するのが必須といえます。

という訳で、もしpsd形式でデザインがきたらまずサイズに注意です!

ちなみにアセットでは8,192pxを超えていても問題ないです^^
ただ、容量が大きいと動作は重くなりますが・・・

 

理由02

2つ目の理由は「シンプルに時間がかかる」からです。

スライス方法は下で説明しますがスライス枠を作った後、場合によってはスライスする対象以外のレイヤーを目隠しする必要があります。(下に背景があったり)
目隠しをしたり、外したりとこの作業が面倒なので効率よくスライスをすることが難しいです。

その点、アセット書き出しはレイヤーの重なりなど気にしなくていいので楽です^^

こういった理由からスライスツール を使ったほうがいい場合以外はアセット書き出しにしています。
以下から簡単にスライスツール を使ってのスライス方法を書いていきます。

 

方法

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

スライスツール を使う場合、「レイヤーに基づく新規スライス」というものをベースにします。
手順を説明しますね!

1.対象を選択

 

2.「レイヤー」>「レイヤーに基づく新規スライス」をクリック

すると、レイヤーの外側を縁取ってスライス枠が作られます。

 

3.「ユーザー定義スライスに変更」をクリック

このままではスライスのサイズが変えられないので、右クリック→「ユーザー定義スライスに変更」をクリックします。(スライスツールの状態で)

 

4.名前を変える・必要に応じてサイズ調整

最後の「スライス選択ツール」に切り替えます。

対象の上でダブルクリックすると、オプションのポップが出てきます。
ここで任意の名前に変えます。

この時点でもし横・高さのサイズが奇数だったら偶数の数値に繰り上げておきます。

 

5.OKを押してWeb用に保存

名前を変えて、サイズも調整したらOKを押します。

すると、元の画面に戻るので「Web用に保存」をします!
ショートカットで「command+shift+option+S」です。

 

6.保存形式を選択

JPGかPNGを選択します。SVGはないのでアセット書き出しにしましょう。PNG-24だと透明に対応しています。

JPGの場合は画質を100にしておくのを忘れずに!!

 

と、ここまで説明してきましたがこの作業を何回もするのは面倒ですよね。
なので共通する2.3の部分をアクションとして登録しておくと便利です!

「アクション」とは一連の動作を登録できて、動画を再生するように自動で作業を行ってくれる機能です。私は2.3の部分をF1キーに登録していました。

スライスに限らずこのように同じ動作を何度もする場合とても便利です◎
(ここではアクションの説明は割愛させていただきます)

 

スライスのサイズを合わせる方法

主にスライスツールを使う場面は画像のサイズを合わせたい時ですが、一番大きい画像のスライス枠を作ってそれを複製すると楽です。
その方法も書いておきますね^^

ちなみに「使わない理由01」で書きましたが、画像を2倍サイズで書き出す場合、実務ではこの前にアートボードを2倍にしておきます。

 

1.「レイヤーに基づく新規スライス」で一番大きい画像のスライス枠をつくる

 

2.「スライス選択ツール」に持ち替え、まず左右にコピーする

スライス枠を選択した上で、「option+shift」を押しながら右にドラッグします。もしうまくいかない場合、shiftはタイミングをずらして少し後に押してください。

optionを押しながらドラッグで複製でき、更にshiftを加えることで水平に移動できます。

 

3.2つとも選択して下にも複製する

shiftを押しながらクリックすることで複数選択できます。

 

あとは同様に「option+shift」を押しながら下にドラッグします。たくさんある場合はある程度ひとかたまりで複製すると楽です^^

※図形の中心がずれていますが、実務では揃えます

 

4.それぞれの名前を変える

あとは、それぞれダブルクリックで名前を変えて「Web用に保存」すれば終わりです!

という具合に、たくさん画像があってサイズを合わせるときの流れはこんな感じです。

 

まとめ

以上、フォトショップのスライス方法「アセット書き出し」・「スライスツール 」について書きました。
参考になれば幸いです^^

コメント

タイトルとURLをコピーしました