Cut&Slice me es un plugin’ gratuito para photoshop que nos ayudará a exportar en segundos las imágenes de tus diseños por separado para diferentes dispositivos ya sean Android, iOs o para Web. Mejorando así el flujo de trabajo con tan sólo el pequeño peaje de nombrar las capas y cuidar su organización.
No todo el mundo nombra las capas cuando trabaja, es verdad, pero si mantenemos esa disciplina, con tan solo añadir algunos caracteres a los nombres de las capas, Cut&Slice me puede exportar tus assets de imágenes en segundos. Los programadores ya no tendrán que esperar a que separes cada uno de los elementos de tus mockups o diseños y que los ajustes a las diferentes dimensiones o densidades de píxeles de cada uno de los dispositivos que se necesiten.Cut&Slice me exporta pngs con transparencia recortando los píxeles transparentes que no se necesitan, o que sea tan grande como especifiquemos, o todos los estados de los botones en el tiempo que vamos al servicio y volvemos.
Podríamos decir que para eso ya están los slices de photoshop. Bueno este programa no ha avanzado en este aspecto desde que todo se diseñaba con tablas. Internet si ha cambiado un poco desde entonces. Ahora podremos generar slices que se solapan olvidándonos ya de problemas del pasado como aquellos degradados que se cortaban…
Cut&Slice me incluso permite exportar todos los estados que nuestros botones posean en segundos. ¿Necesitamos que sean todos del mismo tamaño? bien, tan solo añadiendo una forma de vector rectangular Cut&Slice me los cortará al gusto. -Lástima que no sirva para hacernos bocadillos de salchichón-
Diseñaremos a la máxima resolución y el plugin’ exportará a diferentes tamaños. Por ejemplo para iphone podemos diseñar en tamaño para retina, en android para xxhdpi y con un solo click obtendremos todos los demás tamaños.
Para conseguir todo esto tan solo necesitamos seguir unas pequeñas reglas:
Organizar los elementos en grupos, como si fueran objetos.
Añadir «@» al final del nombre de la capa que queramos exportar, el contenido grupo se exportará como un png eliminando los pixeles transparentes que rodean la imagen.
Si deseamos que un fichero sea de un tamaño concreto, crearemos un vector rectangular como primera capa de grupo y la llamamos «#». El grupo se exportará a ese tamaño.
Incluiremos al final del nombre de capa la extensión «_BTN» para exportar todos los estados de un botón. Añadiendo grupos que contengan el contenido de los estados de tu botón y nombrándolos de la siguiente manera: Normal – hover – clicked / pressed – selected –disabled
Tan solo siguiendo estos pequeños pasos y siendo un poco estrictos en la costumbre de organizar las capas, podemos ahorrar una cantidad de tiempo enorme y además por el precio de un café, que es lo que solicita el autor o completamente gratis si no nos sentimos con muchas ganas de invitar. Pero bueno el plugin’ lo merece.
Artículo escrito por Carlos Vañó (departamento de Marketing de Lowpost)
