Mendesain Interface Video Player

Dalam tutorial kali ini, kita akan membuat desain interface video player menggunakan Photoshop. Kita akan bekerja dengan sangat akurat hingga ke detail terkecil.
[hr]

Preview

Sebelumnya, lihatlah terlebih dahulu interface video player yang akan kita hasilkan.

Mendesain Interface Video Player

[hr]

Langkah 1

Ambil gambar untuk layar video. Gunakan ukuran standar video seperti 320px x 240px.

Mendesain Interface Video Player

Langkah 2

Buat rounded rectangle dengan radius 5px dan simpan di belakang gambar. Beri layer styles berikut.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 3

Buat shape berbentuk lingkaran di pojok kiri bawah. Beri layer styles berikut.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 4

Gambar sebuah segi tiga di dalam lingkaran menggunakan tool Polygon dengan Sides: 3. Aktifkan tool pen, tahan alt lalu klik dan geser setiap titik untuk mengubahnya menjadi titik tumpul. Beri layer style berikut.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 5

Berikutnya, kita tambahkan pemisah. Buat sebuah shape rectangle hitam dengan lebar 1px. Turunkan Opacity-nya ke 10%. Di sebelahnya, buat lagi shape yang sama tapi berwarna putih. Simpan kedua shape ini ke dalam sebuah group. Tambahkan layer mask pada group. Hapus bagian atas dan bawah pemisah dengan cara melukis warna hitam menggunakan tool brush lembut.

Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 6

Buat sebuah rounded rectangle hitam panjang dan turunkan Fill ke 20%. Beri layer style Inner Shadow. Ini menjadi garis penunjuk total timeline video.

Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 7

Gandakan shape. Di ujung kanan, tambahkan path persegi dan pilih Subtract untuk mengurangi bentuk shape. Ini akan menjadi bagian video yang telah di-download.

Mendesain Interface Video Player

Langkah 8

Buat shape berulang-ulang berwarna hijau. Ambil tool Direct Selection, seleksi semua titik atas shape dan geser ke kanan. Duplikasi shape, geser beberapa pixel hingga keduanya saling menutupi dan ubah warnanya ke merah.

Mendesain Interface Video Player

Langkah 9

Simpan kedua shape merah dan hijau ke dalam sebuah group. Tambahkan vector mask dan isi dengan path dari indicator total timeline video.

Mendesain Interface Video Player

Langkah 10

Buat sebuah rounded rectangle dan simpan di atas timeline. Beri layer style berikut.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 11

Kita akan memberi tanda pada shape untuk memperlihatkan bahwa dia bisa digeser. Buat beberapa shape hitam ber-opacity 10%. Gandakan shape, geser beberapa pixel, ubah warnanya ke putih.

Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 12

Beri judul film di bagian atas video player. Agar judul lebih menonjol, beri sedikit bayangan putih dengan layer style berikut

Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 13

Gandakan pemisah dan simpan di sebelah penanda timeline.

Mendesain Interface Video Player

Langkah 14

Buat dua shape rounded rectangle. Lakukan transformasi Perspective pada salah satu rounded rectangle hingga salah sisinya membesar dan kedua shape membentuk ikon speaker. Di sebelahnya, buat shape berbentuk bulan sabit. Beri layer berikut.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

Langkah 15

Buat sebuah persegi untuk penanda ukuran volume. Beri layer style yang sama dengan ikon speaker. Gandakan shape ini lalu pendekkan

Mendesain Interface Video Player

Langkah 16

Di pojok kanan atas, buat buat tombol maksimum, minimum, dan close. Buat semua ikon ini menggunakan tool Rectangle.

Mendesain Interface Video Player

[hr]

Hasil Akhir

Di bawah adalah hasil akhir interface video yang kita peroleh.

Mendesain Interface Video Player

[hr]
Semoga Anda menyukai tutorial ini dan belajar teknik baru. Jika ada pertanyaan, silakan tulis di kolom komentar.