Crea un sprite usando una secuencia de imágenes photoshop

Me gustaría crear un sprite de imagen horizontal para usar en una animación jQuery, ¿cómo crearía un sprite a partir de 190 imágenes en una carpeta (alrededor de 220 kb cada archivo) en un solo sprite horizontal?

al final encontré un script para Photoshop que también hizo lo que yo necesitaba, asouza.com/blog/?p=119

Respuestas (4)

Como también escribo mucho código, conozco tu dolor con esta tarea. Por suerte hay decenas de

Generadores de sprites

allí afuera. Ni siquiera guardo el enlace, ya que siempre encuentras uno adecuado pronto. El generador vinculado anterior toma un archivo ZIP. Afortunadamente, no solo te dan la imagen/sprite del sprite resultante, sino que también escriben el CSS por ti.

Nota al margen/sugerencia: presta atención a cómo nombras las cosas. Normalmente ordenan cosas por nombres. Entonces, si tiene :activey :hoverestados, debe nombrarlos en consecuencia:

  • layer_active.ext,
  • layeractive.exto
  • layer-active.ext.

Lo único que queda ahora es escribir el marcado (bastante intenso) :)

Eso suena bastante ingenioso.

Bueno, la respuesta obvia es crear un proceso por lotes para que lo haga por usted para que no tenga que hacerlo 190 veces.

Pero tal vez pueda usar uno de los procesos automatizados de Photoshop para que lo haga por usted. En la versión anterior de Photoshop que uso, hay un proceso de hoja de contacto II disponible. Tal vez podría configurarlo para incluir todas las imágenes que desea convertir en un sprite, y luego establecer el ancho para que sea el ancho total que espera que tengan todas las imágenes, la altura para que sea la altura máxima de las imágenes individuales ( entonces, por ejemplo, sería algo loco como 15,000 px X 200 px)

Y luego configuraría las "miniaturas" en 190 columnas y 1 fila. Luego desactive "Usar nombre de archivo como título".

Ah, y jugar con el espacio puede ayudar.

Debe abrir todas las imágenes en su tienda de fotos y luego colocarlas en un archivo que contendrá su imagen horizontal. uno al lado del otro esto será una gran tarea y dolor,

si encontró alguna otra forma (en lugar de su script mencionado) de esto, háganoslo saber

  1. Consejos para hacer sprites css
  2. cómo crear sprites css
No quiero ser un dolor en el trasero... pero no pude evitar comentar ya que este es el tipo de cosas que me pasan a mí. Pero si revisas el comentario de Xavier a su propia pregunta...
lol parece que no te gustan mis publicaciones, respondí esta pregunta porque quería y eso es todo.
Lo sé. Relativamente rara vez las personas publican cosas en línea en contra de su propia voluntad, pero usted dijo en su respuesta "si encontró otra forma de hacerlo, háganoslo saber" y eso es lo que ya ha hecho en su comentario a su propia pregunta ... Solo quería señalar eso.
lollero eres genial :)

Aunque no está directamente relacionado con Photoshop, me gustaría recomendar TexturePacker .

Lo he usado en el pasado y estoy muy contento con él: ligero, rápido, fácil de usar, asequible y genera un código limpio para la mayoría de los objetivos/marcos (incluidos los sprites css).

La versión completa también ofrece acceso a la línea de comandos, lo que hace que sea muy fácil automatizar los flujos de trabajo.