Jak udělat animované tlačítko? - 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


Webdesign

Jak udělat animované tlačítko?

30. dubna 1999, 00.00 | Dnes přinášíme jednoduchý tip pro začínající tvůrce WWW stránek. Už jste někdy potřebovali udělat efektní tlačítko?

Dnes si předvedeme další tip pro začínající webdesginery. Naučíme se vytvořit animované prostorové tlačítko (realizované javascriptem) a ukážeme si, jak vytvořit ikonku formátu 88*31. Tipy budou dnes velmi triviální, jde spíše o inspiraci pro vás.

Budete k tomu potřebovat dva FREEWARE filtry, která si můžete stáhnout odsud. Autorem těchto filtrů je pan Roberto Puon. Až budete mít soubor stažený, "rozpakujte" ho (třeba programem WinZip nebo UnZip), soubory "button.8bf" a "button.8bf" přesuňte do podadresáře Plugins v adresáři Photoshop (např.: C:\Program Files\Adobe\Photoshop40\Plugins). Poté restartujte (nebo je spusťe) Photoshop.


1. Ikonka
Ikonku této velikosti má téměř každý server, používá se hlavně k propagaci s jiným servery. Můžete si ikonku vytvořit, dát jít na svou stránku i s odkazem a naspat něco ve smyslu: "Pokud se vám tato stránka líbí, můžete si dát na svou homepage tuto ikonku ...".

Otevřete si nový obrázek s bílým pozadím o velikosti 88 * 31 pixelů. Zvolte si nějakou vhodnou barvu pozadí a vyplňte (stiskněte K) jím vrstvu background.

1

Aplikujte filtr, která jste si stáhli: Filter => Render => ButtonMaker Square. Hodnoty můžete nastavit dle libosti, já jsem nastavil: Bevel size=42; Depth/Contrast=231. Tímto filtrem docílíte "prostorový" efekt. Nyní už jen stačí vložit text. Pokud jste zkušenější uživatelé Photoshopu, doporučuji vytvořit ikonku animovanou, třeba něco takového, co je na ilustračním obrázku.

promo


2. Animované prostorové tlačítko (realizované javascriptem)
Otevřete si nový obrázek s bílým pozadím libovolné velikosti (já jsem zvolil 90*40 pixelů). Zvolte vhodnou barvu a vyplňte (stiskněte K a tímto nástrojem vrstvu vyplňte) s ní vrstvu, kterou nově vytvoříte (Layer => New =>Layer). Vyplněnou vrstvu duplikujte (Layer => Duplicate Layer). Zaktivněte první vrstvu (obv. Layer 1) a aplikujte filter: Filter => Render => ButtonMaker square. Nastavte tyto hodnoty: Bevel size=41; Depth/Contast=231. Zaktivněte duplikovanou vrstvu a opět použijte filter: Filter => Render => ButtonMaker square. Nastavte tyto hodnoty: Bevel size=41; Depth/Contast=31.

S hodnotami filtru u obou vrstev je možné vhodně hýbat. Vytvořte novu vrstvu, zvolte vhodnou barvu textu a vložte text a vycentrujte ho (nástrojem Move tool - stiskněte V).

Nyní "schovejte" druhou vrstvu (Layer 2) - kliknete na oko v paletce Layers. Obrázek vyexportujte do gifu (File => Export =>Gif89a export).

2

Vraťte se do obrázku a schovejte vrstvu první (Layer 1) - kliknete na oko v paletce Layers a zviditelněte vrstvu druhou (Layer 2). Opět obrázek vyexportujte do gifu (uložte jej pod jiným jménem !!!!).

3

Z grafického hlediska je vše hotovo. Obrázky v mém příkladu nejsou nejhezčí, slouží pouze ilustrativně. Je vhodné například udělat k textu do buttonu stín (návod uveden v jednom z minulých tipů) ...

Teď již stačí do HTML stránky vložit jen správný skript. Ve skriptu je obrázek b1 ten první, co jste si uložili a b2 ten druhý. Ve skriptu jsou uvedena dvě tlačítka, abyste věděli kde máte měnit hodnoty, když těch tlačítek budete mít na stránce třeba dvacet ! Skript je ošetřen, to znamená, že v Netscape 3.0 (možná i výše) nebude skript fungovat, zobrazí se jen obrázek b1.



Odkaz

Odkaz


Zdrojový text sckriptu je tady

--

Tématické zařazení:

 » Rubriky  » Webdesign  

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

www.grafika.cz/rubriky/webdesign/jak-udelat-animovane-tlacitko--126478cz

 

 

 

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: