シンボルを使用して作業効率を高めよう
作成日
3 April 2009
ページ ツール |
必要条件
ユーザーレベル
初級
必要な製品
- Fireworks CS4 (Download trial)
はじめに
Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。
シンボル化はライブラリに登録され、ライブラリからいつでもキャンバスに配置することができます。
シンボルはキャンバスに配置するとインスタンスというオブジェクトになります。
オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれるのですが、中でも大きなメリットとして以下のようなものがあります。
- インスタンスはオブジェクトのオリジナル情報を保持したままリサイズが可能
- 複数配置したインスタンスは一括修正が可能
今回はこの二つのメリットを利用したワークフローを紹介します。
1．オリジナルを大きめに用意することで、デザイン時の効率化や後々の変更対応の効率化を目指す
写真などのビットマップデータは、拡大・縮小などの処理をするたびに劣化していきます。
レイアウトデザインを行っているときに、写真の大きさなどを様々なサイズに変更して試すことは頻繁に行われると思いますが、写真をあらかじめシンボル化しておけば、納得いくレイアウトになるまで何度もリサイズを繰り返しても、画像が劣化することはありません。
また、インスタンスをマスクすることも可能なので、これらを組み合わせることでオリジナルを保持したままレイアウトすることが可能です。
オリジナルのデータがそのまま残ったまま製作できるのですから、後日サイズやトリミングの変更依頼が来た場合でも、また外部のオリジナルファイルを読み込みなおすこともなく、修正作業ができます。
注意
シンボル化するオリジナルの画像は高解像度なほど、のちの対応幅が広いのですが、重いデータは、アプリケーションに動作不可がかかります。
オリジナルデータのサイズも、ある程度まで調整することをお勧めします。
２．共通のアイコンなどをインスタンスで作成することで、一度に変更する
webサイト制作において同ページに同じグラフィックを繰り返し使うことは多くありえることです。
さらに、そのグラフィックを配置後に変更することも作業上多く発生します。
すべてのアイコンをその都度変更するのはとても面倒で非効率ですが、はじめにシンボル化してインスタンスをレイアウトしておけば、あとはシンボルを編集するだけですべてのグラフィックを一度に変更することができます。
サンプルの場合インスタンスにフィルターで着色することで、同じグラフィックでも色違いで配置できています。単色のグラフィックの場合は便利です。
いかがでしたか？
ここで紹介した特性を利用すればシンボルは様々な作業の効率化に役立ちます。
また、複数のシンボルをさらにまとめてシンボル化することも可能です。
あまり複雑なオペレーションを行うと逆に混乱が生じるので、使いどころは見極める必要はありますが、ちょっとした応用で作業効率が良くなることも多々あります。これを機会に様々な機能を試してみてはいかがでしょうか？
Tutorials & Samples |
Tutorials
- Creating and exporting Fireworks graphics as FXG files for Flash Catalyst
- Creating jQuery Mobile website themes in Fireworks
- Extracting CSS properties from Fireworks design objects
Fireworks Forum |
More |
| 12/16/2008 | Disappearing Mouse Cursor? |
|---|---|
| 01/13/2012 | Survey: Blend mode options in Brush tool? |
| 01/25/2012 | after a update of cs3 to 9.0.1 styles are broken |
| 08/15/2011 | CS5 plagued with many bugs in Lion |
Fireworks Cookbooks |
More |
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |
