Membuat Aplikasi Windows 8 – 8 – Image Asset Scalation

Assalamu’alaikum :)

Pada kesempatan kali ini saya akan membagikan sedikit info mengenai Image Asset yang ada di appxmanifest di tab Application UI. Penjelasan mengenai appxmanifest pun bisa dibaca di postingan ini.

Di Appxmanifest, khususnya tab Application UI, disitu akan ada tempat untuk menset Logo, Wide Logo, Splash Screen dan sebagainya. Dan ketika sudah kita isi URI nya dengan Image yang kita punya maka hasilnya akan seperti di bawah ini:

Default Image Asset

Gambar yang kita masukkan akan menempati kotak yang ketiga. Yang jadi pertanyaannya adalah, apakah fungsi kotak-kotak yang lainnya?

Windows 8 digunakan dalam berbagai tipe layar monitor beserta ukuran pixel yang berbeda-beda. Visual Studio membaginya menjadi 4 kategori, yaitu kategori normal (100%), dua skala di atasnya 180% dan 140% dan satu skala di bawahnya 80%.

Yang wajib kita isi adalah yang Skala 100%, itulah mengapa yang terisi yang kotak nomor 3. Tetapi, jika logo kita itu digunakan di computer dengan resolusi layar yang tinggi maka gambarnya akan terlihat pecah dan jadi jelek dilihatnya. Jadi, saya sarankan di isi semua. Caranya?

  1. Pertama buat saja gambar dengan ukuran paling besar (180%), yaitu 270 x 270 px untuk Logo.
  2. Lalu kita kecilkan menjadi ukuran-ukuran yang diminta, 210 x 210 px, 150 x 150 px dan 120 x 120 px. Mengecilkan bisa menggunakan MS Paint, atau Adobe Photoshop kalau mau.
  3. Rename icon skala 180% menjadi “logo.scale-180.png”. Begitu pula dengan yang 140%, 100% dan 80% menjadi logo.scale-140.png, logo.scale-100.png dan logo.scale-80.png
    Logo Pack
  4. Include semua gambar tersebut ke dalam folder images
    Import to VS
  5. Masukkan di kolom URI logo base name nya saja, yaitu logo.png
  6. Maka semua icon akan automatis terload
    Scaled

 

Nah, simple kan? Lakukan hal yang sama pada Wide-logo, SplashScreen, Store Logo, Small Logo dan Badge Logo (Kalau dipakai). Tentunya dengan gambar yang sudah disesuaikan semua.

Import All

NOTE: ketika mengisi untuk Small Logo, maka akan ada yang namanya kotak Target Size 256, Target Size 48, Target Size 32 dll. Nama untuk file nya diganti, missal kalau yang skala smalllogo.scale-100.png diganti menjadi smalllogo.target-16.png, smalllogo.target-256.png dan seterusnya (lihat gambar di atas)

 

Okay, sekian dulu postingan kali ini. Ingat Visual itu penting untuk menarik impresi pertama user kita.

REFERENSI:
Kraig Brockschmid. Programming Windows 8 Apps with HTML, CSS, and JavaScript, 2012.

AbangFadli, out :cool:

Wassalamu’alaikum :kr

Ilmu jangan disimpan sendiri, bagikan ke teman-teman anda:

Comments

comments

Ahmad Fadli Basyari

Mahasiswa IT di President University. Memiliki hobi membuat aplikasi mobile, blogging dan menonton film.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA *

[+] kaskus emoticons nartzco