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
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).
Langkah 2: Persiapan
Buat file baru dengan ukuran 72 × 72 pixel dan latar putih.
Langkah 3
Untuk mempermudah proses desain, kita juga perlu menampilkan file dalam tampilan 100% di jendela baru.
Langkah 4
Perbesar tampilan jendela, sehingga ada dua tampilan, maksimum dan 100%.
Langkah 5: Bentuk Dasar Kamera
Buat shape persegi untuk bagian depan ikon kamera.
Beri Gradient Overlay.
Langkah 6
Tambahkan titik dengan cara klik menggunakan tool Pen.
Langkah 7
Tambahkan titik lain di seluruh sisi. Total ada 4 titik baru, 2 di sisi atas dan 2 di sisi bawah.
Langkah 8
Geser keempat titik tadi sejauh 2 px ke bawah.
Langkah 9
Sebelum berlanjut, pastikan Anda telah mengaktifkan Snap Vector Tools di bagian Preferences (Ctrl + K).
Langkah 10
Buat lagi sama yang sama tapi dengan kelengkungan berbeda untuk bagian belakang kamera. Gumakan warna yang lebih terang.
Langkah 11
Buat shape untuk di bagian tengah depan. beri Gradient Overlay dan Inner Shadow.
Langkah 12
Ctrl-klik bagian depan kamera. Buat layer baru dan lukis highight dan shadow menggunakan tool Brush lembut dengan Opacity rendah.
Langkah 13: Tombol
Buat sebuah persegi di bagian atas persegi.
Langkah 14
Tambahkan Gradient Overlay.
Langkah 15
Tambahkan titik di sisi tengahnya lalu tarik ke bawah.
Langkah 16
Buat shape untuk sisi belakangnya dengan warna lebih terang.
Langkah 17
Seleksi bagian depan tombol. Buat layer baru di belakang tombol. Isi seleksi dengan hitam.
Langkah 18
Haluskan dengan memberinya filter Gaussian Blur. Bagian ini akan menjadi bayangan tombol.
Langkah 19
Hapus bayangan yang tidak diperlukan.
Langkah 20
Buat lagi tombol-tombol lainnya dengan cara yang sama.
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.
Langkah 22: Lensa
Mulai dengan membuat lingkaran gelap dan beri Gradient Ovelay.
Langkah 23
Buat lagi lingkaran lebih kecil. Tambahkan juga Gradient Overlay.
Langkah 24
Buat lingkaran dengan warna biru lalu tambah Gradient Overlay bertipe radial.
Langkah 25
Buat lingkaran hitam menutupi lensa.
Langkah 26
Klik Filter > Render > Lens Flare.
Langkah 27
Ubah blend mode layer ke Screen dan turunkan Opacity.
Langkah 28
Buat sebuah ellips di bagian atas lensa dan beri Gradient Overlay.
Langkah 29
Turunkan Opacity dan Fill layer.
Langkah 30
Buat lagi lingkaran lebih terang di belakang lensa. beri Gradient Overlay.
Langkah 31
Lagi, buat lingkaran lebih kecil dengan Gradient Overlay.
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.
Langkah 33
Ulang langkah tadi beberapa kali.
Langkah 34
Buat layer baru dan simpan di belakang lensa. Lukis bayangan lensa di badan kamera.
Langkah 35
Seleksi seluruh lesa kamera. Buat layer baru dan lukis hitam di pojok kiri atas untuk menggelapkan seluruh isi lensa
Langkah 36: Lampu Blitz
Gambar sebuah rounded rectangle dengan radius 3 px di belakang lensa.
Langkah 37
Tambahkan shape gelap di bagian bawah. Ubah shape menjadi Clipping Mask.
Langkah 38
Buat lagi layer baru dan ubah menjadi Clipping Mask. Lukis bayangan hitam di sisi kanan shape dengan tool Brush ber-Opacity rendah.
Langkah 39
Lukis lebih banyak shadow dan highlight.
Langkah 40
Gambar rounded rectangle di bagian atas. Turunkan Fill layer hingga 0%.
Langkah 41
Tambahkan Outer Glow, Pattern Overlay, dan Gradient Overlay. Untuk Pattern Overlay, gunakan salah satu pola pixel gratis dari PSDfreemium.
Langkah 42: Bayangan
Sembunyikan Background dengan cara klik ikon mata di depannya.
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.
Langkah 44
Haluskan dengan memberi filter Gaussian Blur. Simpan bayangan di belakang kamera.
Langkah 45
Hapus bayangan yang ada di bagian atas.
Seperti inilah tampilan bayangan yang kita peroleh.
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.
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.
