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.
Sebelumnya, lihatlah terlebih dahulu interface video player yang akan kita hasilkan.
Ambil gambar untuk layar video. Gunakan ukuran standar video seperti 320px x 240px.
Buat rounded rectangle dengan radius 5px dan simpan di belakang gambar. Beri layer styles berikut.
Buat shape berbentuk lingkaran di pojok kiri bawah. Beri layer styles berikut.
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.
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.
Buat sebuah rounded rectangle hitam panjang dan turunkan Fill ke 20%. Beri layer style Inner Shadow. Ini menjadi garis penunjuk total timeline video.
Gandakan shape. Di ujung kanan, tambahkan path persegi dan pilih Subtract untuk mengurangi bentuk shape. Ini akan menjadi bagian video yang telah di-download.
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.
Simpan kedua shape merah dan hijau ke dalam sebuah group. Tambahkan vector mask dan isi dengan path dari indicator total timeline video.
Buat sebuah rounded rectangle dan simpan di atas timeline. Beri layer style berikut.
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.
Beri judul film di bagian atas video player. Agar judul lebih menonjol, beri sedikit bayangan putih dengan layer style berikut
Gandakan pemisah dan simpan di sebelah penanda timeline.
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.
Buat sebuah persegi untuk penanda ukuran volume. Beri layer style yang sama dengan ikon speaker. Gandakan shape ini lalu pendekkan
Di pojok kanan atas, buat buat tombol maksimum, minimum, dan close. Buat semua ikon ini menggunakan tool Rectangle.
Di bawah adalah hasil akhir interface video yang kita peroleh.
Semoga Anda menyukai tutorial ini dan belajar teknik baru. Jika ada pertanyaan, silakan tulis di kolom komentar.
Preview
Sebelumnya, lihatlah terlebih dahulu interface video player yang akan kita hasilkan.
Langkah 1
Ambil gambar untuk layar video. Gunakan ukuran standar video seperti 320px x 240px.
Langkah 2
Buat rounded rectangle dengan radius 5px dan simpan di belakang gambar. Beri layer styles berikut.
Langkah 3
Buat shape berbentuk lingkaran di pojok kiri bawah. Beri layer styles berikut.
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.
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.
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.
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.
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.
Langkah 9
Simpan kedua shape merah dan hijau ke dalam sebuah group. Tambahkan vector mask dan isi dengan path dari indicator total timeline video.
Langkah 10
Buat sebuah rounded rectangle dan simpan di atas timeline. Beri layer style berikut.
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.
Langkah 12
Beri judul film di bagian atas video player. Agar judul lebih menonjol, beri sedikit bayangan putih dengan layer style berikut
Langkah 13
Gandakan pemisah dan simpan di sebelah penanda timeline.
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.
Langkah 15
Buat sebuah persegi untuk penanda ukuran volume. Beri layer style yang sama dengan ikon speaker. Gandakan shape ini lalu pendekkan
Langkah 16
Di pojok kanan atas, buat buat tombol maksimum, minimum, dan close. Buat semua ikon ini menggunakan tool Rectangle.
Hasil Akhir
Di bawah adalah hasil akhir interface video yang kita peroleh.
Semoga Anda menyukai tutorial ini dan belajar teknik baru. Jika ada pertanyaan, silakan tulis di kolom komentar.
Comments
Post a Comment