Photoshop スライス機能の基礎

スライスとは?

Webサイトを制作する時の必須作業とも言える「スライス作業」。

Webデザイナーさんがページ全体のデザインをして、次にコーディングをする人がボタンやアイコンといったパーツを切り出していく、そのときに使うのが「スライス」機能です。

FireworksやIllustratorにもスライス機能がついていますが、ここではPhotoshopのスライス機能の使い方をまとめてみます。

作業環境はPhotoshop CS5(Windows版)です

ドラッグしてスライスを作成する方法

フォトショップのサイドバーにある、「スライスツール」を選択して、スライスしたい部分をドラッグします。

スライスできました!

スライスした部分をダブルクリックすると、スライスオプションが表示されます。

該当のスライスを選択している状態でないとダブルクリックがききません。スライスツール選択時は、Ctrlキーを押しながらダブルクリックをするか、「スライス選択ツール」を選んでから該当のスライスをダブルクリックしてみてください。

名前の部分に入力されている文字列が、画像を書き出した時にその画像のファイル名となります。

スライスサイズの微調整もここでできるので便利です。

スライススピードをもう1段階アップさせる

いちいちドラッグするのが面倒!という人にオススメな機能がこちら。

スライスしたいレイヤーを選択してから、
[レイヤー][レイヤーに基づく新規スライス]
を選択すると、そのパーツぴったりにレイヤーが作成されます。

ショートカットを割り当てておくと、さくさくスライスが作れます。

そのパーツの大きさを変更すると、スライスの大きさも一緒に変更されるのでとっても便利な機能なんですが、スライスオプションを表示させてもスライスのサイズが変更できません。

入力項目がグレーアウトされてしまっていて数値が変更できません。

スライスのサイズを変更したい!という場合は、スライスツールを選択した状態で、該当のスライスの上で右クリックをします。

ここで、「ユーザー定義スライスに変更」をクリックすると、スライスのサイズが自由に変更できるようになります。

おわりに

スライスの使い方をマスターすると、作業効率が格段にアップします。
ショートカットを駆使しつつ、快適なスライスライフを!

最後まで読んでいただきありがとうございました
この記事はお役に立ちましたか?

このサイト全体ではこんな記事がよく読まれています

この記事に関連しているかもしれない記事はこちらから探すことができます

もし記事が役立ったらみんなにもシェアしてみてくださいね

  • このエントリーをはてなブックマークに追加