| Pom∞rn∞ Φasto se na WWW strßnkßch vyskytujφ tlaΦφtka, reagujφcφ na p°ejetφ myÜi rozsvφcenφm. P°esto₧e se jednß o relativn∞ jednoduchou v∞c, tento efekt strßnkßm dosti dodßvß na profesionalit∞ a atraktivit∞. V tomto tipu si ukß₧eme jak na to.
ProblΘm lze rozd∞lit na dv∞ Φßsti:
1. Vytvo°enφ dvou stav∙ tlaΦφtka (normßlnφ a rozsvφcenΘ) - zßle₧itost Photoshopu.
2. Realizace vysv∞covßnφ tlaΦφtka na WWW strßnce - zßle₧itost HTML a Javascriptu
V prvnφ Φßsti si ukß₧eme tvorbu dvoustavovΘho tlaΦφtka. Jeliko₧ se nechceme spokojit jen nap°. se sv∞tlejÜφ a tmavÜφ variantou, ukß₧eme si krok za krokem tvorbu pokroΦilejÜφho efektu. Postup je realizovateln² v Photoshopu od verze 3.0 a na p°φpadnΘ odliÜnosti bude poukßzßno.
| 1. |
|
- nejprve si p°ipravφme nßpis ve volnΘ vrtv∞ nad pozadφm. V naÜem p°φpad∞ Φern²m. |
| 2. |
|
- v Photoshopu 5.0 musφme p°φkazem RENDER LAYER (pravΘ tlaΦφko myÜi nad ikonkou textovΘ vrstvy) p°evΘst textovou vrstvu na normßlnφ. |
| 3. |
|
- dßle nastavφme barvu pop°edφ na barvou k²₧enΘ linky okolo nßpisu, v naÜem p°φpad∞ bφlou, a aplikujeme funkci EDIT/STROKE s nastavenφm Width=1. Nynφ mßme p°ipraven normßlnφ (zhasnut²) stav tlaΦφtka - odkazu. Vyexportujeme ho do formßtu JPG, a pojmenujeme neon1.jpg |
| 4. |
|
- nynφ musφme jeÜt∞ vyrobit vysvφcenou variantu. Vnit°nφ zß°i vychßzejφcφ jakoby ze st°edu m∙₧eme vyrobit nap°. filtrem FILTER/RENDER/LENS FLARE, kde m∙₧eme nastavovit st°ed zß°enφ. Pokud nap° v Photoshopu 3.0 nemßme tento nebo podobn² filtr k dispozici postaΦφ pou₧φt nßstroj BRUSH v∞tÜφch rozm∞r∙ (alespo≥ 60), pak zathnout v paletce vrstev volbu PRESERVE TRANSPARENCY a zß°i aplikovat jednφm p°en∞ mφ°en²m "¥upnutφm". M∙₧eme pou₧φt funkci UNDO a pokus opakovat dokud nejsme s v²sledkem spokojeni. |
| 5. |
|
- nynφ m∙₧eme b²t s v²sledkem spokojeni, nebo jeÜt∞ dodat dalÜφ zß°i vychßzejφcφ jakoby zpoza naÜeho nßpisu. NejjednoduÜÜφ °eÜenφ je v Photoshopu 5.0 aplikovat efekt OUTER GLOW p°φmo na vrstvu nßpisu (pravΘ tlaΦφko myÜi nad vrstvou v paletce vrtev a EFFECTS...) a zaexperimentovat s parametry tak aby zß° byla jen jemnß jako v naÜem p°φpad∞. V Photoshopu 3.0 a 4.0 m∙₧eme zß°i zrealizovat nap°. pomocφ plugin∙ jako Alien Skin Eyecandy - GLOW. |
| 6. |
|
- nynφ mßme p°ipravenou i rozsvφcenou variantu nßpisu. TaktΘ₧ vyexportujeme do formßtu JPG, a pojmenujeme neon1_on.jpg |
V druhΘ Φßsti se budeme v∞novat vlo₧enφ takto vytvo°enΘho tlaΦφtka do HTML k≤du. Mo₧nostφ jak realizovat vysv∞covßnφ pomocφ Javascriptu je mnoho, ale jeliko₧ v drtivΘ v∞tÜin∞ p°φpad∙ je vysv∞covanΘ tlaΦφko zßrove≥ odkazem, jevφ de mi jako nejjednoduÜÜφ zahrnout Javascript p°φmo do tagu odkazu.
| 1. |
Nejprve vytvo°φme v HTML odkaz na obrßzek:
<img src="images/neon1.jpg" border="0"> |
| 2. |
Pak mu p°id∞lφme jmΘno pomocφ tagu NAME, je asi zbyteΦnΘ podot²kat, ₧e pokud je tlaΦφtek na strßnce vφce, musφ se ka₧dΘ jmenovat jinak.
<img src="images/neon1.jpg" border="0" name=NEON> |
| 3. |
K≤d kter² zajiÜ¥uje zßm∞nu obrßzkß p° najetφ myÜφ pak vypadß takto:
<a href="n∞kam.htm" onMouseOver="document.NEON.src='neon1_on.jpg';return true" onMouseOut="document.NEON.src='¿neon1.jpg';return true">
<img src="images/neon1.jpg" border="0" name=NEON></a> |
| 4. |
Dßle je dobrΘ dßt prohlφ₧eΦi najevo ₧e si mß p°edem stßhnout rozsvφcenou variantu tlaΦφtka aby ji mohl po najetφ myÜi neprodlen∞ pou₧φt. Toho dosßhneme vlo₧enφm tohoto Javascriptu kamkoli do strßnky:
<script language=javascript>
<!--
cache1=new Image();
cache1.src="neon1_on.jpg";
//-->
</script> |
Pro ·plnost jeÜt∞ nutno poznamenat, ₧e celß zßle₧itost funguje pouze v Internetov²ch prohlφ₧eΦφch podporujφcφch Javascript - tedy v zßsad∞ v MSIE i NN od verze 3.
VeselΘ vysv∞covßnφ!
TomßÜ Miki MiÜkovsk²
|
