Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Introducción a Avocode — PSD a código sin Photoshop

by
Length:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Photoshop ha sido una parte del diseño web durante años, y es muy probable que continúe como tal durante mucho tiempo. Si diseñas para la web con Photoshop o eres un desarrollador que maneja la codificación de PSDs, es probable que haya algunos problemas que encuentres de forma regular.

Incluso si ha hecho la transición de Photoshop a Sketch para la fase de diseño en su flujo de trabajo, todavía se enfrentará al problema de los codificadores que necesiten acceder a software que de otro modo no utilizarían. Con cualquiera de los dos programas, es probable que encuentre sobresaltos de velocidad que son justo para el curso al usar las herramientas cuyo propósito primario es diseño, no generando el código para la tela.

Hecho por Source

Los chicos de Source han estado produciendo extensiones para Photoshop desde 2012. Sus complementos están diseñados para facilitar algunos de los problemas más comunes en el proceso de diseño a código, como la creación de CSS que representa con precisión un diseño y la exportación de imágenes de manera eficiente.

He sido un fan de tiempo de su plugin CSSHat, que genera código CSS o preprocesador de las capas de Photoshop. También uso su plugin PNGHat casi cada vez que uso Photoshop, para exportar imágenes a PNG, JPEG o Base64. Puedes ver ambos plugins en acción en mi tutorial de dos partes:

Estos plugins se centran en la etapa de desarrollo del proceso de creación del sitio; Convirtiendo PSDs en sitios web totalmente funcionales. Teniendo en cuenta que muchos desarrolladores ni siquiera necesitan Photoshop para cualquier otro propósito que acceder a PSD, es un paso natural siguiente para ver este tipo de mejora de flujo de trabajo sacarlo de Photoshop.

Eso es lo que tiene que ver con la nueva herramienta de escritorio basada en la web de Source, Avocode.

Avocode es un programa que está diseñado para el proceso de pasar de PSD (o Sketch) a código. No genera automáticamente sitios para ti, sino que te proporciona un conjunto de herramientas que te permiten crear sitios de la manera que tú prefieres, pero más eficientemente que cuando trabajas directamente en Photoshop o Sketch. Avocode tiene como objetivo cerrar la brecha entre las etapas de diseño y codificación del desarrollo web.

Lo que sigue

En este artículo veremos cómo puede utilizar Avocode para:

  • Abrir PSDs para la codificación sin Photoshop, y sin enviar por correo electrónico o cargar archivos.
  • Seleccionar capas, grupos y moverse en un diseño.
  • Generar código CSS o preprocesador para los elementos de su diseño.
  • Obtener medidas de dimensión precisas con las que construir su diseño.
  • Copiar el contenido del texto para facilitar su colocación en el código.
  • Extraiga paletas de colores y codigos hex de PSD.
  • Exportar imágenes, incluso desde múltiples capas, sin tener que lidiar con el proceso de corte.

Abrir PSD sin Photoshop

Con Avocode, los PSDs son compartidos entre diseñadores y desarrolladores a través de un proceso automatizado de sincronización. Si eres diseñador, instalarás un complemento de Photoshop y, cuando tu diseño esté listo, solo pulsas el botón "Sincronizar ahora" para poner tu PSD a disposición del desarrollador.

Hay maneras adicionales de sincronizar en el camino, con Dropbox como una opción confirmada que viene en una versión futura. A juzgar por el actual beta 0.5.0 interfaz que también podría ver la sincronización a través de Layervault, carga directa y obtener los archivos directamente desde el almacenamiento local.

Si eres un desarrollador, recibirás una notificación a través de Avocode de que hay un nuevo diseño disponible, momento en el que puedes abrirlo directamente con un solo clic en el panel de navegación PSD. Esto elimina la necesidad de enviar por correo electrónico mega-archivos adjuntos o transferir manualmente archivos PSD.

Junto con cada diseño viene un sistema integrado de gestión de versiones. Las iteraciones progresivas de un PSD se pueden sincronizar fácilmente entre el diseñador y el desarrollador, de nuevo pulsando el botón de sincronización Sync now de Photoshop ahora, con cada versión accesible a través del panel de navegación PSD. Avocode recuerda los ajustes de exportación anteriores de las imágenes en el diseño, lo que significa que tareas como la exportación de imágenes recién actualizadas pueden ser automatizadas.

Selección y navegación

Una vez que tenga un PSD abierto en Avocode, encontrará interactuar con él para ser bastante intuitivo. Al igual que Photoshop, Avocode tiene un Panel de Capas donde puedes ver todas las capas y grupos del PSD. Estas capas y grupos se pueden mostrar u ocultar, y también puede hacer clic para seleccionar cualquiera de ellos.

Además de seleccionar elementos del diseño a través del Panel de capas, puede seleccionar la herramienta Seleccionar en el panel de herramientas de la izquierda y, a continuación, hacer clic en cualquier elemento del escenario directamente. Para seleccionar varios elementos, mantenga presionada la tecla MAYÚS y continúe haciendo clic en los elementos que desea seleccionar.

La selección múltiple funciona ya sea haciendo clic directamente en el escenario o en el Panel de capas.

Para desplazarse alrededor del diseño, elija la herramienta mano y, a continuación, haga clic y arrastre para moverla.

Generar CSS y código de preprocesador

Con cualquier capa seleccionada y el panel inspección abierto verá el CSS para ese elemento de salida en la subsección código del panel, ya sea en bruto o preprocesador en función de su preferencia. Esto utiliza la misma lógica de generación de CSS que el complemento CSSHat, que sigue siendo el generador de CSS más visualmente preciso que he visto entre las opciones disponibles actualmente.

Agarrar el CSS para el elemento es tan fácil como hacer clic en el botón Copiar CSS o Copiar LESS , por lo que puede pegar en su hoja de estilo o directamente resaltar las líneas que desea utilizar y copiar de allí. Si está generando código de preprocesador, automáticamente incluirá mixins de su biblioteca de mezclas preferida. Las opciones actualmente disponibles son:

  • LESS + LESSHat
  • Sass + Compass
  • SCSS + Compass
  • Sass + Bourbon
  • SCSS + Bourbon
  • Stylus + Nib

Obtenga medidas precisas de diseño

Estoy seguro de que no estoy solo cuando digo que encontrar las dimensiones de diseño dentro de Photoshop puede ser un poco arduo. El enfoque de Avocode a este problema lo hace muy sencillo. Para obtener la altura y el ancho de un elemento:

1. Seleccione la herramienta Seleccionar y seleccione cualquier elemento o varios elementos.

2. Lea los valores en la esquina inferior izquierda del cuadro de selección azul.

3. O bien, lea los valores a la derecha del pulgar de vista previa en la parte superior del Panel inspección.

Para encontrar la distancia horizontal y vertical en píxeles entre dos elementos:

1. Elija la herramienta Medir y seleccione cualquier elemento.

2. Coloque el cursor sobre cualquier otro elemento y lea los valores junto a las líneas rojas horizontales y verticales.

Copiar contenido de texto

Si tiene una capa de texto seleccionada, verá una vista previa recortada del contenido en el Panel inspección, así como su ancho y alto y un botón de Copiar texto rápido que puede utilizar para insertar el texto en él para pegarlo en su código.

Generar una paleta de colores

1. Elija la Herramienta selección de color y mueva el ratón alrededor del escenario, viendo la vista previa de color hasta que tenga el color que desea.

2. Haga clic en esa ubicación y su color se agregará a la subsección Colores en el Panel inspección, con los códigos hexágicos mostrados para cada uno.

Exportar imágenes

1. Seleccione la herramienta Seleccionar y seleccione cualquier elemento o varios elementos.

2. En el panel inspección, bajo la subsección Exportar del panel, haga clic en el icono de archivo pequeño con el signo más azul en él para establecer su selección como un activo.

3. El nombre de su activo se extraerá del nombre de la capa. Elija PNG, JPG o SVG de exportación, a continuación, haga clic en "Exportar ahora". Si es la primera exportación de activos del proyecto, podrá elegir una carpeta de destino, de lo contrario, el archivo se exportará de inmediato.

Después de haber configurado su selección como un activo, también aparecerá en el panel de activos. Desde aquí puede hacer clic en el icono de la lupa que se llevará a la carpeta que almacena las exportaciones de activos.

También puede hacer clic en el botón "Obtener código" en la parte superior del panel o en el icono <> a la derecha del nombre de su activo para generar HTML, CSS o MENOS que puede utilizar para colocar el elemento en código.

En el plugin PNGHat para Photoshop también hay control sobre la configuración exacta de exportación de JPEG y PNG, así como opciones de escala, así que imagino que veremos estos mismos controles aportados a Avocode pronto.

Para tener una idea de qué anticipar en los procesos de exportación de imagen de Avocode lea más sobre PNGHat aquí: Cómo exportar activos de Photoshop para la Web con PNGHat

Características adicionales en desarrollo

Ahora Avocode está en beta privada por lo que todavía hay varias características de aspecto muy interesante a salir en un futuro próximo. La aplicación está programada para pasar a beta pública en algún momento de este verano, después de lo cual veremos el lanzamiento oficial.

A medida que avanza el desarrollo, aquí están algunas de las cosas que podemos anticipar:

Soporte multi-plataforma y basado en Web completo

Cualquier sistema operativo con el que trabaje, o incluso si está en un dispositivo móvil, podrá utilizar Avocode. Por el momento la versión beta cerrada de Avocode se está poniendo a prueba en Mac, pero la versión completa de la aplicación nativa también se ejecutará en Windows y Linux, y la versión web se ejecutará en cualquier navegador moderno.

Uso con diseños basados Sketch

Informe de origen que ya tienen un prototipo de trabajo para ofrecer la misma funcionalidad para diseños basados en Sketch. Así que si usted es un diseñador usando Sketch en Mac, un diseñador que usa Photoshop en Windows, un desarrollador que escribe código en Linux, o si está usando cualquier otra combinación estará listo para funcionar.

Editor de código Atom dentro de Avocode

Avocode es realmente construido en la parte superior de la Atom Code Editor producido por GitHub. Lo que es realmente emocionante en esto es que significa que habrá un editor de código completo, robusto y rico en funciones, disponible en Avocode tras su lanzamiento al público. Ser capaz de manejar todo el proceso de codificación en el interior de una sola aplicación realmente tapas de lo que ya está configurando como un poderoso conjunto de características.

Variables de Color

Además de ser capaz de agarrar los códigos hexadecimales para los colores agregados a su paleta, también será capaz de asignar nombres de variable a cada color para su uso en su código de preprocesador.

El construido FTP y la carga a CDN

Como con muchas de las otras funciones en el camino para Avocode, la capacidad de subir directamente a CDN ya está presente en uno de los plugins de Source, PNGHat, por lo que podemos adivinar que la funcionalidad será la misma. Las imágenes se pueden exportar localmente a través de Avocode, o alternativamente, podrá empujarlas directamente a un CDN y tener la ubicación del archivo agregada a su salida CSS. También tendrá la opción de FTP las imágenes directamente a su servidor en la exportación.

Conectar con TypeKit y fuentes de Google

Los videos introductorios para Avocode mencionan que habrá una opción para integrarse con TypeKit y Google Fonts al generar el código de configuración de fuentes. Esto todavía no está en la beta cerrada ni en ninguno de los plugins de Source, así que no estoy seguro de cómo funcionará, pero espero que optimice el proceso de reunir las URL y código apropiados con los que llamar Varias fuentes.

Base64 y exportación de hojas

La primera etapa de la exportación de imágenes en la actual versión beta cerrada de Avocode es para JPEG, PNG y SVG. Sin embargo, Source ya tiene un proceso establecido para la generación de Base64 a través de su plugin PNGHat para Photoshop, así que espero verlos dibujando desde esa base de código para llevarlo a Avocode. También tienen la intención de apoyar la producción de hojas sprite junto con el CSS requerido.

Exportar código para iOS

El enfoque de Avocode será la web hasta que haya alcanzado la madurez completa, sin embargo también hay planes en los trabajos para permitir que sea utilizado como parte del desarrollo de iOS.

Source ya tiene un plugin llamado iOSHat que funciona dentro de Photoshop para generar el código Objective-C o Swift desde las capas de Photoshop para su uso en el desarrollo de iOS. Es probable que el soporte para la exportación de código de iOS dentro de Avocode funcione de la misma manera.

Paquetes para extensiones personalizadas

Hay un intrigante elemento de menú en Avocode; Uno que insinúa la extensibilidad futura de la plataforma, con algunos paquetes iniciales ya en su lugar:

Source dicen que se inspiraron en el lanzamiento de Atom para adoptar un método similar de permitir que los paquetes personalizados sean creados y compartidos entre la comunidad. Podemos esperar que esta vía se abra a medida que avanza el desarrollo.

Pre-ordenar para bloquear en un descuento del 70%

En este momento, Source está desarrollando constantemente características y trabajando en los comentarios de los usuarios beta a medida que avanzan. Cuando el software se publique, estará disponible a través de un modelo de suscripción por $ 240 al año.

Sin embargo, si usted consigue temprano en la pre-orden bloqueará un lugar con un descuento perpetuo del 70%, bajandolo a $ 69 por año. También obtendrá acceso a la beta privada, y durante este período podrá utilizar el software de forma gratuita. Su suscripción real sólo comienza cuando Avocode va a lanzamiento público.

Los puntos de reserva son limitados y, a partir de este momento, hay menos de 230 plazas disponibles. Para preordenar: http://avocode.com/preorder.html

Enlaces útiles

Para más información visite:

Conclusion

¡Voy a dejar el dibujo de las conclusiones totalmente a ti! ¿Qué te parece, te sorprende alguna de las características que ha anunciado Source? ¿Avocode formará parte de su futuro flujo de trabajo? ¡Háganos saber en los comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.