Vytvorenie čistého rozloženia webových stránok vo Photoshope - Navrhovanie rozloženia webových stránok je viac než len usporiadanie farebných obrázkov a vyplnenie nejakého textu do textových rámčekov. Je to prístup, ktorý hovorí o objemoch podnikania vášho klienta. Farby a grafika webových stránok definujú povahu podnikania, zatiaľ čo kvalita dizajnu a ľahký tok navigácie na webe by mali používateľa spojiť s organizáciou a zmeniť ho na potenciálneho zákazníka.
Navrhovanie dobre vyzerajúceho a ľahko prístupného rozloženia webovej stránky je povinné pre každého rádoby webového dizajnéra. Tento tutoriál je určený na to, aby vás sprevádzal procesom vytvárania jednoduchého a čistého rozloženia webových stránok hneď od začiatku. Počas tohto procesu sa dozviete dôležité body, ktoré vám pomôžu ďalej získať ďalšie vedomosti týkajúce sa webdizajnu. 
Pred navrhnutím rozloženia webových stránok si zapíšte svoje požiadavky
Skôr ako začnete navrhovať rozloženie webovej stránky, mali by ste vedieť, ako bude vyzerať vaša webová stránka a aké sú témy, ktoré by ste na webovej stránke mali zahrnúť. Je nevyhnutné vytvoriť zoznam prvkov rozloženia webových stránok, ktoré klient potrebuje na svojej webovej stránke. Spolu s tým je dobrým dizajnérom pripravená vzorka celej webovej stránky skôr, ako začne pracovať na konečnej šablóne.
Rôzne dizajnérske spoločnosti prispôsobujú rôzne úrovne stratégií predbežného projektovania, ktoré môžu obsahovať rámovanie drôtov, prototypovanie, makety, verzie beta a oveľa viac. V tomto návode vytvoríme maketu pred začatím pôvodného návrhu šablóny. Používam sivé odtiene, ktoré umožňujú identifikáciu makety
Plátno
Pred rokmi existovalo veľmi málo OS a obmedzených zariadení na prístup k webovým stránkam, rozmery stránky boli stanovené na jednu alebo dve veľkosti. Dnešný scenár je úplne iný. Koncoví používatelia pristupujú k webovým stránkam stolových počítačov rôznych veľkostí, mobilných telefónov, iPadov a tabliet. V tejto rôznorodej situácii nie je žiadna šanca, aby ste svoju webovú stránku opravili na určitú veľkosť. Na každé zariadenie sa však vzťahujú niektoré štandardné veľkosti. Pomaly nájdete svoju obľúbenú veľkosť alebo vám môže klient odporučiť webovú stránku, ktorá imituje veľkosti.
V tomto prípade pracujeme na nasledujúcich rozmeroch. Nerobte si starosti s výškou, pretože sa bude v priebehu času meniť. Čím viac obsahu pridávate na svoj web, tým vyššia bude jeho výška.
Nezabudnite, že je bežné posúvať stránku vertikálne, takže svoju webovú stránku nemusíte opraviť do určitej výšky, pokiaľ nechcete, aby sa používateľ posúval na vašej domovskej stránke ako Google. Je však potrebné neposúvať sa vodorovne. Takže obmedzte svoju šírku podľa priemyselných štandardov a nebuďte kreatívni s horizontálnym posúvaním.
Pre web je rozlíšenie obmedzené na 72. V súčasnosti sa na iPadoch a na niekoľkých tabletoch nachádzajú obrázky a stránky s vyšším rozlíšením. Je to však zriedkavo a je lepšie sa držať 72 s ohľadom na rýchlosť internetu po celom svete.
Vyberte súbory pomocou príkazu Ctrl + A a nakreslite sprievodcov rovnomerne po celej šablóne. Internetová stránka by mala byť prehľadne usporiadaná tak, aby boli všetky prvky usporiadané navzájom koherentne. Pokyny na rozloženie webových stránok vám to uľahčia.
Pripravte si maketu
Umiestnením maketa súboru do pôvodnej šablóny môžete ušetriť dostatok času. Navrhovanie vašich webových stránok bude také jednoduché, že dokončíte dokončenie rámca v priebehu niekoľkých minút. Maketa vám však pomôže len navrhnúť rámy. Vyplnenie prvkov dizajnu detailami, usporiadaním typu a zarovnaním bude trvať dlhšie, než nakreslenie rozloženia webovej stránky.
Farebná schéma a ďalšie možnosti
Ďalšou vecou po pripravení rámca je vybrať farebnú schému. Je však lepšie pripraviť farby skôr, ako začnete pracovať na návrhu.
Celá vec sa scvrkáva na odkaz, že pripravte svoje zbrane skôr, ako začnete s návrhom. Predtým, ako začnete pracovať, by malo byť pripravené všetko vrátane ikon, obrázkov a možností výberu farieb. Organizácia a plánovanie vašej práce ušetrí viac času a sústredí sa na dizajn bez prekážok medzi tým.
Výber farieb môže byť na výber dizajnéra, ak je spoločnosť nová a nemá predtým firemnú identitu. V niektorých prípadoch klienti poskytnú predstavu o tom, aké odtiene chcú mať logo alebo pozadie. Pokiaľ ide o existujúce spoločnosti, v ktorých bude možno potrebné prepracovať celý web, možno budete musieť zvoliť rovnaké farby podľa potrieb klienta.
Existuje veľa webových stránok, ktoré vám môžu pomôcť vybrať milióny farebných schém z archívov. Vyskúšajte nasledujúce webové stránky a vychutnajte si široký výber farebných kombinácií.
Color.adobe.com
Colourlovers.com
Tu som si vybral niekoľko odtieňov modrej, ktoré sa majú použiť pre webovú stránku. Celá webová stránka bude naplánovaná v nasledujúcej farebnej schéme. Nezabudnite si vybrať tri alebo štyri rôzne farebné kombinácie, pretože nevieme, ktorá farebná klientka bude uprednostňovať. Akonáhle klient dokončí farebnú schému, uložte hodnoty tieňa a uistite sa, že farby hrajú dôležitú úlohu v každej vertikále organizácie. Najmä v podnikovej identite.
Proces navrhovania
Existuje mnoho spôsobov, ako pokračovať v dizajnéroch. Neexistujú žiadne tvrdé a rýchle pravidlá rozmiestnenia webových stránok, ktoré by definovali alebo nasledovali proces navrhovania, je to väčšinou proces, ktorý si dizajnér vyberie podľa svojho pohodlia.
Niektorí dizajnéri chcú stavať celé bloky a rámy a začať pracovať na detailoch v druhej fáze, po ktorej nasleduje typ a nakoniec zarovnania a úpravy. Niektorí chceli dokončiť jednu časť stránky naraz a presunúť ju na ďalšiu časť. Sledujeme druhý štýl.
Web dokončíme v nasledujúcich krokoch
- Záhlavie a päta
- Čo robíme
- služby
- formulár
- správy
- zápätie
Záhlavie a päta
Pravidlo na definovanie rozmerov hlavičky alebo banneru je ponechané na vašej kreativite. Podľa najnovších trendov sa webové stránky zobrazujú s obrovským obrázkom, ktorý pokrýva celú obrazovku počítača. Štýl sa nazýva Hero image, ktorý sa v poslednej dobe stal veľmi populárnym.
V tomto prípade sme začali hlavičkou s výškou 120 pixelov a výškou 550 pixelov. Šírka by sa mala zhodovať s veľkosťou dokumentu.
Dizajn s plnou farbou má plochý vzhľad, ktorý sa pri veľkých rámoch alebo obrázkoch nedá dobre. Aby sa predišlo plochému vzhľadu, na hornú časť banneru som použil vrstvu prekrytia. Dáva transparentu hĺbku, ktorá sa pomaly mení z jedného tieňa na druhý.
Ďalej sme začali importovať logo a umiestniť ho do ľavého horného rohu hlavičky a ďalšieho väčšieho loga do stredu bannera. V pravom hornom rohu môžete tiež pozorovať vektorové tvary rozloženia webových stránok, ktoré sa používajú na zdieľanie odkazov na sociálne médiá.
V tejto fáze som dokončil pridanie typu v časti Hlavička a banner. Do textu sa pridá názov spoločnosti, správa o značke s odkazmi a službami. Na transparente môžete tiež vidieť priehľadné tlačidlo.
Obyčajný text alebo príliš veľa textu bez špeciálnych funkcií kazí vzhľad a dojem z vašej webovej stránky; na stránke sa čoskoro objaví používateľ, čo ho môže rýchlo opustiť. Pozrite sa na vektorový tvar, ktorý som pridal k odkazom na služby v pravom hornom rohu bannera. Štýl je jednoduchý, napriek tomu vyplní medzeru a vyhne sa svetskému vzhľadu.
Vyberte si obrázok vhodný pre danú firmu. Na webe sú k dispozícii milióny sériových obrázkov a nájdenie obrázka, ktorý vyhovuje vašim požiadavkám, nebude trvať príliš dlho.
V mojom prípade som našiel kvalitný obrázok, ktorý sa podľa môjho názoru na mojej webovej stránke bude javiť dobre. Nemám pre podnikanie webovú tému, takže si môžem slobodne zvoliť ľubovoľný obrázok, ktorý vyzerá dobre na bannerovom príspevku.
Pokúste sa stiahnuť niektoré obrázky vo vysokom rozlíšení z bezplatných stránok s obrázkami zdarma uvedených nižšie
www.pixabay.com
Miešanie je umenie, ktoré by ste mali zvládnuť pri výrobe krásnych bannerov. Tu som zmiešal tri vrstvy, aby sa dosiahol účinok znázornený na obrázku vyššie. Tu je to, čo som urobil
- Položte vrstvu obrázka na horný okraj modrej farby
- Umiestnite prekrytie prechodu nad obrázok
- Zmeňte nepriehľadnosť obrázka o 40 percent a zmeňte režim prelínania.
- Skontrolujte paletu vrstiev na obrázku vyššie, aby ste pochopili, ako sú vrstvy navzájom naskladané.
Takto bude vyzerať váš nadpis a hlavička, keď sme na tom práve pracovali. Pracujeme na jednej strane naraz a je čas postúpiť na ďalšiu úroveň.
Kľúčové zosúladenie; mať predstavu o tom, ako by mal vyzerať váš web, a text by sa mal zarovnať skôr, ako ho začnete. Na tejto úrovni som použil dva rôzne textové rámčeky, oba zarovnané doľava.
Ďalším krokom je návrh časti služieb na webovej stránke. Navrhol som kovovú hviezdu v sivých odtieňoch, aby som predstavil rôzne služby spoločnosti. Zámerom použitia hviezdneho symbolu sú 5-hviezdičkové služby.
Pokiaľ ide o zarovnanie textu, sprievodcovia sú vašimi najlepšími priateľmi. Súdržnosť v rámci typu a predmetov sa dá dosiahnuť dobrým využitím bieleho priestoru a rovnakých medzier medzi prvkami návrhu. Použil som veľa usmernení týkajúcich sa rozloženia webových stránok, aby som zistil, že všetky objekty v rámčeku by si mali udržiavať správne medzery a vzdialenosti, ktoré vytvárajú spravodlivé množstvo bieleho priestoru.
Ďalším krokom nášho návrhu je vytvorenie poľa Form. V tomto prípade pracujem opačne ako metóda, ktorú sme použili pri navrhovaní bannera. Položíme obrazovú vrstvu pod pevne zafarbenú vrstvu a nanesieme vrstvu gradientu na vrch dvoch vrstiev, aby sme dosiahli lepší vzhľad. Pri vkladaní väčších obrázkov je vždy dôležité hrať sa v režimoch prelínania.
Výber obrázkov pre túto stránku nemá s ňou súvisiacu špecifickú tému. Myslím, že tento obrázok pomôže stránkam vyzerať lepšie.
Umiestnite obrázok pod farebnú vrstvu pozadia. Ak chcete obraz presne opraviť na veľkosť farebnej vrstvy, použite možnosti maskovania vrstvy.
Prezrite si paletu vrstiev na obrázku vyššie. Plná modrá farba je na vrchu obrázka, režim miešania sa skonvertuje na prekrytie a krytie sa zníži na 65 percent.
Použil som gradientnú mapu na vrchu oboch vrstiev. Režim prelínania sa zmení na odtieň a krytie zostáva rovnaké.
Formulár je pripravený, čím sa dostávame na koniec štvrtej úrovne v dizajne našich webových stránok.
Naša ďalšia úroveň pozostáva z dvoch jednoduchých textových rámčekov. To sa podobá úrovni dva z webovej stránky a ja som použil zarovnané dva boxy podobné hornej. Udržiavanie koherencie pri zarovnávaní je dobrý spôsob využívania bieleho priestoru.
Keď sme dosiahli konečnú časť stránky, je čas znovu sa pozrieť na rozmery päty. Návrhár musí plánovať výšku päty na základe prepojení, ktoré by tam mal použiť. V tomto prípade som dal päte výšku 170 pixelov. Šírka zostáva rovnaká ako webová stránka.
Umiestnite odkazy a obrázky podľa vašich požiadaviek.
Týmto sme uzavreli návrhovú časť našej webovej stránky. Farebné kombinácie, ktoré sme použili, sú minimálne, v našom dizajne využívame veľa prázdneho miesta a pridal jednoduchý text s minimálnym počtom písiem. Zámerom je navrhnúť čistú webovú stránku, ktorá, ako dúfame, je splnená.
Znova si prečítajte vzhľad celej stránky
