Návody pro Gimp - Web 2.0

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

Kompletní průvodce tvorbou userbaru

Lukáš — Sun, 14 Mar 2010 17:54:35 +0000

Takzvaný „userbar“ se používá v diskusních fórech. Userbar je tenký proužek vyjadřující váš názor.

Na pozadí většiny userbarů se obvykle nachází šikmé čárkování, ještě před samotnou tvorbou tedy musíme vytvořit právě tento vzorek pro Gimp.

Otevřeme tedy Gimp a vytvoříme nový (průhledný) obrázek s rozměry 5×5px
Zvolíme nástroj tužka a nastavíme stopu Circle (01)
Nakreslíme čáru z horního levého do spodního pravého rohu
Klepneme na Soubor → Uložit. Vzorek pojmenujeme jako „mrizka.pat“(pattern - vzorek). Umístíme jej na plochu.
Ke vzorku můžeme přiřadit komentář. Klepneme na Uložit
Vzorky se obvykle načítají z:
C:\Users\<uživatelské jméno>\.gimp-2.6\patterns – Windows Vista/7
C:\Documents and Settings\<uživatelské jméno>\.gimp-2.6\patterns – XP bude tedy nejjednodušší nakopírovat vzorek tam.
V okně „Vzorky“ klepneme na „Aktualizovat vzorky“
Náš vzorek by se měl v Gimpu objevit
Gimp vypneme

Při tvorbě userbarů se používá speciální písmo Visitor, které není obsaženo ve Windows. Musíme jej tedy stáhnout odsud.

Přejdeme na:
Ovládací panely\Vzhled a přizpůsobení\Písma – (Windows Vista/7) a na:
Ovládací panely\Písma ve Windows XP. Sem překopírujeme všechny soubory písma Visitor. (VISITOR, visitor1, visitor2).

Nyní jíž můžeme přejít k samotné tvorbě. Gimp se možná bude načítat dlouho, to je způsobeno přidáním nových písem, mějte proto strpení.

Vytvoříme nový obrázek s rozměry 350×19px
Vybereme si dvě libovolné barvy
Nástrojem přechod vyplníme plátno
Vytvoříme novou vrstvu.
Vybereme nástroj Plechovka, typ vyplňování nastavíme na „Vyplňovat vzorkem“ a vybereme naši mřížku.
Vyplníne vrstvu. Její krytí nastavíme na cca 30%
Vytvoříme novou vrstvu s názvem „odlesk“
Nástrojem kruhový výběr vybereme horní polovinu obrázku
Výběr vyplníme bílou barvou a krytí nastavíme opět na cca 30%
Nyní přidáme libovolnou ikonku
Vrstvu s ikonou umístíme POD vrstvu odlesk. Pokud je kolem ikony bílá barva přejdeme na Barvy → Barva do alfy.
Napíšeme nějáký text a umístíme na pravou stranu obrázku. Musíme použít písmo Visitor TT1 BRK bílé barvy velikosti 10 s vypnutým vyhlazováním.
Klepneme na vrstvu s textem pravým tlačítkem a zvolíme „Velikost vrstvy dle obrázku“ a „Alfa do výběru“
Klepneme na Vybrat → Zvětšit. Zvětšíme o 1px
Výběr vyplníme černou barvou
Vytvoříme novou vrstvu s názvem „obrys“. Klepneme na Vybrat → Vše, Vybrat → Obvod. Vybereme 1px
Výběr vyplníme černou.
Ujistěte se, že vrstvy jsou ve správném pořadí
Hotovo

Kategorie:

Web 2.0

Webová grafika

Mrak

Lukáš — Mon, 21 Dec 2009 11:00:00 +0000

Vytvoříme obrázek s libovolnou velikostí
Barvu popředí nastavíme na #66aebd a barvu pozadí na #8fe1f3 a plátno vyplníme přechodem
Klepneme na nástroj elipsa – režim nastavíme na „Přidat k aktuálnímu výběru“
Začneme kreslit kroužky tak, abychom vytvořili tvar mraku (aby byla elipsa pravidelná, při kreslení podržíme Shift)
Výběr vyplníme bílou barvou
K mráčku přidáme stín, vytvoříme proto následující stopu
Vytvoříme novou vrstvu, nazveme ji třeba „stín“ krytí nastavíme na 40%
Barvu popředí nastavíme na #618d96 a naši nově vytvořenou stopou nakreslíme stín
Teď již stačí vytvořit tenký stín po obvodu mraku. Přejdeme na Filtry → Světlo a stín → Vržený stín a filtr nastavíme následovně:
Hotovo :)

Kategorie:

Web 2.0

Webová grafika

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

Nejlepší Bubble text na světě

Lukáš — Tue, 06 Oct 2009 16:35:21 +0000

Nadpis i perex berte s rezervou. Slovní spojení „Nejlepší na světě“ jsem do nadpisu i perexu umístil záměrně. Zjistil jsem totiž, že pokud se v nadpise objeví, článek má mnohem vyšší čtenost. viz. můj článek Nejlepší tapeta na světě :)

Vytvoříme nový obrázek s libovolnými rozměry
Napíšeme kýžený text písmem Sans Bold
Přejdeme na Vrstvy a zvolíme „Velikost vrstvy dle obrázku“
Nyní se přesuneme na Filtry → Rozostření → Gaussovské rozostření a nastavíme jej cca na 19. (Záleží na tom, jak veliké písmo máme, moje velikost je 83 Samozřejmě myslím velikost textu :))
Přejdeme na Barvy → Křivky tady se přepneme na Kanál Alfa a text zaostříme
Klepneme na vrstvu s textem a zvolíme „Alfa do výběru“
Vybereme pro náš text barvu a její tmavší odstín. Těmito barvami pomocí přechodu vyplníme text
Vytvoříme novou vrstvu a umístíme ji mezi vrstvu Pozadí a vrstvu s textem.

(přepneme se zpět na vrstvu s textem. Podle obrázku je to vrstva „gimp.4fan“)

Přepneme se na Kruhový výběr, kde nastavíme režim na Průnik aktuálním výběrem a označíme horní část textu.
Přepneme na nástroj Přechod, barvu popředí nastavíme bílou a režim na „Popředí do průhlednosti“. Přetáhneme označenou část textu.
U vrstvy s textem znovu zvolíme možnost „Alfa do výběru“ a přepneme se na dosud nevyužitou prostřední vrstvu
Přejdeme na menu Vybrat → Zvětšit a hodnotu nastavíme na 4. Výběr vyplníme tmavší barvou, než jakou má text. (také můžeme vyplnit výběr barvami textu přechodem. Musí však být opačný než u textu)
Na této vrstvě zvolíme znovu „Alfa do výběru“ a kruhovým výběrem vybereme spodní část textu. Vytvoříme odlesk (viz výše)
V tomto kroku skončíme. Samozřejmě můžete výtvor ještě vylepšit např. přidáním odrazu apod. To zde již ale popisovat nechci. Opakoval bych se. Pročtěte si články na toto téma, pokud Vás zajímá

Kategorie:

Text

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

Web 2.0 hvězda

Lukáš — Tue, 25 Aug 2009 21:47:11 +0000

Vytvoříme nový obrázek o rozměrech 200x200px
Přejdeme na Filtry → Vykreslení → Gfig
Vybereme nástroj „Vytvořit hvězdu“, počet stran nastavíme na 20 a Zvolíme brush Circle (01)
Hvězda je vytvořena ale nevypadá tak jak chceme, klepneme na nástroj upravit jeden bod a hvězdu přetvoříme k naší představě
Vybereme nástroj „Kouzelná hůlka“ a klepneme dovnitř hvězdy
Obsah vyplníme barevným přechodem
Přejdeme na Filtry → Rozostření → Gaussovo rozostření, nastavíme na 10px
Vytvoříme novou vrstvu a pomocí eliptického výběru vytvoříme odlesk
Doplníme nějaký ten text a máme hotovo!

Kategorie:

Ikony

Web 2.0

Webová grafika

Lesklé logo

Lukáš — Sun, 23 Aug 2009 17:36:21 +0000

Vytvoříme nový obrázek s libovolnými rozměry
Zvolíme nějaké pěkné písmo, já použiju Mekanik LET Plaint
Napíšeme nějaký text, ujistíme se, že náš text je alespoň 100px od okrajů. Pokud zvolíme text s víc než jedním slovem, píšeme bez mezer a první písmeno každého slova napíšeme Velkým tiskacím.
Klepneme pravým tlačítkem na vrstvu s textem a v nabídce vybereme „Alfa do výběru“
Klepneme na nástroj „Kouzelná hůlka“, pomocí ní označíme druhé slovo a vybarvíme jinou barvou
Klepneme na volbu Vybrat a zvolíme „Nic“
Klepneme na vrstvu s textem pravým tlačítkem, a zvolíme „Alfa do výběru“
Vytvoříme novou vrstvu. Nazveme ji např. Okraj a umístíme ji pod vrstvu s textem
Klepneme na Vybrat → Zvětšit. Zvětšíme cca o 15 – 25, záleží na velikosti Vašeho textu.
Výběr vyplníme černou barvou
Přejdeme na Vybrat → Nic
Přepneme na Výběr eliptických oblastí a překryjeme asi polovinu loga
Vytvoříme novou vrstvu s názvem „Lesk“ a přemístíme ji úplně nahoru
Náš kruhový výběr vyplníme bílou barvou a krytí vrstvy nastavíme na 20%
Hotovo :-)

Zdroj: http://www.fused-graphics.com/?p=20

Kategorie:

Text

Web 2.0

Webová grafika