アクセシビリティ
デベロッパーリソース
むらかみ けぃ氏

むらかみ けぃ氏

Webデザイナー/イラストレーター

作成日:
2009年4月3日
ユーザレベル:
初心者, 中級
製品:
Fireworks CS4

シンボルを使用して作業効率を高めよう

はじめに

Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。
シンボル化はライブラリに登録され、ライブラリからいつでもキャンバスに配置することができます。
シンボルはキャンバスに配置するとインスタンスというオブジェクトになります。

オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれるのですが、中でも大きなメリットとして以下のようなものがあります。

  1. インスタンスはオブジェクトのオリジナル情報を保持したままリサイズが可能
  2. 複数配置したインスタンスは一括修正が可能

今回はこの二つのメリットを利用したワークフローを紹介します。

必要ソフトウェア

Fireworks CS4

1.オリジナルを大きめに用意することで、デザイン時の効率化や後々の変更対応の効率化を目指す

写真などのビットマップデータは、拡大・縮小などの処理をするたびに劣化していきます。
レイアウトデザインを行っているときに、写真の大きさなどを様々なサイズに変更して試すことは頻繁に行われると思いますが、写真をあらかじめシンボル化しておけば、納得いくレイアウトになるまで何度もリサイズを繰り返しても、画像が劣化することはありません。

シンボル化しておけば画像が劣化することはない

また、インスタンスをマスクすることも可能なので、これらを組み合わせることでオリジナルを保持したままレイアウトすることが可能です。
オリジナルのデータがそのまま残ったまま製作できるのですから、後日サイズやトリミングの変更依頼が来た場合でも、また外部のオリジナルファイルを読み込みなおすこともなく、修正作業ができます。

シンボル化すればレイアウトしてからの画像調整が楽にできる

シンボル化すればレイアウトしてからの画像調整が楽にできる

拡大しても画像が劣化しない

拡大しても画像が劣化しない

シンボルを半透明のエリアでマスクしているので、トリミング領域の変更も容易

シンボルを半透明のエリアでマスクしているので、トリミング領域の変更も容易

注意

シンボル化するオリジナルの画像は高解像度なほど、のちの対応幅が広いのですが、重いデータは、アプリケーションに動作不可がかかります。
オリジナルデータのサイズも、ある程度まで調整することをお勧めします。

2.共通のアイコンなどをインスタンスで作成することで、一度に変更する

webサイト制作において同ページに同じグラフィックを繰り返し使うことは多くありえることです。
さらに、そのグラフィックを配置後に変更することも作業上多く発生します。
すべてのアイコンをその都度変更するのはとても面倒で非効率ですが、はじめにシンボル化してインスタンスをレイアウトしておけば、あとはシンボルを編集するだけですべてのグラフィックを一度に変更することができます。

サンプルの場合インスタンスにフィルターで着色することで、同じグラフィックでも色違いで配置できています。単色のグラフィックの場合は便利です。

アイコンを変更したい

アイコンを変更したい

シンボルを編集

シンボルを編集

同じシンボルを使用しているインスタンスがすべて変更される

同じシンボルを使用しているインスタンスがすべて変更される

いかがでしたか?
ここで紹介した特性を利用すればシンボルは様々な作業の効率化に役立ちます。
また、複数のシンボルをさらにまとめてシンボル化することも可能です。

あまり複雑なオペレーションを行うと逆に混乱が生じるので、使いどころは見極める必要はありますが、ちょっとした応用で作業効率が良くなることも多々あります。これを機会に様々な機能を試してみてはいかがでしょうか?

著者について

むらかみ けぃ氏

Webデザイナー/イラストレーター
フリーランスでWeb制作を行う傍ら、契約会社ではディレクション業務メインで大きなサイトに携わるなど、幅広く活動中。
Fireworksとは長い付き合いで、媒体を選ばずベクターイラストはほぼFireworks制作という間柄。