こんにちは、デジタルスケープの伊藤和博です。

今回は、Adobe Fireworks CS5の新機能をご紹介します。

本日は、アプリケーションの名前が多く出てきますので、一部下記の通り略称で表記しています。

Illustrator > AI
Photoshop > PS
Flash > FL
After Effects > AE
InDesign > ID


Fireworks って?


Fireworksは、Photoshopで扱うドローのデータと、Illustratorで扱うベクトルデータの両方の機能を併せ持ち、かつ、Webサイトのプロトタイプを作成してしまう、という他のアプリケーションにはない特徴をもっています。

IllustratorでWebサイトを作るような感覚に近く、長方形ツールで矩形を描き、画像を配置したり、イラスト・ロゴを作成してデザインを行い、最終的に出来上がったページをHTML/CSSで書き出すことで、それ自体がWebサイトになってしまう、という、サイトのプロトタイプからサイトの実データまで作ることが可能になります。

ところで、Fireworks CS5で強化されたポイントは、「他のアプリケーションとの連携」です。AI、PS、FL等々、Adobe Creative Suite製品群をつかった全体のワークフローの中に、Fireworksも一体化されたような形で連携をとることができるようになりました。

今回はその一部の機能についてご紹介していきます。



Adobe Device Central CS5との連携


Adobe Device Central CS5というアプリケーションは、一部のAdobe 製品を購入すると無償で同梱されているアプリケーションで、携帯電話や家庭用電子機器向けのコンテンツ制作ソフトウェアです。

■ Adobe Device Central CS5 (Adobe 公式ページ)
http://www.adobe.com/jp/products/creativesuite/devicecentral/

各携帯電話デバイス毎に異なる画面サイズを参照し、AI、PS、AE などの各アプリケーションでコンテンツを制作した後、表示確認、動作確認等を行うことが可能です。

CS5になってから、Device Centralから直接Fireworksドキュメントを作成することが可能になり、またFireworksドキュメントをDevice Centralでそのままプレビューできるようになりました。



iPhoneやGalaxyのページを作成してみよう!


まず、Device Centralを起動させてみましょう。すると、以下のスタートアップ画面が表示されますので、「新規デバイスドキュメントを作成」の中から「Fireworksファイル」選択します。



すでにDevice Centralを起動させている場合は、ファイルメニュー→新規ドキュメントを作成...→Fireworksを選択します。



初めてDevice Centralを使用する時は、ウインドウ右上にある「参照」をクリックし、iPhioneやGalaxyの画面サイズ情報を取得しておく必要があります。

画面サイズを取得したら、テストデバイスとしてDevice Centralに登録しておきます。



作成したいテストデバイスを選択し、ウインドウ右上の「作成」をクリックすると、「サイズ別にデバイスを表示」の箇所にウインドウサイズが表示されますので、ウインドウ右下の「作成」をクリックします。



Fireworksが起動し、Device Centralで指定したテストデバイスと同じ画面サイズで新規ドキュメントが立ち上がります。

ページを作成し、ファイルメニュー→Device Centralでプレビュー...を選択すると、指定したデバイスでどのように表示されるかをシミュレーションすることができます。



AI、PS等とスウォッチカラーを共有


Fireworksでは、AI、PS、ID などにも組み込まれているKulerというエクステンションを使用することができます。

この機能を使えば、Adobe Kulerを使用している世界中のデザイナーの方々とカラーを共有することができます。

Fireworks CS5から、IllustratorやPhotoshopなどのスウォッチパネルの中に登録してあるカラーを、Fireworksでも活用できるようになりました。IllustratorやPhotoshopでは、以前から交換用スウォッチファイル(.ase)を作成し、それらをそれぞれのスウォッチに取り込み、活用することができましたが、CS5 からはこれらのカラー交換にFireworksも加わりました。

例えば、AIのスウォッチパネルから、以下のように交換用ファイルを作成します。書き出したファイルは「ファイル名.ase(Adobe Swatch Exchange)」というファイルで保存されます。



このファイルを、Fireworksのスウォッチパネルから、「スウォッチを追加」を選択すると、以下のようにスウォッチカラーを取り込むことが可能です。



取り込んだスウォッチカラーはFireworksで使用することができます。また、これとは逆に、Fireworksで作成したスウォッチカラーを書き出し、IllustratorやPhotoshopで活用する、という双方向のやり取りが可能になりました。なお、グラデーションスウォッチ、パターン、濃淡を含むスウォッチカラーは取り込むことができませんのでご注意ください。




もっとFireworks CS5 を使いこなすなら!
Fireworks CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei