拡張機能を備えたAdobe Fireworksでのワークフローの最適化

インドのハイデラバード出身のグラフィックデザイナーAshish BojavatがSmaching Magazineに掲載した記事の無料翻訳。

私はAdobe Fireworksを10年以上使用していますが、画面（Webなど）の設計に最適なソリューションを探しているすべての人にお勧めします。 Fireworksをデザイナーのアプリケーションとして指定することについては多くのことが言われていますが、今日はそのもう1つの利点である拡張性に焦点を当てたいと思います。



Fireworksは、機能の拡張に関して、ユーザーにさらに自由を与えます。 多くの価値ある機能を追加する拡張機能のエコシステムが盛んです。



この記事では、選択した拡張機能の一部をリストします。 これらは、長年にわたってFireworksを使用する際の生産性の向上に役立った拡張機能です。 さらに、それらはすべて無料です。

私の記事は非常に詳細であり、それをナビゲートするために、次のショートカットを使用できます。

• グリッドパネル
• ガイドパネル
• 自動サイズ変更スマート
• テーブルパネル
• 自動プレースホルダー
• オレンジコマンドセット
• QuickFire拡張機能

Fireworksで拡張機能を使用する

Fireworksは拡張機能によって簡単に補完されます-Adobe Extension Managerを使用してインストールされます。



推奨する拡張機能について詳しく説明する前に、Fireworksで拡張機能を使用する際の推奨事項を紹介します。 これらのヒントは、主にFireworks CS5とCS5.1に関係していますが、実際には、それらとCS6の間にはわずかな違いしかありません。

1.グリッドパネル

John DunningはFireworksコミュニティの伝説的存在であり、拡大を続ける拡張機能のリストが価値と有用性において最初にランク付けされています。 そのグリッド拡張機能は、間違いなく、新しいプロジェクトを開始するたびに参照する最初の拡張機能です。



Grids拡張機能を使用すると、デザインに合わせてグリッドをカスタマイズできます。 パラメーター（列幅、ガター幅、列数など）を設定し、キャンバスの高さで指定されたグリッドを取得します。 レスポンシブデザインの作成に通常使用するいくつかの設定をプリセットとして保存しました。 そして、ページのコンテンツの内容を挿入してグリッドに再構築する前に、適切なプリセットを適用するだけです。

グリッドパネル：12列グリッドの一般的な設定。

パネルの機能はスクリーンショットから見ることができます-列、側溝、ベースライン、それらの配置を設定し、選択する水平または垂直ガイドのみを制御します。 この拡張機能を使用せずにFireworksでグリッドを作成しようとしたことがある場合は、おそらく多くの時間を費やしているでしょう。



役立つヒント： Photoshopを使用して、そのようなものが必要ですか？ GuideGuideパネルを試すことができます。

2.ガイドパネル

他のグリッド属性なしで、一連のガイドのみを作成する必要がある場合があります。 また、ガイドをきめ細かく制御したい場合は、Eugene Judeのガイドパネルをお勧めします。



パネルには、正確な数値を使用してガイドを追加するためのいくつかのオプションがあります：キャンバスの両側（または4つすべて）でフィールドを指定したり、列と行を作成したり、特定の座標で個別のガイドを追加したりできます。

ガイドパネルの一般タブ。

ページ上のすべてのガイドをコピーして別のページまたはドキュメントに貼り付けるか、一連のガイドを保存して後で使用できます。



このパネルは、選択したオブジェクトを操作するときの機能を実際に示しています。 画像の境界または中心に沿ってガイドを追加する必要があるとします-オブジェクトを選択し、[選択]タブに移動して、タスクに対応するセルを選択します。 オブジェクトとガイドの間のオフセットのサイズを指定することもできます。 また、必要に応じて、パネルの下部にあるボタンを押すと、すべてのガイドが削除されます。水平のみまたは垂直のみです。

選択したオブジェクトの中心にガイドを追加します。

3.自動サイズ変更スマートサイズ変更

Adobe Fireworksはユーザーインターフェイスの設計に広く使用されているため、長方形、テキストフィールド、ボタンなど、いくつかのオブジェクトのグループが非常に積極的に使用されています。 問題は、そのようなグループを作成すると、サイズ変更が困難になる可能性があることです。 Fireworksは単にすべてを変換の方向に引き伸ばすため、グループを選択して必要なオブジェクトのみの幅または高さを変更することはできません。



John DunningによるSmart Resizeが役立ちます。



サイズを変更するグループを選択した後、コマンド→スマートサイズ変更→添付を使用すると、コマンドはオブジェクトのグループを、オブジェクトのサイズを制御する特徴的な黄色のマーカーを持つ特別なスマートオブジェクトに変換します。

スマートサイズ変更：オブジェクトのグループのサイズを変更するときの時間を節約します。

これらのマーカーを使用すると、グループのサイズを任意の方向に変更できます。魔法は、グループの幅または高さの50％以上を占める要素のみがサイズ変更され、残りの要素は元の位置に残ることです。

スマートサイズ変更自動アクション。

グループでテキストブロックを変更する例。

ダイアログボックスの作成など、この拡張機能で時間を節約できるケースは他にもたくさんあります。 この拡張機能は、特に条件付きレイアウトを作成する場合に時間を節約するのに役立ちます。条件付きレイアウトを作成する場合は、最適なインターフェイスソリューションを検索するために単純で迅速な変更の可能性が本当に必要です。

4.パネルテーブル

テーブルパネルは、おそらく最も過小評価されている拡張機能です。



この拡張機能が解決するタスクは非常に簡単に思えますが、実際には、Fireworksでテーブルを作成および編集するのは困難で退屈なことがわかります。 残念ながら、テーブルを作成するための適切な機能はグラフィックエディターにとってまれであり、Fireworksも例外ではありません。 Fireworksでは、行間隔を使用するか、個々のセルを選択するか、テーブルに変更を加えるたびにオブジェクトを手動で配置するかを決定することから、多くの不便を感じる可能性があります。



Tables拡張機能の登場により、多くが変更されました。

テーブルパネル：テーブルを作成および編集します。

テーブルを作成するには、必要な順序で将来のテーブルの内容を「目で」整理し、テーブルのすべての要素を選択して「作成」ボタンをクリックするだけで十分です。 拡張機能は各要素を個別のセルとして使用し、最初の行の要素が列見出しになります。 インデントの変更、表のアウトラインの非表示または表示などを行うことができます。そして、すべてが常に編集可能なままです。 テーブル内のテキストを変更し、それを含むセルには長すぎると仮定します。「更新」ボタンをクリックすると、テーブルが自動的に再構築されます。



テーブルとグリッドの作成に加えて、他のシナリオに拡張機能を使用できます。 たとえば、引用符付きのブロックの場合、ブロックはテキストのサイズに合わせて調整され、引用符は端に残ります。



ページフレームを作成するときに、この拡張機能を単純なボタンによく使用します。新しいボタンの幅をタイトルに合わせて手動で調整する必要はありません。 さらに、この拡張機能のパネルでは、ボタンの周囲に異なる幅の境界線を設定できます。

テーブルパネル：スケーラブルなボタンをすばやく作成します。

テーブルは、他の多くのオプションを備えたかなり柔軟な拡張機能です。 テキストファイルからテーブルを挿入できます（スペースまたはコンマで区切られた列-.TXTまたは.CSV）。 最初に上記の条件でテーブルをテキスト形式に変換することにより、Webページからテーブルをインポートすることもできます。

[テーブル]パネルには、テーブルをカスタマイズするための優れたオプションがあります。

5.自動プレースホルダー

条件付きプロトタイピングにFireworksを広範囲に使用する場合、プレースホルダー（プレースホルダー）に対する適切な制御の欠如に疑いの余地はありません。 通常、灰色の長方形を作成し、長方形の高さと幅を使用してテキストを追加します。 問題は、この「メタデータ」はしばしばプレースホルダーのサイズと位置とともに変更する必要があることです。 この情報を手動で更新し、テキストを常に中央に配置するのは不便です。



John Dunningは、 Placeholder拡張機能を使用して再び救助に来ます。



ツールバーのプレースホルダー自動シェイプ（標準の四角形ツールの下のリスト）を使用してプレースホルダーを作成すると、必要なデータを含む四角形が取得され、このオブジェクトのサイズと位置が変更されると自動的に更新されます。

自動プレースホルダー：常に最新の情報が含まれる動的プレースホルダー。

フレームに表示する情報を指定できます。 指定したテキストに加えて、高さ、幅、座標を表示できます。 プレースホルダーの中央にある十字線をクリックすると、ダイアログボックスが開き、そこでカスタマイズできます。

自動図形設定。

さらに、この拡張機能は、自動図形パネルに自動図形を追加します（両方のツールが同じことを行います）。



良いアドバイス：プレースホルダーが複数ある場合は、それらを選択してすべてを同時に変更できます。

6.オレンジのコマンド

AleMuñozのOrange Commandsは、Fireworks用のスイスアーミーナイフです。



このレビューの他の拡張機能とは異なり、Orange Commandsは、Fireworksのすべてのタスクの効率を改善することを目的とした100以上のチームのセットを提供します。 オブジェクトの整列からガイドの設定、2つのテキストオブジェクトの1つへの結合まで。 さらに、一連のコマンドは無料であるだけでなく、オープンソースでもあるため、すべてのユーザーが自分のチームですばやく補完できます。

私のお気に入りのチームをいくつか紹介します。

• [ アルファ]サブメニューの[ ストロークアルファ]コマンドを使用すると、オブジェクトのストロークの透明度を簡単に変更できます。
• エクスポート後にファイルが特定の順序で配置されるようにページネーションを追加する場合は、ページパネルで正しい順序でファイルを設定し、ページサブメニューで番号付けコマンドを選択します-コマンドは各ページの名前の前にシリアル番号を追加します。 ページを並べ替えましたか？ コマンドを繰り返すと番号が更新されます。 また、必要に応じて、 De-Numberizeコマンドを使用すると、番号付けが不要になります。
• 2つのオブジェクトを交換する必要がありますか？ スワップチームがお手伝いします。
• Fireworksには、いくつかのオブジェクトを互いに整列させるためのキーボードショートカットがありますが、オブジェクトをキャンバス自体と整列させる場合は、整列パネルが必要です。 これは、Alignサブメニューのチームのキャンバス上のセンターチームが登場する場所です。
• [整列]サブメニューの[ 水平方向のスペース]および[ 垂直方向の スペース]を使用して、選択したオブジェクトを指定された距離に揃えることができます。

これは、オレンジコマンドでできることのほんの一部です。 ドキュメントをチェックして、利用可能な他のオプションを確認してください。



翻訳者からのメモ：最近、 ブログでOrange Commandsチームの完全なリストを確認しました。



役立つヒント： Orange Commands拡張機能には、独自のキーボードショートカットセットが付属しています-「 インストール 」セクションを参照してください。

7. QuickFire

拡張機能が多数あると、目的のコマンドへのアクセスが大幅に複雑になる可能性があり、Fireworksのすべてのコマンド、パネル、メニュー項目にすばやくアクセスするための無数のキーボードショートカットは万能薬ではありません。



ここでQuickFireが役立ちます 。 これは、さまざまなメニューやサブメニューをゆっくりと掘り下げることなく、必要なFireworksコマンドにアクセスするためのシンプルなインターフェイスです。



QuickFireをインストールしたら、ホットキーを割り当ててFireworksを再起動します。 QuickFireパネルを開き、必要なコマンドの名前の入力を開始します。 入力したものに一致するすべてのもの、およびパネル、コマンド、自動シェイプ、ページなどを簡単に区別できるアイコンが表示されます！ 最も関連性の高いアイテムがリストの最初に表示され、Enterキーを押して開始できる状態になります。

QuickFire：ほんの数回のキーストロークで、Fireworksの任意のコマンド、パネル、および自動図形にアクセスします。

QuickFireパネルを使用して生産性を向上させる方法を紹介します。 互いに位置合わせして、それぞれに垂直の影を追加する必要がある3本の線が必要だとします。 ここに私がそれをする方法があります：

QuickFire：超高速コントロール。

役立つヒント： QuickFireを開いてリスト内の特定のコマンドを検索するとき、Enterを押すと選択したコマンドが実行され、ダイアログボックスが閉じます。

QuickFireは、生産性を向上させる他の多くの方法を提供します。 これにより、次のことが可能になります。

• パネルをすばやく開きます。
• 共有ライブラリからキャラクターを追加します。
• 自動図形を挿入します。
• Fireworksの標準コマンドメニューへのアクセス。
• 選択したオブジェクトにテクスチャを適用します。
• 最近のファイルを開くか、テンプレートから新しいファイルを作成します。
• レイヤーとページを選択し、レイヤーとページ間で選択したオブジェクトを移動またはコピーします

拡張ページで QuickFireの詳細を読むことができます 。

おわりに

既にご存じのとおり、私は拡張機能の大ファンであり、Adobe Fireworksの設計プロセスで非常に頻繁に使用しています。 私が日常的に使用する拡張機能は、1つの記事で説明できる拡張機能よりもはるかに大きくなっています。ここで説明する拡張機能は、デザイナーの生活を少し楽にするためにFireworksで最も重要な拡張機能のほんの一部です。 念頭に置いてください。おそらくこの記事の続編では、Fireworks内の他の領域に関連するいくつかの拡張機能を詳細に調べてみます。

有用なリソースのリスト

残念ながら、すべてが英語を話します。

最後に、この記事の最後に、Fireworksの最適な拡張機能について詳しく知ることができるサイトのリストを掲載する必要があります。

• 花火インタビュー
  
  このプロジェクトの本質は、仕事で毎日Fireworksを使用している世界中のデザイナーにインタビューすることです。 キース・ラング、ニック・マイヤーズ、ベンジャミン・デ・コック、ジョナサン・スヌークなど、熟練したデザイナーから推奨される拡張機能（ヒントとコツを含む）も多数あります。
• 花火の延長
  
  Fireworks拡張機能、チーム、その他のアドオン、作成者とのインタビュー、役立つヒントに関するブログ。 このサイトは比較的新しいものですが、すでに貴重な情報があります。
• Fwポリス
  
  拡張機能、ソースコード、その他の景品など、Adobe Fireworks用の無料のリソースがたくさんあります：ところで、これらの同じ人たちは今、同じテーマの新しいプロジェクトに取り組んでいます。
• Adobe Fireworks：最も素晴らしい拡張機能
  
  デザイナーのMikko Vartioが、選択した拡張機能について語ります。
• お気に入りのAdobe Fireworks拡張機能
  
  UXデザイナーDave Hogueが作成した拡張機能の長いリスト。
• ジョン・ダニングの拡張機能
  
  John Dunningからの拡張。 みんなと知り合う価値はあります。
• アーロンビールの拡張機能
  
  FireworksおよびFlashの経験豊富なユーザーおよび開発者であるAaron Beallの拡張機能。 いくつかの非常に便利な拡張機能があります。
• マット・ストウの拡張機能
  
  Matt Stowには、プロのWebデザイナーおよび開発者を支援するいくつかの拡張機能があります。
• Fireworks拡張機能| Adobe Exchange
  
  アドビのWebサイトで公開されている拡張機能。