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

6
你是先创建MDPI图像,然后在Photoshop中按照0.75/1.00/1.50/2的比例缩放像素,还是重新创建每个单独的图像呢?
此外,是使用高质量图像并逐步缩小它,还是从MDPI图像开始,然后将其放大呢?
这是我的做法:
在Photoshop中创建一个320x480比例为160的MDPI图像。通过简单地输入120、160、240或320作为分辨率保存4张图像并更改分辨率。

自动生成不同大小的代码,请参考以下链接:https://dev59.com/cHDXa4cB1Zd3GeqP-09I#18516508 - nikib3ro
使用Roman Nurik的Android Asset Studio(http://romannurik.github.io/AndroidAssetStudio/)来为所有尺寸设计可绘制对象。享受吧! - williamj949
我已经制作了一个简单的Java应用程序,可以自动调整图像的大小。最好的是,您不需要解压任何zip文件,并手动将生成的文件复制到res文件夹中。您只需将res文件夹选择为输出目录,所有分辨率的图像都将生成到相应的子文件夹中。您可以在此处下载该应用程序:https://github.com/kaladivo/android-icon-generator - David Novák
8个回答

6

根据 Android 设计指南:

策略

在为多种屏幕进行设计时,从哪里开始呢? 一种方法是在基准标准中工作(中等大小,MDPI),然后将其放大或缩小到其他桶中。 另一种方法是从屏幕尺寸最大的设备开始,然后缩小并找出需要在较小屏幕上进行的 UI 妥协。

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


谢谢,不过你会推荐哪一个呢?这两种方法有什么优缺点吗? - user870380
说实话,有一个设计团队为我负责这个。我相信他们从高质量的图像开始,然后将其缩小。 - Graham
@Graham 对于矢量图像来说,情况正好相反。你需要从小的图像开始生成放大后的资源,否则质量会降低。 - Rohan 'HEXcube' Villoth

5
图标设计指南中的设计师技巧部分提供以下建议:

尽可能使用矢量形状
如果可能的话,请使用矢量形状,这样如果需要,资源可以放大而不会失去细节和边缘清晰度。

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

该部分还提供了许多其他有用的技巧。我认为这些建议对于其他可绘制类型(菜单图标、背景等)也很有帮助。

1

我通常从大的开始,然后逐渐缩小。

我发现PowerPoint实际上是创建应用程序资源的非常好的工具。所有的图形都是矢量图,因此它们可以在不失去任何质量的情况下进行放大和缩小。

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

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


1

0

0

看起来在Android Studio中有一个工具:

在项目视图中展开项目文件夹 > 右键点击 app > 新建 > 图像资源

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

资源类型:图像

选择原始图像的路径(应该是大图)

形状:无(使背景透明)

然后它将在相应的drawable文件夹中生成图像。


0

我建议使用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)中创建您的所有可绘制对象,存储在 d:\temp\drawable-xyz 中。

这样可以节省大量时间。


0

最佳方法:创建高分辨率图像,然后缩小它们。

如果您使用Photoshop,那将非常简单!

我的分支版本 Output Android Assets.jsx脚本自动化了所有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 支持,可以在 这里这里 找到。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接