Návody pro Gimp - Tlačítka

Loading Bar

Lukáš — Fri, 20 Dec 2013 18:55:52 +0000

Co budeme potřebovat?

Layer Effects

Začínáme

Vytvoříme nový obrázek s rozměry 1280×720px a barvou popředí #222222
Přejdeme na menu Filtry → Šum → Šum HSV. Hodnoty nastavíme na:
Zadržení: 3
Odstín: 20
Sytost: 0
Hodnota: 0
Vytvoříme novou vrstvu. Nazveme ji např. „Odlesk“
Ujistíme se, že pracujeme na vrstvě „Odlesk“
Zvolíme nástroj Přechod (L). Barvu popředí nastavíme na bílou (#FFFFFF). Tvar přechodu zvolíme “Kruhový“ a přechod “Popředí do průhlednosti“
Táhneme z horní poloviny plátna zhruba do tří čtvrtin, pak ještě jednou, zhruba do třetiny plátna viz. obrázek:
Vrstvě nastavíme režim “Překrývání“
Vytvoříme novou vrstvu, nazveme ji např. „loading_bar“. Ujistíme se, že na pracujeme právě na této vrstvě.
Zvolíme nástroj „Výběr obdelníku (R)“. V jeho nastavení zaškrtneme volbu „Zaoblené rohy“ a poloměr nastavíme na hodnotu 80.
Provedeme výběr podobný tomu na obrázku níže (v tomto tutoriálu má výběr rozměry 872×40px)
Vyplníme výběr bílou barvou a režim vrstvy nastavíme opět na “Překrývání“.
Přejdeme na menu Script-fu → Layer Effects → Inner Shadow. Hodnoty nastavíme podle obrázku níž:
Vznikla nám nová vrstva s názvem “loading_bar-innershadow“. My se ale přepneme na vrstvu níž – „loading_bar“
Přejdeme na menu Script-fu → Layer Effects → Stroke a hodnoty nastavíme podle obrázku:
Vznikla nám další vrstva “loading_bar-stroke“. Přepne me se zpět na vrstvu“loading_bar“
Přejdeme na menu Script-fu → Layer Effects → Drop Shadow. Hodnoty nastavíme podle obrázku:
Vznikla nová vrstva s názvem “loading_bar-dropshadow“. Snížíme jí krytí na cca 35%
Vytvoříme novou vrstvu s názvem “loading_bar vypln“. Umístíme ji nad vrstvu “loading_bar“. Vrstvy by nyní měly být poskládány takto:
Klepneme pravým tlačítkem na vrstvu “loading_bar“ a zvolíme „Alfa do výběru“.
Přepneme se zpět na vrstvu “loading_bar vypln“
Zvolíme nástroj Přechod (L). Nastavíme tvar „lineární“ přechod „Pastel Rainbow“ a vyplníme výběr.
Vytvoříme vrstvu „tlacitko“, kterou umístíme nad všechny ostatní vrstvy.
Zvolíme nástroj Eliptický výběr (E). V jeho nastavení zaškrtneme políčko napevno: Poměr stran. Ujistíme se, že poměr stran je nastaven na hodnotu 1:1. To nám zajistí tvorbu přesného kruhu.
Provedeme výběr na libovolném místě našeho duhového loading baru. (pracujeme na vrstvě „tlacitko“)
Zvolíme nástroj Přechod (L). Přechod nastavíme na „Brushed Aluminium“, tvar na „Kuželový (symetrický)“. Táhneme ze středu kruhového výběru k jeho okraji. Dostaneme toto:
Přejdeme na menu Script-fu → Layer Effects → Drop Shadow. Hodnoty nastavíme podle obrázku: (pracujeme pořád na vrstvě „tlacitko“)
Vrátíme se zpět na vrstvu “tlacitko“ a přejdeme na Script-fu → Layer Effects → Inner Shadow. Hodnoty nastavíme podle obrázku níž:
Vrátíme se na vrstvu “loading_bar vypln“ Obdelníkovým výběrem provedeme označíme vše od “tlačítka“ směrem doprava a stiskneme klávesu Delete.
Přejdeme na menu Vybrat → Nic . Ujistíme se, že pracujeme na vrstvě “loading_bar vypln“
Přejdeme na Script-fu → Layer Effects → Outer Glow a nastavíme hodnoty z obrázku:
Nově vzniklé vrstvě “loading_bar vypln-outerglow“ snížíme krytí na cca 30%
Hotovo :)

Zdroj:

https://www.youtube.com/watch?v=4fkKzEtB1KU

Kategorie:

Tlačítka

Web 2.0

Webová grafika

Attachment	Size
loading_bar.xcf.gz	809.06 KB

Zasněžené tlačítko

Lukáš — Sun, 16 Jun 2013 18:03:25 +0000

Vytvoříme si nový soubor s rozměry 640×480px, vyplníme jej barvou #1 2233e
Vytvoříme novou vrstvu, nazveme ji např. Tlacitko
Vybereme nástroj Obdelníkový výběr . Zaškrtneme volbu „Zaoblené rohy“ - poloměr nastavíme na hodnotu 1 0. Ve středu plátna provedeme obdelníkopvý výběr (285×78px v tomto příkladu)
Vybereme nástroj Přechod – nastavíme si přechod Nauseating Headache
Vyplníme výběr přechodem
Přejdeme na Barvy → Jas/Kontrast nastavíme hodnoty na:
Jas: -15
Kontrast: -55
Přejdeme na Barvy → Odbarvit, ponecháme výchozí nastavení a potvrdíme.
Vytvoříme novou (průhlednou) vrstvu. Nazveme ji např. Tlacitko – odlesky
Vybereme znovu nástroj Přechod – nastavíme jej na „Popředí do průhlednosti“. S přechodem vyplníme spodní část tlačítka
Nyní nastavíme barvu popředí na bílou. Přechodem vyplníme horní část tlačítka. Dostaneme něco takového:
Přepneme se na vrstvu tlacitko. Přejdeme na Barvy → Obarvit. Hodnoty nastavíme na:
Odstín: 210
Sytost: 60
Světlost: 15
Vytvoříme novou vrstvu „snih“
Vybereme nástroj Štětec . Zvolíme stopu „Acrylic 02“ (Velikost 7-10) a nak reslíme sníh okolo tlačítka
Nástrojem Rozmazání rozmažeme sníh stopou Hardness 075. Přejdeme na Filtry → Rozmazat → Rozostřit. Dostaneme něco takového:
Přejdeme na Barvy → Křivky. Kanál nastavíme na Alfa. Křivku posuneme tak, aby se sníh zaostřil, viz:
Přepneme se na vrstvu tlacitko. Přejdeme na Filtry → Světlo a stín → Vržený stín. Hodnoty nastavíme na:
Posun ve směru X: 0
Posun ve směru Y: 0
Poloměr rozostření: 100
Barva: #00a8ff
Krytí: 100
Povolit změnu velikosti: ne
Nově vzniklé vrstvě Drop Shadow nastavíme režim Tvrdé světlo.
Duplikujeme vrstvu snih (vrstva → duplikovat vrstvu) a přejdeme na Filtry → Rozmazat → Gaussovské rozostření, hodnoty nastavíme na 20. Dostaneme něco takového:
Nastavíme si na barvu popředí na #3cc1ff. Zamkneme alfa kanál a režim vrstvy nastavíme na „Jas“
Přejdeme na Upravit → Vyplnit barvou popředí
Hotovo :)

Zdroj:

http://www.gimpusers.de/tutorials/eis-schnee-button

Kategorie:

Tlačítka

Webová grafika

Attachment	Size
XCF soubor ke stažení - 1. varianta	199.13 KB
XCF soubor ke stažení - 2. varianta	204.5 KB

Skleněné tlačítko

Lukáš — Wed, 28 Oct 2009 20:38:11 +0000

Vytvoříme nový obrázek s rozměry 150x35px
Barvu popředí nastavíme na #005a71 a barvu pozadí na #00eaff
Přepneme se na Přechod (L) a přetáhneme obrázek od shora dolů
Vytvoříme novou (průhlednou) vrstvu, pojmenujeme ji „Odlesk“
Jako barvu popředí nastavíme bílou (#FFFFFF), režim přechodu nastavíme na „Popředí do průhlednosti“ a obrázek přetáhneme od shora dolů
Klepneme na nástroj „Obdélníkový výběr“ a označíme pomocí něj dolní část plátna. Viz. Obrázek níže:
Přejdeme na „Úpravy“ a zvolíme Vymazat (Delete)
Nyní přidáme rámeček. Zvolíme Vybrat → Vše, Vybrat → Obvod. Hodnotu nastavíme na 1.
Vytvoříme novou vrstvu. Nazveme ji „Rámeček“ a výběr vyplníme černou barvou.
Vytvoříme novou vrstvu nazveme ji třeba „Přechod“
Barvu popředí nastavíme na černou (#000000). Ujistíme se, že je režim přechodu nastavený na „Popředí do průhlednosti“ a opět přetáhneme obrázek se shora dolů a poté zprava doleva.
Vrstvě přechod nastavíme režim na „Sytost“
Na tlačítko napíšeme libovolný text. Musí však být pod vrstvou „Přechod“ a pod odleskem. (Krytí vrstvy „Rámeček“ nastavíme na 20%)
Nyní tlačítko dokončíme. Přejdeme na Úpravy → Kopírovat viditelné a Úpravy → Vložit.
Přejdeme na Barvy → Jas-Kontrast a nstavíme následující:
Hotovo :)

Zdroj: http://www.gimpusers.com/tutorials/create-soft-glassy-buttons.html

Kategorie:

Tlačítka

Web 2.0

Webová grafika

Tlačítko ve stylu Web 2.0

Lukáš — Mon, 31 Aug 2009 19:40:42 +0000

Tip: nechce se Vám to číst? Podívejte se na video!

Vytvoříme nový obrázek s rozměry 200x100px
Vytvoříme novou vrstvu, klepneme na „obdélníkový výběr“ a vytvoříme obdélník se zaoblenými rohy (poloměr 15), rozměry nastavíme na 150x60px
Vyplníme jej nějakou pěknou barvou, např. #66a7ff
Přidáme novou vrstvu a vytvoříme nový obdélník umístěný ve stávajícím
Klepneme na nástroj „Přechod“ Zvolíme „Popředí do průhlednosti“ a barvu popředí nastavíme bílou. Přechodem vyplníme obdélník.
Zbývá nám jen doplnit text, zvolte nějaký pěkný font
Pokud chcete tlačítko ještě nějak vylepšit, můžete mu přidat stín

Kategorie:

Tlačítka

Web 2.0

Webová grafika

Tlačítko ve stylu Apple iPhone

Lukáš — Thu, 20 Aug 2009 12:54:34 +0000

Vytvoříme obrázek o rozměrech 125x125px
Vytvoříme novou vrstvu a zvolíme obdélníkový výběr
Obtáhneme celou vrstvu obdélníkovým výběrem. Nyní výběr trošku zmenšíme, to nám zajistí, že ikonka bude zarovnaná na střed.

V menu „Vybrat“ klepneme na „Zaoblený obdélník“. Poloměr nastavíme na 20%.
Nastavíme barvu popředí na #407dce a barvu pozadí na #72d2e8.
Vytvořte barevný přechod (L) od shora dolů. Měli byste dostat něco takového:

Z menu „Filtry“ vybereme položku „světlo a stín“ a poté „vržený stín“. Hodnoty nastavíme takto: posun X: 0; posun Y: 4; poloměr rozostření: 10px; Krytí 40. Dostanete toto:

Vytvoříme novou vrstvu a kruhovým výběrem označte horní polovinu obrázku.
Výběr vyplníme bílou barvou #FFFFFF. Krytí vrstvy nastavíme na 20%.

Máme Hotovo! Jednoduché že? Nyní stačí doplnit libovolnou ikonku.

Kategorie:

Ikony

Tlačítka