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.200×2.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.

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.

Iklan

17 thoughts on “Studi Kasus Pembuatan Mockup PSD Screenshot Web 3D

  1. Nice bg! Saya udah lama pengen bikin mock up stationary pake 3ds max..tapi belum kesampaian.
    btw, baru tau jg ada V-ray plane..info bermanfaat! πŸ˜€

  2. Saya sama sekali ga bisa 3Ds Max. Dulu sempat belajar dari video tutorial Deddy Syamsuddin di DVD Chip tapi sekarang sudah lupa lagi. Sekarang cuma bisa buat objek sederhana saja di 3Ds Max, semacam di mockup ini.

  3. Wah, ini posting layak bookmark mas πŸ˜€
    Saya masih nyoba2 mock up dgn photoshop dari css-tricks itu, dan sekarang malah ada 3D-nya.

    Mantap mas Jeprie!

  4. Sayang sekali, saya sama sekali buta untuk 3Dmax. Tapi sepertinya ini bisa dibuat dengan ilustrator dan dimigrasikan ke photoshop untuk beberapa efek tambahan.

  5. Di Illustrator kita bisa membuat kotak lalu di-extrude menggunakan perintah pengubah ke 3D, saya lupa lagi nama perintahnya. Perspektif yang dihasilkan Illustrator biasanya salah, tidka akurat. Bisa jadi hasilnya tidak realistis. Kalau tidak bisa menggunakan program 3D, saya rasa cara termudah adalah dengan membuat model situs menggunakan karton kemudian digambar ulang di Photoshop.

  6. Ya, 3Ds Max untuk membuat referensi dan pencahayaannya. Photoshop untuk penempatan desain webnya. Nanti pengguna cukup mengedit isi layer dengan Photoshop. Bisa dilihat dalam instruksi penggunaannya.

    Kalau menurut saya line-height sudah cukup pak, 1.5 em. Saya tidak begitu mengerti masalah desain web, jadi untuk detail semacam ini, saya lebih suka menggunakan setting standar.

  7. File mockup itu file yang dibuat untuk mempermudah presentasi desain.

    Misalnya saya mau membuat wallpaper iPad. Setelah jadi wallpaper, akan lebih bagus jika wallpaper kita tempelkan ke dalam layar iPad agar calon pengguna bisa melihat hasil akhrnya. Masalahnya tidak semua orang punya waktu atau skill untuk menggambar iPad kan? Di sinilah fungsinya mockup. Si pembuat wallpaper tinggal memasukkan desainnya ke dalam mockup iPad.

    Mockup itu bisa gratis bisa juga premium. Kalau yang saya buat ini premium. Biasanya premium lebih bagus karena proses pembuatannya juga lebih teliti.

  8. owh jadi begitu…. saya mengerti sekarang wah penjelasannya sangat perfect trimakasih om Jeprie.. saya sebagai newbie design masih ingin lebih tahu tentang seperti ini πŸ˜€

    share om di website saya… πŸ˜€

    slm,
    Lukman Efendi

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