LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> Gimp - GRAFIKA PRO WEB (6)

Dnešní díl se bude zabývat problematikou tvorby tlačítek pro webové stránky.

27.5.2006 06:00 | Yippee | Články autora | přečteno 39626×

Na několika příkladech si ukážeme, jak vytvářet různé typy tlačítek (od malých po velké, od jednodušších po těžší). Časem tyto znalosti využijeme, až se pustíme do tvorby kompletního grafického layoutu stránek.

Tlačítka jsou nedílnou součástí webových prezentací. Nejčastěji se s jejich pomocí vytváří grafická navigace prezentací (menu).

Rychle vytvořená tlačítka

Na následujících řádcích se seznámíme s nejjednodušším způsobem tvorby tlačítek pomocí Fu skriptů.

Tlačítko 1

Tento způsob vytvoření tlačítka je nejméně náročným způsobem, stačí použít Fu skript a tlačítko je hotové. Skript spustíme v hlavním okně Rozš. --> Skript-fu --> Tlačítka --> Jednoduché zkosené tlačítko. Výběr předcházejících voleb je dobře zřejmý z následujícího screenshotu.

V dialogovém okně, které se nám otevře, je nutné zadat text zobrazený na tlačítku. Vybrat si velikost a typ fontu použitého pro popis tlačítka a tři barvy, ze kterých bude tlačítko složeno. Dialogové okno s vlastnostmi skriptu si můžete prohlédnout na obrázku.

Po stisku tlačítka Budiž v okně skriptu je tlačítko vygenerováno. Výsledné tlačítko bude vypadat jako na následujícm příkladu.

Chceme-li vytvořit i verzi zamáčknutého tlačítka, stačí zatrhnout při tvorbě volbu stisknuto.

Tlačítko 2

Druhý fu-skript vytvářející tlačítka generuje tlačítko se zakulacenými rohy. Možnosti nastavení tohoto skriptu je možné vyčíst z následujícího screenshotu.

Tento skript je schopen vytvořit všechny tři stavy tlačítka najednou (nestisknuté tlačítko, hover tlačítko, stisknuté tlačítko). U tohoto skriptu je těžké zkombinovat veškeré použité barvy tak, aby výsledné tlačítko vypadalo elegantně. Na následujícím screenshotu si je možné prohlédnout všechny tři verze tlačítka.

Jednotlivé verze tlačítka je možné vidět na dalších obrázcích.

Ručně tvořená tlačítka

Tlačítko 3

Vytvoříme nový dokument. Pro tento tutoriál jsem vytvořila obrázek o velikosti 200 x 200 px a nechala jsem bílé pozadí. Vybereme nástroj obdélníkový výběr a nakreslíme s ním obdélník o velikosti 130 x 30 px, který bude tvořit základ našeho tlačítka. Velikost vybrané oblasti si je možné již při výběru kontrolovat ve stavovém řádku okna obrázku. Nyní vložíme novou vrstvu (Vrstva --> Nová vrstva), ve které vyplníme vybranou obdélníkovou oblast černou barvou (Úpravy --> Vyplnit barvou popředí).

 

Tlačítko opět vybereme (třeba pomocí magické hůlky), vybranou oblast následně zmenšíme o 1px (Vybrat --> Zmenšit). Obsah vybrané oblasti odstraníme Upravit --> Vymazat a dostaneme jen okraje. Výsledek je zřejmý ze screenshotu.

V dalším kroku vymažeme bod o velikosti jednoho pixelu na všech rozích okrajů. Nejlepší je tyto body nakreslit bílým štětcem. Přesnějších výsledků dosáhnete, pokud tento krok budete provádět na zvětšeném obrázku. Já jsem si ho zvětšila na 4500%.

 

Magickou hůlkou si vybereme vnitřek tlačítka a zmenšíme jej stejným postupem jako výše o jeden pixel. Aktivní výběr vyplníme gradientem. Já jsem použila gradient s těmito barvami popředí (R 1; G 125; B 255) a pozadí (R 0; G 70; B 210). Lineární gradient jsem použila na vrstvě pozadí, vytáhla jsem ho ze shora dolů, ale ne přes celou výšku tlačítka.

Posledním krokem je vepsání požadovaného textu na tlačítko (použila jsem font Vdub, který se mi na tomto tlačítku velmi líbí).

Tlačítko 4

Začneme opět novým dokumentem, ve kterém vytvoříme v nové vrstvě obdélníkový výběr o velikosti 65x24px. Výběr obtáhneme za pomocí: Upravit --> Vykreslit Výběr (Tloušťka čáry 1 px). Dále body na rozích vykreslíme bílou barvou (stejný postup, jako v předcházejícím příkladu). Čáry si vybereme magickou hůlkou a vyplníme námi požadovanou barvou. Já jsem použila tmavě modrou barvu (R 0; G 0; B 100).

Vyplníme vnitřní část obdélníku jakoukoliv barvou, ovšem odlišnou od okrajů. V mém příkladu jsem použila tuto R 141; G 173; B 84. Obdélníkovým výběrem nakreslíme ohraničení na levé a horní straně obdélníku. Výběr oblasti je proveden s režimem přidání k výběru. Tento výběr vyplníme světlejší barvou než která je uvnitř obdélníku. Výběr je zřejmý z následujícího screenshotu.

Obdobným způsobem vytvoříme druhý výběr: pravou a spodní hranu s přidáním jednoho pixelu v levém dolním rohu a vyplníme tmavší barvou. Pro lepší představu přikládám screenshot.

Posledním krokem je vložení požadovaného textu. Já jsem použila font URW Bookman.

Tlačítko 5

V Gimpu je velmi jednoduchá tvorba tlačítek s kulatými rohy. U obdélníkového výběru stačí zaktivovat volbu Prolnout okraje a nastavit u ní velikost zaoblení.

Zkusíme si tedy nějaké oválné tlačítko vytvořit. Vybereme obdélníkový výběr a vytvoříme tlačítko o velikosti 74x24px. Nastavení prolnutí okrajů u obdélníkového výběru najdeme ve vlastnostech výběru, které nalezneme v hlavním okně. Poloměr prolnutých okrajů nastavíme na hodnotu 10. Dále tlačítko obtáhneme za pomoci volby Upravit --> Vykreslit výběr. Vše provádíme na vrstvě pozadí.

Dále můžeme postupovat třeba takto: zmenšíme vnitřní výběr o jeden pixel a vyplníme ho nějakou barvou a nakonec přidáme text. Výsledné tlačítko může vypadat například takto:

Tlačítko 6

Vytvoříme nový dokument o velikosti 200x100 px a vyplníme jej například šedou barvou (R 205; G 205; B 205). Vytvoříme si kopii vrstvy pozadí (Vrstva --> Duplikovat vrstvu), ve které vytvoříme tlačítko s kulatými rohy (o velikosti cca 125x25 px). Vše provádíme na stejné vrstvě a obtáhneme okraj tlačítka černou barvou (postup je stejný jako v předešlých příkladech). Po všech předchozích krocích byste měli mít dvě vrstvy, jak je zřejmé ze screenshotu.

 

Stále máme vybranou vrstvu s tlačítkem, a tuto vrstvu zkopírujeme (Vrstva --> Duplikovat vrstvu). Ve spodní vrstvě (bereme v úvahu pouze shodné vrstvy) vyplníme výběr libovolným barevným přechodem. Směr přechodu je na našem uvážení, já jsem použila vertikální směr, jak je zřejmé z následujícího screnshotu.

 

U nejvrchnější z vrstev nastavíme režim prolnutí na Násobení. Vybereme vnitřní část tlačítka nejlépe pomocí kouzelné hůlky, za pomoci nástroje zmenšení, zmenšíme výběr tak, aby jeho šířka byla 34 px. Výběr vyplníme přechodem tak jako jsem to udělala já, do této levé části tlačítka je možné vložit libovolný symbol.

V posledním kroku vložíme na tlačítko požadovaný text a tlačítko uložíme. Před uložením je vhodné tlačítko oříznout o pomocnou šedivou vrstvu. Výsledek si můžete prohlédnout na následujím obrázku.

Tlačítko 7

Vytvoříme nový dokument s bílým pozadím, ve kterém následně pomocí výběrového nástroje elipsa vybereme základní tvar. Velikost a orientace elipsy je vidět na screenschotu.

Výběr vyplníme požadovaným barevným přechodem, barvu popředí jsem nastavila na R 26; G 133; B 215 a barvu pozadí R 25; G 84; B 171. K vyplnění použijeme nástroj Vyplnit přechodem a styl přechodu od popředí do pozadí a jím shora dolů vyplníme výběr.

Vytvoříme novou průhlednou vrstvu (Vrstava --> Nová vrstva). Zmenšíme eliptický výběr o 10 px pomocí Vybrat --> Zmenšit, a následně vybereme mezikruží o šířce 10 px (Vybrat --> Obvod). Barvu popředí nastavíme na R 133; G 201; B 251 a pomocí neostrého štětce velikosti 19 px vykreslíme z leva do prava vybranou oblast.

Nyní můžeme experimentovat s prolínámím vrstev. Následujících několik obrázků by vám mohlo posloužit jako inspirace. Byly použity tyto režimy: násobení, obraz, tmavnutí, pouze zesvětlení a jas.

Pomocí nástoje pro vložení textu vložíme požadovaný text na tlačítko (použila jsem font Almonte Snow).

Pokud chcete, aby tlačítka nebyla fádní, je možné před vložením textu aplikovat filtry z kategorie zkreslení a získat tak nestandardní tvary. Na následujících obrázcích je pár tvarů pro ukázku.

Tlačítko 8

Vytvoříme nový dokument, ve kterém vybereme obdélníkový výběr. Pomocí Vybrat --> Zaoblený obdélník se zapnutou vlastností konkávní vykrojíme z výběru rohy. Poloměr vykrojení závisí na velikosti tlačítka a na vašem vkusu. Pomocí menu Vybrat --> Obvod, vybereme obvod tlačítka, který vyplníme libovolnou texturou (nejlépe vypadají dřevěné textury).

Kouzelnou hůlkou vybereme vnitřní část tlačítka, a následně jej vyplníme vhodnou barvou (R 255; G 232; B 205. Vyplnění výběru je vhodné provádět na nové vrstvě.

Nyní vložíme na tlačítko požadovaný text. Vrstvu s textem zduplikujeme (Vrstva --> Duplikovat vrstvu). Spodní textovouh vrstvu rozostříme pomocí filtru Gaussovo rozostření.

U vrchní textové vrstvy nastavíme režim prolnutí na Ostré světlo, a tlačítko je hotovo.

Tlačítko 9

Vytvoříme nový dokument. Já jsem použila tyto rozměry: 120 x 65px. V dalším kroku vybereme nástroj pro kreslení obdélníku a nakreslíme námi požadované tlačítko s oválnými rohy. Výběr nakreslíme do nové vrstvy, a použijeme z místní nabídky vrstvy volbu Alfa do výběru, abychom mohli kdykoliv výběr zaktivovat. Výběr vyplníme přechodem jdoucím od bílé barvy k černé. Můžeme použít jak radiální tak lineární přechod.

Nyní zmenšíme výběr (Vybrat --> Zmenšit) o 1-4 px (v závislosti na velikosti tlačítka, jelikož je mé tlačítko celkem malé budu zmenšovat pouze o jeden pixel) a vyplníme jej inverzním přechodem (jdoucím od černé barvy k bílé).

Opět aktivní výběr zmenšíme o 1-4 px a vyplníme zbytek černou barvou, tím dostaneme okraj tlačítka. Použijeme při vyplňování volbu: Upravit --> Vyplnit barvou popředí.

Stále necháme výběr aktivní, duplikujeme tuto vrstvu 3x (Vrstva --> Duplikovat vrstvu). U první kopie vrstvy vyplníme výběr bílou barvou a zinvertujeme jej (CTRL+I) a následně vyplníme zbytek černou barvou. Poté vybereme obsah celé vrstvy, pomocí klávesové zkratky (CTRL+A) nebo menu Vybrat --> Vše a aplikujeme Filtry --> Gaussovou rozostření s použitým rozmazáním 3 px.

Pomocí alfy vytvoříme výběr, který zinvertujeme a v další kopii vrstvy obsah výběru vymažeme. Opět zinvertujeme výběr, vyplníme ho nějakou barvou a v případě potřeby vepíšeme text.

Můžeme experimentovat s různými režimy prolnutí vrstev.

V příštím díle se seznámíme s animacemi pro web.

Verze pro tisk

pridej.cz

 

DISKUZE

slovo "webovský" 29.5.2006 01:40 Michal Vrchota
|- Re: slovo "webovský" 29.5.2006 22:52 Ondřej Čečák
|- Re: slovo "webovský" 30.5.2006 09:01 Yippee
| L Re: slovo "webovský" 30.5.2006 09:17 o.k.
|   L Re: slovo "webovský" 31.5.2006 00:00 Michal Vrchota
L Re: slovo "webovský" 31.5.2006 00:58 Aleš Hakl
Ořezání tlačítka 13.8.2006 08:44 PBR




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze