Membuat Template Web Personal dari Foto dengan Photoshop

Kali ini kita akan membuat sebuah template web personal dengan editor photoshop. Dalam pembuatan template ini kita mengunakan sebuah foto ato gambar dengan memberikan nuansa full color pada foto dan membentuknya menjadi sebuah template web dan selanjutanya kita bisa membangun template ini menjadi website personal. Walaupun bisa dibilang pembuatan tempalate web ini tidak terlalu rumit atau sangat sederhana sekali tapi bukankah lebih baik belajar dari yang mudah dan yang sederhana dulu untuk mencapai sebuah yang wah wah wah atau yang lebih baik,hehehe.

Sebelum kita lanjut pada catatan ini cara membuat template web personal dari foto dengan menggunakan photoshop, tentunya terlebih dahulu saudara telah menyediakan sebuah gambar atau foto (disini saya menggunakan fotonya Avril Lavigne, kenapa fotonya Avril Lavigne...? hmmm...kenapa ya.....kenapa ya....mbuh....*_^ ) dan juga jangan lupa seperti penggalan judulnya " dengan photoshop " tentunya di komputer saudara telah ter-instal aplikasi Photoshop. Jika sudah...mari kita mulai pembuatan template sederhana ini:

Langkah pertama:

1. Jalankan Phothoshop saudara lalu pada pojok kiri atas click File -> Open, cari gambar yang telah saudara sediakan lalu click tombol open, disini saya menggunakan fotonya Avril Lavign :

2. Selanjutnya buat kanvas/layer baru, caranya click File ->New, untuk setingan Width dan Height sesuaikan dengan gambar saudara ( disini saya menggunakan Width: 770pixel dan Height: 570pixel ) sedangkan untuk background contentnya pilih transparant, trus click OK. 
3. Selanjutnya drag/tarik gambar kedalam layer yang baru kita buat, lalu sesuaikan gambar dengan layar yang baru caranya tinggal menarik ke pinggiran layar baru dengan menggunakan Move tool  
   
4. jika sudah click move tool sekali lagi, klw ada peringatan click aja tombol apply...
5. Ok langkah pertama sudah selesai, saudara dapat lihat pada pojok kanan bawah pada photoshop sudah memiiki dua buah layer, layer1 berupa layer kosong dan layer2 berupa gambar yang sudah didrag...selanjutnya kita akan bermain-main pada layar ini. 

Langkah Kedua, memberi style :

1. Click kanan pada Layer2 yang saya sebut diatas terus pilih dan click Blending Option seperti gambar.
   
2. Kemudaian muncul Layer Style, pada layer style silahkan saudara ceklis dan bermain-main untuk menentukan setingan style atau efect yang diberikan menurut selera saudara sendiri...disini saya memberikan effect atau ceklis pada -> Inner Shadow , Inner Glow dan Satin seperti gambar berikut. 
   

Langkah Ketiga, membuat bagian header :

1. Membuat Tulisan MY WEB pada header, caranya click Horizontal Type Tool ( huruf T pada tool panel sebelah kiri ) . 
   
2. Selanjutnya saudara tinggal menuliskan kata MY WEB pada layer gambar, disini silahkan saudara ganti jenis font, warna atau ukuran font sesuai yang diinginkan, untuk mengatur letak font gunakan move tool. Jika ingin memberikan style pada tulisan my web caranya sama pada langkah kedua cuma disini yang di click pada layer my web seperti gambar. 
   
3. Pada header saya menambah sebuah kotak cara membuatnya click Rounded Rectangle Tool ( gambar kotak pada tool panel sebelah kiri ) seperti pada gambar : 
   
4. Selanjutnya tinggal membuat kotak pada bagian header, tambahkan style pada kotak caranya sama dengan langkah kedua diatas tapi disini dengan meng-click Shape 1 pada tab layer seperti pada gambar :
   

Langkah Keempat, Membuat Menu :

1. Disini saya membuat Menu HOME, PROFILE, GALERY FOTO dan LINK. Untuk membuat menu ini caranya sama dengan langkah ketiga cara 1 dan 2 membuat Tulisan MY WEB, cuma disini saudara harus membuatnya satu-satu dan untuk mengatur penempatannya gunakan move tool. 
2. Untuk membuat menu menjadi bentuk tombol, caranya tambah Rounded Rectangle Tool pada      tiap menu dan atur Style, Opacity dan Fill seperti gambar berikut : 
   
3. Pada gambar diatas dapat saudara lihat saya memberikan Style Effect : Inner Shadow, Outer Glowdan Gradient Overlay yang saya lingkari kotak orange dan pada kotak merah Opacity 47% dan Fill 89%,  disini saudara bisa mengatur sendiri sesuai style yang saudara inginkan dengan cara diatas.   

Langkah Kelima, membuat Ruang Content :

1. Sedikit penjelasan, Apa itu ruang content...? Disini saya artikan sebagai ruang untuk menampilkan isi dari menu. Semoga Aja kagak salah...hehehee
2. Cara Membuat ruang content, Disini saya menempatkan sebuah Rectangle Tool, caranya Click Rectangle Tool atau gambar kotak pada tool panel sebelah kiri, lalu buatlah kotak pada layer gambar sesuai dengan ruang content yang telah saudara sediakan dan aturlah stylenya seperti penjelasan Langkah kedua diatas, disini saya memberikan ceklis pada Outer Glow dan Inner Glow.
3. Untuk Mengatur agar kotak kelihatan Transparant, Pada Tab Layers Kanan Bawah Atur Opacity: 25% dan Fillnya: 13%.
4. okay....sampai disini layout template sudah jadi seperti gambar dibawah :
   

Langkah Enam, Menyeleksi bagian layout template :

1. seleksi bagian-bagian layout yang akan di fungsikan pada website dengan menggunakan Slice Tool (gambar pisau pada tool panel ). 
   
2. Pertama, seleksi pada bagian header,
3. Kedua, seleksi pada bagian menu, disini kita harus seleksi satu-satu bagian menu, jadi disini terdapat 4 bagian seleksi
4. Ketiga, seleksi pada bagian Content
5. Dan terakhir seleksi pada bagian-bagian lain yang tersisa pada layout template, seperti pada gambar berikut :
   
6. Sampai disini saya anggap seleksi layout sudah topmarkotop deh....*_^

Langkah Tujuh, Menyimpan Layout Template :

1. Okay Langsung Saja, pada pojok kanan atas Click File -> Click Save For Web & Devices. lalu akan muncul layar wizard untuk setingan savenya. Disini saudara bisa memilih format gambar yang akan di save dan setingan lainnya.
2. Jika saudara sudah memilih format gambarnya lalu tekan tombol save, lalu akan muncul layar Save Optimized As.
3. Disini saya sarankan saudara membuat sebuah folder dulu, caranya langsung Click kanan aja pada ruang kosong pada Save optimized As -> pilih New -> Folder -> beri nama Myweb -> lalu simpan Template Saudara di dalam folder tersebut, sebelum di save beri file name saudara dengan index dan pilih opsiHTML dan Images untuk save as type. 
   
4. Silakan buka folder Myweb lalu click file index yang telah kita simpan dengan browser kesayanagan saudara...sip markusip template yang kita buat telah selesai...tapi disini baru berbentuk gambar...hehehee

Okay Sampai disini Template Web Personal dari foto yang kita buat dengan photoshop sudah selesai, selanjutnya saya akan menjelaskan bagaimana memfungsikan semua menu dan menjadikan Website Personal untuk Saudara ... Tapi berhubung mata udah setengah watt dan saya mw mimpi indah malam ini saya tidur dulu...hahihuheho.....