プラカンブログSTAFF BLOG

2017.08.18

【Photoshop(フォトショップ)】スライスについて自分なりにまとめてみた。

はじめまして。
7月からプラカンの一員になりました、なかいです。未経験からのスタートで、毎日学ぶことが多すぎて目まぐるしく過ぎていきます・・・。
これから仕事もブログも精一杯頑張っていきたいと思います!

さて、今回はスライスについて自分なりに整理してみようと思いました。

プラカンに来る前、通っていた学校では、「スライスは現場でよく使いますよ~」と言われてましたが
なんてことないやろ、と軽く受け流していました。(ー。ー;)

ただ、実際作業していると「あれ、どうやるんだっけ・・・」と一人アタフタする羽目に。

今後焦ることないように、備忘録的にまとめます。
なのでこの記事は初心者向けです。どうかお手柔らかに。。。

そもそもスライスってなんだ・・・??

そこからかよ!と突っ込まれるかもしれないですが。(笑)
スライスとは、

一つのデザインデータをパーツごとに切り分けて個々のファイルとして保存出来ること

で、Web制作でよく使われます。

今回はPhotoshopで作ったナビボタンを切り出すことを想定して
やり方をできるだけ簡潔にまとめたいと思います。

その1 手動で作る

  1. スライスツールに切り替えます。(図1)
  2. スライスしたい部分をドラッグ。(図2)
  3. 大きさを調整する。

図1

図2

 

終わり。なんだ簡単じゃないか。

ところが、手動だからどうしてもずれてしまうことあると思います。
そういう細かい所気になっちゃいますよね。

その2 ガイドで作る

上のやり方だと綺麗にできない場合はガイドを引きます。

  1. まずは定規を出します。表示メニュー→定規(もしくはCtrl+R)
  2. 定規からガイドをドラッグして切り分けます。(図3)
  3. スライスツールを選んでガイドに沿ってスライスをクリック。(図4)

表示メニュー→新規ガイドを作成でpx指定してやれば正確にガイドが引けますね。

図3

図4

その3 レイヤーで作る

ちょっと、上手くガイド引けないよ
もっとシンプルなやり方ないの??あと綺麗にスライスしたいけど??

そんなときはこのやり方。

  1. 書き出したい部分をスマートオブジェクト化する。
  2. スライスしたい画像のレイヤーを選ぶ。
  3. レイヤーメニュー→レイヤーに基づく新規スライス

なんやこれ、めっちゃ便利!
使わない手はないですよ。奥さん。

※複数レイヤーあるものをスライスしたい場合は、スマートオブジェクト化しないとダメです。

書き出しのやり方

まず、書き出す画像に名前をつけます。
スライスツールを選択した状態で書き出したい画像の上でCtrl押しながらWクリック
(スライス選択ツールでも同じことができますが、わざわざ切り替えるのが面倒です!)

上のようにポップアップ出てきます。
書き出してから変えることももちろんできます、ここで画像名を変えちゃったほうがあとで直さなくてラクです。
寸法などの細かい変更もできちゃいます。

※その3のやり方はここでは寸法変更できません。

書き出してみます。

ファイル→書き出し→Web用に保存をクリック。
ショートカットキーはctrl+shift+Alt+S

ところがですよ、
デフォルトだとimagesフォルダが作られて、面倒なんです。
普段からどこのフォルダになんのファイルが入っているのか混乱することが多い身としては余計なお世話ですよ!(笑)

そこで・・・
Web用に保存の右上にある
最適化メニュー→出力設定の編集→セレクトボタンを開いて「ファイルの保存」を選択→画像をフォルダに保存のチェックを外します。

これで保存先にファイルだけが保存されます。

 

いかがだったでしょうか。
ただこの記事を書くにあたり、いろいろ調べてましたら、
最近はPhotoshopに「画像のアセット」という機能があることを知りました。

スライスについて書いといてなんですが、
正直いまはこっちのほうが便利なんじゃないかと思います。(笑)

またひとつ勉強しなきゃいけないことが増えました。ヽ(゚Д゚;)ノ!!

 

+dc(中)

この記事は、NAKAI が書きました。