Tutorial Desain

Cara Membuat Mockup Website Menggunakan Photoshop [Bagian 4]

Halo pembaca setia inwepo, kita berjumpa kembali pada Tutorial Membuat Mockup Website Menggunakan Photoshop, kali ini kita masuk ke bagian 4. bagi kawan – kawan yang belum membaca bagian 1 , bagian 2, dan bagian 3 alangkah baiknya untuk membaca terlebih dahulu karena tiap part pada artikel tutorial ini berhubungan.

Setelah selesai dengan tutorial sebelumnya, sekarang adalah saat untuk memasukkan gambar – gambar pada desain website. Pertama seleksi layer persegi untuk header dengan cara klik pada layernya atau dengan menekan Ctrl pada keyboard dan klik bagian persegi nya.

1. Setelah itu masukkan gambar apa saja untuk dijadikan header nya. Ketika sudah dimasukan gambarnya, pastikan kalau gambar tersebut berada tepat di atas layer persegi header.

header img 2

2. Setelah itu klik kanan pada layer gambar tadi, dan pilih Create Clipping Mask. Untuk mengatur ukurannya dapat menekan Ctrl+T pada keyboard, jika ukuran sudah pas maka dapat menekan tombol enter.

header img 3 dan 4

3. Kemudian masih di layer gambar, pilih menu filter à Blur à Gausian Blur dan masukan nilai nya 6 dan klik OK. Kemudian pada nilai opacity nya jadikan 50% hal ini akan membuat gambar latar sedikit buram sehingga nantinya tulisan dapat terlihat dengan jelas.

header img 5 dan 6

4. Kemudian pilih rectangle untuk navbar dan klik gambar mata yang ada di sebelah kanan nama layer, hal ini supaya persegi navbar tersebut disembunyikan agar tidak kelihatan.

header img 7

5. Setelah itu masuk ke portofolio. Disini kita memasukkan screenshoot dari website yang merupakan hasil pekerjaan dari tim developer ini. Sebagai contoh penulis memasukan website Iflix, nickelodeon, dan Marvel. Untuk cara memasukan gambarnya sama seperti memasukan gambar di header sebelumnya, pertama seleksi terlebih dahulu Rounded Rectanglenya baru masukan gambar, kemudian klik kanan pada gambar tersebut dan pilih Create Clipping Mask dan atur ukurannya.

portofolio

6. Lalu masukan lagi gambar untuk menjadi latar belakang portofolio. Memasukkan gambarnya sama seperti memasukkan gambar pada header. Jangan lupa seleksi terlebih dahulu Rectanglenya baru masukkan gambar, klik kanan pada layer gambar tersebut dan pilih Create Clipping Mask, atur ukuran gambarnya dan kurangi nilai opacity gambar nya.

portofolio 1

Hasil sementara dari desain website seperti ini:

mockup-sementara-1

Sekian dulu untuk bagiann 4, kita bertemu lagi di bagian 5 untuk memasukkan foto pada Team dan latar belakang Contact. Sampai Jumpa

 






2 Comments

2 Comments

  1. PART 5 nya ngak bisa dibukak gan..

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Copyright © 2017 Inwepo. Server by GoCloud

To Top