¿Cómo exporto un gráfico para admitir varias pantallas de Android en Illustrator?

Estoy diseñando una aplicación para Android ahora mismo y no estoy seguro de cómo proceder.

Quiero poder admitir todo, desde una pantalla de densidad media hasta una pantalla de densidad extra extra alta. google sugiere crear un recurso separado para cada pantalla de densidad, utilizando una estructura de carpetas de recursos como la siguiente:

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape orientation

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

res/mipmap-mdpi/my_icon.png           // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png           // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png          // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png         // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png        // launcher icon for extra-extra-extra-high-density

Aquí hay descripciones que definen los términos para cada recurso de densidad

Screen Size
small   Resources for small size screens.
normal  Resources for normal size screens. (This is the baseline size.)
large   Resources for large size screens.
xlarge  Resources for extra-large size screens.

La densidad de píxeles también se puede cuantificar de la siguiente manera:

Density
ldpi    Resources for low-density (ldpi) screens (~120dpi).
mdpi    Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi    Resources for high-density (hdpi) screens (~240dpi).
xhdpi   Resources for extra-high-density (xhdpi) screens (~320dpi).
xxhdpi  Resources for extra-extra-high-density (xxhdpi) screens (~480dpi).
xxxhdpi Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above.
nodpi   Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.
tvdpi   Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.

 Orientation
land    Resources for screens in the landscape orientation (wide aspect ratio).
port    Resources for screens in the portrait orientation (tall aspect ratio).

Aspect ratio
long    Resources for screens that have a significantly taller or wider aspect ratio (when in portrait or landscape orientation, respectively) than the baseline screen configuration.
notlong Resources for use screens that have an aspect ratio that is similar to the baseline screen configuration.

También dan detalles de la proporción para exportar tamaños de pantalla aquí:

Para crear dibujos de mapa de bits alternativos para diferentes densidades, debe seguir la relación de escala 3:4:6:8:12:16 entre las seis densidades generalizadas. Por ejemplo, si tiene un mapa de bits dibujable de 48x48 píxeles para pantallas de densidad media, todos los tamaños diferentes deberían ser:

36x36 (0.75x) for low-density
48x48 (1.0x baseline) for medium-density
72x72 (1.5x) for high-density
96x96 (2.0x) for extra-high-density
144x144 (3.0x) for extra-extra-high-density
192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above)

Entonces, para mi caso, actualmente estoy creando gráficos que ocupan pantalla completa o ~ 1/2 pantalla. Creé imágenes vectoriales en Illustrator usando Surface Pro 3 (densidad de píxeles 216.33). Creo que PNG-24 es el formato recomendado; Por favor corrígeme si estoy equivocado. ¿Cómo debo exportar al soporte para admitir cada pantalla?

Respuestas (2)

Cada activo que necesite para la aplicación deberá guardarse como una imagen de mapa de bits (PNG o WebP) en las diversas densidades necesarias. Si es apropiado, también puede usar Android Vector Drawables, que son un formato de archivo similar a SVG (usan SVG pathData).

Los PNG son el único formato que puede exportar directamente desde Illustrator, y también pueden representar cualquier cosa (el uso de Vector Drawables limita lo que es posible).

Empezar en 1× (mdpi)

Debe crear todos sus activos en la escala 1× o mdpi de Android. Esto apunta a una pantalla de ~160 PPI, y significa que 1 píxel equivale a 1 dp de Android (píxel independiente de la densidad).

Diseñar a 1× facilita la exportación a varios tamaños. También significa que puede usar las medidas en la documentación de Material Design sin necesidad de traducir los tamaños.

Por ejemplo, un botón de acción flotante (FAB) de Android es 56 × 56 dp . Eso significa que el área de su obra de arte debe ser de 56 × 56 píxeles en Illustrator. Al diseñar a 1×, 1 dp = 1 píxel.

Exportar para pantallas

Una vez que su obra de arte esté configurada, puede exportar usando File→ Export→ Export for Screens. La forma más fácil de trabajar es probablemente usar una mesa de trabajo para cada recurso que desee exportar. Export for Screens se encargará de construir todos los tamaños que requiere Android.

Exportación de Illustrator para pantallas

Es posible que tenga diferentes requisitos, pero a partir de hoy (marzo de 2017), suelo compilar para 1× (mdpi), 2× (xhdpi), 3× (xxhdpi) y 4× (xxxhdpi).

Una nota sobre la calidad de exportación

Me siento obligado a mencionar también algunas advertencias al exportar mapas de bits desde Illustrator: el suavizado de formas no es de tan alta calidad como otras herramientas, y los degradados no se traman. Esto no es un problema al exportar archivos SVG u otros formatos vectoriales, pero sí lo es cuando Illustrator procesa mapas de bits y exporta en un formato de mapa de bits, como PNG. Eso no significa que no deba usar Illustrator para esta tarea, pero téngalo en cuenta si no está satisfecho con los resultados.

PNG 8 está bien a menos que esté usando texto que tenga atributos especiales como sombras y demás. Pero tiene suerte si está utilizando AI CC 2017, puede usar la [opción de exportación para pantallas]. 1

Creo que estará muy satisfecho una vez que compruebe eso. Su tarea ya no es una buena parte de un período de 24 horas.

¿Cómo exporto un gráfico para admitir varias pantallas de Android en Illustrator?
RespuestasAquíPolítica de privacidad1y, 0v