Каков наилучший способ создания drawables для разных dpi

сначала создайте mdpi drawable и просто масштабируйте его в соответствии с.075/1.00/1.Соотношение 50/2 по пикселям в photoshop или вы воссоздаете каждый отдельный рисунок?

также лучше начать с изображения высокого качества и начать его масштабирование или начать с изображения MDPI и просто масштабировать его?

вот что я делаю:

создайте изображение mdpi в photoshop с порциями 320x480 и 160 в качестве разрешения. Сохраните 4 изображения и измените разрешение просто введя 120,160, 240 или 320, как разрешение.

8 ответов


из руководства по дизайну Android:

стратегии

Итак, с чего начать при проектирование для нескольких экранов? Один из подходов заключается в работе в базовом стандарте (средний размер, MDPI) и масштабировать его вверх или вниз для остальных сегментов. Другой подход заключается в следующем: начнем с устройства с наибольшим размером экрана, а затем данные вниз и выяснить UI компромиссы, которые вам нужно будет сделать на меньшем экраны.

для получения более подробной информации по этой теме, проверить Поддержка Нескольких Экранов.


советы для дизайнеров раздел Рекомендации По Дизайну Значков имеет следующий совет:

использовать векторные фигуры, где это возможно
Когда это возможно, используйте векторные фигуры, чтобы при необходимости активы можно было масштабировать без потери детализации и четкости кромок.

начните с больших монтажных панелей
Поскольку вам нужно будет создавать активы для различных плотностей экрана, лучше всего начать дизайн значков на больших монтажных панелях с размерами, кратными целевым размерам значков. Например, значки запуска имеют ширину 96, 72, 48 или 36 пикселей в зависимости от плотности экрана. Если вы изначально рисуете значки запуска на монтажной панели 864x864, будет проще и чище настроить значки при масштабировании монтажной панели до целевых размеров для окончательного создания активов.

в этом разделе есть несколько других приятных советов. Я думаю, что это хороший совет для других типы рисуемых (иконки меню, фонов и т. д.).


Я обычно начинаю с большого и перехожу к меньшему.

Я считаю, что powerpoint на самом деле очень хороший инструмент для создания ресурсов для моих приложений. Все графики являются векторными, поэтому они масштабируются вверх и вниз без потери качества.

Я начинаю с больших, если ни по какой другой причине, чем проще работать с чем-то, что выглядит больше. когда я перехожу к меньшим размерам, я обычно увеличиваю некоторые, чтобы компенсировать.

любой графический объект в powerpoint позволит вам щелкнуть правой кнопкой мыши и выбрать "Сохранить как изображение", который выведет его в виде файла png для вас. Осталось только бросить его в draw9patch, если нужно.


Я использую Inkscape, работая с векторными изображениями, а затем экспортирую в требуемый размер растра для различных разрешений. Статью, которую я написал о создании иконок из Inkscape, можно найти по адресуhttps://tekeye.uk/android/android-launcher-icons-using-inkscape


лучший способ: создайте изображения с высоким разрешением, затем уменьшите их.

если вы используете Photoshop, это будет кусок пирога!

моя раздвоенная версия Вывод Активов Android.jsx скрипт автоматизация процесса downscale для всех dpi : -)

в один клик, это будет создать:

  • все drawable-???? папки
  • со всеми уменьшенными изображениями версии все ваши psd или png файлы с высоким разрешением.

Так, Просто создать xxxhdpi изображения затем уменьшите их с помощью скрипта.

создание начальных изображений с высоким разрешением ширина и высота как кратно 16 - это мудро, так как они будут уменьшить должным образом как показано в этой таблице:

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

надеюсь, что это помогает

Примечание:

tvdpi это редкий случай, поэтому я плевать он иногда сворачивают на "не целое число" ценности.

благодарности:

доступны прежние версии этого скрипта, к которым я добавил поддержку xxxhdpi и xxhdpi здесь и здесь


Я предлагаю немного написать сценарий в powershell для Inkscape.

пример :

положите Inkscape в "c:\bin\inkscape" (реж. без пробелов) и нарисуйте все ваши изображения в разрешении mdpi (1x).

в поле свойств объекта Inkscape (i.e id в xml), дайте имя Id для каждого объекта, который вы бы экспортировали в png.

сохраните SVG в " C:\users\rone\Pictures\design-MyApps-forscript - ... svg"

создать dir "d:\temp".

и поместите этот скрипт в "C:\app\scripts\"


имя сценария Powershell - " 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

теперь вызовите этот скрипт в качестве примера:

@("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 }

и скрипт создаст все ваши чертежи во всех разрешениях (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) в d:\temp\drawable-xyz - ... ..

Так confortable экономия времени.


с Android L есть VectorDrawable, который похож на форму из SVG, но в стиле XML Android

см. документацию по Android:

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


похоже, что в Android Studio есть инструмент:

разверните папку проекта в окне проекта > щелкните правой кнопкой мыши на app > New > Image Asset

Значок Типа: панель действий и вкладки иконки

Вид Актива: изображения

выбрать путь для исходного изображения (оно должно быть большим)

форма: отсутствует (сделать фон прозрачным)

и он будет генерировать изображения в соответствующих папках drawable.