Studi Kasus Pembuatan Mockup Display Foto

Kali ini saya akan memperlihatkan studi kasus pembuatan file Mockup Display Foto untuk VandelayPremier. File ini bertujuan untuk mempermudah proses menampilkan gambar dalam web atau cetak. Pengguna tinggal memasukkan gambar dan mengatur elemen-elemen yang sudah tersedia untuk memberikan efek tertentu, misalnya memberi bayangan, memberi push pin, atau menambah klip kertas.


[hr]

Preview


Sebelumnya, lihat terlebih dahulu mockup yang akan diperoleh di bawah. Mockup ini sangat fleksibel dan memiliki banyak kemungkinan, Anda bisa melihatnya dalam tutorial singkat yang saya sertakan.


Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto



[hr]

Langkah 1: Referensi



Langkah pertama adalah membuat referensi. Saya harus mempelajari bayangan, pantulan, dan berbagai detail kecil dalam display foto. Untuk proses ini, saya membeli beberapa pak push pin, klip kertas, selotip transparan, beberapa lembar kertas kosong, dan styrofoam putih. Semua saya atur hingga diperoleh bentuk nyata display foto lalu disimpan di atas styrofoam. Semua dibuat sealami mungkin, tidak terlalu rapi. Misalnya saya sedikit memiringkan posisi push pin dan ceroboh dalam memasang selotip.

Proses pemotretan saya lakukan di studio foto teman. Saat ini saya tidak memfoto sendiri. Selain karena saya tidak memiliki skill dan alat yang mencukupi, di studio pencahayaan bisa diatur dengan lebih mudah, berbeda dengan cahaya di kondisi biasa yang tidak terkontrol.

Di bawah adalah beberapa foto yang saya peroleh. Semua foto diambil dalam resolusi paling tinggi untuk mempermudah menangkap detail-detailnya.
Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto


Langkah 2: Pembuatan Push Pin



Seperti studi kasus lain di DesainDigital, saya tidak akan membahas panjang teknik yang digunakan. Saya hanya akan memperlihatkan pembuatan push pin yang saya rasa paling menarik karena memiliki begitu banyak detail. Di bawah adalah referensi dari push pin asli.



Studi Kasus Pembuatan Mockup Display Foto



Langkah 3



Mulai dengan membuat shape berbentuk lingkaran untuk bagian bawah push pin. Beri Layer Style Inner Shadow dan Inner Glow. Setting ini saya peroleh melalui proses eksperimen, coba-coba. Saya hanya mencoba semua parameter hingga terlihat mirip dengan aslinya.

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto


Langkah 4



Buat lagi lingkaran untuk bagian atas push pin. Beri lagi layer style.

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto


Langkah 5


Buat layer baru lalu lukis bayangan dan pantulan pada push pin. Proses ini biasanya membutuhkan waktu paling lama. Perlu kesabaran karena kita harus bekerja dengan brush beropacity rendah, 5-10%.



Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto


Langkah 6


Tentu saja, jangan melupakan bayangannya. Untuk push pin yang ini, sumber cahaya berada di dua sisi, kiri dan kanan. Efeknya bisa Anda lihat pada bayangan yang dihasilkan.


Studi Kasus Pembuatan Mockup Display Foto


Langkah 7


Setelah selesai, kita tinggal merapikan layernya ke dalam group terpisah untuk kemudian digabungkan dengan elemen yang lain.


Studi Kasus Pembuatan Mockup Display Foto


Langkah 8


Saya sangat terobsesi dengan detail. Saya tidak mau copy paste begitu saja. Saya juga membuat beberapa push pin lain dengan pencahayaan dan posisi berbeda. Semua saya buat sendiri, bukan hasil copy paste dari push pin sebelumnya.


Studi Kasus Pembuatan Mockup Display Foto

Studi Kasus Pembuatan Mockup Display Foto


[hr]

Hasil Akhir


Dalam hasil akhir, push pin diperkecil menjadi setengahnya sehingga terlihat lebih rapi lagi. Di bawah adalah tampilan dalam perbesaran 25%.


Studi Kasus Pembuatan Mockup Display Foto


Saya juga membuat elemen lain seperti selotip transparan. Walaupun sangat kecil, jika dilihat dalam perbesaran 100% Anda bisa melihat detail di sana. Saya menambahkan sedikit lipatan dan pantulan sehingga selotip ini terlihat alami.
Studi Kasus Pembuatan Mockup Display Foto


[hr]

Kesimpulan


Dari studi kasus ini, Anda bisa melihat bahwa detail sangat penting, bahkan untuk objek terkecil sekalipun. Saya harap Anda belajar sesuatu dari artikel ini.



[box type="info"]File PSD display foto bisa dibeli seharga $6 di VandelayPremier. Khusus bagi pembaca DesainDigital, Anda bisa menggunakan kupon desaindigital selama Februari 2011 untuk memperoleh potongan 50%.[/box]