FireworksでアニメーションGIFを作成する

01/20

トルコのアニメーションGIF

テキストと画像©Sandra Trainor

このチュートリアルでは、Fireworks CS6を使用して、色が変わる尾羽を持つ七面鳥のアニメーションGIFを作成します。 イラストレーションを作成して複製することから始めます。 私は1つに変更を加え、両方をシンボルに変換し、2つ目の状態を作成し、アニメーションをプレビューします。 次に、両方の状態の継続時間を変更し、ファイルをアニメーションGIFとして保存し、ブラウザで表示します。

このチュートリアルではFireworks CS6が使用されていますが、Fireworksの最新バージョンやPhotoshopを使用することができます

編集者メモ:

Adobeは、Fireworks CCをCreative Cloudの一部として提供していません。 Fireworksをお探しの場合は、Creative Cloudの[Find Additional Apps]セクションにあります。 Adobeがアプリケーションをサポートまたは更新しなくなることをAdobeが発表すると、アプリケーションが消えるまでには時間がかかることになります。 代表的な例は、Director、Shockwave、Contributeに関する最近の発表です。

Tom Greenによる更新

02の20

新しい文書を作成する

テキストと画像©Sandra Trainor

ファイル>新規を選択して新しい文書を作成します。 幅と高さを400 x 400ピクセルに、解像度を72ピクセル/インチにします。 キャンバスの色として白を選択し、[OK]をクリックします。

次に、[ファイル]> [保存]を選択して、ファイル七面鳥の名前をpng拡張子で指定し、保存する場所を選択して[保存]をクリックします。

03/20

円を描く

テキストと画像©Sandra Trainor

ツールパネルで、ストロークカラーボックスをクリックして黒を選択し、塗りつぶしカラーボックスで茶色のスウォッチを選択するか、または16進数の値フィールド#8C4600を入力します。

プロパティパネルで、ストロークの幅を2ピクセルにします。 ツールパネルの楕円ツールを選択します。楕円ツールは、四角形ツールや他の表示されるシェイプツールの横にある小さな矢印をクリックして見つけることができます。 Shiftキーを押しながら、クリックしてドラッグして大きな円を作成します。 シフトを使用すると、円が完全に丸くなることが保証されます。

04/20

別のサークルを描く

テキストと画像©Sandra Trainor

再び、私は別のサークルを描くときにシフトキーを押し続けますが、このサークルを最後のサークルよりも小さくしたいだけです。

ポインタツールを使用して、小さな円をクリックしてドラッグします。 私はそれが大きな円の上に重なるようにします。

05/20

丸みを帯びた長方形を描く

テキストと画像©Sandra Trainor

丸みを帯びた四角形ツールでは、四角形を描画します。 ポインタツールを使用して、その場所に移動します。 私はそれを中心にして、小さな円の底に少し重なるようにします。

06/20

パスの結合

テキストと画像©Sandra Trainor

私はシフトキーを押しながら、小さな円と丸い四角をクリックします。 両方の図形が選択されます。 次に、[修正]、[パスを結合]、[連合]の順に選択します。

07/20

色を変える

テキストと画像©Sandra Trainor

[ツール]パネルで、[塗りつぶし]ボックスをクリックしてクリーム色見本を選択するか、[16進数値]フィールドに#FFCC99と入力して[戻る]を押します。

08の20

目を作る

テキストと画像©Sandra Trainor

私は目を作るために2つの小さい円を描くことができましたが、代わりにタイプツールを使用します。 [ツール]パネルの[タイプ]ツールをクリックし、次にキャンバスをクリックします。 プロパティインスペクタでは、フォントのArial Regularを選択し、サイズを72にして、色を黒に変更します。 私は、AltキーまたはOptionsキーを押しながら8キーを押して、弾丸を作る。 別の弾を作る前にスペースバーを押します。

09/20

ビークを作る

テキストと画像©Sandra Trainor

[ツール]パネルで、[多角形]ツールをクリックします。 [プロパティ]パネルで、塗りつぶしのオレンジ色の見本を選択するか、[16進数値]フィールドに#FF9933と入力します。 また、[プロパティ]パネルでは、幅を1にしてストロークを黒にします。

次に、Window> Auto Shape Propertiesを選択します。 ポリゴンの形をクリックし、点と辺の両方を3とし、半径を180度にしたいことを示します。 三角形を小さくするために、外径値フィールドに20を入力します。 この数は三角形の大きさによって異なります。 私はリターンを押すでしょう。

ポインタツールを使用して、三角形をクリックし、それをビークのために座るべきだと思うところにドラッグします。

10の20

スヌードを作る

テキストと画像©Sandra Trainor

七面鳥の嘴から垂れた赤いものはSnoodと呼ばれています。 それを作るために、ペンツールを使います。

ツールパネルでペンツールを選択した後、塗りつぶしボックスをクリックして赤いスウォッチを選択するか、または16進数値フィールドに#FF0000と入力してリターンキーを押します。

ペンツールを使用して、クリックしてパスを形成するポイントを作成し、クリックしてドラッグして丸いパスを作成します。 最後のポイントが最初のポイントに接続すると、私は七面鳥のスヌードのような形になります。

11の20

脚を作る

テキストと画像©Sandra Trainor

私はビールと同じオレンジに塗りつぶしの色を設定することができます。 ペンツールを選択して、ストロークカラーを黒にし、プロパティパネルでストロークの幅を2に設定します。

次に、ペンツールを使用して、七面鳥の脚のような形をなす点を作成します。 選択したシェイプで、[編集]> [複製]を選択します。 次に、[修正]> [変形]> [フリップ水平]を選択します。 ポインタツールを使用して、私は彼らが一番よく見えるところに脚を配置します。

12の20

サイズを小さくする

テキストと画像©Sandra Trainor

選択>すべて選択を選択します。 次に、[ツール]パネルの[スケール]ツールをクリックします。 ハンドルが内側または外側に移動できるバウンディングボックスが表示されます 。 コーナーハンドルをクリックして内側に移動し、全体を小さくしてからreturnキーを押します。

私の形をすべて選択したまま、ポインタツールを使用して七面鳥を所定の場所に移動します。 私はそれをキャンバスの中央に低くしたい。

13の20

テールフェザーを作る

テキストと画像©Sandra Trainor

楕円ツールを使用して、クリックしてドラッグして長い楕円形を形成します。 編集/複製を選択します。 私は5つの楕円の合計があるまで、楕円形を何度も繰り返すでしょう。

14の20

色を変更する

テキストと画像©Sandra Trainor

いずれかの楕円を選択すると、[塗りつぶし]ボックスをクリックして別の色を選択します。 私は3つの楕円でこれを行い、それぞれに異なる色を選択します。

15の20

移動楕円

テキストと画像©Sandra Trainor

ポインタツールを使用して、5つの楕円をクリックしてドラッグし、すべてを選択します。 次に、[修正]> [配置]> [先に送る]を選択します。 これは、私が場所にそれらを移動すると、尾の羽根が七面鳥の後ろに落ちる原因になります。

私は楕円形をクリックして選択を解除し、一度に1つの楕円形をクリックし、それらを別々に隣り合わせに、そして部分的に七面鳥の後ろに置く。

スマートガイドを使用すると、互いに反対側の楕円を均等に配置できます。 作業中にスマートガイドが表示されない場合は、[表示]> [スマートガイド]> [スマートガイドを表示]を選択します。

16/20

回転楕円形

テキストと画像©Sandra Trainor

私は楕円を回転させ、それらの位置を変えたいと思う。 これを行うには、1つを選択し、[変更]> [変形]> [自由変形]を選択します。 次に、楕円を少し回転させるために、カーソルをクリックして境界ボックスの外にドラッグします。 ポインタツールを使用すると、楕円が最もよく見える場所に配置されます。

残りの楕円を同じ方法で回転させ、それらを所定の位置に配置します。 それらを均等に分配する。

17/20

保存して名前を付けて保存

テキストと画像©Sandra Trainor

私のイメージを見ると、七面鳥がキャンバス上で低すぎるのが分かるので、Select> Select Allを選択し、Pointerツールを使って七面鳥をキャンバスの中心に置きます。 表示方法に満足すれば、[ファイル]> [保存]を選択します。

次に、尾羽をクリックして選択し、塗りつぶしボックスで別の色を選択します。 各尾の羽に対してこれを行い、ファイル/名前を付けて保存を選択します。 私は、ファイル名をturkey2にpng拡張子を付けて変更し、[保存]をクリックします。

18/20

シンボルに変換する

テキストと画像©Sandra Trainor

ファイル>開くを選択し、私のturkey.pngファイルに移動して、開くをクリックします。 一番上のturkey.pngタブをクリックして、「選択」>「すべて選択」を選択します。 修正>変換>シンボルに変換を選択します。 私はそれをシンボル1と名付け、タイプのグラフィックを選択し、OKをクリックします。

私はturkey2.pngタブをクリックして同じことをしますが、このシンボルの名前は2つだけです。

19の20

新しい状態を作成する

テキストと画像©Sandra Trainor

私はturkey.pngタブをクリックします。 状態パネルが表示されていない場合は、ウィンドウ>状態を選択できます。 [States]パネルの一番下にある[New Duplicate States]ボタンをクリックします。

最初の状態をクリックして選択すると、シンボルが保持されていることがわかります。 2番目の状態をクリックすると、空であることがわかります。 この空の状態にシンボルを追加するには、「ファイル」>「読み込み」>「turkey2.pngファイル」に移動し、「開く」をクリックしてからもう一度「開く」を選択します。 キャンバスの右上隅をクリックして、ファイルを正しい位置に配置します。 今、私が第1の状態と第2の状態の間をクリックすると、どちらも画像を保持していることがわかります。 私は、アニメーションをプレビューするために、ウィンドウの下部にある再生/停止ボタンを押すこともできます。

アニメーションのスピードが気に入らなければ、各状態の右にある数字をダブルクリックして調整することができます。 数字が高いほど、継続時間は長くなります。

20/20

アニメーションGIFを保存

テキストと画像©Sandra Trainor

ファイル>名前を付けて保存を選択し、ファイルの名前を変更し、アニメーションGIF(* .gif)を選択して、保存をクリックします。

ブラウザでアニメーションGIFを開いて再生するには、ブラウザを起動して、ファイル/ファイルを開く/ファイルを開くを選択します。 保存したアニメーションGIFファイルに移動して選択し、[開く]をクリックしてアニメーションをお楽しみください。

関連:
アニメーションGIFの最適化
•ワイルド・トルコのプロフィール
•感謝祭トルコの歴史
•あなたが今までに見た中で最も荒れた七面鳥