EC studio EC studio デザインブログ

Fireworks CS5 でのスライス書き出しTipsをまとめてみました。
スライスするときによく使う、使えそうな小技をご紹介します。

スライスの作成

長方形スライスの作成

オブジェクトを選択した状態で、
右クリックから「長方形スライスを挿入」を選択すると、
選択した画像を覆うスライスオブジェクトを作成できます。

複数オブジェクトを選択した場合は選択したすべてのオブジェクトの
画像を覆うスライスオブジェクトを作成できます。

多角形スライスの作成

オブジェクトを選択した状態で、
右クリックから「多角形スライスを挿入」を選択すると、
オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。

イメージマップを設定するときに便利な書き出し方です。

※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、
右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
が表示されません。
「ツール」の「スライスツール」からスライスを挿入してください。

効率化ポイント

「長方形スライスを挿入」はよく使う機能なので、
ショートカットキーを覚えるのをオススメします。
複雑な複数オブジェクトをスライスしていくのに非常に便利です。

長方形スライスを挿入
Alt + Shift + U

プレビュー方法

「ファイル」の「画像プレビュー」

選択した画像形式での画像プレビューが確認できます。

「オプション」タブの「ファイルサイズの最適化」という機能は
納品などでファイルサイズが決まっている場合にターゲットサイズを指定すると、
指定サイズ以下になるようにFireworks側で調整してくれる機能です。

他にも「ファイル」タブの「拡大・縮小」、「書き出し領域」で
ファイルのサイズや範囲を変更することができます。

このプレビュー方法はひとつのオブジェクトを書き出すときに向いています。
(例えば、バナーなど)

ワークスペース上のプレビュー

プレビュー、2アップ、4アップを選択することで
選択した画像形式での画像プレビューが確認できます。

ドキュメント全体を指定していると全体、
選択したスライスを指定してると選択したスライスの最適化をプレビューできます。

その画像にあった書き出し形式がわからない時は、
4アップで各画像形式を比べるのが非常に便利です。

このプレビュー方法は複数のオブジェクトを書き出すときに向いています。
(例えば、ウェブページなど)

効率化ポイント

よく使う画像形式をプリセットとして保存すると、使いやすくなります。

最適化メニューの1番右側のオプションから
「書き出し設定を保存」を選択して、名前をつけて保存すると
現状選択されていた最適化の形式がプリセットとして保存されます。

スライス書き出し方法

選択したスライスオブジェクトの書き出し

「ファイル」から「書き出し」を選択すると、
画像は書き出しできますが、その場合すべての画像が書き出されるので、
不要なものも書き出されることがあります。

そこでオススメする書き出し方は
書き出したいスライスオブジェクトを選択した状態で、
右クリックして「選択したスライスの書き出し」を選んで書き出す方法です。

Shiftを押しながら選択すると複数のスライスオブジェクトを
簡単に書き出すことができます。

シンボルのステートの書き出し

ボタンなどシンボル内のステートを書き出す場合は、
右クリックで「選択したスライスの書き出し」を選択後、
下のプロパティの「現在のステートのみ」のチェックをはずしてください。

※CS5から書き出しファイルの名の名前の付け方が変わりました。
今まではプロパティのスライス名にいれた名前が書き出したときに
ファイル名として書き出されていましたが、CS5はデフォルトで
つけた名前の後ろに「_s1」「_s2」という文字列が挿入されます。

この設定を解除したい場合は「HTMLの設定」の「ドキュメントの詳細」の
ステート名をカスタムに選択後、編集をクリックしてください。

その後、自分が設定したいステート名に変更してください。

効率化ポイント

スライスしたい範囲が重なった場合は
切り出したいスライスの重ね順を最前面に表示させて書き出ししましょう。

書き出したいスライスが背面にある場合は
選択範囲が分割して切り出されてしまうので注意しましょう。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.