Photoshop
[Tuto] Faire un type d?userbar animée
[Tuto] Faire un type d?userbar animée
Nous allons faire une userbar pour les fans de Liverpool en exemple?
Résultat simple :
Résultat avec modifs :
1° Créer un nouveau document :
2° Remplir le fond en rouge avec le pot de peinture :
3° Mettre un texte FC Liverpool (Visitor) et mettez-le en mode incrustation :
4° Faire un nouveau calque en-dessous du texte, faites 3 ronds sous le texte et ensuite ajustez le flou gaussien pour obtenir ceci :
5° Faire un nouveau calque. Mettre des étoiles ( 5 étoiles pour la C1) et réduisez son opacité :
6° Faire un nouveau calque. Collez le logo de Liverpool et réduisez son opacité aux environs de 50% :
7° Faites un nouveau calque. Faire arc de cercle blanc sur l?userbar :
Puis réduire son opacité aux environs de 18% :
8° Faire un nouveau calque, on va faire le contour de l?userbar. Ctrl+a (contour), Edition-contour et là, mettre couleur : noir / épaisseur : 1 pixel / Position : Centre :
Et voici les calques que vous devriez avoir :
Puis passer sous ImageReady :
9° Vous êtes sur imageready. Ouvrir la fenêtre Animation. Mettez-y dedans votre userbar telle quelle :
Reproduisez l?image sélectionnée à l?aide de ce bouton :
10° Là, nous allons faire monter et descendre le logo. Véréfier que le logo soit bien au sommet sur la 1ère animation, nous allons le faire descendre au fond sur la 2ème animation :
Ensuite, cliquez sur le bouton Trajectoire ( à coté de fusionner ). Regarder bien que l?on a la 2ème animation en sélection. Une fenetre s?ouvre, mettez cela :
11° Dupliquez la dernière animation de votre fenêtre (la 27 normalement), puis faites remonter le logo (de l?animation 28 ) à la même hauteur que sur l?animation 1 :
Et refaire la même trajectoire que dans l?étape 10b. Les calques se crééront, il devrait en avoir 53.
L?userbar simple est terminé, mais l?on peut encore lui ajouter quelques modifications?
12° Mettre 1 seconde de pause sur la dernière animation (53) et sur celle ou le logo touche le fond pour ensuite remonter (27) :
13° Finalement, prenez 2 animations ou vous voulez mettre en évidence la partie visible du logo, j?ai choisi l?animation 12 et 42. Mettez-y 2 secondes d?arrêt et mettez l?opacité du logo aux environs de 86%.
Voila, le tuto est terminé, j?espère qu?il vous sera utile.
Aucune reproduction n'est autorisée sans mon autorisation.
© Sébastien 2007, Tous droits réservés.
2° Remplir le fond en rouge avec le pot de peinture :
3° Mettre un texte FC Liverpool (Visitor) et mettez-le en mode incrustation :
4° Faire un nouveau calque en-dessous du texte, faites 3 ronds sous le texte et ensuite ajustez le flou gaussien pour obtenir ceci :
5° Faire un nouveau calque. Mettre des étoiles ( 5 étoiles pour la C1) et réduisez son opacité :
6° Faire un nouveau calque. Collez le logo de Liverpool et réduisez son opacité aux environs de 50% :
7° Faites un nouveau calque. Faire arc de cercle blanc sur l?userbar :
Puis réduire son opacité aux environs de 18% :
8° Faire un nouveau calque, on va faire le contour de l?userbar. Ctrl+a (contour), Edition-contour et là, mettre couleur : noir / épaisseur : 1 pixel / Position : Centre :
Et voici les calques que vous devriez avoir :
Puis passer sous ImageReady :
9° Vous êtes sur imageready. Ouvrir la fenêtre Animation. Mettez-y dedans votre userbar telle quelle :
Reproduisez l?image sélectionnée à l?aide de ce bouton :
10° Là, nous allons faire monter et descendre le logo. Véréfier que le logo soit bien au sommet sur la 1ère animation, nous allons le faire descendre au fond sur la 2ème animation :
Ensuite, cliquez sur le bouton Trajectoire ( à coté de fusionner ). Regarder bien que l?on a la 2ème animation en sélection. Une fenetre s?ouvre, mettez cela :
11° Dupliquez la dernière animation de votre fenêtre (la 27 normalement), puis faites remonter le logo (de l?animation 28 ) à la même hauteur que sur l?animation 1 :
Et refaire la même trajectoire que dans l?étape 10b. Les calques se crééront, il devrait en avoir 53.
L?userbar simple est terminé, mais l?on peut encore lui ajouter quelques modifications?
12° Mettre 1 seconde de pause sur la dernière animation (53) et sur celle ou le logo touche le fond pour ensuite remonter (27) :
13° Finalement, prenez 2 animations ou vous voulez mettre en évidence la partie visible du logo, j?ai choisi l?animation 12 et 42. Mettez-y 2 secondes d?arrêt et mettez l?opacité du logo aux environs de 86%.
Voila, le tuto est terminé, j?espère qu?il vous sera utile.
Aucune reproduction n'est autorisée sans mon autorisation.
© Sébastien 2007, Tous droits réservés.
