Herman Shofyan

Mendesain Blog Minimalis dengan Grid 960

Tutorial kali ini berdasarkan pada projek redesain situs DesainDigital. Kita akan menggunakan Photoshop untuk membuat desain situs minimalis dengan berbasiskan pada grid 960.gs. Kita akan memberikan cukup perhatian pada detail-detail kecil. Kita juga akan menjaga kesinambungan desain dengan mempertahankan gaya setiap elemen agar tampilannya tetap terasa menyatu.

Preview

Sebelum memulai tutorial ini, lihat desain situs yang akan kita peroleh di bawah.

Step 1

Untuk layout situs ini, kita menggunakan grid 960. Jadi, mulai dengan mengambil file layout yang tersedia di 960.gs. Di dalam file zip, buka file PSD di Photoshop. Dalam file telah tersedia beberapa guide dan group layer 12 Col Guide yang semuanya membentuk kolom-kolom. Inti dalam penggunaan guide adalah semua elemen harus berada dalam guide. Anda bisa membandingkannya dengan hasil desain yang kita peroleh di bawah. Semua elemen seperti kotak posting, logo, atau tweet semuanya berada dalam kolom.

Step 2

Isi Background dengan warna latar. Caranya dengan klik Edit > Fill dan pilih Color. Saya menggunakan #e9e6e1 di sini.

Step 3

Untuk bagian atas kita akan memberi ornamen unik. Mulai dengan membuat shape persegi di bagian paling atas. Gunakan warna #e9e4db. Di bawahnya, tambahkan path berbentuk lingkaran. Seleksi path lingkaran, tekan Ctrl + Alt + T untuk menduplikasinya. Geser beberapa pixel ke kanan dengan menekan tombol panah kanan. Ulangi proses transformasi dengan menekan Ctrl + Shift + Alt + T.

Step 4

Tambahkan layer style Drop Shadow.

Step 5

Sekarang kita akan menambahkan sedikit tekstur ke dalam shape. Buat layer baru di atas layer shape. Isi dengan putih. Klik Edit > Add Noise. Jangan gunakan terlalu banyak noise, cukup hingga terlihat ada titik-titik saja. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask. Ubah blend mode ke Multiply dan turunkan oapcity layer ke 70%.

Step 6

Tambahkan logo. Agar terlihat menonjol dibandingkan latarnya, kita tambahkan layer style Stroke pada logo.

Step 7

Buat seleksi ellipse di bawah logo. Isi dengan hitam dan haluskan dengan Gaussian Blur untuk memberi kesan bayangan pada logo.

Step 8

Di sisi kanan, buat sebuah shape rounded rectangle putih. Gambar juga path menggunakan tool pen untuk memberi tampilan bubble speech. Pastikan Anda memilih Add to Shape untuk menggabungkan kedua path.

Step 9

Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Ketiga styles ini memberi kesan emboss, seolah-olah latar menjorok ke dalam. Beri tulisan tweet terakhir.

Step 10

Masuk ke iconfinder dan cari ikon Twitter. Simpan ikon di bawah kotak tweet.

Step 11

Di bawah ikon Twitter, tambahkan navigasi halaman. Perhatikan bahwa penempatan elemen-elemen ini, teks tweet dan navigasi halaman, harus tetap mengikuti kolom.

Step 12

Sekarang kita akan membuat inset line. Cara membuatnya mudah saja, buat dua garis 1px berwarna hitam dan putih menggunakan tool pencil. Setiap garis berada di layer terpisah. Ubah opacity layer garis hitam menjadi 10% dan garis putih menjadi 50%.

Step 13

Dengan tool eraser lembut hapus kedua sisi garis hingga keduanya tepat berada di dalam kolom. Ini memberikan efek fading yang menarik di kedua sisi garis.

Step 14

Gandakan inset line dan simpan di bawah garis pertama.

Step 15

Tuliskan nama-nama kategori artikel untuk navigasi.

Step 16

Buat lagi garis-garis inset tipis memisahkan setiap kategori.

Step 17

Di sisi kanan, buat sebuah rounded rectangle putih. Di atasnya tambahkan tulisan Search… dengan warna abu-abu terang. Kita memilih warna ini agar tidak terlalu kontras karena bisa mengganggu fokus pada teks lainnya.

Step 18

Buat shape persegi dengan ukuran tepat 8 kolom. Isi artikel akan berada di kotak ini.

Step 19

Tambahkan layer style Drop Shadow.

Step 20

Kita tidak akan menggunakan drop shadow biasa, karena itu terlihat sangat jelek. Jika kita gunakan gunakan di sini, hasilnya akan sangat tidak unik. Kita akan memodifikasi bayangan ini.

Klik kanan daftar layer style di panel Layers dan pilih Create Layer. Langkah ini akan memisahkan bayangan ke dalam layernya sendiri. Tekan Ctrl + T lalu perkecil bayangan, klik kanan dan pilih Warp. Geser kotak di kanan bawah hingga kita peroleh sedikit bayangan yang keluar. Turunkan opacity bayangan ke 15%.

Bayangan seperti ini memberi efek seolah kotak mengelupas keluar dari latar. Unik dan tentunya jauh lebih baik dari Drop Shadow standard.

Step 20

Tambahkan layer style stroke 1px. Walaupun kecil, hanya 1px, ini cukup membantu untuk meningkatkan kontras antara kotak dengan latar.

Step 22

Tambahkan thumbnail artikel dengan ukuran 200×200 px ke dalam kotak. Pastikan Anda memberikan cukup banyak jarak ke sisi kiri dan kanan kotak. Jarak ini mempermudah mata ketika menscan gambar. Tambahkan juga efek Stroke 1px. Gunakan setting yang sama dengan stroke pada kotak artikel. Dengan efek yang sama, kita mempertahankan kesinambungan desain. Jika berbeda, misal warnanya beda atau ukurannya beda, ini berpotensi membingungkan pembaca.

Step 23

Sekarang kita tambahkan juga teks, seperti judul, isi artikel, data penulis, tanggal, dst. Saya tekankan lagi bahwa kita perlu mempertahankan kesinambungan desain. Usahakan agar semua link menggunakan warna yang sama.

Bersama dengan border 1 px pada kotak dan thumbnail, ini menghasilkan kesinambungan desain.

Step 24

Kumpulkan semua layer isi artikel ke dalam sebuah group layer. Ini akan mempermudah ketika kita ingin membuat post lain. Kita tinggal menggandakan group layer tersebut dan mengganti isinya.

Step 25

Buat juga kotak navigasi halaman di bagian akhir artikel. Untuk menjaga kesinambungan desain, gunakan style Stroke 1px yang sama.

Step 26: Sidebar

Buat kotak sidebar dengan ukuran tepat 4 kolom. Jaga kesinambungan desain dengan tetap menggunakan Stroke 1px. Warna teks biasa dan link harus disamakan juga dengan warna-warna yang sudah ada. Seperti saya katakan, ini akan menjaga kesinambungan desain.

Step 27: Footer

Untuk footer, kita tinggal menggandakan shape yang telah dibuat di Step 3. Putar 180 derajat dan perbesar shape rectangle hingga memenuhi seluruh area footer.

Step 28: Box Footer

Buat kotak footer dengan ukuran 4 kolom. Isi dengan judul kotak dan tulisan. Pastikan menggunakan warna teks yang sama.

Step 29: About Us

Saya ingin menonjolkan kotak About Us dengan menambahkan gambar profil saya. Tambahkan foto dan di sebelahnya tambahkan teks This is me dengan font Jellyka Hand Writing. Tulisan ini dipilih untuk memberi kesan personal.

Step 30

Aktifkan warp teks dan pilih Style Arc. Ini akan membuat teks sedikit melengkung dan memberi kesan alami.

Step 31

Tambahkan style Drop Shadow pada gambar profil. Seperti tadi, kita tidak ingin menggunakan drop shadow standar karena sangar buruk. Klik kanan style dan pilih Create Layer. Lakukan proses transformasi warp hingga sebagian bayangan mencuat ke bawah.

Hasil Akhir

Sampai sini, proses desain situs di Photoshop telah selesai. Langkah berikutnya adalah mengubah desain ke format yang ingin diinginkan, bisa berupa HTML dan CSS, atau dalam bentuk theme wordpress. Jika proses coding dilakukan pihak lain, pastikan untuk merapikan setiap layer terlebih dahulu. Namai setiap layer, kelompokkan ke dalam group layer, dan tambahkan data-data lain yang diperlukan.

Saya harap Kita dapat belajar banyak dari tutorial ini.