Õpetus: kuidas veebilehte Adobe Photoshopiga paigutada

Veebilehtede kujundamiseks ja täiesti lihtsaks ja funktsionaalseks kasutamiseks ilma koodi sisestamata või seda puudutamata on palju erinevaid tööriistu. Neid on lugematu arv, mida pakuvad taotlused (Adobe Dreamweaver on näide) või otse veebiplatvormide kaudu, näiteks Wix. Veebidisaineri jaoks on aga manuaalprotseduuride tundmine hädavajalik. HTML5 ja CSS on veebisaitide ja sihtlehtede paigutuse põhisambad.

Kuid sagedamini kui võite arvata, peate pöörduma selliste rakenduste poole nagu Indesign või Adobe Photoshop täiendada oma paigutustööd ja anda neile täiuslik viimistlus. Täna näeme selles ulatuslikus õpetuses, kuidas saame veebilehte Adobe Photoshopi abil paigutada. Selles esimeses osas peatume Photoshopis arendatavas töös, ehkki järgmistes osamaksetes näeme, kuidas saaksime seda tööd juba HTML-koodis rakendada, et see toimiks.

Alustades meie traatraami kujundusest

Alustuseks veebilehe kujunduse ja kujundusega on tohutult oluline, et alustaksime põhielementide määratlemisest, see on luustik. See struktuur toetab kogu sisu (nii tekstilist kui ka multimeediumit) hoidmist. Määratledes kõik meie lehe moodustavad jaotised, saame nendega töötada täpselt ja pakkuda võimalikult täpset visuaalset kujundust.

On väga oluline, et võtaksime arvesse neid mõõtmeid, mis meie veebisaidil on, kui sellel on karbis või täislaiuses. Pakitud veebileht asub väikese konteineri sees ja seetõttu ilmub selle ümber tühik. Vastupidi, täielik veeb veeb hõivab kogu lehte reprodutseeriva seadme ekraani. Ühe või teise viisi valimine vastab ainult stiiliküsimustele ja sõltub ka projekti vajadustest, millega töötame. Töötame selles näites kastirežiimiga, nii et see ei hõivata kogu brauseri pakutavat ruumi.

Traadiraami loomiseks peame kõigepealt sisestama rakenduse Adobe Photoshop ja lisama mõõtmed, mida meie lehel soovime. Selles näites on meie lehe laius 1280 pikslit. Suuruse probleem võib siiski varieeruda sõltuvalt lõppsihtkohast või seadmest, millel oma lehte taasesitada soovime. Pole kahtlust, et veebidisaini toimivus ja tõhusus peab seda ka olema tundlik ja see peab kohanema kõigi turul olevate seadmetega. Kuid sel juhul tegeleme prototüübi loomisega, mille me paljundame lauaarvutis. Sellegipoolest arutatakse reageerivat teemat hiljem, praegu on siin näites kasutatav ekraanimõõtmete hierarhia. Pidage meeles, et sel juhul koostame Adobe Photoshopis sihtlehe paigutuse ja seejärel migreerime selle HTML5-i ja CSS3-i. Selle vähese praktika eesmärk on teisendada Photoshopis loodud kujundus kasutatavaks ja interaktiivseks veebidisainiks, mis vastab kasutaja liigutustele.

Mobiiltelefonide mõõtmised

iPhone 4 ja 4S: 320 x 480

iPhone 5 ja 5S: 320 x 568

iPhone 6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Tablettide mõõtmised

Kõik iPadi mudelid ja ka iPad Mini: 1024 x 768

Galaxy Tab 2 ja 3 (7.0 tolli): 600 x 1024

Galaxy Tab 2 ja 3 (10.1 tolli): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsofti pind W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mõõtmised lauaarvutitele

Väikesed ekraanid (kasutatakse näiteks netiraamatutes): 1024 x 600

Keskmised ekraanid: 1280 x 720/1280 x 800

Suured ekraanid: laius on suurem kui 1400 pikslit, näiteks 1400 x 900 või 1600 x 1200.

Elementide levitamise ja jaotiste määramise alustamiseks meie veebimockupis on väga oluline, et võtaksime arvesse proportsioone, et tagada loetav ja meloodiline viimistlus. Oluline on kasutada reegleid ja juhendeid, mille leiate ülamenüüst Vaade. Proportsionaalselt ja täpselt töötamiseks on kõige parem töötada protsentidest. Jaotuse modaalsuse valimiseks klõpsame vaate menüüd ja seejärel valikut «Uus juhend». Sel juhul teeme neli vertikaalset jaotust 25% juures ja võtame neid võrdlusena, et paigutada oma pildid jalusse ja meie logo pilt päisesse.

Iga meie jaoks hõivatud ala tähistamiseks on olemas kood mudel ja funktsioon, mis neil kõigil on. Näiteks selle ala tähistamiseks, mille pilt hõivab, loome ristkülikud, millel on mingi rist. Näidates, et soovime videoid teatud piirkonda lisada, lisame oma konteinerisse ka esitusmärgi. Selles esimeses näites töötame ainult piltidega, ülemisel jäädvustusel näete ala, millel logo meie veebisaidilt.

See oleks meie lõpptulemus sõrestikku. Nagu näeme, on see jagatud päiseks, mis koosneb pildist, kust logo leitakse ja mis toimib lingina avalehele koos kahe vahelehe, otsingumootori ja nelja nupuga otsingukastil. Lisaks oleme juba korpuses lisanud külgriba, mis koosneb eraldusribast ja rea ​​kategooriatest, mis kategoriseerivad meie veebisaidil oleva sisu tüübi. Teine nummerdusega jaotis, mis sisaldab meie saidil olevaid kirjeid, ja lõpuks loetelu meie saidi kõige esinduslikumate metasiltide või siltidega.

Sisupiirkonnas, mille määratleb jaotis, mis sisaldab ise hallatav sisu, leiame oma artiklite sisu. Sellisel juhul leivapuru või riivsai (mis tähistab meie veebisaidi orgaanilist struktuuri, artikli pealkirja, metaandmeid, lõiku kui tekstikomplekti, mille sisse on lisatud pilt.

Jalusena oleme lisanud neli pilti, mis on lingiks meie lehe teistele piirkondadele. Siia võime lisada logosid või muid huvitavaid jaotisi. Kuigi tegelikkuses käitub see ala pigem sarnaselt eeljalgratas, kuna jalus ise läheb kasutuspoliitika, juriidilise teatise ja autoriõigustega veidi alla.

Kui oleme oma lehe põhistruktuuri või skeleti määratlenud, peame minema järgmisele tasandile. See seisneb meie veebisaidi iga ala korralikus kujunduses. Teisisõnu hakkame kõiki neid alasid "täitma" sisuga, mis lõpuks meie veebisaidile lisatakse. Soovitatav on mitte alustada nende elementide kujundamist enne traadiraamiga töötamist, sest on väga tõenäoline, et kui teeme seda selles järjekorras, peame hiljem nende proportsioone muutma. Meil on oht oma pilte moonutada ning tuleb uuesti teha iga elemendi kujundus, millest saab kas aja raiskamine või madalama kvaliteediga tulemus.

Sel juhul on meie veebisaidi kujundus äärmiselt lihtne. Me kasutame materjali kujundamise ettekirjutused, kuna selle tava näitlikustamiseks kasutame Google'i logo. Pean selgitama, et selle õpetuse eesmärk on illustreerida tehnilisi teadmisi, seega pole esteetiline tulemus antud juhul asjakohane. Nagu näete, oleme tasapisi täitnud ruumi kõigi aladega, mille oleme varem oma skeemis kindlaks määranud. Viimasel hetkel tegime siiski väikese modifikatsiooni. Nagu te ehk märkasite, oleme oma logo suurust märkimisväärselt vähendanud ja lisanud alumisse päisealasse eraldusjoone, mis ühendub ideaalselt ülemise menüüga. Sel juhul oleme kasutanud ressursipanga nuppe ja materjale. Disaineritena saame neid ise kujundada (eriti seda võimalust on soovitatav kasutada, kui soovime, et see esitaks brändipildi või logoga väga sarnast toonikut).

On oluline meeles pidada, et selle näite esitamiseks töötame kahel erineval tasandil. Ühest küljest tegeleme objektide ja teiselt poolt veebisaidi välimusega. See tähendab, et ühelt poolt meie veebisaidi luustikus ja teiselt poolt kokku hõljuvad elemendid, mida see skelett toetab. Saate aru, et on piirkondi, mis ei hõlma üldse, näiteks ala, mille meie külgriba hõivab, eeljalgsus või eraldusriba, mis jaotab päise kehast.

Struktuurid 1, 2, 3 ja 4 saavad olema osa tagapõhi meie veebisaidilt, nii et tegelikult pole meil vaja Adobe Photoshopist sellisena eksportida, ehkki saame hakkama, pole see vajalik. Kui tegemist on Lamedad värvid (lamekujunduse ja materjalidisaini üks olulisi tunnuseid, neid saab CSS-i stiililehe abil koodi abil suurepäraselt rakendada). Ülejäänud elemendid tuleb siiski HTML-koodi hilisemaks sisestamiseks salvestada. Selles väikeses skeemis oleme reprodutseerinud ka lehe taustal olevad alad, et meil oleks selge ettekujutus meie saidi lõplikust välimusest.

Nagu saate aru, on selle skeemi loomise Adobe Photoshopis eesmärk saada iga elemendi tegelik mõõde ja selgitada iga elemendi paigutust ja struktuuri. Muidugi pole tekstisisulil protsessi selles faasis kohta, sest see peab olema tarnitud meie koodiredaktorist. Samuti peame juhtima tähelepanu sellele, et selles praktikas hakkame töötama nuppude ja staatiliste elementidega, kuigi üldiselt rakendatakse neid tavaliselt sellistest raamistikest nagu Bootstrap või otse Jqueryst.

Kui oleme loonud kõik elemendid, millest meie veebileht koosneb, on aeg hakata neid eksportima ja salvestama HTML-projekti kausta sees olevasse piltide kausta. On oluline, et harjuksite traatraamilt eksportimisega, sest on väga tõenäoline, et peate mõningaid algseid elemente skeleti konfiguratsiooni põhjal muutma. (Näiteks oleme sel juhul muutnud algsete nuppude suurust, logo ja enamikku kompositsiooni kuuluvatest elementidest, sealhulgas alumise ala pilte.)

On oluline, et me õpiksime salvestama ükskõik milliseid esemeid iseseisvalt, et neid täpselt koos mõõtmetega salvestada. Iga viga, olgu see siis minimaalne, võib mõjutada kõiki teie veebisaidi osi. Pidage meeles, et need on omavahel seotud ja peavad olema täiuslike mõõtmetega, et neid saaks HTML-is lõplikku veebi sisestada. Sellisel juhul peame iseseisvalt lõikama ja salvestama järgmised elemendid:

• Meie logo.
• Kõik nupud (need, mis kuuluvad peamenüüsse ja ülejäänud).
• Kõik pildid.

Saame seda teha mitmel viisil ja võib-olla leiate alternatiivi, mis on teie jaoks tõhusam. Kuid kui seda tüüpi paigutust teete esimest korda, soovitan teil järgida järgmisi näpunäiteid.

• Esiteks peate minema kausta, kus asub meie traadiraami sisaldav PSD-fail, ja dubleerima see mitu korda kui elemendid, mida kavatsete eksportida. Sel juhul oleme loonud originaalist 12 koopiat ja oleme need salvestanud samasse kausta. Järgmisena nimetate ümber kõik eksemplarid ja määrate igale neist selle elemendi nime. Meie 12 eksemplari nimetatakse ümber: Logo, menüünupp 1, menüünupp 2, otsinguriba, ülemine nupp 1, ülemine nupp 2, ülemine nupp 3 ja ülemine nupp 4. Ülejäänud neli nimetatakse ümber: Pilt 1, Pilt 2, Pilt 3 ja Pilt 4.
• Kui see on tehtud, avame faili, millel on logo nimi.
• Läheme oma kihipaletti ja leiame kihi, mis sisaldab meie logo. Siis me vajutame Ctrl / Cmd kui klõpsame nimetatud kihi pisipildil. Sel viisil valitakse logo automaatselt.
• Järgmine samm on öelda Photoshopile, et soovime, et see lõikaks selle logo täpselt välja. Selleks peame helistama tööriistale ainult võtmest või käsust C.
• Kui oleme seda teinud, klõpsame lõike kinnitamiseks nuppu Enter.
• Nüüd läheme ülemisse menüüsse Fail, et klõpsata nupul Salvesta kuidas. Valime nime, milleks on antud juhul «Logo», ja määrame sellele vormingu PNG, kuna see on fail, mis pakub veebis kõrgeimat kvaliteeti.
• Kordame protsessi kõigi koopiate ja elementidega. Kui olete kärpinud, veenduge, et meie paleti ülejäänud kihid oleksid nähtamatu või kõrvaldatud. Nii saame iga elemendi salvestada läbipaistva taustaga.

Sel juhul valime kihtide paletilt oma menüünupu 2. Ekraanipildilt näete, kuidas meie nupu piirid on automaatselt valitud.

Kui oleme kärpimistööriista valinud C-klahvist, vähendatakse meie lõuend ainult meie nupu mõõtmetele.

Nüüd on aeg ükshaaval salvestada kõik elemendid, mis on meie veebisaidi osa, lisada need kausta Pildid ja mida me hiljem kasutame. Helistame oma koodilt ja jätkame kujundusega, kuid nüüdsest meie koodiredaktorist.

Kuigi veebilehe kujundamiseks on palju tööriistu ja alternatiive, mis muudavad protsessi täiesti intuitiivseks, on väga oluline, et me õpiksime seda tegema käsiraamat. Sel moel õpime, millised on veebisaidi kujundamise põhialused.

Kokkuvõte:

1. Kujundage struktuur veebisaidil, pöörates erilist tähelepanu sisule, mida soovite edastada, ja jaotistele, mille peate oma veebisaidil looma.
2. Töötage oma luustiku või sõrestikku Adobe Photoshopist, märkides, millistes piirkondades sisu kuvatakse, ja nende vormingut.
3. Tuginedes meetmetele ja kaubamärkidele, mille olete varem välja töötanud, hakake seda tegema kujundus veebi pind. Sisaldab kõiki elemente (nii ujuvaid kui ka fikseeritud). Ärge unustage lisada vastavaid nuppe, logo ja pilte.
4. Lõigake ükshaaval välja kõik projekti osad. Veenduge, et neil on õiged meetmed ja et need ei tekitaks teile hiljem probleeme.
5. Salvestage kõik elemendid vormingus PNG projekti kausta sees olevas pildikaustas HTML.
6. Pidage meeles, et sellel projektil on veebiaknas väljund, seega on väga oluline arvestada värvirežiimiga ja rakendada RGB.
7. Inspireeruge teistest veebilehtedest, mida enne tööle asumist imetlete, ja ärge unustage seda oma meeskonnaliikmetega arutada. Kui tegemist on kliendi jaoks mõeldud projektiga, proovige sellest kinni pidada briifing niipalju kui võimalik.