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

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s