Setiap desainer tentu harus mempunyai portfolio. Namun selain mempunyai portfolio, kita juga harus mempunyai tempat untuk memamerkannya. Dan untuk saat ini jalan yang paling efektif adalah mempunyai blog yang sekaligus berfungsi sebagai portfolio.
Kenapa Blog-Portfolio (BlogFolio) ?
Alasan yang paling umum adalah karena membuat blog sangat mudah. Kamu bisa mendaftar di Blogspot atau WordPress, lalu langsung menggunakan template yang ada. Selain karena kemudahannya, ada beberapa faktor yang saya anggap penting yaitu,- Tempat mencurahkan ide & pemikiran. Dengan cara ini kita bisa lebih memposisikan personal brand kita dan tidak hanya berperan hanya sebagai desainer grafis saja.
- Memperlihatkan hasil karya. Ini salah satu syarat yang sangat dasar, klien akan menggunakan jasa desain kita berdasarkan apa yang telah mereka lihat dari portfolio kita sebelumnya.
- Mendapatkan koneksi baru. Website tipe BlogFolio adalah cara yang tepat karena biasanya mempunyai sistem komentar agar kita bisa berinteraksi dengan pengunjung.
Template Gratis Tidak Akan Cukup
Inilah yang menjadi permasalahan. Kalau kita mau tampil unik maka kita harus mengubah template yang ada, bisa dari warna, layout, tipografi dan lainnya. Tetapi sebaiknya kita mendesain website BlogFolio kita dari nol. Dengan begitu kita akan memegang kontrol penuh atas semua elemen desainnya. Sudah siap? mari mulai!Semua Berawal dari Sitemap
Setiap website, se-simple apapun tetap membutuhkan sitemap. Ini di perlukan untuk mengetahui halaman yang kita perlukan dan tidak kita perlukan. Biasanya fitur-fitur website (seperti latest comment, popular posts, dll) juga akan kita pikirkan disini. Sebagai contoh, saya membuat sitemap BlogFolio seperti di bawah ini,
Perancangan Wireframe
Tahap selanjutnya adalah wireframe. Wireframe bisa di bilang sketsa/gambaran kasar dari website yang akan kita desain. Biasanya saya hanya menggunakan kertas dan bolpen untuk menggambar cepat letak-letak elemen website. Setelah kita dapat sketsa kasarnya, selanjutnya kita mencoba di Photoshop. Wireframe yang saya rancang terlihat seperti di bawah ini,
Dengan membuat wireframe, maka pemikiran kita akan di fokuskan kepada fungsi terlebih dulu. Lupakan sejenak gaya visual, karena di tahap inilah kita bisa memikirkan elemen mana yang paling penting, dimana kita akan meletakkan elemen itu dan bagaimana mempresentasikan konten.
Saatnya Mendesain!
Ok, kita sudah merencanakan semuanya. Sekaranglah saatnya bergulat dengan photoshop. Kita bisa mulai memikirkan elemen yang benar-benar visual. Mulai dari warna, font, finishing, gaya desain dan lainnya.Seperti biasa kita akan menggunakan 960 Grid System, silakan diunduh. Sedangkan font Bebas Neue akan menjadi pilihan yang tepat untuk Logo dan Headline.
Langkah 1
Buka template 960 Grid 12 kolom yang sudah di unduh tadi di Photoshop.
Untuk menyesuaikan dengan resolusi monitor mayoritas saat ini (widescreen) maka sebaiknya kita juga mendesain dalam bentuk widescreen.
Langkah 2
Kita mulai dengan membuat background terlebih dulu dengan menggunakan Rectangle Tool.
Gunakan warna coklat (agak pucat) untuk background BlogFolio ini. Setelah itu tambahkan tekstur dengan menggunakan efek filter Noise.
Supaya efek noisenya tidak terlalu berlebihan, gunakan maksimum 2 % saja. Sekarang ini saya menggunakan 1.2 %.
Langkah 3
Gunakan font Bebas Neue untuk logo. Font ini sangat cocok untuk headline dan memberikan kesan bold yang elegan. Atur posisinya sehingga berada di tengah-tengah dokumen. Gunakan guide ( Ctrl + ; ) supaya pas dengan grid yang kita gunakan.
Langkah 4
Berikan efek Letterpress pada logo ini. Tutorial Letterpress pernah di tulis Jurus Grafis sebelumnya. Atau beri layer style dengan mengikuti setting seperti gambar di bawah ini,
Selanjutnya tambahkan tagline di bawah logo. Langkah ini opsional, tetapi biasanya setiap website mempunyai tagline
. Saya menggunakan font Georgia Italic untuk tagline ini.
Langkah 5
Kita akan membuat navigasi utama yang terdiri dari Home, Blog, Portfolio dan Contact. Gunakan font Bebas Neue untuk navigasi agar tetap satu irama dengan keseluruhan website nantinya.
Buat garis yang agak tebal dengan menggunakan Rectangle Tool dan letakkan di atas dan di bawah navigasi utama.
Langkah 6
Supaya tidak terlalu polos, maka kita akan memberikan sedikit efek grunge pada garis tersebut. Pilih salah satu layer garis, lalu tekan icon masking yang ada di bawah window layer.
Setelah itu pilih splatter brush (ada di default brush) dan mulailah “menghapus” garis tersebut. Maka akan tercipta efek “rusak” atau “grunge” tanpa merubah bentuk asli layer garis tersebut. Lebih jelas tentang teknik masking dasar.
Hasilnya akan terlihat seperti di bawah ini,
Langkah 7
Supaya lebih jelas user sedang berada di halaman tertentu, kita akan membuat status halaman yang aktif pada navigasi utama. Gunakan Rectangle Tool lagi, dan posisikan di bawah Home.
Buat kesan seperti pita dengan menggunakan bentuk segitiga yang di atur secara berderet.
Hasil sementara bentuk pita terlihat seperti gambar di bawah ini,
Langkah 8
Selanjutnya kita akan menambahkan beberapa efek layer styles pada pita tersebut agar tidak terlalu “datar”.
Khusus untuk efek Pattern Overlay, saya sudah mempunyai bentuk pattern seperti gambar di bawah ini. Kamu juga bisa bereksperimen dengan pattern yang lain.
Inilah hasil efek pada pita setelah semua efek layer styles di gunakan.
Postingan
