Realizace banneru a jeho umístění do stránky

Obsah lekce:

Banner (záhlaví stránky)

Nejprve stručně o banneru:

• Spolu s navigací nejdůležitějším prvkem stránky
• Stránku identifikuje
• Stručně informuje
• Dává najevo, čeho se stránky týkají
• Měl by zaujmout

Ukázky bannerů

Ukažme si několik různých bannerů, které by mohly figurovat jako součást designu webové stránky. Ukázky reprezentují několik tématicky různých typů bannerů. Ke každému banneru je uveden seznam klíčových prvků banneru a nástrojů, které je potřeba použít v programu Adobe Photoshop k jejich vytvoření.

Banner 1

Tento banner tvoří jednoduché informativní záhlaví stránky určené pro výuku informatiky a grafiky na webovém portále www.gjszlin.cz. Celý banner je vyplněn šedou barvou (barva pozadí webu) a doplněn textem a malým obrázkem. Znak zavináč a obrázek jsou vyplněny zelenou barvou a mají na sobě aplikován efekt vnitřního stínu.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 900x117px.
2. Vyplnit pozadí šedou barvou (nástroj plechovka barvy).
3. Napsat požadovaný text (nástroj Text - volba vhodného fontu a barvy).
4. Zvětšení velikosti znaku zavináč, změna barvy (označení znaku v textu, jeho zvětšení a případně posun).
5. Aplikace efektu vnitřního stínu na znak zavináč (styly vrstvy).
6. Vložení doplňkového obrázku a aplikace obdobného stylu vrstvy jako u zavináče.

Banner 2

Tento oranžový banner je záhlavím stránky s metodikou výuky pomocí software Cabri Geometry II plus. Banner obsahuje logo softwaru Cabri Geometry II plus a informaci o tom, že se jedná o metodiku pro učitele. Jinak je banner tvořen abstraktním pozadím v oranžové barvě.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 970x120px.
2. Vyplnit pozadí barevným přechodem (nástroj přechod).
3. Vytvoření nové vrstvy, obdélníku tmavě oranžové barvy (barva vybrána nástrojem kapátko z oficiálního loga software) a aplikace stylu vrstvy na vytvoření tmavé čáry okolo obdélnáku (styly vrstvy - vytažení).
4. Napsat požadovaný text "METODIKA PRO UČITELE"(nástroj Text - volba vhodného fontu a barvy).
5. Vložení loga programu a případná úprava jeho velikosti (nástroj transformace a posun).
6. Vložení doplňkových pruhů nad logo programu (nová vrstva, nástroj výběr a vyplnění obdélníků barvou nástrojem plechovka barvy).

Banner 3

Banner školních studentských novin Renomé obsahuje logo studentských novin (nápis Renomé), informaci o tom, že se jedná o studentské noviny a fotografii osoby, která si čte noviny.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 850x140px.
2. Vyplnit pozadí černou barvou (nástroj plechovka barvy).
3. Vložení fotografie osoby s novinami a případná úprava jeho velikosti a polohy (nástroj transformace a posun).
4. Vložení obrázku s logem "Renomé", úprava velikosti a polohy a aplikace stylu vrstvy na vytvoření vnitřního stínu (styly vrstvy - vnitřní záře).
5. Napsat požadovaný text "Studentské noviny"(nástroj Text - volba vhodného fontu a barvy).

Banner 4

Banner s tématikou sportu. Obsahuje tři fotografie s tenkým rámečkem vedle sebe, nápis SPORT a informační text "Galerie nejlepších". Nápis "SPORT" má písmeno "O" tvořeno obrázkem stopek, aby se zdůraznilo sportovní zaměření stránek. Středem banneru vede průhledný barevný pruh (jeho účelem je mj. zlepšit čitelnost textu).

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 900x169px.
2. Vyplnit pozadí černou barvou (nástroj plechovka barvy).
3. Vložení tří fotografií, případná úprava jejich velikosti a polohy (nástroj transformace a posun), ořez nežádoucích částí fotografií (nástroj obdélníkový výběr a mazání vybraného obsahu klávesou delete). Aplikace efektu bílého okraje (styly vrstvy - vytažení).
4. Vložení obrázku stopek, úprava velikosti a polohy a aplikace stylu vrstvy na vytvoření vnějšího bílého okraje (styly vrstvy - vytažení).
5. Napsat požadovaný text tvořící zbytek slova "SPORT" a "GALERIE NEJLEPŠÍCH" (nástroj Text - volba vhodného fontu a barvy).
6. Vytvoření nové vrstvy, obdélníku vyplněného barvou (nástroj obdélníkový výběr a plechovka barvy). Nastavení průhlednosti vrstvy (krytí).

Banner 5

Velmi často se jako banner používají fotografie související se zaměřením webu. V tomto případě se jedná o banner z webu Charlese Burtona, který se specializuje na lekce kondičního cvičení. Fotografie je momentka pořízení při jedné z lekcí a pěkně ilustruje atmosféru cvičení a temperament lektora.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 900x207px.
2. Vložit fotografii úprava její velikosti a polohy (nástroj transformace a posun).
3. Aplikace stylu vrstvy na vytvoření vnitřního stínu fotografie (styly vrstvy - vnitřní záře).
4. Aplikace efektu pruhů "scan-line effect". Jak tohoto efektu docílit můžene zkusit dohledat na google například řetězcem "horizontal lines photoshop" (viz například http://creativebits.org/photoshop/scan_line_effect_in_photoshop nebo pomocí fireworks http://www.entheosweb.com/fireworks/scanned_line_image.asp).

Banner 6

U mnoha internetových prezentací se často v banneru používá logo společnosti a nějaký "univerzální" doplňkový obrázek (fotografie). V případě následucícího banneru bylo použito logo ve spojitosti s makro forografií listu po dešti. Upozorníme zde na průhledný bílý obdélník pod logem společnosti. Tohoto grafického prvku se velmi často užívá v případech, kdy chcete zvýšit čitelnost textu, který má jako pozadí fotografii.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 805x200px.
2. Vložit fotografii úprava její velikosti a polohy (nástroj transformace a posun). Fotografii je možno dle potřeby dosaturovat a zaostřit.
3. Vytvoření horního obdélníku s přechodem a nápisem "Human Resource Management".
4. Vytvoření obdélníkového výběru v nové vrstvě a vyplnění bílou barvou + nastavení vhodné průhlednosti.
5. Vložení loga společnosti (úprava velikosti a polohy).

Banner 7

U tohoto banneru došlo ke sloučení grafického prvku banneru s pozadím stránky a banner tedy může zasahovat bez problémů i mimo standardní šířku stránky. Je ovšem třeba myslet na to, že kdyby měl uživatel monitor, který má na šířku větší počet pixelů než je šířka obrázku, tak se mu zobrazí standardní pozadí stránky.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 1900x330px.
2. Vytvoření barevného přechodu v horní části banneru.
3. Vložit logo společnosti, úprava jeho velikosti a polohy (nástroj transformace a posun). Na logo je aplikován efekt vnější žáře.
4. Vložení doplňkového obrázku chmýří vyjadřujícího hebkost.

Banner 8

Tento banner fiktivního svatebního studia má poněkud větší výšku než je obvyklé. Záleží, zda je v souladu s představou zákazníka a mnohdy tvoří banner velkou část obsahu stránky (chceme-li sdělit zásadní nebo efektní vizuální informaci). Často se používá u stránek, které mají návštěvníka výrazněji vizuálně oslovit. Takové stránky často neobsahují příliš textových informací (například stránky fotografů, umělců apod.). Obsahem takových stránek bývají zpravidla pouze kontaktní informace, stručný popis činnosti a fotogalerie.

Kroky postupu v Adobe Photoshopu:

1. Vytvořit nový soubor rozměru 700x406px.
2. Vložit fotografii na pozadí.
3. Ornamenty jsou tvořeny štětci ve Photoshopu (mnoho je ke stažení na webu).
4. Vložení nadpisu "Wedding studio" a aplikace efektu obrysu a vnější záře.
5. Obrázek ve spodní části přechází "do ztracena". K tomuto byla použita maska vrstvy a nástroj přechod.

Úkol 1

Pokuste se charakterizovat hlavní vlastnosti banneru pro webové stránky. Zodpovězte zejména následující otázky:

1. K čemu slouží na webové stránce banner?
2. Jaké rozměry má banner pro web?
3. V jakém grafickém formátu byste banner uložili pro použití na webu?
4. Jaké funkce Adobe Photoshopu zpravidla u tvorby banneru použijete?

Úkol 2

Pokuste se sami v programu Adobe Photoshop s pomocí nápovědy zvládnout následující úkoly:

• Vytvoření obrázku o rozměrech 800x200px (rozlišení 72) a vložení fotografie (ze souboru z webu).
• Nástroj text - vložení textu (řádkový, odstavcový), změna velikosti znaků, změna mezer mezi znaky (proklad), změna barvy textu.
• Nástroj přechod - vytvoření přechodu dvou libovolných barev. Nástroj kapátko.
• Nástroj transformace - práce s nástrojem transformace (zmenšení a zvětšení a rotace fotografie).
• Nástroj obdélníkový výběr a plechovka barvy - práce s výběry (zmenšení a zvětšení výběru, ořezávání obrázku, vyplnění výběru barvou).
• Styly vrstvy - efekt stínu, vnitřní záře, vytažení a dalši možnosti.
• Uložit obrázek pro web - možnosti nastavení kvality obrázku při uložení pro použití na webu.

Domácí úkol

Pokuste se sami v programu Adobe Photoshop s pomocí přiložených souborů (plavkyne.jpg, vhodný obrázek stopek zkuste vyhledat v katalogu obrázků Microsoft Office nebo na Internetu) vytvořit následující banner:

Otázky

1. K čemu slouží na webové stránce banner?
2. Jaké rozměry má banner pro web?
3. V jakém grafickém formátu byste banner uložili pro použití na webu?
4. Jaké funkce Adobe Photoshopu zpravidla u tvorby banneru použijete? Ukažte jak se s těmito nástroji a funkcemi pracuje.