TUTORIAL: MOCKUP KERTAS (2)

Ok, seperti yang dijanjikan, kali ini kami sambung pula dengan bahagian kedua tutorial – memasukkan design ke dalam ‘base’ mockup yang telah dihasilkan.

Ini adalah rupa ‘base’ mockup seperti yang terdapat dalam tutorial yang lalu.

‘Base’ kosong – belum ada design

Tujuan tutorial ini adalah bagi membolehkan kita memasukkan design yang telah siap ke dalam ‘base’ mockup kita tadi. Hasil akhirnya adalah seperti di bawah:

Sedia… Satu Dua Tiga

Baik, langkah pertama, buat kotak menggunakan rectangle tool dengan opacity 50% di atas imej mockup kertas yang telah kita hasilkan sebelum ini (dalam rajah di bawah, kotaknya berwarna peach). Namakan (rename) layer itu MOCKUP.

Seterusnya, kotak itu perlu dijadikan ‘smart object’ agar design kita nanti dapat ‘dimasukkan’ ke dalamnya. Untuk itu, pilih layer MOCKUP tadi, klik kanan > Convert to Smart Object.

Langkah seterusnya, double click pada kotak kecil dalam bulatan bertanda merah seperti dalam gambar di bawah.

Nampak tu kotak kecil dalam bulatan bulat tu? Ha… double click kat situ.

Setelah ‘double click’, kita akan dibawa ke satu halaman baru. Di sinilah kita akan masukkan design kita nanti.

Ini halaman baru.

Setelah masuk ke halaman baru tu, anda akan dapat opacity backgroundnya masih 50%. Adjust semula ke 100% (kalau tidak, design kita nanti pun opacitynya masih 50%).

Masukkan Design – Done

Kemudian, masukkan design yang sudah siap, atau anda boleh mula design dalam ni, yang mana yang anda suka. Saya pilih yang pertama. Lepas siap, save fail tersebut. Kemudian, pergi semula ke halaman asal (base mockup) kita dengan cara klik pada tetingkap bertanda bulatan merah seperti di bawah:

Tu… klik kat situ.

Ha… done. Jadi kan?

Untuk cantikkan lagi mockup anda, anda boleh tukar background di belakang tu dengan apa-apa imej tekstur (tikar, tiles, papan, lantai dsb.) agar mockup anda nampak lebih realistik dan awesome!

Selamat mencuba. Sudi-sudikanlah untuk kongsikan ilmu ini jika anda rasa ianya bermanfaat.