Neon efekt - vysvěcování nápisu, tlačítka - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce


Photoshop

Neon efekt - vysvěcování nápisu, tlačítka

5. února 1999, 00.00 | Návod na tvorbu "vysvěcovacích" nápisů (tlačítek) na WWW stránkách pomocí Photoshopu a Javascriptu.

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="/photoshop/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="/photoshop/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="/photoshop/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í!

Tématické zařazení:

 » Rubriky  » Photoshop  

Poslat článek Diskuse (0) Tisk Přečteno: 1269x

www.grafika.cz/rubriky/photoshop/neon-efekt-vysvecovani-napisu-tlacitka-126553cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: