DribbbleのようなプロトタイプモックアップのアニメーションGIFを作成する方法は?


38

Dribbblersがデザインのアニメーションモックアップをアップロードするのを見たことがあると思います。

以下に例を示します。

Photoshopでモックアップを作成し、単純なTweenアニメーションを適用することもできますが、GIFをここの例のように見せることはできません。

Dribbblersはこれらのアニメーションの作成に何を使用していますか?

アニメーションにはタッチポイントと完全なモーションも含まれていることに注意してください。Photoshopモックアップを変換して同じことをしたいと思います。

Dribbblersによって作成されたものに似た、モックアップのアニメーション化された例を作成するにはどうすればよいですか?


ように私には思えるクリエイティブダッシュはその傾向を開始した、あるいは少なくとも上で、それが普及したDribbble。彼らのショットのほとんどは、彼らの素晴らしいUIスキルを誇示するアニメーションGIFです。
ckpepper02

1
AEでそれを行うのがどれほど難しいかを知りたかったのですが、驚くほど簡単だったと言わざるを得ません。かなり時間がかかりますが、かなり楽しいです。これが私がしたことです。私は怠けて、GUIの下に電話のハイライトレイヤーを残しました:/ ..しかし、ええ、AEの私の小さな知識でそれを行うことができれば、誰でもそれを行うことができると思います。
ジョナス

@Joonasそれは素晴らしい!どのように達成したかについて簡単な説明を投稿していただけますか?
ナグ

うん、もう少し遅いので、明日それをするつもりだった。AEのクールな部分は、オブジェクトをポイントAからポイントBにアニメーション化する方法を学習すると、アニメーション化の方法(不透明度、回転、スケール、アンカーポイント)をほとんど理解できることです。すべて同じように機能するためです。
ジョナス

書いたら共有してください!理にかなっている、それはかなり単純に見えますが、私はまだ専門家がそれをやっている方法を見たいです。
ナグ

回答:


58

After Effectsで次のようなものを作成するために知っておく必要があること:

ここに画像の説明を入力してください



プロジェクトと作曲の作り方

AEを起動すると、を押しCmd+Nて、1つのコンポジションを含む新しいプロジェクトを作成できます。

既にプロジェクトを開いている場合、を押すとCmd+N新しいコンポジションのみが作成されます。

このプロジェクトでは、2つのコンポジションを使用しました。GUIcompとGUIとそのアニメーションを保持します。iphone背景とGUIコンプの両方を保持するコンプ。

GUIアニメーションを含む2番目のコンポジションは、画面と同じサイズにするか、少なくとも同じアスペクト比にする必要があります。後で、画面に配置するときに、アスペクト比がオフの場合は奇妙に見えるかもしれません。



AEへの画像のインポート

After Effectsには.psdファイルをインポートするための非常に優れたシステムがありますが、.psdファイルを置き忘れたり、移動したり、名前を変更したりすると、エフェクトがそれを見つけることができず、毎回映像を交換する必要があるため、使用しません個別にレイヤーします。

たとえば、画像のフォルダをプロジェクトにインポートすると、あなたも。画像フォルダーの名前を変更すると、1つの画像フッテージを置き換えるだけで、失われたすべての画像が復元されます(すべての失われた画像が同じフォルダーに存在する限り)。また、このようにすっきりしています。

画像をプロジェクトにインポートする方法

左側のプロジェクトパネル内を右クリックします。 Import > Multiple files

...または、ファイルをそのパネルにドラッグするだけです

slicyを使用して、Photoshopから画像をエクスポートしました。



個別の画像ファイルとして保存するオブジェクト

基本的に、すべての移動オブジェクトを個別に保存する必要があります。いくつかの静的オブジェクトを個別に保存する必要がある場合もあります。

このプロジェクトでは、ヘッダーとフッターを1つとして保存することもできましたが、ヘッダーには最初のボタンを覆う影があったため、それらを個別に保存する必要がありました。

以下は、画像ファイルをAEにインポートする前にphotoshopで保存した方法の内訳です。

ここに画像の説明を入力してください



アニメーション101

位置アニメーション:

  1. 位置アニメーション:
    • タイムラインの左側のリストでオブジェクトを選択します。
    • 押す P
    • 選択したレイヤーの下にあるストップウォッチアイコンをクリックします。これにより、タイムインジケータが存在する場所(タイムラインの赤い線)に、最初のキーフレームが自動的に追加されます。
    • ここに画像の説明を入力してください
    • タイムラインで時間インジケータを前に移動します。ドラッグするかCmd+{Arrow left or right}Cmd+Shift+{Arrow left or right}
    • コンポジションビューアで、オブジェクトを移動したい位置にドラッグします(Shift+arrow keysPhotoshopのように、または数値をドラッグして、を使用することもできます)。
    • 別のキーフレームがタイムラインに表示され、アニメーションが作成されました。
    • ここに画像の説明を入力してください
    • を押すとアニメーションを再生できます space

キーフレームを互いに近づけてアニメーションを高速化したり、キーフレームを互いに遠ざけて遅くしたりします。

一時停止後もアニメーションを継続します。

シナリオ:何かをAからBにアニメーション化し、Xミリ秒だけ一時停止してからBからCに移動したい

Bをアニメーション化したら、タイムラインを先に進み、左側のキーフレームアイコンをクリックします。 ここに画像の説明を入力してください

グレー表示されるはずなので、心配しないでください。その位置にキーフレームがないことを意味します

キーフレーム#2と新しく作成されたキーフレーム#3トランスフォームは同じ値を持つため、これら2つのキーフレームの間に一時停止があります。その後、タイムラインを先に進み、値を再度変更することにより、通常のアニメーションを続行できます。

回転や不透明度などの他のもののアニメーション化

今回は、それらすべてが位置アニメーション(...ドラッグなし)と同じように機能することを伝えたいと思います。

下のホットキーを押すと表示される数値スライダーを使用するだけです。

さまざまな変換方法のホットキー:

  • P - ポジション
  • T -不透明度
  • R - 回転
  • S -スケール
  • A - アンカーポイント

オブジェクトを選択し、これらのホットキーのいずれかを押してアニメーションを開始します。何も選択しないと、コンプ内の各オブジェクトの変換メソッドが表示されます。



オブジェクトを他のオブジェクトにスレーブする方法

[コンプ]パネルでは、すべてのオブジェクトに[親]ドロップダウンリストがあります。

これを使用して、オブジェクトの親を定義できます。

ここに画像の説明を入力してください

その後、親を移動すると、子要素も一緒に移動することに気付くでしょう。親要素にアタッチするアニメーションについても同様です。

回転する親オブジェクトをアニメーション化すると、子が追従します...



アニメーションに弾力性を追加する

そのため、ボタンアニメーションが壁に止まるのではなく、非常に伸縮性のある方法で止まることに気付いたかもしれません。

After Effectエクスプレッションを使用してこれを実現できます(さらに多くのことができます)。

Expressionスクリプトをアニメーションに適用するにはAlt+{mouse click}、ストップウォッチを使用してスクリプトに貼り付けます。

ここに画像の説明を入力してください

ボタンアニメーションで使用した式

最初の3つの変数amp, freq, decayを編集して、異なる結果を得ることができます。

この同じスクリプトを動きベースのアニメーションに適用できます。たとえば、不透明度アニメーションは影響を受けません。

こちらにもあります。

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}


イージング...

したがって、これは、上記の式スクリプトのように、アニメーションの直線性をはるかに低くすることができる別のことです。

その「タッチインジケーターサークル」でイーズイーズを使用して、少し人間のような動きを見るようにしました。

1つまたは複数のキーフレームを選択して、そのうちの1つを右クリックできます。

次に、リストから: Keyframe assistant > Easy Ease ここに画像の説明を入力してください

私は怠け者だからよくイージーイースを使います...

写真または発生しませんでした...

以下は、イージングとこの特定の式スクリプトがアニメーションに大きな影響を与える可能性があることを示す単純な位置アニメーションです。

ここに画像の説明を入力してください



アニメーション化されたコンプ/フッテージを画面に配置する

GUIをアニメーション化したら、デバイスの画面に配置します。

  1. コンポジション内に画像を配置するように、GUIコンプをiPhoneコンプ内に配置します。
  2. プロジェクトパネルでiPhoneカンプをダブルクリックします
  3. GUIコンプを選択 ここに画像の説明を入力してください
  4. トップメニューから Effects > Distort > Corner pin
  5. 次に、各コーナーをドラッグして、デバイス画面のコーナーに合わせます。

ここに画像の説明を入力してください



.gifへのエクスポート

AEにはこれを行うためのネイティブメソッドはありませんが、心配する必要はありません。方法があります。

私はこれを好む:

  1. でコンポジションをクリックします Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. 次に、タイムラインが通常配置される下部で、エクスポートするものと場所を選択します。
    • 通常、ロスレス.movをエクスポートします
    • 「レンダリング設定」をクリックすると、フレームレートを選択できます。それ以外の場合は、コンプフレームレートを使用します
  4. 次に、右上隅またはそのパネルのレンダリングを押します。
  5. エクスポートされたファイルを見つけて、Photoshopで開きます。
  6. ウェブ用に保存 Cmd+Shift+Alt+S
    • .gifとして保存

正直それほど悪くない...



ビデオファイルとしてエクスポートする

したがって、上記の方法はロスレスファイルのエクスポート方法を示していますが、ビデオファイルをエクスポートする方法ではありません。

あなたはこのようにします:

  1. プロジェクトファイルを保存します。
  2. 内のコンポジションをクリックしProjects panelます(複数ある場合)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. プリセットを右の列から左の列にドラッグします
  5. プレイを押します。
  6. エクスポートフォルダを選択しない場合、デフォルトではプロジェクトファイルのすぐ隣に移動します。


映像の交換方法

AEはファイルを見つけることができませんか?これを行う:

  • プロジェクトパネルで不足している映像のいずれかを右クリックします
  • リストから Replace footage > File...
  • 映像やものを見つける


その他の便利なホットキー

  • U-コンプで使用されているすべてのキーフレームを表示します(何も選択されていない場合)。たとえば、複数のキーフレームを一度に移動する必要がある場合に非常に便利です。
  • Uダブルタップ)-変更されたすべてを明らかにします。
  • Eダブルタップ)-使用されているすべての式を表示します。
  • J -前のキーフレームに移動します。
  • K -次のキーフレームに移動します。
  • space -カンプを再生します
  • Iまたはhomeキー-現在の時間インジケータをタイムラインの先頭に移動します。
  • Cmd+K -現在の構成設定。
  • Cmd+I -ファイルをインポートします。
  • Alt+{Arrow keys left and right} -キーフレームを選択し、ホットキーを押して移動します。
  • Alt+Shift+{Arrow keys left and right} -キーフレームを選択し、ホットキーを押して移動します。


プロジェクトファイルが見つかりhereます。


@Nagarjunここでカバーされていないものを見つけたら、私に知らせてください。
Joonas

もちろん!もう一度ありがとう!この回答とともにあなたに言及できるTwitterアカウントをお持ちですか?多くの人がこれを読んでみたいと思うでしょう。
ナグ

@Nagarjunいや、でも、必要に応じてこのasnwerに直接リンクできます。
ジョナス

この答えは、より多くのスコアを持っている必要があり@Joonas ...非常にプロ...
LCarvalho

6

このウェブサイトのスクロールダウのIS A FREE ANIMATEDモックアップ.PSDファイルとメニューアニメーション完全に編集し、編集にばかげ簡単にフォトショップでアニメーションと遊んで、あなたが自由のためにファイルをダウンロードすることができ、ここで、私はまた、どのようにチュートリアルビデオを持っていますこの景品は簡単に編集できます。 ここに画像の説明を入力してください


4

その特定の投稿のコメントを見ると、彼はAdobe After Effectsを使用していると言っています。http://www.adobe.com/uk/products/aftereffects.html


1
彼らはどのようにしてモバイルデザインのジェスチャーを完璧に模倣することができますか?After Effectsはそのようなニーズのために特別に作られたものではなく、汎用のモーショングラフィックツールであることを理解しています。
ナグ

3
グーグルを行う場合、AftereffectsでのUIのアニメーション化に関するリソースがたくさんあります。始めるためのリソースを次に示し
Sci

3

これを行うには2つの方法があります。

  1. アニメーションプログラム(After Effectsの1つ)で目的のアニメーションを再作成/モックアップし、アニメーションGIFとしてエクスポートします。明らかに(あなたが気づいたように)これには、「フェイク」タッチやその他の相互作用を作成して、何が起こっているかを示すことも含まれます。

  2. 機能的なプロトタイプを作成してから、AppleTVなどを介してデバイスからの出力をHDMI出力を通してテレビに渡すときに記録します。

どちらも信じられないほど時間がかかり、旅はそれ自体が目的です。

ただし、オプション2にはオプション1よりも優れた利点があります。特に、基本的なプログラミングを学べることです。

しかし、それよりもはるかに優れているのは、非常に基本的なインタラクティブプログラミング機能を使用すると、アニメーションソフトウェアを使用する人よりもはるかに高速にバリエーションや代替アプローチを反復できることです。

そして、あなたはあなたのデザインを実証するために本当にインタラクティブな何かを持っているでしょう。さらに、アートワークはデバイス上のインタラクティブな環境で実際にテストされているため、ピクセルと色が完璧であることはすでに確実です。

しかし、待ってください、私は知っています。あなたは怖いです。大変になるでしょうね?

iPadを持っている場合ではありません。

Codeaは、地球上で最もシンプルでクリーンなスクリプト言語で、ささいな(そして非常に複雑な)アニメーションと対話機能を作成する最も安価で最速の方法です。

http://codea.io

iPadをお持ちでない場合は入手してください。

それまでは、同様に興味深いモックアップを作成できるため、processing.orgの学習を続けます。

http://processing.org/

処理は、Javascriptと呼ばれる別のスクリプト言語を使用します。同様にシンプルですが、Luaほどエレガントではありません。


3

Keynoteを使用してUIのアニメーションを作成することもできます。UIアニメーションの作成に非常にシンプルで最適です。その後、エフェクトを使用してビデオを電話に配置しました。

ステップ1:最初に基調講演でUIアニメーションを作成し、これを作成しました:http : //vimeo.com/108991829

ステップ2:次に、オンラインで見つけた.movファイルを保存したエフェクトモックアップの後に、ビデオをiPhoneに配置しました。このビデオの指示に従ってください:http : //youtu.be/VeZGwjVwDrc

ステップ3: photoshopの助けを借りて、私がこれを作った指示に従ってください。

ここに画像の説明を入力してください


-1

Keynoteに固執してQuicktime形式としてエクスポートしたい場合は、試してみても問題ないでしょう。

GIF Brewery ここに画像の説明を入力してください

GIF Breweryでは、ビデオファイルの短いクリップをGIFに変換できます。最新の猫GIFを作成する場合でも、より長いビデオのプレビューを提供する場合でも、GIF Breweryは最適です。

ムービーからフレームを抽出したり、Adobe®Photoshop®のレイヤーをいじったりする必要はもうありません。代わりに、GIF Breweryにすべての退屈な作業を任せてください。

さらに、GIF Breweryには、創造性を表現するための他の多くの機能が含まれています。キャプションを追加してダイアログを再作成したり、複数の画像フィルターを追加したりできます。

しかし、@ Joonasからの指示はすべて大好きです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.