Studi Kasus Pembuatan Mockup PSD Screenshot Web 3D

Di sini saya akan memperlihatkan studi kasus pembuatan file Mockup PSD Screenshot Web 3D. File ini dibuat untuk membantu para desainer menampilkan desain web dalam tampilan 3D dengan mudah. Cukup dengan Photoshop, tanpa perlu program 3D dan proses rendernya yang lama. Saya tidak menjelaskan semua proses secara detail, karena sebetulnya proses pembuatannya sendiri sangat sederhana. Di sini, saya lebih fokus pada menjelaskan proses dan bukan pada teknik yang digunakan.

Preview


Di bawah adalah tampilan hasil akhir mockup yang saya peroleh.

studi-kasus-web-screenshot-3D-25.jpg



Langkah 1: Referensi


Langkah pertama adalah mencari referensi bentuk desain web dalam tampilan 3D. Ada beberapa pilihan untuk ini. Pertama, kita bisa menggambar sendiri. Kedua, membuat model secara langsung menggunakan karton sebagai halaman web dan memfotonya. Ketiga, membuat model dengan program 3D.

Pilihan pertama adalah sesuatu yang tidak mungkin karena saya sama sekali tidak bisa menggambar. Pilihan kedua lebih mudah, tinggal mengambil beberapa kardus bekas, menyimpannya pada posisi tertentu, lalu memfotonya. Masalahnya, saya tidak bisa membuat foto yang baik, pencahayaan di foto akan pas-pasan, bukan standar studio. Proses di Photoshop juga lebih rumit karena tetap saja saya harus membuat kondisi pencahayaan standar studio.

Jadi, bagi saya pilihan terbaik adalah menggunakan bantuan program 3D. Saya memilih 3Ds Max karena saya cukup familiar dengan program ini. Dengan 3Ds Max, saya akan membuat model dengan pencahayaan sekualitas studio sebagai bahan dasar acuan di Photoshop.

Di 3Ds Max, buat sebuah box berukuran desain web standar.

studi-kasus-web-screenshot-3D-01studi-kasus-web-screenshot-3D-02studi-kasus-web-screenshot-3D-03



Langkah 2


Gandakan box dengan cara tahan Shift lalu geser. Di kotak yang muncul pilih Instance. Instance berarti kotak yang digandakan adalah objek yang sama dengan aslinya. Jika parameter satu kotak diganti, maka semuanya berubah. Lihat penempatan box dalam viewport di bawah.

studi-kasus-web-screenshot-3D-04studi-kasus-web-screenshot-3D-05


Langkah 3


Buat VRayPlane di bawah box. VRayPlane berperan sebagai lantai. Berbeda dengan plane standar yang ukurannya terbatas, VRayPlane akan memanjang tidak terhingga ketika di-render sehingga tidak akan ada bagian yang terpotong di latar.

studi-kasus-web-screenshot-3D-07studi-kasus-web-screenshot-3D-06


Langkah 4


Buka material editor (M) dan beri material seperti ini untuk VRayPlane. Tipe material yang saya pilih adalah VRayMtl karena sangat mudah digunakan.

studi-kasus-web-screenshot-3D-08.jpg

Langkah 5


Beri material ini untuk box.

studi-kasus-web-screenshot-3D-09.jpg

Langkah 6


Buat sumber cahaya menggunakan VRayLight. Atur posisinya agar berada di atas box dan membentuk sudut. Atur posisi VrayLight hingga cahayanya mengarah ke box.

studi-kasus-web-screenshot-3D-10studi-kasus-web-screenshot-3D-11studi-kasus-web-screenshot-3D-12



Langkah 7


Pastikan untuk memilih Invisible agar VrayLight tidak menghalangi pandangan ketika dirender.

studi-kasus-web-screenshot-3D-13.jpg

Langkah 8


Ubah Assign Renderer di kotak dialog Setup Render ke V-ray. Di setup render, mulai dengan memilih ukuran terkecil lalu klik Render untuk melihat hasilnya. Biasanya, Anda tidak akan memperoleh hasil bagus dalam sekali render. Anda harus mencoba render, mengevaluasi hasilnya, mengubah setting tertentu, lalu kembali me-render dari awal, begitu seterusnya.

studi-kasus-web-screenshot-3D-14studi-kasus-web-screenshot-3D-15studi-kasus-web-screenshot-3D-16



Langkah 9


Jika Anda melihat gambar di atas, hasil yang diperoleh terlalu gelap karena menggunakan satu sumber cahaya. Ada bagian-bagian gambar yang ekstrem terlalu gelap. Solusinya adalah menambahkan beberapa sumber cahaya lebih kecil untuk memberi penerangan tambahan, istilahnya fill light. Mungkin Anda pernah memperhatikan di photo shooting, kadang payung putih atau styrofoam putih disimpan di dekat model. Payung atau styrofoam itu berfungsi memantulkan sedikit cahaya sehingga hasilnya merata. Fill light yang akan kita buat di sini berfungsi sama.

Buat beberapa VRayLight di sekeliling box. Agar memudahkan pengaturan, sebaiknya semua merupakan instance dari satu sumber cahaya.

studi-kasus-web-screenshot-3D-17.jpg

Langkah 10


Ulangi proses render untuk melihat hasilnya.

studi-kasus-web-screenshot-3D-18.jpg

Langkah 11


Begitu puas dengan hasil yang diperoleh, saatnya untuk proses render gambar yang lebih besar. Di sini, saya menggunakan 3.200x2.400 px. Proses render untuk gambar sebesar ini bisa sangat lama. Di komputer saya, ini membutuhkan sekitar 45 menit.

studi-kasus-web-screenshot-3D-19.jpg

Langkah 12


Di bawah adalah hasil akhir yang saya peroleh.

studi-kasus-web-screenshot-3D-20.jpg

Langkah 13: Editing di Photoshop


Langkah selanjutnya adalah memproses gambar ini di Photoshop. Di Photoshop, saya ambil gambar screenshot situs VandelayPremier lalu mengubahnya ke Smart Object. Melakukan proses transformasi sederhana hingga screenshot menempel pada box.

studi-kasus-web-screenshot-3D-21.jpg

Langkah 14


Setelah ini, saya tinggal menyesuaikan tampilan screenshot dengan pencahayaan box di program 3D. Menambah beberapa polesan seperti memberi shadow dan cahaya pada screenshot.

studi-kasus-web-screenshot-3D-22.jpg

Langkah 15


Proses ini diulangi terus pada screenshot yang lain.

studi-kasus-web-screenshot-3D-23.jpg

Langkah 16


Langkah terakhir adalah merapikan mockup. Saya menduplikasi semua layer screenshot dan menyimpannya di depan. Menyembunyikan layer yang tidak boleh diedit ke dalam group dan menguncinya.

studi-kasus-web-screenshot-3D-24.jpg

Hasil Akhir


Di bawah adalah hasil akhir mockup yang saya peroleh. Saya membuat tujuh file untuk Vandelay Premier. Klik untuk melihat hasil akhir di VandelayPremier.

[gallery ids="11602,11603,11604" type="rectangular"]



File PSD bisa diperoleh dengan bergabung di VandelayPremier (9$ per bulan).

Seperti bisa Anda lihat di studi kasus ini. Kadang satu program, Photoshop, tidaklah cukup untuk memberikan hasil yang diinginkan. Anda juga perlu mempertimbangkan alternatif lain untuk memberikan hasil yang lebih baik.