En esta entrada vamos a ver una de las funciones implementadas en Photoshop a partir de la versión Creative Cloud (CC) llamada Generar Recursos de Imagen, la cual nos permite exportar imágenes a partir de nuestras capas en los formatos más conocidos como JPG o PNG entre otros, esta función nos viene muy bien para exportar las imágenes que tenemos en capas o en carpetas anidadas cuando estamos diseñando algún GUI para un sitio web o aplicación, es mucho más sencillo que las funciones que ya venian anteriormente para la exportación de imágenes.

Para esta tutorial voy a utilizar un diseño que he hecho para un sitio web utilizando Bootstraps, la siguiente es la captura:

Generar recursos de imagen photoshop photo recursos_imagen_photoshop1_zpsvfbdwx39.jpg

Generar Recursos de Imagen en Photoshop

En el escritorio de mi PC he creado una carpeta llamada “imagenes” donde tengo el archivo PSD que debo abrir con Photoshop para poder empezar:

enerar recursos de imagen photoshop photo recursos_imagen_photoshop0_zpsb9movuqy.jpg

Generar Recursos de Imagen en Photoshop

Vamos a activar la opción Recursos de imagen a la cual podemos acceder a través de:  Archivo/Generar/Recursos de imagen, debemos asegurarnos de que quede seleccionada esta opción como en la siguiente captura

Generar recursos de imagen photoshop photo recursos_imagen_photoshop2_zps0ftghzzm.jpg

Generar Recursos de Imagen en Photoshop

Ahora vamos a dar renombrar cada uno de las capas o carpetas de Photoshop que queremos exportar y lo único que tenemos que hacer es añadirle al nombre de la misma el punto y la extensión puede ser JPG o PNG, por ejemplo a cada una de las carpetas que podemos en la siguiente captura: banner1, banner2, banner3, banner4 voy a añadirle al final de cada uno de estos nombres la extensión .png

generar recurso de imagen photoshop photo recursos_imagen_photoshop3_zpssq96e9n6.jpg

Generar Recursos de Imagen en Photoshop

generar recursos de imagen photo recursos_imagen_photoshop4_zpsod9gbo9v.jpg

Generar Recursos de Imagen en Photoshop

generar recursos de imagen photoshop photo recursos_imagen_photoshop5_zpsb804iaz3.jpg

Generar Recursos de Imagen en Photoshop

Una vez que hemos hecho esto ya solo nos quedaría verificar la carpeta “imágenes” donde tenemos guardado el archivo editable PSD del diseño y como podremos ver en las siguientes capturas tendremos una carpeta con las imágenes de los 4 banners

Esta es una excelente opción si queremos optimizar nuestro tiempo en el diseño de cualquier GUI ya sea para la web, moviles, videojuegos, etc.

Yo en lo personal la utilizo mucho.