Fireworksをよく使う僕が、最近PhotoshopやIllustratorのデータをもらってコーディングだけすることが増えてきました。それぞれのツールでやる機会があったので、躓きそうなところまとめてみました。

最近はPhotoshopでGeneratorを使って書き出せるようにもなっているのですが、スライスは基本的なところではあるので抑えておきたいですね。

一通りのスライスの流れで僕が迷ったこと

タスクを分解をしていくと、スライスはどのツールでも3つぐらいに分けられますね。これに合わせて僕がいざ使う際に困ったことを並べてみました。

スライスツールのショートカットは?

まずはスライスツールを覚えました。
PhotoshopとIllustratorはスライスを作る専用の「スライスツール」、スライスを選択する専用の「スライス選択ツール」があります。

スライスに対する扱い方が違っていて、Fireworksは一つのレイヤーとして扱えましたが、Photoshopの場合はレイヤーパネルでは確認できない別物、Illustratorはスライス用のオブジェクトと捉えるとわかりやすいかなと思います。

スライスツールでのマウス操作は面倒くさい!

Fireworksを使う理由の多くを占めていたのは「スライス時のマウス操作が楽だったから」。一つ一つドラッグアンドドロップでスライスしていくのは心が折れますね。しかし、PhotoshopもIllustratorもこのあたりはデキる子です。

Fireworks

おさらいがてら、Fireworks。スライスしたいオブジェクトを選択し、右クリックから「長方形スライスを挿入」で簡単にスライスが作れますね。

微調整も「PI_Slice」で1px単位でボタンを押せばすむのでだいぶ助かりますね。

Photoshop

Photoshopではスライスツールでドラッグアンドドロップせずにスライスをする方法が二つあります。どちらも一長一短かなと思っているので、適宜使い分けていくのがおすすめです。

1. 「レイヤーに基づく新規スライス」で作る方法

PhotoshopでもFireworksの長方形スライスのように簡単にスライスが作れます。スライスするレイヤーやグループを選択し、[レイヤー]→[新規レイヤーに基づくスライス]をクリックすると、選択したレイヤーを覆うようにスライスが作られます。

Fireworksより高性能な部分がこのスライスです。上のサンプルで作ったスライスのあとに、このレイヤーを移動したり、ドロップシャドウをつけると、それに応じてスライス領域が自動的に変わってくれます。

Fireworksはこのあたり手動でやるので、ちょっと羨ましいですね。微調整したいときにはスライスを選択し、右クリック→「ユーザー定義スライスに変更」をクリックします。これでレイヤーに大きさに応じずにスライスの大きさを変えられます。

複数のレイヤーを選択している場合は、個別のレイヤー毎にスライスを作成していきます。単一スライスにできないようなので、別途スライスツールで作るなどして調整が必要です。

2. ガイドに沿ってスライス

もう一つ、ガイドに沿ってスライスする方法があります。スライスツールで画面上部のメニューオプションの[ガイドに沿ってスライス]をクリックすると、一発で複数のスライスを作れます。

ただし注意が必要です。ガイドに沿ってスライスを使うと、これまで作っていたスライスが全部消えてしまいます。使う場合はまだスライスを作っていないときに限るといいと思います。

Illustrator

Illustratorも選択したオブジェクトから次のような操作でスライスが作れます。
まずは、スライスしたいオブジェクトを選択します。

メニューの[オブジェクト]→[スライス]→[選択範囲から作成]をクリックしてスライスを作ります。

ちなみに、似たような意味合いの[選択範囲から作成]をクリックすると、スライス専用のオブジェクトがレイヤーパネルに作られ、このスライスはオブジェクトを移動してもスライスは移動しません。スライスツールで自分でスライスしたものと同じ挙動になります。ここは使い分ける上でのポイントですね。

スライス名は変えられないの?

Fireworks

Fireworksの場合はレイヤーパネルの中のWebレイヤーを選択し、ダブルクリックしレイヤーをレイヤー名を変更し、それがそのままファイル名として書き出します。

※以前はスライス名を変更するコマンドがありましたが、今はダウンロードできなくなっています。これからも使えるコマンドなので、なるべくバックアップを取っておくことをおすすめします。

Photoshop・Illustrator

Photoshop・Illustratorは共通です。[ファイル]→[Web用に保存]でWeb用の書き出しの際、変更したいスライスをダブルクリックし、スライスオプション内の[名前]に書き出すファイル名を入れます。

重なったスライスはどう書き出すの?

Fireworksでは以前紹介したことがありますが、PhotoshopやIllustratorでも同じく最前面のスライスを優先して書き出し、重なっている場合は背面にあるスライスをスライスした状態で書き出しバラバラとなって書き出します。

そのため前面にあるものと背面にあるものを個別に書き出す場合は、背面オブジェクトを非表示→前面にあるスライスを書き出し、次に前面オブジェクトを非表示・背面オブジェクを表示し、スライスレイヤーの前後関係を修正してから二度書き出します。

ポイントはスライスオブジェクトやスライスレイヤーの前後関係を調整する必要があるということです。それぞれスライスの重なりを変更する方法が違うので、ここは個別に覚えてしまいましょう。

Fireworks

Fireworksでスライスは通常のレイヤーと同様にWebレイヤーグループに位置づけられ、レイヤーと同じ扱いとなります。重なりを変更する場合は通常のレイヤー操作と同様にWindowsなら「Ctrl+↑」「Ctrl+↓」、Macなら「Cmd+↑」「Cmd+↓」で上下を入れ替えられます。

Photoshop

スライス選択ツール時のオプション内のボタンや右クリックの重なり順で順番を変えられます。スライスレイヤーはFireworksやIllustratorなどと違い、まったくの別物扱いでレイヤーパネルにも表示されません。ショートカットも用意されていないので、パネル一択です。

Illustrator

Illustratorの場合は[スライス]→[作成]とした場合はオブジェクトの重なり、スライスツールで作ったユーザー定義スライスの場合はレイヤーパネルに表示されている重なりに準拠します。

重なり順を変更するには、通常のオブジェクトの順序を変更するように、レイヤーパネルをドラッグアンドドロップで入れ替えたり、Ctrl+]、Ctrl+[で簡単に変更できます。

特定のスライスだけ書き出したい!

一度書き出した画像の内容を変更して書き出すような場合には、その都度モック内の全スライスを書き出すと軽量化した画像まで上書きしてしまうので、特定のスライスを書き出すといったことを僕はよくやります。

Fireworks

書き出したいレイヤーを選択して右クリック→[選択したスライスの書き出し]をすると、保存ダイアログが表示され書き出し先を指定して書き出します。

Photoshop

[ファイル]→[Web用に保存]でWeb用に保存ウィンドウを開き、書き出したいスライスを選択し、[保存]ボタンをクリックします。

そしてここからがポイントです。保存ダイアログで「スライス」から[選択したスライス]を選びます。あとは書き出し先を指定して保存をして画像を書き出します。

Illustrator

Illustrator CS5.5以前はPhotoshopと同じ場所でしたが、CS6以降は場所が変わっています。

[ファイル]→[Web用に保存]でWeb用に保存ウィンドウを開きます。Web用に保存ウィンドウ内の「書き出し」から「選択したスライス」を選びます。

[保存]ボタンをクリックし、書き出し先を指定し書き出します。

[保存]ボタンをクリックし、書き出します。

まとめ

Fireworksを基準にPhotoshopとIllustratorでのスライス操作をまとめてみました。
どのツールでもそれぞれに一長一短がありますね。個人的にはFireworksのコアになるスライス機能で他のツールにはない機能は、我慢しようと思えばできる範囲です。

コーディングだけの場合はそのデザインデータに合わせて作れますね。

Fireworks Lover Advent Calendar 2013、まだ空いています

Fireworks Lover Advent Calendar 2013 の4日目はいかがでしたでしょうか。
なんと、こちらのFireworksのAdvent Calendarは、あなたが手を挙げて書いてくれるのを待っているようです。

開発は終了してもまだまだFireworksが大好きな人、ぜひぜひ2013年のうちに素敵な花火を打ち上げてみませんか?

Fireworks Lover Advent Calendar 2013