Cara Membuat Mockup Website Menggunakan Photoshop [Bagian 2] – Inwepo
Tutorial Desain

Cara Membuat Mockup Website Menggunakan Photoshop [Bagian 2]

Halo readers, saya kembali lagi. Kali ini saya akan melanjutkan pembuatan mockup website menggunakan photoshop.

Bagi yang belum melihat bagian 1 dari tutorial ini, silakan baca tutorial sebelumnya:

Terakhir pada bagian 1 adalah pembuatan header, menu, dan button pada header. Setelah itu mari buat teks Our Services menggunakan tool Text pada Photoshop, jenis font yang di gunakan adalah Glober, ukuran teks 40 px, warna teks nya adalah hitam.

1. Kemudian untuk meletakan teks di tengah, seleksi layer teks Our Services dan tekan tombol Ctrl+A pada keyboard dan pilih Align Horizontal Centers. Jika sudah tekan Ctrl+D untuk unseleksi layer yang telah dipilih.

atur service center

2. Kemudian buat text untuk diletakan di bawah Our Services yang merupakan layanan yang akan diberikan, sebagai contoh disini buatlah teks bertuliskan Planning. Setelah itu buat lagi tulisan di bawah Planning yang akan menjadi deskripsi dari Planning tersebut, disini masukan teks lorem ipsum seperti pada pembuatan text kedua pada image slider pada tutorial bagian 1. Untuk text Planning ukuran font nya adalah 40pt, sedangkan untuk text deskripsi yang ada di bawahnya adalah 18 pt.

teks Planning lorem

3. Kemudian untuk membuat layanan yang lainnya, untuk mempermudah seleksi text Planning dan Lorem Ipsum kemudian tekan tombol Ctrl+J pada keyboard. Pada bagian layer akan tampak duplikasi nya sedangkan pada lembar kerja tulisannya masih terlihat tidak ada perubahan, sebenarnya tulisan yang ada di lembar kerja ada dua tetapi posisinya berada pada posisi yang sama.

duplikasi service planning 2

4. Untuk memindahkannya tekan tombol V pada keyboard untuk pindah ke Move Tool, kemudian tekan tombol Shift pada keyboard dan pindahkan teks tersebut ke tengah menggunakan mouse.

duplikasi service planning 3

5. Kemudian untuk mengubah text kedua, seleksi layer Planning copy dan klik dua kali pada tulisan T besar yang ada pada layer tersebut dan ubah tulisannya menjadi UI/UX Design.

duplikasi service planning 4

6. Setelah itu duplikasi lagi teks tersebut seperti pada sebelumnya dan letakan pada bagian sebelah kanan. Setelah itu ubah text UI/UX Design menjadi Development.

7. Setelah itu seleksi layer Planning sampai layer lorem ipsum pada Development dan pindahkan sedikit ke bawah karena di atas masing-masing layanan akan diberikan gambar.

duplikasi service planning 5

8. Setelah itu masukan tiga buah gambar dan letakan masing – masing gambar disetiap layanan yang ada. Sebagai contoh untuk gambar Planning dapat menggunakan icon Lampu, untuk UI/UX dapat menggunakan icon peralatan gambar, Development dapat menggunakan icon laptop.

service fix

Hasil akhir sementara akan seperti ini.

hasil sementara 2

Sekian untuk bagian 2, kita lanjutkan lagi di bagian untuk pembuatan bagian portofilio dan team. Sampai jumpa.






Click to comment

Leave a Reply

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

Latest Tutorials

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


Copyright © 2017 Inwepo. Server by GoCloud

To Top