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]

Iklan

5 thoughts on “Studi Kasus Pembuatan Mockup Display Foto

  1. Wah, menarik sekali
    Terima kasih atas tutorial singkat untuk push pin-nya.
    Saya sering mengalami kesulitan dalam membuat push pin untuk poster atau brosur, tutorial di atas sangat membantu saya.

    Maju terus DesainDigital 😀

  2. Terima kasih mas.

    Saya membuatnya di resolusi tinggi. Semua detail sebisa mungkin dipertahankan. Setelah diperkecil, biasanya hasil akhir akan terlihat sangat mirip dengan aslinya.

  3. mas jeprie, salut untuk setiap detail bahkan proses manualnya yang membuat saya cukup kagum dengan sampeyan. begitu detailnya saya yakin dengan harapan user puas dengan hasil yang di harapkan. thanks juga untuk tehnik mockupnya, saya banyak belajar dari artikel sampeyan semoga selalu jadi amal yang baik.

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