Tutorial Ikon iPad dan iPhone

JUDUL: Tutorial Ikon iPad dan iPhone


Jika Anda bekerja dalam desain digital, Anda sudah tahu bahwa membangun kehadiran web yang sukses berarti menjangkau orang-orang di perangkat seluler Apple, dan elemen penting dari itu adalah memiliki ikon Apple iOS yang menarik.

Karena tampilan web semakin bergeser dari PC ke unit genggam, cara utama orang mendapatkan konten adalah dengan mengklik ikon persegi kecil yang mengisi layar beranda iPhone dan iPad di seluruh dunia. Setiap orang yang memiliki situs web atau blog mempelajari apa yang telah lama diketahui oleh pengembang aplikasi: bagi jutaan pengguna, ikon iPhone dan iPad adalah wajah publik Anda. Seperti gambar yang kami pasang di samping profil kencan online, jika tidak menarik kami tidak akan mendapatkan banyak klik.

Ikon iPad dan iPhone juga semakin menjadi cara orang menandai situs web. Jika Anda tidak memberikan salah satu dari gambar ini, tangkapan layar beranda Anda akan digunakan secara default, dan tidak ada yang mau menyerahkan real estat layar beranda yang berharga untuk itu. Orang-orang sangat peduli dengan tampilan homescreen mereka, terutama pengguna iPhone yang cenderung lebih modis. Mengapa tidak memberi mereka sesuatu yang bagus? Lakukan untuk para penggemar.

Jadi jangan tunda lagi… Mari kita buat sebuah ikon.

Empat Pertanyaan Yang Sering Diajukan Tentang Ikon iPad dan iPhone

1. Apakah harus persegi dengan sudut membulat?

IYA. Salah satu hal yang kami sukai dari Apple adalah desain antarmukanya yang keren, dan sedikit standarisasi adalah harga yang kami bayar untuk itu. Yang mengatakan, satu-satunya batasan nyata yang kita hadapi adalah bahwa karya seni kita harus pas di dalam persegi. Itu karena ikon kita akan diubah ukurannya dan diformat ulang secara otomatis agar sesuai dengan berbagai bagian antarmuka Apple yang menggunakan kotak. (Untuk mengetahui hal ini, kunjungi situs Panduan Antarmuka Manusia Apple .)

2. Apakah ikon iPad dan iPhone saya harus memiliki highlight glossy di atasnya?

TIDAK. Jika Anda ingin membuat efek pencahayaan Anda sendiri atau lebih suka tampilan yang lebih datar untuk ikon tertentu, Anda dapat memberi tahu Apple untuk tidak menerapkan gloss, yang mengarahkan kami ke…

3. Bagaimana cara mempostingnya di situs saya?

Cukup tempatkan file gambar 1024×1024 piksel di direktori root situs web Anda yang bernama 'apple-touch-icon.png' (jika Anda menginginkan gloss) atau 'apple-touch-icon-precomposed.png' (jika Anda menginginkannya) tidak mudah! Perangkat Apple akan mencari file ini dan mengimpornya secara otomatis. Jika Anda ingin menerapkan ikon yang berbeda ke halaman yang berbeda atau memvariasikan desain untuk berbagai ukuran yang akan ditampilkan, Anda juga dapat melakukannya. Bagi mereka yang ingin sedikit lebih mengontrol, berbagai opsi dibahas di sini .

4. Bagaimana saya harus mendekati desain?

Pilih palet warna dan citra yang konsisten dengan situs tujuan pengguna saat mengklik ikon Anda. Tidak ada yang lebih menggelegar bagi pengguna (atau lebih mungkin untuk meningkatkan rasio pentalan Anda) daripada membuat seseorang berpikir bahwa mereka telah berakhir di tempat yang salah. Jadi pastikan ada beberapa hubungan gaya antara ikon dan halaman arahan. Anak anjing lucu dengan latar belakang merah muda mungkin bukan pilihan ikon terbaik untuk situs web hitam dan merah untuk sasana bela diri campuran dengan foto pria saling menendang di berandanya – bahkan jika anak anjing itu adalah maskot dojo Anda.

Jika Anda terdesak waktu Anda hanya bisa pop logo ke salah satu latar belakang ini . Di sini, kami pergi dengan set yang bagus.

shutterstock_93586144

 Saran untuk Mendesain Ikon iOS iOS

Tetap sederhana. Ingat, ikon akan diubah ukurannya, jadi meskipun perlu dirender dengan indah pada skala yang lebih besar, ikon juga harus dapat dibaca pada skala yang lebih kecil. Misalnya, ikon aplikasi pembaca awan mungkin harus memiliki awan di atasnya. Situs toko ban mungkin harus menggunakan gambar ban. Ikon seperti tanda yang dipasang oleh sebuah bisnis di pinggir jalan untuk menarik perhatian orang-orang yang lewat. Itu harus mengkomunikasikan niatnya dalam sekejap. Gambar besar dan ikonik yang menggambarkan situs atau aplikasi Anda selalu menjadi pilihan terbaik.

Hindari teks. Meskipun satu huruf atau beberapa inisial dapat berfungsi, ikon-ikon ini akan diperkecil hingga sekecil 29x29 piksel untuk pencarian Spotlight. Selain itu, Apple akan tetap menampilkan judul situs atau aplikasi Anda dengan teks sistem di bawah ikon, jadi Anda tidak perlu memasukkan teks ke dalam ikon.

Gunakan ilustrasi yang dibuat dengan baik daripada foto bila memungkinkan. Cukup memotong foto jarang bekerja dengan baik untuk ikon ini. Untuk inspirasi, lihat galeri ikon yang luar biasa ini : Anda akan melihat bahwa banyak dari ikon ini, meskipun mungkin berdasarkan aset fotografi, telah dikerjakan ulang agar terlihat seperti ilustrasi. Mayoritas, bagaimanapun, sebenarnya adalah seni asli yang dibuat dari awal.

Langkah demi Langkah: Dari Vektor ke Ikon

Bukan ilustrator profesional? Jangan khawatir carilah di agensi Microstock seperti Adobestock, Shutterstock dll, Sertakan istilah "ilustrasi vektor" dalam pencarian Anda, dan lihat apa yang muncul. Misalnya, pencarian untuk "ilustrasi vektor bola sepak" yang menghasilkan gambar ini :

shutterstock_65228851

Anda dapat mengambil bola, meletakkannya di latar belakang yang menyerupai lapangan atau lapangan atletik, menambahkan bayangan jatuh, dan membingkainya dengan salah satu latar belakang ikon cetakan tersebut.

sepak bola1

BIOLA!

sepak bola

Dari Foto ke Ikon

Jika karena alasan tertentu Anda harus menggunakan foto, pertimbangkan untuk menerapkan filter dan efek agar lebih terlihat seperti ilustrasi.

Tutorial singkat:

Untuk ini, kita akan menggunakan file latar belakang ikon di atas, foto kaki di atas bola sepak, dan ilustrasi lapangan sepak bola.

1. Di Photoshop, mulailah dengan memotong subjek Anda dari latar belakang.

2. Gunakan Shadows/Highlights untuk membuat pencahayaan kurang natural dan lebih ideal.

3. Kurangi tingkat detail dengan filter Reduce Noise.

kaki1b

4. Gunakan alat bakar untuk menonjolkan kontur.

5. Buat seleksi dari subjek, dan pada layer baru di belakangnya, terapkan garis hitam.

kaki2b

6. Kunci layer dan cat warna yang berbeda di sepanjang garis sehingga tampak terlalu gelap.

kaki3b

7. Bawa gambar latar belakang bergambar.

kaki4b

8. Pindah ke Adobe Illustrator dan paste di gambar Photoshop. Pilih bentuk yang mendefinisikan interior dan gunakan untuk menutupi gambar yang diimpor.

BIOLA!

footiconb

Ingatlah untuk menampilkan gambar Anda pada 1024 × 1024 piksel. Dulu 512x512, tetapi dengan diperkenalkannya layar Retina Apple, mereka telah meningkatkan standar resolusi layar.

Itu dia. Sekarang Anda sepenuhnya kompatibel dengan Apple iOS.

Setidaknya sampai iPhone baru keluar.

Kredit tambahan

Anda dapat membuat permintaan khusus yang menanyakan pengunjung yang menggunakan iPhone dan iPad ke situs Anda apakah mereka ingin menambahkan ikon Anda ke layar beranda mereka.

Lihat skrip praktis ini yang menempatkan balon mengambang di dekat tombol bookmark saat orang mengunjungi situs Anda, mengundang mereka untuk menambahkan ikon Anda.

 Tag:

blog,indonesia,tips dan tutorial,tips desain,

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama