アニメーション GIF 作成手順資料

ニューラルソフト有限会社
検認
ウェブ素材制作手順
表
技術資料
題
アニメーション GIF 作成手順資料
副
題
Animation GIF Creation Procedure Data
キーワード
ウェブ、WEB、アニメーション、Animation、GIF
参照/添付資料
(1 /7)
照査
作成
市来博記
目次
1. 概要 .................................................................................................................................................................3
2. 手順 .................................................................................................................................................................3
3. 特記事項 .........................................................................................................................................................7
(2 /7)
1. 概要
本資料は Adobe Fireworks における GIF アニメーション画像の作成手順を説明するものです。
2. 手順
(1) 新規ドキュメント（カンバス）の作成
(a) ファイル/新規作成メニューを選択します。
(b) 新規ドキュメント設定画面でカンバスのサイズとカラーを指定します。

幅：アニメーション GIF 画像の幅

高さ：アニメーション GIF 画像の高さ

解像度：72 ピクセル／インチ

カラー：アニメーション GIF 画像の背景色
作成する GIF アニメーション画像の
幅と高さを指定します。
図 2-1 新規ドキュメント（カンバス）設定例
(2) ステートの追加
アニメーション画像枚数（コマ数）分のステートを確保します。
（4 コマのアニメーションを作成する場
合は全部で 4 ステート必要です。
）
(a) ウィンドウ/ステートメニューを選択してステートパネルを表示します。
（既に表示されている場
合は必要ありません。
）
(b) ステートパネルのメニューを表示して、
「ステートを追加」を選択します。
(3 /7)
これを選択します。
ここをクリックすると右図
のようにメニューが表示さ
れます。
図 2-2 ステートパネルのメニュー選択例
(c) ステート追加画面で必要なステートを追加します。
（4 コマのアニメーションを作成する場合、初期
状態で 1 ステート存在しているので、3 ステート追加します。）
図 2-3 ステート追加例
(3) 画像の配置
各ステート（コマ）に画像を配置します。
(a) 画像を配置するステートを選択
ステートパネルに表示されているステートを選択（クリック）します。
何れかのステートをクリック
します。
図 2-4 ステート選択例
(4 /7)
(b) ファイル/読み込みメニューを選択して、読み込み画面を表示します。
図 2-5 読み込み画面表示例
(c) 読み込み画面で画像ファイルを選択して、画像を配置する位置（画像の右上の位置）を設定します。
その際、コントロールキーと'+'キーを同時に押下してドキュメント（カンバス）を拡大表示すると位
置決めが容易です。
（配置する画像のフォーマットが GIF である必要はありません。）
マウスカーソルをこの位置
に移動してクリックします。
図 2-6 画像配置位置指定例
(4) (3) の操作を繰り返して全てのステートに画像を配置します。
(5) 出力画像の最適化
(a) ウィンドウ/最適化メニューを選択して、最適化パネルを表示します。
（既に表示されている場合は
必要ありません。
）
(b) 最適化パネルで出力画像をアニメーション GIF 用に最適化します。（最適化パネルの設定項目の詳
細は Fireworks ヘルプ/トピック/最適化と書き出し/グラフィックファイルの最適化の項を参照して
下さい。
）
(5 /7)
図 2-7 アニメーション GIF 用最適化設定例
(6) ステートディレイの設定
各画像（コマ）の表示時間を設定します。
(a) ステートパネルのステートディレイ表示部をダブルクリックしてステートディレイ設定画面を
表示します。
ここをクリックします。
図 2-8 ステートディレイ設定画面表示例
(b) ステートディレイ設定画面で画像（コマ）の表示時間を
1
100
秒単位で設定します。
（1 秒間に 15
コマ以下になる設定が安全です。
）尚、複数のステートを選択状態に設定してから同様の操作を行うと
選択状態の全ステートのディレイを一括設定できます。
(7) アニメーション GIF 画像出力
(a) ファイル/書き出しメニューを選択して、書き出し画面を表示します。
(6 /7)
図 2-9 書き出し画面表示例
(b) 書き出し画面で画像ファイルの格納フォルダとファイル名を設定して「保存」ボタンを押下します。
3. 特記事項
なし
(7 /7)
ニューラルソフト有限会社
改定履歴
改
定
内
容
検認
照査
作成
－
－
市来博記
初期作成
12/5/31
(8 /7 + 1)

Download Report