Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Rychlý tip - tvorba zajímavého menu

3. 12. 2010 v 23:13 46 Rychlý tip - tvorba zajímavého menu

Tvorba zajímavé webové navigace nebývá legrace - je těžké být originální v něčem, co bylo 100x převráceno naruby a použito jinými. Tak alespoň nemusíte používat obvyklé konstrukce s hranatými rohy, nebo kulatými "tlačítkovými" styly. Zde je můj tip na jednoduchou a vkusnou navigaci.

Při procházce mých nových designů musím říct, že jsem to s používáním tohoto menu přehnal - ale je tak snadné ho začít používat, protože vypadá lépe a elegantněji než nějaká obyčejná navigace (můj dojem), a k jeho tvorbě stačí minimální úsilí. Základem je používání vektorových nástrojů - nikdy na menu nepoužívejte nic jiného než tvary, alespoň na tvorbu základu. Přechody a odlesky klidně dělejte bez vektorů, ale tvary, ze kterých navigaci stavíte, pro vaše pohodlí a snadnou manipulaci do budoucna musí být ve vektoru.

Jednoduchou transformací vektorového obdélníku si ukážeme, jak vytvořit zajímavý tvar. Pro demonstraci jsem vybral svůj nejoblíbenější. Začneme vložením zaobleného obdélníku, zaoblení 10 bodů. Nezapomeňte se ujistit, že máte zapnuté přitahování na obrazové body (jinak bude tvar nepřesný).

Mezitím si připravíme nějaký text, který nám bude simulovat menu. Třeba seznam vašich oblíbených jídel, cokoliv. První věc, která odliší obyčejný zaoblený obdélník je transformace (CTRL + T) - pravým tlačítkem vyvolejte menu, vyberte Perspektivu a uchopte horní roh (levý nebo pravý, je to jedno) nástrojem Přímý Výběr (Ctrl + A) - mírně zatáhněte dovnitř, aby se vytvořil náklon. Potom postup zopakujte (jen táhněte ven) na spodním rohu. Měli byste táhnout opravdu mírně, ideálně o něco méně než já na ukázce.

Upravte odsazení vůči textu a máte první fázi našeho menu.

My ale půjdeme dál - co takhle udělat z tvaru pouze vykrojení většího tvaru? Vykrojení můžete provést jak chcete, ale pro lidi, kteří nejsou sběhlí s vektorovými nástroji uvedu jednu z možností. Vždy využíváme přičítání/odečítání od oblasti tvaru v horním panelu. Nyní máte vytvořený základní tvar. Do stejné vektorové vrstvy vložte velký obdélník, který bude tvořit pozadí. (Před vkládáním nového obdélníku přidržte SHIFT, tím přidáváte více vektorových tvarů do jedné vrstvy.) Po přidání označte oba tvary a nastavte prolnutí na vyloučit (poslední volba v horním panelu), čímž se odečte místo, kde se oba tvary překrývají.

Pak můžeme nerušeně pokračovat.

Prostým vykrojením dostanete možná zajímavý, ale neúplný výsledek, který zaujme spíš lidi, znuděné klasickými tvary jako já, ale ne běžné návštěvníky. Chce to něco lépe tvarovaného. Čeká nás ruční práce s transformací, protože tak dosáhneme přesnějších výsledků než prací s perem od oka. (Protože to by také byl způsob jak podobné rámečky dělat, ale u technických věcí nemám metodu od oka rád.) Nejprve si znovu zkopírujte vykrojení, pak Přímým Výběrem (SHIFT + A) vyberte 2 spodní rohy kopie výběru. Transformujte je a zvolte převrátit vodorovně. Body se nám přesunou na druhou stranu, ale to nejdůležitější, samotné převrácení, jsme udělali právě teď. Přesuňte je zpět vlevo a díky původnímu vykrojení (se kterým porovnáte šikmé strany) přesuňte body přímo na původní pozici. Originální vykrojení už můžete vymazat, zbývá si pohrát s vodítky a trochu posunout spodní bod, abyste se co nejvíc přiblížili vrchnímu zaoblení. V ideálním případě by se vodítka měla scházet, pokud byste je prodloužili.

Pro druhou stranu vykrojení jen zkopírujte, přesuňte a původní zaoblené vykrojení trochu odsuňte, aby nebylo v cestě našemu vylepšenému. A to je jen jeden příklad - je mnoho možností, jak si s transformací a objekty vyhrát. Zkoušejte kombinovat, vytvářejte nové tvary, nezasekněte se jako já, buďte kreativní.

Ps. Tím myslím skutečně kreativní, ne tak, že nic neumíte (jako se někteří chytráci propagují jako kreativci, protože nic o tom, že by něco uměli si napsat nemůžou).

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : K dispozici - Stáhnout

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #46
  • AkdGames
  • 18. January 2017 | 20:29
  • Skupina: Registrovaní Uživatelé

Byli by jste prosím ochotni udělat to formou videa?

  • #45
  • Tetriarch
  • 24. February 2013 | 22:49
  • Skupina: Registrovaní Uživatelé

No chrom tohle má v sobě, už jsem na to přišel, díky moc lefe :) moc si vážím tvé pomoci :)

  • #44
  • lefiath
  • 24. February 2013 | 13:40
  • Skupina: Správci

Abys kódu lépe porozuměl, stáhni si doplněk Firebug (pro firefox, Chrome a další prohlížeče mají nějaké obdobné věci, nevím jak se jmenují), díky kterému si můžeš zaměřit konkrétní prvky na stránkách a podívat se jaké styly k nim přes kód vedou.

  • #43
  • Tetriarch
  • 21. February 2013 | 19:50
  • Skupina: Registrovaní Uživatelé

No abych pravdu přiznal, tak jsem se to snažil z kódu vyčíst, ale nějak se ti v tom kodu nevyznam - netvrdim ze ho píšeš nepřehleně, spíš nemám asi ještě uplně dovednosti v tomhle ohledu abych se s tím dobře a snadno vypořádal..

  • #42
  • lefiath
  • 10. February 2013 | 23:04
  • Skupina: Správci

Přesně tak jak popisuješ :) Můžeš se podívat do kódu webu, protože je zde použit přesně ten styl menu.

  • #41
  • Tetriarch
  • 5. February 2013 | 21:28
  • Skupina: Registrovaní Uživatelé

Ahoj, chtěl jsem se jen zeptat, jak takováhle tlačítka potom řežeš pro design a pak jak je kóduješ, beru totiž v potaz, že tlačítko dle mého skromného úsudku by se mělo řezat na 3 díly levý okraj, střed a pravý okraj, protože ty tlačítka budou různě veliká....

  • #40
  • lefiath
  • 29. May 2012 | 18:44
  • Skupina: Správci

Sleduješ přesně postup? Žlutý přechod je přidán přes styly vrstvy, jde o naprosto základní věc, se kterou jsem ani nechtěl ztrácet čas - pokud máš problémy s tím že nevíš jak třeba přidat přechod vrstvě, doporučuji ti abys nejprve prošel základy Photoshopu (na výběr jsou 2 seriály).

Případně napiš kde ses zasekl a já ti zkusím pomoct. Článek není pro úplné začátečníky, ale i tak jsem se ho snažil popsat podrobně. Je ale pravda že je tam jedna matoucí pasáž s vyloučením, které jsem tam raději ani neměl dávat, asi zapracuju na menší předělávce.

  • #39
  • náhodný kolemdoucí
  • 24. May 2012 | 11:14
  • Skupina: Neregistrovaní

Ahoj,
jsem asi pomalejší jelikož vysvětlení moc nerozumím. Lze třeba ukázat vrstvy? Jakým způsobem je tam dán žlutý přechod? Jak mohou být v jedné vektorové vrstvě dvě vykrojení aniž by se nepřekrývaly když je nastaveno "vyloučit". Díky

  • #38
  • create
  • 30. November 2011 | 19:15
  • Skupina: Registrovaní Uživatelé

Zkoušel jsem to a zasekl jsem se u bodu, kde říkáš aby jsme "znovu zkopírovali vykrojení". Nevím jak na to, asi jsem jen pořádně nepochopil co se po mě v tom kroku chce, ale pochopil jsem, že bez něho to nejde. Mohl by jsi to nějak objasnit? Nebo vysvětlit jak na to? Popřípadě mě odkázat na nějaký jiný tutoriál zde, kde se tento krok popisuje detailněji?
Jinak ještě před přečtením tohoto tutoriálu, jsem menu zkoušel podle sebe, došel jsem ke stejnému výsledku a to jsem to dělal úplně jinak :)
Předem děkuju za jakoukoliv radu.

  • #37
  • Dead
  • 27. July 2011 | 16:05
  • Skupina: Registrovaní Uživatelé

"pak Přímým Výběrem (CTRL + A)" -> Mělo by být (SHIFT + A)

  • #36
  • Dead
  • 27. July 2011 | 12:41
  • Skupina: Registrovaní Uživatelé

Aha, já právě možnost vykrojení vekt. tvarů znám, ale trošku jinak, takhle by mi to nenapadlo. Ostatně způsob, kterým jsem to zkoušel dát dohromady mám také od tebe z nějakého tutoriálu, akorát tady jsem byl zmaten. Takže díky moc ;-)

  • #35
  • lefiath
  • 26. July 2011 | 21:13
  • Skupina: Správci

Přidal jsem doplňující pasáž - vykrajování tvarů mezi sebou funguje stejně jako u výběrů (viz aktuální článek o výběrových nástrojích), takže jsem si myslel, že většina lidí s tím nebude mít problém.

  • #34
  • Dead
  • 25. July 2011 | 13:10
  • Skupina: Registrovaní Uživatelé

No, přidám se k ostatním s prosbou o objasnění "vykrojení". Celé tohle nechápu. Šel jsem krok po kroku, ale ať dělám co dělám, tenhle obrázek prostě nedostanu ("http://img.tutoriarts.cz/lef/75/75_04.png"). Mám udělané pozadí pro hlavičku, kde bude i menu, mám připravený onen tvar, ale dál ani krok. Sice jsi psal, že se zmiňuješ, ale napsal jsi, že to vykrojíme. To mi moc nepomohlo :)

Díky za odpověď

  • #33
  • lefiath
  • 22. July 2011 | 18:40
  • Skupina: Správci

Arial.

  • #32
  • mumble
  • 22. July 2011 | 12:25
  • Skupina: Neregistrovaní

ahojte, prosim vas co je to za font v tom menu? neviem sa knemu dopatrat .. :-O dakujem za odpoved

  • #31
  • FilCZek
  • 30. April 2011 | 03:13
  • Skupina: Registrovaní Uživatelé

Ahoj lefe, měl bych dotaz hned u prvního obrázku. Když používáš nějaký vektorový nástroje, tak se mi tam nedaří vměstnat barva. Ty tam máš styl: žlutou a barva: černou, ale mě se tam daří akorád naházet jen přednastavený styly. Mám CS3, mohl by jsi mě nějak nasměrovat? Jinak supr tut, teď začínám s tvorbou webů a tohle se více než hodí ;-)

  • #30
  • IsawU
  • 31. March 2011 | 15:33
  • Skupina: Neregistrovaní

hm vidím labužnické menu :-D :-D :-D :-D

  • #29
  • Neregistrovaný kolemjdoucí
  • 18. March 2011 | 18:29
  • Skupina: Neregistrovaní

ocenil by som videonávod,keďže som začiatočník :-( napr. neviem aký štýl bol použitý pri vytváraní toho obdlžniku
dalej neviem ako zapnuť to priťahovanie na obrazové body atd. videonávod by ma potešil viac :-/ ale aby som len nekritizoval výsledok sa mi páči 8-) pekné menu

  • #28
  • Shorty5
  • 18. February 2011 | 00:05
  • Skupina: Neregistrovaní

Tak .. a teď ještě zjistit jak to nakódovat :-D

  • #27
  • lefiath
  • 24. January 2011 | 10:18
  • Skupina: Správci

Informace o autorovi jsou také v patičce, a neskrývám že jsem vlastník a že co mohu si udělám sám ;-)

  • #26
  • bubatu
  • 23. January 2011 | 16:42
  • Skupina: Registrovaní Uživatelé

Už vim, kdo dělal webdesign tohohle webu :DD

  • #25
  • slEEEr
  • 7. January 2011 | 13:28
  • Skupina: Registrovaní Uživatelé

Tak tohle jsem přesně hledal. Něco, co by oživilo moje menu. Jdu to zkusit hnedka. Díky moc za pěknej tut ;-)

  • #24
  • lefiath
  • 7. January 2011 | 13:25
  • Skupina: Správci

Pracujte v jakém programu vám to vyhovuje. Já bych třeba v Ilustrátoru použil úplně stejný způsob tvorby, a měl bych to hotové asi 3x pomaleji, takže jsem zvolil Photoshop. Když už tedy píšete, jak je to v AI jednodušší, můžete hodit menší tip na tvorbu v něm? Nejsem v něm nijak zkušený a považuji ho za uživatelsky velmi nepříjemný program.

@astroman22@: Mřížka ale není vhodný nástroj pro detaily. To ji mám pořád přenastavovat, nebo jí dát minimální velikost a potom při oddálení koukat do šachovnice? Vyřešilo by to kdyby v AI šlo přichytávat objekty na vodítka. Takhle AI není efektivní nástroj pro přesnou práci, pokud nepracuješ na jednoduchých objektech.

  • #23
  • astroman22@
  • 7. January 2011 | 13:15
  • Skupina: Neregistrovaní

Presne ako píše Tomik.N v PS je drina spravit taky prvok v AI je to ovela jednoduchsie. Mimochodom ked si zapnes v AI mriešku tak dokazes pracovat na mikropixel presne :)

  • #22
  • lefiath
  • 4. January 2011 | 10:56
  • Skupina: Správci

Osobně se mi v Ilustrátoru nikdy nepodařilo vytvořit nic opravdu přesného, hlavně proto, že tam nemohu nic vyrovnávat přesně na pixely. Nemluvě o tom že člověk musí v Ilustrátoru provést stejnou věc, nenapadá mě jak to udělat rychleji. A radíš přepnout se pro tohle do Ilustrátoru a pak zpět do Photoshopu převést křivku, nebo rovnou v něm pracovat?

Jinak každý může používat jaký program chce, pointou bylo ukázat něco co považuji za zajímavý nápad, a já primárně pracuji s Photoshopem.

  • #21
  • Tomik.N
  • 4. January 2011 | 09:36
  • Skupina: Registrovaní Uživatelé

Proč to dělat jednoduše, když to jde složitě. Nic jiného mě nenapadá. Photoshop je pro tuto práci dosti nešťastně zvolený. Daný grafický prvek mnohem rychleji a přesněji vytvoříte v Illustratoru.

  • #20
  • lefiath
  • 3. January 2011 | 16:01
  • Skupina: Správci

Funguje bez problémů, jen nejsi přihlášený a neregistrovaní musejí projít schválením. Problém s menu je určitá komplikace se systémem, na kterém fungujeme - máš pravdu, je to chyba a bude opravena. Bohužel jsem neměl dostatek času abych všechno připravil předem, takže některé věci se stále spravují za běhu (například se stále dodělává tmavý skin fóra) - dojde na ně. Díky za tipy na NPPY, rozhodně je tam mnoho dobrých rad.

  • #19
  • clickmedia
  • 3. January 2011 | 15:46
  • Skupina: Neregistrovaní

Takže nefunguje ani přidávání komentářů? :-)

  • #18
  • clickmedia
  • 3. January 2011 | 15:45
  • Skupina: Neregistrovaní

Článek je zajímavý, přínosný. Děkuji za něj.

Škoda jen, že navigace na tomto webu nefunguje zcela správně.
Když najedu na položku "Kontakt", zobrazí se mi (onhover) podpoložky, které tato sekce vůbec neobsahuje
A sekce "O stránkách" má stejnou vadu.

Pokud sekce neobsahuje žádné podsekce, měl by se zobrazit prázdný seznam (nic).

Věřím, že se nejedná o záměr, ale bylo by dobré to opravit, když už píšete o těch navigacích :-)

  • #17
  • astroman22@
  • 2. January 2011 | 09:34
  • Skupina: Neregistrovaní

komentar c.#16 ma dostal 8-| :-D :-/

  • #16
  • Gribo
  • 28. December 2010 | 00:55
  • Skupina: Neregistrovaní

Ahoj. Chtěl bych se zeptat jestli by jste nemohli přidat nějaký TUT, když si udělám takovou šablonu jak pokračovat dál jak z toho udělat funkční web děkuji prosím zasílejte mi odpovědi na ICQ 219-602-772 děkuji

  • #15
  • lefiath
  • 17. December 2010 | 16:48
  • Skupina: Správci

Ano, uděláš přesně to. Vyber si vykrojení nástrojem pro výběr cesty (A) a po vybrání kopíruj zkratkami co jsi napsal.

  • #14
  • moch
  • 7. December 2010 | 16:56
  • Skupina: Neregistrovaní

Ahoj,
bola by možnosť trochu popísať krok "Nejprve si znovu zkopírujte vykrojení" - mám si vybrat cestu toho vykrojenia a potom ctrl c + v?

  • #13
  • PiP3R
  • 7. December 2010 | 16:08
  • Skupina: Moderátoři

pěknej tip ;-) něco sem zkusil http://img228.imageshack.us/img228/946/menung.png pravděpodobně to brzy použiju v nějakým desginu 8-)

  • #12
  • lefiath
  • 5. December 2010 | 22:06
  • Skupina: Správci

Vykrajuješ ze žlutého celku. Poměrně detailně se o tom zmiňuji v odstavci nad tím.

  • #11
  • Peppy
  • 5. December 2010 | 21:39
  • Skupina: Registrovaní Uživatelé

Otázka: "Nejprve si znovu zkopírujte vykrojení, pak Přímým Výběrem". Ale veď my sme nič nevykrojovali...:-O

  • #10
  • Peppy
  • 5. December 2010 | 17:15
  • Skupina: Registrovaní Uživatelé

už viem, ktorý design si vezmem na paškál ako ďalší...predajňu varených/pečených ponožiek =D

  • #9
  • EFG
  • 5. December 2010 | 16:31
  • Skupina: Registrovaní Uživatelé

hezký, jednoduchý a použitelný, palec nahoru lefe :)

  • #8
  • exarion
  • 4. December 2010 | 15:45
  • Skupina: Registrovaní Uživatelé

efektni a stylove menu... urcite nekdy pouziju

  • #7
  • Berry
  • 4. December 2010 | 12:11
  • Skupina: Registrovaní Uživatelé

pěkne třeba někdy použiju :D kdo ví :D ale dušene ponožky je za moc :D

  • #6
  • Sedlak
  • 4. December 2010 | 11:28
  • Skupina: Registrovaní Uživatelé

dik za tip ;-) akurat som si vcera luskal hlavu ako spravim taketo menu :D a ze z toho vysiel strasny paskvil to uz ani spominat nemusim :D

  • #5
  • lefiath
  • 4. December 2010 | 10:23
  • Skupina: Správci

@Achilo: Ano, je to jako doplněk, akorát opačně - najdeš to v horním panelu při práci s tvary.

  • #4
  • F3RD4
  • 4. December 2010 | 09:37
  • Skupina: Autoři / Redaktoři

Jednoduché a efektní. ;-)

  • #3
  • Achilo
  • 4. December 2010 | 08:58
  • Skupina: Registrovaní Uživatelé

měl bych dotaz jak si udělal to vykrojení z většího tvaru jestli je to jenom něco jako doplněk u výběru nebo složitější postup

  • #2
  • efjay
  • 4. December 2010 | 01:51
  • Skupina: Registrovaní Uživatelé

Super tutoriál, díky moc ;-)

  • #1
  • theNookyn
  • 4. December 2010 | 00:31
  • Skupina: Registrovaní Uživatelé

Skvělí ;-) ;-)

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi