为不同 dpi 创建可绘制对象的最佳方法是什么

Question

您是先创建 MDPI 可绘制对象，然后在 Photoshop 中将其按像素比例缩放到 0.075/1.00/1.50/2，还是重新创建每个单独的可绘制对象？

另外，是从高质量图像开始并开始缩小它还是从 MDPI 图像开始然后放大它更好？

这就是我所做的：

在 Photoshop 中创建一个 320x480 比例和 160 分辨率的 mdpi 图像。只需输入 120,160、240 或 320 作为分辨率即可保存 4 个图像并更改分辨率。

Answer 1

来自Android设计指南：

策略

那么，在为多个屏幕进行设计时，您从哪里开始呢？
一种方法是按照基本标准（中等尺寸，MDPI）工作，
针对其他存储桶放大或缩小它。另一种方法是
从屏幕尺寸最大的设备开始，然后缩放
下来并找出你需要在较小的用户界面上做出的妥协
屏幕。

有关此主题的更多详细信息，请查看支持多个屏幕。

Answer 2

图标设计指南的设计人员提示部分有以下建议：

尽可能使用矢量形状
如果可能，请使用矢量形状，以便在需要时可以按比例放大资源，而不会丢失细节和边缘清晰度。

从大画板开始
由于您需要为不同的屏幕密度创建资源，因此最好在尺寸为目标图标大小的倍数的大型画板上开始图标设计。例如，启动器图标的宽度为 96、72、48 或 36 像素，具体取决于屏幕密度。如果您最初在 864x864 画板上绘制启动器图标，则当您将画板缩小到最终资源创建的目标尺寸时，调整图标会更容易、更清晰。

该部分还有许多其他不错的提示。我认为这对于其他可绘制类型（菜单图标、背景等）也是很好的建议。

Answer 3

我通常从大开始，然后逐渐变小。

我发现 powerpoint 实际上是一个非常好的工具，可以为我的应用程序创建资源。所有图形都是矢量，因此它们可以按比例放大和缩小，而不会造成任何质量损失。

如果没有其他原因，我倾向于从大的开始，因为使用看起来更大的东西更容易。当我转向较小尺寸的尺寸时，我通常会放大一些以进行补偿。

Powerpoint 中的任何图形对象都允许您右键单击它并选择“另存为图片”，这会将其输出为 png 文件。剩下的唯一一件事就是如果需要的话将其放入draw9patch中。

Answer 4

我使用 Inkscape，也处理矢量图像，然后导出到各种分辨率所需的光栅大小。我写的关于从 Inkscape 生成图标的文章可以在 https://tekeye 找到.uk/android/android-launcher-icons-using-inkscape

Answer 5

最好的方法：创建高分辨率图像，然后缩小它们。

如果你使用Photoshop，这将是小菜一碟！

我的分叉版本输出Android Assets.jsx 脚本自动执行所有 dpi 的缩小过程 :-)

只需单击一下，它将创建：

• 所有可绘制对象-???? 文件夹
• 包含所有 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....

希望这会有所帮助

注意：< /strong>

tvdpi 是一种罕见的情况，所以我并不真正关心它有时会缩小到“无整数”值。

鸣谢：

此脚本的先前版本（我添加了 xxxhdpi 和 xxhdpi 支持）可使用 这里
和此处

Answer 6

我建议在 powershell 中为 Inkscape 编写一个小脚本。

示例：

将 Inkscape 放入“c:\bin\inkscape”（目录中没有任何空格），并以 mdpi (1x) 分辨率绘制所有图像。

在 Inkscape 对象属性框中（即 xml 中的 id），为要以 png 格式导出的每个对象指定一个 ID 名称。

将 SVG 保存到“C:\users\rone\Pictures\design-MyApps-forscript.svg”

创建一个目录“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) in d:\temp\drawable-xyz ...

所以节省了很多时间。

Answer 7

从 Android L 开始，有一个 VectorDrawable，它类似于 SVG 中的 SHAPE，但采用 Android 的 XML 样式，

请参阅 Android 文档：

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

Answer 8

看起来Android Studio中有一个工具：

在“项目视图”>“展开你的项目文件夹”右键单击应用程序>新的>图像资源

图标类型：操作栏和选项卡图标

资源类型：图像

选择原始图像的路径（应该很大）

形状：无（使背景透明）

并且它将在适当的可绘制文件夹中生成图像。