Generar Assets para iOS y Android desde illustrator CC 2017

Hoy vengo a compartirles un pequeño manual para generar assest a partir de @Adobe Illustrator versión CC 2017, de una manera practica con la que ya no batallaremos al desarrollar nuestras Apps Móviles.

http://ivomynttinen.com/blog/ios-design-guidelines

 

 http://www.hermosaprogramacion.com/2014/08/android-studio-proyecto-en/

A partir del tamaño base (320×568 pt ), generar los assets con la herramienta de Assets Export  en Ai. Ya sea para IoS o para Android, con los tamaños ya predeterminados que nos da Ai.
Que aquí nos muestra como:

https://helpx.adobe.com/illustrator/how-to/export-assets-web-app-design.html

Estos se tienen que guardar en carpetas dependiendo la usabilidad del asset :

  • nave
  • login
  • home
  • button
  • etc…

Al nombrar los assets SOLO utilizar minúsculas, sin caracteres especiales.

TERMINACIONES Y TAMAÑOS

IOS

  • IPhone 5S _
  • IPhone 6s _  @2x
  • IPhone 6plus @3x

 

ANDROID

  • 0.75x_ ldpi
  • 1x_ mdpi
  • 1.5x_ hdpi
  • 2x_ xhdpi
  • 3x_ xxhdpi
  • 4x_ xxxhdpi

 

Exportar assets con tamaños de cada pantalla

 

Esta técnica es para cuando decidimos crear cada aseets por cada tamaño de pantalla, para esta técnica tomamos con base para diseñar iPhone 5s .
Después copeamos toda la pantalla para adaptarla en cada tamaño de la pantalla, como se muestra en la imagen de arriba.
Arrastramos cada uno de los assets al módulo de Assets Export por pantalla, ya que se recomiendo guardarlos por carpetas de casa tamaño de pantalla sin olvidar renombrar cada asset.

Xcode y assets

Qué hacer cuando se maquetara con autolayout en esta ocasión solo se ocuparan los assets de @3x ya que el compilador se encargara de escalar todos los assets. Para lo cual puedes usar la  Herramienta para assets en .AI

Exportar splash y background

Para poder generar de una forma correcta el Splash y el background es necesario de hacerlo del tamaño exacto de la pantalla para el cual se utilizara estamos diciendo que ningún pixel más, ni uno menos.

Vamos a utilizar  PS, una vez más se recomiendo utilizar como base iPhone 5s , generamos nuestro splash o background
Con ayuda de PS vamos a general una mesa de trabajo del tamaña que nos piden ya sea para iOS , Android o etc.. .
Lo exportamos y los renombramos correctamente

Créditos para : Iris Menchaca

Leave a Reply

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

*