Matthew's Blog

Lesklá tlačítka ve Fireworks

Už jste někdy někde viděli taková hezká lesklá tlačítka, vypadající jako by byla vyrobena ze skla? Pokud alespoň trochu surfujete po internetu, tak určitě ano. Chtěli jste si podobná tlačítka vytvořit a umístit na svůj web či blog, ale nevěděli jste jak? Přečtěte si tento tutoriál popisující tvorbu lesklého tlačítka krok za krokem, potom už jen zapojte fantazii a vaše první lesklá tlačítka jsou na světě!

Předem upozorňuji, že tento návod je určen spíše začátečníkům v programu Fireworks, ale myslím si, že neurazí ani pokročilejší grafiky. Při vytváření tutoriálu jsem využíval Adobe Fireworks CS3, ale lesklá tlačítka je možné vytvářet i ve starších verzích Fireworksu (Fireworks 8, Fireworks MX, ...). Také bych vás rád varoval, abyste lesklá tlačítka nepoužívali příliš často, využívejte jich s rozvahou. Pár takových tlačítek na stránce je určitě příjemným spestřením, ale webové stránky, kde se všechno "leskne" už dávno vyšly z módy.

1. Vložíme obdélník

Vytvoříme obdélník pomocí nástroje Rectangle Tool (U) a natřeme ho libovolnou barvou. Já jsem použil růžovou (#FF0084).

2. Přidáme bílý obdélníček

Vytvoříme ještě jeden obdélník o stejné šířce a poloviční výšce než první obdélník. Jako barvu výplně zvolíme bílou (#FFFFFF) Klikneme na nově vytvořený obdélník a ve spodním panelu Properties, napravo od barvy výplně, změníme pole Fill Category, které by implicitně mělo obsahovat hodnotu Solid. Změníme ho na Gradient > Linear.

Pravděpodobně se vytvoří černo-bílý lineární přechod. V nejnovější verzi Fireworksu (Fireworks CS3) se přechod utvoří zezhora dolů, ale ve starších verzích se vytvoří zleva doprava. To lze opravit tak, že klikneme na obdélníček, zobrazí se černá čára s kolečkem na jednom konci a čtverečkem na konci druhém. Uchopíme kurzorem čtvereček a přechod narovnáme.

3. Vytvoříme odlesk

Klepnutím na černo-bílý lineární přechod na spodním panelu Properties by se nám měla zobrazit nabídka podobná té, kterou právě vidíte vlevo. Spodní posuvníky určují barvu objektu, horní posuvníky určují jeho průhlednost. V základu jsou posuvníky dva, lze ale vytvořit další. V našem případě si ale postačíme s dvěma.

Posuvníky pro barevnost nastavíme oba na barvu bílou (#FFFFFF). Posuvníky určující průhlednost nastavíme první na 50%, druhý na 20% průhlednost. Tím vytvoříme přirozený přechod připomínající odlesk.

4. Zakulatíme rohy a přidáme rámeček

Nyní můžeme provádět různé úpravy, přidávat efekty, rámečky, či zakulacovat rohy. Já jsem pouze nastavil Rectangle Roundness na hodnotu 20. To je tak akorát. Také jsem trochu zmenšil posunul obdélníček tvořící odlesk, aby nebyl tak "nalepený" na kraji tlačítka.

Výsledek

Můžete si stáhnout výsledný Fireworks PNG soubor.

Matouš Skála 4.8.2008 706x přečteno 7 komentářů

DK zdar, jak se udela aby ten prechod byl zhora dolu a ne zleva doprava?

Matthew V nejnovejsim Fireworks CS3 se prechod dela automaticky zezhora dolu, ve starsich verzich se automaticky vytvori zleva doprava. Da se to upravit tim, ze klikne na objekt s prechodem, zobrazi se takova cerna cara s koleckem na jedne strane a ctvereckem na druhé strane. Ten udava směr vyplne. Kurzorem ho lze presunout a prechod tim narovnat. Zkusim to do tutorialu pripsat.

DK Jo dik uz mi to jde, jeste ale nevim jak udelat ten linearni prechod z ruzove do bile. Ja si nastavim obdelnik ruzovou, pak jsem dal linear a automaticky to prechazelo do cerne. Nevite jak to zmenit??

Matthew Trochu jsem přepracoval celý návod do jednodušší podoby, pokud by vám i přesto bylo něco nejasné, klidně napište.