为不同dpi创建可绘制内容的最佳方式是什么



您是先创建MDPI可绘制图,然后在photoshop中按照0.075/1.00/1.50/2的像素比例缩放,还是重新创建每个单独的可绘制图?

此外,是从高质量图像开始并缩小它更好,还是从MDPI图像开始并放大它更好?

我是这样做的:

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

来自Android设计指南:

策略

那么,在设计多个屏幕时,你从哪里开始呢?一种方法是在基本标准(中等尺寸,MDPI)中工作按比例放大或缩小其他桶。另一种方法是从屏幕大小最大的设备开始,然后缩放并找出您需要在较小的UI上做出的妥协屏幕。

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

图标设计指南的设计师提示部分有以下建议:

尽可能使用矢量形状
在可能的情况下,使用矢量形状,这样,如果需要,可以在不损失细节和边缘清晰度的情况下放大资产。

从大型艺术板开始
因为您需要为不同的屏幕密度创建资产,所以最好在尺寸为目标图标大小倍数的大型艺术板上开始图标设计。例如,启动器图标的宽度为96、72、48或36像素,具体取决于屏幕密度。如果最初在864x864艺术板上绘制启动器图标,那么在将艺术板缩小到最终资产创建的目标大小时,调整图标会更容易、更干净。

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

我通常从大开始,然后移到小。

我发现powerpoint实际上是为我的应用程序创建资源的一个非常好的工具。所有的图形都是矢量的,所以它们可以上下缩放,不会有任何质量损失。

我倾向于从大的开始,如果没有其他原因的话,那就是处理看起来更大的东西更容易。当我移到较小尺寸的时候,我通常会放大一些来补偿。

powerpoint中的任何图形对象都允许您右键单击它并选择"另存为图片",这将为您输出一个png文件。如果需要的话,只剩下将其放入draw9patch中。

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

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

如果你使用Photoshop,那将是小菜一碟

我的分叉版Output 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....

希望这能帮助

注意:

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

学分:

我添加了xxxhdpi和xxhdpi支持的此脚本的早期版本可在此处获得此处

我建议用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:binInkscape",
    $inkscape_bin="inkscape.exe",
    $img_id="",
    $fichier_svg="C:UsersronePicturesdesign-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_dirdrawable-$($_.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:appscriptsinkscape_to_png.ps1 -img $_ -f design-MyMap-forscript.svg }

该脚本将在d:\temp\drawable xyz中创建所有分辨率(ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi)的可绘制文件。。。

这样可以节省舒适的时间。

从Android L开始,有一个VectorDrawable,它类似于SVG中的SHAPE,但在Android的XML风格中

请参阅Android文档:

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

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

在项目视图中展开项目文件夹>右键单击应用程序>新建>图像资产

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

资产类型:图像

为原始图像选择路径(应该很大)

形状:无(使背景透明)

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

最新更新