What is the best way to create drawings for different dpi?

Question

Do you create MDPI in the first place and simply scale it according to the coefficient .075 / 1.00 / 1.50 / 2 per pixel in Photoshop or do you recreate each individual method?

Also, is it better to start with a high-quality image and start scaling it, or start with an MDPI image and just increase it?

That's what I'm doing:

Create an mdpi image in Photoshop with 320x480 portions and 160 as a resolution. Save 4 images and change the resolution by simply entering 120, 160, 240 or 320 as the resolution.

Answer 1

In the Android Design Guide:

Strategies

So where do you start when designing for multiple screens? One approach is to work in a basic standard (medium size, MDPI) and scale it up or down for other buckets. Another approach is to start with the device with the largest screen size, and then scale down and find out the trade-offs with the user interface that you will need to make on screens.

For more information on this topic, support for multiple screens.

Answer 2

The Design Tips section of the Icon Design Guide contains the following:

Use vector shapes where possible
Whenever possible, use vector shapes so that assets can be scaled when necessary, without losing detail and sharp edges.

Start with large mounting plates.
Since you will need to create assets for different screen densities, it is best to start creating your own icons on large circuit boards with sizes that are multiples of the sizes of the target icons. For example, launch icons are 96, 72, 48, or 36 pixels wide, depending on screen density. If you initially drew launcher icons on an 864x864 artboard, it will be easier and cleaner to customize the icons when you scale to the size of the target size for the final creation of the asset.

There are several other helpful tips in this section. I think this is good advice for the other types available (menu icons, backgrounds, etc.).

Answer 3

I generally start big and move to a smaller one.

I find that powerpoint is actually a very good resource creation tool for my applications. All graphs are vectorial, therefore they are scaled up and down without loss of quality.

I try to start with large, if not for any other reason, the easier it is to work with something big. when I move to small sizes, I usually enlarge a part to compensate.

Any graphic in powerpoint will allow you to right-click it and select "Save as Image", which will display it as a png file for you. It remains only to leave it in draw9patch, if necessary.

Answer 4

I use Inkscape, working with vector images, and then export the required raster size for various resolutions. The article I wrote about creating icons from Inkscape can be found at http://androidcookbook.com/Recipe.seam?recipeId=2549

Answer 5

The best way: create high-resolution images and then reduce them.

If you use Photoshop, this will be a piece of cake!

My branched version of the Android Assets.jsx script exit automates the scaling process for all dpi :-)

In one click he will create :

• all available - ???? folders
• with all versions of all thumbnails of your high resolution psd or png files.

So, just create xxxhdpi images , then reduce them with a script.

Creating the initial height and height of a high-resolution image as a multiple of 16 is reasonable, as they will scale correctly , as shown 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 really don’t care about it, sometimes decreasing the “without integer” values.

Loans:

Former versions of this script, to which I added support for xxxhdpi and xxhdpi, are available here and here.

Answer 6

I suggest writing a little script in powershell for Inkscape.

Example:

Put Inkscape in "c: \ bin \ inkscape" (without any space) and draw all your images in mdpi (1x) resolution.

In the Inkscape object properties window (ie id in xml), specify the identifier name for each object that you want to export to png.

Save your SVG to "C: \ users \ rone \ Pictures \ design-MyApps-forscript.svg"

Create the d: \ temp directory.

And put this script in "C: \ app \ scripts \"

---

The name of the Powershell script 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 

---

call this script as an 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 drawings in all resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) in d: \ temp \ drawable-xyz ...

So convenient time saving.

Answer 7

With Android L, there is a VectorDrawable that looks like SHAPE from SVG, but in Android XML style

see Android documentation:

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

Answer 8

There seems to be a tool in Android Studio:

Expand the project folder in the project view> right-click on the application > New> Image Object

Icon Type: Action Icons and Tabs

Asset Type: Image

Select Path for the source image (it should be large)

Shape: None (to make a transparent background)

And it will generate images in the appropriate accessible folders.