Tlačítko?
Pro příklad: Máme tlačítka <input type="submit"> nebo <input type="button"> a nechceme je v barvách systému.
Co pro to udělat?
Obrázek
Jako první věc potěbujeme obrázek. Obrázku musíme potom nastavit rozměry, takže si například určímě, že tlačítko bude mít na výšku 30 pixelů a šířka bude relevantní.
Otevřeme si GIMP, dáme "Vytvořit nový" (Ctrl+N) a nastavíme výšku 30px a šířku 10px. Obrázek se bude opakovat v ose X (horizontálně), proto není zapotřebí moc šířka.
Tlačítka se nejčastěji barví pomocí přechodu. To je takovéto
tlačítko v levém okně. Barva přechodu se určuje pomocí obou barev.Nejlepší je nastavit 1. barvě světlejší odstín a 2. trochu tmavší odstín stejné barvy. Můžete ale použít jakoukoli, která se vám bude líbít.
Přechod vykonáme tak, že klikneme do nejhornější části obrázku a táhneme až dolů. Pokusíme se o to, aby byla linka přechodu dokonale vertikální a neměla na sobě žádné "zuby".
V momentě, kdy tlačítko pustíme, vytvoří se přechod. Obrázek ještě můžeme obohatit takovým "záhybem", kdy nastavíme 1. barvě ještě tmavší odstín, než měla barva 2. a u toho náhledu přechodu (v en: Gradient) nastavíme FG do průhledna. (4. položka)
Nyní znovu klikneme po nazoomování obrázku na vršek obrázku (asi na 1. pixel shora) a táhneme přibližně 4px dolů. (pozice kurzoru se ukazuje ve stavové liště okna obrázku)
Poté pustíme a jednoduchý ohyb je hotov.
Obrázek uložíme například jako pozadi-tlacitka.png.
 | |
| Takhle může vypadat váš obrázek na pozadí tlčítka. (zvětšeno) |
Jak to dáme na tlačítko?
Obrázek musíme nastavit tlačítku pomocí kaskádových stylů. Proto vložíme do stylu následující kód.
input.tlacitko
{
height: 20px; /* vyska tlacitka je nyni 20px */
padding: 5px 12px; /* tlacitko se roztahne na nasledujici velikost V׊ - 2×5=10, 20+10=30 - vyska tlacitka je nyni 30px */
font-size: 13px; /* text v tlacitku ma vysku 13px */
font-family: arial; /* pismo tlacitka je Arial */
color: #fff; /* barva pisma v tlacitku ma bilou barvu */
background: url("pozadi-tlacitka.png") repeat-x #06F; /* obrazek se bude opakovat na ose X - v pripade, ze se nenacetl, zobrazi se barva*/
border: 1px solid #fff; /* tlacitko bude mit bily ramecek o 1px*/
margin: 0px 5px; /* text po stranach bude o 5px odrazen, aby se nelepil na tlacitko */
}
Kód vypadá složitě, ale je velmi jednoduchý, stačí jen změnit adresu obrázku a bude vše fungovat.
Styl se naordinuje na všechny tlačítka vypadající takhle <input type="submit" class="tlacitko" value="text tlacitka">.
Header?
Header je více známý pod pojmem logo webu, nebo třebahlavní obrázek.
Pokud má náš web pevnou šířku (často to tak bývá), zjistíme si jakou.
V GIMPU dáme vytvořit nový obrázek. Nastavíme mu šířku, jakou má náš web, pro ukázku třeba 800px a výšku né moc velkou. Třeba 250px.
V každém headeru by měl být název nebo adresa webu celý vzhled by měl být v tématu webu a hodí se i obrázek.
Jako první vložíme text (tl. A). Text dáme pěkně velký a nastavíme si pěkné písmo, třeba URW Chancery L Medium Italic.
Písmo můžeme různě nastylovat, nastavíme mu ale růžovofialovou barvu. Před sloučením vrstev odklikneme Vyhlazování.
Sloučíme vrstvy pomocí Ctrl+M (Merge).
Nyní označíme barvu textu pomocí tlačítka
tak, že na text s výraznou barvou klikneme.Znovu uděláme přechod například ze světle žluté do tmavší. Znovu nastavíme Gradient z FB do BG a přetáhneme od vršku textu až po spodek.
Také můžeme text vylepšit tak, že ho orámujeme. Filtr > Světlo a stín > Stín.
Nastavíme hodnoty: X=0, Y=0, poloměr 15px, 80%, nepovolíme změnu velikosti a vytvořímě stín. Potom Ctrl+Shift+F a změníme poloměr na 2px a průhlednost na 100%.
Potom dáme 3× za sebou Ctrl+F a 1× Ctrl+M.
Nakonec můžeme doplnit obrázky, které můžeme stejným způsobem ohraničit a celkově si s headerem pohrát.
Může vypadat třeba takhle:
 |
| Header není reklama, je to pouze ukázka. |
V příštím díle se podíváme na kreslení v gimpu.
Pěkný, škoda, že na to nemám čas. :)
OdpovědětVymazat