Sekarang kita akan coba mendesain display interface jam dan cuaca yang ada di HP Android. Kita akan menggunakan vektor shape dan layer styles untuk menghasilkan bentuk dasar interface. Kita juga akan menggambar manual dengan tool Brush dan Smudge untuk membuat ikon matahari tertutupi awan.
Preview
Inilah tampilan interface yang akan kita peroleh.
Detail Tutorial
- Tingkat Kesulitan: Pemula, Menengah
- Software yang Digunakan: Adobe Photoshop
- Teknik yang Dipelajari: Vektor Shape, Layer Style
- Lama Pengerjaan: 30 menit
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
- Brush Awan dari javierzhx
Tutorial
Langkah 1: Latar Display
Mulai dengan membuat sebuah shape rounded rectangle untuk dasar display dengan radius 10 px. Gunakan warna #242424. Tambahkan Inner Shadow, Inner Glow, Gradient Overlay, dan Outer Glow.
Langkah 2
Turunkan Fill layer ke 50%. Dengan cara ini, kita bisa membuatnya semi transparan. Latar di belakangnya akan terlihat sebagian.
Langkah 3
Buat lagi shape yang sama namun lebih pendek. Tambahkan Gradient Overlay.
Turunkan Fill layer ke 0%. Ini akan menjadikannya kilauan di bagian atas dasar display.
Langkah 4: Jam
Buat sebuah rounded rectangle dengan warna putih. Duplikasi (Ctrl + J) dan sembunyikan shape asli..
Langkah 5
Aktifkan tool pen lalu klik dua titik paling bawah untuk menghapusnya.
Langkah 6
Alt-klik untuk mengubah kedua titik menjadi titik tajam dan menghasilkan garis lurud di bagian bawah shape.
Langkah 7
Geser garis ke atas sehingga setengah dari tinggi semula.
Langkah 8
Tambahkan Inner Shadow dan Gradient Overlay.
Langkah 9
Turunkan Fill layer ke 0%.
Langkah 10
Munculkan kembali shape asli yang menjadi latar jam.
Langkah 11
Ulangi proses yang sama untuk bagian bawah latar jam.
Seperti ini hasil yang kita peroleh.
Langkah 11
Simpan ketiga shape ke layer grup. Di CS6 tekan Ctrl + J untuk menduplikasinya. Di versi sebelumnya, Anda perlu menggesernya ke atas ikon New Layer. Simpan di bawah shape asli. Seleksi titik-titik paling atas dengan tool Direct Selection lalu geser ke atas 3 px. Ulangi juga pada titik paling bawah dengan menggesernya 3 px ke bawah.
Langkah 12
Ulangi kembali pada shape terakhir sehingga ada 3 lapis shape.
Langkah 13
Ctrl-klik shape terakhir.
Langkah 14
Buat layer baru dan simpan di belakang latar jam. Isi layer dengan hitam. Hilangkan seleksi dengan menekan Ctrl + D. Klik Filter > Blur > Gaussian Blur untuk menghaluskan bayangan.
Langkah 15
Ctrl-klik latar utama display.
Langkah 16
Klik ikon Add Layer Mask untuk menyembunyikan bayangan di luar latar display.
Langkah 17
Tambahkan teks untuk informasi jam dengan warna hitam.
Langkah 18
Tambahkan Gradient Overlay. Atur gradasi warnanya hitam-putih-hitam-putih dengan posisi setepat mungkin sehingga perubahan gradasi tepat berada di tengah teks.
Di gambar ini, titik warna yang saya gunakan dalam gradasi ini berada di posisi 0%, 44%, 48%, dan 100%.
Langkah 19
Tambahkan Inner Shadow dan Drop Shadow.
Ini akan memberi kesan teks menjorok ke dalam.
Langkah 20
Dengan tool Pencil, gambar garis hitam dan putih 1 px di layer terpisah tepat memotong teks.
Langkah 21
Turunkan Opacity kedua layer hingga diperoleh efek inset.
Tampilan di perbesaran 100%.
Langkah 22: Ikon Cuaca
Untuk memudahkan, kita sembunyikan dulu jam. Aktifkan tool brush, lalu load brush awan. Pastikan warna depan diisi dengan putih. Klik beberapa kali hingga diperoleh bentuk awan.
Langkah 23
Selanjutnya menggambar matahari. Buat shape dengan warna orange di belakang awan.
Langkah 24
Aktifkan tool Brush dengan Opacity rendah. Tambahkan layer mask lalu lukis bagian tengah bawah lingkaran dengan hitam.
Langkah 25
Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Inner Shadow menggunakan warna putih dengan mode Color Dodge untuk memperkuat efek kilauan bercahaya di dalam shape.
Di Blending Options, aktifkan Layer Mask Hides Effects agar Layer Style disembunyikan oleh layer mask.
Langkah 27
Lukis orange gelap di belakang matahari untuk membuat intinya semakin panas menyala.
Langkah 28
Lukis orange gelap di sekeliling matahari. Lukis juga garis-garis tipis dengan tool brush lembut.
Langkah 29
Gunakan tool Smudge untuk menggeser pixel ke luar menjauhi matahari dan menghasilkan sunflare.
Langkah 30
Lukis detail-detail lain yang diperlukan.
Langkah 31
Tampilkan jam. Simpan ikon matahari berawan di atas jam. Tambahkan informasi nama tempat dan tanggal. Beri Drop Shadow hitam pada teks agar lebih mudah dibaca.
Hasil Akhir
Berikut adalah tampilan display jam dan cuaca dengan gambar latar.
