Close Menu Navigation
Open Categories Menu Tvoříme OPRAVDU jednoduchý grafický návrh
- 21 Březen, 2008 -
- Grafika -
- Tags :
- 0 Comments
Často se me dostává otázky, jak vlastně tvořím ty svoje grafické návrhy. Rozhodla jsem se proto, že sepíši návod na jeho vytvoření.
Předpokládám základy tvorby Photoshopu – písma, tvaru, použítí gumy atd..
Uvidíte sami, že tvorba webu – grafického návrhu není nic náročného.
Zákazníkem pro tvorbu webu je tentokrát Autobazar u Kamila. Vytvoříme tedy typický layout s horizontálním menu a prostorem pro novinky.
Při tvorbě weu je rozhodně nutné počítat s rozlišením, ke kterému budeme návrh přizpůsobovat, doporučuji rozlišení 1024*768.
Tak jdeme na to 
Zapněte si Photoshop…
1) File >> New – Zadejte rozměry, které vám vyhovují – já zadala 1200 * 1400, protože počítám i prostorem pro background.
2) Zapněte si pravítka, urcitě se Vám budou hodit (CTRL+R). Vytáhněte si vodítka na stránku tak, aby jste si vyhradili prostor pro základní podklad stránky, který by měl být široký cca 950 – 980px.
3) Ve tvarech vyberte obdelník (Rectangle tool) a vytvořte ho na šírku vodítek, které jste si vytáhli, výška je čistě na vás. Bude se samozřejmě odvíjet od obsahu, který chcete v grafickém návrhu vytvořit.
4) Ve vrstvách (Layers) klikněte pravym tlačítkem a vyberte vlastnosti vrstvy, nastavte obdelníku ohraničený stín (Drop shadow) v hodnotě cca 10px, ostatní hodnoty dejte na nulu.
5) Máme základní podklad pro stránku a jdeme tvořit hlavičku – opět vybereme Rectangle tool, roztáhneme obdelník na šířku stránky – vysoký by měl být cca 100px.
Rozklikneme si opět efekty vrstvy(dvojitým kliknutím na danou vrstvu nebo prave – Blending tools) a jediná vlastnost, která nás teď zajímá je přechod (Gradient tool) zapneme ji a nastavíme gradient opacity asi 30% a scale cca na polovinu, úhel si samozřejmě můžete stejně jako ostatní vlastnoti zvolit sami, já sem nastavila cca -90 stupňu. Barevný gradient je v tomto případě základní: černá-bílá.
6) Jupí máme hlavičku jdeme tvořit název stránek – tak tedy vložíme text (Autobazar u Kamila), dáme mu efekt vrstvy vržený stín hodnoty: 0,0,10 – vše ostatní necháme. Vrstvu si umístíme zhruba na střed hlavičky a zatím jí necháme ladem, budeme ji ještě určitě ladit k obrazu svému
7) Aby stránky nebyly příliš holé, zkusíme vložit nějaký obrázek a trošku ho přizpůsobit hlavičce a designu. Vybrala sem (překvapivě) obrázek auta. Vložíme ho pomocí funkce umístit (File >> place) nebo tažením z jiného otevřeného souboru, kde obrázek máte. Pokud jste obrázek vložili pomocí funce Place, zmenšete si ho na požadovanou velikost, klikněte v okně vrstvy pravym tlačítkem na vrstvu s obrázkem a dejte Rasterize layer a můžeme pokračovat.
Obrázek si trošku omažeme gumou okolo, aby nám zůstalo samotné autíčko a pomoctí efektu vrstvy si vybere Outer glow a nastavíme obrázku vnější svit podle toho, jak se nám to líbí To nám trošku skryje nedokonalosti, které jsme spáchali mazáním.
9) Rozhodla jsem se ještě změnit barvu názvu a přesunout ho na typické místo – vlevo nahoru. Pamatujte na to, že je to nejideálnější místo – návštěvník stránek ho uvidí jako první.
10) Hlavičku je ještě potřeba zaplnit, vepíšeme tedy pod sebe text ( výkup ojetých vozů, možnost leasingu nových i ojetých vozů, pojištění automobilů, prodej ojetých i nových vozů ) – zarovnáme zleva a vytvoříme šipky, které budou jedntolivé řádky odsazovat.
11) Není to nic těžkého, vytvořte si novou vrstvu (Layer >> New layer), vyberte nástroj tužka (Pencil Tool), nastavte ji velikost jednoho pixelu, zvětšete si lupou obrázek na maximum a pomalu kreslete pixel po pixelu šipku.
12) Šipku si nastavte na první řádek a tažením a současným držení klávesy ALT kopírujte šipky tolikrát, kolikrát je potřeba
13) Máme hlavičku, pustíme se do horizontálního menu – vytvořte opět – pomocí Rectangle tool – obdelník pod hlavičkou, barva je na vás. Já volila zelenou. Nenastavujte žádné efekty vrstvy a pouze si vytvořte text s menu a zarovnejte si ho tak jak potřebuejte (podle počtu položek) do obdélníčku. Můžeme jednotlivé položky oddělit pomocí různých čar nebo lomítek, já jsem volila nástroj linka (line). Linku sem rasterizovala a poté umazala kousky vršku a spodku do ztracena. Opět si nakopírujte pomocí ALT a tahnutím oddělovače tolikrát, kolikrát potřebujete.
14) Pro kodery musíme vytvořit i hover efekt – po najetí myši se položka silně podtrhne tmavě modrou barvou – opět Rectangle tool.
13) Teď je ten správná čas na vytvoření základní barvy pro background – máme už přehled o barevnym schematu webu, já sem zvolila přechod dvou barev a to od tmavě modré až po světle modrou barvu. Budete se divit, jak backgroud stránky dotvoří… zkoušejte – přechody, jednolité barvy, barvy do ztracena, je to na vás
13) Aby stránka nepůsobila uplně čistě bíle vložím do stránky od menu do ztracena lehce šedý přechod. To můžu udělat tak, že opět vytvořím obdelík, po celé šířce stránky v bílé barvě, v efektech vrstvy mu nastavím Gradient overlay a dám mu opravdu nízké krytí.
14) Základ máme hotový můžeme stránky plnit, já sem zvolila levou část, jako stálou pro novinky a kontakt, pravou zbylou část budu plnit textem samotného webu. Tento krok vám přikládám v obrázkách předpokládám, že každý z vás umí vložit obdelník i text:)
Mimochodem pro tvoření textů používám stránku pro automatické generování textů – www.lipsum.com. Pokud, ale máte text přímo od klienta, plňte stránku reálným textem. Působí to důveryhodněji a klienty většinou mnohem příjemněji.
15) Patička – jednoduché – použíjte logo nabo nadpis stránek a vytvořte textovou patičku, kde bude menu a jméno stvořitele
16) Máme téměř hotový web, můžeme si ještě pohrát s jednotlivými položkami
dotvořit background, hlavičku, přechody…atd … to už je na Vás.
Nezapomeňte si během práce vrstvy třídit do skupin (Groups), ulehčí vám to práci a kodéři vám nebudou trhat hlavu, až budou muset návrh řezat
Celá naše společná práce je ke stažení zde(zabaleny v archivu RAR – 2MB).
Jinak možností, jak vytvořit všechny možné přechody a efekty je samozřejmě strašná spousta. Tohle je pouze předvedení toho, jak tvořím grafický návrh já a zříkám se veškeré odpovědnosti za způsobené škody )
