Behind The Screen “O_09H Template”-part 3
Di posting sebelumnya berjudul BTSOHT part 2, saya sudah memberitahukan How To: membuat sidebar tambahan (newsidebar) agar muncul di sebelah kanan, mengubah beberapa warna dasar, dan bagaimana membuat model template di Corel jika belum langsung saja baca postingan bagian kedua.
Berhubung pada bagian akhir artikel part 2 tidak tuntas sekarang saya akan lanjutkan bagaimana membuat dan memasang latar belakang (background) yang terlihat seperti memiliki bayangan (efek drop shadow).
Memberi efek bayangan dan efek timbul pada Template.
Agar model template yang sudah dibuat di corel bisa teraplikasi dengan sukses seperti screen capture diatas, anda mesti menggunakan program editor (phostoshop) gambar dalam hal ini pengetahuna dasar-dasarnya saja sudah cukup.
Langkah pertama (menambahkan efek 3d)
Buka Photoshop dan open file terus cari image template berekstensi *.png yangsudah anda buat di corel tadi.
Setelah muncul pastikan anda telah mengaktifkan “Rules” (cari di menu, view) agar anda bisa membuat garis bantu yang nantinya sangat membantu dalam memotong (slicing) template menjadi bagian header, mainbar, sidebar dan footer.
Kemudian klik 2x pada layer 0 atau klik kanan pilih “Blinding Option” akan muncul kotak dialog dan beri tanda centang pada drop shadow dan pastikan angle 900, Distance = 0px , spread = 25% dan Size = 5px.
Masih pada Blending Option jangan lupa beri tanda centangjuga pada Bevel And Emboss dan pilih style = inner bevel, Direction = up dan Size = 5px.
Langkah Kedua (memisahkan template sesuai bagiannya)
Secara garis besar struktur layout template blogger terbagi 4 bagian yaitu Header, Mainbar, Sidebar dan Footer. Tapi untuk template minima ini saya membaginya atas 3 bagian yaitu:
Header
Mainbar + sidebar dan
Footer
Masih di photoshop gunakan “Slice tool” pada tools bar kemudian pilih area yang akan diambil sebagai Footer, Mainbar + Sidebar dan Footer, lebih jelasnya lihat screen capture dibawah.
Setelah itu pilih File kemudian “save as for web”*gif atau *jpg , beri nama pada hasilnya misalnya Template Gue.
Langkah Ketiga (upload image ke free hosting)
Image untuk header, Mainbar + sidebar dan Footer sudah jadi dan sekarang bagaimana agar image-image yang telah dibuat bisa terpasang dan compatible sama template kita, sudah tentu saya harus punya tempat simpan gambar sendiri di internet (hosting gambar) dan sedikit mengubah kode HTML template, untuk hosting gambar geocities punya yahoo jadi pilihan saya karena gratis.
Setelah anda memiliki akun di geocities/googlepages upload semua gambar tersebut ke direktori anda dan jangan lupa simpan alamat URL dari setiap gambar yang telah upload tadi.
untuk kode yang saya ubah plus penambahan kode pada template silahkan lihat artikel berikutnya yaituBTSOHT part 4.
Finally untuk artikel ini saya akhiri sampai disini dulu jika ada saran, kritik dan pertanyaan silahkan andasampaikan di kolom komentar.
Semoga tulisan ini bermanfaat dan terima kasih sudah mau main ke blog ini :).
Artikel berseri dari Behind The Screen “O_09H Template”:
Agar model template yang sudah dibuat di corel bisa teraplikasi dengan sukses seperti screen capture diatas, anda mesti menggunakan program editor (phostoshop) gambar dalam hal ini pengetahuna dasar-dasarnya saja sudah cukup.
Langkah pertama (menambahkan efek 3d)
Buka Photoshop dan open file terus cari image template berekstensi *.png yangsudah anda buat di corel tadi.
Setelah muncul pastikan anda telah mengaktifkan “Rules” (cari di menu, view) agar anda bisa membuat garis bantu yang nantinya sangat membantu dalam memotong (slicing) template menjadi bagian header, mainbar, sidebar dan footer.
Kemudian klik 2x pada layer 0 atau klik kanan pilih “Blinding Option” akan muncul kotak dialog dan beri tanda centang pada drop shadow dan pastikan angle 900, Distance = 0px , spread = 25% dan Size = 5px.
Masih pada Blending Option jangan lupa beri tanda centangjuga pada Bevel And Emboss dan pilih style = inner bevel, Direction = up dan Size = 5px.
Langkah Kedua (memisahkan template sesuai bagiannya)
Secara garis besar struktur layout template blogger terbagi 4 bagian yaitu Header, Mainbar, Sidebar dan Footer. Tapi untuk template minima ini saya membaginya atas 3 bagian yaitu:
Header
Mainbar + sidebar dan
Footer
Masih di photoshop gunakan “Slice tool” pada tools bar kemudian pilih area yang akan diambil sebagai Footer, Mainbar + Sidebar dan Footer, lebih jelasnya lihat screen capture dibawah.
Setelah itu pilih File kemudian “save as for web”*gif atau *jpg , beri nama pada hasilnya misalnya Template Gue.
Langkah Ketiga (upload image ke free hosting)
Image untuk header, Mainbar + sidebar dan Footer sudah jadi dan sekarang bagaimana agar image-image yang telah dibuat bisa terpasang dan compatible sama template kita, sudah tentu saya harus punya tempat simpan gambar sendiri di internet (hosting gambar) dan sedikit mengubah kode HTML template, untuk hosting gambar geocities punya yahoo jadi pilihan saya karena gratis.
Setelah anda memiliki akun di geocities/googlepages upload semua gambar tersebut ke direktori anda dan jangan lupa simpan alamat URL dari setiap gambar yang telah upload tadi.
untuk kode yang saya ubah plus penambahan kode pada template silahkan lihat artikel berikutnya yaituBTSOHT part 4.
Finally untuk artikel ini saya akhiri sampai disini dulu jika ada saran, kritik dan pertanyaan silahkan andasampaikan di kolom komentar.
Semoga tulisan ini bermanfaat dan terima kasih sudah mau main ke blog ini :).
Artikel berseri dari Behind The Screen “O_09H Template”:
Behind The Screen “O_09H Template”-part 1
Behind The Screen “O_09H Template”-part2
3 komentar:
oh ini slah satu caranya buat Template ya
saya nda bisa bang
photosop juga masi lom bisa
ntar tak coba2
sambil baca2 postingan disini
sapa tau ntar bisa buat template sendiri byar keren kayak blognya abang
wah ini juga hasil belajar dari berkelana di internet, silahkan saja baca baik2 coz saya juga nyelip link t4 belajar saya baik itu dari dalam dan blog luar.
and makasih dah berkunjung Friend :D
kayaknya menarik nih.....
boleh dicoba......silahkan kunjung balik........
Posting Komentar