はじめに

このチュートリアルでは、Adobe® Fireworks® CS4 を使用して、ページの最初のデザインの草案作成から、ワイヤーフレームの作成、最終的なデザインの作成に至るまでの Web サイトアプリケーションを作成する手順について説明します。必要なツールと使用方法がすべて掲載されているので、本チュートリアルをお読みいただければ、すぐに Fireworks CS4 を使用した Web サイトの作成を始められます。既に Fireworks を熟知されているユーザでも、このチュートリアルを通じて Fireworks CS4 の新しい機能について理解を深めることができます。

これより、Ignition Carshare という架空の会社の Web ページを作成していきます。同社はカーシェアリングサービス会社で、車を予約をして数時間または数日間車を共同利用できるサービスを同社の会員に提供しています。Web サイトでは、見込み客に対するカーシェアリングサービスの紹介を掲載したり、会員が車の予約やアカウントの管理を行えるインターフェイスを提供したりする必要があります。

本チュートリアルで使用するファイルは、Tutorial Working Files フォルダにあります。

Fireworks CS4 体験版

• Fireworks CS4 体験版版のダウンロード

サンプルファイル:

• carshare_designs.zip (ZIP形式, 7.7 MB)

Fireworks のワークスペースの設定

Fireworks で作業を始める前に、インターフェイスに慣れておきましょう。慣れるには、インターフェイスを使いやすいように自由にカスタマイズしておくと効果的です。Fireworks を使用していくにつれ、独自のワークフローでの必要性に合わせてインターフェイスを調整し、さらにカスタマイズを行っていくことが必要になる場合もありますが、ここでは作業を始めるためのヒントをいくつかご紹介します。

Fireworks 環境設定

1. 編集／環境設定（Windows）または Fireworks／環境設定（Macintosh）を選択します。
2. 「一般」カテゴリで、「最大取り消し回数」の回数を 80 以上に変更します。ブラシでストロークを描画するなどの細かい編集を行っている場合に、編集を取り消そうとしてもすぐに設定した回数を超えてしまいます。「最大取り消し回数」の数値を高く設定することで、柔軟に操作を行えるようになります。
3. 「編集」カテゴリで、「シンプルカーソル」を選択します。これを選択すると、すべてのツールに対してカーソルが標準型のアイコンではなく、十字型に切り替わります。これにより、作業の精度を高めることができます。
4. 「Photoshop 読み込み / 開く」カテゴリで、「クリッピングパスマスク」の「統合して外観を保持」チェックボックスをオンにします（図 1 を参照）。このオプションを選択すると、Fireworks CS4 に Adobe Photoshop® のクリッピングパスを読み込んだときにその外観が保持されます。
   
   
   図 1. Fireworks 環境設定ダイアログボックスの「Photoshop 読み込み / 開く」オプションの設定
5. 「OK」をクリックします。

パネルの整理

パネルは、Fireworks のデザインワークフローに不可欠な要素です。利用できるすべてのパネルを理解することで、より効率よく作業を行うことができます。パネル名のみが表示されているアイコンモードを実行してみましょう。

画面の右上隅のグレーのバーにあるドロップダウンメニューから、「アイコンモード（パネル名付き）」を選択します（図 2 を参照）。

図 2.「展開モード」の横にある下向き矢印をクリックして、「アイコンモード（パネル名付き）」を選択します

このモードでは、標準のパネルがすべて表示され、必要に応じて選択できます。作成するデザインの種類により、頻繁に使用するパネルは異なります。

• カラーパレットパネルは、カラーを操作する際に便利な、高度なインターフェイスです。
• パスパネルは、ベクトルを使用する際に役立ちます。
• 情報パネルとパスパネルは、頻繁に使用するので、アクセスしやすい場所に配置してください。

Fireworks CS4 では、インターフェイス上でのパネルの配置方法を制御することができます。チュートリアルの後半では、ワークスペースの整理について、他の推奨される方法について説明します。

定規の表示

定規を表示すれば、ドキュメント上でドラッグしてガイドを表示することができます。ガイドは優れたデザイン支援ツールですので、Fireworks で作業する際は、定規を表示させておくことをお勧めします。Fireworks でドキュメントを開いていないと、定規が表示されないことがありますのでご注意ください。

• 定規を表示するには、表示／定規を選択します。

ページ 1 / 3

次のページ

著者について