Do you create the MDPI drawable first and just scale it accordinly to the .075/1.00/1.50/2 ratio by pixels in photoshop or do you recreate each individual drawable?
Also is it better to start with a high quality image and start scaling it down or start with a MDPI image and just scale it up?
Here's what i do:
Create a mdpi image in photoshop with 320x480 porportions and 160 as it's resolution. Save 4 images and changing the resolution by simply entering 120,160, 240, or 320 as the resolution.
From the Android design guidelines:
Strategies
So where do you begin when designing for multiple screens? One approach is to work in the base standard (medium size, MDPI) and scale it up or down for the other buckets. Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.
For more detailed information on this topic, check out Supporting Multiple Screens.
The tips for designers section of the Icon Design Guidelines has the following advice:
Use vector shapes where possible
When possible, use vector shapes so that if the need arises, assets can be scaled up without loss of detail and edge crispness.Start with large artboards
Because you will need to create assets for different screen densities, it is best to start your icon designs on large artboards with dimensions that are multiples of the target icon sizes. For example, launcher icons are 96, 72, 48, or 36 pixels wide, depending on screen density. If you initially draw launcher icons on an 864x864 artboard, it will be easier and cleaner to tweak the icons when you scale the artboard down to the target sizes for final asset creation.
There are a number of other nice tips in that section. I think it's good advice for other drawable types as well (menu icons, backgrounds, etc.).
I generally start big, and move to smaller.
I find that powerpoint is actually a very nice tool for creating resources for my applications. All of the graphics are vector, so they scale up and down without any quality loss.
I tend to start with the big ones if for no other reason than it is easier to work with something that looks bigger. when I move to the smaller sized ones I generally zoom in some to compensate.
Any graphic object in powerpoint will allow you to right click it and choose "Save as picture" which will output it as a png file for you. Only thing left is to drop it into draw9patch if need be.
I use Inkscape, working with vector images as well, then export to the required raster size for the various resolutions. An article I wrote on producing icons from Inkscape can be found at https://tekeye.uk/android/android-launcher-icons-using-inkscape
Best way: create high res images, then downscale them.
If you use Photoshop, it will be a piece of cake!
My forked version of Output Android Assets.jsx script automate the downscale process for all dpi :-)
In one click, it will create:
So, just create xxxhdpi images then scale them down with the script.
Creating initial high res images width and height as a multiple of 16 is wise since they will scale down properly as illustrate in this table:
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....
Hope this helps
Note:
tvdpi is a rare case, so I don't really care about it sometimes scaling down to "no integer" values.
Credits:
Former versions of this script, to which I added xxxhdpi and xxhdpi support, are available here and here
I suggest a little script write in powershell for Inkscape.
Example :
Put Inkscape in "c:\bin\inkscape" (dir without any space) and draw all your images in mdpi (1x) resolution.
in Inkscape object properties box (i.e id in xml), give an Id name for each object that you would to export in png.
Save your SVG to " C:\users\rone\Pictures\design-MyApps-forscript.svg"
Create a dir "d:\temp".
And put this script in "C:\app\scripts\"
Powershell script name is "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
now, call this script as this example :
@("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 }
And the script will create all your drawables in all resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) in d:\temp\drawable-xyz ...
So a confortable time saving.
As of Android L there is a VectorDrawable which is like the SHAPE from SVG but in Android's XML style
see Android documentation:
https://developer.android.com/training/material/drawables.html#VectorDrawables
Looks like there's a tool in Android Studio:
Expand your project folder in the Project View > right click on app > New > Image Asset
Icon Type: Action Bar and Tab Icons
Asset Type: Image
Choose the Path for original image (it should be big)
Shape: None (to make background transparent)
And it will generate the images in the appropriate drawable folders.
