Monday, August 19

Tutorial : Cara Membuat Header Transparent

Bonjour everybody..!!
muahaha..
Update harini didedikasi kepada

Ms.Adhah

Ms.Adhah minta Lin ajarkan cara-cara nak buat header..


Dan sekarang ni Lin akan menunaikan hajat Cik Adhah..

Software yang diperlukan adalah :
  1. a) Adobe Photoshop
  2. b) Photoscape
1)Buka Blogger anda seperti biasa dan klik pada Design>Edit HTML.Tandakan 'Tick' pada 'Expand Widget Templates' dan tekan CTRL+F.Seterusnya 'paste' kan dibawah ini.

#header-wrapper {




2)Fokus pada 'width',untuk digunakan pada photoshop..




3)Buka Adobe Photoshop anda..




4)Klik pada tab File>Open>dan pilih mana-mana gambar yang ingin digunakan pada header.




5)Seterusnya klik pada 'Magic Wand Tool' yang terdapat pada menu bar disebelah kiri dan klik pada gambar.




6)Seterusnya,'right-click' pada gambar dan pilih 'Select Inverse' seperti ditunjukkan dibawah.




7) Dan selepas itu,klik pada button File>New ataupun Ctrl+F dan masukkan 'width' yang telah dikenalpasti didalam HTML sebelumnya.Dan jangan lupe pada kotak background contents pilih 'Transparent'.




8)Paparan sebegini akan muncul.




9)'Drag' kan gamba yang telah di 'inverse' kan tadi ke dalam kotak yang baru.Jangan lupa sebelum 'drag' tukarkan kepada 'move' tool.Ia terletak di bahagian teratas dalam 'toolbar' di sebelah kiri.




10)Seterusnya,buka software photoscape dan klik pada tab 'Page'.Tukar size kepada 'width' yang sama seperti dalam Photoshop dan klik 'OK' seterusnya klik 'Edit'.




11)Kemudian hiasi sebahagian dari page yang telah dibina tadi menggunakan kreativiti anda dan seterusnya 'Save'.




12)Dengan menggunakan langkah 4 dan seterusnya,'Drag' kan gambar kreativiti anda tadi seperti dalam langkah 9 dan 'Save' dalam format .png




13)Buka blogger anda dan klik Design>Page Elements dan lakukan langkah seperti seterusnya dan klik 'Save Template'.Jangan lupa tandakan seperti yang dibulatkan dibawah.




15)Header anda sudah siap untuk digunakan.




Owkeyh..Tutorial dah habis..
huhu..


P/S : Jangan lupe klik nuffnang Lin yerr..

22 comments:

  1. @Ibnu Darwin

    boleh jer..asalkan awk save dalam format .png owkeyh..^_^

    ReplyDelete
  2. Kalau tak gne photoshop , gne photoscape bleyh tak ?

    ReplyDelete
  3. @aizasyazwen

    dalam photoscape tak ader kaedah magic wand tool..sebab tu kiter guna photoshop jugak..^_^

    ReplyDelete
  4. hey nk tnye lah,cne nk drag pic ke box baru yg step no 9 tu. ble sy cari pic yg da inverse xde. kt mane nk cari? -,-"
    if can reply kt my blog shoutbox www.aliffsingle.blogspot.com
    thanks ya :)

    ReplyDelete
  5. Salam Lynn...
    Boleh tolong buatkan header transparent tuk Fadah x?
    Fadah x reti...

    ReplyDelete
  6. sy xphm la takat drag 2..cmner nk drag erk?kn sblm 2 kna bkak
    file->new->msuk width or height.gmba td sy dh cut.tp ps bkak yg file->new->msuk width or height,kn gmba ilang.den cmnr nk dpatkn gmba yg dh di cut 2?drag cmner nk wat??sory ye byk tya.hehe.sy xpndai sgt gna photoshop. ni pwn bru bljr.
    -_____-

    ReplyDelete
  7. @Fadah

    fadah dah cuba dulu..insyaAllah..kalau Lin dah x busy Lin buatkan owryte..^_^

    ReplyDelete
  8. @dyana

    sokeyh dyana..tak pape..^_^

    pas dah masuk height dgn width tu dyana akan dapat paparan berbentuk transparent tu kan..dyana cuma kelik button minimize untuk gambar tu..paparan gambar yang dah di'cut' tadi akan muncul dan dyana drag gambar tu ke dalam paparan transparent td..selamat mencuba yer..^_^

    ReplyDelete
  9. haha.thnx2.suda jd!

    ReplyDelete
  10. Salam ... Sya x tau nak but mcm mna.. Lin guna photoshop apa? Kalau sya, guna photoshop CS5.

    ReplyDelete
  11. @Safryzah

    lin guna photoshop cs3..tapi safryzah mungkin boleh guna jugak cs5 cuma dia ada upgrade sikit kot..safryzah cuma ikut penggunaan tools yang same jer keyh..selamat mencuba..!!

    ReplyDelete
  12. lynn.. nape ye tasya buat part drag photos tu x bole eh?? banyak kali try buat mcm tu jgak.. bile drag pic jadi kecik pastu tros lagging tasya nyer ps.. huaaaaa

    ReplyDelete
  13. @tasya safri

    mungkin penggunaan saiz gambar asal dan saiz baru dalam ps tasya tu..

    1st step : tasya cuba guna saiz gambar yang nak dialihkan tu yang lebih besar.

    2nd step : cuba hit button ctrl + t pada gambar dan besarkan gambar tersebut..

    selamat mencuba..^_^

    ReplyDelete