¿Cuál es la mejor manera de crear drawables para diferentes dpi

¿Creas primero el MDPI que se puede dibujar y lo escalas según la proporción .075 / 1.00 / 1.50 / 2 por píxeles en el photoshop o recrea cada dibujado individualmente?

También es mejor empezar con una imagen de alta calidad y comenzar a escalar hacia abajo o comenzar con una imagen MDPI y sólo ampliarlo?

Esto es lo que hago:

Crear una imagen mdpi en photoshop con 320×480 porporciones y 160 como su resolución. Guarde 4 imágenes y cambie la resolución simplemente introduciendo 120,160, 240 o 320 como resolución.

De las guías de diseño de Android:

Estrategias

Entonces, ¿dónde empezar cuando el diseño de múltiples pantallas? Un enfoque es trabajar en el estándar de base (tamaño medio, MDPI) y escalarlo hacia arriba o hacia abajo para los otros cubos. Otra aproximación es comenzar con el dispositivo con el tamaño de pantalla más grande, y luego reducir la escala y averiguar los compromisos de la interfaz de usuario que tendrá que hacer en pantallas más pequeñas.

Para obtener información más detallada sobre este tema, consulte Soporte de varias pantallas.

La sección de consejos para diseñadores de las Directrices de diseño de iconos tiene los siguientes consejos:

Use formas vectoriales siempre que sea posible
Cuando sea posible, utilice formas vectoriales para que, si surge la necesidad, los activos pueden ampliarse sin pérdida de detalle ni frescura de los bordes.

Empiece con grandes mesas de trabajo
Debido a que necesitará crear activos para diferentes densidades de pantalla, lo mejor es iniciar los diseños de iconos en las grandes mesas de trabajo con dimensiones que sean múltiplos de los tamaños de los iconos de destino. Por ejemplo, los iconos del lanzador tienen un ancho de 96, 72, 48 o 36 píxeles, dependiendo de la densidad de la pantalla. Si dibuja inicialmente iconos de lanzador en una mesa de trabajo de 864×864, será más fácil y más limpio ajustar los iconos al escalar la mesa de trabajo hasta los tamaños de destino para la creación de activos finales.

Hay una serie de otros buenos consejos en esa sección. Creo que es un buen consejo para otros tipos de dibujables (iconos de menú, fondos, etc.).

Generalmente comienzo grande, y me muevo a más pequeño.

Encuentro que powerpoint es realmente una herramienta muy agradable para crear recursos para mis aplicaciones. Todos los gráficos son vectoriales, por lo que escalan hacia arriba y hacia abajo sin ninguna pérdida de calidad.

Tiendo a empezar con los grandes si no por otra razón que es más fácil trabajar con algo que se ve más grande. Cuando me muevo a los de menor tamaño que generalmente zoom en algunos para compensar.

Cualquier objeto gráfico en powerpoint le permitirá hacer clic con el botón derecho del ratón y elegir "Guardar como imagen" que se mostrará como un archivo png para usted. Lo único que queda es dejarlo en draw9patch si es necesario.

Utilizo Inkscape, trabajando con imágenes vectoriales también, y luego exporto al tamaño de ráster requerido para las varias resoluciones. Un artículo que escribí sobre la producción de iconos de Inkscape se puede encontrar en http://androidcookbook.com/Recipe.seam?recipeId=2549

Mejor manera: crear imágenes de alta resolución, y luego bajarlas.

Si utiliza Photoshop, será un pedazo de pastel!

Mi versión bifurcada de la secuencia de comandos Output Android Assets.jsx automatiza el proceso downscale para todos los dpi 🙂

Con un clic, se creará :

  • Todo el dibujable – ???? Carpetas
  • Con todas las imágenes bajadas de la versión de todos sus psd o png archivos de alta resolución.

Por lo tanto, sólo crear imágenes xxxhdpi a continuación, escalarlos con el script.

Creación inicial de alta resolución de las imágenes de ancho y altura como un múltiplo de 16 es sabio, ya que se reducirá correctamente como se ilustra en esta tabla:

ldpi mdpi tvdpi hdpi xhdpi xxhdpi xxxhdpi 0,75 1 1,33 1,5 2 3 4 3 4 5,33 6 8 12 16 6 8 10,67 12 16 24 32 9 12 16 18 24 36 48 12 16 21,33 24 32 48 64 15 20 26,67 30 40 60 80 18 24 32 36 48 72 96 21 28 37,33 42 56 84 112 24 32 42,67 48 64 96 128 27 36 48 54 72 108 144 30 40 53,33 60 80 120 160 etc.... 

Espero que esto ayude

Nota:

Tvdpi es un caso raro, por lo que realmente no me importa a veces a escala a valores " sin entero ".

Créditos:

Las versiones anteriores de este script, a las que he añadido soporte xxxhdpi y xxhdpi, están disponibles aquí y aquí

Sugiero un pequeño guión escrito en powershell para Inkscape.

Ejemplo:

Ponga Inkscape en "c: \ bin \ inkscape" (dir sin espacio) y dibuje todas sus imágenes en resolución mdpi (1x).

En el cuadro de propiedades del objeto Inkscape (es decir, id en xml), proporcione un nombre de Id para cada objeto que desea exportar en png.

Guarde su SVG en "C: \ users \ rone \ Pictures \ design-MyApps-forscript.svg"

Cree un directorio "d: \ temp".

Y poner esta secuencia de comandos en "C: \ app \ scripts \"


El nombre del script Powershell es "inkscape_to_png.ps1":

 param ( $inkscape_dir="C:\bin\Inkscape\", $inkscape_bin="inkscape.exe", $img_id="", $fichier_svg="C:\Users\rone\Pictures\design-MyMap-forscript.svg", $tmp_dir="d:\temp\" ) $inkscape=$(Resolve-Path "$inkscape_dir\$inkscape_bin") function getWidthHeight($img_id) { $size=@{} $old_pwd=$pwd.path cd $inkscape_dir write-host -foreground yellow "détermine la taille de $img_id" $size.width=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-width 2>$null} $size.height=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-height 2>$null} write-host -foreground yellow "width : $($size.width)" write-host -foreground yellow "height : $($size.height)" cd $old_pwd return $size } function convertTo($size, $format) { $rsize=@{} if ($format -eq "MDPI") { $rsize.width=[int]$size.width*1 $rsize.height=[int]$size.height*1 } elseif ($format -eq "LDPI") { $rsize.width=[int]$size.width*0.75 $rsize.height=[int]$size.height*0.75 } elseif ($format -eq "HDPI") { $rsize.width=[int]$size.width*1.5 $rsize.height=[int]$size.height*1.5 } elseif ($format -eq "XHDPI") { $rsize.width=[int]$size.width*2 $rsize.height=[int]$size.height*2 } elseif ($format -eq "XXHDPI") { $rsize.width=[int]$size.width*3 $rsize.height=[int]$size.height*3 } elseif ($format -eq "XXXHDPI") { $rsize.width=[int]$size.width*4 $rsize.height=[int]$size.height*4 } write-host -foreground yellow "après conversion : $format" write-host -foreground yellow "width : $($rsize.width)" write-host -foreground yellow "height : $($rsize.height)" return $rsize } function inkscape_convert() { $mdpi_size=getWidthHeight $img_id write-host -foreground gray "----------------------------------------" "MDPI,LDPI,HDPI,XHDPI,XXHDPI,XXXHDPI" -split ","|% { $new_size=convertTo $mdpi_size $_ if ($new_size.width -eq 0 -or $new_size.height -eq 0) { write-host -foreground red "erreur lors de la recherche de la taille de l'image" exit } $w=$new_size.width $h=$new_size.height $dir="$tmp_dir\drawable-$($_.toLower())" if (-not $(test-path $dir)) { write-host -foreground yellow "création du répertoire $dir" mkdir $dir } $new_file_name="$dir\$($img_id).png" $cmd="$inkscape -z -i $img_id -j -f $fichier_svg -w $w -h $h -e $new_file_name" write-host -foreground gray $cmd invoke-expression -command $cmd if ($? -eq $true) { write-host -foreground yellow "conversion OK" } } write-host -foreground gray "----------------------------------------" } inkscape_convert 

Ahora, llame a este script como este ejemplo:

@("btn_button_name_1","btn_button_name_3","btn_other", "btn_zoom", "btn_dezoom", "btn_center", "btn_wouwou", "im_abcdef", "ic_half", "ic_star", "ic_full") | % { C:\app\scripts\inkscape_to_png.ps1 -img $_ -f design-MyMap-forscript.svg }

Y el guión creará todos tus dibujos en todas las resoluciones (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) en d: \ temp \ drawable-xyz …

Así que un ahorro de tiempo cómodo.

A partir de Android L hay un VectorDrawable que es como el SHAPE de SVG pero en el estilo XML de Android

Consulte la documentación de Android:

https://developer.android.com/training/material/drawables.html#VectorDrawables

Parece que hay una herramienta en Android Studio:

Expanda su carpeta de proyecto en la vista del proyecto> haga clic con el botón derecho en la aplicación > Nuevo> Asignación de imagen

Tipo de icono: Barra de acciones y iconos de tabulación

Tipo de activo: Imagen

Elija el Camino para la imagen original (debe ser grande)

Forma: Ninguna (para hacer transparente el fondo)

Y generará las imágenes en las carpetas dibujables apropiadas.

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.