vytvořte čisté rozvržení webových stránek ve Photoshopu-navrhování rozvržení webových stránek je více než uspořádání barevných obrázků a vyplnění textu do textových rámečků. Je to přístup, který hovoří o podnikání vašeho klienta. Barvy a grafika webových stránek definují povahu podnikání, zatímco kvalita designu a snadná navigace na webu by měla uživatele spojit s organizací a proměnit ho v potenciálního zákazníka.
navrhování dobře vypadajícího a snadno přístupného rozvržení webových stránek je povinné pro každého rádoby webdesignéra. Tento tutoriál je určen k tomu, aby vás provedl procesem vytváření jednoduchého a čistého rozvržení webových stránek od nuly. Během procesu se naučíte důležité body, které vám pomohou dále získat více znalostí o navrhování webu.
než začnete navrhovat rozvržení webových stránek, měli byste vědět, jak bude váš web vypadat a jaká jsou témata, která byste měli na webových stránkách zahrnout. Je velmi důležité vytvořit seznam prvků rozvržení webových stránek, které váš klient potřebuje na svých webových stránkách. Spolu s tím, kvalita dobrého designéra je připravit mock celého webu, než začne pracovat na konečné šabloně.
Začněte svůj bezplatný kurz designu
3D animace, modelování, simulace, vývoj her & ostatní
různé projekční společnosti přizpůsobují různé úrovně předběžných strategií, které mohou obsahovat rámování drátu, prototypování, maketu, beta verze a mnoho dalšího. V tomto tutoriálu vytvoříme modelovou verzi před zahájením původního návrhu šablony. Používám šedé odstíny, které umožňují identifikaci makety bloku.
plátno
před lety, zatímco existovalo jen velmi málo OS a omezených zařízení pro přístup k webovým stránkám, rozměry stránky byly opraveny na jednu nebo dvě velikosti. Dnes je scénář úplně jiný. Koncoví uživatelé přistupují k webům na stolních počítačích různých velikostí, mobilních telefonech, iPadech a tabletech. Neexistuje žádná šance, že můžete opravit svou webovou stránku na určitou velikost v této rozmanité situaci. Pro každé zařízení však existují některé průmyslové standardní velikosti. Budete pomalu najít svou oblíbenou velikost, nebo váš klient vás může odkázat na webové stránky napodobovat velikosti.
v tomto případě pracujeme na následujících rozměrech. Nedělejte si starosti s výškou, protože se bude časem měnit. Čím více obsahu přidáváte na svůj web, tím větší bude výška.
nezapomeňte, že je běžné posouvat stránku svisle dolů, takže se nemusíte opravovat do určité výšky pro Vaši webovou stránku, pokud nechcete, aby se uživatel posouval na vaší domovské stránce jako Google. Ale není nutné posouvat vodorovně. Omezte tedy šířku podle průmyslových standardů a s horizontálním posouváním se nestarejte o kreativitu.
pro web je rozlišení omezeno na 72. Na iPadech a několika tabletech se v poslední době nacházejí obrázky a stránky s vyšším rozlišením. Ale je to vzácná příležitost, a je lepší se držet 72 vzhledem k rychlosti internetu po celém světě.
vyberte soubory pomocí příkazu Ctrl+A a nakreslete vodítka rovnoměrně v celé šabloně. Web by měl být přehledně uspořádán s každým prvkem uspořádaným vzájemně souvisle. Pokyny pro rozvržení webových stránek vám pomohou snadno získat.
připravte si maketu.
umístění makety souboru na původní šablonu vám pomůže ušetřit dostatek času. Navrhování vašich webových stránek se stává tak snadným, že během několika minut dokončíte rámec. Maketa vám však pomůže pouze navrhnout rámečky. Dokončení prvků návrhu s detaily, uspořádání typu a zarovnání bude trvat déle než kreslení rozvržení webu.
barevné schéma a další možnosti
další věc, po získání rámec připraven je vybrat barevné schéma. Ale je lepší připravit barvy, než začnete pracovat na designu.
celá věc se scvrkává na zprávu, že připravte své zbraně před zahájením návrhu. Vše, včetně ikon, obrázků a barevných možností, by mělo být připraveno, než začnete pracovat. Organizace a plánování vaší práce ušetří více času a zaměřuje se na design bez překážek mezi nimi.
výběr barev může být volbou designéra, pokud je společnost nová a dříve nemá firemní identitu. Klienti dávají představu o tom, jaké odstíny chtějí logo nebo pozadí by mělo být v některých případech. Ve věci stávajících společností, kde možná budete muset přepracovat celý web, možná budete muset vybrat stejné barvy podle potřeb klienta.
existuje mnoho webových stránek, které vám mohou pomoci vybrat miliony barevných schémat z archivů. Vyzkoušejte následující webové stránky a užijte si široký výběr barevných kombinací.
Barva.Adobe.com
Colourlovers.com
zde jsem vybral několik odstínů modré pro použití pro webové stránky. Celý web bude naplánován v následujícím barevném schématu. Nezapomeňte si vybrat tři nebo čtyři různé barevné kombinace, protože nevíme, kterou barvu bude klient preferovat. Jakmile klient dokončí barevné schéma, uložte hodnoty odstínu a ujistěte se, že barvy hrají zásadní roli v každé vertikální organizaci, zejména v firemní identitě.
existuje mnoho způsobů, jak pokračovat ve svých návrhářích. Neexistují žádná tvrdá a rychlá pravidla rozvržení webových stránek, která by definovala nebo sledovala proces navrhování; je to většinou proces, který si návrhář vybere podle svého pohodlí.
někteří návrháři chtějí postavit celé bloky a rámy a začít pracovat na detailech ve druhé fázi, následuje typ a nakonec zarovnání a úpravy. Někteří rádi dokončí jednu část stránky najednou a přenesou ji na další část. Sledujeme druhý styl.
webové stránky dokončíme v následujících krocích
- záhlaví & zápatí
- co děláme
- služby
- formulář
- novinky
- zápatí
záhlaví & zápatí
pravidlo pro definování rozměrů záhlaví nebo banneru je ponecháno na vaší kreativitě. Podle nejnovějších trendů se webové stránky objevují s obrovským obrázkem, který pokrývá celou obrazovku počítače. Styl je označován jako hrdina obrazu, který se stal docela populární v poslední době.
v tomto případě jsme začali s výškou 120 pixelů a výškou 550 pixelů pro banner. Šířka by měla odpovídat velikosti dokumentu.
vzory s plnou barvou mají plochý vzhled, který nejde dobře s většími snímky nebo obrázky. Abych se vyhnul plochému vzhledu, použil jsem na horní část banneru vrstvu překryvného přechodu. To dává banner hloubku, která se pomalu transformuje z jednoho odstínu do druhého.
dále jsme začali Logo importovat a umístit do levého horního rohu záhlaví a další větší logo do středu banneru. V pravém horním rohu můžete také sledovat vektorové tvary rozvržení webu, které se používají ke sdílení odkazů na sociální média.
v této fázi jsem dokončil přidání typu do hlavičky & bannerové části. V textu se přidává název společnosti, zpráva značky s odkazy a službami. Na banneru můžete také pozorovat průhledné tlačítko.
prostý text nebo příliš mnoho typu bez zvláštních funkcí zkazí vzhled a dojem z vaší webové stránky; stránka brzy uživatele porodí, což mu může umožnit rychle opustit váš web. Podívejte se na vektorový tvar, který jsem přidal do odkazů na služby v pravém horním rohu banneru. Styl je jednoduchý, přesto vyplňuje prázdnotu a vyhýbá se světskému vzhledu.
Vyberte obrázek vhodný pro firmu. Na webu jsou k dispozici miliony obrázků a nalezení obrázku, který vyhovuje vašim požadavkům, nebude trvat příliš dlouho.
v mém případě jsem našel vysoce kvalitní obrázek, o kterém si myslím, že půjde dobře s mým webem. Nemám obchodní téma pro web, takže si mohu vybrat jakýkoli obrázek, který vypadá dobře na bannerovém příspěvku.
Zkuste si stáhnout některé obrázky ve vysokém rozlišení z níže uvedených stránek s obrázky zdarma
www..com.
míchání je umění, které byste měli zvládnout, abyste vytvořili krásné bannery. Zde jsem smíchal tři vrstvy, abych dosáhl efektu znázorněného na obrázku výše. Zde je to, co jsem udělal
- umístěte vrstvu obrázku na horní část banneru modré barvy
- umístěte překryv přechodu nad obrázek
- změňte krytí obrazu o 40 procent a změňte režim prolnutí na rozdíl.
- podívejte se na paletu vrstev na obrázku výše, abyste pochopili, jak jsou vrstvy naskládány na sebe.
takto bude vaše záhlaví & Banner vypadat, když jsme na něm právě dokončili práci. Pracujeme na jedné části najednou a je čas přejít na další úroveň.
zarovnání je zásadní, pokud jde o typ; máte představu o tom, jak by měl váš web vypadat, a text by měl být zarovnán, než jej spustíte. Na této úrovni jsem použil dva různé textové rámečky, oba zarovnané doleva.
dalším krokem je návrh části služby webové stránky. Navrhl jsem kovovou hvězdu v šedých odstínech, abych předvedl různé služby společnosti. Záměrem použití hvězdného symbolu je 5 hvězdné služby.
pokud jde o zarovnání textu, průvodci jsou vaši nejlepší přátelé. Soudržnost uvnitř typu a objektů lze získat tím, že dobře využijete bílý prostor a stejné mezery mezi prvky návrhu. Použil jsem mnoho pokynů pro rozvržení webových stránek, abych zjistil, že všechny objekty v rámečku by měly udržovat správné mezery a vzdálenosti, které přinášejí značné množství bílého prostoru.
dalším krokem našeho návrhu je vytvoření pole formuláře. V tomto případě pracuji opačně než metoda, kterou jsme použili při navrhování banneru. Umístíme vrstvu obrázku pod plnou barevnou vrstvu a na obě vrstvy použijeme gradientovou vrstvu, abychom dosáhli lepšího vzhledu. Hraní s režimy prolnutí je vždy nezbytné při umisťování větších obrázků.
výběr obrázků pro tento web nemá žádné konkrétní téma, které by s ním souviselo. Myslím, že tento obrázek pomůže webu vypadat lépe.
umístěte obrázek pod barevnou vrstvu pozadí. Chcete-li obrázek opravit přesně na velikost barevné vrstvy, použijte možnosti maskování vrstvy.
podívejte se na paletu vrstev na obrázku výše. Pevná modrá vrstva je v horní části obrázku, režim prolnutí je převeden na překrytí a krytí je sníženo na 65 procent.
použil jsem gradientní mapu na obou vrstvách. Režim prolnutí se změní na odstín a krytí zůstane stejné.
pole formuláře je připraveno, což nás přivádí na konec čtvrté úrovně v designu našich webových stránek.
naše další úroveň se skládá ze dvou jednoduchých textových rámečků. To se podobá druhé úrovni webové stránky, a já jsem použil zarovnány dvě krabice podobné vrcholu. Udržování soudržnosti v zarovnání je dobrý způsob použití bílého prostoru.
když jsme došli k závěrečné části stránky, je čas znovu se podívat na rozměry zápatí. Návrhář musí naplánovat výšku zápatí na základě odkazů, které by tam měl použít. V tomto případě jsem dal zápatí výšku 170 Pixelů. Šířka zůstává stejná jako webová stránka.
umístěte odkazy a obrázky podle vašeho požadavku.
tím jsme uzavřeli projekční část našich webových stránek. Barevné kombinace, které jsme použili, jsou minimální; v našem designu využíváme spoustu bílého místa a přidáváme jednoduchý text s minimálními písmy. Záměrem je navrhnout čistou webovou stránku, která, jak doufáme, bude splněna.
prosím, podívejte se na návrh celé stránky níže ještě jednou.
