What is the best way to create drawables for diffe

问题:

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.

回答1:

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.

回答2:

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.).

回答3:

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.

回答4:

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

回答5:

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:

• all the drawable-???? folders
• with all the down-scaled images version of all your psd or png High res files.

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

回答6:

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.

回答7:

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

回答8:

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.