作業の開始

プロジェクトを開始するときには、まず、白紙を用意してアイデアの概略を描くことをお勧めします。メモや走り書きを追加したり、不適切な項目に線を引いて消したりしながら、全体的な方向性を把握します。次に、必要なレイアウトを生成したり、モチベーションを引き出したりするために必要なアセットのリストを作成します。計画を開始するためにできることをすべて行います。

このチュートリアルでは、視覚的なアセットとコンテンツが、整理されたソースファイルのコレクションとして用意されています。ここでは、プロジェクト構造を設定し、モックアップの作成に使用するアセットについて理解できるように説明します。

プロジェクト構造の設定

プロジェクトを開始する際に、ファイル編成について検討する時間を取ることをお勧めします。操作するファイルには、ソースファイルとパブリッシュしたファイルの２つの種類があります。ソースファイルは編集可能なマスターファイルで、サイトを構築および編集するために使用します。パブリッシュしたファイルはソースファイルを書き出したバージョンで、サポートファイルと共にWebページのコンテンツで使用されます。パブリッシュしたファイルのみがインターネット上のサーバにアップロードされます。

チュートリアル用のサンプルファイルを設定します。

1. CS4_Project.zipファイルをダウンロードし、内容をコンピュータのデスクトップまたはその他のフォルダに展開します。
2. CS4_Projectフォルダを開きます。このプロジェクトフォルダには、_Sourceという名前のサブフォルダがあります。_Sourceフォルダには、製品ごとに分かれたチュートリアルのサンプルファイルが含まれています（図２）。これ以降の手順でモックアップおよびソースファイルを作成する際に、これらのアセットを参照します。

   

   図２. CS4_Projectルートフォルダと、サンプルファイルが格納されている_Sourceフォルダ

CS4_Projectフォルダは、すべてのパブリッシュしたファイルと_Sourceフォルダが格納される、プロジェクトのルートフォルダとして機能します。作業時には、_Sourceフォルダにソースファイルを保存し、CS4_Projectフォルダにパブリッシュしたファイルを保存します。サイトが完成したら、ルートフォルダにあるすべてのファイル（_Sourceフォルダ内のファイルを除く）をサーバにアップロードします。

サンプルファイルについて

このチュートリアルで用意されているメディアアセットには、画像、オーディオ、テキストの３つの種類があります。

コンピュータ画像には、一般的にベクトルとビットマップの２つの形式があります。ベクトル画像は、線と点でシェイプを定義する数式によって生成されます。ベクトル画像は解像度に依存せず、通常、ファイルサイズはビットマップ画像よりも小さくなります。ビットマップ画像は、集まって画像を表すカラーピクセルのグリッドで構成され、グリッド内のピクセル数が多くなるほど、解像度も高くなります。ビットマップ画像はファイルサイズが大きくなる傾向がありますが、複雑な写真のようなコンテンツを表すのに適しています。CS4のワークフローでは、Photoshopを使用してビットマップ画像を処理し、Illustratorを使用してベクトルコンテンツを描画および編集します。

オーディオは一般的に、非圧縮オーディオとしてはWAV（Windows）形式またはAIFF （Mac OS）形式が使用され、圧縮オーディオとしてはMP3形式が使用されます。CS4のワークフローでは、新しいSoundboothサウンド（ASND）形式を使用して編集可能なオーディオソースファイルを作成します。これによって、「Soundbooth CS4で編集」オプションからSoundboothを起動して、ラウンドトリップ編集を行うことができます。Soundboothでファイルを保存したら、Flashに戻り、ファイルを読み込んで置換することなく、更新されたサウンドを聞くことができます。

サンプルファイルのコンテキストおよびサンプルファイルの作成に使用したツールについては、次のセクションを参照してください。

Photoshop CS4製品ツアー

Photoshopは、幅広い用途に使用される強力な画像編集ツールです。印刷業界では、Photoshopは一般的に高解像度の画像編集および画像制作に使用されます。Web業界では、Photoshopは一般的に複雑な画像合成、写真の操作および画像の修復に使用されます。CS4プロジェクトのワークフローでは、Photoshopはさまざまなビットマップ画像アセットの生成に使用されます。このアセットはPhotoshopソースファイル（PSD）で編集できますが、ソースファイルのポストプロダクションでの修正用に、統合された画像形式（JPG、PNGなど）に書き出すこともできます。

Photoshopで背景画像を確認するには、次の手順を実行します。

1. サンプルファイルのCS4_Project/_Source/Photoshopフォルダにあるcity_background.psdファイルを開きます。
2. 図３に示されているワークスペースの主な要素を確認します。ワークスペースの要素には、左側のツールパネル、カンバス上部のオプションバー、右側のカラーパネル、調整パネルおよびレイヤーパネルがあります。
3. レイヤーパネルに注目します。レイヤー効果と描画モードによる画像の合成は、Webページのグラフィックに関するPhotoshopの強力な機能の１つです。

4. 調整パネルのアイコンをクリックして、画像がどのように変化するか試してみます。

   

   図３. Photoshop CS4のワークスペースの主な要素

Photoshopの使用方法について詳しくは、『Adobe Photoshop CS4ユーザガイド』を参照してください。

Illustrator CS4製品ツアー

Illustratorは、ハイエンドのベクトルグラフィック編集ツールで、ロゴ、テキストレイアウトおよび複雑なイラストレーションコンテンツの作成に広く使用されています。ベクトルコンテンツを使用してデザインすることによって、編集可能な状態を保ちながら、高解像度または低解像度の環境でグラフィックを使用できます。プロジェクトのワークフローでは、Illustratorを使用して、インタラクティブなヘッダのレイアウトに使用するロゴ、キャッチフレーズのテキストおよび名前のテキストを生成します。ベクトルグラフィックは他の場所で使用した場合でもそのまま編集できますが、編集を行うにはIllustratorソースファイル（AI）が適しています。

Illustratorでロゴ画像を確認するには、次の手順を実行します。

1. ダウンロードしたサンプルファイルのCS4_Project/_Source/Illustratorフォルダにあるlogo.aiファイルを開きます。
2. 図４に示されているワークスペースの主な要素を確認します。ワークスペースの要素には、左側のツールパネル、アートボード上部のオプションバー、右側のカラーパネル、変形パネルおよびレイヤーパネルがあります。

3. Illustratorでベクトルを描画するためのペンツールは、他の描画プログラムのペンツールよりも大きな役割を果たす中心的なユーティリティです。ペンツールを使用して、点や線を描画してみます。

   ヒント：クリックして点を追加したときに、ペンツールをドラッグすると、ベジェパスの曲線を曲げることができます。

   

   図４. Illustrator CS4のワークスペースの主な要素

Illustratorの使用方法について詳しくは、『Adobe Illustrator CS4ユーザガイド』を参照してください。

Soundbooth CS4製品ツアー

Soundboothは、Flashで使用するオーディオを簡単に録音および編集できるように設計されたオーディオ編集および作成ツールです。Soundboothでは、オーディオを非圧縮形式で録音し、多くの種類の圧縮ファイルにオーディオを書き出すことができます。Soundbooth CS4の新機能として、Soundboothサウンド（ASND）形式を使用して編集するときには、作業内容のスナップショットを保存できます。また、Soundbooth CS4には、マルチトラックASNDファイルを作成する新機能もあります（図５）。CS4プロジェクトのワークフローでは、Soundboothを使用して、サウンドトラックオーディオをASND形式で生成および編集します。

Soundboothでサウンドトラックファイルを確認するには、次の手順を実行します。

1. ダウンロードしたサンプルファイルのCS4_Project/_Source/Soundboothフォルダにあるsoundtrack.asndファイルを開きます。
2. 画面は左右に分かれており、左側にはファイルパネル、タスクパネルおよびヒストリパネルが表示され、右側には波形編集ビューが表示されます（図５）。
3. 編集コントロールを操作してみます。ワークスペースにはマルチトラックが表示されます。小さい方のサウンドエフェクトを別の時点に移動してみます。ファイル内の要素のタイミングを変更することはとても簡単です。
4. プロジェクトのサウンドスコアおよびエフェクトを作成するために使用できるオンラインリソースを確認するには、「Resource Central」タブをクリックします。

   

   図５. Soundbooth CS4のワークスペースの主な要素

Soundboothの使用方法について詳しくは、『Adobe Soundbooth CS4ユーザガイド』を参照してください。

最後にもう１つ重要な点は、すべてのソースファイルとパブリッシュしたファイルを、Creative Suite 4と共にインストールされるAdobe Bridgeで管理できるということです。Bridgeはファイルブラウザとメディアマネージャの機能を持っており、プロジェクト間でファイルを検索したり、ファイルを管理したりするために使用できます。特に興味深いのは、よりわかりやすい検索のためにメタデータを利用してコンテンツにタグを付ける機能と、Adobe Version CueとAdobe Device Centralを利用して同期する機能です。Bridgeの使用方法について詳しくは、『Adobe Bridge/Adobe Version Cue CS4 ユーザガイド』を参照してください。

これで概要の説明は終わりです。次のセクションでは、Fireworks、FlashおよびDreamweaverについて説明します。

ページ 2 / 6

前のページ

次のページ