Aperçu

De nombreuses personnes utilisent des éléments dynamiques et animés pour l'image de marque, pour augmenter l'attrait du trafic et ajouter un caractère unique à leurs sites Web. Souvent, cela se fait en utilisant CSS et d'autres langages de développement, mais il existe de nombreuses façons d'utiliser des images animées. Dans ce didacticiel, vous apprendrez à utiliser des animations dans la conception Web, obtenez une introduction à la création d'animations en boucle de 24 images dans Clip Studio et acquérez une compétence commercialisable!

 

Table des matières:

1. Conceptualiser

2. Conseils pour l'animation Web

3. Esquisser une animation et un cadrage clé

4. Préparation de Clip Studio

5. Finalisation

6. Utilisation sur un site Web

7. Amusez-vous!

1. Conceptualiser

Avant même de commencer à dessiner, vous devez considérer la façon dont votre actif sera utilisé, la marque (le style général de qui ou pour quoi vous le produisez) et toute autre exigence dont vous ou votre client pourriez avoir besoin.

La façon dont l'animation sera utilisée affectera la façon dont vous concevez et animez:

Allez-vous l'utiliser pour un écran de chargement, un logo en direct, un arrière-plan, un petit élément sur une page? Ces questions vous aideront à décider si l'animation doit être subtile (nous ne voulons pas d'une tête qui crie animée sur un site Web si nous voulons que le public lise quelque chose à la place par exemple), excitant (attirer l'attention sur un logo ou un bouton peut être très bénéfique), ou simplement quelque chose pour donner un peu plus de vie à une page autrement ennuyeuse. Parcourez la section "Conseils" pour des idées sur la façon de décider quoi faire en fonction de l'utilisation de votre conception. Vous devriez également rechercher des "animations de site Web" pour trouver un tas de sites Web créatifs qui utilisent toutes sortes d'actifs animés pour plus d'idées.

La marque du site Web est également une chose importante à considérer:

Si vous faites ce projet pour un client, quel type de design utilise-t-il déjà? De quel style devrait être votre animation pour qu'elle soit cohérente avec les autres éléments du site Web? À quel public s'adresse-t-il (fans d'anime, professionnels, associés commerciaux, etc.) et à quoi pensez-vous qu'ils aimeraient ou seraient offensés? Le client a-t-il des demandes spécifiques? Ce sont des discussions importantes à avoir avec votre client.

Si vous faites cela pour un projet personnel, vous devriez considérer les mêmes choses: qui est votre public? Comment restez-vous cohérent? Que voulez-vous dire de votre projet?

Lisez sur le marketing ou la communication visuelle si vous voulez en savoir plus sur ce genre de choses.

Pour ce tutoriel, je crée un site portfolio pour exposer mon travail. Je veux créer un élément de titre qui apparaîtra sur la première page. Il devrait attirer beaucoup d'attention pour capter l'intérêt du spectateur. Je veux également qu'il pointe la page vers mon nom et aide à indiquer à quelqu'un de faire défiler la page. Par conséquent, je veux que ce soit une grande animation dramatique avec un mouvement vers le bas qui attire également l'œil vers le centre où sera mon nom.

Ce sera la première chose que le public verra lorsqu'il consultera mon site Web, de sorte qu'il s'attendra à ce que le reste du site ait un style ou une sensation similaire. Mon public sera probablement d'autres artistes (une apparence de croquis pourrait être bénéfique), des employeurs potentiels (il devrait être suffisamment propre et poli pour montrer ma capacité à produire quelque chose de professionnel) et, espérons-le, un groupe de collègues nerds (quelque chose d'amusant et de scientifique) serait probablement apprécié par ce public). Sur la base de ces informations, je sais que je veux faire quelque chose avec un style sommaire, beaucoup de lignes et de formes épurées, et éventuellement des planètes ou des lunes en orbite. Je sais également que le site Web aura un schéma de couleurs sombres pour faire ressortir mes pièces de portfolio, donc cette animation devrait avoir un schéma lumineux et saturé pour attirer l'attention avec du contraste.

Il y a tellement de possibilités !!! Mais en faisant des contraintes que je dois suivre, j'améliorerai finalement ma créativité et le produit final.

2. Conseils pour l'animation Web

Maintenant que vous savez comment et que doit faire votre animation d'un point de vue pratique et marketing, utilisez ces conseils pour générer la meilleure idée pour votre animation.

1. Les animations sont des porcs d'attention: Les animations seront souvent les seules choses qui bougent sur une page Web et attireront BEAUCOUP d'attention. Utilisez-le à votre avantage, mais sachez qu'il peut détourner l'attention d'informations plus importantes.

2. Ne soyez pas prévisible: les humains savent très bien reconnaître les motifs et une animation qui se répète de manière simple peut devenir ennuyeuse très rapidement. Ajoutez plusieurs objets à l'animation qui se déplacent différemment dans l'animation, ont une durée différente, ou même commencent à un moment différent pour créer une boucle beaucoup plus dynamique et attrayante.

3. Évitez les boucles de bégaiement: Une bonne façon de commencer à concevoir une animation en boucle est d'avoir la première et la dernière image identiques. Cependant, si vous le maintenez de cette façon, l'animation ressemblera à une pause pendant un moment après le redémarrage car la même image sera lue deux fois! La dernière trame doit être une trame de transition (ceci est discuté dans la partie 3.) pour une boucle continue. J'aime planifier mes animations pour avoir une image de plus que le produit final (25 au lieu de 24), donc je peux supprimer la dernière image et éviter ce problème.

4. Les éléments animés peuvent ajouter de la VIE: N'ayez jamais peur d'adopter une approche subtile, les petites boucles simples peuvent être un merveilleux ajout à une page Web et aider à donner vie à des informations ennuyeuses. L'œil peut voir plus que ce qui est focalisé, de sorte qu'un petit mouvement sur le côté d'un paragraphe peut en détourner l'attention. Cependant, si elle est subtile, petite ou suffisamment lente, elle peut donner l'impression au spectateur que la page Web est réellement vivante car il sera capable de détecter le mouvement tout en se concentrant sur les mots de la page!

5. Diriger l'œil avec un mouvement réel: l'un des principes de l'art est l'idée de mouvement - en utilisant des lignes, un rythme et plusieurs points focaux, vous pouvez essentiellement contrôler la façon dont le spectateur verra l'image en dirigeant ses yeux (regardez vers le haut Théorie de la conception de la Gestalt pour en savoir plus!). Numériquement cependant, vous pouvez faire la même chose avec un mouvement réel. Les gens ont tendance à suivre automatiquement les objets en mouvement, donc aider leurs yeux à aller où vous voulez peut être aussi simple que de faire bouger quelque chose dans cette direction.

6. Mais ne les piègez pas !!!: avec l'animation en boucle, il y a un risque que le spectateur soit piégé, alors essayez de les laisser s'échapper avec des mouvements qui amènent leur œil vers un autre point focal, puis passez rapidement de façon à ce qu'ils sont essentiellement déposés.

7. Contraste: Le contraste entre les éléments mobiles et non mobiles peut être un outil incroyable (regardez comment il est utilisé dans le film!). Utilisez le mouvement pour mettre en surbrillance un objet statique, communiquer une émotion ou, comme mentionné précédemment, ajouter un intérêt supplémentaire en faisant bouger différents objets à des rythmes différents.

PHEW!!! Il y a probablement beaucoup d'autres façons créatives d'utiliser des animations, si vous avez des idées, mettez-les dans les commentaires !!!

3. Esquisser une animation et un cadrage clé

Les esquisses sont, bien sûr, statiques, il peut donc être difficile de déterminer à quoi ressemblera une animation avant de la réaliser. Ci-dessous, je revois comment je planifie des animations sur papier (ou sur un calque plat dans Clip Studio).

Les animations sont généralement planifiées avec des "images clés" - ce sont les images qui montrent les phases les plus importantes du mouvement d'un objet. Pour un saut par exemple, il serait debout, au milieu du saut, et encore debout. Chaque image entre deux images clés est appelée une "image de transition" - elles montrent comment un objet passe d'une image clé à une autre et donne vie à l'animation. Le croquis ci-dessous montre comment je planifie différents types de mouvement avant d'animer réellement une illustration et les conseils suivants devraient vous aider à comprendre pas les lire).

Voici certaines des choses que j'utilise pour faire des croquis comme celui ci-dessus:

1. Trouvez plusieurs croquis avant de planifier et utilisez cette étape pour vous concentrer sur la composition et la conception globale comme vous le feriez pour une illustration fixe (voir mes croquis dans la partie 1).

2. Séparez les objets individuels et planifiez-les séparément pour faciliter la gestion des animations complexes.

3. Dessinez chaque image clé d'un objet en utilisant les suggestions suivantes:

  I. Pour un objet qui ne change que son apparence, dessinez chaque image clé dans l'ordre pour montrer les changements les plus importants.

  II. Pour un objet qui change de position et d'apparence, il est utile de dessiner chaque image clé dans la position où elle se trouvera par rapport aux autres images clés. Cela vous permet de garder une trace des deux types de changement.

  III. Pour un objet qui ne change que de position, il peut être utile de dessiner une seule image clé et d'indiquer où l'objet sera par rapport à un objet statique dans la conception (la ligne centrale d'un cercle par exemple).

4. Notez toujours comment vous voulez que les images de transition façonnent l'animation, mais ne dessinez pas chacune (vous le ferez plus tard!).

5. Chaque image de transition est séparée par le même laps de temps, donc plus vous avez entre les images clés, plus cette action sera lente (et vice versa). J'utilise personnellement des lignes pour garder une trace du nombre d'images que je veux et où ou quand je veux qu'elles soient.

6. Faites en sorte que chaque objet termine sa boucle dans le même nombre d'images (25 dans ce cas afin que nous puissions couper l'image clé répétée). Numérotez vos images clés pour en garder la trace (l'image clé 1 sera l'image 1, l'image clé 2, 3, etc. sera quelque part entre les images 2 et 24, puis l'image clé finale qui devrait être la même et l'image clé. 1 sera à 25). Cela garantit que vous ne faites pas accidentellement un objet plus long que les autres et vous forcez à refaire l'animation.

7. Si vous voulez qu'un objet répète plusieurs fois un mouvement mais que vous ne pouvez pas diviser le nombre total d'images facilement (25 ne peut pas être divisé par 2 ou 3 par exemple), vous pouvez alors prévoir que l'objet ait deux cycles similaires. Par exemple, j'ai prévu que la planète passe par un cycle de 12 images, puis un autre presque identique de 13 images.

8. Faites une chronologie comme celle ci-dessous. Tracez une ligne pour toute l'animation et tracez une ligne à côté de celle-ci indiquant la longueur relative, le point de départ et la position de chaque image clé pour chaque objet distinct de votre animation. Cela peut vous aider à comparer les vitesses des objets (des images clés plus proches signifient généralement une action plus rapide), vérifier que tous les cycles s'additionnent et effectuer des ajustements pour ajouter plus d'intérêt.

9. Utilisez des symboles pour garder une trace des choses difficiles à décrire ou à dessiner (par exemple, j'utilise une flèche pointant dans les deux sens pour me rappeler quand je veux qu'une animation se répète dans le sens inverse).

10. Lorsque vous essayez de donner à un objet un aspect 3D, bloquez les croquis avec des formulaires de base (les cubes sont particulièrement utiles !!!).

4. Clip Studio Animation!

Il existe de nombreux didacticiels sur la façon d'optimiser votre espace de travail dans Clip Studio, je vais donc simplement passer en revue les éléments de base dont vous avez besoin et comment commencer. N'oubliez pas que j'utilise Clip Studio EX, il peut donc y avoir des différences sur Pro. Cependant, je m'en tiendrai à utiliser seulement 24 images.

Devine quoi? Vous avez déjà fait beaucoup de travail sur papier !!! Créez une nouvelle illustration. Je fais cela pour un site Web donc, pour l'instant, 1920 * 1400 pixels à 72ppi est un bon point de départ. Ne faites pas encore de cette animation une animation!

Faites un croquis de la conception globale ou importez une image de votre croquis sur papier.

Maintenant, créez l'illustration comme vous le feriez normalement, mais utilisez des calques pour séparer les objets.

Selon votre animation, vous pouvez utiliser des calques vectoriels pour rationaliser le processus d'animation comme la vidéo ci-dessous! Pensez à cela et à d'autres méthodes que vous pouvez utiliser pour illustrer et superposer votre conception, cela vous aidera beaucoup.

Une fois que vous avez terminé, placez tous les calques (à l'exception de l'esquisse) dans un dossier. S'il y a des calques qui restent immobiles et qui sont en dessous de tous les autres, vous pouvez les laisser hors du dossier (de même pour les calques qui sont encore et surtout tous les autres).

Enfin, il est temps d'animer! Ouvrez la fenêtre de chronologie et recherchez un bouton qui indique ajouter une nouvelle chronologie et définissez-le pour 24 images. Vous pouvez choisir votre propre fréquence d'images, mais 15 images par seconde est un bon début étant donné le faible nombre d'images dans l'animation. Accédez au menu d'animation en haut et sélectionnez Ajouter un dossier d'animation. Placez votre dossier de calques dans le nouveau dossier d'animation. Maintenant, créez 23 doublons du dossier des calques (j'ai configuré ctrl + alt + d comme raccourci pour cette action). Vous pouvez les parcourir et les renommer en nombres pour faciliter les choses.

Revenez au menu d'animation et sélectionnez modifier la piste, spécifiez par lots les cellules. Assurez-vous que le premier dossier de calques dans le dossier d'animation est sélectionné et sélectionnez le "spécifier le nom de la cellule d'animation existante" dans la boîte de dialogue de spécification par lots, il doit répertorier les noms des premier et dernier dossiers. Cela définira chaque dossier comme un cadre dans votre animation.

En utilisant cette méthode, vous pouvez apporter de petites modifications sans les redessiner à chaque fois, séparer vos objets pour rendre l'animation complexe plus gérable et éviter le gâchis de superposer une illustration encore et encore. Cette méthode est également utile lorsque vous utilisez des couches vectorielles car vous pouvez changer les lignes rapidement et facilement en parcourant chaque image et en ajustant les points de contrôle. Maintenant, vous pouvez parcourir et créer les images clés pour chaque objet exactement où vous voulez qu'elles soient, puis commencer à créer les images de transition comme vous l'aviez prévu dans vos chronologies.

Alternativement, vous pouvez séparer chaque objet (chaque couche) dans différents dossiers d'animation et créer des doublons de chaque couche - cela peut être bénéfique de plusieurs façons.

À PARTIR DE!!!

5. Finalisation

Enfin, vous pouvez tout tester! Jouez la chronologie pour voir votre travail prendre vie!

S'il y a quelque chose qui semble anormal, assurez-vous d'essayer de comprendre pourquoi il agit bizarrement, puis revenez en arrière et corrigez les images de transition qui causent le problème.

Une fois que vous avez terminé de résoudre les problèmes, vous pouvez parcourir et polir toutes les pièces qui semblent désordonnées ou incomplètes.

Personnellement, j'ai réalisé que deux des planètes sont accidentellement devant les rayons sur les côtés de l'étoile, j'ai besoin de refaire l'animation pour mon nom, et il y a des lignes en désordre là-dedans!

REMARQUE: vous ne pouvez pas rendre une animation plus fluide simplement en ajoutant plus d'images et en augmentant la fréquence d'images. Il est beaucoup plus important de créer des images de transition bien conçues en utilisant les principes de l'animation comme le squash et l'étirement, l'arc, le retard et autres que d'ajouter plus d'images de transition.

6. Utilisation sur un site Web

Exportez votre animation sous forme de gif, c'est le format le plus utilisé et la plupart des créateurs de sites Web tels qu'Adobe Portfolio, Squarespace, etc. devraient déjà prendre en charge les animations en boucle afin que vous (ou un client) puissiez simplement la mettre en place. Sinon, je crains de ne pas pouvoir (encore) aider mais il devrait y avoir beaucoup de tutoriels de développement web sur ce sujet et d'autres.

7. Amusez-vous!

Si vous voulez en savoir plus sur les processus et méthodes que j'utilise, faites-le moi savoir et je pourrai faire des tutoriels plus détaillés! Toutes les questions sont les bienvenues!

Woohoo! Nous l'avons fait!