Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem GIMP - návrh webového tlačítka

Jen výjimečně najdeme na internetu stránku, která se obejde bez ovládacího prvku nazývaného tlačítko. Klikáme na obrázkové obdélníčky, které nemusí být jen stroze hranaté a nudně jednobarevné. Pojďme zapřemýšlet, jak by takové webové tlačítko mohlo vypadat.

1. Základ pro tlačítko

Přes Soubor -> Nový... (Ctrl+N) si vytvoříme nový obrázek, do kterého postupně namalujeme tlačítko. Kvůli malé velikosti screenů jsem zvolila velikost 400x200 px, zvolíme průhledné pozadí. To proto, aby se zrozené tlačítko nakonec "vylouplo" z obrázku a mohlo přímo vložit do stránky, která má nastaveno jakékoliv barevné či obrázkové pozadí.

http://pc.poradna.net/file/view/5984-tlac0-jpg

Nástroj na Obdélníkový výběr jsem nastavila následovně: defaultně zapnuté Vyhlazování, Zaoblené rohy na 20px (větší číslo má za následek kulatější rohy), Pevnou velikost na 240x120px (níže je vidět tento rozměr zašedlý) a Poloha 80 a 40 naznačuje, že jsem obdélníkový výběr pečlivě vystředila do obrázku :-)

http://pc.poradna.net/file/view/5985-tlac1-jpg

2. Přejmenování vrstvy

Tento Nový obrázek má defaultní název Pozadí, který si můžeme libovolně přejmenovat třeba na Tlačítko: pravým myšidlem klepneme na vrstvu Pozadí a hned první volba Upravit atributy vrstvy... nám dovolí přepsat podbarvený text na svůj.

http://pc.poradna.net/file/view/5986-tlac2-jpg

3. Dočasné pozadí

Protože ale na šachovnici, která v GIMPu reprezentuje průhledné pozadí, je nyní obrázek špatně rozeznatelný,
přidáme si dočasně novou vrstvu, kterou vyplníme třeba standardní bílou (chceme-li tlačítko výrazně světlé,
vyplníme barvou tmavší).
Pravým myšidlem na vrstvě Tlačítko vyvoláme nabídku Nová vrstva..., pojmenujeme Pozadí a v Typu vyplňování vrstvy zatrhneme bílou. Nyní máme dvě vrstvy: nahoře vrstva Pozadí, pod ní vrstva Tlačítko. Poslední, co musíme udělat, je prohodit obě vrstvy. Protože kdyby pomocná podkladová vrstva zůstala nahoře, překrývala by veškeré naše grafické zásahy do průhledné vrstvy, která je vyhrazena tlačítku.
Přesun vrstev provedeme následovně: levým myšidlem klikneme na vrstvu Pozadí, tlačítko myši NEPOUŠTÍME a suneme myš směrem dolů. Jakmile dosáhneme vzhledu, kdy se pod spodní vrstvou objeví čára, myš pustíme.

http://pc.poradna.net/file/view/5987-tlac3-jpg

Potřebné pořadí vrstev je toto

http://pc.poradna.net/file/view/5988-tlac4-jpg

4. Barvy na tlačítku

Nastavíme barvu Popředí (zde #361), barvu Pozadí (zde #CEB) a vybereme nástroj Barevný přechod typu Popředí do Pozadí. Zkontrolujeme, že máme aktivní (modře podbarvenou) vrstvu Tlačítko a táhneme z levého dolního rohu směrem k pravému hornímu a poté myš pustíme.

http://pc.poradna.net/file/view/5989-tlac5-jpg

Dostaneme tento obrázek (je vhodné si dosavadní výtvor pojmenovat a uložit v nativním gimpím formátu XCF, kterýžto zachová veškeré použité vrstvy, výběry apod.)

http://pc.poradna.net/file/view/5990-tlac6-jpg

5. Zmenšení výběru

Nyní "běhající mravence" zmenšíme o malou hodnotu (např. 3px) volbou Vybrat -> Zmenšit...

http://pc.poradna.net/file/view/5991-tlac7-jpg

a použijeme nástroj Barevný přechod opačným směrem. Dostaneme tento výsledek

http://pc.poradna.net/file/view/5992-tlac8-jpg

6. Výplň tlačítka

Znovu zmenšíme výběr o další 3px a Plechovkou vyplníme celý výběr světle zelenou (zde #AE8). Volbu Vyplnit celý výběr je nutno zaškrtnout u nástroje Plechovka.

http://pc.poradna.net/file/view/5993-tlac9-jpg

7. Plastický vzhled

Vytvoříme novou průhlednou vrstvu (kliknutím na vrstvu Tlačítko pravým myšidlem a volbou Nová vrstva...) a vyplníme ji Plechovkou černou barvou.

http://pc.poradna.net/file/view/5994-tlac10-jpg

Následně zvolíme Vybrat -> Zaoblení... (např. 35px) a volbou Upravit -> Vymazat (na klávesnici Delete) odstraníme zaoblený výběr.

http://pc.poradna.net/file/view/5995-tlac11-jpg

Nyní můžeme odstranit čárkovaný výběr pomocí Vybrat -> Nic (Ctrl+Shift+A).

8. Přidání odlesku

Přidáme novou průhlednou vrstvu, nazvala jsem ji Odraz světla. V ní uděláme - stejným způsobem, jako na samém počátku práce - zaoblený (20px) výběr a poté nastavíme Vybrat -> Zaoblení... na 35px.

http://pc.poradna.net/file/view/5998-tlac12-jpg

Zjistila jsem, že nelze smíchat obě zaoblení do jednoho, např. u výběru obdélníku pro odlesk nastavit rovnou 20+35 = 55px, protože výsledný odlesk je nepřirozeně tvrdý.

Nastavíme barvu Popředí na bílou, Barevný přechod z Popředí do průhlednosti, přičemž zatrhneme hned vedle modrou dvojšipkou obrácení barev, abychom dostali Průhlednost do popředí.

http://pc.poradna.net/file/view/5999-tlac13-jpg

Nyní s nástrojem Barevný přechod táhneme myší zezdola nahoru jako na obrázku

http://pc.poradna.net/file/view/6000-tlac14-jpg

Vlastně by stačilo ponechat defaultní nastavení Barevného přechodu na Popředí do průhlednosti a táhnout myší opačně, tj. seshora dolů, ale je dobré vědět, kde se v Barevném přechodu prohazuje nastavení barev

9. Sloučení vrstev

U vrstvy Pozadí klikneme na očičko, aby se tato vrstva zneviditelnila a klepnutím na kteroukoli vrstvu pravým myšidlem vybereme Sloučit viditelné vrstvy... (proto bylo nutné vypnout pomocnou vrstvu pozadí)

http://pc.poradna.net/file/view/6001-tlac15-jpg

a nezapomeneme zaškrtnout Zahodit neviditelné vrstvy, aby se bílé pomocné pozadí neuložilo

http://pc.poradna.net/file/view/6002-tlac16-jpg

10. Konečný vzhled obdélníkového tlačítka

http://pc.poradna.net/file/view/6003-tlacitko-gif

A co takhle oválné a stínované tlačítko?

Po sloučení viditelných a zahození neviditelných vrstev dostaneme jedinou vrstvu na průhledném pozadí. Kliknutím na Filtry -> Světlo a stín -> Vržený stín... si můžeme navolit např. barvu stínu, jestli se "rozleze" víc ve směru osy X nebo Y, intenzitu stínu.

http://pc.poradna.net/file/view/6004-oval1-jpg

http://pc.poradna.net/file/view/6005-oval2-jpg

Analogickým způsobem při použití oválných výběrů dosáhneme u tlačítka vzhledu "lentilky" :-)
http://pc.poradna.net/file/view/6006-ovalne-tlacit  ko-gif

Komentář k článku

1 Zadajte svou přezdívku:
2 Napište svůj komentář:
3 Pokud chcete dostat ban, zadejte libovolný text:

Zpět na články