①Illustratorで元レイアウトを作成 ※キャンバスサイズのオブジェクトを敷いておく
②ファイル書き出し>Photoshop形式レイヤーイキ、72dpi
③Photoshopで開いて、キャンバスサイズのオブジェクトで選択範囲とる＞切り抜き
1ピクセルのズレが出るのでキャンバスサイズ変更で左上基準にトリム。
④全レイヤーを一つのフォルダにまとめ、コマ数分のpsdファイル作成。
⑤一つのpsdファイルにフォルダまとめ。
⑥ウィンドウからアニメーションを表示、タイムラインを出す。
・ワークスペースもアニメーション用を作っておくといい。
・アニメーションパレットの右下にタイムラインとフレーム表示の切り替えあり
・タイムラインの長さはアニメーションパレットのサブメニューからドキュメント設定で。
⑦上位フォルダレイヤー、フォルダ内パーツレイヤーは
それぞれタイムラインをドラッグして開始位置を調整可能
⑧各パーツレイヤーは位置や透過度をアニメーションできる。
各パーツレイヤーの時計マークをクリックしてキーフレームを設定、
時間ルーラーを動かして位置、透過度を設定。
※透過度はレイヤーパレットの「塗り」ではなく「不透明度」で設定する。
⑨書き出しはWeb用に保存から。ループもその画面で設定。
●YahooバナーのGIFファイルは50kb以内なので複雑なアニメは実質出来ない。
紙芝居パタパタが現実的。
・複雑なパターンなどはフラットにし、ファイルサイズを抑える。
・写真の使用もなるべく控える。
・コマ枚数も3枚程度に。
［設定例］コマ数4
特定：カラー24
誤差拡散法：ディザ30％
透明部分チェック：なし
マット：空欄
透明ディザなし：適用量：空欄
インターレース：チェックなし
Webスナップ：0％
劣化：42
Web用に保存画面時49kb→保存後50kb
●GIFアニメをメールで送るときの注意。
②ファイル書き出し>Photoshop形式レイヤーイキ、72dpi
③Photoshopで開いて、キャンバスサイズのオブジェクトで選択範囲とる＞切り抜き
1ピクセルのズレが出るのでキャンバスサイズ変更で左上基準にトリム。
④全レイヤーを一つのフォルダにまとめ、コマ数分のpsdファイル作成。
⑤一つのpsdファイルにフォルダまとめ。
⑥ウィンドウからアニメーションを表示、タイムラインを出す。
・ワークスペースもアニメーション用を作っておくといい。
・アニメーションパレットの右下にタイムラインとフレーム表示の切り替えあり
・タイムラインの長さはアニメーションパレットのサブメニューからドキュメント設定で。
⑦上位フォルダレイヤー、フォルダ内パーツレイヤーは
それぞれタイムラインをドラッグして開始位置を調整可能
⑧各パーツレイヤーは位置や透過度をアニメーションできる。
各パーツレイヤーの時計マークをクリックしてキーフレームを設定、
時間ルーラーを動かして位置、透過度を設定。
※透過度はレイヤーパレットの「塗り」ではなく「不透明度」で設定する。
⑨書き出しはWeb用に保存から。ループもその画面で設定。
●YahooバナーのGIFファイルは50kb以内なので複雑なアニメは実質出来ない。
紙芝居パタパタが現実的。
・複雑なパターンなどはフラットにし、ファイルサイズを抑える。
・写真の使用もなるべく控える。
・コマ枚数も3枚程度に。
［設定例］コマ数4
特定：カラー24
誤差拡散法：ディザ30％
透明部分チェック：なし
マット：空欄
透明ディザなし：適用量：空欄
インターレース：チェックなし
Webスナップ：0％
劣化：42
Web用に保存画面時49kb→保存後50kb
●GIFアニメをメールで送るときの注意。
メールに直接添付して送ると駄目。先方がメーラーで確認した際に、高速再生されてしまう問題が出る。圧縮して送るか、フラッシュ同様、HTML書き出しして、サーバにアップするのがよい。
0 件のコメント :
コメントを投稿