Photoshop tutoriál: Pozadí ve stylu Windows Vista - Grafika.cz - vše o počítačové grafice

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Poptávka práce


Photoshop

Photoshop tutoriál: Pozadí ve stylu Windows Vista

29. února 2008, 00.00 | V dnešním článku se podíváme na to, jak vytvořit pěkné pozadí na plochu po
vzoru Windows Vista. Černé pozadí vyplněné stylovým přechodem, přes které se
rýsují natáhnuté abstraktní tvary zelené a modré barvy.

Začneme ukázkou, kterou budeme chtít napodobit. Pozadí si můžete stáhnout v plné kvalitě ze stránek www.windowsultimate.com

Začneme v Photoshopu novým dokumentem velikosti obrazovky. V mém případě jsem zvolil rozlišení 1024*768, abych jej mohl vidět celé ve 100% velikosti bez posunování. Pozadí dokumentu vyplníme černou barvou - D (vyresetovat barvy), Alt + Backspace (vyplnit barvou popředí). Zvolíme nástroj Mnohoúhelníkové laso (Polygonal Lasso Tool), označíme kus dokumentu a do nové vrstvy nakreslíme nástrojem Přechod (Gradient Tool) přechod z bílé do průhledné. Takto několikrát po sobě (vždy do nové vrstvy).

Aby bylo pozadí méně výrazné, stáhneme vrstvám Krytí (Opacity).

Vrstvy sloučíme do jedné (Ctrl + E) a rozostříme je filtrem Gaussovské Rozostření (Gaussian Blur). Zde je zmenšená ukázka celého dokumentu.

Aby bylo v některých místech pozadí výraznější, můžeme dál pokračovat v kreslení. Například kruhovým gradientem z bílé do průhledné...

...který opět stáhneme na sotva znatelnou úroveň.

Ostatně, přechodů z bílé do průhledné není nikdy dost...

...jen je potřeba vždy vhodně vrstvě stáhnout krytí.

Aby bylo pozadí zajímavější, můžeme všechny vrstvy zkopírovat ještě jednou a pootočit (Ctrl + T), popř. posunout.

Tím ale začne vznikat nehezký kaz, kdy 256 odstínů šedé nestačí pro pokrytí přechodů a obrázek se začne nehezky vykreslovat.

Proto není od věci nakonec všechny vrstvy sloučit do jedné a opět malinko rozmazat. Tím se nehezké přechody vyhladí, ale bohužel vznikne jiný nedostatek - na krajích se obrázek ztmaví...

...což lze napravit větším dokumentem, než je rozlišení obrazovky, nebo třeba přidat dostatečně široký rámeček. A pro příště si to zapamatovat.

Tím máme náhodné přechody na pozadí vyřešeny a můžeme se pustit do popředí - modrých a zelených oblouků. Začneme tím, že nakreslíme elipsu nástrojem Elipsa (Ellipse Tool), dostatečně velkou, aby zasahovala i mimo dokument. Zvolíme nástroj pro výběr cesty (A), cestu označíme, zkopírujeme (Ctrl + C), vložíme (Ctrl + V), a posuneme, popř. zmenšíme (Ctrl + T). Této cestě nastavíme vykreslení na odečítání, takže bude vidět pouze prostor mezi těmito dvěma elipsami.

Vrstvu přebarvíme na modrou barvu (#62AAF4) a několikrát ji zkopírujeme, zmenšíme, zvětšíme, posuneme, popř. změníme Krytí (Opacity).

Podobně můžeme začít i se zelenými tahy, které mají barvu #20EDC4.

V tomto okamžiku jsem se ale rozhodl malinko ztmavit přechody na pozadí, protože na sebe zbytečně strhávají moc pozornosti. Takto to bude lepší.

Pokračujeme tím, že vytvoříme větší tvary, které budou zasahovat do všech tahů. Později tyto tvary rozmažeme a získáme tím ještě větší záři. Jeden velký tvar pro modré tahy...

...jeden pro zelené. Tyto tvary nejsou nic jiného, než zkopírované tvary předchozí, přičemž nástrojem pro výběr cesty vždy vybereme menší elipsu, kterou ještě znovu zmenšíme.

Barvy tvarů jsou stále stejné, jen je stažené Krytí na sotva znatelnou úroveň (5-10%), což je vidět i na následujícím obrázku.

Všechny modré i zelené vrstvy umístíme do nové složky, kterou zkopírujeme a malinko posuneme bokem a pootočíme.

A začneme s přisvěcováním. První krok bude změna interakce na Linear Dodge (Lineárně zesvětlit)...

...druhý krok bude přidání efektů vrstvy Vržený Stín (Drop Shadow) nastavený na velkou velikost, barvu podle vrstvy (tj. modrou nebo zelenou) a interakci opět Lineárně zesvětlit (Linear Dodge).

Protože zelených vrstev máme v dokumentu poměrně málo, můžeme opět pár přikopírovat.

A styl vrstvy zkopírovat i na všechny vrstvy modré (pouze změníme efekt vrstvy na modrou barvu). Zmenšený dokument vypadá přibližně takto, což už je přibližně to, čemu jsme se chtěli přiblížit.

Další zesvětlování je jen stále dokola to samé. Můžeme například použít velké vrstvy z minulých kroků, které sloučíme do jedné vrstvy a nastavíme interakci na Lineárně zesvětlit (Linear Dodge). Vrstvě následně přidáme masku vrstvy, do které necháme vykreslit oblaka (Filtr - Vykreslení - Oblaka / Filter - Render - Clouds). To proto, aby byla vrstva vidět pouze v některých místech.

Následně pokud zpět zobrazíme všechny vrstvy, bude světelný efekt ještě mnohem výraznější.

Pomoci si ale můžeme i ručně. Například tak, že vytvoříme novou vrstvu úprav Jas a kontrast (Brightness & Contrast), zvýšíme jas, masku vrstvy vyplníme černou barvou (efekt nebude vidět nikde) a následně měkkým bílým štětcem v masce kreslíme. Tím budeme zobrazovat efekt - tj. zvyšovat jas. Tuto techniku můžeme použít ke konečnému přisvícení napojení modrých a zelených pruhů.

Zde je náhled na výsledek ve 100% velikosti. Použitím vrstvy úprav vzniknout doslova přepaly.

A to by mohlo být vše. Tedy pro začátek. Opět se nebojte experimentovat a zkoušet co se dá, dokud vám to výkon počítače dovolí. Kliknutím na následující obrázek se můžete podívat na výsledek dnešního snažení ve 100% velikosti při rozlišení 1024*768 px.

Protože veškeré vrstvy zasahovaly i mimo dokument, není příprava většího rozlišení nijak náročná. Buď zvětšíme velikost dokumentu (vrstvy tvarů se zvětší a protože jsou reprezentovány vektorem, nedojde ke ztrátě kvality), nebo zvětšíme plátno (vrstvy zůstanou stále stejně velké, ale odkryje se i plocha, která vidět nebyla). Druhý postup byl použit u následujícího obrázku ve velikosti 1280*1024. Ten by sice ještě nějaké dodatečné úpravy zasloužil, ale... to už zůstává na vás. Hodně štěstí při práci!


Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.

Tématické zařazení:

 » Rubriky  » VSE  

 » Rubriky  » Go verze  

 » Rubriky  » Design  

 » Rubriky  » Photoshop  

Poslat článek

Nyní máte možnost poslat odkaz článku svým přátelům:

Váš e-mail:

(Není povinný)

E-mail adresáta:

Odkaz článku:

Vzkaz:

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: