TUTORIAL: MOCKUP KERTAS

Huh… rasanya inilah kali pertama kami menulis tentang tutorial sejak mula memblog (sejak 2003). Ya… seingat kami belum pernah. Apatah lagi tutorial yang kami tuliskan sendiri!

Tutorial ni simple saja… justeru segala penerangannya pun diolah dan dipersembahkan dalam bentuk yang agak simple saja agar dapat difahami dan diikuti oleh sesiapa yang membacanya.

Mockup Kertas

Kertas berlipat – macam real kan?

Pernah anda lihat orang persembahkan hasil karyanya dalam bentuk ‘mockup’ macam di atas? Ya… kaedah persembahan ini dipanggil mockup. Ringkasnya, mockup ini diterangkan seperti di bawah:

Photoshop mockups are images that model your design in a realistic context. Whether you’re presenting your work to a client or iterating, mockups are a helpful tool to show how a design might appear (or be used) in the real world.

Bahasa mudahnya kaedah memahamkan pelanggan secara visual grafik bagaimana rupa hasil kerja anda dalam bentuk yang agak realistik.

Ok, step by step, untuk tutorial ini, buka kanvas bersaiz 1000px x 1000px dan warnakan background dengan apa-apa warna.

Kemudian, lukis petak 4 segi tepat menggunakan rectangle tool dan drag guideline daripada ruler untuk dijadikan panduan bahagian yang akan ditambah efek lipatan.

Kemudian, lukis kotak hitam dan ‘rasterize’kan. Kotak ini akan dipadam sebahagiannya untuk efek bayang. Padam sehingga jadi seperti di bawah:

Kotak hitam – untuk efek bayang nanti
Padamkan sebahagian daripada kotak tersebut.

Ok, dah nampak sedikit rupa kertas yang berlipat dengan trick kotak hitam yang telah kita gunakan tadi. Namun, untuk bayang anda kelihatan lebih ‘real’, kita perlu kurangkan opacitynya.

Done satu fasa. Kemudian, untuk efek lipatan menegak, ulangi langkah di atas.

Berikutnya pula, kita kena adjust sedikit bahagian lipatan menegak ni. Bahagian ini perlu dipotong separuh dan kemudian, flip horizontal bahagian yang dipotong untuk kelihatan seperti berikut:

Lihat bayang menegak – ada perbezaan arah antara atas dan bawah kan?

Selesai bahagian kertas. Step berikutnya: bayang. Buat bentuk bulat berwarna hitam menggunakan elipse tool. Letakkan layer bulat ni di bawah. Kemudian, ‘rasterize’kan layer tersebut.

Blurkan setiap bulatan tersebut sehingga tampak seperti bayang yang realistik. Lihat gambar di bawah:

Menggunakan teknik yang sama, buat bayang pada sebelah kiri (atau kanan) kertas. Ingat, buat sebelah sahaja (sebab bayang hanya timbul pada sebelah permukaan saja).

Bayang sisi dan bawah

Nah. Siap ‘mockup’ kertas berlipat kita.

Untuk memasukkan design kita ke dalam kertas ini seperti gambar di bawah, kami akan tulis satu tutorial lagi selepas ini. Atau anda boleh google terus cara-cara menghasilkan DIY mockup file.

Bermanfaat? Kongsikan artikel ini dengan orang lain.