Rabu, 22 Januari 2014

Mendesain Blog Minimalis dengan Grid 960 Bagian 2

Step 11

Di bawah ikon Twitter, tambahkan navigasi halaman. Perhatikan bahwa penempatan elemen-elemen ini, teks tweet dan navigasi halaman, harus tetap mengikuti kolom.
Mendesain Blog Minimalis dengan Grid 960

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%.
Mendesain Blog Minimalis dengan Grid 960

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.
Mendesain Blog Minimalis dengan Grid 960

Step 14

Gandakan inset line dan simpan di bawah garis pertama.
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 15

Tuliskan nama-nama kategori artikel untuk navigasi.
Mendesain Blog Minimalis dengan Grid 960

Step 16

Buat lagi garis-garis inset tipis memisahkan setiap kategori.
Mendesain Blog Minimalis dengan Grid 960

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.
Mendesain Blog Minimalis dengan Grid 960

Step 18

Buat shape persegi dengan ukuran tepat 8 kolom. Isi artikel akan berada di kotak ini.
Mendesain Blog Minimalis dengan Grid 960

Step 19

Tambahkan layer style Drop Shadow.
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

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.
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Tidak ada komentar:

Posting Komentar