online - sprite html css
¿Fácil herramienta para descomponer la imagen del sprite? (7)
Dale esto como intento, ya que lo dividirá en filas individuales: http://imagesplitter.net
Tengo muchas imágenes de sprites que contienen docenas de iconos. ¿Hay una manera fácil de desentrañar los sprites en archivos de imagen separados, ya sea automáticamente o dándole coordenadas, anchuras y alturas?
Encontré un problema similar después de perder las imágenes de origen de un sprite y construí esta herramienta relativamente simple: https://github.com/fmovlex/desprite
Espero que esto ayude.
Este me funcionó muy bien para extraer imágenes de sprites de jQ de jQuery http://renderhjs.net/shoebox/
Este programa es bastante bueno para descomponer sprites en marcos individuales.
es compatible con todos los formatos de mapa de bits estándar, .png, .bmp, .gif, .tiff y hace todo de forma bastante automática.
Hay una aplicación para Android que dividirá dinámicamente un mapa de sprites:
https://play.google.com/store/apps/details?id=com.fourqueue.android.texture
Utilice la herramienta de división en Photoshop:
- Use la
slice select tool(observe la parte seleccionada de eso, vea la captura de pantalla). - Haga clic con el botón derecho en cualquier lugar del lienzo y seleccione
Divide Slice...en el menú desplegable. - Ingrese en el alto / ancho o sprite múltiple.
- Una vez terminado, ve a
save for web and devices... - Cuando guarde, esto exportará todos los recortes individuales al formato de archivo que elija en una carpeta separada.
Si son de tamaño desigual (no en una cuadrícula), también puede seleccionarlos individualmente con la herramienta de selección de rebanadas de vainilla. Si tienes muchas cuadrículas similares, guarda todo como una acción de photoshop y procesa por lotes.
Creación de png :
Uso spritepad para crear la imagen png, solo arrastre y suelte sus imágenes para crear el sprite: http://spritepad.wearekiss.com/ (pero como supongo que no desea este paso).
CSS :
Después de esto, importo la imagen a spritecow y obtengo el css para cada imagen (haga doble clic en cada imagen para obtener su alto ancho y sus coordenadas): http://www.spritecow.com/
Podrías usar solo spritepad pero prefiero usarlo solo para la creación del sprite. Para css, el spritecow me parece más fácil. De todos modos depende de ti.