Ustvarite čisto postavitev spletnega mesta v Photoshopu - Oblikovanje postavitve spletnega mesta je več kot urejanje barvitih slik in polnjenje besedila v besedilne okvire. To je pristop, ki govori veliko o poslu vaše stranke. Barve in grafike spletnega mesta določajo naravo poslovanja, medtem ko morata kakovost oblikovanja in enostaven navigacijski tok spletnega mesta uporabnika povezati z organizacijo in ga spremeniti v potencialno stranko.
Oblikovanje dobrega videza in lahko dostopne postavitve spletnega mesta je obvezno za vsakega wannabe spletnega oblikovalca. Ta vadnica naj bi vas popeljala skozi postopek oblikovanja preprostega in čistega spletnega mesta takoj od začetka. Med postopkom se boste naučili pomembnih točk, ki vam bodo pomagale pri pridobivanju več znanja o spletnem oblikovanju. 
Pred oblikovanjem postavitve spletnega mesta zapišite svoje zahteve
Preden začnete oblikovati postavitev spletnega mesta, morate vedeti, kako bo izgledalo vaše spletno mesto in katere so teme, ki jih morate vključiti na spletno mesto. Ključno je sestaviti seznam elementov postavitve spletnega mesta, ki jih vaša stranka potrebuje na svojem spletnem mestu. Poleg tega je kakovost dobrega oblikovalca, da pripravi posmeh celotnega spletnega mesta, preden začne delati na končni predlogi.
Različna oblikovalska podjetja prilagajajo različne ravni strategij pred načrtovanjem, ki lahko vsebujejo žično oblikovanje, prototipiranje, oblikovanje, beta različice in še veliko več. V tej vadnici bomo ustvarili modelno različico, preden začnemo s prvotno zasnovo predloge. Uporabljam sive odtenke, ki omogočajo identifikacijo bloka maket
Platno
Pred leti, ko je bilo zelo malo OS in omejenih naprav za dostop do spletnih mest, so bile dimenzije strani določene na eno ali dve velikosti. Danes je scenarij povsem drugačen. Končni uporabniki dostopajo do spletnih mest na namiznih računalnikih različnih velikosti, mobilnih telefonov, iPadov in tabličnih računalnikov. V tej raznoliki situaciji ni možnosti, da bi spletno stran popravili na določeno velikost. Vendar pa je za vsako napravo uporabljenih nekaj standardnih velikosti industrije. Počasi boste našli svojo najljubšo velikost ali pa vam bo stranka lahko napotila spletno mesto, da posnema velikosti.
V tem primeru delamo na naslednjih dimenzijah. Ne skrbite za višino, saj se bo sčasoma spreminjala. Več vsebine, ki jo dodajate svojemu spletnemu mestu, večja bo višina.
Ne pozabite, da je običajno navpično pomikanje po strani navzdol, tako da se morda ne določite na določeno višino svoje spletne strani, razen če ne želite, da se uporabnik pomakne na vaši domači strani kot Google. Toda vodoravno se ne pomikati. Torej, omejite svojo širino po standardih industrije in ne bodite ustvarjalni z vodoravnim drsenjem.
V spletu je ločljivost omejena na 72. V zadnjem času so na iPadih in nekaj tablicah slike z večjo ločljivostjo in strani. Vendar je to redko, in bolje je, da se držite 72 glede na hitrost interneta po vsem svetu.
Z ukazom Ctrl + A izberite datoteke in vodnike enakomerno narišite po predlogi. Spletno mesto mora biti lepo urejeno, tako da je vsak element skladno urejen. In smernice za postavitev spletnega mesta vam pomagajo, da jih enostavno pridobite.
Pripravite svoj modelček
Če postavite svojo izvirno datoteko na izvirno predlogo, vam prihrani veliko časa. Oblikovanje vaše spletne strani postane tako enostavno, da boste okvir končali v nekaj minutah. Vendar vam bo maketa pomagala le pri oblikovanju okvirjev. Dokončanje elementov oblikovanja s podrobnostmi, ureditvijo vrste in poravnavo bo trajalo preveč časa kot risanje postavitve spletnega mesta.
Barvna shema in druge izbire
Naslednja stvar, ko pripravite svoj okvir, je, da izberete barvno shemo. Ampak, bolje je, da pripravite svoje barve, preden začnete delati na zasnovi.
Celotna stvar se spušča na sporočilo, da pripravite pištole, preden začnete z načrtovanjem. Vse, kar vključuje ikone, slike in barvne izbire, mora biti pripravljeno, preden začnete z delom. Z organiziranjem in načrtovanjem svojega dela boste prihranili več časa in se osredotočili na oblikovanje, ne da bi ovirali vmes.
Izbira barv je lahko izbira oblikovalca, če je podjetje novo in pred tem nima celostne podobe. V nekaterih primerih stranke predstavijo, kakšni odtenki naj bi bili logotip ali ozadje. V zvezi z obstoječimi podjetji, kjer boste morda morali preoblikovati celotno spletno mesto, boste morda morali izbrati enake barve glede na potrebe stranke.
Obstajajo številna spletna mesta, ki vam lahko pomagajo izbrati milijone barvnih shem iz arhivov. Preizkusite naslednja spletna mesta in uživajte v široki izbiri barvnih kombinacij.
Color.adobe.com
Colourlovers.com
Tu sem izbral nekaj odtenkov modre, ki jih bom uporabil za spletno stran. Celotno spletno mesto bo načrtovano v okviru naslednje barvne sheme. Ne pozabite izbrati treh ali štirih različnih barvnih kombinacij, saj ne vemo, kateri barvni odjemalec bo raje. Ko stranka dokonča barvno shemo, shranite vrednosti senčil in poskrbite, da bodo barve igrale življenjsko pomembno vlogo v vsaki vertikali organizacije. Predvsem v celostni podobi.
Postopek načrtovanja
Obstaja veliko načinov za nadaljevanje oblikovalcev. Ni nobenih trdih in hitrih pravil za postavitev spletnega mesta, s katerimi bi lahko opredelili ali sledili postopku oblikovanja, večinoma je to postopek, ki ga bo oblikovalec izbral po svojih željah.
Nekateri oblikovalci želijo sestaviti celotne bloke in okvirje ter začeti delati na podrobnostih v drugi fazi, ki ji sledijo vrsta in končno poravnave in prilagoditve. Nekateri radi naenkrat dokončajo en del strani in ga prenesejo na naslednji del. Sledimo drugemu slogu.
Spletno mesto bomo zaključili v naslednjih korakih
- Glava in podnožje
- Kar počnemo
- Storitve
- Oblika
- Novice
- Spodnja noga
Glava in podnožje
Pravilo za določitev dimenzij glave ali pasice je prepuščeno vaši ustvarjalnosti. Po zadnjih trendih se na spletnih straneh pojavlja ogromna slika, ki pokriva celoten zaslon računalnika. Slog se imenuje Hero slika, ki je v zadnjem času postala precej priljubljena.
V tem primeru smo začeli z glavo v višini 120 pik in višino 550 pik za pasico. Širina naj se ujema z velikostjo dokumenta.
Oblika z enobarvno barvo ima plosko podobo, ki ne ustreza dobro večjim okvirjem ali slikam. Da bi se izognil ravnemu videzu, sem nanesel sloj prekrivnega gradienta na vrh pasice. Papir daje globino, ki se počasi spreminja iz enega odtenka v drugega.
Nato smo logotip začeli uvažati in ga postaviti v zgornji levi kot glave ter še en večji logotip na sredino pasice. V zgornjem desnem kotu lahko opazite tudi vektorske oblike postavitve spletnega mesta, ki se uporabljajo za skupno rabo povezav v družabnih medijih.
Na tej stopnji sem končal z dodajanjem vrste v delu Header & Banner. V besedilu se doda ime podjetja, sporočilo blagovne znamke s povezavami in storitvami. Na Traku lahko opazite tudi prozoren gumb.
Navadno besedilo ali preveč vrste brez posebnih funkcij bo pokvarilo videz vaše spletne strani; stran bo kmalu rodila uporabnika, kar mu lahko omogoči, da hitro zapusti vaše spletno mesto. Oglejte si vektorsko obliko, ki sem jo dodal povezavam do storitev v zgornjem desnem kotu pasice. Slog je preprost, vendar napolni praznino in se tako izogne svetnemu videzu.
Izberite sliko, primerno podjetju. V spletu je na voljo na milijone fotografij zalog in ne bo trajalo predolgo, da bi našli sliko, ki ustreza vašim zahtevam.
V mojem primeru sem našel kakovostno sliko, za katero mislim, da bo dobro prišla tudi mojemu spletnemu mestu. Nimam poslovne teme za spletno mesto, zato lahko prosto izberem katero koli sliko, ki je videti dobro na objavi pasic.
Poskusite prenesti nekaj slik HD s spletnih strani brezplačnih slik, danih spodaj
www.pixabay.com
Mešanje je umetnost, ki bi jo morali obvladati, da bi ustvarili čudovite pasice. Tu sem pomešala tri plasti, da sem dosegla učinek, prikazan na zgornji sliki. Tukaj sem naredil
- Plast slike postavite na vrh pasice modre barve
- Nad sliko položimo preliv Gradient
- Spremenite neprozornost slike za 40 odstotkov in spremenite način mešanja v razliko.
- Oglejte si paleto plasti na zgornji sliki, če želite razumeti, kako so plasti zložene drug na drugega.
Tako bo videti vaš Header & Banner, ko smo pravkar končali z delom na njem. Delamo na enem delu naenkrat in čas je, da preidemo na naslednjo stopnjo.
Ključna uskladitev, ko gre za vrsto; imeti predstavo o tem, kako mora izgledati vaše spletno mesto in besedilo, preden ga začnete, poravnati. Na tej ravni sem uporabil dva različna besedilna okvira, oba poravnana na levi strani.
Naslednji korak je oblikovanje storitvenega dela spletne strani. Oblikoval sem kovinsko zvezdo v sivih odtenkih, da bi predstavil različne storitve podjetja. Namera uporabe simbola zvezde je storitev 5 zvezdic.
Ko gre za poravnavo besedila Vodniki so vaši najboljši prijatelji. Skladnost znotraj vrste in predmetov je mogoče doseči z dobro uporabo belega prostora in enakimi vrzeli med elementi zasnove. Uporabil sem veliko smernic za postavitev spletnega mesta, da sem videl, da morajo vsi predmeti v okvirju vzdrževati ustrezne vrzeli in razdalje, ki prinašajo veliko prostora.
Naslednji korak našega oblikovanja je ustvariti polje Obrazec. V tem primeru delam v nasprotju z metodo, ki smo jo uporabili pri oblikovanju pasic. Sloj slike postavimo pod enobarvno barvno plast in na obeh slojih nanesemo gradientni sloj, da dosežemo boljši videz. Igranje z načini mešanja je vedno nujno pri postavljanju večjih slik.
Izbira slik za to spletno mesto nima posebne teme, povezane z njo. Mislim, da bo ta slika pomagala, da je spletno mesto videti boljše.
Sliko postavite pod barvno plast ozadja. Če želite sliko natančno določiti na velikost barvnega sloja, uporabite možnosti zakrivanja plasti.
Oglejte si paleto plasti na zgornji sliki. Črna modro obarvana plast je na vrhu slike, način mešanja se pretvori v prekrivanje in motnost se zmanjša na 65 odstotkov.
Na obeh slojih sem uporabil zemljevid gradienta. Način mešanja se spremeni v odtenek in motnost ostane enaka.
Polje za obrazce je pripravljeno, kar nas pripelje do konca četrte stopnje v oblikovanju naše spletne strani.
Našo naslednjo stopnjo sestavljata dva preprosta besedilna okvira. Podobno je na nivoju druge spletne strani in uporabil sem poravnava obeh polj, podobnih zgornjem. Ohranjanje skladnosti v poravnavi je dober način uporabe belega prostora.
Ko smo prišli do zadnjega dela strani, je čas, da še enkrat pogledamo dimenzije podnožja. Oblikovalec mora načrtovati višino podnožja na podlagi povezav, ki bi jih moral uporabiti tam. V tem primeru sem dal nogi višino 170 slikovnih pik. Širina ostane enaka kot na spletnem mestu.
Povezave in slike postavite po vaših zahtevah.
S tem smo zaključili oblikovalski del naše spletne strani. Barvne kombinacije, ki smo jih uporabili, so minimalne, uporabimo veliko belega prostora v svojem dizajnu in dodamo preprosto besedilo z minimalnimi pisavami. Namen je oblikovati čisto spletno stran, za katero upamo, da je izpolnjena.
Oglejte si oblikovanje celotne strani spodaj še enkrat
