【问题标题】:What is the best way to create drawables for different dpi为不同 dpi 创建可绘制对象的最佳方法是什么
【发布时间】:2018-05-16 01:15:01
【问题描述】:

您是先创建 MDPI 可绘制对象,然后在 Photoshop 中将其按像素按 .075/1.00/1.50/2 比例相应地缩放,还是重新创建每个单独的可绘制对象?

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

这是我的工作:

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

【问题讨论】:

  • 要自动生成不同的大小,请查看:stackoverflow.com/a/18516508/237858
  • 使用 Roman Nurik 的这个 android assets studio romannurik.github.io/AndroidAssetStudio 来设计各种尺寸的drawbles..njoy
  • 我制作了一个简单的 java 应用程序,可以自动为您调整图像大小。最好的一点是您不必解压缩任何 zip 文件并将生成的文件手动复制到 res 文件夹。您只需选择 res 文件夹作为输出,所有分辨率的所有图像都将生成到正确的子文件夹中。您可以在这里下载该应用程序:github.com/kaladivo/android-icon-generator

标签: android graphics photoshop


【解决方案1】:

来自 Android 设计指南:

策略

那么,在为多屏幕进行设计时,您从哪里开始呢? 一种方法是使用基本标准(中型,MDPI)和 为其他存储桶放大或缩小它。另一种方法是 从屏幕尺寸最大的设备开始,然后缩放 下来并找出你需要在更小的 UI 上做出的妥协 屏幕。

有关此主题的更多详细信息,请查看Supporting Multiple Screens.

【讨论】:

  • 谢谢,但是你会推荐哪一个?这两种方法有优缺点吗?
  • 老实说,有一个设计团队会为我解决这个问题。我相信他们从高质量图像开始,然后按比例缩小。
  • @Graham 对于矢量图像,这是另一种方式。您从小处着手并生成扩大的资产。否则质量会下降。
【解决方案2】:

Icon Design Guidelines 的设计师提示部分有以下建议:

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

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

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

【讨论】:

    【解决方案3】:

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

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

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

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

    【讨论】:

      【解决方案4】:

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

      【讨论】:

        【解决方案5】:

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

        如果您使用 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 支持,可用herehere

        【讨论】:

          【解决方案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 }

          脚本将在 d:\temp\drawable-xyz ... 中创建所有分辨率(ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi)的所有可绘制对象...

          这样可以节省时间。

          【讨论】:

            【解决方案7】:

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

            请参阅 Android 文档:

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

            【讨论】:

              【解决方案8】:

              Android Studio 中好像有一个工具:

              在项目视图中展开您的项目文件夹 > 右键单击​​ app > 新建 > 图片资源

              图标类型:操作栏和标签图标

              资产类型:图片

              选择原图的路径(应该很大)

              形状:无(使背景透明)

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

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2020-05-28
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2011-09-18
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多