GIMP - návrh webového tlačítka

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í.

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

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.

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.

Potřebné pořadí vrstev je toto

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.

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.)

5. Zmenšení výběru

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

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

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.

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.

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

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.

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í.

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

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í)

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

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

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.

Analogickým způsobem při použití oválných výběrů dosáhneme u tlačítka vzhledu "lentilky"