Bonjour à tous,
 
Je suis développeur web et je cherche à optimiser un site avant sa mise en ligne en créant des sprites à partir des images (combiner plusieurs en images en une seule en ayant en retour les coordonnées de chacune des précédentes images sur la nouvelle).  
 
Je gère assez bien illustrator, c'est avec lui que j'ai crée toutes les images du site, mais je sèche sur la façon de faire des sprites. Je cherche depuis plusieurs jours des tutos sur le net, sans succès et j'en viens donc demander votre aide. Si quelqu'un pouvait m'aider ou m'orienter ça serait vraiment sympa
 
mercis
 

Je connais pas encore bien Illustrator. Pour ma part j'ai eu a faire un sprite une fois pour un site, je l'avais fait sous photoshop, en notant chaque coordonnée à l'aide du marquee tool et du panneau info...
C'est un peu laborieux, tout dépend du sprite...
Y'a surement meilleure méthode mais comme toi j'ai pas trouvé... même en cherchant un peu partout sur le net...

Salut, merci de t’intéresser à mon problème.  
 
Effectivement je cherche à automatiser la procédure et le faire un par un serait assez contraignant. J'ai un paquet d'images et je voudrais éviter d'avoir à refaire la démarche à chaque modification. Il m'a été conseillé ce site http://www.webinventif.fr/sprites-css/ mais l'idéal serait qd même de tout faire avec illutrator. Il gère les maps et exporte les css dont il n'y a pas de raison qu'il ne fasse pas les sprites (d'autant que c'est assez courant dans l'infographie du web). Reste à trouver comment.
 
Après, exporter vers photoshop pour faire les sprites peut-être une solution, mais là non plus jvois pas comment faire. D'ailleurs, je connais moins bien photoshop qu'illustrator...

Il y avait un bon article sur le très bon smashing mag
http://www.smashingmagazine.com/20 [...] tutorials/
 
Deux autres liens intéressants, dont qui permet de faire des sprites facilement...
http://www.thebrightlines.com/2009 [...] photoshop/
http://spriteme.org/

C'est quoi qui te pose problème exactement?

ah je connaissais pas ce procédé de sprite c'est excellent
ca s'apparente un peu a un depliage UV en 3D non?

Salut,
 
En fait c'est bon, j'ai réussit à aligner toutes les images en les espaçant d'un pixel chacune avec l'outil d'alignement.  
Le truc maintenant c'est que l'image fait 10604x100pixels et j'ai l'erreur "The rasterized image exceeded the maximum bounds for Save for Web." lorsque j'essaye de sauvegarder...
 
edit:Est-ce qu'on peut utiliser les sprites sur deux dimensions dans les css ? genre doner al coordonnée du sommet x et sa hauteur puis coordonnée du sommet y et sa longueur ?
 
@genghis77: je ne connais pas du tout la 3d, donc je peux pas trop renseigner dessus. Mais l'idée est surtout de minimiser les requêtes http en diminuant le nombre d'images envoyées par le serveur.

En quelques sortes ça y ressemble oui. Une image avec tout tes boutons/bannières, fonds, etc etc dessus. Et tu fait des affichages juste partiel de cette image pour tes différents éléments graphiques. Vu que l'image est en cache tu gagnes du temps en tout point
 

Je suis pas sûr de comprendre ta question, mais je pense effectivement que tu gères mal tes coordonnées. Tu peux effectivement placer tes éléments comme tu veux, que ce soit horizontalement et/ou verticalement. Pas étonnant qu'une image de 10604px fasse buger l'export

En fait j'ai 105 "images" de 100x100px. Je les ai toutes alignées avec 1px d'écart entre-elles (105*101 -1[pixel de la dernière image]=10604).
Là ça fait trop long. Jme dit que pour contourner le problème, je pourrais les placer sur un rectangle avec 10 images par ligne.  
 
Le truc, comme c'est la première fois que je fais un sprite, est que je ne sais pas comment appeler les images avec les css lorsqu'elles sont disposées comme ça.
 
background: url(chemin/vers/le/sprite) ? ? no-repeat;
 
Le souci est que deux paramètre dans les css ne suffisent pas en cas de rectangle car il faudrait spécifier la longueur du coté aussi...
 
Je sais aps si c'est plus clair    

Oui la fonction "enregistrer pour le web" est limité à une dimension autour des 3000px ou quelque chose comme ça.
Et oui on peut utiliser les sprites sur les deux dimensions, si ce n'est pas fait je te conseille de faire un tour sur les liens que j'ai donné plus haut!

oui, oui, j'ai bien regardé, notamment le premier des trois liens où on en voitsur deux dimensions, mais ils ne prescient pas comment se fait "l'appel css" pour cibler les images...
 
Un coup d'main ?
 
C'est good, j'ai trouvé un bon ptit tuto:
http://www.siteduzero.com/tutoriel [...] s-css.html