2012-01-19 23 views
6

Bạn có tạo MDPI có thể vẽ đầu tiên và chỉ tỷ lệ phù hợp với tỷ lệ 0,75/1,00/1,50/2 theo pixel trong photoshop hoặc bạn tạo lại từng ảnh có thể vẽ không?Cách tốt nhất để tạo drawables cho dpi khác nhau

Bạn cũng nên bắt đầu với hình ảnh chất lượng cao và bắt đầu thu nhỏ hoặc bắt đầu với hình ảnh MDPI và chỉ cần mở rộng hình ảnh đó?

Đây là những gì tôi làm:

Tạo hình ảnh mdpi trong photoshop với 320x480 porportions và 160 làm độ phân giải. Lưu 4 hình ảnh và thay đổi độ phân giải bằng cách chỉ cần nhập 120,160, 240 hoặc 320 làm độ phân giải.

+0

Để tạo tự động tạo các kích thước khác nhau, hãy xem: http://stackoverflow.com/a/18516508/237858 – kape123

+0

sử dụng studio tài sản android này http://romannurik.github.io/AndroidAssetStudio/ bởi Roman Nurik để thiết kế các hình vẽ cho tất cả các kích cỡ ..njoy – goonerDroid

+0

Tôi đã tạo một ứng dụng java đơn giản có thể tự động thay đổi kích thước hình ảnh cho bạn. Điều tốt nhất về nó là bạn không phải giải nén bất kỳ tệp zip nào và sao chép thủ công tệp đã tạo vào thư mục res. Bạn chỉ cần chọn thư mục res là đầu ra và tất cả các hình ảnh trong tất cả các độ phân giải sẽ được tạo ra cho các thư mục con bên phải. Bạn có thể tải xuống ứng dụng tại đây: https://github.com/kaladivo/android-icon-generator –

Trả lời

6

Từ hướng dẫn thiết kế Android:

Chiến lược

Vì vậy, nơi nào bạn bắt đầu khi thiết kế cho nhiều màn hình? Một cách tiếp cận là làm việc theo tiêu chuẩn cơ sở (kích thước trung bình, MDPI) và mở rộng hoặc giảm cho các nhóm khác. Một cách tiếp cận khác là để bắt đầu bằng thiết bị có kích thước màn hình lớn nhất và sau đó chia tỷ lệ xuống và tìm ra các thỏa hiệp giao diện người dùng mà bạn cần thực hiện trên màn hình nhỏ hơn.

Để biết thông tin chi tiết hơn về chủ đề này, hãy kiểm tra Supporting Multiple Screens.

+0

Cảm ơn bạn, tuy nhiên bạn sẽ đề xuất ứng dụng nào? Có bất kỳ ưu và nhược điểm nào cho cả hai phương pháp? – user870380

+0

Thành thật mà nói, có một đội ngũ thiết kế chăm sóc điều này cho tôi. Tôi tin rằng họ bắt đầu với hình ảnh chất lượng cao và quy mô nó xuống. – Graham

+0

@Graham Đối với hình ảnh vector, đó là cách khác. Bạn bắt đầu từ nhỏ và tạo ra các tài sản được chia tỷ lệ. Nếu không thì chất lượng sẽ bị suy giảm. – HEXcube

5

Các lời khuyên cho việc thiết kế phần của Icon Design Guidelines có những lời khuyên sau đây:

hình Sử dụng vector nếu có thể
Khi có thể, sử dụng các hình dạng vectơ để nếu nhu cầu phát sinh, tài sản có thể được thu nhỏ mà không làm mất chi tiết và độ sắc nét cạnh.

Bắt đầu với artboards lớn
Bởi vì bạn sẽ cần để tạo tài sản cho mật độ màn hình khác nhau, tốt nhất là để bắt đầu thiết kế biểu tượng của bạn trên artboards lớn với kích thước mà là bội số của kích thước biểu tượng mục tiêu. Ví dụ: biểu tượng trình khởi chạy có chiều rộng 96, 72, 48 hoặc 36 pixel, tùy thuộc vào mật độ màn hình. Nếu ban đầu bạn vẽ biểu tượng trình khởi chạy trên bản vẽ 864x864, sẽ dễ dàng hơn và tinh chỉnh hơn các biểu tượng khi bạn mở rộng bảng vẽ xuống kích thước mục tiêu để tạo nội dung cuối cùng.

Có một số mẹo hay khác trong phần đó. Tôi nghĩ rằng đó là lời khuyên tốt cho các loại drawable khác (biểu tượng menu, hình nền, vv).

1

Tôi thường bắt đầu lớn và di chuyển đến nhỏ hơn.

Tôi thấy rằng powerpoint thực sự là một công cụ rất hay để tạo tài nguyên cho ứng dụng của tôi. Tất cả đồ họa đều là vectơ, vì vậy chúng co giãn lên và xuống mà không bị mất chất lượng.

Tôi có xu hướng bắt đầu với những cái lớn nếu không có lý do nào khác hơn là dễ dàng hơn để làm việc với một cái gì đó trông lớn hơn. khi tôi chuyển sang các kích thước nhỏ hơn, tôi thường phóng to một số để bù lại.

Bất kỳ đối tượng đồ họa nào trong powerpoint sẽ cho phép bạn nhấp chuột phải vào đối tượng đồ họa đó và chọn "Lưu dưới dạng ảnh" sẽ xuất dưới dạng tệp png cho bạn. Chỉ có điều còn lại là để thả nó vào draw9patch nếu cần thiết.

1

Tôi sử dụng Inkscape, làm việc với hình ảnh vector, sau đó xuất sang kích thước raster theo yêu cầu cho các độ phân giải khác nhau. Bài viết tôi đã viết về việc tạo biểu tượng từ Inkscape có thể được tìm thấy tại http://androidcookbook.com/Recipe.seam?recipeId=2549

0

Cách tốt nhất: tạo hình ảnh có độ phân giải cao, sau đó hạ thấp chúng xuống.

Nếu bạn sử dụng Photoshop, nó sẽ là một miếng bánh!

phiên bản chia hai của tôi về Output Android Assets.jsx kịch bản tự động quá trình downscale cho tất cả dpi :-)

Trong một cú nhấp chuột, nó sẽ tạo:

  • tất cả các drawable - ??? ? thư mục
  • với tất cả phiên bản hình ảnh thu nhỏ của tất cả tệp psd hoặc png có độ phân giải cao của bạn.

Vì vậy, chỉ cần tạo hình ảnh xxxhdpi rồi chia tỷ lệ chúng thành tập lệnh.

Tạo ban đầu res cao hình ảnh chiều rộng và chiều cao như một bội số là khôn ngoan vì chúng sẽ quy mô xuống đúng như minh họa trong bảng này:

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.... 

Hope this helps

Lưu ý:

tvdpi là trường hợp hiếm hoi , do đó, tôi thực sự không quan tâm đến nó đôi khi thu nhỏ xuống giá trị "không có số nguyên".

Điểm Uy Tín:

Cựu phiên bản của kịch bản này, mà tôi đã thêm xxxhdpi và hỗ trợ xxhdpi, có sẵn herehere

0

Tôi đề nghị một chút kịch bản ghi trong PowerShell cho Inkscape.

Ví dụ:

Đặt Inkscape trong "c: \ bin \ inkscape" (dir mà không cần bất kỳ không gian) và vẽ tất cả hình ảnh của bạn trong mdpi (1x) độ phân giải.

trong hộp thuộc tính đối tượng Inkscape (ví dụ id trong xml), đặt tên Id cho từng đối tượng mà bạn muốn xuất trong png.

Lưu SVG của bạn thành "C: \ users \ rone \ Pictures \ design-MyApps-forscript.svg"

Tạo một thư mục "d:".

Và đưa kịch bản này trong "\ temp C: \ ứng dụng \ scripts \"


tên kịch bản Powershell là "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 

bây giờ, gọi kịch bản này như ví dụ sau:

012.351.

@("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 }

Và kịch bản sẽ tạo mọi drawables của bạn trong tất cả các độ phân giải (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) trong d: \ temp \ drawable-xyz ...

Vì vậy, một confortable tiết kiệm thời gian.

0

Hình như có một công cụ trong Android Studio:

Mở rộng thư mục dự án của bạn trong Chế độ xem dự án> nhấp chuột phải vào ứng dụng> Mới> Hình ảnh tài sản

Biểu tượng Type: Action Bar và Tab Icons

Loại tài sản: ảnh

Chọn Đường dẫn cho hình ảnh ban đầu (nó phải lớn)

Shape: Không (để làm nền trong suốt)

Và nó sẽ tạo ra các hình ảnh trong các thư mục có thể vẽ thích hợp.

Các vấn đề liên quan