Vadnica: Kako postaviti spletno stran z Adobe Photoshop

MODEL-FOTOGRAFIJA

Obstaja veliko različnih orodij za oblikovanje spletnih strani in delo na povsem preprost in funkcionalen način, ne da bi se vnašali ali dotikali kode. Nešteto jih predlagajo vloge (Adobe Dreamweaver je primer) ali neposredno s spletnimi platformami, kot je Wix. Za spletnega oblikovalca pa je poznavanje ročnih postopkov bistvenega pomena. HTML5 in CSS sta temeljna stebra za postavitev spletnih strani in ciljnih strani.

Vendar se boste morali pogosteje, kot bi lahko pričakovali, obrniti na aplikacije, kot sta Indesign ali Adobe Photoshop ki bodo dopolnili vaše postavitveno delo in jim dali popoln zaključek. Danes bomo v tej obsežni vadnici videli, kako lahko postavimo spletno stran z uporabo Adobe Photoshop. V tem prvem delu bomo nadaljevali z delom, ki ga bomo razvili iz Photoshopa, čeprav bomo v prihodnjih delih videli, kako lahko to delo že neposredno uporabimo v kodi HTML, da bo funkcionalno.

Začenši z zasnovo našega žičnega okvira

Za začetek pri postavitvi in ​​oblikovanju spletne strani je izredno pomembno, da začnemo z opredelitvijo osnovnih elementov, to je okostje. Ta struktura bo služila kot podpora za shranjevanje vse vsebine (bodisi besedilne ali večpredstavne). Z opredelitvijo vsakega od odsekov, ki sestavljajo našo stran, lahko na njih delujemo s popolno natančnostjo in zagotovimo čim bolj natančno vizualno zasnovo.

Zelo pomembno je, da upoštevamo dimenzije, ki jih bo imela naša spletna stran, če bo imela v škatli ali v polni širini. Sklenjena spletna stran bo v majhnem vsebniku, zato se bo okoli nje pojavil presledek. Nasprotno, splet s polno pametjo bo zasedel celoten zaslon naprave, ki reproducira stran. Izbira enega ali drugega načina odgovarja zgolj stilskim vprašanjem in bo odvisna tudi od potreb projekta, na katerem delamo. V tem primeru bomo delali z načinom boxed, tako da ne bo zasedel vsega prostora, ki ga ponuja brskalnik.

Žični okvir-1

Za ustvarjanje našega žičnega okvira moramo najprej vstopiti v program Adobe Photoshop in vključiti dimenzije, ki jih želimo imeti na naši strani. V tem primeru bo naša stran široka 1280 slikovnih pik. Vendar se težava z velikostjo lahko razlikuje glede na končni cilj ali napravo, na kateri želimo reproducirati svojo stran. Nobenega dvoma ni, da mora biti spletno oblikovanje funkcionalno in učinkovito odziven in se mora prilagoditi vsem napravam na trgu. V tem primeru pa si bomo prizadevali ustvariti prototip, ki ga bomo reproducirali v namiznem računalniku. Kljub temu bomo o odzivnem vprašanju razpravljali pozneje, za zdaj je v tem primeru hierarhija dimenzij zaslona. Upoštevajte, da bomo v tem primeru v Adobe Photoshopu naredili postavitev ciljne strani in jo nato preselili na HTML5 IN CSS3. Cilj te majhne prakse je pretvoriti dizajn, ustvarjen v Photoshopu, v uporabno in interaktivno spletno obliko, ki se odziva na gibanja uporabnika.

Meritve za mobilne telefone

iPhone 4 in 4S: 320 x 480

iPhone 5 in 5S: 320 x 568

iPhone6: 375 x 667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Meritve tablet

Vsi modeli iPad in iPad Mini: 1024 x 768

Galaxy Tab 2 in 3 (7.0 palcev): 600 x 1024

Galaxy Tab 2 in 3 (10.1 palcev): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Meritve za namizne računalnike

Majhni zasloni (na primer v netbookih): 1024 x 600

Srednji zasloni: 1280 x 720/1280 x 800

Veliki zasloni: širina večja od 1400 slikovnih pik, na primer 1400 x 900 ali 1600 x 1200.

vodniki za žično mrežo

Za začetek distribucije elementov in dodeljevanja odsekov znotraj našega spletnega maketa je zelo pomembno, da upoštevamo razmerja, da zagotovimo berljiv in melodičen zaključek. Nujno morate uporabiti možnosti pravil in vodnikov, ki jih najdete v zgornjem meniju Pogled. Če želite delati sorazmerno in natančno, je najbolje, da delamo iz odstotkov. Za izbiro načina razdelitve bomo kliknili meni pogleda in nato možnost »Nov vodnik«. V tem primeru bomo naredili štiri vertikalne delitve po 25% in jih uporabili kot referenco, da bomo svoje slike postavili v nogo in sliko našega logotipa v glavo.

Žični okvir-1a

Obstaja koda, ki označuje vsako področje, ki bo zasedlo naše model in funkcijo, ki jo bo imel vsak od njih. Na primer, da označimo območje, ki ga bo zasedla slika, bomo ustvarili pravokotnike z nekakšnim križcem. Če želimo navesti, da želimo na določenem območju vključiti videoposnetke, bomo v naš vsebnik vključili simbol za predvajanje. V tem prvem primeru bomo delali samo s slikami, v zgornjem posnetku lahko vidite območje, ki ga logo z našega spletnega mesta.

Žični okvir-končni

To bi bil končni rezultat našega wireframe. Kot vidimo, je razdeljen na glavo, sestavljeno iz slike, v kateri bo logotip najden in ki bo služil kot povezava do domače strani, ki jo spremljata dva zavihka, iskalnik in štirje gumbi na iskalnem polju. Poleg tega smo že znotraj telesa vključili stransko vrstico, sestavljeno iz ločilne vrstice in vrste kategorij, ki kategorizirajo vrsto vsebine, ki bo na naši spletni strani. Še en razdelek z oštevilčenjem, ki vključuje vnose, ki bodo obstajali na našem spletnem mestu, in nazadnje seznam z najbolj reprezentativnimi metaoznakami na našem spletnem mestu.

V vsebinskem področju, ki ga bo določil odsek, ki bo vključeval vsebine, ki jih je mogoče sami upravljati, našli bomo vsebino naših člankov. V tem primeru drobtine ali drobtine (kar kaže na organsko strukturo našega spletnega mesta, naslov članka, metapodatke, odstavek kot telo besedila, znotraj katerega je vključena slika.

Kot nogo smo vključili štiri slike, ki bodo služile kot povezava do drugih delov naše strani. Tu lahko vključimo logotipe ali druge zanimive rubrike. Čeprav bo v resnici to področje delovalo bolj podobno prednožje, saj se bo noga s politiko uporabe, pravnimi obvestili in avtorskimi pravicami nekoliko znižala.

Ko definiramo osnovno strukturo ali okostje naše strani, bomo morali preiti na naslednjo stopnjo. Ta bo sestavljen iz ustrezne zasnove vsakega od področij našega spletnega mesta. Z drugimi besedami, vsako od teh področij bomo začeli "izpolnjevati" z vsebino, ki bo končno vstavljena na našo spletno stran. Priporočljivo je, da teh elementov ne začnemo načrtovati pred delom na žičnem ogrodju, ker je zelo verjetno, da bomo, če bomo to storili v tem vrstnem redu, pozneje spremenili njihova razmerja. Tvegamo, da bomo popačili svoje slike in preoblikovati zasnovo vsakega od elementov, kar bo postalo izguba časa ali rezultat slabše kakovosti.

V tem primeru bo zasnova naše spletne strani izjemno preprosta. Uporabili bomo zapovedi oblikovanja materialov, saj bomo za ponazoritev te prakse uporabili Googlov logotip. Pojasniti moram, da je namen te vaje ponazoriti tehnično znanje, zato estetski rezultat v tem primeru ni pomemben. Kot lahko vidite, smo malo po malo prostor zapolnili z vsemi področji, ki smo jih predhodno določili v naši shemi. Vendar smo v zadnjem trenutku naredili majhno spremembo. Kot ste morda že opazili, smo veliko zmanjšali velikost našega logotipa in v spodnji del glave vključili ločilno črto, ki se popolnoma poveže z zgornjim menijem. V tem primeru smo uporabili gumbe in materiale iz banke virov. Kot oblikovalci jih lahko oblikujemo sami (še posebej je ta možnost priporočljiva, če želimo, da predstavlja zelo podoben tonik tistemu, ki ga predstavlja podoba blagovne znamke ali logotip).

Web

Pomembno je, da upoštevamo, da bomo za prikaz tega primera delali na dveh različnih ravneh. Na eni strani bomo delali na predmetih, na drugi strani pa na videzu spletne strani. To je po eni strani v okostju našega spletnega mesta in po drugi strani pri vseh plavajoči elementi, ki jih bo podprlo to okostje. Opazili boste, da obstajajo območja, ki sploh ne bodo plavala, na primer območje, ki ga bo zavzela naša stranska vrstica, predhodnik ali ločilna vrstica, ki deli glavo od telesa.

web2

Strukture 1, 2, 3 in 4 bodo del projekta ozadje naše spletne strani, zato nam v resnici ne bo treba izvažati kot takega iz Adobe Photoshopa, čeprav to lahko storimo, ni nujno. Ko gre za Ravne barve (Ena od bistvenih značilnosti ploskega oblikovanja in oblikovanja materiala je, da jih lahko popolnoma uporabite s kodo s pomočjo slogovnega sloga CSS). Preostale elemente pa je treba shraniti za poznejše vstavljanje v našo kodo HTML. V tem majhnem diagramu smo reproducirali tudi področja, ki spadajo v ozadje strani, tako da imamo jasno predstavo o tem, kakšen bo končni videz našega spletnega mesta.

Kot boste lahko spoznali, je smisel ustvarjanja te sheme v programu Adobe Photoshop pridobiti resnično dimenzijo vsakega elementa ter pojasniti razporeditev in strukturo vsakega elementa. Seveda besedilna vsebina v tej fazi postopka nima mesta, saj mora biti dobite iz našega urejevalnika kod. Prav tako moramo poudariti, da bomo v tej praksi delali z gumbi in statičnimi elementi, čeprav se običajno uporabljajo iz ogrodja, kot je Bootstrap ali neposredno iz Jquery.

Ko smo ustvarili vsakega od elementov, ki bodo sestavljali našo spletno stran, je čas, da jih začnemo izvažati in shraniti v mapo s slikami v mapi projekta HTML. Pomembno je, da se navadite na izvoz iz svojega žičnega ogrodja, saj boste zelo verjetno morali spremeniti nekatere prvotne elemente glede na konfiguracijo okostja. (V tem primeru smo na primer spremenili velikost prvotnih gumbov, logotipa in večino elementov, ki so del kompozicije, vključno s slikami v spodnjem delu).

Pomembno je, da se naučimo shranjevati vsak predmet samostojno, da ga shranimo z merami, ki jih imajo, in na natančen način. Kakršna koli napaka, pa naj bo minimalna, lahko vpliva na vse elemente, ki so del vaše spletne strani. Upoštevajte, da bodo med seboj povezani in morajo imeti popolne dimenzije, tako da jih je mogoče v končni splet vnesti iz HTML-ja. V tem primeru bomo morali samostojno izrezati in shraniti naslednje elemente:

  • Naš logotip.
  • Vsi gumbi (tisti, ki so del glavnega menija in ostali).
  • Vse slike.

To lahko storimo na več načinov in morda boste našli alternativo, ki je za vas bolj učinkovita. Če pa boste tovrstno postavitev izvedli prvič, priporočam, da upoštevate naslednje nasvete.

  • Najprej morate iti v mapo, v kateri je datoteka PSD, ki vsebuje naš žični okvir, in jo podvojiti tolikokrat kot elementi, ki jih želite izvoziti. V tem primeru smo iz izvirnika ustvarili 12 kopij in jih shranili v isto mapo. Nato boste preimenovali vsako kopijo in ji dodelili ime elementa, ki ga vsebuje. Naših 12 izvodov bo preimenovano: Logotip, menijski gumb 1, menijski gumb 2, iskalna vrstica, zgornji gumb 1, zgornji gumb 2, zgornji gumb 3 in zgornji gumb 4. Preostale štiri se bodo preimenovale v: Slika 1, Slika 2, Slika 3 in Slika 4.
  • Ko je to končano, bomo datoteko odprli z imenom logotipa.
  • Odpravili se bomo do naše palete plasti in poiskali plast, ki vsebuje naš logotip. Potem bomo pritisnili Ctrl / Cmd medtem ko kliknemo na sličico omenjene plasti. Na ta način bo logotip samodejno izbran.
  • Naslednji korak bo povedati Photoshopu, da želimo, da ta logotip natančno izreže. Za to bomo morali le s tipko ali ukazom poklicati orodje za obrezovanje C.
  • Ko to naredimo, kliknemo gumb Enter, da potrdimo rez.
  • Zdaj bomo šli v zgornji meni Datoteka in kliknili, kako shraniti. Izbrali bomo ime, ki bo v tem primeru «Logo», in dodelili bomo obliko PNG, ker je datoteka, ki ponuja najvišjo kakovost v spletu.
  • Postopek bomo ponovili z vsemi kopijami in elementi. Ko obrežete, se prepričajte, da so ostale plasti v naši paleti neviden ali odpravljena. Na ta način lahko vsak element shranimo s prozornim ozadjem.

Gumb1

V tem primeru izberemo naš gumb menija 2 na paleti slojev. Na posnetku zaslona lahko vidite, kako so bile samodejno izbrane omejitve našega gumba.

gumb2

Ko izberemo orodje za obrezovanje s tipko C, se naše platno zmanjša le na dimenzije našega gumba.

gumb za shranjevanje

Zdaj je čas, da enega za drugim shranite vse elemente, ki so del našega spletnega mesta, in jih vključite v mapo s slikami, ki jih bomo uporabili kasneje. Klicali bomo iz naše kode in nadaljevali s postavitvijo, odslej pa z urejevalnikom kode.

Čeprav obstaja veliko orodij in alternativ za postavitev spletne strani, zaradi katerih je postopek popolnoma intuitiven, je zelo pomembno, da se tega naučimo v Navodilo. Na ta način bomo izvedeli, kaj so osnove oblikovanja spletne strani.

Povzetek:

  1. Oblikujte strukturo spletnega mesta s posebno pozornostjo do vsebine, ki jo želite poslati, in odsekov, ki jih morate ustvariti na svojem spletnem mestu.
  2. Delajte na svojem okostju oz wireframe iz Adobe Photoshopa z navedbo, na katerih področjih bo prikazana vsebina in njihov format.
  3. Zanašajte se na ukrepe in blagovne znamke, ki ste jih že razvili, začnite oblikovanje površino spleta. Vključuje vse elemente (tako plavajoče kot fiksne). Ne pozabite vključiti ustreznih gumbov, logotipa in slik.
  4. Izrežite enega za drugim vse elemente, ki so del projekta. Prepričajte se, da imajo ustrezne ukrepe in da vam kasneje ne bodo povzročali težav.
  5. Shranite vse elemente v obliki PNG v mapi slik znotraj mape projekta HTML.
  6. Upoštevajte, da bo ta projekt imel izhod v spletno okno, zato je zelo pomembno, da upoštevate barvni način in uporabite RGB.
  7. Navdihnite se pred drugimi spletnimi stranmi, ki jih občudujete, preden se lotite dela in ne pozabite o tem razpravljati s člani svoje ekipe. Če gre za projekt za stranko, se poskusite držati briefing kolikor je le mogoče.

Pustite svoj komentar

Vaš e-naslov ne bo objavljen. Obvezna polja so označena z *

*

*

  1. Za podatke odgovoren: Miguel Ángel Gatón
  2. Namen podatkov: Nadzor neželene pošte, upravljanje komentarjev.
  3. Legitimacija: Vaše soglasje
  4. Sporočanje podatkov: Podatki se ne bodo posredovali tretjim osebam, razen po zakonski obveznosti.
  5. Shranjevanje podatkov: Zbirka podatkov, ki jo gosti Occentus Networks (EU)
  6. Pravice: Kadar koli lahko omejite, obnovite in izbrišete svoje podatke.

  1.   Piratesking Pirate King je dejal

    hahahahahaha in na koncu vsega tega greš do gumba za zagon, izklopi opremo in greš do prekletega strokovnjaka, ki ti bo naredil spletno stran, ki ni prekleto sranje;)

  2.   ronny je dejal

    Vadnica me dobro prenaša, toda v naslednjem boste morda podrobneje opisali, še vedno začenjam s tem oblikovanjem in ko vidim slike s končnim rezultatom, je nekaj korakov, ki jih ne vem. Hvala vam.