Bannière d'animation. Comment faire une bannière GIF animée.

Aujourd'hui, nous examinerons une leçon non très simple, mais une leçon très intéressante pour créer une bannière gif animée.

Pour être plus claire de ce dont nous parlons et que, à la fin, nous examinons le résultat final de nos autres travaux.

Aujourd'hui, les bannières les plus populaires faites pratiquement sur tous les sites Web et sur tous les réseaux d'échange de bannières sont la bannière basée sur GIF ou une animation flash de la taille standard: 468x60, 100x100, 120x60, 88x31.

Nous allons envisager un exemple de création bannière animée Avec des dimensions de 468x60, qui est l'exemple susmentionné.

Donc, la première chose à faire est de déterminer comment vous aimeriez que votre bannière ait l'air finalement. Proposez une partie de texte et le concept des mouvements de mots, d'images et d'autres. Essayer de créer une animation sans y penser du début à la fin - une entreprise en vrac.

Comme on peut le voir sur l'exemple, la bannière n'est pas compliquée du tout et a trois étapes d'informations.

1. Le premier bloc de texte "Créer votre site Web" implique des informations sur le questionnaire.

2. Le deuxième bloc de texte "peut chacun" comme si la réponse à elle.

3. L'essence d'information de la bannière elle-même. C'est-à-dire une réponse clairement formulée, où apprendre cela))

Je pense que la théorie suffit. Pratique du Seigneur!

Créer nouveau document Avec des dimensions de 468x60 pixels.

Maintenant, mettons toutes les parties des informations de bannière sur une couche séparée. (Dans la photo ci-dessous, j'ai percé des fichiers de clarté, vous devez le faire dans un seul document, en plaçant simplement les couches sur l'autre)

En outre, nous aurons besoin de quelques images de fond, dans notre cas, il s'agit d'une texture avec des divorces bleuâtres. Il doit également séparer les couches.

Nous allons maintenant dans le menu déroulant de la fenêtre et allumez le panneau d'animation.

Voici les mêmes couches, uniquement avec la possibilité de déployer tout le monde.

Dans l'état déployé, chaque couche présente plusieurs paramètres.

Positionner - Responsable de déplacer la photo située sur cette couche.

Opacité. - Responsable de la transparence

Style. - responsable d'apporter à la photo de la couche de styles, c'est-à-dire Ombres, éclairage, extrusion et autres.

HABILLAGE DE TEXTE.(Si cette couche de texte) est conçue pour courburer le texte.

Chacun de ces paramètres a sa propre piste temporaire sur laquelle les marqueurs peuvent être placés, comme si la fixation de l'état actuel.

La méthode de construction d'une animation est simple à la folie. Par exemple, nous avons besoin de la photo pour passer à gauche de la droite. Pour ce faire, cliquez sur l'horloge à côté de la position d'inscription, après quoi nous déplacons le coureur vers la droite au point souhaité de la chronologie et simplement par la photo sur le côté. Le programme lui-même ajoutera toutes les cadres nécessaires. Vous ne serez laissé que pour ajuster la période de temps, avec l'aide de marqueurs sur la chronologie. La même manière fonctionne la transparence, l'ajout de styles et de texte de courbure.

Vous trouverez ci-dessous un exemple pour la propriété de transparence (opacité).

Faites cette étape avec l'animation de texte pour disparaître sur la première couche "Créer votre site". Si vous regardez attentivement la bannière au sommet de la leçon, puis remarquez qu'en plus de la disparition du texte, il y a aussi une illumination. L'animation de l'éclairage est similaire aux actions de transparence, mais lorsque l'éclairage de lueur extérieur est allumé dans les propriétés de la couche. La trame initiale est l'éclairage avec le paramètre \u003d 0, et en finale:

En outre, il existe un effet de lueur interne sur la couche, il est responsable de la lumière intérieure du texte. Les actions effectuées sont identiques. La trame initiale est une petite valeur, l'ultime - grand.

La couche suivante "peut chacune chacune" fonctionne de la même manière, mais avec la condition de décalage de la chronologie, car la deuxième couche commence à être affichée après la première devenue complètement transparente.

Et un de plus, la dernière couche au numéro 3, sur la chronologie, commence à agir lorsque la seconde est devenue complètement transparente.

La première fois est difficilement improbable de réussir, alors cela viendra essayer, mais tout vient avec l'expérience.

Après chaque partie se conformera clairement à sa zone de temps, vous pouvez supposer que tout est prêt. Maintenant cliquez Ctrl + Shift + ALT + S (Enregistrer pour le Web)et nous sauvons notre bannière dans format gifComme vous le savez déjà, il soutient la préservation de l'animation.

Salut les amis! Aujourd'hui, je suis venu parler de la façon dont créer une animation ou dans Photoshop. Pourquoi avez-vous besoin? Si vous gagnez votre blog avec, il arrive généralement avec l'aide de bannières.

La plupart des hommes d'affaires info offrent à leurs partenaires déjà des bannières prêtes, à la fois animées et sous la forme d'une image simple avec votre lien d'affiliation. Il ne reste plus qu'à copier le code et à l'installer sur votre blog.

Et si vous décidez de ne pas mettre la photo fournie par le propriétaire du programme d'affiliation dans lequel vous participez, mais pour vous faire la vôtre? Ou ce petit homme ne vous a pas fourni quelque chose à l'exception des liens d'affiliation. Oui, et ça arrive.

Je pense que beaucoup seront d'accord avec moi que l'attention des visiteurs de blog est mieux attirée par les images animées que l'habituelle. Augmentant ainsi la conversion des transitions et des ventes.

Commençons et commençons à créer une animation à partir d'images dans le programme Photoshop. En conséquence, nous aurons une bannière qui changera son contenu, c'est-à-dire qu'elle deviendra animée.

Et ainsi, lancez le programme Photoshop. J'espère que cela est installé.

J'ai une version russifiée de Photoshop (CS6), donc je ferai mon animation et raconter comment cela se fait.

Dans le menu, sélectionnez "Fichier - Créer", afin de créer un nouveau document.

Dans la fenêtre qui s'ouvre, nous définissons nos paramètres de la future bannière animée. Je recommande que les dimensions (hauteur, largeur) ne soient pas au hasard, mais choisissez la norme. Par exemple, je choisis une des tailles de bannière standard, est de 468 x 60 pixels. Cliquez sur OK".

Nous avons un document propre dans lequel nous ferons déjà une animation.

Mon animation ne comportera que du texte, c'est-à-dire que le texte se remplacera à une certaine période que nous allons installer un peu plus tard. Vous pouvez utiliser uniquement des images, ou une utilisation et des images et des images. Mais rappelez-vous, plus vous utiliserez des images pour votre bannière animée, plus elle pesera.

Et ainsi, dans le menu avec Photoshop Tools, je choisis l'outil de texte. J'écris le texte sur moi sur le document que nous créons et appuyez sur la case à cocher en haut de la fenêtre. Notre texte est créé sur un nouveau calque. Comment choisir et configurer la police, la couleur de la police, j'espère que vous savez.

Maintenant, nous éteignons le calque avec le premier texte en cliquant sur le globe oculaire à côté de la couche souhaitée, puis en sélectionnant l'outil "Texte", écrivez la chaîne suivante. Le nouveau texte apparaît à nouveau sur le nouveau calque.

Maintenant, nous avons trois couches. La première couche est un arrière-plan que vous pouvez verser de n'importe quelle couleur et deux couches avec du texte.

Nos couches à créer une animation (bannière animée) sont prêtes. Nous nous tournons maintenant vers la création d'une animation de bovins et faire revivre notre bannière.

Dans le menu, accédez à l'onglet "Fenêtre" et mettez une tique à côté de l'élément "Échelle de temps".

Au bas de la fenêtre Photoshop, une fenêtre d'outils de "échelle de temps supplémentaire" devrait apparaître. Il a déjà le premier cadre de notre animation. Étant donné que mon animation ne comportera que deux cadres, je crée un autre cadre. Pour ce faire, cliquez sur l'icône "Copier Copy Creation" (voir la figure).

Maintenant, nous avons deux cadres avec le même contenu. Nous avions besoin que le contenu du personnel soit différent de sorte que le texte ou la photo de notre bannière animée a changé lorsque le cadre est affiché.

Faites cliquer sur la première image, allouée ainsi. Ouvrez maintenant la fenêtre avec nos couches et laissez les icônes d'icônes uniquement à côté de ceux qui devraient être sur le cadre. Dans mon cas, c'est l'inscription "Faire une bannière animée" et une couche avec un fond.

Ensuite, nous mettons en évidence la deuxième image en cliquant dessus. Nous allons à nouveau sur des couches et allumez ces couches qui doivent être sur la deuxième image. Extraly éteindre. Dans mon cas, c'est à nouveau la couche d'arrière-plan et la deuxième inscription "dans le programme Photoshop". La couche "Faites une bannière animée" Je désactive, car sur la deuxième image, il ne suffit pas d'être.

En principe, notre animation est prête. Mais si nous commençons maintenant en cliquant sur le bouton de lecture sous l'échelle de temps, il fera défiler avec une vitesse folle. Tous en raison du fait que par défaut, pour chaque image, le temps de spectacle est 0 sec.

Nous devons afficher l'heure de chaque image pour changer. Pour ce faire, cliquez sur le triangle, à côté du compteur de temps et dans la liste qui s'ouvre, sélectionnez l'heure dont nous avons besoin. Je mets 2 sec. Pour chaque cadre.

Maintenant, nous commençons notre animation à nouveau et voyons le résultat. Si tout vous convient, vous pouvez passer à la préservation de notre bannière animée.

C'est ce qui s'est passé en moi le long de cette leçon.

Pour une meilleure compréhension de la manière de créer une animation dans Photoshop, j'ai enregistré une leçon de format vidéo. Regardez et laissez votre commentaire 🙂

La prochaine fois, nous examinerons que lorsque vous cliquez dessus, vous pouvez aller sur d'autres sites.

C'est tout! À de nouvelles réunions.

D'où vous apprendrez comment faire une bannière gif animée pour le site. En outre, la leçon examinera le processus optimisation de l'animation graphique Et la question de l'installation de bannière sur le site. Donc, ce sera intéressant. Va.

Chaque jour, nous voyons un grand nombre de toutes sortes de bannières, non seulement sur Internet, mais aussi dans vrai vie. Dans n'importe quelle ville, vous pouvez rencontrer des affiches en bordure de route avec la publicité - c'est aussi une sorte de bannières. La publicité, la publicité, où ne pas regarder de la publicité. Qu'est-ce qu'une bannière? Découvrons-le.

Qu'est-ce qu'une bannière?

Comme une seule encyclopédie Wiki intelligente, alors

Ainsi, la bannière semble être comme "Appât"pour le client afin qu'il a cliqué sur lui et attrapé "Sur la canne à pêche". D'ici il suit la bannière doit attirer Notre point de vue et causer une émotion. Mais à ce sujet un peu plus bas.

Quelle est la taille des bannières graphiques?

Il y a d'innombrables formats différents de bannières. Je te donnerai seulement une liste incomplète tailles standard des bannières:

88 × 31, 100 × 100, 100 × 200, 120 × 60, 120 × 90, 120 × 240, 125 × 600, 125 × 125, 125 × 250, 160 × 60, 160 × 120,160 × 240,160 × 600, 240 × 400, 250 × 250, 336 x 280, 460 × 60, 728 x 90 Et beaucoup d'autres.

Comme vous pouvez le constater, il y a beaucoup de tailles - choisissez que je ne veux pas!. En plus de la liste ci-dessus, vous n'avez personne empêchant la bannière dans ses dimensions uniques.

Bannière - En tant que déclencheur psychologique

Publicité, publicité, mais où sans elle. La publicité - comme on dit, il s'agit d'un moteur de commerce et de faire du travail publicitaire, besoin d'une bannière efficace, afin d'attirer. Pour que nous voulions que les biens et le service annoncent une bannière.

Comme faire enchaînement bannière? Et ces amis sont une science entière. Ne crois pas? Ensuite, assurez-vous de trouver et de lire livres de Viktor Orlova (Magie de vos textes, super-rubrique, copyright elle-même, mots magiques). Après avoir lu, vous n'aurez pas de doutes sur la manière de faire une bannière publicitaire du texte correctement.

Si vous pouvez décrire plusieurs, l'attraction du client passe à plusieurs étapes:

• Nous indiquons le problème dans la question (mal de tête? L'argent est nécessaire? Nous avons besoin d'un site? Etc.)
• Nous informons qu'il y a une tablette magique
• Vouloir en savoir davantage? Et appelez l'action (acheter, cliquez sur, commandez, regardez ici, cliquez sur le lien, etc.)

Rien ne rappelle? Ouais, le même magasin sur le canapé. Tout est construit sur la psychologie humaine et cela fonctionne donc. Vous voyez des amis, toute cette science. Donc, qui est intéressé, courir derrière les livres de Vika Orlov dans un magasin ou recherché sur Internet.

Et comment cette science s'applique-t-elle à notre leçon? Tout est simple, nous ferons bannière animéequi consistera en trois diapositives différentes. Chaque diapositive est une étape séparée de la liste ci-dessus. Attrapé un moment? Êtes-vous prêt à faire votre bannière teintante? Ensuite, nous commençons et et pour cela, nous n'en aurons besoin que d'un.

Comment faire une bannière GIF animée dans GIMP?

Étape 1.Cours Éditeur Gimp Et créer un nouveau projet. Pour cet exemple J'ai choisi la taille de la bannière de 468 × 60 pixels. Vous pouvez choisir l'autre que vous aimerez le plus.

Étape 2.Comme je l'ai mentionné ci-dessus, notre bannière sera composé de trois cadres, c'est-à-dire Nous devons créer trois couches séparées avec vous. Rappelez-vous comment avons-nous fait? Maintenant, pour le lieu de couches avec des chiffres, nous aurons des couches avec des inscriptions de texte, la différence de principe n'est pas.

Et de sorte qu'une image soit montrée plus rapidement, et l'autre, par exemple, la dernière image de l'animation, a été retardée plus longtemps, nous allons changer l'heure indiquée de la trame, en définissant divers paramètres au calque.

Pour créer une inscription de texte, choisissez l'outil "texte" et créer une inscription

Étape 3. Maintenant, vous devez combiner la couche de texte avec le blanc blanc. Cliquez sur le bouton de la souris droit de la couche supérieure et choisissez "Fusionner avec le précédent".

Étape 4.C'est la première image, indiquant le problème, nous sommes prêts. Nous allons plus loin et créons une nouvelle couche avec un remplissage blanc en cliquant sur la "Création d'une nouvelle couche".

Ensuite, nous choisissons à nouveau l'outil "texte" et écrivez l'inscription

En outre, nous combinons la couche de texte avec un substrat blanc. Pour le moment, nous avons déjà deux couches distinctes dans le panneau de couches.

Étape 5.Créez une autre couche blanche et texte. Cette fois, j'ai choisi la couleur du texte noir, pas rouge.

Changez la couleur du premier plan sur le bleu.

Choisir un outil "Brosser" Et peindre l'inscription "ici". C'est ce que j'ai fait.

Nous combinons une couche avec du texte et du fond blanc, comme nous l'avons fait plus haut. À la suite de ces actions, nous sommes prêts pour trois cadres, notre avenir bannière animée. De plus, pour la simplicité, vous pouvez renommer des couches, par exemple, comme ceci:

Étape 6. Maintenant, pour un effet stimulant, ajoutez avec l'aide de ces brosses, un petit curseur à main sous l'inscription "ici". Comment installer de nouvelles brosses sur l'éditeur Gimp, vous pouvez.

Curseur Ajouter à la couche supérieure