MENDESAIN BLOG ELEGAN DENGAN PHOTOSHOP

By Mohammad Jeprie on 16 October 2010 in Tutorial, Desain Web 33

Dalam tutorial ini, kita akan membuat desain web bergaya elegan di Photoshop. Tidak ada banyak yang
elemen digunakan di sini. Anda akan belajar banyak teknik, mulai dari membuat efek letterpress, membuat
efek 3 dimensi pada bentuk, hingga membuat garis inset.
Preview
Sebelum mulai, lihat terlebih desain web yang akan kita buat. Klik gambar untuk melihatnya pada ukuran
penuh.
Formatted: Font: (Default) Cordia
New, 14 pt

Resource Yang Dibutuhkan

Ikon Jaringan Sosial

Set Office Icons

Pola Metal dari WeGraphics
Ikon Pencil Art Brushes
Template grid 960 dari 960.gs
Langkah 1: Mempersiapkan File
Kita akan menggunakan grid standar 960. Download terlebih dahulu grid 960 dari 960.gs lalu buka template
file Photoshop. Sebelumnya perhatikan hasil akhir beserta guide di bawah. Semua elemen harus berada
dalam grid untuk mempermudah proses coding CSS.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 2
Secara default, ukuran template Photoshop terlalu sempit. Perbesar dengan perintah Canvas Size (Ctrl + Alt
+ C). Width: 400 px, Relative, Anchor: tengah.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 3: Membuat Latar Bertekstur

Buat layer baru dan isi dengan warna #cdcdcd. Buat lagi layer baru dan isi dengan putih. Klik Filter > Noise >
Add Noise, ubah blend mode ke Multiply dengan Opacity layer 50%. Langkah ini akan memberikan tekstur
pada latar. Anda bisa melihat tahapan pembuatan latar di bawah.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 4: Membuat Header

Buat sebuah persegi berwarna hitam di bagian atas halaman.

Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 5
Ambil pola metal dari WeGraphics. Di dalam file zip, tersedia file pattern Photoshop. Anda tinggal klik ganda
file itu untuk memasukkannya ke Photoshop. Beri Pattern Overlay dan pilih salah satu pola metal yang
tersedia dan ubah blend mode ke Multiply.

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 6
Buat layer baru di atas shape hitam. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask. Buat
gradasi radial dari putih hitam dan ubah blend mode ke Screen.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 7
Di paling atas, buat persegi lebih kecil untuk menyimpan daftar halaman situs. Beri Gradient Overlay. Tulis
nama-nama halaman di atasnya.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 8: Membuat Logo Situs

Ambil logo situs, saya mengambil ikon gratis dari iconfinder. Di sebelah ikon, tuliskan nama situs. Beri Drop
Shadow dan Gradient Overlay pada teks.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 9

Tulis tagline di bawah nama situs.

Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 10: Baris Kategori

Gunakan rounded rectangle untuk membuat persegi dengan radius 3 px. Beri Drop Shadow, Gradient
Overlay, dan Stroke.
Formatted: Font: (Default) Cordia
New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 11
Anda bisa melihat pengaruh layer styles di bawah.

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 12
Tulis kategori blog di atas shape. Kita tambahkan efek letterpress pada teks dengan memberi layer styles
berikut.
Formatted: Font: (Default) Cordia
New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 13
Anda bisa melihat dalam perbesaran 500%, efek letterpress sebetulnya sederhana, menambahkan bayangan
putih pada teks sehingga teks terlihat terangkat.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 14
Buat layer baru. Buat garis 1 px memisahkan kategori. Turunkan Fill layer ke 0% dan beri layer style Gradient
Overlay dengan Blend Mode Screen. Screen akan mempertahankan pixel terang dan menyembunyikan pixel
gelap.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 15
Sama seperti tadi, buat layer baru dan gambar garis 1 px. Kali ini beri Gradient Overlay dengan Blend Mode
Multiply. Ini akan mempertahankan warna gelap.
Formatted: Font: (Default) Cordia
New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 16
Simpan kedua garis tadi ke dalam group dengan memilihnya lalu tekan Ctrl + G. Gandakan group dengan
menggesernya sambil menahan Alt. Buat pemisah pada kategori yang lain.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 17
Sebagian kategori memiliki anak menu. Kita tandai dengan membuat sebuah segitiga lalu beri efek
letterpress seperti pada teks.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 18

Sebelum maju lagi. Kita lihat dulu hasil yang kita peroleh saat ini, perhatikan bahwa semua elemen berada di
dalam grid. Ini membuat desain lebih rapi dan teratur.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 19: RSS dan Jaringan Sosial

Ambil ikon jaringan sosial. Simpan ikon RSS, Facebook, dan Twitter sesuai dengan guide.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 20
Buat teks jumlah subscribers, fan, dan follower di samping ikon. Beri layer style berikut pada teks.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 21

Tambahkan tulisan Subscribers, Fans, dan Follower di samping nomor.

Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 22: Isi Blog

Buat rounded rectangle dengan radius 3 px untuk isi blog. Beri Layer Style Drop Shadow.
Formatted: Font: (Default) Cordia
New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 23
Buat judul post dan di bawahnya tambahkan sebuah persegi dengan ukuran 150 x 150 px. Beri Stroke.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 24
Beri excerpt artikel.

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 25
Di bawah teks, buat meta data artikel berisi nama penulis, tag, dan tanggal. Untuk mempercantik tambahkan
ikon di sebelahnya. Saya menggunakan ikon gratis dari Set Office Icons.
Formatted: Font: (Default) Cordia
New, 14 pt

Langkah 26
Buat sebuah rounded rectangle, beri layer style Drop Shadow, Gradient Overlay, dan Stroke untuk memberi
kesan 3D. Di atasnya beri tulisan Read More.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 27
Seleksi semua layer yang membentuk isi post dan simpan ke dalam group dengan menekan Ctrl + G. Klik
kanan group dan pilih Convert to Smart Object. Geser layer sambil menahan Alt untuk menggandakan isi
artikel.

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 28: Form Search

Buat sebuah rounded rectangle dengan radius 3 px di sidebar. Beri layer style di bawah. Tambahkan teks
penanda dan beri ikon search.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 29: Widget Sidebar

Buat lagi rounded rectangle dengan radius 3 px untuk widget lainnya. Tambahkan Drop Shadow dengan
setting sama seperti kotak isi post.

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 30
Di bagian bawah, buat sebuah persegi panjang. Beri sedikit Gradient Overlay dengan Opacity: 6-9%. Bisa
Anda lihat di bawah perbedaannya sangat tipis (subtle) tapi cukup eye-catching. Ingat bahwa gradient yang
terlalu berlebihan tidak bagus pada desain.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Langkah 31
Terakhir, tuliskan informasi copyright dan nama desainer pada footer. Beri efek letterpress dengan memberi
layer style Drop Shadow.

Formatted: Font: (Default) Cordia

New, 14 pt

Formatted: Font: (Default) Cordia

New, 14 pt

Hasil Akhir
Inilah hasil akhir desain web yang kita peroleh. Perhatikan bahwa kita menggunakan banyak efek yang
sangat minim di sini, seperti bayangan 1 px, gradasi minim, dan efek letterpress. Kesederhanaan inilah yang
membuat desain terlihat elegan. Klik di sini atau klik pada gambar untuk melihat hasil akhir di ukuran lebih
besar.

Formatted: Font: (Default) Cordia

New, 14 pt

Langsung saja kita praktek untuk membuat template blogspot dengan photoshop. Kita bekerja
dulu di bagian homepage agar lebih mudah.

1. Siapkan photoshop masing masing dan agar lebih mudah anda juga mengoprek
template tersebut. Namun kalau pingin template lain juga silahkan.
2. Setelah terbuka capture utuh tampilan template tersebut.
3. Untuk di photoshop harus di tampilkan rulers dalam pixel gar lebih mudah. (CTRL
+R ) trus klik kanan bagian rulers pilih pixels. ( Poin 1 )
4. Perhatikan image yang kita dapatkan. Yang sama atau perulangan di hapus saja. (
Poin 2 )
5. Setelah jadi, perhatikan kembali, pada rulers. tentukan poin x= 0 , y = 0 nya dengan
menarik bagian pojok rulers. ( Poin 3 ) Hal ini di gunakan untuk area kerja kita.
6. Setelah benar menentukan x=0, y=0 berlanjut menentukan section yang akan kita
kerjakan. Saya perhatikan disini nanti ada 4 section, saya menentukan section nanti
terdiri dari
1. header ( Poin 4 )
2. content ( Poin 5 )
3. sidebar ( Poin 6 )
4. footer ( Poin 7 )

Kita bisa bekerja langsung ke codingnya. Tapi untuk mempermudahnya kita buat dulu
containernya bisa seluruh atau sebagian saja. Dalam hal ini saya berfikir untuk membuat
seperti struktur manusia. Jadi nanti content akan di gabung dengan sidebar. Strukturnya
menjadi
1. <div id='body-wrapper'>
2. <header>
3. <!-- section header -- >
4. </heade>
5. <div id='content-wrapper'>
6. <article>
7. <!-- section content -- >
8. </article>
9. <aside>
10. <!-- section sidebar-- >
11. </aside>
12. <div class='clear'/>
13. </div>
14. <footer>
15. <!-- section footer -- >
16. </footer>

17. <div class='clear'/>

18. </div>
Coba kita lihat di code yang akan kita buat. Struktur ini dalam body html karena memang kita
bekerjanya disini dahalu. Terlihat ada beberapa tag yang mungkin sebelumnya belum di
singgung yaitu tag div dengan class clear. Disini nanti tag tersebut buat di gunakan untuk
menyeimbangkan apabila terdapat float yang tidak terkendli. Daripada pusing kita pasang
saja tag itu.
Sudah bisa membayangkan bagaimana kita akan bermain nanti. Yang pasti siapkan mental
untuk belajar, karena ini baru sebatas pendahuluan saja :D untuk melanjutkan artikel
terdahulu saya dalam membuat template blogger