Tutorial : Galeri Portofolio (Simpel!)

7 Jul

Huwaaahhh, sekarang saatnya marathon nulis tutorial neh hahaha, sebenernya dari dulu sih kepengen cuma gak kesampaian gara – gara rasa malas yang menggelora (gitu yo bangga i) nah daripada basa basi lama – lama ikutan basi langsung saja yah, pertamanya gua kasih tunjuk hasil akhirnya yah biar pada ngiler semua *ngayal mode on*

Hasil Akhir

Bahan Yang Dibutuhkan

Step bai step beibehh !

1. Background Website

Pertama yang harus dilakukan adalah membuat sebuah dokumen baru berukuran 1020 x 1200 jangan lebih and kurang oke

2. Pembuatan Background

Lalu, pilih Paint Bucket Tool (G), dan isikan layer background dengan warna #AED6EE. Kemudian karena kita ingin menambahkan sedikit gradien pada bagian atas background, daripada mengedit layar background yang ada mending kita bikin layer baru dan buat sebuah kotak putih seperti gambar dibawah. Kenapa harus membuat layer baru? supaya memudahkan dalam proses kodingnya.

3. Proses Blending

Daripada dijelaskan dengan kata – kata yang bakalan ruwet bin njelimet lewat preview gambar aja yah.

4. Logo . . .

Dimulai dari bagian header sekarang kita buat bagian logonya, buatlah sebuah persegi panjang dengan warna #D4EF9F.

Lalu tambahkan blending seperti dibawah ini

Lalu tambahkan font juga pada logo tercinta kita ini 😀 Untuk desain kita kali ini gunakan font Blackout yang ada pada link Resource diatas pakai warna #FFFFFF (Putih) & pake blend seperti yang dibawah ini

Buatlah sebuah persegi panjang lagi menggunakan rectangle tool dengan warna #416073 seperti pada gambar dibawah ini

Lalu tambahkan blend lagi seperti dibawah ini

5. Navigation . . .

Kotak navigasi kita pun akan kita buat secara simpel. Dengan font Helvetica, dan icon dari pack yang ada di resource diatas letakan seperti biasa. Link aktif akan memiliki persegi warna #2D4655. Warna link kita akan menjadi #99CAEA dan warna icon akan menjadi #AED6EE.

Dibawah navigasi kita, kita akan menampilkan tweet terakhir kita (sekarang jamannya twitter bro !). Jadi untuk membuatnya kita menggunakan Elliptical Marquee Tool (M). Tahan SHIFT untuk membuat sebuah pilihan dan buatlah seperti gambar dan warnai dengan warna #FFFFFF (Putih)

Lalu tambahkan sedikit blends seperti dibawah ini

Setelah menambahkan beberapa teks dan icon Twitter maka header website kita seharusnya memiliki tampilan seperti ini

Lalu untuk kotak konten buatlah sebuah persegi panjang dengan Rectangle Tool seperti gambar dibawah ini

Selanjutnya, duplikat layer tersebut (Ctrl+J) dan pindahkan dibagian bawah layer aslinya. Pencet Ctrl+T sehingga layer tersebut bisa diotak atik lalu putar agak kekanan sehingga tampak seperti dibawah ini.

Kembali pada layer aslinya lalu tambahkan blend seperti dibawah ini

Untuk tiap proyek, kita akan menambahkan preview gambar dengan nama dan kategori dari portofolio kita. Menggunakan Rectangle Tool, buatlah sebuah persegi panjang yang mirip dengan gambar dibawah ini dan pastikan beri warna #FFFFFF (Putih)

Lalu tambahkan blends seperti dibawah ini

Lalu yang perlu anda lakukan adalah menambahkan gambar sampel dan beberapa teks dengan warna #416073 dan mengulang – ngulang proses yang ada sehingga tampak seperti ini:

6. Tombol . . .

Langkah terakhir untuk area konten kita kali ini adalah sebuah tombol!!!. Yap, sebuah tombol Next dan Back dong gimana sih. Pertama buatlah sebuah persegi panjang dengan warna #D4EF9F, lalu buat lagi diatasnya dengan warna #AFD465

Lalu tambahkan blend pada kotak yang ada diatas

Semua yang anda butuhkan semua adalah icon panah dan sebuah teks. Tulisan anda dan iconnya beri warna #2D4655 ok. Iconnya bisa ngambil dari Mono Icon Pack tadi.

Lakukan hal yang sama untuk tombol back (masa harus diulang lagi tutorialnya ? kayak anak kecil aja 🙂 ), dan tambahkan beberapa teks menunjukan jumlah halaman dan buatlah seperti dibawah ini :

Langkah yang terakhir adalah menambahkan sebuah footer. Kita ingin membuatnya seperti berada di awan, jadi menggunakan Elliptical Marquee Tool (M) buat sebuah pilihan, tahan SHIFT untuk nambahin pilihannya dan isi dengan warna #FFFFFF (Putih). Tambahkan terus menerus sehingga tampak seperti dibawah ini.

Hffftt akhirnya selesai juga, tinggal tambahkan beberapa teks pada bagian footer seperti copyright dan template anda akan menjadi seperti ini

Akhirnya selesai juga, ada komentar ? mungkin saya rehat dulu 2 hari buat nulis postingan hhahaha saya capek sekali menyelesaikan yang satu ini, harap maklum 🙂

Iklan

8 Tanggapan to “Tutorial : Galeri Portofolio (Simpel!)”

  1. Jeprie Juli 8, 2010 pada 12:24 am #

    Bagus sekali, sangat jelas dan mudah.

    • grahadesain Juli 19, 2010 pada 1:31 pm #

      Waaaww apresiasi dari senior neh 🙂

  2. satrya Juli 18, 2010 pada 11:47 am #

    Wah bagus banget nih, gak sulit.

    Mkasih banyak mas tutorialnya. keep writting 😀

    • grahadesain Juli 19, 2010 pada 1:26 pm #

      Ok saya akan bertahan dengan kemalasan saya yang luar biasa ini 🙂

  3. hellgalicious Juli 23, 2010 pada 6:37 am #

    bisa langsung dipraktekkan nih
    tks a lot brother!

  4. aLe Agustus 16, 2010 pada 3:57 am #

    Wah, lama tak jumpa dah jadi master neh Graha 😉

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: