2012-01-19 92 views
6

您是否首先創建MDPI drawable,然後根據Photoshop中的像素爲0.075/1.00/1.50/2比例縮放它,還是重新創建每個drawable?什麼是創建不同dpi的drawable的最佳方法

從高質量的圖像開始並開始縮小圖像或從MDPI圖像開始並將其縮放後,它會更好嗎?

這裏是我做的:

在Photoshop中創建一個MDPI圖像分辨率320x480帶和porportions 160,因爲它的分辨率。只需輸入120,160,240或320作爲分辨率,保存4張圖像並更改分辨率。

+0

對於自動生成生成不同大小請看:http://stackoverflow.com/a/18516508/237858 – kape123

+0

使用這個android資源工作室http://romannurik.github.io/AndroidAssetStudio/通過Roman Nurik設計drawable適用於所有尺寸..喜歡 – goonerDroid

+0

我已經制作了一個簡單的java應用程序,可以自動調整圖像大小。最好的事情是,你不必解壓縮任何zip文件,並手動將生成的文件複製到res文件夾。您只需選擇res文件夾作爲輸出,並且所有分辨率下的所有圖像都將生成到正確的子文件夾。 你可以在這裏下載應用程序:https://github.com/kaladivo/android-icon-generator –

回答

6

從Android設計準則:

策略

所以,你在哪裏開始設計多屏幕的時候? 一種方法是在基本標準(中等大小,MDPI)中工作,並且 將其向上或向下擴展以用於其他存儲桶。另一種方法是 從屏幕尺寸最大的設備開始,然後縮小 並找出需要在較小屏幕上顯示的UI損害。

有關此主題的更多詳細信息,請查看Supporting Multiple Screens.

+0

謝謝你,但是你會推薦哪一個?兩種方法有沒有優點和缺點? – user870380

+0

說實話,有一個設計團隊爲我照顧這件事。我相信他們從高質量的圖像開始,並將其縮小。 – Graham

+0

@Graham對於矢量圖像來說,這是另一種方式。您從小規模開始並生成規模擴大的資產。否則質量會降低。 – HEXcube

5

尖端的Icon Design Guidelines的設計師節有以下建議:

使用矢量形狀儘可能地
當可能的話,使用矢量形狀,這樣如果需要出現,資產可以放大而不會損失細節和邊緣清晰度。

開始大畫板
因爲你需要創建針對不同屏幕密度的資產,最好是與尺寸是目標圖標大小的倍數開始大畫板您的圖標設計。例如,啓動器圖標的寬度爲96,72,48或36像素,具體取決於屏幕密度。如果您最初在864x864美工板上繪製啓動器圖標,則在將美工板縮放到目標尺寸以創建最終資產時,調整圖標會更容易和更清晰。

該部分還有其他一些很好的提示。我認爲對於其他可繪製類型(菜單圖標,背景等)也是很好的建議。

1

我一般都會開始做大,然後轉向更小。

我發現powerpoint實際上是爲我的應用程序創建資源的一個非常好的工具。所有圖形都是矢量圖,所以它們可以放大和縮小,而不會造成任何質量損失。

我傾向於從大的開始,如果沒有其他的原因,比看起來更大的東西更容易。當我移動到較小尺寸的那個時,我通常會放大一些來補償。

在PowerPoint中的任何圖形對象將讓你右鍵單擊它並選擇「另存爲圖片」,將其輸出爲您的PNG文件。剩下的事情就是放入draw9patch中,如果需要的話。

0

最好的辦法找到:創建高分辨率的圖像,然後縮減他們。

如果您使用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

0

我建議在PowerShell中的Inkscape的一個小腳本寫。

例子:

把Inkscape中在 「C:\ BIN \ Inkscape中」(DIR沒有任何空間),並畫出所有的圖像在MDPI(1X)的分辨率。

在Inkscape對象屬性框中(即id在xml中),給出你想要在png中導出的每個對象的Id名稱。

將您的SVG保存爲「C:\ users \ rone \ Pictures \ design-MyApps-forscript」。SVG」

創建目錄 「d:」

,並把這個腳本在 「\ TEMP C:\程序\腳本\」


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) { 
    [email protected]{} 

    $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) { 
    [email protected]{} 

    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所有決議案(LDPI,MDPI,華電國際,xhdpi,xxhdpi,xxxhdpi)所有可繪:\ TEMP \繪製-XYZ ...

因此,一個舒適的節省時間。

0

看起來像有Android Studio中的工具:

展開在項目視圖的項目文件夾>右鍵點擊應用>新建>圖片資源

圖標類型:動作欄和標籤圖標

資產類型:圖片

選擇原始圖像路徑(應該是大)

形狀:無(使背景透明)

它會生成圖像適當的可繪製文件夾。

相關問題