Fireworks 8 の新しい [イメージ編集] パネルの使用

Fireworks 8 で追加された [イメージ編集] パネルの目的は、一言でいえば、時間の節約です。作業時間を短縮し、多数のメニューから目的の機能を探し出す手間を減らすことができる、すべてのユーザーにとって便利な新機能です。

データ駆動で、さまざまな編集可能領域があり、多くのユーザーが編集に関与するような Web サイト (特に学術機関) では、コンテンツの編集作業や Web 用に最適化されたイメージのアップロード作業をほとんど誰でも実施できる環境が必要とされます。Web サイトやイントラネットサイトのページ上にある編集可能領域の担当となり、随時更新する責任を負うことにでもなれば、新しい [イメージ編集] パネルの時間節約機能の絶大な効果を実感できます。

保管しているすべてのデジタルイメージの管理

デジタルカメラを持っていると、かなりの数のデジタルイメージを扱うことになります。そうしたイメージは、単にカメラからデスクトップ上のフォルダ (たとえば "カメラ" というフォルダ) へとダウンロードし、Fireworks 8 で開けば、そのまま使用できます。また、プリントした写真をスキャンするのも、デジタルイメージを集めるよい方法です。たいていの人はプリントの束をいくつも持っていたりするものですが、そうしたプリントも、スキャンしてデスクトップ上のフォルダ (たとえば "スキャンしたイメージ" というフォルダ) に保存しておくことができます。

ご使用のカメラやスキャナのソフトウェアがインストールされているなら、[ファイル]-[スキャン]-[TWAIN 対応機器の選択] を選択し、そのカメラまたはスキャナを選択することで、ファイルを Fireworks 8 に直接読み込むこともできます (Macintosh の場合は、[ファイル]-[取得]-[TWAIN 対応機器の選択] または [ファイル]-[取得]-[カメラの選択])。画面上の解像度はわずか 72 DPI (場合によっては 96 DPI) しかありませんが、後で Web 用に編集や画質調整を行う場合や高画質のプリントを出力する場合に備えて、イメージは画面よりも高い解像度で保存しておくことをお勧めします。

筆者の場合、元のイメージはすべて 300 DPI の TIFF ファイルとして、コンピュータのデスクトップ上にあるフォルダに保存するようにしています。1 つのプロジェクトが終わった後は、長期保管用にすべてのファイルを CD などの外部記憶メディアに移動しています。また、1 つのイメージ全体をそのまま使うのか、それとも部分的に使うだけなのか、イメージ内の何を強調したいのか、最終的にどの程度の大きさのイメージを作成したいのかといった点も考えどころです。スキャンや拡大・縮小 (サイズ変更) の処理を経ると、イメージはぼやけることが多いので、フォーカスが甘い印象にならないようシャープ処理が必要になることがよくあります。そんなとき、Fireworks 8 の [イメージ編集] パネルが役立ちます。

[イメージ編集] パネルを使用したデジタルイメージの画質調整

新しい [イメージ編集] パネル (図 1) には、Web 用の高品位イメージを作成するために必要なツールがすべて揃っています。

このパネル上には、よく使われるイメージ編集ツールが、探しやすい場所に分類して配置されています。この記事では、[イメージ編集] パネルのいろいろな機能やツールを紹介し、上手な使い方についても例をあげて説明します。

Ucompass Educator のコース告知ウィンドウ (図 2) に掲載するためのイメージを準備するプロセスを例にとって、作業手順を説明することにします。Educator は、Flash を利用した強力なコース管理システム (CMS) です。キャンパス内およびリモートで受講させるすべてのコースについて、オンラインコンテンツとして追加するコース教材 (イメージ、図、計算問題の解などを含む) を準備してアップロードする機能を、すべての講師メンバーが利用できるようになっています。また、筆者の職場にあるイントラネット (Judson Academic Intranet : http://intranet.judson.edu*。CommToolz* を使用して構築され、ColdFusion が導入されています) では、サイトの各部分をカスタマイズするためにイメージをアップロードする作業を、組織内のほぼ全員が実施できる必要があります。講師陣とスタッフは全員、すばやく Fireworks 8 を呼び出し、適切なツールを選んで使用し、最適化したイメージをアップロードして利用可能にする作業ができることを要求されています。

図 2. Ucompass Educator Flash を利用した強力なコース管理システム

たとえば、グラフィックデザインコースのインストラクターが、生徒に課題を出すにあたって実際的な例を示す必要がある場合を考えます。まず加工前と完成後の写真を示し、次に、問題に直面してから解決方法を見つけるまでのケーススタディを示すことにします 図 3 。

コース告知ウィンドウに記載の英文の翻訳

コース告知

ケース問題 #1：
生物学者であるあなたは珍しい蝶を撮影しました。すぐに生徒に見せたいと思ったのですが、今は調査旅行中なのでインターネット経由でしか知らせることができません。写真イメージのサイズも考慮する必要があります。またカメラにズームレンズがついてないので蝶の詳細を知らせることもできません。

Fireworks 8 の[イメージ編集]パネルを使用して写真イメージを加工し、最適ファイルサイズ且つ伝えたい詳細情報を伝えてください。

※当記事 1ページ目に添付されているサンプルファイルをダウンロードし butterfly_1.tif を利用して作業を進めてください。

最初は、この問題を解くことは一見ほとんど不可能のように思われます。デジタル写真を単純に拡大すれば画質が低下するのが当然だからです。しかしよく考えると、イメージを 300 DPI の解像度でスキャンしてあるとすれば、必要な部分だけを切り抜き、Fireworks 8 の [イメージ編集] パネルにあるツールで画質を大きく改善することは可能です。

ケース問題 #1 の、短時間で手軽にできる解答

大まかな作業手順を次に示します。

1. 切り抜きツール を使用し、イメージから残したい部分を切り抜きます。
2. 拡大・縮小ツール を選択し、イメージの角を内側にドラッグして、必要な大きさにサイズ変更します。
3. イメージの外側をクリックし、プロパティインスペクタで [キャンバスをフィット] をクリックします。
4. [フィルタ]-[アンシャープマスク] を選択します。
5. [カラー調整]-[自動レベル補正] を選択します。
6. 必要に応じて、印象を弱めたい部分をぼかしツール でぼかしたり、強くしたい部分をシャープツール で強調したりします。
7. イメージを JPEG 形式で、目的に応じた最適化設定を使用して保存します (図 4)。

この方法によって、ほとんどの場合に許容範囲内の結果を得ることができ、作成したイメージをこのまま使うこともできます。

各種のツールやフィルタをすべて個別に制御したい場合にも、Fireworks 8 が備えている豊富なオプションを使用して対応できます。それらについては以後の手順で見ていくことにします。

1. まず、"image_editing_samples.zip" ファイルの内容をデスクトップ上の何らかのフォルダに展開します。
2. Fireworks 8 を開き、サンプル内の "butterfly_1.tif" を開きます (図 5)。
3. 筆者と同じようにいろいろ試行錯誤してみたい場合は、メインツールバーの [取り消し] および [やり直し] ボタンが便利です。メインツールバーは [ウィンドウ]-[ツールバー]-[メイン] で表示できます (Windows 版のみ)。

以降のセクションでは、上で簡単に説明した手順を大まかに説明していきます。

Fireworks のキャンバス上で特定のオブジェクトを区別するには、Fireworks の視覚的なガイド機能が便利です。[イメージ編集] パネルには、そうした視覚上の補助機能が使いやすく 1 か所にまとめられています。[イメージ編集] パネルが表示されていない場合は、[ウィンドウ]-[プロパティ] を選択して開いてください。次に、このパネルで [表示オプション] をクリックしてください (図 6)。

個々の表示オプションについて簡単に説明します。

• [ルーラの表示 / 非表示] : インチ単位またはセンチ単位の計測に使用するルーラを表示します。ルーラからはガイドをドラッグすることもできます。
• [グリッドの表示 / 非表示] : 一定の間隔でグリッド線を表示します。
• [グリッドに吸着 / 吸着解除] : オブジェクトの配置をグリッド線に揃えるようにします。
• [グリッドの編集] : グリッド線の間隔およびカラーを変更するオプションや、[グリッドに吸着] を選択するオプションを表示します。
• [ガイドの表示 / 非表示] : ガイドの表示を切り替えます。
• [ガイドに吸着 / 吸着解除] : オブジェクトの配置をガイドに揃えるようにします。
• [ガイドをロック / ロック解除] : ガイドの位置を固定または移動できるようにします。
• [ガイドの編集] : ガイドのカラーなど各種設定を変更するオプションを表示します。

ガイドは、キャンバス上でオブジェクトを整列させる場合や、オブジェクト間の相対的な位置関係を確認する目安としてよく使われます。また、イメージ編集に不慣れたユーザーには、切り抜いて残す部分を決めるための目印としても役立ちます。次に示す手順では、イメージ内で残す部分の目印にマークを使用しています。

1. [表示オプション] の [ルーラの表示 / 非表示] をクリックしてルーラを表示します。
2. 左側のルーラをドラッグして垂直のガイドを作成し、チョウの右側に配置します。もう一度繰り返し、チョウの左側にも垂直のガイドを作成して配置します (図 7)。ガイドを作成すると、[ガイドを表示] コマンドが自動的にオンになります。
3. 上部のルーラをドラッグしてガイドを作成し、チョウの下側に配置します。もう一度繰り返し、チョウのイメージで切り抜く部分の上側にもガイドを作成して配置します。
4. マウスをガイド上で静止させると、カーソルの形が変化して、ガイドの位置を変更できることがわかります。
5. ガイドを動かし、使用する範囲を決めます。

イメージをプリントする場合や書き出す場合には、ガイドは表示されません。次のセクションでは、イメージを切り抜く方法について説明します。

適切な位置にガイドを表示し、切り抜く部分を正確に特定したところで、次の作業に移ることができます。[イメージ編集] パネルの上部にあるツールに注目します (図 8 を参照)。

各ツールの機能の説明を次に示します。

• 赤目補正 フラッシュを使用したスナップ写真でよく発生する赤目を補正します。
• 切り抜き イメージをエッジに沿って切り抜きます。
• 拡大・縮小 イメージのサイズを変更します (このツールは選択したオブジェクトの回転にも使用できます)。
• ぼかし ぼかしフィルタのように機能します。このツールをイメージ上でドラッグして選択した部分のみをぼかすこともできます (フィルタについてはこの記事で後述)。
• シャープ シャープフィルタのように機能します。このツールをイメージ上でドラッグして選択した部分のみをシャープ処理することもできます。
• 覆い焼き このツールをイメージ上でドラッグして選択した部分の色を明るくします。
• 焼き込み このツールをイメージ上でドラッグして選択した部分の色を暗くします。

これらのツールを使用するには、補正するイメージ上で適切なツールをドラッグして目的の部分を選択します。ここでは、切り抜きツールを使用します。

1. [イメージ編集] パネルの切り抜きツール を選択します。
2. イメージ内の蝶をまたぐようにクリックしてドラッグします (図 9 を参照)。

切り抜きアウトラインが前のセクションで作成したガイドと一致するように、切り抜きハンドルを使用して切り抜き領域の位置を調整します。切り抜き領域の位置を調整するとき、切り抜き領域の枠がガイドに吸着するのがわかります。

3. Enter (Return) キーを押して、切り抜きを実行します。イメージが現在 100% で表示されていることに注意してください (図 10 を参照)。キャンバスの右下隅に表示されているパーセンテージをクリックし、メニューから [100%] を選択することによって、100% でイメージを表示できます。[画面表示]-[表示倍率] を選択しても、同じ操作を行うことができます。

切り抜きツールの使用に慣れたら、イメージの切り抜き前のガイドの使用を省略してもかまいません。次のセクションでは、イメージを拡大・縮小する方法について説明します。

切り抜いたイメージは、そのままのサイズでは使えないことや、何らかの方法で修正する必要があることがよくあります。[イメージ編集] パネルの [変形ツール] セクションには、そうした場合に役立つ機能があります。次に示す手順では、切り抜いたチョウのイメージを拡大・縮小します。

[イメージ編集] パネルの [変形ツール] セクションをクリックすると、次のようなツールがメニューに表示されます (図 11)。

• [伸縮] : コーナーハンドルを使用してオブジェクトの大きさを拡大または縮小します。オブジェクトの縦横比は維持できます。
• [傾斜] : コントロールハンドルを反対方向に動かして、オブジェクトの形を歪めます。
• [歪曲] : 個々のコーナーハンドルを自由に動かして、オブジェクトの形を変化させます。
• [自由回転] : イメージを時計回りに、または反時計回りにドラッグして回転させます。

イメージに対して拡大・縮小ツールを使用するには、次のようにします。

1. 拡大・縮小ツールを選択します。
2. イメージの右下隅の、カーソルが斜め矢印の形になる場所にポインタを動かします。
3. Shift キーを押しながら、コーナーを左上に向かってドラッグします (図 12)。Shift キーを押しているのは、イメージの縦横比を維持し、縦方向と横方向のいずれか一方が余分に伸縮してイメージが歪んでしまわないようにするためです。伸縮の操作中には、結果のイメージサイズをルーラ上の表示で確認できます。

切り抜いたイメージにキャンバスをフィットさせる

イメージを拡大・縮小した後は、キャンバス上に余分なスペースができます。これをなくすには次のようにします。

1. キャンバス上でイメージ以外の部分をクリックします (図 13)。
2. プロパティインスペクタで [キャンバスをフィット] をクリックします。キャンバスの余分なスペースが削除され、イメージの周囲に空白がない状態になります (図 14)。

次のセクションでは、[イメージ編集] パネルの変形コマンドを使用する方法について説明します。

[イメージ編集] パネルの [変形コマンド] セクションには、イメージの回転と反転に使用する各種のツールがあります (図 15)。

[イメージ編集] パネルの [変形コマンド] セクションをクリックすると、次のようなツールがメニューに表示されます。

• [数値を入力して変形] : イメージの拡大・縮小、サイズ変更、または回転を、数値を指定して正確に実行します。
• [180度回転] : イメージの上下を逆にします。
• [右回りに 90度回転] : イメージを時計回りに 90度回転します。
• [左回りに 90度回転] : イメージを反時計回りに 90度回転します。
• [横反転] : 水平軸に沿ってイメージを反転します。
• [縦反転] : 垂直軸に沿ってイメージを反転します。
• [変形の解除] : 変形の適用前に戻してやり直します。

気に入ったイメージがあるのに、それを配置したい Web ページ上の他の要素と向きが合っていないときは、次の手順でイメージの横反転ができます。

1. キャンバス上のイメージを選択します。
2. [イメージ編集] パネルの [変形コマンド] セクションで、[横反転] を選択します。チョウのイメージが反転して逆の方向を向きます (図 16)。

次のセクションでは、イメージのカラーを調整する方法についてまとめます。

写真撮影時の露出や照明の条件が悪く、元のイメージが暗すぎ、または明るすぎて、調整が必要となることは非常によくあります。[イメージ編集] パネルの [カラー調整] セクションには、最も単純な自動補正から非常に高度なものまで、あらゆる種類のツールがあります (図 17)。

[イメージ編集] パネルの [カラー調整] セクションにある個々のオプションについて簡単に説明します。

• [自動レベル補正] : イメージ内の色域のバランスをとるプリセットの調整を適用します。
• [明るさ・コントラスト] : イメージ内の明るい領域と暗い領域の間で、明るさとコントラストの両方を増加または減少します。
• [曲線] : 曲線 / トーンカーブグラフに対して変更を加える高度なツールです。
• [色相・彩度] : イメージに着色、またはイメージ内のカラー値をシフトします。
• [反転] : イメージのカラーを反転します (ネガ素材から作業を開始する場合に便利です)。
• [レベル補正] : 黒、白、および中間の値を移動する高度なツールです。
• [グレースケールに変換] : グレースケールに変換します。
• [セピア色に変換] : セピア色に変換します。

イメージの色域を調整する最も簡単な方法は [自動レベル補正] です。これを使用する場合は、キャンバス上でイメージを選択し、[イメージ編集] パネルの [カラー調整] セクションで [カラー調整]-[自動レベル補正] を選択すると、効果をすぐにイメージ上で確認できます (図 18)。ほとんどの場合、イメージの補正にはこれを使用すれば十分です。

さらに細かくカラーを調整したい場合は、[明るさ・コントラスト] を選択するとダイアログボックスが開き、明るさとコントラストの各スライダをドラッグして別々に値を調整できます (図 19)。

次のセクションでは、イメージにフィルタを適用する方法について説明します。

フィルタは、イメージに適用できる効果です。[イメージ編集] パネルを使用してフィルタを適用すると、[取り消し] コマンドを使用しなければ削除できません。いったん保存すると、後でファイルを開いたときにはフィルタを削除することはできないため、フィルタ効果を本当に追加してもよいかどうかをよく確認してからファイルを保存する必要があります。

プロパティインスペクタの [ライブフィルタ] 領域でも、同様のフィルタを使用できます。イメージを閉じた後でフィルタを削除する可能性がある場合は、プロパティインスペクタでフィルタを適用します。ただし、[イメージ編集] パネルという 1 つの場所から他のイメージ編集ツールと併せてフィルタを利用できるのは便利です (図 20 を参照)。ほとんどの場合、フィルタを削除した方がよいかどうかは適用後すぐに判断できます。

それぞれのフィルタの概要を次に示します。

• [シャープ]、[シャープ (強)]、[ぼかし]、[ぼかし (強)] ツールは、いずれもフィルタのドロップダウンリストから名前をクリックするだけで適用できます。
• [ノイズの追加] は、イメージに粒子の粗いテクスチャを追加します。
• [アルファチャネルに変換] は、イメージをシースルー効果のあるグレースケールバージョンに変換します。
• [輪郭の検出] は、カラー間のエッジにラインを作成します。

[アンシャープマスク] は、スキャンしたイメージの見た目を改善する最も簡単な方法の 1 つです。これは、イメージをシャープにするという点で [シャープ] コマンドと似ています。ただし、[アンシャープマスク] では、[シャープ] フィルタとは異なり、イメージをシャープにする度合いをコントロールできます。Fireworks では、イメージ内でオブジェクトのエッジを形成している、暗いピクセルと明るいピクセルを分析することによって、イメージをシャープにします。

[アンシャープマスク] フィルタを適用するには次の手順に従います。

1. キャンバス上の蝶を選択します。
2. [フィルタ] ドロップダウンメニューの [アンシャープマスク] を選択します。[アンシャープマスク] ダイアログボックスが表示されます。
3. [適用量]、[ピクセルの半径]、および [しきい値] スライダを調整します (図 21 を参照)。[適用量] スライダは、イメージ内でオブジェクトのエッジを形成している明るいピクセルと暗いピクセルの間に、どの程度コントラストを適用するかをコントロールします。[ピクセルの半径] スライダは、コントラスト調整の対象とするピクセル数をコントロールします。[しきい値] スライダは、オブジェクトのエッジをシャープにするために、エッジ周囲の明るいピクセルと暗いピクセルにどの程度濃淡を付けるかをコントロールします。
4. [プレビュー] オプションをオンまたはオフに切り替えて、イメージの見た目が向上するかどうかを確認します。
5. 設定が決定したら [OK] をクリックします。
6. 出来上がったイメージが気に入らない場合は、[取り消し] をクリックしてフィルタを削除します。

[アンシャープマスク] フィルタのスライダ設定は、慣れるまでに時間がかかる場合があります。思いどおりの効果が得られない場合は、[シャープ] フィルタを使用してください。

メモ : プロパティインスペクタの [ライブフィルタ] セクションには、その他にもいくつかのフィルタが用意されていますが、イメージ編集で最もよく使用されるフィルタは [イメージ編集] パネルに含まれています。

次のセクションでは、 [イメージ編集] パネルの [ぼかし]、[焼き込み]、および [覆い焼き] ツールについて説明します。

[ぼかし]、[覆い焼き]、[焼き込み] ツール (図 22 を参照) は、前のセクションで説明したフィルタと同様に機能します。ただし、これらのツールでは、イメージ全体にフィルタを適用するのではなく、ツールをドラッグした範囲にのみ効果を適用できます。これらのツールについては、この記事の「イメージの切り抜き」で概要を説明しています。ツールの機能を再度確認するには、このセクションを参照してください。

これらのツールをイメージに少しずつ使用してください。ツールに慣れるまでには時間がかかりますので、繰り返し試みてください。

蝶の画像にこれらのツールは特に必要ありませんが、このイメージを使用してツールの効果を確認していきましょう。

1. 細かい操作がしやすいように、[画面表示]-[表示倍率]-[300%] を選択してイメージを拡大します。
2. [ぼかし] ツール を選択し、ぼかしを適用するイメージの領域にドラッグします。ここでは、蝶の背後にある黒いウィンドウフレームの明るいエッジにドラッグします。これにより、蝶から注意をそらす原因となっているウィンドウフレームの細部を削除することができます。
3. [覆い焼き] ツール を選択して、明るくしたいイメージの領域にドラッグします。ここでは、蝶の羽のオレンジ色の部分にドラッグして明るくします。ドラッグするたびに、その領域は明るくなります。操作は慎重に行ってください。明るくなりすぎた場合は、[編集]-[取り消し]を選択します。
4. [焼き込み] ツール を選択して、暗くしたいイメージの領域にドラッグします。ここでは、蝶の下の黄色い花にドラッグします。
5. [画面表示]-[表示倍率]-[100%] を選択して、イメージの表示比率を 100% に戻します。

次のセクションでは、イメージが Web 用に最適化されるようにエクスポートする方法について説明します。

イメージの切り抜きと画質調整が済んだら、Web 用に最適化したファイル形式を選択して保存します。書き出しは [イメージ編集] パネルからは実行できない操作ですが、Web 用に最適化したイメージを作成する際に欠かせない手順なので、ここで説明しておきます。

ファイルサイズが大きいと、ユーザーがダウンロードするときに長い時間を要します。筆者の職場である Judson College の場合、リモートで受講している生徒の多くは非常にスピードの遅いダイアルアップで接続しているため、許容できる画質の範囲内でなるべくファイルサイズを小さくすることが非常に重要です。Fireworks 8 では、ファイルの保存時にさまざまな形式を選択できます。ロゴやラインアートには GIF イメージが非常に適していますが、写真など使用カラー数の多いイメージの場合は JPEG が最適です。

イメージを JPEG 形式で保存する際には、いくつかのオプションを必要に応じて設定します。次のようにして、[ファイル]-[書き出し]、[ファイル]-[保存]、または [ファイル]-[名前を付けて保存] を選択し、ファイルをデスクトップ上のフォルダに保存します。

1. [ファイル]-[名前を付けて保存] を選択します。
2. 完成したイメージの保存に使用するフォルダを指定します。筆者の場合は、"final" (最終版) という名前を付けたフォルダを使用しています。
3. ファイルの名前を入力し、[ファイルの種類] で JPEG を選択します。
4. [オプション] ボタンをクリックして、[イメージプレビュー] ダイアログボックスを開きます。このダイアログボックスは、[ファイル]-[名前を付けて保存] ではなく [ファイル]-[イメージプレビュー] を選択して表示することもできます。
5. [イメージプレビュー] ダイアログボックスで、目的に応じた画質を選択します (図 23)。高画質になるほどファイルサイズは大きくなります。画質の設定を変更すると、それに従って、イメージのファイルサイズとプレビューが表示されます。画質とファイルサイズの両方が許容できるレベルになるように設定を決めてください。なお、この最終手順の段階でもイメージの切り抜きや編集操作ができます。

   実は、先に適用した設定を変更しに戻ることはどの作業段階からでも可能です。[イメージオプション] ダイアログボックスのさまざまなオプション設定を試してみてください。非常に強力な機能があります。

図 23. ファイルを最適化した JPEG 形式で保存

6. 設定内容を決定したら、[保存] をクリックします。これで作業は完了です 図 24 。

イメージが完成し、Web にアップロードできるようになりました。ケース問題 #1 を生徒に出題するときには、チョウの種類や、その種類が好む植物を調べさせるのもよいでしょう (このチョウはヒョウモンドクチョウ、学名 Agraulis vanillae といい、筆者の住むアラバマ州では非常にありふれた種類です。同じくこの土地に多いランタナという植物を好みます)。

学習のヒント

Fireworks 8 の [イメージ編集] パネルの使用方法を学ぶには、実際に Web で使いたいイメージを素材にして、さまざまなツールを試してみるのがよい方法です。イメージの加工方法を学ぶための資料としては、Converting Images to Successful Web Graphics* (Macromedia デベロッパーセンター)、および How Do I Prepare a Digital Image Using Fireworks MX for Use on the Web?* (iFelix) などがあります。