Cours GIMP. Animation du mouvement de l'eau dans une rivière. Comment créer de belles animations avec Gimp

Les images animées au format GIF se trouvent partout sur Internet. Bannières, boutons, logos, tous, même en utilisant de petites animations, ajoutent une certaine dynamique au contenu de la page. Il existe de nombreux programmes différents destinés spécifiquement à créer des images GIF animées.
Cependant, la plupart d’entre eux ne peuvent travailler qu’avec des images toutes faites, en les déformant ou en les déplaçant dans l’espace. Il est donc tout à fait logique de créer des images animées à l'aide d'un programme avec lequel vous pouvez également dessiner. Ci-dessous, je veux montrer à quel point il est facile de créer un effet d'animation à l'aide de GIMP.

Cependant, d’abord, parlons un peu de l’idée même d’un gif animé. Le format GIF permet de stocker une image sous la forme de plusieurs calques, chacun pouvant représenter une image distincte. L'idée est que pour chaque calque d'une image GIF, vous pouvez définir la durée pendant laquelle il sera affiché. Ainsi, en alternant les calques, vous pouvez obtenir une animation.

Ainsi, comme mentionné ci-dessus, pour créer un gif animé, vous devez disposer de plusieurs calques (en savoir plus sur l'utilisation des calques dans GIMP). Regardons un exemple simple. Créez une nouvelle image. Laissez la couche inférieure blanche. Sur les quatre autres nous dessinerons les lettres du mot GIMP apparaissant. Le moyen le plus simple de procéder est d'écrire une inscription sur un nouveau calque, puis de créer quatre copies de ce calque et d'effacer les lettres inutiles dans chacune d'elles. Cela donnera cinq calques, dont l'un est l'arrière-plan, les quatre autres représentent le mot GIMP lettre par lettre : Enregistrez maintenant l'image résultante au format GIF ( Fichier - Enregistrer sous). Après cela, GIMP vous demandera d'exporter l'image au format GIF. En même temps, il vous laissera choisir de combiner les calques en une seule image ou de les enregistrer sous forme d'animation. Parce que nous sommes intéressés par l'animation, sélectionnez la seconde et cliquez sur "

Exporter ". Après cela, un menu de sélection des paramètres du gif animé s'ouvrira : Les deux premiers paramètres définissent les propriétés générales de gif - ce sont entrelacement Et

- commentaire. Lorsque cette option est activée, les calques alterneront à l'infini, c'est-à-dire une fois le dernier calque affiché, le premier sera affiché. Si cette option est désactivée, l'animation sera jouée une fois et s'arrêtera à la dernière image du calque.

- Délai entre les images- temps en microsecondes pendant lequel chaque couche sera affichée par défaut.

- Position du cadre- dispose de trois modes. Premier (par défaut) - Je m'en fiche (peu importe), dit à GIMP de le gérer lui-même. Deuxième - Combiner (superposition de calques), superpose un calque sans supprimer les précédents, c'est-à-dire les unit. De cette façon, si vous avez des zones transparentes dans vos calques, les calques précédents apparaîtront. Par défaut, GIMP utilise généralement ce mode car c'est le plus flexible. Je l'utilise toujours aussi. Troisième mode - Remplacer (une image par calque)

, remplace le calque précédent par un nouveau.

Utilisez la disposition des calques par défaut et définissez le temps entre les images sur 200. Le résultat devrait être un gif comme celui-ci :

Si nous ouvrons maintenant ce gif en utilisant GIMP, nous verrons que dans la boîte de dialogue des calques, un paramètre a été ajouté au nom de chaque calque entre parenthèses - temps d'affichage. Ainsi, en modifiant la valeur entre parenthèses, vous pouvez définir pour chaque couche sa propre durée d'affichage personnelle. Par exemple, définissez le dernier calque sur 500 pour conserver le texte intégral à l'écran plus longtemps. C'était l'exemple le plus simple de création d'une animation. Mais on en veut toujours plus ! Il est temps de passer à l'élément de menu spécial Filtres - Animation, . Il contient trois points - Lecture Optimisation

- Filtres - Animation Et

Désoptimisation . Voyons ce que c'est : . Cet élément nous permet de lire l'image d'animation nouvellement reçue : Ci-dessus un gif animé simulant le fonctionnement de ce filtre lancé par le bouton Démarrer/Arrêter. Ainsi, vous pouvez voir que ce bouton démarre la lecture de l'image et l'arrête également. Bouton

- .. Lorsque j’ai utilisé ce filtre pour la première fois, mon plaisir était sans limites. Le fait est que chaque calque d'un gif animé est en fait une image distincte, et en enregistrant un gif en tant qu'animation, nous enregistrons plusieurs images à la fois. Ainsi, avec un grand nombre de calques, la taille de notre gif animé va croître sous nos yeux, ce qui n'est pas bon, compte tenu de la volonté de minimiser la taille des images pour le web. Une solution pourrait consister à réduire manuellement la taille de chaque couche et à détruire les morceaux en excès. . Oubliez ça !!! Filtre

fera tout pour vous en un rien de temps !!!. Le filtre fait approximativement ce qui suit : il calcule chaque couche et trouve les points modifiés par rapport au précédent et ne les laisse que, en modifiant la taille de la couche au minimum possible (c'est-à-dire en coupant aux points modifiés extrêmes). Dans ce cas, tous les points inchangés à l'intérieur de ce calque seront remplacés par des points transparents. Prenez votre gif nouvellement créé avec la légende GIMP et appliquez ce filtre. Comme vous pouvez le voir, il ne reste qu'une seule lettre dans chaque calque, et toute la couleur blanche a été remplacée par du transparent, car... cela ne sert à rien de le glisser dans chaque calque, en ayant le même fond blanc pour tous. De plus, un autre paramètre est apparu dans le nom du calque entre parenthèses - . combiner Le filtre fait approximativement ce qui suit : il calcule chaque couche et trouve les points modifiés par rapport au précédent et ne les laisse que, en modifiant la taille de la couche au minimum possible (c'est-à-dire en coupant aux points modifiés extrêmes).. C'est exactement le mode position du cadre. Après avoir appliqué le filtre

ce mode comptera toujours Le filtre fait approximativement ce qui suit : il calcule chaque couche et trouve les points modifiés par rapport au précédent et ne les laisse que, en modifiant la taille de la couche au minimum possible (c'est-à-dire en coupant aux points modifiés extrêmes)., c'est-à-dire le nouveau cadre sera ajouté aux précédents. . Essayez de changer ce paramètre en position du cadre remplacer
et vous obtiendrez quelque chose comme ceci : . Le même effet pourrait être obtenu avec le régime , en ne laissant initialement qu'une seule lettre dans chaque calque et en appliquant un filtre.

- Lecture Lorsque j'ai créé chaque surbrillance dans un nouveau calque séparément du bâtiment, une fois enregistré en tant que gif, il a perdu la moitié de ses rayons et a cessé d'être flou. Ensuite, j'ai copié l'image du bâtiment dans chaque calque, j'ai peint des reflets dessus et je l'ai optimisé. En conséquence, j'ai obtenu ce que je voulais et la taille du fichier a été réduite de trois fois par rapport à celle non optimisée !

. Filtre d'optimisation inverse. Jusqu'à présent, je n'ai pas trouvé d'utilisation appropriée, mais il est possible que cela s'avère utile lorsque vous devez apporter des modifications à une image optimisée.
1 Nous avons donc couvert les principes de base de la création de gifs animés à l'aide de GIMP. En résumé, nous pouvons tirer les conclusions suivantes :
2 . Chaque image d'animation représente un calque d'image distinct.
3 . Chaque image peut être spécifiée avec deux paramètres : le temps d'affichage en microsecondes et son type, combiner ou remplacer. Les paramètres sont spécifiés dans le nom de la couche et sont mis entre parenthèses, par exemple : Layer1 (1000ms)(combine).

. L'optimisation des calques vous permet de réduire considérablement la taille de l'image d'animation.

Il s'agit des techniques de base pour créer des images GIF animées à l'aide de GIMP. J'espère que vous avez trouvé ce court article utile. Si vous avez des commentaires ou des ajouts, n'hésitez pas à m'écrire par e-mail.

Gimp

Ceci est un tutoriel pour Gimp. Pour être honnête, je ne suis pas très doué pour dessiner à la main, mais avec des programmes comme Gimp, mes capacités artistiques ont augmenté. Je veux remplir Akak.ru avec mes instructions Gimp et aider de nombreuses personnes qui en ont assez des jouets informatiques, qui perdent du temps sur Internet et un travail excessif dans WordPade. J'espère que vous l'apprécierez !

Instructions

Niveau de difficulté : Facile

• Ce dont vous aurez besoin :
• Fantaisie

Intérêt

1 étape

Combat d'ombres

Commençons par créer un dessin vierge. Utilisez ensuite l'outil de remplissage à plat. Sélectionnez la couleur souhaitée, maintenez la touche Ctrl enfoncée et déplacez la bande vers le bas. Tout devrait ressembler à l’image.

Étape 2

j'ai choisi cette couleur

Maintenant, nous avons besoin de « couleur » - « teinture », sélectionnez la couleur et enregistrez. Vous pouvez choisir n'importe quelle couleur, mais gardez à l'esprit qu'à l'avenir, il y aura un logo sympa avec votre nom sur ce fond.

Étape 3

Effet peau de serpent

Travaillons maintenant avec les filtres. Cliquez sur « filtres » – « distorsion » – « mosaïque ». Entrez les paramètres dont vous avez besoin et enregistrez. Cet effet peut être utilisé pour créer des fresques, des sphères, des fonds et pour rien.

Étape 4

Nous devons maintenant imprimer quelques mots. Pour ce faire, nous prenons un outil qui ressemble à une lettre ;), sélectionnons la police dont nous avons besoin et écrivons quelque chose. J'ai choisi mon nom. Après avoir tapé, utilisez l'outil « sélection épileptique » et tracez le texte de manière à ce qu'il ne reste pas beaucoup d'espace à proximité du texte. Prenons maintenant les « filtres » – « lumière et ombre » – « supernova ». Après avoir placé une « étoile » dans la zone de sélection, prenez l’outil doigt et étalez l’étoile autour du texte.

Étape 5

Et maintenant le plus important ! Animation. Prenez « filtres » – « animation » – « création d'une sphère (boule) ». Laissez les paramètres tels quels et enregistrez. Une nouvelle fenêtre devrait apparaître. Pour visualiser l'animation, allez dans « filtres » – « animation » – « lecture ». Une nouvelle fenêtre apparaît, vous appuyez sur play et regardez votre création. À propos, la vitesse de visualisation peut être ajustée à l'aide du coin inférieur gauche.

Étape 6

" option. Maintenant, nous prenons l'animation appelée « ondulations ». Nous faisons tout comme dans l'étape ci-dessus. Vous devez sauvegarder les animations d'une manière spéciale ! Cliquez sur « fichier » – « enregistrer sous... » et entrez le nom de votre photo. En bas il y a une fenêtre "sélectionner le type de fichier par...", PRENDRE LE FORMAT GIF, sinon vous n'aurez qu'une image. Nous enregistrons, une nouvelle fenêtre apparaît et là, vous devez sélectionner « enregistrer comme animation ». Et la photo est enregistrée

Bonne journée, chers amis ! Je vous propose une leçon simple sur l'utilisation d'un éditeur graphique Gimp.

Une petite parenthèse de la leçon ! La dernière fois, j'ai parlé d'un petit concours dédié à la sortie du livre.

Je vous rappelle encore une fois les conditions du concours : « Vous devez trouver un mot dans lequel J'ai réorganisé une lettre. À la suite de ces manipulations, il s'est avéré un mot complètement nouveau! Les gagnants recevront 100 roubles sur leur portefeuille électronique. Il y aura un total trois chanceux, que l'ordinateur sélectionnera au hasard parmi les 20 premiers qui m'ont envoyé le numéro de page sur laquelle vous avez trouvé l'erreur. Le concours aura lieu jusqu'au 10 septembre inclus . J'attends vos messages avec numéro de page. Des amis plus actifs ! Nous cherchons, nous cherchons. Petit indice : « Erreur après la page 50 »

Maintenant, revenons à notre leçon.

Étape 1. Ouvrez l'éditeur et créez une nouvelle image (j'ai choisi la taille par défaut 640 - 480)

Étape 3. Sélectionnez « Texte » dans la barre d'outils. J'ai laissé la police par défaut (j'ai « Sans ») et saisi la taille 180. Après cela, cliquez sur le canevas de travail pour activer la zone de texte et entrez le chiffre « 1 » à partir du clavier.

Étape 4. Après cela, nous devons déposer le numéro au centre du calque. Sélectionnez l'outil « Aligner » (1) et cliquez une fois sur le chiffre (2) pour activer les options. Après cela, cliquez sur les icônes (3) et (4) une par une.

Étape 5. Combinons maintenant le calque de texte avec le calque d'arrière-plan. Pour ce faire, faites un clic droit une fois sur le calque supérieur et dans le menu contextuel qui s'ouvre, sélectionnez « Fusionner avec le précédent »

Étape 6. Créons deux autres calques de la même manière, mais cette fois avec les chiffres "2" et "3".

Étape 7 Maintenant que nous avons créé trois calques, il est temps de commencer à animer. Il y a une règle importante à retenir ici :

Les calques du panneau Calques sont les nôtres images d'animation. La couche inférieure correspond à la première image, etc.

Pour créer l'animation, allons à

"Filtres - Animation - Lecture"

Dans la boîte de dialogue qui s'ouvre, cliquez sur "Jouer" et voyez à quelle vitesse nos chiffres changent :-)))

Très vite ? N'est-ce pas vrai ? Comment pouvons-nous ajuster la vitesse de nos images ? Tout le monde ici n'est que amis. Pour ce faire, ajoutez simplement une construction comme celle-ci au nom du calque (1000ms), ce qui correspond à une seconde d'affichage de l'image. Regarde ce que j'ai

J'ai ajouté (1000 ms) au nom du calque partout. Après cela, utilisons à nouveau le filtre d'animation mentionné ci-dessus.

Étape 9 Dans la boîte de dialogue qui s'ouvre, cochez la case à côté de « Enregistrer comme animation »

et cliquez sur le bouton « Exporter »

C'est avec quelle rapidité et simplicité vous pouvez faire une animation en utilisant l'éditeur GIMP. C'est tout pour moi. Rendez-vous dans de nouveaux cours.

P.S. Quelles leçons d'animation vos amis souhaitez-vous voir sur les pages du blog ???

Cordialement, Anton Lapshin!

Mots croisés n°3 sur le site

Anton Lapchine

Soit vous disposez d'un ancien navigateur, soit la prise en charge de Javascript est désactivée.
Les mots croisés ne peuvent pas fonctionner.

Affichage de 12 messages - 1 à 12 (sur 12 au total)

Chers gourous de Gimp, parlez-en à un débutant ! Je n'arrive pas à comprendre.

Comment faire une image GIF pour que trois images se remplacent, mais en même temps chacune de ces images a aussi une animation (le texte apparaît) ?!


Faire cette animation manuellement est un processus long et fastidieux (bien que cela soit possible.)
Et Gimp n'est pas le meilleur choix pour l'animation. Le domaine de l’animation est celui des graphiques vectoriels.
Si le problème est privé, c'est à dire. Si vous devez le faire une fois et l’oublier, il est préférable de créer une présentation dans Impress et de l’exporter au format GIF.
(inclus dans le forfait LibreOffice-> http://ru.libreoffice.org/download/)
En même temps, il y a beaucoup d’effets, pas seulement une atténuation. Ce sera bon marché et joyeux.
Si vous souhaitez le faire dans Gimp, vous devez télécharger GAP (GIMP Animation Package)

Vous pouvez lire sur lui en russe :
http://www.gimpbnksb.ru/forum/14-152-1

Garçon, Merci! Je vais essayer ce plugin maintenant et comprendre :)
Le bureau ne convient pas, car la tâche est de réaliser une bannière.

Pouvez-vous au moins décrire les étapes pour créer ce dont j'ai besoin (si c'est long et fastidieux à faire :D) ? et ensuite j'essaierai de le découvrir moi-même...
Je ne comprends tout simplement pas ce qu'il faut faire exactement pour obtenir le résultat souhaité... d'après ce que je comprends, vous devez créer plusieurs calques (séquence - d'abord le calque avec l'image, puis les calques avec les textes, puis le couche de la deuxième image, etc.), puis téléchargez le tout sur GIF, alors ?!

Mon premier conseil n'est plus valable car LibreOffice n'enregistre pas correctement les effets d'animation au format gif.
Comment faire manuellement ?
1. Lisez quelques informations sur GIF
2. Comprendre ce qu'est le mode combiner/remplacement
3. Créez une animation simple et exportez-la au format GIF (par exemple, dessinez une animation d'une balle rebondissante, 4 à 6 images)
4. Créez une version approximative de votre animation
5. Évaluez expérimentalement la taille du fichier de sortie et le besoin d'optimisation
6. Enregistrez l'image dans le mode : Couleur indexée (c'est-à-dire avec sa propre palette)
7. Traitez Gap, cela aidera beaucoup.
8. Pour expérimenter le retard, utilisez n'importe quelle animation. Par exemple:

Si vous avez besoin de faire beaucoup d’animation, passez au flash ; vous pouvez dessiner des vidéos plus sérieuses. La qualité de cette animation est un cran au-dessus.
P.S. La séquence est correcte, il suffit de comprendre quelle est la différence entre combiner et remplacer, ainsi que comment se comporte le canal alpha.

Je ne suis pas d'accord. Cela signifie qu'ils ont fait quelque chose de mal avec le flash. Flash est basé sur des graphiques vectoriels, les polices sont sur des graphiques vectoriels, tous les effets sont de pures mathématiques, la taille du fichier sera petite. La seule chose qui pouvait augmenter la taille de la vidéo finale était des images raster incorrectement importées (soit vous les avez laissées dans le raster, soit le traçage a été effectué avec des paramètres incorrects.)

Et il est fort probable que je fasse quelque chose de mal avec le flash…. :)
C’est juste qu’avant j’avais un partenaire qui s’occupait spécifiquement du design et du graphisme, et je n’étais impliqué que dans le code…. Il est parti et tout son travail m'a été confié, alors maintenant j'étudie ! :)

Je suis très satisfait de l'éditeur ! C’est intuitif si vous restez assis avec pendant un petit moment.

Je pense que j'ai déjà tout réglé, mais j'ai juste une question : est-il possible de faire d'une manière ou d'une autre un délai différent entre l'affichage des calques individuels (images) si je l'enregistre sous forme d'animation au format .gif ? ou le délai est-il défini par un paramètre pour TOUS les calques à la fois dans la fenêtre, alors que je l'exporte déjà au format .gif ?

Il est très simple de réaliser différents délais :
1. Préparez un fichier à partir de plusieurs couches
2. Exporter au format GIF avec commun à tous retard de trame
3. Ouvrez le fichier GIF
4. Dans la pile de calques (boîte de dialogue Calques) à côté du nom du calque, le délai sera indiqué
(100 ms par défaut.) Modifiez cette valeur à 500 ms pour n'importe quel calque, exportez-la à nouveau au format gif et le tour est joué, le cadre se bloquera pendant une demi-seconde.
P.S. Je ne suis pas sûr que tous les spectateurs prendront en charge des délais différents pour les images d'une même animation.

WiL-13 a écrit :
C'est-à-dire qu'une image apparaît, puis il y a des lignes de texte dessus les unes après les autres, puis une deuxième image, dessus il y a aussi plusieurs lignes les unes après les autres, etc...

Si l’animation est simple, alors il est plus logique de la faire en JavaScript ou même en CSS3.
Mais il vaut vraiment mieux arrêter d’utiliser Flash ; la technologie est en train de mourir lentement.

La plupart des bannières animées sur le Web sont des fichiers GIF. Étant donné que GIMP prend en charge le format GIF, rien ne nous empêche d'y créer des dessins animés. Tout le monde sait combien il est difficile, minutieux et long de créer des films d’animation. Mais une simple bannière peut être créée en une heure. Mettez-vous au travail !

L'essence du processus d'animation est que les images individuelles se remplacent à une certaine vitesse. Chaque image sera située dans son propre calque, chaque calque se verra attribuer un temps passé sur l'écran. Tout est, en général, simple.

Le premier exemple est assez simple.

Riz. 1

Avant de se mettre au travail, il est utile de tout calculer pour qu’il y ait moins de complications lors du montage. Si je veux représenter 4 étapes, la longueur de la bannière doit être un multiple de quatre. J'ai 480 pixels. Cela signifie que chaque trace (y compris l'arrière-plan) doit être égale à 480/4 = 120 pixels. Ensuite, nous placerons simplement ces images dos à dos. Avons-nous besoin de transparence ? Non. Chaque couche supérieure doit recouvrir complètement la précédente, sinon aucun changement de cadre ne fonctionnera. Alors commençons.

Créez un nouveau fichier de 120x60 pixels avec un fond blanc. Nous y dessinons l'empreinte de la botte de n'importe quelle manière disponible, de sorte qu'il reste suffisamment d'espace blanc pour la longueur de la marche. Vous pouvez copier la figure 2 (je l'ai fait moi-même, je n'aurais jamais pensé qu'une trace convaincante serait aussi difficile à tracer).

Riz. 2

Puis en utilisant le menu Image -> Transformations -> Retourner verticalement faire un sentier à gauche. Enregistrer au format GIF. Avant de sauvegarder, il est utile de convertir d'abord l'image en image indexée ( Image -> Mode -> Indexé). La taille du fichier sera alors plus petite, ce qui est d'une importance primordiale pour la bannière. Lors de la configuration de la boîte de dialogue, spécifiez 16 couleurs - plus que suffisant pour une bannière en noir et blanc. La question est, pourquoi pas 2 couleurs ? Je l'ai essayé, les impressions sont très grossières et les lettres de la police ont l'air dégueulasse.

Riz. 3

A noter que l'empreinte gauche est décalée vers l'avant par rapport à la droite, cela donne la longueur de foulée.

Ayant terminé les traces, nous créons un fichier principal de 480x60 pixels, fond blanc. Ouvrez la fenêtre Calques : Boîtes de dialogue -> Calques (Fenêtre -> Boîtes de dialogue ancrables -> Calques). Renommez immédiatement (double-cliquez) notre seul calque Arrière-plan. Maintenant, il faudrait l'appeler Arrière-plan (250 ms). Après exactement autant de millisecondes, il permettra à la couche suivante d'apparaître, ce qui le cachera de la visibilité.

Créez un nouveau calque blanc au-dessus du premier calque. À l’aide de la souris, faites glisser le premier fichier de trace dessus. Un autre calque est automatiquement créé à droite.gif. On place la trace au tout début de la « piste » à l'aide de l'outil, ou à l'aide des flèches du clavier.

Ces deux couches supérieures doivent maintenant être fusionnées en une seule ( menu contextuel sur la couche supérieure -> Fusionner avec le précédent).

Nommons le calque fusionné 1(750ms).

Créez à nouveau un nouveau calque blanc. Faites glisser la trace de gauche (si vous ne souhaitez pas faire glisser, vous pouvez utiliser le menu Fichier -> Ouvrir en tant que calque). Nous l'avons mis en place en nous rappelant que la longueur de l'image de trace est de 120 pixels et qu'il y a une règle en haut de l'écran. Nous fusionnons les calques et l'appelons 2 (750 ms).

Puis créez à nouveau un nouveau calque blanc.

Outil Texte crée automatiquement un nouveau calque transparent avec du texte. Après avoir aligné l'inscription, nous combinons les deux couches supérieures sous un nom commun Texte (3000 ms). Voici à quoi ressemble la fenêtre Calques une fois terminée :

Riz. 4

Le dessin animé est prêt. Vous pouvez et devez le visualiser en utilisant le menu : Filtres -> Animation -> Lecture.

S'il y a des défauts, nous les éliminons. Sinon, enregistrez le fichier.

Nous l'enregistrerons au format GIF. Pour ce faire, nous allons : Fichier -> Enregistrer une copie, et dans la fenêtre qui s'ouvre, précisez le nom du fichier pas.gif. Cliquez Sauvegarder b. La boîte de dialogue d'enregistrement GIF apparaît ici :

Riz. 5

Le fichier footstep.gif résultant peut être visualisé sous forme de dessin animé dans n’importe quel navigateur.

La première partie est terminée. Dans la partie suivante, nous parlerons davantage de l'animation dans GIMP.