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

Cara Membuat Mockup Website Menggunakan Photoshop [Bagian 1]

Hallo readers, pada kesempatan kali ini penulis akan berbagi cara dalam membuat desain mockup website menggunakan photoshop.

Mockup website sendiri adalah rancangan desain dari sebuah website yang dibuat secara manual menggunakan photoshop atau aplikasi sejenisnya.

1. Sebelum memulai pembaca dapat membuka 960 Grid System dan mengunduh template grid untuk mempermudah dalam pembuatannya. Untuk dapat mengunduh dapat memilih tombol Big ol’ Download Button pada websitenya.

960 Grid System

2. Setelah selesai mengunduh extract file tersebut, hasil unduhannya bernama 960-Grid-System-master.zip untuk extract file dapat dengan klik kanan pada mouse dan pilih extract here. Setelah itu buka folder hasil extract tersebut yang bernama 960-Grid-System-master

Hasil Extract

3. Pilih Folder Templates.

pilih folder photoshop

3. Pilih Folder Photoshop.

folder-3

4. Pilih 960_grid_12_col.psd.

pilih file

5. Kemudian akan masuk ke aplikasi photoshop dan tampilannya adalah seperti ini.

ps1

6. Tampilan ini akan membantu dalam pembuatan mockup supaya lebih rapih. Lalu pilih menu Image → Canvas Size atau dapat menekan Alt+Ctrl+C pada keyboard..

canvas size

7. Kemudian atur ukuran canvas dengan lebar 1400px, panjang 2500px, uncheck relativenya, dan klik panah atas pada anchor.

set canvas

8. Setelah itu canvas yang sebelumnya berukuran kecil akan berubah menjadi lebih besar seperti gambar ini.

template grid1

9. Setelah itu buat persegi menggunakan Rectangle Tools, caranya klik sembarang pada bagian canvas lembar kerja, ketika muncul jendela untuk memasukan ukuran, masukan lebar (width) 1400 px dan tinggi (height) 600 px kemudian klik OK.

buat header

10. Atur warna nya menjadi lebih gelap dengan kode hex #404040 cara untuk mengubah warnanya pilih terlebih dahulu layer rectanglenya kemudian klik dua kali maka akan muncul window untuk pemilihan warna. Persegi ini nanti nya akan dibuat sebagai header atau slider pada website. Jika pembaca ingin mengubah ukuran secara manual dapat menekan Ctrl+T pada keyboard dan dapat mengatur ukurannya secara manual, jika sudah dapat menekan tombol Enter untu commit pada ukurannya.

header color

11. Kemudian masuk ke pembuatan navbar menu pilih Rectangle Tool pada photoshop dan klik sembarang pada canvas, setelah itu akan diminta ukuran untuk membuat ukuran rectangle nya. Disini atur ukuran lebarnya 1400px dan lebarnya 100px.

12. Kemudian ubah warna nya menjadi abu-abu dengan kode hex #858585, untuk mengubah warna nya pilih terlebih dahulu layer rectanglenya kemudian klik dua kali maka akan muncul window untuk pemilihan warna. Jangan lupa untuk meletakannya di atas sebagai navbar balam website.

13. Setelah itu masukan text untuk menu seperti Home, Services, Portofolio, Team, Contact Us.

14. Kemudian untuk mengatur supaya menu nya terlihat rapih di navbar, pilih kedua layer text dan rectangle dan atur posisinya align vertical centers dan hasil nya akan menjadi seperti ini. Perlu diingat ketika ingin mengatur ini pastikan pembaca menggunakan tools Move atau dapat menekan tombol V pada keyboard, jika tidak maka pilihan Align untuk mengatur posisi tidak akan muncul.

capture1.1

15. Kemudian untuk logo, penulis menggunakan tulisan sebagai logo. Untuk membuatnya dapat menggunakan tool Text pada photoshop dan klik sembarang pada lembar kerja dan ketik MockUp, atur ukuran text nya menjadi 40pt dan ubah warnanya menjadi putih, untuk jenis font yang digunakan adalah pacifico. Setelah itu letakkan logo tersebut pada bagian atas kiri untuk.

16. Untuk membuatnya terlihat rapih, seleksi layer rectangle1, text menu, dan logo pada layer kemudian pilih posisinya align vertical centers maka hasilnya akan seperti ini.

atur logo

17. Kemudian gunakan tool Text untuk membuat teks pada persegi kedua yang dijadikan sebagai slider pada website. Ketik “We Are MockUp” dan ubah ukuran font nya menjadi 60pt, warna putih dan jenis font yang digunakan adalah Glober.

header text

18. Buat lagi text yang akan diletakan di bawah tulisan We Are MockUp. Cara nya dengan memilih tool Text dan drag menggunakan mouse hingga membentuk persegi panjang untuk menulis text.

text header 2

19. Setelah itu pilih menu Type dan pilih Paste Lorem Ipsum, teks Lorem Ipsum nya panjang jadi pembaca dapat menghapus beberapa hingga menjadi pendek. Atur ukuran fontnya menjadi 18pt dan teks nya rata tengah.

paste lorem 2

20. Kemudian kita akan membuat sebuah button. Pertama pilih Rounded Rectangle Tool, jika pada pembaca yang ada Rectangle Tool maka dapat klik kanan pada Rectangle Tool dan pilih Rounded Rectangle Tool. Setelah itu atur radius nya menjadi 50px. Jika sudah klik sembarang pada lembar kerja dan atur lebar nya 200px dan tinggi nya 50px. Lalu letakan di bawah tulisan sebelumnya, kode warna yang digunakan adalah #296898.

buat button 2

21. Kemudian letakan di bawah tulisan pada image slider. Setelah itu buatlah teks Our Works dan letakkan pada button tersebut.

header finish

Untuk sementara hasilnya adalah seperti di atas. Sekian untuk bagian 1, lanjutannya akan ada di bagian 2.






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