തലക്കെട്ടില് മറ്റൊരു ചിത്രം
>> 20.4.08
പല ബ്ലോഗുകളുടെയും തലക്കെട്ടുകള് ശ്രദ്ധിച്ചാല് അവയില് പലതിലും ബ്ലോഗ് ഉടമകള്തന്നെ ചേര്ത്ത ചിത്രങ്ങള് കാണാം. മറ്റു ചിലവയില് ചിത്രങ്ങള് മാത്രമല്ല, തലക്കെട്ടും പേരും എല്ലാം തന്നെ ഒരൊറ്റ ചിത്രത്തിന്റെ ഭാഗമായിരിക്കാം. ഉദാഹരണം ഈ ബ്ലോഗില് ഡെനിം എന്ന പേരിലുള്ള ക്ലാസിക് ടെംപ്ലേറ്റാണ് ഉപയോഗിച്ചിരിക്കുന്നത്. ഈ ക്ലാസിക് ടെപ്ലേറ്റില് പ്രത്യേകിച്ച് തലക്കെട്ട് ചിത്രം ഒന്നും ഇല്ലായിരുന്നു. ഇപ്പോഴുള്ള ചിത്രം ഞാന് ചേര്ത്തതാണ്. ഇതെങ്ങനെയാണ് ചെയ്യുന്നതെന്ന് ഇനി പറയുന്നു.
ഡാഷ്ബോര്ഡ് തുറന്ന്, Design tab സെലക്റ്റ് ചെയ്യുക.
Add and arrange page elements എന്ന പേജ് കിട്ടും.
അവിടെനിന്ന് Header എന്ന ചതുരക്കള്ളിയിലെ Edit ക്ലിക്ക് ചെയ്യുക.

ഇപ്പോള് പുതുതായി ഒരു വിന്റോ തുറന്നുവരും. താഴെക്കാണിച്ചിരിക്കുന്ന ചിത്രത്തിലേതുപോലെ. ഇതുപയോഗിച്ചാണ് ചിത്രം ഹെഡ്ഡറിലേക്ക് അപ്ലോഡ് ചെയ്യേണ്ടത്. പക്ഷേ അതിനു മുമ്പ് ഒരു കാര്യം ചെയ്യുവാനുണ്ട്. താഴെക്കൊടുത്തിരിക്കുന്ന ചിത്രത്തില് മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഭാഗം ശ്രദ്ധിക്കൂ.

നമ്മുടെ ബ്ലോഗിന്റെ തലക്കെട്ടിന് ഒരു നിശ്ചിത പിക്സ്സല് വീതിയാണുള്ളത്. നാം ചേര്ക്കാന് പോകുന്ന ചിത്രം അതേ വലിപ്പത്തില് ഉള്ളതാണെങ്കില് ചിത്രവും ഹെഡ്ഡറീന്റെ വീതിയുമായി ഏറ്റവും യോജിപ്പായി നില്ക്കും. ചിത്രത്തിന് ഇതിലും വലിപ്പം കൂടുതലാണെങ്കിലോ, മുഴുവന് ഭാഗങ്ങള് കാണുകയുമില്ല. മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഓപ്ഷന് ക്ലിക്ക് ചെയ്യുകയാണെങ്കില് (ചിത്രം അതിലും വലുതാണെങ്കില് )ഈ വീതിയിലേക്ക് ബ്ലോഗര് അതിനെ ചുരുക്കും. ഇതെന്തായാലും നല്ല ഒരു ഓപ്ഷന് അല്ല. ചിത്രം വികലമായി കാണപ്പെടാന് സാദ്ധ്യതയുണ്ട്. അതിനാല് ഹെഡ്ഡറില് ഒരു ചിത്രം ചേര്ക്കുന്നതിനു മുമ്പായി ആ ഹെഡ്ഡറിന്റെ വീതി കണ്ടുപിടിക്കുന്നതു നന്നായിരിക്കും. അതിനുള്ള ഏറ്റവും എളുപ്പവഴിയാണ് മുകളിപറഞ്ഞത്. എഡിറ്റ് ക്ലിക്ക് ചെയ്ത്, ഈ വിന്റോ തുറന്ന് മുകളില് മാര്ക്ക് ചെയ്തിരിക്കുന്ന കള്ളിക്കുള്ളില് എത്ര സൈസിലേക്കാണ് ചിത്രത്തെ ചുരുക്കും (shrik to fit) എന്നെഴുതിയിരിക്കുന്നത് എന്നു നോക്കുക. ആ അക്കം നോട്ടു ചെയ്യുക. ഇനി ആ വിന്റോ അടച്ചേക്കുക. ഇവിടെ 760 px എന്നുകാണാം. മിക്കവാറും എല്ലാ ക്ലാസിക് ടെംപ്ലേറ്റുകളുടെയും വീതി ഇതുതന്നെയാണ് 760 പിക്സലുകള്.
Html കോഡുകള് മനസ്സിലാക്കാന് കഴിവുള്ളവര്ക്ക് ഹെഡ്ഡര് വീതി കണ്ടുപിടിക്കുവാന് വേറൊരു എളുപ്പവഴിയുണ്ട്. Edit Html എന്ന ഓപ്ഷന് തുറന്ന് ടെംപ്ലേറ്റിന്റെ Html code നോക്കുക. അതില് Header എന്ന വരിയില് ഹെഡ്ഡറിന്റെ വീതി എത്ര പിക്സല് ആണ് എഴുതിയിരിക്കുന്നതെന്നു നോക്കുക.
നിങ്ങള്ക്ക് ഉപയോഗിക്കാന് അറിയാവുന്ന ഏതെങ്കിലും Picture editing software ഉപയോഗിച്ച് ഏതു ചിത്രമാണോ ചേര്ക്കുവാന് ഉദ്ദേശിക്കുന്നത് അതിനെ റീസൈസ് ചെയ്യുക. ചിത്രത്തിലെ വേണ്ട ഭാഗങ്ങള് മാത്രം ക്രോപ്പ് ചെയ്ത് റീസൈസ് ചെയ്യുന്നതാവും നല്ലത്. ഒരുകാര്യം ശ്രദ്ധിക്കുക, വീതി കൂടുതലും ഉയരം കുറവുമായി ചെയ്യുന്നതാവും നല്ലത്, ഒരു ബാനര് പോലെ. അല്ലെങ്കില് ഹെഡ്ഡറിന്റെ ഉയരവും അത്ര വലുതായിപ്പോകും. താഴെക്കാണുന്ന ചിത്രം നോക്കൂ. 760 px വീതി, 190 px ഹൈറ്റ് എന്നീ രീതിയില് ക്രോപ്പ് ചെയ്തതാണ് ഈ ചിത്രത്തെ.

റീസൈസ് ചെയ്ത ചിത്രത്തെ ഡെസ്ക്ടോപ്പിലേക്കോ മറ്റോ സേവ് ചെയ്യാം.
ഇനി വീണ്ടും ആദ്യം പറഞ്ഞ Edit Header എന്ന വിന്റോ തുറക്കുക. അതില് ഇപ്പോള് മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഭാഗം ശ്രദ്ധിക്കൂ.

Image: From your computer Browse എന്ന ബട്ടണ് ഉപയോഗിച്ച്, നമ്മള് ചിത്രം സേവ് ചെയ്ത ലൊക്കേഷനിലേക്ക് പോവുക. അവിടെനിന്നും ചിത്രത്തിന്റെ ഫയല് സെലക്ട് ചെയ്യുക. ഓപണ് അമര്ത്തി തിരികെ ഇതേ വിന്റോയിലേക്ക് എത്തുക.ഇപ്പോള് താഴെക്കാണുന്നതുപോലെ ചിത്രത്തിന്റെ ഒരു ചെറുരൂപം ഈ വിന്റോയില് കാണാം.

ഇവിടെ കാണിച്ചിരിക്കുന്നതുപോലെ, Placement: behind title and description എന്നതു മാര്ക്ക് ചെയ്യുക. അല്ലെങ്കില് ബ്ലോഗിന്റെ ടൈറ്റില് കാണാന് സാധിക്കില്ല. ഇനി Save changes ക്ലിക്ക് ചെയ്യാം. ഇപ്പോല് തിരികെ വീണ്ടും Add and arrange page elements എന്ന പേജില് എത്തും.അവിടെയും സേവ് ക്ലിക്ക് ചെയ്താല് ചിത്രം നിങ്ങളുടെ ബ്ലോഗില് എത്തിക്കഴിഞ്ഞു.
ഇനി ചിത്രം മാറ്റി വേറൊരെണ്ണം ആയിമാറ്റണമെങ്കിലോ? പഴയതുപോലെ എഡിറ്റ് ഹെഡ്ഡര് തുറക്കുക. നിലവിലുള്ള ചിത്രത്തിനു താഴെ Remove image എന്നൊരു ബട്ടണ് കാണാം. അതില് അമര്ത്തിയാല് നിലവിലുള്ള ചിത്രം പോകും. വീണ്ടും പുതിയത് അപ്ലോഡ് ചെയ്യുവാനുള്ള ഓപ്ഷനുകള് കിട്ടും.
കുറിപ്പ്: ഈ ബ്ലോഗിന്റെ നിലവിലുള്ള തലക്കെട്ട് ചിത്രം ഇപ്രകാരം ചെയ്തതല്ല. അത് ഫോട്ടോഷോപ്പ് എന്ന സോഫ്റ്റ്വെയര് ഉപയോഗിച്ച് ചെയ്തതാണ്. ഇതെങ്ങനെയാണ് ചെയ്തത് എന്നറിയാന് തലക്കെട്ടു നിര്മ്മാണം എന്ന അദ്ധ്യായം കാണുക.
ഡാഷ്ബോര്ഡ് തുറന്ന്, Design tab സെലക്റ്റ് ചെയ്യുക.
Add and arrange page elements എന്ന പേജ് കിട്ടും.
അവിടെനിന്ന് Header എന്ന ചതുരക്കള്ളിയിലെ Edit ക്ലിക്ക് ചെയ്യുക.

ഇപ്പോള് പുതുതായി ഒരു വിന്റോ തുറന്നുവരും. താഴെക്കാണിച്ചിരിക്കുന്ന ചിത്രത്തിലേതുപോലെ. ഇതുപയോഗിച്ചാണ് ചിത്രം ഹെഡ്ഡറിലേക്ക് അപ്ലോഡ് ചെയ്യേണ്ടത്. പക്ഷേ അതിനു മുമ്പ് ഒരു കാര്യം ചെയ്യുവാനുണ്ട്. താഴെക്കൊടുത്തിരിക്കുന്ന ചിത്രത്തില് മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഭാഗം ശ്രദ്ധിക്കൂ.

നമ്മുടെ ബ്ലോഗിന്റെ തലക്കെട്ടിന് ഒരു നിശ്ചിത പിക്സ്സല് വീതിയാണുള്ളത്. നാം ചേര്ക്കാന് പോകുന്ന ചിത്രം അതേ വലിപ്പത്തില് ഉള്ളതാണെങ്കില് ചിത്രവും ഹെഡ്ഡറീന്റെ വീതിയുമായി ഏറ്റവും യോജിപ്പായി നില്ക്കും. ചിത്രത്തിന് ഇതിലും വലിപ്പം കൂടുതലാണെങ്കിലോ, മുഴുവന് ഭാഗങ്ങള് കാണുകയുമില്ല. മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഓപ്ഷന് ക്ലിക്ക് ചെയ്യുകയാണെങ്കില് (ചിത്രം അതിലും വലുതാണെങ്കില് )ഈ വീതിയിലേക്ക് ബ്ലോഗര് അതിനെ ചുരുക്കും. ഇതെന്തായാലും നല്ല ഒരു ഓപ്ഷന് അല്ല. ചിത്രം വികലമായി കാണപ്പെടാന് സാദ്ധ്യതയുണ്ട്. അതിനാല് ഹെഡ്ഡറില് ഒരു ചിത്രം ചേര്ക്കുന്നതിനു മുമ്പായി ആ ഹെഡ്ഡറിന്റെ വീതി കണ്ടുപിടിക്കുന്നതു നന്നായിരിക്കും. അതിനുള്ള ഏറ്റവും എളുപ്പവഴിയാണ് മുകളിപറഞ്ഞത്. എഡിറ്റ് ക്ലിക്ക് ചെയ്ത്, ഈ വിന്റോ തുറന്ന് മുകളില് മാര്ക്ക് ചെയ്തിരിക്കുന്ന കള്ളിക്കുള്ളില് എത്ര സൈസിലേക്കാണ് ചിത്രത്തെ ചുരുക്കും (shrik to fit) എന്നെഴുതിയിരിക്കുന്നത് എന്നു നോക്കുക. ആ അക്കം നോട്ടു ചെയ്യുക. ഇനി ആ വിന്റോ അടച്ചേക്കുക. ഇവിടെ 760 px എന്നുകാണാം. മിക്കവാറും എല്ലാ ക്ലാസിക് ടെംപ്ലേറ്റുകളുടെയും വീതി ഇതുതന്നെയാണ് 760 പിക്സലുകള്.
Html കോഡുകള് മനസ്സിലാക്കാന് കഴിവുള്ളവര്ക്ക് ഹെഡ്ഡര് വീതി കണ്ടുപിടിക്കുവാന് വേറൊരു എളുപ്പവഴിയുണ്ട്. Edit Html എന്ന ഓപ്ഷന് തുറന്ന് ടെംപ്ലേറ്റിന്റെ Html code നോക്കുക. അതില് Header എന്ന വരിയില് ഹെഡ്ഡറിന്റെ വീതി എത്ര പിക്സല് ആണ് എഴുതിയിരിക്കുന്നതെന്നു നോക്കുക.
നിങ്ങള്ക്ക് ഉപയോഗിക്കാന് അറിയാവുന്ന ഏതെങ്കിലും Picture editing software ഉപയോഗിച്ച് ഏതു ചിത്രമാണോ ചേര്ക്കുവാന് ഉദ്ദേശിക്കുന്നത് അതിനെ റീസൈസ് ചെയ്യുക. ചിത്രത്തിലെ വേണ്ട ഭാഗങ്ങള് മാത്രം ക്രോപ്പ് ചെയ്ത് റീസൈസ് ചെയ്യുന്നതാവും നല്ലത്. ഒരുകാര്യം ശ്രദ്ധിക്കുക, വീതി കൂടുതലും ഉയരം കുറവുമായി ചെയ്യുന്നതാവും നല്ലത്, ഒരു ബാനര് പോലെ. അല്ലെങ്കില് ഹെഡ്ഡറിന്റെ ഉയരവും അത്ര വലുതായിപ്പോകും. താഴെക്കാണുന്ന ചിത്രം നോക്കൂ. 760 px വീതി, 190 px ഹൈറ്റ് എന്നീ രീതിയില് ക്രോപ്പ് ചെയ്തതാണ് ഈ ചിത്രത്തെ.

റീസൈസ് ചെയ്ത ചിത്രത്തെ ഡെസ്ക്ടോപ്പിലേക്കോ മറ്റോ സേവ് ചെയ്യാം.
ഇനി വീണ്ടും ആദ്യം പറഞ്ഞ Edit Header എന്ന വിന്റോ തുറക്കുക. അതില് ഇപ്പോള് മാര്ക്ക് ചെയ്തിരിക്കുന്ന ഭാഗം ശ്രദ്ധിക്കൂ.

Image: From your computer Browse എന്ന ബട്ടണ് ഉപയോഗിച്ച്, നമ്മള് ചിത്രം സേവ് ചെയ്ത ലൊക്കേഷനിലേക്ക് പോവുക. അവിടെനിന്നും ചിത്രത്തിന്റെ ഫയല് സെലക്ട് ചെയ്യുക. ഓപണ് അമര്ത്തി തിരികെ ഇതേ വിന്റോയിലേക്ക് എത്തുക.ഇപ്പോള് താഴെക്കാണുന്നതുപോലെ ചിത്രത്തിന്റെ ഒരു ചെറുരൂപം ഈ വിന്റോയില് കാണാം.

ഇവിടെ കാണിച്ചിരിക്കുന്നതുപോലെ, Placement: behind title and description എന്നതു മാര്ക്ക് ചെയ്യുക. അല്ലെങ്കില് ബ്ലോഗിന്റെ ടൈറ്റില് കാണാന് സാധിക്കില്ല. ഇനി Save changes ക്ലിക്ക് ചെയ്യാം. ഇപ്പോല് തിരികെ വീണ്ടും Add and arrange page elements എന്ന പേജില് എത്തും.അവിടെയും സേവ് ക്ലിക്ക് ചെയ്താല് ചിത്രം നിങ്ങളുടെ ബ്ലോഗില് എത്തിക്കഴിഞ്ഞു.
ഇനി ചിത്രം മാറ്റി വേറൊരെണ്ണം ആയിമാറ്റണമെങ്കിലോ? പഴയതുപോലെ എഡിറ്റ് ഹെഡ്ഡര് തുറക്കുക. നിലവിലുള്ള ചിത്രത്തിനു താഴെ Remove image എന്നൊരു ബട്ടണ് കാണാം. അതില് അമര്ത്തിയാല് നിലവിലുള്ള ചിത്രം പോകും. വീണ്ടും പുതിയത് അപ്ലോഡ് ചെയ്യുവാനുള്ള ഓപ്ഷനുകള് കിട്ടും.
കുറിപ്പ്: ഈ ബ്ലോഗിന്റെ നിലവിലുള്ള തലക്കെട്ട് ചിത്രം ഇപ്രകാരം ചെയ്തതല്ല. അത് ഫോട്ടോഷോപ്പ് എന്ന സോഫ്റ്റ്വെയര് ഉപയോഗിച്ച് ചെയ്തതാണ്. ഇതെങ്ങനെയാണ് ചെയ്തത് എന്നറിയാന് തലക്കെട്ടു നിര്മ്മാണം എന്ന അദ്ധ്യായം കാണുക.
13 അഭിപ്രായങ്ങള്:
njan kodukkunna pic blue color il anu kanunnathu itu engane mattum?
njan kodukkunna pic blue color il anu kanunnathu itu engane mattum?
Hi chettayi, njan nishad. ente officile system ayath kondan njan manglishil ezhuthunnath..tale kett chitram njan vasyichu..nall helpful ane chettante post....pala blogaran marudeyum thalekett chithram njan nokkarunde....avar design page color enniva stradikkarilla enn thonnunnu....enthayalum chettante post enikk hlp cheythu.....
http://nishad2m8.blogspot.com/
ith ente bloga
http://how-du.blogspot.com/
ithinte thale kett entatha
ഫോട്ടോഷോപ്പിൽ യൂണിക്കോഡ് മലയാളം ടൈപ്പ് ചെയ്യാൻ സാധിക്കില്ല. ഫോട്ടോഷോപ്പ് അതു സപ്പോർട്ട് ചെയ്യുന്നുമില്ല. എന്നാൽ റിജോയുടെ കമ്പ്യൂട്ടറിൽ ASCII Malayalam fonts ഉണ്ടെങ്കിൽ ഫോട്ടോഷോപ്പിലേക്ക് കൊണ്ടുപോകേണ്ട വാക്കിനെ മൈക്രോസോഫ്റ്റ് വേഡീലോ, എക്സലിലോ ആ ഫോണ്ട് ഉപയോഗിച്ച് എഴുതുക. (ഇൻസേർട്ട് സിംബൽ എന്ന കമാന്റ് ഉപയോഗിച്ച് വാക്ക് എഴുതാം) എന്നിട്ട്, ആ വാക്കിനെ കോപ്പി ചെയ്തു ഫോട്ടോഷോപ്പിലെ ടെക്സ്റ്റ് ലെയറിൽ പേസ്റ്റ് ചെയ്യാം. അങ്ങനെ ചെയ്യുമ്പോൾ മലയാളം കാണുന്നില്ലെങ്കിൽ ടെക്സ്റ്റ് സെലക്റ്റ് ചെയ്തിട്ട് ആദ്യം എഴുതാൻ ഉപയോഗിച്ച ഫോണ്ട് ഏതാണോ അത് ഫോട്ടോഷോപ്പിന്റെ ഫോണ്ട് ലിസ്റ്റിൽ നിന്ന് സെലക്റ്റ് ചെയ്യണം. ഈ രീതിയിലാണ് ഈ ബ്ലോഗിന്റെ തലക്കെട്ട് ഫോട്ടോഷോപ്പിൽ ചെയ്തിരിക്കുന്നത്.
ഈ പറഞ്ഞത് ആനിമേഷന് ആക്കണമെങ്കില് എന്തുചെയ്യും ചേട്ടാ....
ബ്ലോഗിന്റെ തലക്കെട്ടിൽ ആനിമേഷൻ ചേർക്കാൻ ഒരു ഓപ്ഷൻ ഉണ്ടോ എന്ന് അറിയില്ല. കമന്റ് വായിക്കുന്ന ആർക്കെങ്കിലും ഇതേപ്പറ്റി അറിയാമെങ്കിൽ പറയൂ.
Flash, Swishmax, Adobe firework ഉപയോഗിച്ച് അനിമേഷന് ചെയ്യാം.swishmax ല് text effect ചെയ്യാന് easy യുമാണ്.. output .gif format ല് എടുക്കാം.... ബ്ലോഗില് നോക്കിയിട്ടില്ല. വര്ക്ക് ചെയ്യുമെന്ന് തൊന്നുന്നു..
സലാഹുദ്ധീൻ, അപ്പൂ,
വളരെ ഈസിയായി ( എന്ന് പറഞ്ഞാൽ രണ്ട് വാക്കുകൾ HTML കോഡിൽ മാറ്റിയാൽ മാത്രം മതി) ആനിമേറ്റേഡ് ക്ലിപ്പുകൾ ഹെഡറായി കാണിക്കാം.
ദാ, ഒരു സാമ്പിൾ ഇവിടെ
ഇതിന്റെ ട്രിക്ക് ഇവിടെ തന്നെ അപ്പൂ പബ്ലീഷ് ചെയ്യും.
ഇത്തരം നിരവധി കാര്യങ്ങൾ ബ്ലോഗുകളിൽ ഉണ്ട്. ആരെങ്കിലും ചോദിക്കുമ്പോൾ മാത്രമേ അവ തപ്പിയെടുക്കുവാൻ കഴിയൂ. അത്കൊണ്ട്, ഇനിയും നിരവധി സൂത്രപണികൾ ചോദിക്കുക.
നന്ദി...ഞാനിത് തേടിയലയുകയായിരുന്നു.
സര് എന്റെ ബ്ലോഗിന്റെ ഹെഡ്ഡ്ര് കാണാനില്ല അതെന്താണ് സംഭവിച്ചത് അതെങ്ങിനെ തിരിച്ചു കൊണ്ട് വരാം????//
വളരെ നന്ദിയുണ്ട് സാറിന്. ഞാനൊരു ബ്ലോഗ് ക്രിയേറ്റ് ചെയ്തിട്ട് വര്ഷങ്ങളായിരുന്നു. പക്ഷെ ഇത് വായിച്ചപ്പോഴാണ് എന്റെ ബ്ലോഗിന് ചെറിയ നിലക്കെങ്കിലും ജീവന് നല്കാനായത്. നന്ദി....
sainudhheen Elenkur
http://sainuelenkur.blogspot.com/
appuchetta,
Sorry for typing in Manglish(am @ work)
Njan ente blodinte thalakkettil oru picture upload cheythu. Pkahse kure space bakki kidakkunnu.Pixel adjust cheythu nokki.No raksha. Onnu nokkiyittu paranju tharumo enthanu cheyyendathennu?
shimav.blogspot.com
മഴപ്പക്ഷിയുടെ ബ്ലോഗ് നോക്കി. പ്രശ്നം എന്താണെന്നു വച്ചാൽ തലക്കെട്ടിനായി ഉണ്ടാക്കിയ ചിത്രത്തിനു ബ്ലോഗിന്റെ വിഡ്തിനു തുല്യമായ വലിപ്പമില്ല എന്നതാണ്. ആദ്യം ബ്ലോഗറിന്റെ ഡിസൈൻ സെക്ഷനിൽ പോയി, ഈ ബ്ലോഗിന്റെ വിഡ്ത് എത്രയാണെന്ന് കണ്ടുപിടിക്കൂ. അതിനുശേഷം, ആ വീതിക്കു ചേരുന്ന ഒരു ചിത്രം നിർമ്മിച്ച് തലക്കെട്ടായി ചേർക്കുക.
Post a Comment