Al compilar una aplicación, se necesitan diversas imágenes utilizadas para el icono de la aplicación y las pantallas de inicio para dispositivos iOS, Android y Windows. La creación de todos los gráficos para iOS puede resultar una complicada combinación de tamaños, mientras que las aplicaciones de Android únicamente requieren una sola imagen y las aplicaciones de Windows precisan tres imágenes. El archivo _Asset_Generator.psd y la función Generator de Adobe Photoshop CC contribuyen a coordinar y automatizar la producción de estos archivos.

Adobe Photoshop CC incluye la función Generator, que automatiza la creación de archivos de gráficos web basados en los nombres de las capas. El archivo _Asset_Generator.psd aprovecha Generator para crear los archivos de imagen al compilar aplicaciones. Generator creará archivos individuales y una estructura de carpetas que organiza los archivos para las tres plataformas.

Uso de InDesign para crear imágenes de inicio

Si prefiere utilizar InDesign en lugar de Photoshop para el trabajo de diseño, Keith Gilbert ha creado una plantilla de InDesign que permite utilizar InDesign para crear y exportar los archivos PNG necesarios. Consulte Plantilla de la pantalla de bienvenida.

Uso del generador de elementos de Photoshop

  1. Descargue, descomprima o extraiga y mueva o copie el archivo _Asset_Generator.psd a una ubicación conocida, como, por ejemplo, donde almacena los elementos necesarios para la publicación de AEM Mobile.

    Descargar

  2. Abra el archivo _Asset_Generator.psd en Adobe Photoshop CC.

  3. Para activar Generator, seleccione Archivo > Generar > Elementos de imagen en Photoshop CC.

    Si esta opción está seleccionada, Photoshop generará los archivos basados en los nombres de capas y los grupos definidos en el panel Capas. Photoshop creará una carpeta de elementos en función del nombre de archivo en la misma ubicación donde se guarda el archivo Asset Generator. El tipo de archivo de elemento, las calidades, las dimensiones, los nombres y la estructura de carpetas se controlan según los nombres de capas y grupos de capas del archivo de Photoshop.

  4. Para editar un objeto inteligente, haga doble clic en la miniatura de la capa. Se abre como otro archivo temporal de Photoshop. Puede incluir capas u objetos inteligentes adicionales.

    El archivo _Asset_Generator.psd utiliza los objetos inteligentes de Photoshop de manera exhaustiva. Todos los iconos son duplicados de un único objeto inteligente. Así, si edita un icono, el resto de iconos se actualizan de forma automática. Los objetos inteligentes independientes se utilizan para la mayoría de las imágenes de inicio.

    Las capas con una etiqueta verde son objetos inteligentes que debe personalizar. Encontrará capas verdes en el panel Capas y en la carpeta de imágenes de inicio del panel Capas. Cuando edite contenido, se volverán a generar los recursos.

  5. Realice las ediciones que considere oportunas y, a continuación, guarde y cierre el archivo de objeto inteligente. Al volver al archivo principal de Photoshop, todos los objetos inteligentes duplicados se actualizan automáticamente.

    Haga doble clic en la miniatura de cualquier objeto inteligente para editar su contenido. Los objetos inteligentes vectoriales se editan en Adobe Illustrator al abrirlos. Tras editar un objeto inteligente vectorial en Illustrator, guarde y cierre el archivo en Illustrator y, a continuación, vuelva a Photoshop para ver la actualización de contenido automáticamente.

    Guarde y cierre todos los objetos inteligentes hasta que vuelva a los archivos de Asset Generator; todos los duplicados del objeto inteligente se actualizarán.

  6. Haga doble clic en la miniatura de cualquier objeto inteligente para editar su contenido. Los objetos inteligentes vectoriales se editan en Adobe Illustrator al abrirlos. Tras editar un objeto inteligente vectorial en Illustrator, guarde y cierre el archivo en Illustrator y, a continuación, vuelva a Photoshop para ver la actualización de contenido automáticamente. Guarde y cierre todos los objetos inteligentes hasta que vuelva a los archivos de Asset Generator; todos los duplicados del objeto inteligente se actualizarán.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea