Persona Intikalia

17 Jan 2012

Cara Mudah Membuat Template Blog - Photoshop Image Slicing

Kembali lagi dengan saya, John Terro, dalam entri Cara Mudah Membuat Template Blog. Kali ini saya akan membahas Photoshop Image Slicing. Sebenarnya tidak harus menggunakan Photoshop untuk melakukan slicing. Kamu juga bisa menggunakan software yang serupa dengan Photoshop misalnya GIMP. Apa itu slicing? Slicing itu memotong hingga menjadi beberapa bagian yang lebih kecil. Mengapa kita harus melakukan slicing dalam membuat template? Slicing adalah cara yang paling ampuh untuk mengurangi beban dari template. Dengan slicing kita bisa mengulang bagian tanpa harus melakukan load image kembali.

Berikut adalah contoh dari slicing image yang aku gunakan di blog Persona Intikalia.

#HeaderAtas
#HeaderBawah
#Center
#Footer
Dari keempat image di atas, #Center adalah bagian yang diulang-ulang sepanjang sumbu y di blog Persona Intikalia. Bayangkan saja jika saya tidak melakukan perulangan pada image #Center, pasti akan menyebabkan loading yang benar-benar lama.

Lantas bagaimanakah cara melakukan slicing di Photoshop? Berikut adalah caranya.

Pilihlah Slice Tool
Lakukan Slicing Sesuai Kebutuhan
Clear Slices Jika Kamu Melakukan Kesalahan Slicing
Jika Slicing Selesai, Lakukan Save for Web & Devices...
Sejauh Ini, Format PNG-24 Adalah Yang Terbaik Menurutku
Simpan Sesuai Format dan Slices Seperti Di Gambar

Mudah bukan? Lantas bagaimana dengan slicing di GIMP? Karena saya tidak mempunyai GIMP, saya ga bisa mengambil screenshot-nya. Tapi kurang lebih seperti yang saya lakukan di Photoshop. Sekian untuk Photoshop Image Slicing kali ini.

42 komentar:

  1. terus diapain? emang bisa bikin template pake adobe?

    BalasHapus
  2. hohoho.. boleh-boleh... Nice share, bro!! (y)
    masalah slice aku cuma nyoba sekali..belum sampe diterapin di blog..haha^^

    BalasHapus
  3. dulu sempat belajar masalah beginian mas,cuma dah agak kaku karena jarang main tools2 design kagak kaya dulu :(

    BalasHapus
  4. waduh bahasannya.... ga ngerti gue... hahahha

    BalasHapus
  5. gimp ku versi yg paling baru yg masih beta dan banyak bug, nanti aku coba bisa ga, lagi sok sibuk nih :p

    BalasHapus
  6. @Hani: terus ngapain? tunggu episode selanjutnya LOL
    ya bisa lah bikin template dari adobe, cuma ga secara langsung aja

    @cakYun; ya nanti coba lah :D

    @jiah: silakan :)

    @Andy: gitu yah, kacian :P

    @Nuel: haha ... maklum kamu kan orang hukum, jadi taunya pasal2 LOL

    @Ario Antoko: ya yang ga versi beta, setahuku di GIMP juga bisa kug yo
    fasilitas slice itu ada di banyak aplikasinya :)

    BalasHapus
  7. kira-kira aku sudah ngerti john, bisa kok slice di gimp yg aku pakai

    BalasHapus
  8. master.... -___-"

    keren bang.
    lanjut-lanjut !
    nyimak nih. *eh udah kelar

    BalasHapus
  9. ya nantikan bagian selanjutnya aja :)

    BalasHapus
  10. heho' banget aku disini.. hadeeehh :((
    baru belajar bikin template dasar, baru kenal sama yg namanya html, head, body, hahahha.
    odong bgt yah Aku :)

    yawis, ini tak simpen kalo aku udah mahir dulu :D
    tiing

    BalasHapus
  11. ilmu baru nih tentang photohosp , besok posting tentang photoshop lagi ya bang

    BalasHapus
  12. ya nanti kalo aku pengen aku post lagi
    kalo ga ya ga LOL

    BalasHapus
  13. nice info sob
    nanti langsung dicoba
    salam silaturahmi

    BalasHapus
  14. Anda berhasil membuat orang2 penasaran ... :-D

    BalasHapus
  15. bagus banget tutotnya, dari dulu pengen desain template dari coretan tangan sendiri tapi gak tau langkah-langkahnya, udah ngikuti dari awal, ditunggu lanjutannya ya :D

    BalasHapus
  16. okelah, tunggu saja lanjutannya :)
    pantengin terus blog ini

    BalasHapus
  17. lama ndak koment makin pinter aja om?
    baru tau beginian,
    pantes punyaku kok lola banget template nya

    BalasHapus
  18. tutornya asik nih, akan di coba someday ^^
    eh, nama twitnya @dradnaksi bacanya jadi iskandard@ hehe, kelebihan "d" tuh om...
    #abaikan!haha# :p

    BalasHapus
  19. @rivai: sudah jelas lah LOL

    @KoskakiUngu: mana yang kelebihan, nama panjangku Iskandar Dzulkarnain, disingkat jadi iskandard lah :P

    BalasHapus
  20. gw udah jalanin semuanya gan ,, dan udah jadi ,, trus masukan ke blognya bagaimana ,, mohon pencerahannya ,

    BalasHapus
  21. udah bulan Februari dan masih menunggu kelanjutannya..
    image positioning..
    :D

    BalasHapus
  22. ya sebenarnya mau buat
    tapi .... males aja, ini masih dalam draft
    masih belum sempurna, kan ga enak kalo langsung diterbitin :D

    BalasHapus
  23. woww.. nice inpoh :D mau blajar ah ntar ^_^

    BalasHapus
  24. kalo cara bikin tombol nya bagai mana kang ada tutorial nya gak nih.. masih bingung,,

    BalasHapus
    Balasan
    1. ya nanti saya buatkan tutorialnya kalo senggang :)
      stay tune yah di blog ini :D

      Hapus
  25. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  26. wahhh bolehh tuchh
    thank's dachh

    BalasHapus
  27. waduh gimana nie caranya gan? ane masih kurang paham untuk masukin ke blog atau web...

    BalasHapus