デザイナーがアニメーション化された映画をgifに変換し、BehanceとDribbbleのアニメーションの制限に合わせるのは難しい場合があります。
Principle 、 Flinto、およびその他のエディターでアニメーションをすばやく作成する方法に関する記事は多数ありますが、BehanceおよびDribbble向けに特にアニメーションを準備する方法については何もありません。
私たちは自分でこの道を踏みにじり、どの方法が私たちにとって最適かを認識しました。 この記事は、まだ理解していない人にとって有用です。
制限事項
これらのサイトの要件を検討してください。
ドリブル
gifアニメーションのみ、解像度-800×600。サイズ-最大8 mb。
Behance
Gif-animation / Embed-video / Adobeホスティングのビデオ。 gif /写真の場合は50 MB、ビデオ/オーディオの場合は1 GB。 gifの最大解像度は、ビデオの場合は1400、幅は1200です。
アニメーションの準備の詳細。
ドリブル
長い動画はショット形式には適していません。 短いループを表示するのが最善です。
ワークフローは次のとおりです。
- 原理/フリント/フレーマーなどでアニメーションを作成します。
- ショットがどのように見えるかを決定し、デバイスモーションキャプチャまたはその他の方法で配置します。 通常、After Effectsでこの手順を実行します。他のプログラムよりも簡単だからです。
ビデオの重量を抑えて高品質にするためには、Mac用のH.264ビデオコーデック（使用可能な場合はH.265）とWindows用のjpegを選択する必要があります。
After Effectsでレンダリングするときにコーデックを選択する方法
コーデック選択のパス：出力モジュール/形式オプション/ビデオコーデック
- 結果のmovファイル。 gifを変換し、8 mbを超える場合は最適化します。
小さなビデオをgifに変換する最も簡単な方法は、ezgifを使用することです。
exgifでgifを作成する方法
ビデオをアップロードします。
アニメーション時間、サイズ、1秒あたりのフレーム数、および圧縮方法を選択します。
できた 「最適化」ボタンのgifの重量が大きい場合は、gifを圧縮することもできます。
Behance
Behanceアニメーションは、Adobe Cloudビデオ、YouTube / Vimeoからのビデオの埋め込み、およびgifの方法でダウンロードできます。
取得する必要があるものに応じて、すべての方法を使用します。
各アプローチの長所と短所を考慮してください。
Adobe Video
+好きな量をロードできます
+比較的品質の低下なし
+フルスクリーンで表示できます
+音
-モバイル版には自動再生はありません
ビデオを埋め込む
+ Adobeのビデオのすべてのプロ
-YouTube / Vimeoロゴ
-ループビデオの設定機能
-モバイル版には自動再生はありません
GIFアニメーション
+全画面表示が可能
+自動再生があります
-視聴中はスクロールできません
-重量が大きく、ロードに時間がかかる
ワークフローは次のとおりです。
- 項目は、ドリブルでのビデオショットの準備と同じです。
- GifBreweryでビデオをgifに変換します（ezgifを使用しますが、1400pxの幅でgifを作成することはできません）。
GifBreweryでgifを作成する方法
スタート画面で、[ビデオを開く]を選択します。
デフォルトでは、GifBreweryは通常のgifを作成します。 しかし、何かがうまくいかなかった場合、つまり、右側のアイコンの設定です。 通常、色選択アルゴリズムのみを使用します。
この記事では、私たちが使用する方法について話しましたが、それらは間違いなく機能します。 独自のオプションがある場合は、コメントを記入してください。
私たちが得るものは、 Behance 、 Dribbbleのプロファイルで見ることができます。