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

Iklan

4 thoughts on “Mendesain Interface Tampilan Waktu dan Cuaca Terinspirasi Android

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