Share
Adobe Photoshop está en constante evolución; Se agregan nuevas funciones con cada versión, mientras que las características existentes se mejoran. Hay, sin embargo, un área que todavía está bastante desactualizada; la forma en que dividimos nuestros diseños en Photoshop no ha cambiado desde que la web estaba basada en tablas.
El comienzo de la independencia de resolución (piense en Retina) ha significado que dependemos cada vez menos de los mapas de bits para nuestros sitios web. Las fuentes web, CSS3 y gráficos vectoriales escalables son ejemplos de técnicas modernas que nos alejan de la preocupación por los píxeles. A veces todavía necesitamos dividir nuestros PSD y usar las imágenes resultantes, pero es hora de que lo hagamos de una manera más responsable.
Entra Cut & Slice me, un plugin CS6 desarrollado por Daniel Peruho. Cut & Slice me tiene como objetivo acelerar el proceso de corte moderno y ofrece muchas funciones potentes. Es gratis, es fácil de usar y funciona..
Algunas de las cosas que ofrece incluyen tomar un grupo de capas y tratarlo como un solo objeto. Luego recorta todos los píxeles innecesarios y exporta el grupo como un archivo de imagen. Al diseñar botones, una vez que las capas se nombran de acuerdo con el formato requerido por el complemento, puede dividir automáticamente los múltiples estados de ese botón. ¿Tienes ganas de aprender más? Vamos a bucear en.
Para comenzar, primero deberá ejecutar Photoshop CS6. A continuación, deberá tener el complemento instalado en su máquina. Dirígete a la página de inicio de Cut & Slice me y descarga la última versión del complemento. Además, descargue el archivo de muestra que usaremos para demostrar cómo funciona el complemento.
Una vez descargado, haga doble clic en el archivo CutAndSliceMe.zxp para activar la instalación del complemento. Cuando aparezca Adobe Extension Manager, simplemente siga las instrucciones.
Inicie Photoshop y elija Ventana> Extensiones> Cortar y cortar. Ahora deberías poder ver el panel "Cortar y cortar".
A continuación, extraiga el archivo CutAndSliceMe_sample.zip y abra el archivo de muestra. Deberías ver lo siguiente:
Este es un diseño móvil con capas adecuadamente nombradas de acuerdo con los requisitos del complemento. En breve, veremos cómo funciona, pero antes de hacerlo hay algunas cosas que debe tener en cuenta:
Asegúrese de que el botón con el ícono de iPhone esté seleccionado, luego haga clic en Cortar todos los activos. Cuando haya terminado de cortar, navegue hasta el directorio de archivos de muestra y abra la carpeta "CutAndSlice_sample_iPhone_assets", que se crea automáticamente mediante el complemento.
Verá cada activo en dos tamaños; uno para Retina (que en realidad es el tamaño de resolución completo usado en su archivo PSD) y otro que es la versión reducida del original.
Ahora repitamos nuestro ejercicio, esta vez exportando para Android. Cambie el modo del complemento haciendo clic en el botón con el ícono de Android, luego haga clic en Cortar todos los activos otra vez. Esta vez, la carpeta "CutAndSlice_sample_Android_assets" se crea con cuatro subcarpetas; uno para cada tamaño de activo El tamaño que diseñamos originalmente se puede encontrar en el xhdpi carpeta, todos los demás activos se reducen versiones de estos.
Ahora que hemos visto más o menos lo que hace el complemento, es hora de descubrir cómo funciona.
El aspecto más importante a considerar es la organización de capas, en términos de denominación y agrupación. Organiza tus elementos en grupos, como si fueran objetos. Luego añadir @ hasta el final de todos los nombres de grupo que desea exportar, y finalmente haga clic en Cortar todos los activos. El contenido de cada grupo se exportará como un archivo PNG, recortando todos los píxeles transparentes.
Nota: En aras del rendimiento, Cut & Slice me solo verifica los nombres de los grupos, por lo que para poder exportarlos, las capas deben estar en un grupo.
A veces es posible que no desee exportar todos los activos; quizás querrá exportar solo los activos que ha puesto dentro de un grupo en particular. Si este es el caso simplemente haga clic en Cortar subgrupos y Cut & Slice me exportarán todos tus @ capas dentro del grupo seleccionado.
Cuando desee dividir solo un grupo o una sola capa, selecciónelo y haga clic en Cortar Seleccionado.
Finalmente, cuando se trata de botones, a menudo tenemos varios estados para ellos. Para exportarlos correctamente, debe agregar grupos que contengan los distintos estados de sus botones, nombrándolos de la siguiente manera:
Accentsconagua
normalflotarpulsado / presionadoseleccionadodiscapacitadoLuego ponga estos grupos dentro de otro grupo con _BTN anexado a su nombre. Tenga en cuenta que el _BTN El sufijo se puede usar con cualquier elemento que tenga estados.
Ejemplos de botones con diferentes estados.. Como ya se mencionó, Cut & Slice me recorta los mapas de bits de manera precisa, eliminando todos los píxeles transparentes que no se deseen. ¿Pero qué sucede cuando quieres que todos los estados de tus botones tengan el mismo tamaño? En este caso puedes usar una capa vectorial rectangular, llamada #, en la parte superior de su grupo, que representa el área que desea exportar. Su grupo se exportará al tamaño de la forma vectorial, sin exportar la capa vectorial en sí. Esto es válido para todos los grupos, no solo para los botones. El complemento utiliza una capa vectorial para esta característica porque si el Ajustar herramientas de vector y transformar a cuadrícula de píxeles La opción está marcada, como mencioné anteriormente, su forma vectorial será pixel perfecta sin bordes borrosos.
Para probar este proceso, seleccione la capa inmediatamente debajo login_BTN grupo. Entonces establece Opacidad al 100% y Llenar al 40%. Ahora podrás ver la forma sobre el botón. Cambia su tamaño a tu gusto y exportalo. Ahora abra la carpeta de activos y verifique el tamaño del botón exportado. Debe ser el tamaño que acabas de definir..
Ahora tenemos una sólida comprensión de cómo podemos usar el complemento, por lo que es hora de probarlo en el mundo real. Aquí no le voy a enseñar cómo diseñar una plantilla de sitio web desde cero, en lugar de eso, usaré una plantilla prefabricada para mostrarle cómo nombrar y organizar sus capas correctamente..
Comencemos descargando esta plantilla de sitio web gratuita de CSS Author. La plantilla tiene una versión web y una versión móvil. Descarga ambos, luego abre la versión web de la plantilla..
Es posible que ya se haya dado cuenta de que la denominación y la estructura de las capas están muy lejos de lo que necesitamos. Tendremos que llevar a cabo una reorganización y cambio de nombre para cumplir con los requisitos del complemento. En la siguiente captura de pantalla puede ver una comparación de la estructura de capas antes y después de nuestras ediciones. Modifique sus capas (en rojo) para que coincidan con las de la derecha (verde).
Comparación de capas antes (rojo) y después (verde) En esta ocasión queremos exportar para la web, así que cambie el modo haciendo clic en el botón con el ícono Monitor y luego haga clic en Cortar todos los activos. La siguiente captura de pantalla muestra lo que debe ver. Si su vista difiere, revise sus capas para detectar posibles errores e intente nuevamente.
¡Felicidades! Acaba de cortar su primer diseño con éxito. Para mayor práctica, abra y divida la versión móvil de la plantilla.
En este caso, cuando edite el archivo, exporte para iPhone y Android y compruebe si todo es correcto. Si es así, está listo para llevar esto al siguiente nivel y cortar su propio diseño.
Probablemente habrá notado que al exportar nuestros activos hemos terminado con muchos archivos PNG. Y, como sabemos, extraer más archivos de imagen individuales de un servidor web significa más solicitudes HTTP, lo que ralentiza la representación de sus páginas web. Para resolver el problema, puede considerar convertir todos sus PNG (o algunos de ellos) en un archivo de sprite de una sola imagen..
Afortunadamente, esta es una tarea fácil en estos días y hay muchas maneras de abordarla. Hay muchas herramientas en línea que pueden ayudar con el proceso. Eche un vistazo a los siguientes generadores de sprites:
… Mira cuál se adapta mejor a tus necesidades.
Hasta ahora todo bien, pero hay una cosa más que debemos señalar. Con tecnologías como CSS3 y SVG, ya no dependemos únicamente de las imágenes. Ahora podemos utilizar fácilmente los iconos SVG o los botones accionados por CSS3 en nuestros diseños. El mayor beneficio de usar los gráficos SVG y CSS3 es que son independientes de la resolución y funcionan muy bien dentro de un diseño sensible. Además, puede cambiarlos y modificarlos directamente en su código sin necesidad de usar el editor de imágenes. ¡Pero espera! Esto no significa que las imágenes sean completamente inapropiadas. Todavía se pueden utilizar para fotos, gráficos complejos y elementos gráficos, y así sucesivamente. CSS3 y SVG son excelentes, pero la compatibilidad con el navegador no es completamente confiable todavía, por lo que debe ser consciente al usarlos..
La capacidad de automatizar nuestras tareas de diseño es extremadamente importante en el mundo web en rápida evolución de hoy. Afortunadamente, herramientas como Cut & Slice me dan tal automatización y ahorran una gran cantidad de nuestro tiempo. Como puede ver, con un poco de disciplina cuando nombramos y organizamos nuestras capas, podemos dividir incluso diseños complejos de forma rápida y sencilla. Con solo unos pocos clics, tenemos todos los recursos que necesitamos, correctamente cortados y listos para ser utilizados.
