Share
El complemento PNGHat para Photoshop recientemente lanzado, creado por Source, crea un flujo de trabajo completamente diferente para exportar elementos PSD para su uso en sitios web, juegos, aplicaciones o cualquier otro tipo de proyectos para los que diseñe..
Es un software robusto con una gran cantidad de funcionalidades, pero la característica más atractiva que ofrece es su capacidad para resumir la exportación en tres simples pasos:
PASO 1: Presionar el botón
PASO 2: Copiar y pegar código
PASO 3: Lucro!
Bien, con toda seriedad eso son solo dos pasos, pero en realidad es así de fácil. El complemento esencialmente elimina el proceso típico de exportación de Photoshop de cortar, nombrar segmentos, tratar con áreas de corte superpuestas, previsualizar, seleccionar opciones de optimización, elegir opciones de exportación, guardar y luego escribir manualmente el código para integrar las imágenes en su proyecto.
También puede recortar el espacio en blanco alrededor de los elementos automáticamente y manejar exportaciones de resolución múltiple para el soporte de retina y técnicas de imagen receptiva. Las imágenes se pueden generar localmente en su computadora, cargarlas instantáneamente en el almacenamiento en la nube o incluso generarlas como código Base64 para que no necesite archivos de imagen en absoluto.
Comencemos con una mirada al núcleo del plugin; La funcionalidad de exportación de imagen de botón.
Exportar imágenes usando PNGHat realmente es tan fácil como es posible. Por ejemplo, en esta interfaz de usuario del juego móvil de Graphic Burger, supongamos que desea exportar el "Botón de reproducción".
Primero, selecciona la (s) capa (s) o grupo para el "botón de reproducción":
A continuación, haga clic en el PNGHat Exportar capas seleccionadas botón:
Y listo, obtienes un PNG perfectamente optimizado:
¡Eso es! En este ejemplo, cubrimos dos clics del mouse y aproximadamente una espera de dos segundos.
Si está exportando sus imágenes localmente, puede establecer dónde deben ir haciendo clic en el botón ... botón que verá a la derecha de la segunda sección del panel PNGHat, luego navegue hasta la carpeta de su elección.
Hay varias otras opciones que puedes configurar y modificar, que veremos más adelante, pero en resumen, eso es todo el proceso; Seleccione, pulse el botón, listo.
Al mismo tiempo que PNGHat genera su imagen, también prepara el código listo para copiar y pegar para que pueda incorporar fácilmente esa imagen en su proyecto. Obtiene código HTML, CSS, lienzo, Android e iOS, por ejemplo:
imagen de fondo: url (images_14 / how-to-export-photoshop-asset-for-the-web-with-pnghat_4.png); ancho: 108px; altura: 109px;
var img = nueva imagen (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-asset-for-the-web-with-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Desde aquí simplemente pulsa el botón "Copiar" en la ventana de PNGHat y estás listo para pegar directamente en tu archivo de proyecto relevante:
En lugar de tener que enviar sus imágenes por FTP después de la exportación, PNGHat le ofrece la opción de cargar instantáneamente sus imágenes en el almacenamiento en la nube que proporcionan. En este momento, el complemento viene con 1 GB de almacenamiento en la nube gratuito, con imágenes enviadas a través de CDN para que los usuarios reciban el servicio desde la ubicación más cercana posible..
Exportar imágenes para el alojamiento incluido no es absolutamente diferente al proceso de exportación local. Para activar la carga automática, seleccione la opción "Nube" en la primera sección de la ventana de PNGHat:
A partir de ahí, utiliza el mismo enfoque de "selección" y "botón pulsador" como se describe anteriormente. La única diferencia es que después de que la imagen se carga automáticamente en su cuenta, el código de copiar y pegar le proporcionará la URL alojada en la nube, por ejemplo:
La tercera opción de exportación que proporciona PNGHat es Base64, que genera su imagen como código puro que puede incorporarse en el HTML, CSS o lienzo de su proyecto. Sin necesidad de un archivo de imagen separado, el elemento se puede cargar sin el extra http Solicite y por lo tanto puede acelerar el tiempo de carga de su proyecto. Al igual que con el cambio entre la exportación local y la nube, puede seleccionar Base64 en la parte superior de la ventana de PNGHat:
El código Base64 se puede usar con HTML, CSS y lienzo, por ejemplo (código abreviado):
imagen de fondo: url (datos: imagen / png; base64, iVBO ... FTkSuQmCC); ancho: 108px; altura: 109px;
var img = nueva imagen (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'datos: imagen / png; base64, iVBO ... FTkSuQmCC';
En mi experiencia, Base64 es especialmente bueno para pequeñas imágenes de fondo y gráficos que se repiten con un número limitado de colores. También he encontrado que la forma más eficiente de utilizar Base64 es con los preprocesadores de CSS, por lo que el código que conforma una imagen se puede guardar como una variable, se puede usar fácilmente varias veces y actualizar más adelante si es necesario..
Una de las cosas que más me impresiona de PNGHat es la facilidad con la que puede exportar un PNG8 transparente de excelente apariencia para mantener bajos los tamaños de archivo. Realicé algunas pruebas utilizando una maqueta de DVD de Graphic Burger, en una imagen exportada a 758px * 758px sin ningún ajuste de configuración, y descubrí dos cosas.
Primero, la diferencia en el tamaño de archivo PNG24 entre la exportación predeterminada de Photoshop y PNGHat fue un mínimo de 6Kb. Por lo tanto, dado que el tamaño del archivo estaba esencialmente a la par, sería más probable que utilizara la exportación PNGHat para este tipo de archivo debido a que es más rápido y fácil..
El segundo, y el resultado más convincente, fue que fuera de la caja PNGHat maneja la transparencia de los archivos PNG8 a la perfección. Con la configuración de exportación predeterminada, Photoshop generó un archivo que solo pesaba 186Kb, pero incluía las bandas blancas que se pueden ver en la imagen de abajo. En términos generales, la transparencia se utiliza para que una imagen se pueda visualizar bien sobre cualquier fondo, por lo que las bandas normalmente evitarían el uso de este formato de exportación.
Por otro lado, PNGHat generó un archivo PNG8 que no se podía distinguir visualmente de los archivos PNG24, pero menos de la mitad de su tamaño en 268KB versus 642KB / 648Kb. Desde donde estoy sentado, es una opción muy atractiva para la exportación optimizada de PNG transparente..
PNGHat es capaz de recortar automáticamente el espacio alrededor de la imagen que está exportando, lo que le ahorra la molestia de asegurarse de que los recortes o los cortes se alinean perfectamente con los bordes del elemento. El "botón Reproducir" del primer ejemplo de este artículo se exportó utilizando esta función de recorte, lo que permite que se recorte correctamente sin que se tomen medidas adicionales..
Para activar la opción "Recortar", simplemente marque esta casilla en la ventana de PNGHat:
Además de recortar automáticamente una imagen, también tiene la opción de seleccionar específicamente la región que desea exportar. Esto es solo una cuestión de crear una selección de marquesina antes de presionar el botón de exportación. Por ejemplo, creando esta selección antes de exportar:
Te daría esta imagen resultante:
Cuando trabaja con imágenes basadas en vectores, tiene la opción de escalar su imagen de forma automática hacia arriba o hacia abajo para varias exportaciones, de modo que puede manejar el soporte de retina y, potencialmente, crear múltiples tamaños de imagen para responder..
Para usar la escala, establezca el porcentaje que le gustaría aumentar o disminuir en el campo "Escala" de la ventana de PNGHat:
El resto del proceso sigue siendo el mismo, es decir, seleccione la capa / grupo, botón pulsador. Con nuestro "botón Reproducir" el resultado de la escala en un 200% es:
La forma más fácil de controlar cómo se llamarán los archivos exportados es a través de su capa o grupo nombres Si tiene un solo grupo o capa seleccionada, se nombrará su archivo de imagen para que coincida, con espacios reemplazados por guiones. Si ha seleccionado varios grupos y / o capas, su archivo será nombrado para que coincida con lo que está más arriba en su pila.
Alternativamente, también puede consultar PNGHat's Preguntar el nombre del archivo Opción en el panel de configuración de la ventana y elija explícitamente sus nombres de archivo en cada exportación.
Para llegar al panel de configuración, haga clic en el pequeño icono de engranaje en la parte inferior de la ventana:
Esto cambiará la visualización de la ventana a lo siguiente:
Para volver a cambiar, haga clic en el icono de engranaje por segunda vez..
PNGHat te ofrece dos formatos de archivo para elegir: PNG y JPEG.
Cuando instale y ejecute PNG por primera vez, la opción predeterminada seleccionada será, como es de esperar, PNG. Sin embargo, para cambiar a JPEG solo tiene que cambiar el selector en la ventana PNGHat:
También puede controlar la configuración de calidad de sus imágenes exportadas yendo al panel de configuración (descrito anteriormente) y:
Fuera de la caja, PNGHat le brinda las cinco plantillas de códigos de copiar y pegar que se describen anteriormente, sin embargo, también puede editar estas plantillas y crear sus propias plantillas..
Un caso común en el que podría querer editar estas plantillas es hacer que reflejen la ruta en la que se almacenarán las imágenes. En este caso puede cambiar la CAMINO campo desde su defecto de / static / images / FILE, a algo como imágenes / ARCHIVO, Como lo hice durante mi primer uso. También puede cambiar cualquier aspecto de la plantilla principal, como quizás agregar border = 0 al HTML
Además, puede crear nuevas plantillas si el tipo de código que necesita no está presente de forma predeterminada. Para ello, haga clic en + cerca de la parte inferior del panel de configuración, asigne un nombre a su nueva plantilla y agregue su código, usando las variables ANCHURA, ALTURA y CAMINO sin embargo usted requiere.
Incluso a través del proceso de escribir este artículo, personalmente sentí la diferencia con PNGHat, en lugar de la exportación predeterminada de Photoshop. Todas las imágenes que ves arriba fueron generadas por PNGHat, y encontré que me ahorró una cantidad significativa de tiempo. Así como el ahorro de tiempo, también encontré el mínimo presionar el botón proceso mucho más suave, y cuantos menos pasos tenga que tomar para hacer un trabajo más feliz soy!
Es posible que haya ocasiones en las que aún use la exportación nativa de Photoshop si una serie de circunstancias realmente lo exigen, pero para la mayoría de los casos, PNG será mi método de exportar de aquí en adelante..
.
Accentsconagua
