Crear sprites CSS desde Photoshop

14

Tengo un PSD con un diseño web.
Cada vez que modifico el diseño, necesito copiar manualmente diferentes partes de la imagen, con diferentes visibilidades de capa (para transparencia) en sprites CSS.

¿Cuánto se puede automatizar?

adobe-photoshop export css sprite SLaks
fuente
Le agradezco que quiera mantener la pregunta genérica, pero un ejemplo probablemente sería útil. ¿Las visibilidades de capa ya están configuradas, o tiene que cambiarlas individualmente antes de exportar?
Pekka
@Pekka: diferentes porciones necesitan visibilidades diferentes. Por ejemplo, el fondo del sitio se exporta visible, pero el fondo del contenido se exporta con el fondo global invisible. (para una sombra transparente)
SLaks
Veo. Entonces esto definitivamente requiere un procesamiento por lotes. Interesado en ver lo que viene! ...
Pekka

Respuestas:

9

Utilicé una secuencia de comandos automática de Photoshop una vez y funcionó bien.

El concepto es:

  • Cada porción es una imagen diferente.
  • Cada parte (y, por lo tanto, cada imagen) debe estar en la misma carpeta sin ninguna otra imagen.
  • Ejecute el script que indica la carpeta y algunos parámetros (tamaño, nombre css, etc.).

  • El guión hace:

    1. Combina todas las imágenes en una con el tamaño que indicaste.
    2. Genera el archivo CSS

En su caso, si modifica una imagen, regenera la imagen global y el CSS a través del script y ... eso es todo. Quizás necesite copiar / pegar el CSS en el suyo si no desea usar el generado.

Notas:

Lo probé con algunos archivos y funcionó muy bien. Luego, probé como ~ 600 imágenes y luego, necesitarás una CPU y paciencia buenas;) En este caso, no lo uses.

Shikiryu
fuente
1

No usaría rebanadas + comenzar una Acción que comience seleccionando la marquesina (con el ajuste a las rebanadas y los límites del documento) todas sus rebanadas una por una, pero recortando a la selección cada vez, y guardando como png, ctrl alt z deshaciendo hasta que no se recorte, seleccionando cada sector, recortando ... etc., hasta que termine con todos los sectores, luego detenga la Acción. En el medio, podría ocultar / mostrar cualquier capa, ya que siempre es el mismo archivo, por lo que no debería haber conflictos ... Por lo tanto, cargaría la acción sobre su psd cambiado cada vez. Lo único en lo que puedo pensar es que realmente necesitas cambiar los bordes de las rebanadas. O eso ... no te entendí bien ...

Editar: si no es necesario dividir, entonces una macro (acción) que incluye solo ocultar o mostrar las capas en el orden que necesita, después de realizar todos los ajustes. Como digo, podría no estar entendiendo ...

S.gfx
fuente
Si bien veo su primer párrafo bastante confuso y, sin embargo, parece agregar más al flujo de trabajo que automatizarlo; Yo podría ver hacia dónde se dirige en el ocultar / mostrar la acción capas, a pesar de que haría uso de las rebanadas con él.
Jari Keinänen
¡Gracias! Aunque estoy tratando de entender el voto
negativo