Tutorial Membuat Layout Web Dengan Grid System

Membuat Layout Web Dengan Grid System (Versi Tablet)

Dalam pembuatan suatu website, tidak hanya dibutuhkan kemampuan mengolah web tersebut. Kita juga harus memperhatikan bagaimana cara menarik perhatian penjelajah internet. Nah untuk itu, kita perlu membuat sesuatu yang menarik dan komunikatif. Kita dapat memulainya dari segi layout web itu sendiri.

Membuat Layout Web Dengan Grid System

Lantas apakah Layout itu?

Layout memiliki arti sempit yaitu tata letak. Sedangkan secara luas layout adalah penyusunan, penataan , dan juga pemaduan dari beberapa elemen desain / unsur unsur komunikasi grafis (berupa teks, gambar, tabel , grafik, dll) sehingga dapat menjadi suatu susunan artistik. Dalam kata lain prinsip layout sama dengan management bentuk dan bidang menjadi sesuatu yang proporsional dan komunikatif. Tujuan utama layout sendiri agar memudahkan pembaca menerima informasi yang disajikan. Dalam pembuatan desain web , para designer web membutuhkan suatu acuan (patokan) sehingga dapat memudahkan proses perancangan web itu sendiri. Maka dari itu, diciptakanlah suatu teknik Grid System. Grid System digunakan sebagai perangkat untuk mempermudah menciptakan sebuah komposisi visual.

Dalam tutorial kali ini, kita akan mempelajari bagaimana penerapan grid system dalam pembuatan desain web untuk versi monitor PC. Disini saya menggunakan Adobe Photoshop CS 6 dan ekstensi “Guide Guide” Photoshop CS 6 yang dapat anda download terlebih dahulu. Mari kita pelajari tutorial berikut :

  1. Kita buka projek baru di Adobe Photoshop CS 6. Lalu kita custom width (lebar) halamannya menjadi 900 px, untuk heightnya (panjang) bisa menyesuaikan. Lalu kita ubah color modenya menjadi RGB Color. Klik OK Tutorial Membuat Layout Web Dengan Grid System
  2. Kita aktifkan Guide-Guide dengan mengklik icon ini , jika anda tidak menemukannya anda bisa mencari di windows selanjutnya extensions lalu centang guide-guide. Kita custom menjadi seperti gambar dibawah iniMembuat Layout Website Dengan Grid System
  3. Selanjutnya kita akan membuat header webnya, kita menggunakan rectangle tool . Kita juga dapat menggunakan ruler (Ctrl+R) dan tarik rulernya untuk membantu penempatannya. Usahakan persegi panjang tadi tidak melebihi margin guide-guidenya. Buat persegi panjang berwarna abu abu gelap dan putih. Membuat Layout Website Dengan Grid System
  4. Lalu anda dapat menambahkan logo dan nama web pada bagian persegi panjang putih. Kita masukkan icon sosial media pada pojok atas bagian abu abu gelap, seperti yang tampak pada gambar berikut.Membuat Layout Website Dengan Grid System
  5. Setelah itu, kita akan membuat icon button menu dengan menggunakan teks. Lalu kita tambahkan gambar pada bagian bawah menu . Anda dapat berkreasi pada gambar yang telah dimasukkan. Misalkan saja saya beri persegi panjang hitam menutupi gambar itu lalu opacitynya dikurangi. Nah gambar akan berwarna gelap seperti ini.Membuat Layout Website Dengan Grid System
  6. Selanjutnya saya menambahkan sedikit teks dengan klik icon ini atau dengan shortcut (T) di tengah gambar itu, lalu saya beri 2 garis dengan menggunakan pentool (P) pentool . Saya tambahkan gambar lingkaran di antara 2 garis tersebut. Jadinya seperti iniMembuat Layout Website Dengan Grid System
  7. Anda bisa menambahkan teks atau button lain di bagian gambar tadi. Lalu kita buat bagian lain dengan warna seperti putih. Kita akan membuat slogan atau kalimat pembuka pada web. Membuat Layout Website Dengan Grid System
  8. Kita bisa membuat beberapa menu lagi dengan background berwarna hijau. Misalkan saja kita akan membuat simulasi menu tersebut dengan menggunakan rectangle tool. Kita buat 3 persegi dengan ukuran yang sama. Lalu gambar icon/logonya dengan menggunakan elipse tool dan pentool. Ubah fillnya dan atur handlenya.Membuat Layout Website Dengan Grid System
  9. Buat bagian lain dibawah menu tersebut dengan background berwarna abu abu gelap lalu kita tambah gambar di sisi kiri lalu sisakan sedikit ruang untuk bagian deskripsi web. Anda bisa mengkreasikan gambar tersebut seperti gambar pada header tadi dengan menggunakan beberapa teks dan garis.Membuat Layout Website Dengan Grid System
  10. Selanjutnya kita buat bagian bagan web, kita beri judul di atasnya. Lalu kita tinggal menggambar bagannya seperti yang anda inginkan.Membuat Layout Website Dengan Grid System
  11. Setelah itu, buat bagian kolom komentar dengan background berwarna hijau . Tinggal tambahkan tulisan maupun sedikit hiasan seperti ini menggunakan pentool. Kita ulangi langkah ke 7 dengan warna yang berbeda misalkan dengan warna putih dan abu abu seperti ini lalu kita bisa mengisi informasi-informasi lain di dalamnya.Membuat Layout Website Dengan Grid System
  12. Langkah terakhir kita tambahkan sebuah persegi panjang untuk menempatkan copyrightnya dibagian paling bawah.
  13. Untuk menghilangkan grid guidenya kita bisa disable dengan klik icon ini pada guide guide.Membuat Layout Website Dengan Grid System Web kita sudah jadi. Sekian tutorial dari saya jika masih mengalami kesulitan silahkan menyaksikan video tutorial pada link berikut, Selamat Mencoba!
Advertisements
This entry was posted in Photoshop and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s