Studi Kasus Mendesain Mockup Buku Portfolio

Di sini saya akan menunjukkan beberapa tahapan proses kerja yang dilakukan ketika mendesain mockup buku portfolio untuk Vandelay Premier. Mockup ini dibuat dalam format PSD dan menggunakan fitur Smart Object dari Photoshop.

Mencari Referensi

Vandelay Premier meminta mockup untuk buku portfolio bertipe landscape (memanjang) dengan ukuran 8.5 inchi × 5.5 inchi. Ukuran ini mungkin umum digunakan di Amerika namun tidak di Indonesia. Saya mencoba membuka koleksi buku di rumah, buku cerita anak memiliki ukuran yang mirip namun tidak sama persis.

Awalnya saya berencana membuat buku sendiri dengan ukuran tadi, namun menemukan bahwa buku brosur Hypermart ternyata tepat setengah ukuran ini. Jadi, saya ambil penggaris dan memotongnya.

Selanjutnya, saya atur posisi buku untuk referensi desain dan memfotonya. Tidak ada pencahayaan khusus, saya melakukannya di ruang tamu rumah.

Desain di Photoshop

Di Photoshop, proses desain dimulai dengan men-trace setiap elemen buku menggunakan tool Pen lalu mengubahnya menjadi shape. Anda bisa menggunakan program vektor semacam illustrator jika lebih nyaman dengan kontrol tool vektor di sana. Agar mudah dibedakan, semua halaman menggunakan warna yang unik dan mencolok.

studi-kasus-mockup-portfolio-11

Buat layer baru di atas halaman dan ubah menjadi Clipping Mask (Ctrl + Alt + G). Secara manual, lukis bayangan di bagian-bagian tertentu halaman.

studi-kasus-mockup-portfolio-12

Ulangi ini pada setiap halaman.

studi-kasus-mockup-portfolio-13

Buat juga halaman buku di sisi lainnya.

studi-kasus-mockup-portfolio-14

Buat file baru dengan ukuran tepat satu halaman buku portfolio, 8.5 inchi × 5.5 inchi. Masukkan ke atas gambar dengan cara geser file langsung ke dalam kanvas untuk menyimpannya sebagai layer Smart Object.

studi-kasus-mockup-portfolio-15

Lakukan transformasi (Ctrl + T). Klik kanan dan pilih Warp. Atur ukurannya agar desain halaman terlihat menempel pada halaman shape vektor yang telah kita buat. Simpan desain dalam bentuk Smarty Object ini agar berada di belakang bayangan di halaman kertas.

studi-kasus-mockup-portfolio-16

Lakukan hal yang sama pada bagian lainnya.

studi-kasus-mockup-portfolio-17

Tambahkan juga desain halaman sisi lainnya.

studi-kasus-mockup-portfolio-18

Akhirnya, kita bisa menutupi latar dengan warna solid, misalnya putih.

studi-kasus-mockup-portfolio-19

Tambahkan bayangan. Anda perlu melukis bayangan secara manual untuk memperoleh tampilan yang realistis. Anda tidak bisa mengandalkan Layer Style Drop Shadow atau sejenisnya.

studi-kasus-mockup-portfolio-20

Setelah selesai, saya tambahkan tekstur pasir di belakang buku untuk menunjukkan pada klien kemungkinan-kemungkinan tampilan yang bisa dihasilkan oleh mockup ini.

studi-kasus-mockup-portfolio-21

Hasil Akhir

Ini adalah hasil akhir yang saya peroleh. Saya mendesain satu set mockup yang terdiri dari 5 tampilan.

Kesimpulan

Semoga dari studi kasus ini Anda bisa mempelajari langkah-lengkah pembuatan mockup di Photoshop. Untuk memahami lebih detail tentang mockup PSD, Anda bisa mencoba membongkar file-file mockup gratis di PSDfreemium.

Iklan

7 thoughts on “Studi Kasus Mendesain Mockup Buku Portfolio

  1. Seperti biasa mockup file-file psd yang mas jeprie buat sangat menarik bagi kita.

    Koreksi saya hanya pada gambar “studi-kasus-mockup-portfolio-22” yang shadownya tampak sedikit mencolok.

  2. Wah, asik. Makasih sharing ilmunya, mas. Ilmu itu emang luas. dan dalam proses belajar ilmu pasti banyak cara. Baru kepikiran nih buat mockup pake cara yg satu ini. He..he..he..
    Selama ini buat nya dri scratch nya. >.<

  3. Maunya sih kalau ada videonya mas…mau belajar juga yg ginian, kalau ada mau dong linknya krn memang buta abis masalah ginian…tq

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