Siapa yang sudah pernah bikin website sebelumya ? perlu dummy atau mock up kah sebelum dibuat websitenya ? pasti semua itu di awal dibuatkan dummy atau mock up untuk acc layoutnya. Jika mock up yang sudah kita buat di acc baru lah kita buat yang sesungguhnya dengan menggunakan coding. Kenapa seperti itu ? karena untuk memperhemat dan mengefisiensi waktu kerja. Jika sebelumnya sudah ada dummy maka kerja kita akan lebih jelas kearah mana desain yang mau kita buat. Untuk lebih lengkapnya akan kita bahas di tutorial Cara Membuat Mock Up Layout Website Di Illustrator. Penasaran seperti apa caranya ? ikuti terus tutorialnya sampai selesai.

Karena layout ini diperuntukan tampilan website, maka satuan ukuran yang akan kita gunakan adalah pixel. Agar tidak bingung langsung aja kita praktikan. Buka adobe illustratornya di komputer atau di laptop, ikuti langkah-langkah cara Cara Membuat Mock Up Layout Website Di Illustrator dibawah ini secara berurutan :

1.Buat lembar kerja baru ukuran 1080 x 720 px. Caranya klik menu file > new > muncul jendela new document > isi kolom width = 1080 dan height = 720 dengan satuan pixel > ok.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-1.png


2. Buat sebuah kotak keliling menggunakan rectangle tool seukuran lembar kerja 1080 X 720 pixel kemudian diletakan ditengah-tengah lembar kerja.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-2.png

3. Sekarang kotak besar tersebut akan kita bagi menjadi 4 baris yang terdiri dari header, menu, isi and footer. Caranya adalah buat sebuah garis horizontal menggunakan pen tool > kemudian posisikan garis-garis tersebut dengan jarak yang dibutuhkan. Disini kita membuat 3 buah garis lurus.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-3.png

4. Seleksi 3 garis tersebut dan kotak besarnya > menu window > pathfinder > klik icon divide > ungroup. Maka kotak besar tersebut akan terpotong menjadi 3 bagian.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-4.png

5. Untuk membedakan bagian tersebut > beri warna fill yang berbeda dan beri nama header, menu, isi and footer pada masing-masing bagian potongan tersebut.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-5.png

6. Untuk buat sidebar kanan dan kirinya adalah buat 2 buah garis lurus vertical dan letakan disisi samping kanan dan kiri bagian isi.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-6.png

7. Seleksi kedua garis vertikal dan kotak (abu-abu) isi > menu pathfinder > klik icon divide > ungroup. Maka sekarang kotak tersebut akan terbagi menjadi 3 kolom. Beri warna yang berbeda pada potongan kiri dan kanan kemudian beri nama sidebar kiri dan sidebar kanan.

http://kursusdesaingrafis.com/wp-content/uploads/2019/01/Cara-Membuat-Mock-Up-Layout-Website-Di-Illustrator-7.png

Demikian teman-teman tips and trik dari saya tentang Cara Membuat Mock Up Layout Website Di Illustrator. Teman-teman juga bisa explorer lagi jauh lebih dalam lagi contoh diatas hanyalah contoh sederhana saja. Mudah – mudahan bisa bermanfaat, sampai ketemu ditutorial selanjutnya dengan pembahasan materi yang menarik. Terimakasih …