Kennsla: Hvernig á að skipuleggja vefsíðu með Adobe Photoshop

Það er mikið úrval af verkfærum til að hanna vefsíður og vinna á einfaldan og virkan hátt án þess að slá inn eða snerta kóða. Þeir eru óteljandi, lagt til af umsóknum (Adobe Dreamweaver er dæmi) eða beint af netpöllum eins og Wix. Hins vegar er nauðsynlegt fyrir vefhönnuð að vita af handbókinni. HTML5 og CSS eru grundvallarstoðir fyrir skipulag vefsíðna og áfangasíðna.

Hins vegar, oftar en þú gætir búist við, verður þú að snúa þér að forritum eins og Indesign eða Adobe Photoshop til að bæta uppsetningarvinnuna og gefa þeim fullkominn frágang. Í dag munum við sjá í þessari viðamiklu kennslu, hvernig við getum skipulagt vefsíðu með Adobe Photoshop. Í þessum fyrsta hluta munum við vera áfram í verkinu sem þróað verður úr Photoshop, þó að í framtíðinni munum við sjá hvernig við getum beitt þessu verki þegar beint í HTML kóða til að gera það virk.

Byrjar með hönnun víramma okkar

Til að byrja með uppsetningu og hönnun vefsíðu er gífurlega mikilvægt að við byrjum á því að skilgreina hver grunnþættirnir verða, þetta er beinagrindin. Þessi uppbygging mun þjóna stuðningi við að geyma allt innihaldið (hvort sem er texta- eða margmiðlun). Með því að skilgreina hvern hluta sem mynda síðuna okkar munum við geta unnið að þeim af nákvæmni og veitt sjónræna hönnun sem er eins nákvæm og mögulegt er.

Það er mjög mikilvægt að við tökum mið af þeim víddum sem vefsíðan okkar mun hafa, ef hún hefur a í kassa eða í fullri breidd. Hnefaleikasíða verður inni í litlum íláti og því mun rými birtast í kringum hana. Þvert á móti mun fullur vefur taka allan skjá tækisins sem endurskapar síðuna. Að velja á milli eins eða annars háttar bregst aðeins við stílspurningum og fer einnig eftir þörfum verkefnisins sem við erum að vinna að. Við munum vinna í þessu dæmi með ham í reit, þannig að það mun ekki taka allt plássið sem vafrinn veitir.

 

Til að búa til víramma okkar er það fyrsta sem við verðum að gera að slá inn Adobe Photoshop forritið og fela í sér þær stærðir sem við viljum að síðan okkar hafi. Í þessu dæmi verður síðan okkar 1280 pixlar á breidd. Stærðarvandamálið getur þó verið mismunandi eftir endanlegum ákvörðunarstað eða tækinu sem við viljum endurskapa síðuna okkar á. Það er enginn vafi á því að til þess að vefsíðuhönnun er hagnýt og skilvirk, verður hún að vera móttækilegur og það verður að laga sig að öllum tækjum á markaðnum. En í þessu tilfelli ætlum við að vinna að því að búa til frumgerð sem við ætlum að endurskapa á borðtölvu. Þrátt fyrir það verður móttækilegt mál rætt síðar, í bili, hér er stigveldi skjávíddar til að vinna með í þessu dæmi. Hafðu í huga að í þessu tilfelli munum við útbúa áfangasíðu í Adobe Photoshop og flytja það síðan yfir í HTML5 OG CSS3. Markmiðið með þessari litlu framkvæmd er að breyta hönnun sem búin er til í Photoshop í nothæfa og gagnvirka vefhönnun sem bregst við hreyfingum notandans.

Mælingar fyrir farsíma

iPhone 4 og 4S: 320 x 480

iPhone 5 og 5S: 320 x 568

iPhone 6: 375x667

iPhone 6+: 414x736

Samband 4: 384 x 598

Samband 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Töflumælingar

iPad allar gerðir sem og iPad Mini: 1024 x 768

Galaxy Tab 2 og 3 (7.0 tommur): 600 x 1024

Galaxy Tab 2 og 3 (10.1 tommur): 800 x 1280

Samband 7: 603 x 966

Samband 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mælingar fyrir borðtölvur

Litlir skjáir (notaðir til dæmis í netbókum): 1024 x 600

Miðlungs skjár: 1280 x 720/1280 x 800

Stórir skjáir: breidd meiri en 1400 punktar, dæmi 1400 x 900 eða 1600 x 1200.

 

Til að byrja að dreifa frumefnunum og úthluta hlutum innan vefspjallsins okkar er mjög mikilvægt að við tökum tillit til hlutfallanna til að tryggja læsilegan og melódískan frágang. Það verður nauðsynlegt að þú notir reglurnar og leiðbeiningarnar sem þú getur fundið í toppvalmyndinni Skoða. Til að vinna hlutfallslega og nákvæmlega er best að við vinnum frá prósentum. Við munum smella á útsýnisvalmyndina og síðan á valkostinn «Ný leiðarvísir» til að velja hátt skiptingarinnar. Í þessu tilfelli munum við gera fjórar lóðréttar skiptingar við 25% og við munum taka þær til viðmiðunar til að setja myndir okkar í fótinn og myndina af lógóinu okkar í hausnum.

Það er kóði til að tilgreina hvert svæðin sem munu hernema okkar fyrirmynd og virkni sem hver þeirra mun hafa. Til dæmis, til að gefa til kynna svæðið sem mynd mun hernema, munum við búa til ferhyrninga með eins konar krossi. Til að gefa til kynna að við viljum fela myndskeið á ákveðnu svæði munum við setja táknmyndina fyrir í gámnum okkar. Í þessu fyrsta dæmi ætlum við aðeins að vinna með myndir, í efri myndatökunni geturðu séð svæðið sem logotipo frá vefsíðu okkar.

Þetta væri lokaniðurstaðan af okkar wireframe. Eins og við sjáum er því skipt í haus sem samanstendur af myndinni sem merkið er að finna í og ​​mun þjóna sem hlekkur á heimasíðuna ásamt tveimur flipum, leitarvél og fjórum hnappum í leitarreitnum. Að auki, þegar innan líkamans, höfum við tekið með hliðarslá sem samanstendur af deilistiku og röð af flokkum sem flokka tegund efnis sem verður á vefsíðu okkar. Annar hluti með númerun sem inniheldur færslurnar sem verða til á vefsíðunni okkar og að lokum listi með táknmyndum eða merkimiðum á vefsíðu okkar.

Á innihaldssvæðinu, sem verður skilgreint með kafla sem mun innihalda sjálfstjórnandi efni, við munum finna innihald greina okkar. Í þessu tilfelli, brauðmolum eða brauðmylsnu (sem gefur til kynna lífræna uppbyggingu vefsíðu okkar, fyrirsögn greinarinnar, lýsigögnin, málsgrein sem texti, þar sem mynd er innifalin.

Sem fótur höfum við látið fylgja með fjórar myndir sem munu þjóna sem hlekkur á önnur svæði á síðunni okkar. Hér getum við haft lógó eða aðra áhugaverða kafla. Þó að í raun og veru mun þetta svæði virka meira eins og forkeppni, þar sem fóturinn sjálfur mun fara aðeins neðar með notkunarstefnuna, lagalega tilkynningu og höfundarrétt.

Þegar við höfum skilgreint grunnbyggingu eða beinagrind á síðu okkar verðum við að fara á næsta stig. Þetta mun samanstanda af réttri hönnun hvers sviðs vefsíðu okkar. Með öðrum orðum munum við byrja að „fylla út“ hvert þessara svæða með því efni sem loksins verður sett inn á vefsíðu okkar. Það er mælt með því að við förum ekki að hanna þessa þætti áður en unnið er að vírrammanum því það er mjög líklegt að ef við gerum það í þessari röð, þá þurfum við síðar að breyta hlutföllum þeirra. Við eigum á hættu að afmynda myndirnar okkar og að þurfa að endurgera hönnun hvers þáttanna, sem verður annað hvort sóun á tíma eða minni gæði.

Í þessu tilfelli verður hönnun vefsíðu okkar afar einföld. Við munum nota Fyrirmæli um hönnun efnis, þar sem við ætlum að nota Google merkið til að sýna dæmi um þessa framkvæmd. Ég verð að skýra að tilgangur þessarar kennslu er að sýna tæknilega þekkingu, þannig að fagurfræðileg niðurstaða í þessu tilfelli skiptir ekki máli. Eins og þú sérð höfum við smátt og smátt verið að fylla rýmið með öllum þeim svæðum sem við höfum áður ákveðið í áætlun okkar. Hins vegar gerðum við litla breytingu á síðustu stundu. Eins og þú hefur kannski tekið eftir höfum við minnkað stærð lógósins okkar töluvert og við höfum sett inn línur í neðri hausarsvæðinu sem tengist fullkomlega við efri valmyndina. Í þessu tilfelli höfum við notað hnappa og efni frá auðlindabanka. Sem hönnuðir getum við hannað þá sjálfir, (sérstaklega er mælt með þessum valkosti ef við viljum að hann leggi fram mjög svipað tón og það sem kynnt er af vörumyndinni eða merkinu).

Það er mikilvægt að hafa í huga að til að gera þetta dæmi ætlum við að vinna á tveimur mismunandi stigum. Annars vegar munum við vinna að hlutunum og hins vegar útliti vefsíðunnar. Það er annars vegar í beinagrind vefsíðu okkar og hins vegar í öllu fljótandi þætti sem þessi beinagrind mun styðja við. Þú munt taka eftir því að það eru svæði sem munu alls ekki fljóta, svo sem svæðið sem skenkur okkar mun hernema, forfótarinn eða deilistikan sem skiptir hausnum frá líkamanum.

Mannvirki 1, 2, 3 og 4 verða hluti af bakgrunnur vefsíðunnar okkar, þannig að í raun og veru verður ekki nauðsynlegt fyrir okkur að flytja út sem slíkt frá Adobe Photoshop, þó að við getum gert það, þá er það ekki nauðsynlegt. Þegar kemur að Flatir litir (Einn af grunnþáttum flatrar hönnunar og efnishönnunar, þeim er hægt að beita fullkomlega með kóða með CSS stílblaði). Hins vegar verður að vista restina af frumefnunum til að setja það síðar inn í HTML kóðann okkar. Í þessari litlu skýringarmynd höfum við einnig endurtekið svæðin sem tilheyra bakgrunni síðunnar svo að við höfum skýra hugmynd um hver endanleg útlit vefsins okkar verður.

Eins og þú munt geta gert þér grein fyrir, þá er tilfinningin að búa til þetta kerfi í Adobe Photoshop að fá raunverulega vídd hvers þáttar og að skýra fyrirkomulag og uppbyggingu hvers þáttar. Auðvitað á textainntakið engan stað í þessum áfanga ferlisins þar sem það hlýtur að vera afhent frá kóða ritstjóra okkar. Við verðum líka að benda á að við þessa iðju ætlum við að vinna með hnappa og truflanir, þó að almennt sé þessu beitt frá ramma eins og Bootstrap eða beint frá Jquery.

Þegar við höfum búið til hvern og einn af þeim þáttum sem mynda vefsíðuna okkar er kominn tími til að hefja útflutning á þeim og vista í myndamöppunni sem er staðsett í HTML verkefnamöppunni. Það er mikilvægt að þú venjir þig við að flytja út úr víramma þínum, því það er mjög líklegt að þú þurfir að breyta sumum af upphaflegu atriðunum út frá beinagrindinni. (Til dæmis, í þessu tilfelli höfum við breytt stærð upprunalegu hnappanna, lógóinu og flestum atriðum sem eru hluti af tónsmíðinni, þar með talið myndunum á neðra svæðinu).

Það er mikilvægt að við lærum að vista hvaða hlut sem er sjálfstætt til að vista þá með þeim málum sem þeir hafa og á nákvæman hátt. Sérhver villa, hversu lítil sem hún er, getur haft áhrif á alla þætti sem eru hluti af vefsíðunni þinni. Hafðu í huga að þau munu tengjast hvort öðru og verða að hafa fullkomnar víddir svo hægt sé að slá þær inn úr HTML á lokavefnum. Í þessu tilfelli verðum við að klippa sjálfkrafa og vista eftirfarandi þætti:

• Merkið okkar.
• Allir hnappar (þeir sem eru hluti af aðalvalmyndinni og afgangurinn).
• Allar myndirnar.

Við getum gert það á marga vegu og kannski finnur þú val sem er áhrifaríkara fyrir þig. En ef það er í fyrsta skipti sem þú ætlar að gera þessa gerð uppsetningar, mæli ég með að þú fylgir eftirfarandi ráðum.

• Í fyrsta lagi verður þú að fara í möppuna þar sem PSD skráin sem inniheldur víramma okkar er staðsett og afrita hana eins oft og þættirnir sem þú ætlar að flytja út. Í þessu tilfelli höfum við búið til 12 eintök úr frumritinu og vistað þau í sömu möppu. Því næst muntu endurnefna hvert eintak og gefa hverju þeirra nafn frumefnisins sem það inniheldur. Tólf eintökum okkar verður breytt: Logo, valmyndarhnappur 12, valmyndarhnappur 1, leitarstiku, efri hnappur 2, efri hnappur 1, efri hnappur 2 og efri hnappur 3. Hinir fjórir verða endurnefna sem: Mynd 4, mynd 1, Mynd 2 og mynd 3.
• Þegar þessu er lokið munum við opna skrána með lógóheitinu.
• Við munum fara í lagatöflu okkar og finna lagið sem inniheldur lógóið okkar. Þá munum við ýta á Ctrl / Cmd á meðan við smellum á smámyndina af nefndu lagi. Á þennan hátt mun merkið hafa verið valið sjálfkrafa.
• Næsta skref verður að segja Photoshop að við viljum að það klippi út merkið á nákvæman hátt. Fyrir þetta verðum við aðeins að hringja í uppskerutækið frá lyklinum eða skipuninni C.
• Þegar við höfum gert þetta munum við smella á Enter hnappinn okkar til að staðfesta niðurskurðinn.
• Nú munum við fara í efstu File valmyndina til að smella á Vista hvernig. Við munum velja nafnið, sem í þessu tilfelli verður «Logo» og við munum úthluta því sniði PNG, fyrir að vera sú skrá sem býður upp á hæstu gæði á vefnum.
• Við munum endurtaka ferlið með öllum eintökum og þætti. Þegar þú hefur klippt skaltu ganga úr skugga um að restin af lögunum í litatöflu okkar séu ósýnilega eða útrýmt. Þannig getum við vistað hvern þátt með gagnsæjum bakgrunni.

Í þessu tilfelli veljum við valmyndarhnappinn okkar 2 úr lagatöflu. Þú sérð á skjáskotinu hvernig mörk hnappsins okkar hafa verið valin sjálfkrafa.

Þegar við veljum uppskerutækið úr C lyklinum minnkar striginn okkar aðeins að stærð hnappsins okkar.

Nú er kominn tími til að vista einn og einn alla þá þætti sem eru hluti af vefsíðu okkar og láta þá fylgja í myndamöppunni sem við munum nota síðar. Við munum hringja úr kóðanum okkar og við munum halda áfram með skipulag okkar en héðan í frá frá kóða ritstjóra.

Þó að það séu mörg verkfæri og valkostir við að skipuleggja vefsíðu og gera ferlið algerlega innsæi, þá er mjög mikilvægt að við lærum að gera það á handbók. Á þennan hátt munum við læra hver eru grundvallaratriðin á bak við hönnun vefsíðu.

Yfirlit:

1. Hannaðu uppbygging vefsíðunnar með sérstakri gaum að innihaldinu sem þú vilt senda og þeim hlutum sem þú verður að búa til á vefsíðunni þinni.
2. Vinna við beinagrindina þína eða wireframe frá Adobe Photoshop sem gefur til kynna á hvaða svæðum innihaldið birtist og snið þeirra.
3. Treystu á ráðstöfunum og vörumerkjum sem þú hefur áður þróað, byrjaðu að hönnun yfirborð vefsins. Inniheldur alla þætti (bæði fljótandi og fasta). Ekki gleyma að taka með samsvarandi hnappa, merki og myndir.
4. Klipptu út einn og einn alla þætti sem eru hluti af verkefninu. Gakktu úr skugga um að þeir hafi réttu ráðstafanirnar og að þær muni ekki valda þér vandamálum síðar.
5. Vistaðu alla þætti á sniði PNG í myndamöppunni inni í verkefnamöppunni HTML.
6. Hafðu í huga að þetta verkefni mun skila út í vefgluggann svo það er mjög mikilvægt að þú takir tillit til litastillingar og beitir RGB.
7. Vertu innblásin af öðrum vefsíðum sem þú dáist að áður en þú byrjar að vinna og ekki gleyma að ræða þetta við liðsmenn þína. Ef það er verkefni fyrir viðskiptavin, reyndu að halda þig við samantekt eins langt og mögulegt er.