Tutorial Desain Web Menggunakan Corel Draw X7

Tutorial Desain Web Menggunakan Corel Draw X7

TipsIM.com - Tutorial desain web. Ketemu lagi dengan saya sob. Di postingan kali ini, saya akan mencoba membuat astikel tentang tutorial atau panduan bagaimana cara mendesain web menggunakan Corel Draw.

Kebetulan di mata kuliah saya sekarang ada tugas membuat desain web, dengan pilihan ingin menggunakan photoshop atau corel draw, namun saya memilih corel draw karena menurut saya lebih mudah. hehe

Lalu kenapa saya memilih corel draw x7? Ini karena di laptop saya hanya tersedia corel draw x7. Dan versi x7 ini juga memiliki fitur yang lebih lengkap dari versi sebelumnya.

Oke, itu sedikit basa-basi sekaligus curhatan singkat saya sebagai pembuka postingan ini sob. hehe..

Nah, sebelum membuat desainnya, anda harus paham dulu mengenai bagian-bagian dari website sob. Untuk mempelajari tentang bagian-bagian dari website, anda bisa membuka poastingan saya tentang Panduan Lengkap Merancang Website. Di postingan itu saya sudah menjelaskan lebih lengkap mengenai bagian-bagian website atau bagian layoutnya.

Setelah anda paham bagian dasar dari website, sekarang saatnya anda mulai mendesain. Namun sebelumnya saya akan memberikan gambaran mengenai desain web saya kali ini. Desainnya cukup simpel dan mudah untuk dibuat. Saya membuat desain web untuk tampilan home atau beranda atau tampilan awal atau depan.

Berikut ini gambar desain web simpel dari saya beserta penamaan setiap bagian-bagiannya. Bagian inilah yang nantinya akan kita buat satu per satu.

Oke, langsung saja kita mulai mendesain webnya sob.

1. Silahkan buka Software Corel Draw X7 nya. Jika belum punya, bisa mendownload di internet. Atau anda bisa menggunakan versi lainnya yang ada di laptop anda.

2. Buat lembar baru dengan mengeklik creat new atau Ctrl+N.

Silahkan sesuaikan pengaturan kanvasnya sesuai pada gambar di bawah ini sob. Atau anda bisa mengaturnya sesuai keinginan anda.

 

3. Setelah muncul lembar kanvas barunya, silahkan buat frame dasar, (dalam layout web biasa disebut dengan Outer Wrapper). Anda bisa membuat frame dasar tersebut dengan menggunakan rectangle tool dan sesuaikan dengan panjang dan lebar kanvasnya.. Untuk warnanya terserah anda sob, namun di sini saya menggunakan warna abu-abu atau grey. 

4. Kemudian, buatlah headernya sob. Setelah header lalu buat judul web dan juga menu-menunya. Gunakan rectangle tool untuk membuat kotak headernya, dan gunakan text tool untuk tulisan judul dan menunya.

Untuk posisi desain web milik saya ini, saya sengaja men-sejajar-kan antara judul web dengan menu-menunya agar terlihat lebih simpel. Lihat gambar di bawah ini.

5. Buatlah tempat konten atau artikelnya. 

Keterangan:

1. Buatlah kotak frame untuk tempat postingannya (gambaran di atas tampilan home). 
2. Pasangkan foto terserah anda.
3. Beri judul postingan. 
4. Isi dari konten atau artikel atau postingan.

6. Setelah itu, buatlah tempat widgetnya sob. Widget yang pertama dalam desain saya adalah kolom pencarian atau search. Silahkan lihat gambar di bawah ini.

Untuk pembuatan kotak searchnya bisa menggunakan rectangle tool, dan tombol atau button search bisa menggunakan ellips tool. Untuk lebih jelas pembuatannya lihat gambar gif berikut ini.

7. Kemudian, buatlah widget subscribe seperti pada gambar di bawah ini.

Untuk membuatnya, anda bisa menggunakan rectangle tool, lalu beri tulisan dengan menggunakan text tool. Silahkan lihat gambar gif di bawah ini.

8. Lalu buatlah tempat widget popular post atau artikel populer dan footer dengan menggunakan rectangle tool. Seperti pada gambar di bawah ini.

Selesai sob. 

Kurang lebihnya seperti itu langkah-langkah membuat desain web menggunakan corel draw x7. Ingat sob, tutorial ini hanya sekedar membuat konsep gambaran desainnya saja, belum masuk pada penerapannya menggunakan software Dreamweaver atau software sejenisnya.

Semoga tutorial mendesain web dengan corel draw ini bisa bermanfaat. Terimakasih telah berkunjung dan membaca sob. Selamat mencoba.

Baca juga Panduan lengkap merancang website