Jdi na obsah Jdi na menu
 

Webové tlačítko

27. 1. 2008

Webové tlačítko, ktoré budeme robiť, sa dá dobre použiť aj napr. u estranky.cz. Návod je urobený pre Gimp 2.4.2.. Nakoniec využitie tlačítka vidíte hneď v tomto návode. Kliknutím na tlačítko si můžete pozrieť tento návod s väčšími náhľadmi vo formáte .pdf.

 

Obrazek

 

POSTUP:

 

1/ Otvorme si obrázok napr. 640x480 px. Nástrojom Výber obdĺžnika pri navolených Zaoblených okrajoch urobíme cca. v strede výber.

 

Obrazek

Ďalej nástrojom Vyplňovanie farebným prechodom vyfarbíme výber. Farbu popredia navoľme tmavo šedú. Farbu pozadia svetlo šedú. Smer vyfarbenia 45 stupňov. Nastavenie nástroja a farieb je na obrázku.

Obrazek

2/ Teraz zmenšíme stále aktívne okraje výberu. Kliknime v hlavnom menu hore Vybrať/ Zmenšiť. Zmenšíme podľa veľkosti tlačítka. Ja napr. o 3 px. Potom rovnako ako v kroku 1. vyfarbíme výber ale opačným smerom (270 stupňov). Výsledok je na obrázku.

 

Obrazek

3/ Znovu zmenšíme výber napr. o 3 px. Výber teraz vyfarbíme kontinuálne.

 

Obrazek

4/ Vytvorme, pri stále aktívnych hraniciach výberu, novú priehľadnú vrstvu. V tejto novej vrstve vyplňme kontinuálne výber čiernou farbou. V hlavnom menu kliknite Vybrať/ Zaoblenie ... Zaoblíme napr. o 30 px.

Obrazek

Zaoblený výber vymažeme. Výsledok ...

 

Obrazek

5/ Teraz urobíme odlesk v hornej časti tlačítka. Otvoríme novú priehľadnú vrstvu. Nazvem ju odlesk. Nástrojom výber obdĺžniku vyberieme hranice dolesku. Nezabudnime vhodne zaobliť okraje výberu (20 px). Výber môžeme zaobliť. Tým sa po vyplnení farbou stanú okraje menej ostré. Nájdete to v hlavnom menu Vybrať/ Zaoblenie...

 

Obrazek

Potom farebným prechodom do stratena vyplníme výber bielou farbou.

Obrazek

Prekrytie odlesku je dobré doladiť. Napríklad pridaním kópie tejto vrstvy. Tým sa odlesk viac zvýrazní. Môžeme tiež nastaviť krytie vrstvy.To isté môžeme urobiť s vrstvou tieň.

 

6/ V poslednom kroku pridáme nápis do tlačítka. Medzi vrstvu Pozadia a tieň vložíme ešte jednu, kam dáme nápis. Vrstva odlesk musí byť na vrchu. Aby kryla ostatné. Po vložení textu, môžeme pridať efekt tieňovania textu. Ten je vidieť vo vrstve Drop Shadow vygenerovanou Gimpom.

Obrazek

Ak chceme aby text vyzeral zaujímavejšie, urobme toto. Aktivujme vrstvu text. Kliknime Vrstva/ Priehľadnosť/ Alfa do výberu. Tým vyberieme okraj textu. Zväčšíme okraj napr. o 2 px. Otvorme novú priehľadnú vrstvu. Zväčšený výber textu v tejto vrstve vyfarbíme bielou farbou.

 

Obrazek

Ak chceme uložiť iba tlačítko bez bieleho pozadia, zlúčime všetky vrstvy do jednej (Vrstva/ Sloučit dole - od vrchnej vrstvy). Premenoval som ju z Pozadia na tlačítko.

 

Obrazek

Nástrojom Približný výber som označil biele pozadie a vymazal ho.

Obrazek

V hlavnom menu Obrázok kliknime Automaticky orezať obrázok. Ostane iba tlačítko. Je pravda, že vďaka zaoblenému tvaru tlačítka ostanú v rohoch tlačítka medzery. Tie sú v uložení do formátu .jpg biele. Pozadie väčšiny www stránok je biele. Tým rohy splynú.

 

 

 

 

 

 

 

Komentáře

Přidat komentář

Přehled komentářů

Zkratka

(m@rtlin, 25. 10. 2010 20:38)

Aneb zjnednodušeně
Soubor-Vytvořit-Tlačítka-Oblé tlačítko
:-D

dotaz

(Karkulajzna, 23. 7. 2009 10:26)

můžu se zeptat, co je to kontinuální? A kde to najdu? Díky

čo je kontinuálne?

(sanfu007, 17. 6. 2009 15:20)

čo je "kontinuálne"?

dobry

(plko, 13. 4. 2008 11:01)

tyhle navody jsou SUPER!!!