WWW.CYRON.CZ

Vše pro Váš Mageia Linux

GIMP (4 díl / 2 série) - kjůl tlačítko pro web


Silně jsem se inspiroval tady. Kromě jednoduššího postupu je však v mém návodu zásadní změna - výstupem není mnohatlačítková fixní lišta s oddělovači a textem, ale normální tlačítko + zvlášť uložený oddělovač. Proč? Protože z těchto komponent můžete snadno poskládat jakoukoliv tlačítkovou lištu včetně možnosti dynamické změny délky a textu ((X)HTML, CSS, atd). Stačí umět řezat a kopírovat...


Postup:

Vytvořte nový obrázek 200 x 100 px (délku natáhněte dle uvážení, mé tlačítko je celkem krátké a nechce se mi to dělat znovu), barvu pozadí zvolte průhlednou. Vrstvu přejmenujte na Tl-1.

Nový obrázek

Obr. 1: Nový obrázek


Pomocí nástroje Obdélníkový výběr nakreslete obdélník 140 x 50 px (o 40 px delší: 180 x 50). K upřesnění použijte nastavení v okně Nástroje, nezapomeňte zapnout Zaoblené rohy, poloměr 12. Nástrojem Plechovka obarvěte výběr barvou cdd0d4.

Výběr (1)

Obr. 2: Výběr (1)

Obarvený výběr (vrstva Tl-1)

Obr. 3: Obarvený výběr (vrstva Tl-1)


Vytvořte novou průhlednou vrstvu s názvem Tl-2. Nakreslete výběr, přesně shodný s přechozím, jen výšku změňťe na 48 px a polohu na 27.


Tentokrát k vyplnění použijte nástroj Mísení. Nastavte barvu popředí na 4f4f51 a barvu pozadí 9fa0a4, pak učiňte myší pohyb zdola přesně dle obrázku.

Trajektorie pohybu (vrstva Tl-2)

Obr. 4: Trajektorie pohybu (vrstva Tl-2)

Obarvený výběr (vrstva Tl-2)

Obr. 5: Obarvený výběr (vrstva Tl-2)

Klikněte pravým tlačítkem na vrstvu Tl-1, pak klikněte na Alfa do výběru. Poté klikněte na Vybrat -> Zmenšit a v dialogovém okně zadejte 2px.

Zmenšení výběru

Obr. 6: Zmenšení výběru

Výsledný zaoblený výběr

Obr. 7: Výsledný zaoblený výběr

Vytvořte novou vrstvu, pojmenujte ji Tl-3, znovu použije nástroj Mísení. Nastavte barvu popředí na a4a5a6 a barvu pozadí na c1c4c8, nyní učiňte myší tah dle následujícího obrázku.

Trajektorie pohybu (vrstva Tl-3)

Obr. 8: Trajektorie pohybu (vrstva Tl-3)

Obarvený výběr (vrstva Tl-3)

Obr. 9: Obarvený výběr (vrstva Tl-3)

Vyberte obdélník 132 (172) x 40 / 34 a 33, zaoblení 8. Nastavte barvu popředí na eff0f1, pozadí na a4a5a6.

Výběr (3)

Obr. 10: Výběr (3)

Myší učiňte pohyb dle obrázku.

Trajektorie pohybu (nový výběr, vrstva Tl-3)

Obr. 11: Trajektorie pohybu (nový výběr, vrstva Tl-3)

Nyní přidejte vržený stín: klepněte pravým tlačítkem na vrstvu Tl-1, zvolte Alfa do výběru, zvolte Filtry -> Světlo a stíny -> Vržený stín a zadejte 0 pro Offset X, 3 pro Offset Y, Poloměr nastavte na 3, černou Barvu a nakonec 80% Krytí.

Vržený stín

Obr. 12: Vržený stín

A základní tlačítko je na světě. Uložte si jej jako XCF. Všechny vrstvy slučte, obrázek ořízněte a uložte jako PNG.

Skoro hotovo

Obr. 13: Skoro hotovo

Tlačítko

Obr. 14: Tlačítko

Nakonec vytvořte oddělovače jednotlivých "tlačítek". Pomocí nástroje Obdélníkový výběr nakreslete obdélník široký 2 px, výška dle obrázku. Nástrojem Tužka výběr obarvěte (čára po levé straně barvou 838387, po pravé e8e9ea). Dejte Výběr Invertovat a stiskněte klávesu Delete. Vše krom oddělovače zmizí. Uložte.

Vytvořte oddělovač

Obr. 15: Vytvořte oddělovač

Smažte pozadí

Obr. 16: Smažte pozadí

Oddělovač

Obr. 17: Oddělovač

Prostým ořezáváním, skládáním a tak dále můžete snadno vytvořit jakkoli dlouhou lištu.

Pětitlačítková lišta

Obr. 18: Pětitlačítková lišta

Autor: Miroslav Cyroň

Datum: 11 května 2010

Vstup do diskuze

60 GB her pro Linux

Největší herní repozitář na světě

Žádost o příspěvek.

Žádost o příspěvek

Jak někteří z Vás vědí, jsem těžce invalidní, mobilní jen na invalidním vozíku. Práci na tomto webu věnuji cca 12 hodin denně.

V oblasti financování provozu tohoto webu (HW, hostingu, a podobných věcí) nemohu vše financovat ze svého, proto prosím o příspěvek. Nechci vydělávat, jen udržet provoz.

Pokud je Vám má práce k užitku, přispějte prosím jakoukoliv finanční částkou na účet číslo 178365410/0300. Děkuji moc.

Diskuze

Užitečné odkazy: