Pada kesempatan ini saya ingin berbagi tutorial desain grafis yaitu bagaimana cara membuat gambar mockup website di tampilan layar smartphone. Bagi yang belum tau, mockup adalah salah satu bentuk representasi sebuah ide produk kemudian dituangkan ke dalam sebuah gambar sehingga terkesan lebih nyata.

Sebelum mengikuti tutorial ini kita terlebih dahulu harus mendownload foto seseorang yang sedang memegang smartphone. Pada layar smartphone itulah nanti kita akan menempatkan tampilan website, seakan-akan orang yang di dalam foto tersebut sedang melihat website yang kita miliki.

Download fotonya di sini: https://www.pexels.com/photo/person-woman-hand-space-4322/
Setelah mendownload buka foto tersebut dengan aplikasi Photoshop.

Mengambil Gambar Website

Capture gambar website yang akan ditampilkan di layar smartphone, buka website yang diinginkan menggunakan browser, pada contoh ini saya menggunakan website indesain.com. Karena halaman website tersebut nanti akan ditampilkan dalam layar smartphone, tentunya bentuk tampilan web juga harus tampilan mobile. Jika anda menggunakan browser chrome anda dapat mengklik pada ikon yang terdapat pada sudut kanan atas browser untuk melihat tampilan web dalam bentuk mobile. Kemudian pilh More tools > Developer tool.



Maka akan tampil halaman developer google chrome, sebelah kiri akan muncul halaman web dalam tampilan mobile. Anda dapat mengatur tampilan web ini dalam ukuran layar sesuai dengan keinginan. Anda dapat menggunakan alat bantu aplikasi Sniping Tool yang terdapat pada windows untuk mengambil gambar halaman web, atau juga dapat menekan tombol PrintScreen pada keyboard.



Pastekan (Ctrl+V) halaman web yang sudah di print screen ke dalam foto yang telah dibuka dengan photoshop tadi. gunakan Rectangular Marquee Tool (M) untuk menseleksi bagian gambar yang digunakan, kemudian pilih Layer Via Copy maka akan terjadi penambahan layer (Layer 2) dengan gambar hasil seleksi.



Disable layer 1 sehingga layer hasil seleksi terlihat.



Gunakan Move Tool (V) lalu tarik sudut gambar website ke sudut layar smartphone, lakukan hal ini sambil menekan tombol [Ctrl] pada keyboard.



Lakukan pada keempat sudut gambar sehingga posisi gambar website tepat di dalam layar smartphone.


Selanjutnya kita akan menghapus area gambar yang menutupi bagian tangan, untuk memudahkan proses penghapusan silahkan turunkan Opacity Layer 2 terlebih dahulu menjadi 25%.



Gunakan Polygonal Lasso Tool (L) untuk membuat seleksi pada bagian jari yang tertutup oleh gambar website.



Tekan tombol Delete pada keyboard maka gambar website yang menutupi jari akan terhapus. Naikkan kembali Opacity Layer 2 menjadi 100%. Hapus seleksi dengan menekan Ctrl+D

Membuat Efek Glossy pada Layar

Langkah selanjutnya adalah membuat efek glossy pada layar supaya lebih terlihat realistis. Gunakan Polygonal Lasso Tool (L) kemudian buat seleksi seperti pada gambar di bawah. Buatkan layer baru dengan menekan Ctrl+Shift+N.

Pilih Paint Bucket Tool (G) lalu atur warna foreground menjadi putih. Selanjutnya klik pada bagian dalam area seleksi sehingga warna layar berubah menjadi putih.

Gunakan lagi Polygonal Lasso Tool (L) untuk membuat seleksi seperti pada gambar di bawah. Kemudian tekan tombol Delete pada keyboard untuk menghapus separuh gambar yang berwarna putih pada layar.

Turunkan nilai Opacity Layer 3 menjadi 50%.

Inilah hasil akhir dari Tutorial Membuat Mockup Website Di Smartphone dengan Photoshop

Sekian dulu tutorialnya semoga memberikan banyak manfaat bagi kita semua, terima kasih

Muhammad Ahsin, ST
Tentang Penulis :
Penulis berprofesi sebagai web programmer yang memiliki hobi pemrograman, web desain, desain grafis, fotografi dan main drum. Disela kesibukan dalam bekerja, penulis menyempatkan diri untuk berbagi ilmu desain melalui web indesain.com.

Motto : Mencoba berbagi apa yang bisa, walaupun hal sederhana

Penulis dapat dihubungi via:
Email : ahsin90@rocketmail.com
Facebook: https://www.facebook.com/muhammad.ahsin

Website: indesain.com

Rekomendasi ilmugrafis

Photoshop Complete Edition
Koleksi Lengkap Video Tutorial Photoshop dan mulai dari Efek Foto Professional...