Home / Tutorial Desain / Tutorial Membuat Mockup Website Menggunakan Photoshop [Bagian 5]

Tutorial Membuat Mockup Website Menggunakan Photoshop [Bagian 5]

Tutorial By David Martianus

Last updated on Maret 31st, 2021

Halo pembaca setia inwepo, kita kembali lagi di Tutorial Membuat Mockup Website Menggunakan Photoshop, kali ini kita masuk ke tutorial ke-lima atau yang terakhir dari tutorial ini. bagi yang belum membaca tutorial bagian 1, bagian 2, bagian 3, dan bagian 4 dapat membacanya terlebih dahulu.

1. Setelah selesai dengan bagian portofolio pada bagian 3, kita masuk ke bagian team, di sini kita akan memasukan foto untuk anggota team. Pertama seleksi salah satu lingkaran, kemudian masukkan gambar, klik kanan pada layer gambar dan pilih create clipping mask. Atur gambar dengan menekan tombol Ctrl+T. Lakukan hal yang sama pada lingkaran – lingkaran lainnya.

Membuat Mockup Website Menggunakan Photoshop [Bagian 5] copy

2. Masih di bagian foto Team, seleksi lingkaran pertama, ingat lingkarannya bukan gambarnya. Kemudian klik kanan dan pilih Blending Option. Ceklis Stroke dan masukan size 1 dan warna hitam. Stroke disini dibuat supaya tepi dari lingkaran terdapat garisnya.

3. Kemudian untuk memberikan effect yang sama pada setiap lingkaran. Seleksi lingkaran pertama, di sebelah kiri layer akan ada tulisan fx, tekan dan tahan tombol Alt pada keyboard lalu drag fx tersebut ke lingkaran kedua, begitu seterusnya sampai pada lingkaran terakhir.

4. Kemudian masuk ke bagian Contact Us. Disini kita hanya akan memasukan gambar latar belakang seperti pada Header. Seleksi persegi pada Contact Us kemudian masukan gambar yang diinginkan, jangan lupa utuk melakukan Set Clipping Mask dan ubah Opacitynya menjadi 50%.

Untuk hasil akhir dari desain website ini adalah seperti dibawah ini:

Sekian untuk Tutorial Membuat Mockup Website Menggunakan Photoshop. Terimakasih untuk perhatian kawan – kawan pembaca inwepo dalam tutorial ini, semoga tutorial ini bermanfaat. Sampai Jumpa.