Tutorial Membuat Grid System di Photoshop

Tutorial Membuat Grid System di Photoshop
Salah satu faktor web design bisa di bilang bagus adalah kerapian, kita percaya ini dulu. Dan untuk memudahkan kamu merapikan desain adalah garis pemandu atau biasa di sebut grid, dalam desain website sendiri, grid dibagi menjadi beberapa macam, seperti :
  • 960 Grid System
  • Boostrap Grid
  • Golden Grid
  • Dan masih banyak grid-grid lain
Seperti yang sudah saya katakan di atas grid di gunakan untuk memudahkan membuat layout, merapikan layout dll. Dan pada tulisan ini kita akan membuat 1170 px grid sistem :

Hasil Akhir

[caption id="" align="aligncenter" width="650"]Hasil Akhir Membuat Grid System Sendiri Hasil Akhir Membuat Grid System Sendiri[/caption]

Resource

Detail Tutorial

  • Software : Adobe Photoshop CS6
  • Teknik yang di pelajari : Instalasi Plugins, Menggunakan plugin guide-guide, Menggunakan Ragtagle marque tool
  • Lama Pengerjaan : 10-20 Menit

Tutorial

Karena kita akan menggunakan plugin guide-guide maka sebaiknya kamu download dulu di situs resminya di Guideguide.me, download sesuai versi photoshop yang kamu pakai, kalau yang pakai di bawah cs4 tidak bisa ya :D

Step 1 : Install Plugin Guide Guide

Buat yang kurang tau cara downloadnya, sekalian saya berikan tutorial-nya :
  • Kunjungi Guideguide.me
  • Download Sesuai dengan versi Photoshop yang di pakai
  • Kalau udah selesai download-nya, buka file hasil download-an tadi untuk menginstal [caption id="" align="aligncenter" width="400"]File Download Guideguide File Download Guideguide[/caption]
  • Setujui perjanjian dengan menekan 'accept', dan tunggu sampai proses installasi selesai [caption id="" align="aligncenter" width="400"]Perjanjian Installasi Guideguide Perjanjian Installasi Guideguide[/caption] [caption id="" align="aligncenter" width="400"]Proses Install Guideguide Proses Install[/caption]
  • Kalau sudah selesai akan tampil seperti gambar di bawah [caption id="" align="aligncenter" width="400"]Install Sukses Install Sukses[/caption]  

Step 2 : Membuat Dokumen Baru

Buka photoshop kamu lalu buat dokumen baru dengan ukuran 1300 x 1000 px, ukuran boleh sesuka kamu asal lebar lebih dari 1170px. [caption id="" align="aligncenter" width="590"]Membuat Dokumen Baru Membuat Dokumen Baru[/caption]

Step 3 : Membuat Grid menggunakan Guideguide

Buka plugin Guideguide yang udah di install tadi, caranya Window -> Extensions -> GuideGuide, kemudian atur jumlah kolom, lebar kolom dan gutter(jarak antar kolom), pada tutorial ini saya membuat 12 kolom dengan lebar 70px dan gutter 30px. Setelah mengatur, untuk membuat grid tinggal tekan Make Grid atau langsung Enter dan secara otomatis akan tampil grid sesuai yang kamu atur tadi. [caption id="" align="aligncenter" width="640"]Membuka Guideguide di Photoshop Membuka Guideguide di Photoshop[/caption] [caption id="" align="aligncenter" width="312"]Tampilan Plugin Guideguide Tampilan Plugin Guideguide[/caption] [caption id="" align="aligncenter" width="640"]Grid Grid[/caption]

Step 4 : Mewarnai Kolom

Untuk mewarnai setiap kolom yang sudah dibuat, kita seleksi dulu kolom kolom tadi menggunakan Rectangular Marquee Tool(M), tool ada di sebelah kiri atau bisa juga menekan 'M' pada keyboard. [caption id="" align="aligncenter" width="414"]Mengaktifkan Rectangular Marquee Tool Mengaktifkan Rectangular Marquee Tool[/caption] Selesksi semua kolom yang berjumlah 12, caranya klik dan drag meggunakan mouse, untuk menambah seleski bisa dengan menekan Shift pada keyboard. [caption id="" align="aligncenter" width="640"]Menyeleksi kolom satu persatu Menyeleksi kolom satu persatu[/caption] [caption id="" align="aligncenter" width="640"]Seleksi Semua Kolom Seleksi Semua Kolom[/caption] setelah semua terseleksi, kita akan mewarnai kolom dengan warna merah, pertama kamu buat layer baru dan beri nama '1170-Grid-System'. [caption id="" align="aligncenter" width="274"]Membuat Layer Baru Membuat Layer Baru[/caption] Pilih warna merah atau sesuka kamu dan aktifkan 'Paint Bucket Tool (G)', pada posisi layer yang kita buat tadi di pilih, klik pada kolom yang terseleksi dan kolom akan berubah warna menjadi merah [caption id="" align="aligncenter" width="239"]Mengaktifkan Paint Bucket Tool Mengaktifkan Paint Bucket Tool[/caption] [caption id="" align="aligncenter" width="640"]Kolom yang sudah di warnai Kolom yang sudah di warnai[/caption]

Step 5 (Akhir) : Mengatur Opacity Menjadi 10%

Langkah yang terakhir adalah mengatur opacity menjdai 10%, tujuannya untuk memudahkan kita saat membuat layout nantiya. [caption id="" align="aligncenter" width="274"]Mengubah Opacity Layer 1170-Grid-System Mengubah Opacity Layer 1170-Grid-System[/caption] [caption id="" align="aligncenter" width="640"]Gambar Setelah Menurunkan Opacity Gambar Setelah Menurunkan Opacity[/caption]

Hasil Tutorial

Berikut hasil tutorial yang kita dapat, kalau kamu termasuk orang yang suka hasil instan bisa langsung download hasilnya. [caption id="" align="aligncenter" width="640"]Hasil Akhir dari Tutorial Hasil Akhir dari Tutorial[/caption]

Kesimpulan

Dengan menggunakan grid, layout yang kita buat nantinya akan menjadi lebih rapi, di bandingkan dengan layout yang tidak menggunakan grid, grid juga akan memudahkan kamu saat proses peng-kodingan dalam membuat web desain. Selamat mencoba, Semoga bisa bermanfaat. Apabila ada pertanyaan atau kesulitan mengikuti tutorial di atas, bisa kamu tanyakan di kolom komentar.

Tips Belajar Desain Grafis Otodidak

Tips Belajar Desain Grafis Otodidak
Saat ini banyak sekali orang-orang awam yang mencoba belajar desain,  dia datang dari berbabai latar belakang, ya, karena belajar desain itu  sangat menyenangkan, tapi tidak sedikit pula yang kesulitan untuk  memulai(termasuk saya). Dari pengalaman saya untuk memulai belajar secara otodidak sebenarnya tidaklah sulit asalkan kita punya niat dari diri sendiri. Nah, pada tulisan kali ini saya akan membagikan tips kepada anda yang masih kesulitan untuk memulai belajar desain grafis.

7 Tips Belajar Desain Grafis Otodidak

1. Kuatkan Niat

Ini menjadi hal yang wajib saat belajar dibidang apapun, dengan niat yang kuat tentunya akan lebih memudahkan kamu saat belajar.

2. Mulai dari yang kamu suka

Saat  kamu ingin belajar desain grafis, pasti ada alasannya, apakah kamu suka  setelah melihat karya orang lain? atau karena dorongan dari orang lain?
Dari berbagai alasan saya harap kamu bukan di posisi yang kedua, Kamu  pastinya tau kan ya, banyak jenis-jenis karya desain yang ada sekarang,  kamu harus cari tau dulu apa yang kamu suka? apakah desain web? vector  portrait? logo? atau yang lain?.

3. Contek Desainer Lain

Setelah  tau apa yang kamu suka, mulailah dengan "Mencontek" orang lain,  mencotek disini bukan mencontek karyanya ya, tapi tirulah gaya mereka  membuat karya.
Sebagai contoh bapak Wedha Abdul Rosyid, Beliau  membuat karya yang beliau sebut 'WPAP (Wedha Pop Art Portait)' yang  sampai saat ini banyak di gemari desainer muda (saya juga masih muda).  Kamu bisa mencontek cara Pak Wedha membuat WPAP bukan berarti menggangap  sebagai penemu WPAP.

4. Mulai Dengan Satu Software

Ini  menjadi masalah terbesar saya saat memulai belajar, karena saya  termasuk orang yang sedikit sombong, saat itu saya langsung belajar 3  software (AI, Photoshop dan CorelDraw) dan hasilnya Nol besar, saya  malah jadi kebingungan ketika mencoba membuat vector potrait pertama  saya.
Dari pengalaman saya tersebut, bisa kita pahami bahwa belajar dengan satu software akan lebih efektif.

5. Ikuti Forum atau Grup

Hal  yang juga tidak kalah penting adalah komunitas, dengan bergabung dengan  grup yang mempunyai minat sama, akan lebih meningkatkan semangat kamu  saat belajar dan tentunya memudahkan kamu ketika terjebak dalam  masalah.Dari forum juga, kamu bisa mendapatkan cerita-cerita pengalaman  para senior yang menurut saya sangat berharga dan pantas untuk di  pelajari.

6. Nikmati Proses Belajar

Banyak  orang yang suka dengan hal bersifat instan, pengennya cepet bisa, cepet  jadi master. Menurut saya ini penyakit yang harus di hilangkan saat  kamu memilih menjadi desainer grafis.
Ilmu desain itu terus  berkembang, bukan ilmu pasti seperti matematika yang 3 + 7 hasilnya  sembilan, dalam desain grafis setiap tahun pasti ada gaya baru seperti  yang kita tau saat ini gaya Flat sangat populer, padahal dulu belum ada.
Maka dari itu kamu nikmati dulu proses belajar kamu sampai kamu benar-benar bisa, baru mencoba gaya yang lain.

7. Berdo'a

Rasanya aneh kalau kita sudah berusaha semaksimal mungkin, tapi merasa seperi jalan di tempat atau cepat lupa. Mungkin kamu jauh dari Allah, Sehingga Allah tidak ridho kamu belajar terlalu serius namun lupa sama Allah.
Sambil belajar jangan lupa berdo'a, jadilah designer yang bisa mewarnai akhiratnya.
Mungkin  itu yang bisa saya bagi tentang tips belajar desain grafis secara  otodidak, tips di atas bukan ilmu pasti karena kita semua tau, satu  orang bisa menuju masjid hanya dengan 10 langkah tapi orang lain butuh  ratusan langkah untuk sampai di masjid yang sama. Intinya terus  berusaha, berdo'a dan jangan malu bertanya.

Kesimpulan

Dengan  memulai dengan gaya desain yang kamu suka, kamu bisa lebih mudah  belajar karena kamu sudah punya tujuan apa yang ingin kamu buat, jangan  sampai berhenti kalau belum bisa, kunci dari desainer hebat adalah  selalu mengupgrade ilmu, terus belajar dengan niat yang kuat. Mungkin  tulisan saya terlalu banyak omong kosong, semoga kamu bisa mengambil  sedikit ilmu diatas, kamu punya cara lain saat belajar desain grafis?  silahkan tulis di komentar, semoga bisa jadi desainer hebat ya :D

Best 12 Free Fonts from FontBundles


Font gratis rasa premium, emang pantas di ucapin buat font font yang akan saya bagi kali ini, font-font gratis ini bisa kamu download di FontBundles sebagai situs marketplace khusus font.

Oke langsung aja

1. Sandy Lite


2. Naila Script Lite

3. Fanatic Lite

4. LaSpacino Lite


5. Qeyla Lite


6. Sweety Donut


7. ShellaHera Script


8. BlowBrush


9. Cavorting


10. Ludicrous


11. Sprightly


12. Mochafloat Script


Nah itu dia font font keren yang bisa kamu download secara gratis.