Comment créer des GIF animés de maquettes de prototypes, comme celles de Dribbble?

Je suis sûr que vous avez vu des Dribbblers télécharger des maquettes animées de leurs conceptions.

Voici un exemple:

Je peux créer des maquettes sur Photoshop et même leur appliquer de simples animations Tween mais je ne peux jamais obtenir que mes GIF ressemblent à l'exemple ci-dessous.

Que les dribbblers utilisent-ils pour créer ces animations?

Notez que les animations incluent également des points de contact et un mouvement parfait. Je voudrais convertir mes maquettes Photoshop pour faire la même chose.

Comment créer un exemple animé de ma maquette, similaire à celui créé par Dribbblers?

Ce que vous devez savoir pour créer quelque chose comme ça dans After Effects:

Comment faire un projet et des compositions

Lorsque vous démarrez AE, vous pouvez appuyer sur Cmd+Npour créer un nouveau projet contenant une composition.

Si vous avez déjà un projet ouvert, appuyez Cmd+Nuniquement sur pour créer une nouvelle composition.

Dans ce projet, j'ai utilisé 2 compositions. GUIcomp pour contenir l'interface graphique et ses animations. iphonecomp pour contenir les deux, le fond et GUIcomp.

La deuxième composition avec les animations de l'interface graphique doit avoir la même taille que l'écran ou au moins avoir le même rapport d'aspect. Plus tard, lorsque vous allez le placer à l’écran, il risque de s’étirer de façon étrange si le rapport de format est désactivé.

Importation d'images dans AE

After Effects possède un très bon système pour importer des fichiers .psd, mais je n'aime pas l'utiliser parce que, si vous égarez, déplacez ou renommez le fichier .psd, les effets secondaires ne le trouvent pas et vous devez remplacer le métrage à chaque fois. couche séparément.

Si vous importez un dossier d'images dans les projets et vous, par exemple. Pour renommer le dossier d’images, il suffit de remplacer une image et toutes les images manquantes sont restaurées (tant que toutes les images manquantes existent dans le même dossier). Aussi, de cette façon, il y a moins d'encombrement.

Comment importer des images dans un projet

Cliquez avec le bouton droit de la souris dans le panneau Projet de gauche, puis choisissez: Import > Multiple files

... ou vous pouvez simplement faire glisser des fichiers dans ce panneau

J'ai utilisé slicy pour exporter mes images hors de Photoshop.

Quels objets devriez-vous enregistrer en tant que fichiers image séparés

Essentiellement, vous voudrez enregistrer tous les objets en mouvement séparément. Vous devrez peut-être également enregistrer quelques objets statiques séparément.

^{Dans ce projet, j'aurais pu potentiellement sauvegarder l'en-tête et le pied de page comme un seul, mais l'en-tête avait une ombre qui recouvrait le premier bouton, je devais donc les enregistrer séparément.}

Voici un aperçu de la façon dont j'ai sauvegardé mes fichiers image dans Photoshop avant de les importer dans AE.

Animer 101

Animation de position:

1. Animation de position:
   • Sélectionnez votre objet dans la liste à gauche de la timeline.
   • presse P
   • Cliquez sur l'icône du chronomètre située sous la couche sélectionnée. Cela ajoute automatiquement la première image clé, où que soit l'indicateur de temps (la ligne rouge dans la chronologie).
   • 
   • déplacer l'indicateur de temps dans la chronologie. Faites-le glisser ou Cmd+{Arrow left or right}ouCmd+Shift+{Arrow left or right}
   • dans le visualiseur de composition, faites glisser votre objet à la position souhaitée (vous pouvez également utiliser Shift+arrow keys, comme dans Photoshop ou en faisant glisser les valeurs numériques).
   • Une autre image clé apparaît dans la chronologie et vous avez maintenant une animation.
   • 
   • Vous pouvez jouer l'animation en appuyant sur space

Rapprochez les images clés pour accélérer l'animation ou éloignez-vous les unes des autres pour la ralentir.

Poursuivre les animations après une pause.

un scénario: vous avez animé quelque chose de A à B et vous souhaitez faire une pause de X millisecondes, puis passer de B à C.

Lorsque vous avez animé B, avancez dans la chronologie et cliquez sur l'icône de l'image clé sur le côté gauche, ici:

Cela devrait sembler grisé, alors ne vous inquiétez pas. Cela signifie simplement qu'il n'y a pas d'image clé dans cette position

Comme l'image clé n ° 2 et la transformation d'image clé n ° 3 nouvellement créée ont les mêmes valeurs, il y a maintenant une pause entre ces deux images clés. Ensuite, vous pouvez continuer à animer normalement, en progressant dans la chronologie et en modifiant à nouveau les valeurs.

Animer d'autres choses, comme la rotation ou l'opacité

Je voulais juste prendre ce temps pour vous dire que tous fonctionnent comme des animations de position (... moins le glissement).

Utilisez simplement les curseurs numériques qui apparaissent lorsque vous appuyez sur les touches de raccourci ci-dessous.

Touches de raccourci pour différentes méthodes de transformation:

• P - Position
• T - l'opacité
• R - Rotation
• S - Échelle
• A - Point d'ancrage

Il suffit de sélectionner un ou plusieurs objets, d’appuyer sur l’une de ces touches de raccourci et de commencer l’animation. Si vous ne sélectionnez rien, il révèle les méthodes de transformation pour chaque objet de la composition.

Comment asservir des objets à d'autres objets

Dans le panneau Composition, vous remarquerez une liste déroulante Parent sur chaque objet.

Vous pouvez l'utiliser pour définir un parent pour un objet.

Si vous déplacez ensuite le parent, vous remarquerez que l'élément enfant se déplace maintenant avec lui. Il en va de même pour les animations que vous attachez à l'élément Parent.

Si vous animez l'objet parent en rotation, l'enfant suivra ...

Ajouter de l'élasticité à votre animation

Alors peut-être avez-vous remarqué que l'animation des boutons ne s'arrête pas à un mur, mais s'arrête de manière très élastique.

Les effets After Effects peuvent être utilisés pour atteindre cet objectif (cela peut aussi faire beaucoup plus).

Pour appliquer le script d'expression à une animation, Alt+{mouse click}utilisez le chronomètre et collez-le dans le script.

L'expression que j'ai utilisée dans mon animation de bouton

Les 3 premières variables amp, freq, decaypeuvent être éditées pour obtenir différents résultats.

Vous pouvez appliquer ce même script aux animations basées sur les mouvements. Par exemple, l'animation d'opacité n'est pas affectée.

Peut aussi être trouvé ici.

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}

Soulager ....

C'est donc une autre chose qui peut rendre l'animation beaucoup moins linéaire, tout comme le script Expression ci-dessus.

J'ai utilisé Ease Ease dans ce "cercle d'indicateurs tactiles" pour lui donner un aspect un peu plus humain.

Vous pouvez sélectionner une ou plusieurs images clés et cliquer avec le bouton droit de la souris sur l'une d'entre elles.

Puis de la liste: Keyframe assistant > Easy Ease

J'utilise souvent Easy easy, parce que je suis paresseux ...

Des photos ou ne sont pas arrivées ...

Voici une animation de position simple démontrant comment le soulagement et ce script d’expression particulier peuvent avoir un impact considérable sur l’animation.

Placement de compositions / métrages animés sur un écran

Ainsi, une fois l'interface graphique animée, il est temps de la placer sur l'écran de l'appareil.

1. Placez la composition graphique dans la composition iPhone, tout comme vous placez des images dans une composition.
2. Double-cliquez sur iPhone comp dans le panneau Projet.
3. Sélectionner une composition graphique
4. Du menu du haut Effects > Distort > Corner pin
5. Ensuite, faites simplement glisser chaque coin pour faire correspondre les coins de l'écran du périphérique.

Exporter au format .gif

AE n'a pas de méthode native pour le faire, mais ne vous inquiétez pas, il existe des moyens.

Je préfère faire ceci:

1. Cliquez sur une composition dans le Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Ensuite, au bas de la chronologie, vous choisissez ce que vous souhaitez exporter et où.
   • J'exporte habituellement un .mov sans perte
   • Si vous cliquez sur "Paramètres de rendu", vous pouvez choisir un framerate, sinon il utilisera le framerate Comp
4. Ensuite, appuyez simplement sur render dans le coin supérieur droit ou ce panneau.
5. Recherchez le fichier exporté et ouvrez-le dans photoshop.
6. Enregistrer pour le Web Cmd+Shift+Alt+S
   • Enregistrer sous .gif

C'est franchement pas si mal que ça ...

Exporter en fichier vidéo

Ainsi, même si la méthode ci-dessus vous montre comment exporter un fichier sans perte, ce n'est pas la façon dont vous devriez exporter des fichiers vidéo.

Vous faites ça comme ça:

1. Enregistrez votre fichier de projet.
2. Cliquez sur une composition dans le Projects panel(si vous en avez plusieurs)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Faites glisser un préréglage de la colonne de droite vers la colonne de gauche
5. Appuyez sur PLAY.
6. Si vous ne choisissez pas le dossier d'exportation, par défaut, il se trouve juste à côté du fichier de projet.

Comment remplacer les images

Donc, AE ne peut pas trouver vos fichiers? Faire ceci:

• Cliquez avec le bouton droit sur l'une des images manquantes dans le panneau Projet.
• De la liste Replace footage > File...
• Localisez vos images et trucs

Autres raccourcis utiles

• U- Affiche toutes les images clés utilisées dans la composition (si rien n'est sélectionné). Vraiment utile lorsque vous devez déplacer plusieurs images clés à la fois, par exemple.
• U( Double tap ) - Révèle tout ce qui a été changé.
• E( Double tap ) - Révèle toutes les expressions utilisées.
• J - Passe à l'image clé précédente.
• K - Passe à l'image clé suivante.
• space - Joue comp
• Iou hometouche - Déplace l'indicateur de l'heure actuelle au début de la chronologie.
• Cmd+K - Paramètres de composition actuels.
• Cmd+I - Importer des fichiers.
• Alt+{Arrow keys left and right} - Sélectionnez une ou plusieurs images clés et appuyez sur les touches de raccourci pour les déplacer.
• Alt+Shift+{Arrow keys left and right} - Sélectionnez une ou plusieurs images clés et appuyez sur les touches de raccourci pour les déplacer.

Les fichiers du projet peuvent être trouvés here.

C'EST UN FICHIER .PSD GRATUIT D'UN MOCKUP ANIMÉ d'un site Web et d'un menu d'animation complètement éditer et animé dans photoshop ridicule, facile à éditer et à lire, vous pouvez télécharger le fichier gratuitement ici , j'ai aussi un tutoriel vidéo de comment ça marche facile à éditer ce billet de faveur.

Si vous regardez dans les commentaires sur ce post, le gars dit qu'il a utilisé Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Il y a deux façons de faire ça.

1. Recréez / simulez les animations souhaitées dans un programme d'animation (dont After Effects en est une), puis exportez-les sous forme de gif animé. Évidemment (comme vous l'avez compris), cela impliquera également de créer de "fausses" touches et d'autres interactions pour démontrer ce qui se passe.

2. Créez un prototype fonctionnel, puis enregistrez la sortie de votre appareil via AppleTV ou similaire via la sortie HDMI lors de son transfert vers votre téléviseur.

Les deux prennent énormément de temps et le voyage est à part entière.

Mais l'option 2 présente des avantages ENORMES par rapport à l'option 1. Le moins important est que vous apprendrez une programmation de base.

Cependant, avec une capacité de programmation interactive très basique, vous serez capable de parcourir des variations et des approches alternatives beaucoup plus rapidement que cela, bien plus rapidement qu'avec un logiciel d'animation.

Et vous aurez quelque chose de vraiment interactif pour démontrer votre conception. De plus, l'illustration a été testée dans un environnement interactif sur le périphérique, elle est donc déjà sûre d'être parfaitement au pixel et aux couleurs.

Mais attends, je sais. Tu as peur. Ça va être dur, non?

Pas si tu as un iPad.

Codea est le moyen le plus économique et le plus rapide de créer des animations triviales (et TRÈS complexes) et une interactivité dans le langage de script le plus simple et le plus propre du monde ... Lau.

http://codea.io

Si vous n'avez pas d'iPad, procurez-vous-en un.

En attendant, poursuivez votre apprentissage sur processing.org, car vous pourrez créer des maquettes tout aussi intéressantes:

http://processing.org/

Le traitement utilise un autre langage de script appelé Javascript. C'est aussi simple, mais pas aussi élégant que Lua.

Vous pouvez également créer l'animation de l'interface utilisateur à l'aide de Keynote. C'est assez simple et parfait pour créer des animations d'interface utilisateur. J'ai ensuite utilisé les effets secondaires pour placer la vidéo dans le téléphone.

Étape 1 : J'ai d'abord créé l'animation de l'interface utilisateur sur Keynote et en voici un extrait : http://vimeo.com/108991829

Étape 2 : J'ai ensuite placé la vidéo dans une maquette après effets trouvée en ligne sur un iPhone et enregistré le fichier .mov. Suivez les instructions de cette vidéo: http://youtu.be/VeZGwjVwDrc

Étape 3: Avec l'aide de photoshop et en suivant les instructions, j'ai créé ceci.

Si vous voulez vous en tenir à Keynote et l'exporter au format Quicktime, je pense que cela ne fait pas de mal d'essayer:

GIF Brewery

GIF Brewery vous permet de convertir de brefs clips de vos fichiers vidéo en GIF. Que vous souhaitiez créer le plus récent fichier GIF de chat ou fournir un aperçu d'une vidéo plus longue, GIF Brewery est fait pour vous.

Vous n'êtes plus obligé d'extraire des images de vos films et de manipuler des calques dans Adobe® Photoshop®. Laissez plutôt GIF Brewery faire tout le travail fastidieux pour vous.

En outre, GIF Brewery contient de nombreuses autres fonctionnalités pour exprimer votre créativité. Vous pouvez ajouter des légendes pour recréer un dialogue ou ajouter plusieurs filtres d'image.

J'aime vraiment toutes les instructions données par @Joonas.