Mendesain Interface Tampilan Waktu dan Cuaca Terinspirasi Android

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.
final.jpg

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:


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.

info-jam-cuaca-android-01.jpg
info-jam-cuaca-android-02.jpg

info-jam-cuaca-android-03.jpg

info-jam-cuaca-android-04.jpg

info-jam-cuaca-android-05.jpg

Langkah 2


Turunkan Fill layer ke 50%. Dengan cara ini, kita bisa membuatnya semi transparan. Latar di belakangnya akan terlihat sebagian.
info-jam-cuaca-android-06.jpg

info-jam-cuaca-android-07.jpg

Langkah 3


Buat lagi shape yang sama namun lebih pendek. Tambahkan Gradient Overlay.
info-jam-cuaca-android-08.jpg

info-jam-cuaca-android-09.jpg

Turunkan Fill layer ke 0%. Ini akan menjadikannya kilauan di bagian atas dasar display.
info-jam-cuaca-android-10.jpg

Langkah 4: Jam


Buat sebuah rounded rectangle dengan warna putih. Duplikasi (Ctrl + J) dan sembunyikan shape asli..
info-jam-cuaca-android-11.jpg

Langkah 5


Aktifkan tool pen lalu klik dua titik paling bawah untuk menghapusnya.
info-jam-cuaca-android-12.jpg

info-jam-cuaca-android-13.jpg

Langkah 6


Alt-klik untuk mengubah kedua titik menjadi titik tajam dan menghasilkan garis lurud di bagian bawah shape.
info-jam-cuaca-android-14.jpg

info-jam-cuaca-android-15.jpg

Langkah 7


Geser garis ke atas sehingga setengah dari tinggi semula.
info-jam-cuaca-android-16.jpg

Langkah 8


Tambahkan Inner Shadow dan Gradient Overlay.
info-jam-cuaca-android-17.jpg

info-jam-cuaca-android-18.jpg

Langkah 9


Turunkan Fill layer ke 0%.
info-jam-cuaca-android-19.jpg

Langkah 10


Munculkan kembali shape asli yang menjadi latar jam.
info-jam-cuaca-android-20.jpg

Langkah 11


Ulangi proses yang sama untuk bagian bawah latar jam.
info-jam-cuaca-android-21.jpg

info-jam-cuaca-android-22.jpg

info-jam-cuaca-android-23.jpg

Seperti ini hasil yang kita peroleh.
info-jam-cuaca-android-24.jpg

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.
info-jam-cuaca-android-25.jpg

Langkah 12


Ulangi kembali pada shape terakhir sehingga ada 3 lapis shape.
info-jam-cuaca-android-26.jpg

Langkah 13


Ctrl-klik shape terakhir.
info-jam-cuaca-android-27.jpg

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.
info-jam-cuaca-android-28.jpg

Langkah 15


Ctrl-klik latar utama display.
info-jam-cuaca-android-29.jpg

Langkah 16


Klik ikon Add Layer Mask untuk menyembunyikan bayangan di luar latar display.
info-jam-cuaca-android-30.jpg

info-jam-cuaca-android-31.jpg

Langkah 17


Tambahkan teks untuk informasi jam dengan warna hitam.
info-jam-cuaca-android-32.jpg

Langkah 18


Tambahkan Gradient Overlay. Atur gradasi warnanya hitam-putih-hitam-putih dengan posisi setepat mungkin sehingga perubahan gradasi tepat berada di tengah teks.
info-jam-cuaca-android-33.jpg

Di gambar ini, titik warna yang saya gunakan dalam gradasi ini berada di posisi 0%, 44%, 48%, dan 100%.
info-jam-cuaca-android-34.jpg

info-jam-cuaca-android-35.jpg

Langkah 19


Tambahkan Inner Shadow dan Drop Shadow.
info-jam-cuaca-android-36.jpg

info-jam-cuaca-android-37.jpg

info-jam-cuaca-android-38.jpg

Ini akan memberi kesan teks menjorok ke dalam.
info-jam-cuaca-android-39.jpg

Langkah 20


Dengan tool Pencil, gambar garis hitam dan putih 1 px di layer terpisah tepat memotong teks.
info-jam-cuaca-android-40.jpg

Langkah 21


Turunkan Opacity kedua layer hingga diperoleh efek inset.
info-jam-cuaca-android-41.jpg

Tampilan di perbesaran 100%.
info-jam-cuaca-android-42.jpg

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.
info-jam-cuaca-android-43.jpg

Langkah 23


Selanjutnya menggambar matahari. Buat shape dengan warna orange di belakang awan.
info-jam-cuaca-android-44.jpg

Langkah 24


Aktifkan tool Brush dengan Opacity rendah. Tambahkan layer mask lalu lukis bagian tengah bawah lingkaran dengan hitam.
info-jam-cuaca-android-45.jpg

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.
info-jam-cuaca-android-46.jpg

info-jam-cuaca-android-47.jpg

info-jam-cuaca-android-48.jpg

Di Blending Options, aktifkan Layer Mask Hides Effects agar Layer Style disembunyikan oleh layer mask.
info-jam-cuaca-android-49.jpg

info-jam-cuaca-android-50.jpg

Langkah 27


Lukis orange gelap di belakang matahari untuk membuat intinya semakin panas menyala.
info-jam-cuaca-android-51.jpg

info-jam-cuaca-android-52.jpg

Langkah 28


Lukis orange gelap di sekeliling matahari. Lukis juga garis-garis tipis dengan tool brush lembut.
info-jam-cuaca-android-53.jpg

info-jam-cuaca-android-54.jpg

Langkah 29


Gunakan tool Smudge untuk menggeser pixel ke luar menjauhi matahari dan menghasilkan sunflare.
info-jam-cuaca-android-55.jpg

info-jam-cuaca-android-56.jpg

Langkah 30


Lukis detail-detail lain yang diperlukan.
info-jam-cuaca-android-57.jpg

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.
info-jam-cuaca-android-58.jpg

info-jam-cuaca-android-59.jpg

Hasil Akhir


Berikut adalah tampilan display jam dan cuaca dengan gambar latar.
final

Download Link


Download File PSD