edito
forum (21 051)
making of
preview newsletter
photoshop shortcuts
plan du site
bétisier (24)
nouveautés (67)
mises à jour
bannières (92)
liste de diffusion
infos légales
 


 

Devenez awares ! Et essayez de survivre.




aperçu
 

 

login | logout
gérez votre profil
devenez membre
membres (2138)
anniversaires (796)
awares (349)
mickeys (342)
notables (83)
modérateurs (9)
votre vie privée

 

 

amis (22)
gfx français (58)
gfx autres (383)
pixel art (67)
ascii art (0)
paint/draw (97)
communautés (27)
portails gfx (16)
ressources (36)
flash (253)
3D (38)
java (2)

proposez votre site
dernières entrées
aléatoire (999)
quicklist
top 10










































999 sites
409 019 hits
 
 

à propos des tutos
tous les tutos (48)
rechercher un tuto

tutos aléatoires
238 055 hits

 

 

screen fonts
brushes
softwares
 
 
 

 

stats publiques
infocentres
référents (1731)
refs quicklist (1731)
visiteurs uniques
awards

2 134 887 hits
 





Voilà de quoi réaliser un effet simple, esprit sélection photoshop avec l'outil . Pour des GIF animés plus complexes, je vous conseille fortement d'autres logiciels tels que flash ou ulead gif animator mais dans ce cas précis, photoshop reste un outil très rapide. A vos palettes...



. 4x4 pixels à 1600%


 
 

Créez un nouveau document de dimensions 4x4 pixels. Choisissez comme couleur de premier plan la couleur des pointillés et d'arrière plan la couleur du fond de votre GIF animé. Dans cet exemple, respectivement orange pour les pointillés et noir pour le fond. Double-cliquez sur l'outil de sélection rectangulaire et cochez Fixed size dans la palette d'options avec 2x2 pixels comme dimensions. Sélectionnez un damier et remplissez d'orange ( Shift-Backspace ). Inversez la sélection ( Ctrl-Shift-I ), inversez les couleurs ( X ) et remplissez de nouveau ( Shift-Backspace ). Sélectionnez tout ( Ctrl-A ) et définissez la sélection en tant que motif de remplissage ( Edit > Define pattern ). Fermez le document sans sauver ( Ctrl-W ).

. cases de 2 pixels


 
 

Créez un nouveau document ( Ctrl-N ) aux dimensions légèrement plus grandes que celle de votre icône finale. Supposons par exemple que vous vouliez une icône finale de dimensions 50x50 pixels. Choisissez alors 60x60 pixels. Sélectionnez tout ( Ctrl-A ) et remplissez avec le motif ( Shift-Backspace ) : contents use pattern. Copiez ( Ctrl-C ). Fermez le document sans sauver ( Ctrl-W ).





. frange de 1 pixel


 
 

Créez un document aux dimensions de votre icône ( 50x50 pixels ). Collez dans un nouveau calque ( Ctrl-V ). Toujours avec l'outil de sélection rectangulaire , séléctionnez la frange de l'icône sur une largeur de 1 pixel.



N'utilisez pas la technique consistant à tout sélectionner ( Ctrl-A ) puis à ne garder que la frange ( Select > Modify > Border ) : la sélection ainsi créée sera anti-aliasée et plus d'un pixel sera sélectionné.



. masque de fusion


 
 

Sélectionnez le calque avec le damier dans la palette des calques et ajoutez-lui un masque de fusion avec la sélection en cours ( Layer > Add layer mask > Reveal selection ). Dans la palette des calques cliquez sur le lien pour désolidariser le calque de son masque. Cliquez sur l'icône du calque pour le sélectionner plutôt que son masque ( icône plutôt que ). Désélectionnez ( Ctrl-D ).





. principe


 
 

Votre GIF animé comporte 4 frames. Vous venez de réaliser la première. Pour la suite, ça va aller très vite Dupliquez le calque (et son masque associé) sur lequel vous avez travaillé jusqu'à maintenant. Sélectionnez l'outil ( V ) et déplacez d'un pixel vers la gauche et un vers le bas ( Ctrl-Gauche puis Ctrl-Bas ). Deuxième frame.

Dupliquez de nouveau le calque et déplacez d'un pixel vers la gauche et un pixel vers le haut ( V puis Ctrl-Gauche Ctrl-Haut ). Troisième frame. Dupliquez et déplacez d'un pixel vers le bas et un pixel vers la gauche. Quatrième frame. Vous êtes toujours sous Photoshop et vous avez maintenant vos 4 frames d'animation dans 4 calques superposés. Lancez Imageready (Ctrl-Shift-M).


. génération du GIF animé


 
 

Cachez vos 4 calques en cliquant sur l'oeil dans la palette des calques. Créez 4 frames vierges (palette des animations). Dans chacune des 4 frames, rendez visible un calque, respectivement frame 1 / calque 1, frame 2 /calque 2... Attribuez une durée à chacun des 4 frames et exportez en GIF animé (Ctrl-Shift-Alt-S).

piregwan
5903 visites











 

Orbital219, 28 07 2002 à 02:30

c'est vrai que j'ai aussi galéré pour adapter ca à un rectangle..j'ai trouvé une "solution" alternative mais elle comporte un léger défaut : sur un carré on peut avoir 4 frames ,on peut faire des rotations..or, sur un rectangle ... Moi j'ai simplement changé le motif de départ en inversant les carrés noirs et rouges... ca fait donc au final que 2 frames donc c'est moins fluide... c'est le seul truc que j'ai trouvé pour l'instant... si un pro passe par là, ce serais pas mal de nous éclairer (Mister Gwan par exemple, vu qu'en regardant juste à coté l'effet sur les boutons de links...c'est encore plus énervant de pas savoir =) ) meurci d'avanceuh


Orbital219 (membre)
34 ans (Namur (belgique))
Orbital219@nihon-fr.com


fixart, 14 06 2002 à 16:55

Moi je voudrais juste connaitre la méthode pour faire cet effet sur un rectangle VOUS POUVEZ M'AIDER?


fixart


libellule, 15 04 2002 à 07:41

Ce tuto devrait être refait.


libellule


tyler, 14 04 2002 à 14:51

En testant ce tuto et en lisant les posts ci-dessus j'ai senti comme une petite difficultée à appréhender la réalisation des pointillés...
Donc j'ai essayé de trouver une soluce alternative qui me semble un peu plus simple et j'en ai fait un petit tuto:
http://www.release...
A vous de juger.
@+


tyler (membre)
44 ans
release911@release911.com
http://www.release911.c...


Torn, 16 03 2002 à 12:07

Salut je voudrai bien savoir comment tu a fait pour selectionnez la Frange de 1 pixel car moi jy arrive po du tout...;)

@+


Torn


piregwan, 08 01 2002 à 09:57

salut

oui il manque une etape, juste après "principe". a la fin de l'étape 5, tu es toujours sous photoshop avec 4 documents pour tes 4 frames. l'étape 6 se passe implicitement sous ton editeur de gif favori (imageready?). a+


piregwan (agent mad fana...)
43 ans (chambéry, 73)
krakoukas@piregwan-genesis...
http://www.piregwan-gen...


( 16 commentaires )
<< 1 2 3 4 5 6 7 8 9 10 11 12 >>

 
















P I R E G W A N . C O M
interface & développement - piregwan 1998-2002




toutes les bannières


généré en 0.065 secondes