Cara Membuat Mockup Layar Video di Photoshop

Maket adalah cara yang bagus untuk menunjukkan pekerjaan Anda dengan cepat dan dalam suasana yang ideal. Sementara kebanyakan orang menggunakan maket gambar, maket video akan menarik perhatian dan membuat orang tetap terlibat dalam pekerjaan Anda. Menambahkan video ke layar adalah cara keren untuk menunjukkan pekerjaan Anda dan tidak terlalu sulit untuk dilakukan.

Apa itu Mockup Layar Video?

Maket adalah cara digital untuk membuat prototipe desain atau menerapkan desain ke produk waktu nyata tanpa memproduksinya. Alasan untuk ini banyak, tetapi salah satu alasan utama untuk membuat mockup adalah untuk membuat desain, ilustrasi, atau apa pun yang ingin Anda pamerkan terlihat lebih realistis. Ini membantu audiens Anda memvisualisasikan bagaimana potongan akan terlihat di akhir.

Alih-alih waktu, uang, dan upaya ekstra yang diperlukan untuk menghasilkan produk yang sebenarnya, Anda dapat membuat mockup digital yang menampilkan seni, desain, situs web, dll.

Sekarang, mockup layar animasi adalah konsep yang sangat mirip, tetapi dengan mockup di layar, seperti telepon atau komputer. Dan alih-alih gambar, mockup akan menampilkan desain atau video yang bergerak.

Desain bergerak ini dapat berupa apa saja mulai dari video hingga prototipe desain UX/UI atau rekaman layar.

Mengapa Anda Harus Menggunakan Mockup Layar Animasi?

Salah satu alasan terbaik untuk membuat mockup layar animasi adalah untuk memamerkan situs web. Ini adalah cara yang bagus untuk memamerkan situs web yang telah Anda rancang dalam portofolio Anda.

Menggunakan mockup memberi sedikit lebih banyak kreativitas dalam portofolio Anda daripada tangkapan layar sederhana situs web Anda. Ini adalah cara yang bagus untuk mendiversifikasi tampilan maket Anda.

Jika Anda ingin menampilkan video yang telah Anda buat, ini juga bisa menjadi cara kreatif untuk menampilkannya daripada hanya menyematkan video dari YouTube dll. Secara keseluruhan, mockup layar animasi adalah cara yang menyenangkan untuk menampilkan karya Anda.

Cara Membuat Mockup Layar Animasi di Photoshop

Meskipun kebanyakan orang tahu Photoshop sebagai alat pengeditan gambar, Anda juga dapat menggunakannya untuk membuat animasi dan video. Nah, berikut ini adalah langkah-langkah membuat video mockup menggunakan photoshop.

Jenis Video Apa yang Harus Anda Gunakan?

Ada banyak opsi untuk mockup layar animasi Anda. File video yang lebih kecil akan bekerja paling baik. Meskipun Anda dapat menggunakan teknik ini untuk menampilkan rekaman video nyata, ukurannya akan membuat lebih sulit untuk dirender di Photoshop.

Untuk alasan itu, kami akan membuat mockup yang menggulir halaman web. Menggunakan video yang lebih pendek tanpa aspek desain lain akan membuat lebih cepat dan menghasilkan hasil berkualitas tinggi.

Gunakan perekam layar untuk membuat video layar Anda. Ini dapat dilakukan di ponsel atau desktop, tergantung pada apa yang Anda inginkan dari mockup Anda. Kami akan menggunakan Quicktime Player di Mac dan Perekaman Layar Baru pilihan, tetapi ada banyak opsi Mac lainnya. Jika Anda memiliki iPhone, Anda dapat melihat cara menyaring rekaman di iPhone. Anda tidak memerlukan audio apa pun dalam rekaman ini.

Untuk video kami, kami merekam situs Makeuseof.com, menampilkan berbagai artikel tentang desain grafis. Anda dapat menyaring rekaman apa pun yang masuk akal bagi Anda. Pertahankan gulir yang stabil dan pastikan itu tidak terlalu cepat atau terlalu lambat.

Setelah rekaman singkat Anda selesai, simpan sebagai MP4 dan letakkan di folder yang mudah diakses.

Jenis Foto Apa yang Harus Anda Gunakan?

Untuk hasil terbaik dalam maket ini, Anda harus menggunakan foto yang menunjukkan layar yang tidak terhalang. Ini bisa berupa layar ponsel, komputer, atau bahkan layar TV. Meskipun gambar Anda dapat menunjukkan beberapa perspektif, yang terbaik adalah jika layar sebagian besar menghadap Anda lurus.

Apakah mungkin untuk gunakan layar yang terhalang atau gambar dengan perspektif berat untuk mockup yang lebih rumit, tetapi kami akan membuatnya tetap sederhana hari ini.

Anda dapat mengambil foto Anda sendiri atau mengunduhnya dari situs bebas royalti, seperti Hapus percikan. Kami tidak akan menggunakan mockup PSD siap pakai untuk tutorial ini, jadi Anda tidak perlu repot mencarinya.

Cara Membuat Mockup Video

Buka gambar Anda di Photoshop.

Jika Anda mengunduh gambar dari situs bebas royalti atau mengambilnya dengan kamera berkualitas tinggi, ukurannya mungkin cukup besar. Anda dapat menurunkan ukuran gambar.

Klik Gambar > Ukuran gambar. Dimensi akhir terserah Anda, tetapi kami merekomendasikan lebar sekitar 1200. Pertahankan batasan gambar secara proporsional saat mengubah ukuran. Klik oke.

Sekarang untuk membuat ruang di mana video akan berada. Temukan dimensi video asli Anda; jika Anda menyaring rekaman dari telepon, menemukan dimensi layar telepon, dan jika Anda menyaring rekaman situs web, Anda dapat menggunakan standar 1680 x 1050, kecuali jika Anda mengetahui dimensi yang tepat.

Menggunakan Rectangle tool (U), klik kanvas Anda. Ini akan memunculkan popup yang dapat Anda tentukan dimensinya. Masukkan lebar dan tinggi rekaman layar Anda dan klik oke. Hapus goresan dan pilih warna isian hitam atau abu-abu gelap.

Pada layer persegi panjang, klik kanan dan pergi ke Konversikan ke Objek Pintar. Sekarang Anda dapat mengubah persegi panjang agar pas dengan layar. Ini berarti bahwa setiap gambar yang ditempatkan pada objek pintar akan mengikuti transformasi bentuk yang sama.

Untuk mengubah persegi panjang Anda, gunakan alat Transform. Anda dapat menemukan ini dengan pergi ke Sunting > Perubahan Bebas atau dengan memukul cmd + T (Mac) atau ctrl + T (jendela).

Alat Transform hanya akan mengubah ukuran persegi panjang. Ubah ukurannya menjadi semirip mungkin dengan layar. Kemudian gunakan fitur Distort.

Sekali lagi, pergi ke Sunting menu, lalu Mengubah > Memutarbalikkan. Ini akan memungkinkan Anda untuk menyeret dan meregangkan sudut untuk bertemu dengan sempurna dengan layar Anda. Ini berfungsi dengan baik jika gambar Anda memiliki beberapa perspektif tambahan. Klik dua kali pada persegi panjang setelah Anda menyejajarkan semua sudut dan tepi. Jika tepinya tidak sejajar dengan benar, gunakan alat Transform dan opsi Distort lagi sampai benar.

Anda dapat memasukkan video Anda ke dalam objek pintar dengan ukuran dan bentuk yang benar. Klik Jendela > Linimasa untuk membuka garis waktu animasi. Pastikan itu ada di timeline video daripada animasi bingkai.

Klik dua kali pada objek pintar di panel lapisan dengan mengklik ikon dengan kertas dan kotak pada gambar mini untuk objek pintar Anda. Ini terbuka di jendela baru.

Seret video Anda ke jendela objek pintar. Video Anda harus berukuran sama dengan persegi panjang Anda. Jika dimensinya tidak aktif, Anda dapat memperbaikinya dengan mudah: seret sudutnya hingga pas dengan seluruh jendela.

Jika Anda perlu memotong tepi apa pun, Anda bisa melakukannya. Apa pun yang Anda lihat adalah apa yang akan ditampilkan di mockup terakhir. Setelah Anda puas, klik dua kali untuk mengonfirmasi ukuran dan penempatannya.

Anda sekarang akan melihat dua lapisan garis waktu pada garis waktu video: satu untuk persegi panjang dan satu untuk video baru. Seret panjang garis waktu persegi panjang agar sesuai dengan panjang video. Ini memastikan video akan dilihat selama durasinya.

Klik tombol putar untuk memeriksa video Anda. Mungkin perlu beberapa saat untuk memuat dan karena itu bermain lebih lambat dari waktu yang sebenarnya.

Untuk membuat layar video Anda terlihat lebih realistis, ubah blend mode layer video. Anda juga dapat menurunkan opacity pada lapisan video). Bermain-main dengan pengaturan pencampuran yang berbeda sampai Anda puas. Jika Anda ingin meninggalkannya tanpa langkah ini, tidak apa-apa juga. Ini akan memberikan tampilan layar yang lebih jelas.

Sekarang, untuk menyimpan video ke mockup Anda, simpan saja jendela objek pintar. Anda dapat melakukannya dengan membuka Mengajukan > Menyimpan atau memukul cmd + S (Mac) atau ctrl + S (jendela). Setelah disimpan, keluar dari jendela objek pintar.

Anda akan kembali ke jendela mockup. Anda akan melihat video Anda di tempat layar.

Untuk menyimpan mockup Anda, buka Mengajukan > Ekspor > Render Video… Di sini, Anda dapat mengubah ukuran mockup akhir. Mengubah ukuran akan membantu memuat dan ukuran file secara keseluruhan juga. Setelah Anda puas dengan pengaturan Anda, klik Memberikan.

Ini akan menghasilkan file video MP4 akhir dengan mockup video Anda yang sudah selesai.

Bawa Mockup Anda Lebih Jauh dengan Mockup Layar Video

Dengan menggunakan video di maket layar Anda, Anda akan dapat berbagi lebih banyak pekerjaan dan melibatkan lebih banyak orang. Gaya mockup dinamis yang dibuat di Photoshop ini mudah dibuat dan memiliki hasil yang sangat baik.

Meskipun Anda dapat menggunakan teknik ini untuk mockup statis hanya dengan menggunakan gambar, dengan menggunakan video, Anda mempelajari keterampilan baru dan mendorong orang untuk terlibat dengan pekerjaan Anda lebih lama. Mockup video jarang terlihat, dan kejutannya akan menarik perhatian siapa pun yang melihat.

Cara Membuat Mockup Kemasan Kotak di Photoshop

Baca Selanjutnya

Tentang Penulis