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:
-
14. listopadu 2024

fotograf
Photoshop tutoriál: Design webu - sdílení obrázků, 1. díl
19. května 2008, 00.00 | V následujícím seriálu se opět podíváme zblízka na webdesign -
tentokrát si za cíl dáme stránky určené primárně pouze pro nahrání vlastního
obrázku, který zůstane na serveru uložen, vy pak můžete danou adresu použít
například k umístění obrázku na fórum. V prvním díle vytvoříme hlavičku a
okolí obsahu.
Jako inspiraci si můžeme vzít například stránky http://uloz.to/, které ještě trochu víc ořežeme, a necháme pouze nejpodstatnější funkce. Těch je už tak dost málo, takže se budeme moci dostatečně soustředit na grafiku. A na co se můžete těšit?
1. díl - vytvoření základu stránek - hlavička, pozadí
2. díl - obsah stránek, animace načítání obrázku na server
3. díl - dodatečné drobnosti, stín, rohy, zapracování bannerů
Práci nám značně usnadní použití již hotové ikonky, jejíž návod je kompletně popsán ve článku Photoshop tutoriál: skleněná ikonka diskové jednotky. Vypadá přibližně takto:

Přebarvení na novou (modrou) barvu je otázka pár kliknutí. Pokud jste nedočkaví a nechce se vám ikonku tvořit od začátku, můžete si stáhnout hotový soubor zde.

Ikonku umístíme na modrý pruh - budoucí záhlaví. Barva pruhu je #0B8DC1 (barva pozadí je prozatím šedá #D3D9DC).

A rovnou přidáme nějaký ten název stránek. Protentokrát můžeme zvolit velký jemný font, např. Helveticu v jejím nejužším řezu (mimochodem je to stejný font jako ve článku Photoshop & Flash tutoriál: Online vánoční přání). Pokud font nemáte při ruce, postačí i standardní Arial. Barva textu není úplně bílá, ale světle modrá #D7F3FF.

Abychom nadpis trochu vylepšili, můžeme například pod písmeno S nakopírovat ještě jedno S, ovšem převrácené, čímž vznikne zajímavý tvar (který později ještě jednou použijeme k vylepšení ikonky).

Nyní se ale budeme chvíli věnovat pozadí hlavičky. Abychom soustředili pozornost na ikonku, vytvoříme ze stran ztmavení - a to kruhovým přechodem barvy modré #115B81.
Rychle tento přechod vytvoříme tak, že nastavíme přednastavený přechod z barvy popředí do průhledné a nahoře v liště zaškrtneme volbu Reverse. Následující obrázek pak ukazuje počátek a směr tažení přechodu... Vrstvě nezapomeneme nastavit ořezovou masku vrstvy předchozí (Ctrl + Alt + G), ať je vidět jen tam, kde má být.

Okolí ikonky je ale stále ještě tmavé. Proto si pomůžeme dalším kruhovým přechodem, tentokrát ale světle modrým #3DB5E9. Stejně tak dobře může posloužit i kliknutí velkým měkkým štětcem. Teď ikonka správně svítí.

Pro zpestření můžeme navíc nakopírovat některé znaky (např. S) z fontu, kterým nastavíme menší Krytí a zvětšíme je na stovky procent. Krajů hlavičky si nemusíme moc všímat - později je skryjeme a zůstane zobrazena pouze prostřední část.

Když už ikonka obsahuje odlesk, vytvoříme podobný i pod nadpisem. Princip je jednoduchý a všem jistě známý - zkopírované převrácené vrstvě se přidá maska vrstvy, do které se kreslí černým štětcem v místech, kde nemá být odlesk vidět.

A proto můžeme odlesk vylepšit tak, že vrstvu kopírujeme a postupně čím dál vím rozmazáváme - přičemž zároveň upravujeme masku tak, aby se rozmazání zvětšovalo směrem doprava. Na ukázce je dobře vidět, že pro určení viditelnosti byl použit lineární přechod z černé do bílé - je to nejrychlejší.

Nakonec můžeme kolem nejzářivějšího bodu přidat i malé "světlušky" - ve skutečnosti nakopírované znaky "8" z původního nadpisu. Jen je nezapomeňte pootáčet (Ctrl + T), ať nejsou všechny stejné.

Ty ovšem rozzáříme o dost jednodušší cestou - do nové vrstvy kreslíme měkkým bílým štětcem. Velikost rychle měníme klávesami [ a ].

Ve výsledku by hlavička mohla vypadat nějak takto:

Tudíž už jen stačí přidat slíbený S symbol na ikonku. Protože potřebujeme znak deformovat, vytvoříme nejprve základ jako znak, který následně převedeme na Vrstvu Tvaru - Layer - Type - Convert To Shape.

Poté S-ko deformujeme stejnojmennou funkcí (Ctrl + T) - stačí malinko zúžit horní část...

...a pak už jenom vrstvu zkopírovat, převrátit a stáhnout Krytí.

Pro zpestření můžeme vrstvu zkopírovat ještě jednou, malinko rozostřit, a poté některé části umazat. Písmeno pak lépe splyne s podkladem (vidět je to především v pravé části).

Tím máme hlavičku hotovou a na řadu přichází otázka, jak bude vypadat zbytek stránek. Na začátku jsme si řekli, že zkusíme zachovat pouze nejzákladnější funkce, tudíž můžeme zvolit malinko netradiční rozložení - které bude mít pevnou výšku i šířku.
Což mimo jiné znamená, že si můžeme dovolit udělat stránky malinko pootočené - a trochu více zajímavé. Začneme obdélníkem, kterým určíme velikost stránek a který rovnou pootočíme o pár stupňů (Ctrl + T).

Poté načteme výběr obdélníku (Ctrl + klik na vrstvu), výběr zúžíme o cca 7 px (Výběr - Změnit - Zúžit / Select - Modify - Contract)...

...a tento výběr přidáme hlavičce jako masku. Pro tento krok je samozřejmě nutné nejprve všechny odpovídající vrstvy umístit do složky - a masku přidat složce. Ostatně na náhledu je vše dostatečně dobře vidět. Pozadí můžeme změnit na modrou barvu (#1A95C8).

Poté bílému obdélníku přidáme efekt vrstvy Vytažení (Stroke), velikosti 7 px. Proč?

Abychom mohli do nové vrstvy nakreslit jemný přechod a obrys zůstal stále zachován. Přechod je z barvy #919EA6 do průhledné.

A protože chceme přechod opravdu jemný, nezapomeneme stáhnout vhodně krytí (na ukázce na 20 %).

Spodní část obdélníku rovněž vyplníme modrou barvou. Pokud se vám nechce znovu opakovat postup jako u hlavičky, postačí malý trik - složku hlavičky zkopírujeme, sloučíme vše do jedné vrstvy (Ctrl + E) a poté posuneme dospod.
A to je pro dnešek vše. Základ stránek máme hotový a jak sami vidíte, bylo to opravdu jednoduché. Kliknutím na následující obrázek zobrazíte stránky ve 100% velikosti.
A na co se těšit příště? V rychlosti přidáme obsah stránek, vytvoříme pár interaktivních prvků a skončíme jednoduchou animací nahrávání obrázku na server. Těšte se.
Tématické zařazení:
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
5. ledna 2017
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
14. října 2024
-
9. ledna 2025
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
9. ledna 2025
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI
-
17. ledna 2025
-
21. ledna 2025