Pada bagian ke 2 ini kita akan menyelesaikan 3 elemen dari BlogFolio tersebut, yaitu “posting terbaru” , “shelf portfolio” dan “footer”.
Bagi yang baru mengikuti tutorial ini, silakan lihat bagian 1 terlebih dulu. Ok, mari kita lanjut! 
Langkah 9
Kita masuk ke “posting terbaru”. Buat area konten dengan menggunakan Rounded Rectangular Tool, atur roundness nya menjadi 2 pixel.
Langkah 10
Selanjutnya kita membuat icon tipe posting, untuk stock icon nya silakan gunakan Free Tool Bar icons dari Gentleface (gratis untuk kepentingan personal). Buat lingkaran dengan menggunakan Ellipse Tool, tetapi rubah settingnya menjadi “Paths” sehingga tidak langsung terisi warna. Setelah itu Klik Kanan dan pilih Stroke Path.* sebelum memilih Stroke Path, ubah dulu jenis Brush yang akan kita gunakan untuk lingkaran ini.
Langkah 11
Tempatkan icon pencil yang sudah di unduh tadi ke dalam lingkaran. Dan setelah itu samakan warnanya antara lingkaran dan icon pencil dengan menggunakan Layer Styles > Color Overlay.
Atur besar icon dengan menggunakan Transform Tool (Ctrl + T) dan tempatkan di kiri atas area konten.
Berikan efek grunge pada icon dengan menggunakan Layer Masking. Caranya persis sama saat kita membuat garis grunge di navigasi utama.
Langkah 12
Ketik juduli posting, info dan paragraf deskripsi. Gunakan Bebas Neue untuk judul post, Arial untuk info dan Georgia untuk paragraf. Atur layoutnya hingga menjadi seperti gambar di bawah ini,
Langkah 13
Buat frame foto (post image frame) dengan menggunakan Rounded Rectangular Tool dan letakkan di sebelah kiri paragraf.
Buat lagi persegi dengan menggunakan Rectangular Tool, kali ini untuk tempat menaruh foto (post image). Saya merubah warna frame foto menjadi agak kekuningan dan memberikan sedikit efek Drop Shadow.
Langkah 14
Kita akan membuat kesan foto yang berkilap dengan menggunakan Pen Tool. Gambar segitiga berwarna putih di atas area foto.
Selagi shape segitiga yang baru kita buat itu terseleksi, tekan icon masking pada window layers (sama dengan metode masking). Setelah itu gunakan Gradient Tool berwarna hitam putih, dan drag dari atas ke bawah sehingga ada bagian yang hilang secara halus.
Hasilnya akan terlihat seperti gambar di bawah ini. Saya sudah menambahkan foto juga.
Langkah 15
Gunakan Pencil Tool (B) berwarna biru sebesar 1 pixel untuk membuat garis. Duplikasi dan posisikan sehingga berada di antara baris paragraf.
Hide dulu sementara foto beserta frame yang telah kita buat tadi. Dan lanjutkan dengan garis merah vertikal.
Langkah 16
Buat efek ujung pita pada konten area dengan menggunakan Polygon Tool 3 sisi. Caranya sama saat kita membuat status aktif pada navigasi utama.
Hasilnya akan terlihat seperti gambar di bawah ini,
Langkah 17
Kita akan membuat link “Read More” dengan garis seperti efek coretan tangan. Ketik “Read More”, letakkan di kanan bawah. Gunakan Splatter Brush berukuran kecil (4-6 point) dan coret brushnya (cara ini memang agak sedikit manual
).
Langkah 18
Supaya tidak polos, kita akan menambahkan tekstur pada area konten. Unduh gambar kertas dari Flickr dan masukkan kedalam dokumen. Atur Brightness/Contrast dan Hue/Saturation kertas tersebut.
Setelah itu Clipping Mask tekstur kertas ke dalam area konten dan berikan efek Noise.
Supaya grafik ini bisa di coding, maka kita hanya akan menggunakan bagian atas saja dari tekstur. Dengan begitu tidak akan ada masalah nanti jika kontennya (area text) menjadi panjang ke bawah. Gunakan Layer Masking dan Gradient Tool.
Hasil sementara akan terlihat seperti di bawah ini, saya merubah warna judul posting menjadi merah pastel agar terlihat lebih menonjol di banding elemen lain.
Langkah 19
Selanjutnya kita membuat shelf/rak untuk portfolio terbaru. Gunakan Rounded Rectangle Tool dengan roundness 2 pixel.
Berikan Layer Styles Inner Shadow dan Gradient Overlay dengan setting seperti gambar di bawah,
Hasilnya akan seperti di bawah ini,
Langkah 20
Gunakan Pen Tool untuk membuat efek 3d (dudukan rak). Nyalakan guide supaya ujungnya pas dan gunakan warna yang lebih gelap dari shelf yang pertama.
Berikan Layer Styles Gradient Overlay pada dudukan rak tersebut.
Hasilnya akan seperti gambar di bawah ini,
Langkah 21
Supaya lebih realistis, kita akan memberikan bayangan dan sedikit cahaya pada shelf ini. Caranya sangat mudah, hanya dengan Soft Brush dan Transform Tool untuk mengatur posisi dan besarnya. Atur juga Opacity layer brush tersebut supaya tidak terlalu ‘keras’.
Langkah 22
Untuk area thumbnail portfolio kita menggunakan Rectangle Tool.
Supaya thumbnail ini tidak terlalu polos nantinya, kita akan menggunakan efek Inner Shadow sebesar 1 pixel dan Gradient Overlay.
Langkah 23
Berikan efek bayangan thumbnail dengan menggunakan Soft Brush. Saya tidak menggunakan Layer Styles Drop Shadow karena kebutuhannya tidak cocok, kalau di paksakan maka bayangannya tidak akan terlihat natural.
Hasilnya akan terlihat seperti di bawah ini,
Untuk menyelesaikan bagian ini, gabungkan dulu semua layer thumbnail (thumb dan bayangan thumb) kedalam 1 folder dan duplikasi sebanyak 2 kali. Lalu atur posisinya hingga terlihat rapih.
Langkah 24
Tambahkan heading “Latest Works” dan gunakan garis yang sama pada main menu (copy paste). Namun kamu boleh saja membuat garis baru lagi untuk bagian ini.
Langkah 25
Gunakan logo yang sama pada bagian footer, tambahkan sedikit tulisan “All Rights Reserved” (opsional). Untuk thumbnail portfolio saya menggunakan 3 karya dari pool Jurus Grafis di Flickr (ini hanya untuk mensimulasikan saja). Ketiga karya yang saya pakai adalah karya Nur Cholis, Ilham Sul Putra dan Pramono Streetatmoshphere (ijin ya teman ).Untuk mempermanis dan tetap 1 gaya secara keseluruhan, maka saya memutuskan untuk menambahkan efek kilapan di thumbnail. Dan kita sudah selesai!
Hasil Akhir
Untuk melihat versi yang lebih besar (ukuran sebenarnya), silakan klik tautan ini atau klik gambar di atas.
Postingan
