Adobe Generator para Photoshop CC

El proceso de generación de assets para maquetación web a partir de un diseño web en Photoshop se automatiza gracias a Adobe Generator.

Dentro de los “Sneak peeks” o adelantos que se mostraron en el Adobe Max de éste año hubo uno que llamó la atención de los diseñadores web en el cual se mostraba cómo pasar un diseño de Photoshop a Brackets:

If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it’s missing. Get Flash Player from Adobe. This error may appear if the URL path to the embedded object is broken or you have connectivity issue to the embedded object. Powered BY XVE Various Embed.

La mala noticia es que este workflow aún no está disponible, la buena noticia es que ya Adobe ha publicado nuevas actualizaciones de Photoshop CC y Edge Reflow CC las cuales habilitan un workflow similar entre entre éstas 2 aplicaciones mediante una función llamada Adobe Generator!

Es muy común que los diseñadores realicen diseños web en Photoshop a partir de los cuales se generan los assets (jpgs, gifts, pngs) para maquetación en Dreaweaver, Edge Code o cualquier editor de código. Este proceso puede ser tedioso y demorado dependiendo de la complejidad del diseño. Adobe Generator permite generar todos los assets mediante un solo comando (File -> Generate -> Image Assets) y teniendo como referencia los nombres de las capas o grupos de capas, por ejemplo:

  • Adicionar la extensión .png al nombre de la capa o grupo de capa para exportar a ese formato con calidad png32 (alpha semi-transparente), o usar .png8, .png24, .png32
  • Adicionar la extensión .jpg al nombre de la capa o grupo de capa para exportar a ese formato con calidad 80%, o usar .jpg(1-10), .jpg(1-100%) para definir otros niveles de calidad
  • Adicionar la extensión .gif al nombre de la capa o grupo de capa para exportar a ese formato
  • Usar 1-n%, (Number) px x (Number) px para definir escala o tamaño

Teniendo en cuenta lo anterior:

  • “logo-retina.png, logo.png” genera una imagen al 200% con el nombre logo-retina.png y otra al 100% con el nombre logo.png
  • “heroImage.jpg10” genera una imagen jpg al 100% y con calidad máxima (100%)
  • “400% tuningfork.png, 250px x 250px tuningfork.jpg40%” genera una imagen al 400% en formato jpg y otra imagen en formato jpg escalada a 250px pot 250px y calidad del 40%
Puedes ver el uso de ésta función en éste video:

If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it’s missing. Get Flash Player from Adobe. This error may appear if the URL path to the embedded object is broken or you have connectivity issue to the embedded object. Powered BY XVE Various Embed.

Flujo de trabajo entre Photoshop CC y Edge Reflow CC

Usando la función Adobe Generator también es posible crear un proyecto de Edge Reflow que replica el diseño de Photoshop o generar desde Edge Reflow páginas basadas en archivos de Photoshop. Este flujo de trabajo además de ser automático permite sincronización de tal forma que si se realizan cambios en el archivo de Photoshop, éstos se replican en Edge Reflow.

Puedes ver cómo funciona este flujo de trabajo en éste video:

If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it’s missing. Get Flash Player from Adobe. This error may appear if the URL path to the embedded object is broken or you have connectivity issue to the embedded object. Powered BY XVE Various Embed.

Qué te parece esta nueva función de Photoshop? Te resulta útil para tu trabajo?

Otros links:

4 thoughts on “Adobe Generator para Photoshop CC

  1. September 16, 2013

    erick sarmiento Reply

    gracias que gran función, por fin llego despues de tantos años en ese trajin con los archivos.

  2. September 18, 2013

    macarenadt Reply

    Soy diseñadora gráfica y no se de código. Estoy empezando a hacer web con Muse. Mi pregunta es si puedo generar la página en edge reflow y pasarla a muse para hacerla web allí­.

    • September 18, 2013

      Marlon Ceballos Reply

      No es posible pasar contenido de Reflow a Muse. Si quieres aprender más sobre Muse dale una mirada a este curso: http://www.xper.co/udemymuse

      Empezaremos a ofrecer unos talleres de diseño web a partir del próximo mes, si estás interesada puedes agregarte a esta lista de correo: http://xper.co/SxBEIY

  3. December 9, 2013

    diseñonline Reply

    existe alguna opción de que automáticamente todas las capas se conviertan a la exención que yo quiera y no me toque hacerlo una a una, hay un diseño con muchos elementos que hacen perder tiempo(automatizar esta opción me cuentas)

Leave a Reply

Your email address will not be published. Required fields are marked *