サルのイラストを用意する
FireworksではMacromedia FreeHandなどのアプリケーションで扱うベクターデータと、Adobe Photoshopなどで扱うビットマップデータの両方を扱うことができます。このためFireworksだけでベクター系、ビットマップ系、両タイプのクリップアートを製作することができます。
今回、使用するサルのイラストはFireworksの機能を試す目的もあり、ベクターデータとして作成してみました。本来なら、ここで作成手順を紹介すれば良いのですが、そこだけで1回分くらいの分量になってしまいそうですし、今回の目的はアニメーションGIFの作成ですので、手順の紹介は後日に回して、ここでは40x40ピクセルのGIFファイルをFireworksで読み込み、オブジェクト化して使用することにします。
ちなみに、私が描いたサルはこんな感じです。
バナーのデザインを考える
前ページで、今回作成するバナーをリンクエクスチェンジに登録すると言いましたが、そのためにはバナーのサイズを400x40ピクセル以内で作成する必要があります。
[ファイル(F)]メニューから[新規作成(N)]を選択し、横400ピクセル、縦40ピクセルで新しいキャンバスを作成してください。
今回製作するバナーは、背景を単一色で塗りつぶします。[ウィンドウ(W)]メニューから、[レイヤー(L)]を選択してください。すると以下の[レイヤーとフレーム]ウィンドウが開きます。
 |
現在は[フォアグラウンド]が反転表示されており、選択されている状態にあります。 Fireworksのオブジェクトはすべてフォアグラウンドに配置され、バックグランドではビットマップデータのみ扱うことができます。また、フォアグラウンドとバックグラウンドの編集は、互いに干渉することなく行うことができます。バナーの塗りつぶしはバックグラウンドレイヤーで行います。 [バックグラウンド]という部分をマウスでクリックしてください。すると、キャンバスが以下のように点線で囲まれた状態になっていると思います。
|
ツールパレットからバケツツールを選択してください。その後、ツールボックスにあるバケツの絵の左にある色をダブルクリックしてください。[色]を選択するウィンドウが表示されたと思います。ここで塗りつぶしに使う色を選択し、[OK]ボタンを押してください。
キャンバス上でマウスクリックすると、選択した色でキャンバスが塗りつぶされます。レイヤーをフォアグラウンドに戻してください。ここまでで以下の状態になりました。
では、GIFファイルとして作成してある（事にした）、サルのイラストを配置しましょう。ファイル(F)メニューの開く(O)を選択してください。ダイアログの[ファイルの種類(T)]を"読み込み可能なファイル"に設定し、GIFファイルを選択してください。別のキャンバスに、サルのイラストが読み込まれましたね。次はこのイラストを位置の移動などを簡単に行うために、オブジェクト化します。
GIFファイルはバックグラウンドレイヤーに読み込まれますので、先ほどと同じように[レイヤーとフレーム]ウィンドウでバックグラウンドレイヤーを選択します。次に[選択(S)]メニューから[すべて選択(A)]（ショートカットキーは[Ctrl+A]）を選択後、[編集(E)]メニューから[コピー(C)]を選択し、イラストを複写します。
次に先ほど作成したバナーのキャンバスをクリックし、[編集(E)]メニューから[ペースト(V)]を選択してください。すると、以下のウィンドウのようにコピーしたサルのイラストが貼りつけられると思います。
テキストツールで"?"を描画します。
これがアニメーションGIFで最初に表示されるフレームになります。
次ページから、このフレームをベースにして２フレーム以降を作成しましょう。
ご意見、ご感想は