Studi Kasus Pembuatan Mockup PSD Screenshot Web 3D

by Jeprie on 5 November 2010 in Desain dan Ilustrasi, Tutorial 17

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 Pembuatan Mockup PSD Screenshot Web 3D

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.

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.

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.

Langkah 4

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

Langkah 5

Beri material ini untuk box.

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.

Langkah 7

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

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.

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.

Langkah 10

Ulangi proses render untuk melihat hasilnya.

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.

Langkah 12

Di bawah adalah hasil akhir yang saya peroleh.

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.

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.

Langkah 15

Proses ini diulangi terus pada screenshot yang lain.

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.

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.

mockup, studi kasus

Wawancara dengan Theycallmeteddy

Link Minggu Ini 071110

http://www.desainstudio.com/ ajir

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!
- http://desaindigital.com Jeprie
  
  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.
- http://desainku.com masbas
  
  setuju, sangat bermanfaat.. tq bang jep
http://danisetiyawan.com dHaNy

Wah ilmu baru nih..
Thanx tutorialnya mas..
- http://desaindigital.com Jeprie
  
  Sama-sama.
http://indonesianer.blogspot.com Darin

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!
- http://desaindigital.com Jeprie
  
  Mungkin yang di css-trick itu mockup layout web di photoshop ya. Kalau ini mockup untuk desainer web. File ini bisa digunakan untuk presentasi desain ke klien. Desain kita tinggal di-paste ke dalam layer dan otomatis tampil dalam format 3D. Contoh penggunaannya bisa dilihat di instruksi yang saya tulis untuk vandelayPremier.
  - http://indonesianer.blogspot.com Darin
    
    Oooh, cuma buat layout presentasi? pantes kok saya jd bingung..
http://www.dzignine.com Biyan

Sayang sekali, saya sama sekali buta untuk 3Dmax. Tapi sepertinya ini bisa dibuat dengan ilustrator dan dimigrasikan ke photoshop untuk beberapa efek tambahan.
- http://desaindigital.com Jeprie
  
  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.
http://personfield.web.id aldy

Berati ini hasil dari 3ds Max dan Photoshop?
saya malah bingung sendiri.

OOT,
line-heigh, area komentar ini terlalu mepet.
- http://desaindigital.com Jeprie
  
  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.
http://ariefrizky.com Arief Rizky Ramadhan

Kebetulan saya punya teman yang bisa 3Dmax nanti kapan-kapan mau belajar bikin upin ipin wkwkwkwk. Ini pertama kalinya saya liat 3Dmax hehe. Keren juga mas
- http://desaindigital.com Jeprie
  
  Modeling seperti itu lebih sulit. Kalau yang diperlihatkan di sini hanya modeling sederhana saja untuk keperluan referensi di Photoshop.
http://lukmanefendi.web.id lukmanefendi

om mockup itu apaan ya..hhee…
om np ganti nie.. themes webx nie….hhwhw… ajarin psd to wordpress dunk om….
- http://desaindigital.com Jeprie
  
  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.
  - http://lukmanefendi.web.id lukmanefendi
    
    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

AMC™DESIGNER

DETAIL MATERI

Friday, July 19, 2013