Illustratorで作成した街のイラストをチマチマ動かして1コマ1コマの画像を書き出し、それをあとから一気にPhotoshopにレイヤーとして読み込んで、GIFアニメを生成する方法の個人的備忘録です。
AIでイラストを作る
↓
一コマ一コマ動かしてはPNG書き出し。
→PNG書き出し（ショートカットに割り付けた）
書き出されたファイル名は連番にリネーム（手動でやった）
↓
全コマ分を書き出したら、
Photoshop＞ファイル＞スクリプト＞ファイルをレイヤーとして読み込み
で、該当ファイルを選択して読み込む。
ファイル数が多いと読み込みに時間がかかる。
↓
画像がレイヤーとして読み込まれる。
↓
Photoshop
アニメーションのウィンドウ（タイムライン）を出す。
ウィンドウ右上▼よりフレームアニメーションに変更。
同じく▼より「レイヤーからフレームを作成」
↓
フレームアニメーションが生成される。
逆再生に生成された場合、▼より「フレームを入れ替え」
↓
フレーム全選択で一旦仮の秒数を指定
再生確認しつつ、フレームによって秒数調整して演出。
※Photoshopのフレームウィンドウでの再生はもたついて再生され気味、
実際GIFアニメとして書き出して再生すると思いのほか高速再生される。
↓
WEB用に保存、1コマ目のフレームに注意、GIFとして保存。
ループオプションも任意で設定（「無限」に）
↓
Bindで表示させる場合、GIFファイルをFTPサーバの任意のディレクトリにアップロード後、、
Bindの編集画面からブロックにカスタムタグ
＞HTMLを編集＞ソースエディタに以下のように。
<img src="http://GIFファイルが置かれているFTPサーバ上のディレクトリ/ファイル名.gif">
例）
<img src="http://propeller-systems.com/share//tomas_test/anime/billboard_anime_0419.gif">
AIでイラストを作る
↓
一コマ一コマ動かしてはPNG書き出し。
→PNG書き出し（ショートカットに割り付けた）
書き出されたファイル名は連番にリネーム（手動でやった）
↓
全コマ分を書き出したら、
Photoshop＞ファイル＞スクリプト＞ファイルをレイヤーとして読み込み
で、該当ファイルを選択して読み込む。
ファイル数が多いと読み込みに時間がかかる。
↓
画像がレイヤーとして読み込まれる。
↓
Photoshop
アニメーションのウィンドウ（タイムライン）を出す。
ウィンドウ右上▼よりフレームアニメーションに変更。
同じく▼より「レイヤーからフレームを作成」
↓
フレームアニメーションが生成される。
逆再生に生成された場合、▼より「フレームを入れ替え」
↓
フレーム全選択で一旦仮の秒数を指定
再生確認しつつ、フレームによって秒数調整して演出。
※Photoshopのフレームウィンドウでの再生はもたついて再生され気味、
実際GIFアニメとして書き出して再生すると思いのほか高速再生される。
↓
WEB用に保存、1コマ目のフレームに注意、GIFとして保存。
ループオプションも任意で設定（「無限」に）
↓
Bindで表示させる場合、GIFファイルをFTPサーバの任意のディレクトリにアップロード後、、
Bindの編集画面からブロックにカスタムタグ
＞HTMLを編集＞ソースエディタに以下のように。
<img src="http://GIFファイルが置かれているFTPサーバ上のディレクトリ/ファイル名.gif">
例）
<img src="http://propeller-systems.com/share//tomas_test/anime/billboard_anime_0419.gif">
0 件のコメント :
コメントを投稿