【 Photoshop 】 スライスツールで画像を書き出す FirE♯598

Photoshopを基礎から復習していきます。
今回は、「スライスして画像として書き出す」をやっていきます。

【 使いどころ 】

Photoshopでデザインカンプが完成したら、コーディング用に画像として使う素材を切り出す必要があります。

その際にスライスツールを使って切り出していきます。

今回は、背景を透過させるためにPNGファイルでの書き出しをやります。

アイコンなどはPNGで背景を透過させておかないと使いにくいですね。

【 スライスツール 】

メニュバーの切り抜きツールを長押しすると、スライスツールが出てきます。

① 切り抜く画像をドラッグして選択

枠線が、茶色いバウンディングボックスのような状態では、切り抜く範囲の修正ができます。
別の箇所を選択すると、青線になりますので、
もう一度切り抜く範囲を調整したい場合は、[スライス選択ツール]に
持ち替えれば可能です。

② 背景を透過する

背景に白を設定していることが多いと思います。
右下のレイヤーパネルから、[背景] の目のマークをクリックして、
[背景]を見えないようにしましょう。

[背景]を透過するとこのような表示なります。

③ 書き出し

[ファイル] → [書き出し] → [Web用に保存]　と進みましょう。

[Web用に保存] をクリックすると、設定画面が開きます。

タブメニューから、[元画像] を選択します。

④ 画像形式を選択 

書き出す画像のファイル形式を選択します。
今回は、背景透過をしたいので、PNG-8 を選択します。

単色なのでPNG-8で問題ありません。

⑤ 保存  [選択したスライス]を指定する

保存をクリックすると、書き出す場所を指定する画面に移ります。

この際に、書き出しの対象として、[選択したスライス] を選択しましょう。

⑥ 保存するとimagesフォルダができる

今回はデスクトップに保存したので、デスクトップに、[imagesフォルダ]が自動生成されて、その中に、[選択したスライス] がずべて画像として保存されます。

【 まとめ 】

Photoshopのスライスについて解説しました。

基礎は使う頻度の高い処理です。

ここをいかに直感的に作業できるのかは、作業効率に大きく影響するでしょう。

ここを、疎かにせずに、歩みましょう。