Cara Membuat Mockup Layar HP (Photoshop)

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Cara Membuat Mockup Layar HP

Daftar Isi

Cara Membuat Mockup Layar HP (Photoshop)

Pada Postingan Kali Ini kita akan membahas bagaimana cara membuat mockup pada layar hp di sebuah foto mengunakan photoshop (disini mengunakan Photoshop CS6)

Tapi apa sih mockup itu?? Mockup adalah sebuah objek atau media untuk menampilkan bagaimana desain atau rancangan diterapkan pada suatu barang/objek yang didesain

Nah dari pada basa-basi berikut ini Langkah-Langkah Cara Membuat Mockup Layar HP

Langkah 1

Langkah 1 : Membuka File Foto di Photoshop

1.Buka File Foto

 Untuk membuat Mockup Kamu Memerlukan Foto atau Objek yang akan kamu gunakan sebagai mockup desain kamu dapat mengunakan gambar apa saja selain layar hp

Buka Aplikasi Photoshop  kamu klik Ctrl+O atau File>Open Kemudian pilih foto yang akan kamu gunakan

Langkah 2

Langkah 2 : Select Area Foto

2.Select Area yang akan ditempati oleh desain

 Select area layar handphone mengunakan quick selection tool pastikan selectionnya positif ya..

Langkah 3

Langkah 3 : Mengubah Selection Menjadi Shape

1.Mengubah selection menjadi shape

 Agar dapat dibuat mockup selection harus kamu ubah menjadi shape terlebih dahulu pertama buka menu paths dengan mengeklik paths pada menu windows

Langkah 3 : Add Paths From Workplace

Perhatikan pada pojok kanan bawah menu paths klik tombol di bawah yang bertulisan “add paths from workplace” untuk melihat fungsi tombol dekat kan pada tombolnya

Langkah 3 : Mengubah Path Menjadi Shape

Untuk Membuat path tersebut menjadi shape klik shape tool pada menu samping kiri kemudian klik bagian atas pilih path

Step by Step

Dibagian atas terdapat pilihan tombol make pilih shape agar path tersebut berubah menjadi shape

Langkah 4

Step by Ste

4.Convert Shape ke Smart Object

 Kemudian pada menu layers pilih layer shape tadi klik kanan untuk mengubahnya ke smart object pilih Convert to Smart Object

Langkah 5

Step by Step

5. Mengubah shape agar bisa di masukan desain

 Klik 2 kali pada thumbnail layer shape yang sudah di convert tadi untuk masuk ke edit smart object klik ok pada jendela popup yang muncul saat mengeklik 2 kali

Step by Step

5A. Memasukan desain agar mengikuti bentuk shape

 Buka gambar desain kamu atau drag and drop ke smart objek atur dahulu ukuran gambarnya agar tidak terlalu besar atau kecil

Step by Step

5B. Membuat gambar mengikuti bentuk shape

 Klik kanan pada layer gambar kamu kemudian klil Create Clipping Mask agar bentuk gambar tersebut mengikuti bentuk shape Pastikan layer gambar kamu terletak Diatas layer shape sebelum membuat Clipping Mask ya..

Langkah 6

Step by Step

6.Save Perubahan pada edit smart object

 Taraa gambar pun sudah memiliki bentuk yang sama dengan shape tersebut exit tab nya kemudian Klik Save

Langkah 7

Step by Step

7.Penutup

 Yess.. Mockup Kamu sudah jadi klik save untuk dapat agar dapat digunakan lagi atau save as png/jpeg

Gampang bukan?? membuat mockup layar hp?

Sekian Tutorial Cara Membuat Mockup Layar HP ini

Semoga Bermanfaat

Written & Modified By: Al-Gurion Limbong

Hosting Unlimited Indonesia
Hosting Unlimited Indonesia
5 4 votes
Article Rating

More To Explore

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
Eca
Eca
3 months ago

bagus tutorialnya tapi itu tombol download gambar percobaannya gk bisa di klik thanks ya tutorialnya 🙂

Jojo
Jojo
4 days ago

thanks banget tutorialnya

Coming
Soon