Web Header
15.06.2008Komentáře (13) Kategorie: Adobe Photoshop » Webdesign

1.Tak tlačítka máme hotové, teď se pustíme do tvorby hlavičky – tzv. „headeru“. Zaprvé si uděláme ohraničení přibližně podle obrázku. Můžete buď lasem nebo perem. Použil jsem barvu #2e2e2e.

2.Teď si uděláme novou vrstvu a zase si buď vybereme celou plochu podle obrázku nebo můžeme použít jiný nástroj a vytvořit tak jiný výběr. Je to jen na vás.

3.Máme hotové ohraničení + vnitřek. Dále si vezmeme stejnou barvou a zase buď perem, nebo tužkou ohraničíme celý prostor.



img

4.Tak konečně to trošku vypadá k světu. Teď příjde na řadu další věc – název vašeho webu. Uděláme si stejné čáry jak jsou udělány na obrázku, použijeme buď pero nebo něco jiného. Trochu si ty čárky upravíme, vezmem si gumu a dáme 60 % krytí a vygumujeme rožky, aby nám vznikla špička jako na obrázku. Jestli nevíte kam nadpis umístit, podívejte se na další obrázek. Samozřejmně je ale volba pozice na vás.

img



img


img


5.A konečně nadpis umístíme mezi právé vytvořené linky, podobně jako na obrázku a opět vygumujeme konec.

6.Pod nadpis si můžete dát další text. V mém případě je to odkaz a slogan.

img

7.Do levého rohu se nejlépe hodí vlastní logo. Vytvoŕení logo zde nebudu rozepisovat, nechám si to do dalšího tutoriálu.

8.Pod logo zase můžeme umístit nějaký ten text…

9.Tak header máme skoro hotov, ale ještě pár doplňků. Vytvoříme novou vrstvu, vezmeme pero a uděláme podobnou čáru jak já na obrázku.

10.To samé jen do horního pravého rohu..

  • výsledek

    img

11.Ještě poslední úprava – opět si vezmeme pero a uděláme obdelník přes půl headru. A dále to postupujte podle obrázku.

img

  • dáme „blending options“ a vyplníme takto:

Ted tu vaši vrstvu přesuňte úplně na spod, pod písmo, ale ne úplně na spod, jinak by se vám to špatně překrylo.

12.Tak a je to hotovo díky za pozornost. Pokud by byl nějaký problém pište do komentářů – rád vám poradím.

A zde je hotové dílo.

img



Autor článku: ToTo | Vytisknout článek | Odeslat e-mailem

Hodnocení: 7.0/10 (36 hlasováno)

Komentáře (13)
od: ZiZi 17-06-2008 08:48:50
promin, ale i kdyz se ti povedly butonky, to logo se mi moc nelibi :roll: máš tam strašně moc místa všude okolo a pak na sebe nahuštěnej takovej chlum malinkejch písmenek.. opravdu to dohromady nedává moc hezkej efekt ;-)

od: ToTo 17-06-2008 11:35:28
To už je na každém jak si to udělá .. Já jsem tento tutoriál děla , aby se trochu přiučili a aby začátečníci veděli , o co jde... Jako mohl bych udělat web, u ktého je 300 vrstev jen u headru nebo tak, ale pochybuji , že začátečník by to zvládl... A taky u tohohle webu jsem se řídil " V jednoduchosti je krása " .. Počkej si na výsledek a uvidíš, že to dělá vcelku pěkný dojem ;-)

od: wayet 17-06-2008 21:44:45
Já teda musím souhlasit trošku se Zizim :-P je tam toho prázdného místa moc, možná malinko užší na výšku, jinak dobrý :-D

od: ToTo 18-06-2008 13:28:36
Jak jsem už říkal, to je na každém, jak si to kdo udělá.Já jsem tam dal jen málo věcí, aby to nebylo tak složité. ;-)

od: lefiath 18-06-2008 15:39:58
To to bude takhle malé? Chtělo by to kvalitnější náhledy. A trošku kompexnější postup, tohle začátečníkům moc nedá.

od: Graphix 22-06-2008 15:26:57
Nice, ještě dodělat a třeba i tut na nakódování by se hodil ;-) :-)

od: DjKURe 23-06-2008 10:20:30
Mno tak ja si myslim že je to v poho tut .... ale to modro bile logo se mi tam az taknelibi .... ovsem věc nazoru... kazdej jsme jinej že .....
Dobra prace ;)
Jo akorat bych ty obrazky hazel na jinej hosting aby nebyly tak zkomprimovany :/ treba na tinypic.com ;)

2lefiath: ty umis porad akorat buzerovat a kritizovat a všechno se ti nelibi ....

od: lefiath 24-06-2008 00:59:21
@DjKURe: Ty jsi tak hloupý, nebo ti připadá oprávněná výtka ke kvalitě náhledů jako buzerace? Koukal ses někdy na nějaký můj tutoriál? Snažím se dávat obrázky v dostatečné velikosti a nejvyšší kvalitě, a pokud vidím u jiných, že zbytečně obrázky komprimují (nemáme dnes již modemy, ale rychlý internet), tak se ozvu. Ale proč vůbec ztrácím čas s někým, komu jde jenom o to si kopnout, čert vem to, jestli mám pravdu nebo ne, že? Případně můžeš srovnat moje tutoriály na webdesign s tímto, jestli tedy jenom buzeruji...

Mimochodem, nevím jestli tutoriál na celou stránku je také duplikát, ale Toto se přiznal že tvorbu menu okopíroval zde: http://www.photoshop-garden.com/view_tut.php?id=31 Jde o sprosté vykradení a nemyslím si že jakákoliv seriózní stránka o návodech by s tímto chtěla cokoliv mít.

od: master2222 25-06-2008 20:42:39
2Lefiath: A co tohle http://www.tutorials.cz/clanek1199-starfield-aneb-hvezdne-pozadi#clanky a http://gallery.artofgregmartin.com/tuts_arts/making_a_star_field.html je sice pravda ze uvedl zdroj, ale v podstate je to taky preklad jako tohle. A nevyuzivejte to tu jako chat a zanechte hádek.

od: Frosty 26-06-2008 21:11:45
2master2222: ale uvedl zdroj .. a to je to nejdůležitější!

od: lefiath 10-07-2008 22:43:18
@master2222: Jistě, podle tebe je otevřené prohlášení, že to není jeho článek a vydávání něčeho za svojí práci to samé, viděl bych to na úpal. A neříkej mi, co mám dělat, když jsi očividně sám pořádně popletený!

od: virus.cz 12-07-2008 22:35:59
me to pripada hezky

od: jerry.tm 15-07-2008 18:45:26
Myslím si že je to pro úplného začátečníka trochu nejasný(hlavně ten začátek) ale jinak se mi to docela líbí

  Neregistrovaní uživatelé nemohou přidávat komentáře k článkům.