MATERIAL98
HOME Web素材 Illustrator講座 Photoshop講座 テンプレート ストックフォト
MATERIAL98
HOME > Photoshop講座 > 逆引きチュートリアル編> GIFアニメの作成方法
GIFアニメの作成方法
画像の配置1  

・最近flashが多い傾向ですが、まだまだファイル自体が軽いGIFアニメもバナーとして有効な広告です。
 ここではPhotoshop & ImageReadyでGIFアニメを作成します。
・左図はPhotoshopの画面ですが、パラパラアニメで表示させたい階層ごとにレイヤーとして作成しておきます。リニューアルオープンのリから始まる形ですね。
 Photoshopで対象ファイルを開いた状態で[ファイル]-[ImageReadyを起動]をクリックすると、ImageReadyでそのファイルが移行され、ImageReadyが起動します。


画像の配置2  

・ここからは、ImageReady上での作業です。
アニメーションパレットから[レイヤーからフレームを作成]を実行します。


画像の配置3   ・左図のようにアニメーションパレットにphotoshopのレイヤーがアニメーションのフレームとして作成されました。

画像の配置3  

・次にアニメーションの表示する間隔を設定します。前の画像のところで0秒と表示されている個所をクリックしますと、表示する秒数を選択できます。ここでは、0.2と選択します。「リニューアルオープン」がフル表示のフレームのみ1.0秒としました。


画像の配置3  

・次にアニメーションを表示する回数を設定します。左図の一番左に無限と表示されている個所があります。こちらをクリックしますと、1度、無限とその他が表示されますので好みの設定をします。
 一通り設定できましたので、再生して動きを確認します。


画像の配置3  

・アニメーションパレットより[アニメーションの最適化]を実行します。


画像の配置3  

・最適化パレットで[ファイルサイズの最適化]を実行します。


画像の配置3  

・最後に[ファイル]−[最適化ファイルを保存]を実行すれば完成です。ブラウザで表示して確認してみましょう。


▲ページトップ
copyright