Mendesain Ikon Aplikasi Kamera untuk Launcher Android

Dalam tutorial ini, kita akan mencoba menggambar ikon aplikasi kamera untuk-launcher android. Kita akan menggunakan Photoshop CS6 dalam proses desain. Kita juga akan menggunakan aturan dari developer android agar ikon yang diperoleh sesuai dengan standar.

Preview


thumbnail.jpg

Detail Tutorial



  • Tingkat Kesulitan: Menengah, Mahir

  • Software yang Digunakan: Adobe Photoshop CS6

  • Teknik yang Dipelajari: Layer Style, Menggambar dengan tool Brush

  • Lama Pengerjaan: 45 menit


Resource yang Dibutuhkan


Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Sebelum Anda Memulai


Sebelum memulai tutorial ini, saya sarankan Anda untuk membaca terlebih dahulu artikel dan tutorial berikut karena menggunakan dasar teknik yang sama:


Tutorial


Langkah 1: Guide Desain Resmi


Sebelum mulai, kita cari terlebih dahulu panduan desain ikon untuk-launcher android resmi dari situs developer android. Kita temukan bahwa file harus dalam format PNG 32-bit dengan ukuran 72 × 72 px untuk hdpi (240 dpi).

Mendesain Ikon Kamera untuk-launcher Android

Langkah 2: Persiapan


Buat file baru dengan ukuran 72 × 72 pixel dan latar putih.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 3


Untuk mempermudah proses desain, kita juga perlu menampilkan file dalam tampilan 100% di jendela baru.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 4


Perbesar tampilan jendela, sehingga ada dua tampilan, maksimum dan 100%.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 5: Bentuk Dasar Kamera


Buat shape persegi untuk bagian depan ikon kamera.

Mendesain Ikon Kamera untuk-launcher Android

Beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 6


Tambahkan titik dengan cara klik menggunakan tool Pen.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 7


Tambahkan titik lain di seluruh sisi. Total ada 4 titik baru, 2 di sisi atas dan 2 di sisi bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 8


Geser keempat titik tadi sejauh 2 px ke bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 9


Sebelum berlanjut, pastikan Anda telah mengaktifkan Snap Vector Tools di bagian Preferences (Ctrl + K).

Mendesain Ikon Kamera untuk-launcher Android

Langkah 10


Buat lagi sama yang sama tapi dengan kelengkungan berbeda untuk bagian belakang kamera. Gumakan warna yang lebih terang.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 11


Buat shape untuk di bagian tengah depan. beri Gradient Overlay dan Inner Shadow.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 12


Ctrl-klik bagian depan kamera. Buat layer baru dan lukis highight dan shadow menggunakan tool Brush lembut dengan Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 13: Tombol


Buat sebuah persegi di bagian atas persegi.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 14


Tambahkan Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 15


Tambahkan titik di sisi tengahnya lalu tarik ke bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 16


Buat shape untuk sisi belakangnya dengan warna lebih terang.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 17


Seleksi bagian depan tombol. Buat layer baru di belakang tombol. Isi seleksi dengan hitam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 18


Haluskan dengan memberinya filter Gaussian Blur. Bagian ini akan menjadi bayangan tombol.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 19


Hapus bayangan yang tidak diperlukan.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 20


Buat lagi tombol-tombol lainnya dengan cara yang sama.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 21


Pada titik ini, Anda perlu tetap teliti memperhatikan agar setiap path berada tepat pada pixel. Jangan sampai ada setengah pixel agar hasilnya tetap tajam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 22: Lensa


Mulai dengan membuat lingkaran gelap dan beri Gradient Ovelay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 23


Buat lagi lingkaran lebih kecil. Tambahkan juga Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 24


Buat lingkaran dengan warna biru lalu tambah Gradient Overlay bertipe radial.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 25


Buat lingkaran hitam menutupi lensa.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 26


Klik Filter > Render > Lens Flare.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 27


Ubah blend mode layer ke Screen dan turunkan Opacity.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 28


Buat sebuah ellips di bagian atas lensa dan beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 29


Turunkan Opacity dan Fill layer.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 30


Buat lagi lingkaran lebih terang di belakang lensa. beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 31


Lagi, buat lingkaran lebih kecil dengan Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 32


Buat layer baru, simpan di atas shape lingkaran. Ubah menjadi Clipping Mask (Ctrl + Alt + G) lalu lukis highligh putih di dalam lingkaran dengan tool Brush ber-Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 33


Ulang langkah tadi beberapa kali.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 34


Buat layer baru dan simpan di belakang lensa. Lukis bayangan lensa di badan kamera.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 35


Seleksi seluruh lesa kamera. Buat layer baru dan lukis hitam di pojok kiri atas untuk menggelapkan seluruh isi lensa

Mendesain Ikon Kamera untuk-launcher Android

Langkah 36: Lampu Blitz


Gambar sebuah rounded rectangle dengan radius 3 px di belakang lensa.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 37


Tambahkan shape gelap di bagian bawah. Ubah shape menjadi Clipping Mask.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 38


Buat lagi layer baru dan ubah menjadi Clipping Mask. Lukis bayangan hitam di sisi kanan shape dengan tool Brush ber-Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 39


Lukis lebih banyak shadow dan highlight.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 40


Gambar rounded rectangle di bagian atas. Turunkan Fill layer hingga 0%.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 41


Tambahkan Outer Glow, Pattern Overlay, dan Gradient Overlay. Untuk Pattern Overlay, gunakan salah satu pola pixel gratis dari PSDfreemium.

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Mendesain Ikon Kamera untuk-launcher Android

Langkah 42: Bayangan


Sembunyikan Background dengan cara klik ikon mata di depannya.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 43


Tekan Ctrl + Shift + C lalu Ctrl + Shift + V untuk menduplikasi seluruh kamera ke dalam satu layer. Ubah warna depan ke hitam. Tekan Ctrl +Shift + Del untuk mengisi kamera dengan warna hitam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 44


Haluskan dengan memberi filter Gaussian Blur. Simpan bayangan di belakang kamera.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 45


Hapus bayangan yang ada di bagian atas.

Mendesain Ikon Kamera untuk-launcher Android

Seperti inilah tampilan bayangan yang kita peroleh.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 46


File harus disimpan dalam format PNG-32 sebagaimana penjelasan dari developer android. Sekali lagi, sembunyikan Background. Klik File > Save for Web. Pilih PNG-32 dengan transparancy aktif.

Mendesain Ikon Kamera untuk-launcher Android

Hasil Akhir


Di bawah adalah hasil akhir tutorial yang kita peroleh. Saya bukan desainer ikon. Jadi, jika ada yang salah dengan tutorial ini --terutama yang berkaitan dengan panduan desain aplikasi ikon android-- silakan tuliskan di komentar. Saya hanya ingin berbagi pengetahuan saja.

Mendesain Ikon Kamera untuk-launcher Android

Download Link


Download File PSD