Opplæring: Hvordan legge opp en webside med Adobe Photoshop

Det er et stort utvalg av verktøy for å designe websider og jobbe på en helt enkel og funksjonell måte uten å legge inn eller berøre kode. De er utallige, foreslått av søknader (Adobe Dreamweaver er et eksempel) eller direkte av elektroniske plattformer som Wix. For en webdesigner er det imidlertid viktig å vite de manuelle prosedyrene. HTML5 og CSS er de grunnleggende søylene for utformingen av nettsteder og destinasjonssider.

Imidlertid, oftere enn du forventer, må du henvende deg til applikasjoner som Indesign eller Adobe Photoshop for å utfylle layoutarbeidet og gi dem en perfekt finish. I dag vil vi se i denne omfattende opplæringen hvordan vi kan legge opp en webside ved hjelp av Adobe Photoshop. I denne første delen vil vi holde oss i arbeidet som skal utvikles fra Photoshop, selv om vi i fremtidige avdrag vil se hvordan vi kan bruke dette arbeidet allerede direkte i HTML-kode for å gjøre det funksjonelt.

Starter med utformingen av trådrammen vår

Til å begynne med utformingen og utformingen av en webside er det enormt viktig at vi begynner med å definere hva de grunnleggende elementene vil være, dette er skjelettet. Denne strukturen vil tjene som en støtte for å holde alt innholdet (enten det er tekst eller multimedia). Ved å definere hver av seksjonene som utgjør siden vår, vil vi kunne jobbe med dem med full nøyaktighet og gi et visuelt design som er så nøyaktig som mulig.

Det er veldig viktig at vi tar hensyn til dimensjonene som nettstedet vårt vil ha, hvis det vil ha en i boks eller i full bredde. En webside i boks vil være inne i en liten container, og det vil derfor vises et mellomrom rundt den. Tvert imot vil en fullstendig web oppta hele skjermen på enheten som gjengir siden. Valget mellom en eller annen modalitet svarer på bare stilistiske spørsmål og vil også avhenge av behovene til prosjektet vi jobber med. Vi vil arbeide i dette eksemplet med boksmodus, så det vil ikke oppta all plass som nettleseren gir.

For å lage trådrammen vår, er det første vi må gjøre å gå inn i Adobe Photoshop-applikasjonen og inkludere dimensjonene vi vil ha siden vår. I dette eksemplet vil siden vår være 1280 piksler bred. Størrelsesproblemet kan imidlertid variere avhengig av den endelige destinasjonen eller enheten vi vil gjengi siden vår på. Det er ingen tvil om at for at et webdesign skal være funksjonelt og effektivt, må det være responsive og den må tilpasse seg alle enheter på markedet. I dette tilfellet skal vi imidlertid jobbe for å lage en prototype som vi skal reprodusere på en stasjonær datamaskin. Likevel er det responsive problemet vi vil håndtere senere, for nå, her er et hierarki av skjermdimensjoner å jobbe med i dette eksemplet. Husk at i dette tilfellet vil vi lage et oppsett av destinasjonssiden i Adobe Photoshop og deretter overføre den til HTML5 OG CSS3. Målet med denne lille øvelsen er å konvertere et design opprettet i Photoshop til et brukbart og interaktivt webdesign som reagerer på brukerens bevegelser.

Målinger for mobiltelefoner

iPhone 4 og 4S: 320 x 480

iPhone 5 og 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

Tablettmålinger

iPad alle modeller samt iPad Mini: 1024 x 768

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

Galaxy Tab 2 og 3 (10.1 tommer): 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

Målinger for stasjonære datamaskiner

Små skjermer (brukt for eksempel i netbooks): 1024 x 600

Middels skjermer: 1280 x 720/1280 x 800

Store skjermer: bredde større enn 1400 piksler, eksempel 1400 x 900 eller 1600 x 1200.

For å begynne å distribuere elementene og tildele seksjoner i vår web-mockup, er det veldig viktig at vi tar hensyn til proporsjonene for å sikre en lesbar og melodisk finish. Det vil være viktig at du bruker reglene og veiledningsalternativene du finner i toppmenyen Vis. For å jobbe proporsjonalt og nøyaktig, er det best at vi jobber fra prosent. Vi klikker på visningsmenyen og deretter på alternativet «Ny guide» for å velge modalitet for divisjonen. I dette tilfellet vil vi lage fire vertikale divisjoner på 25%, og vi tar dem som referanse for å plassere bildene våre i bunnteksten og bildet av logoen vår i toppteksten.

Det er en kode for å utpeke hvert av områdene som vil okkupere vårt modell og funksjonen som hver av dem vil ha. For eksempel, for å indikere området som et bilde vil okkupere, lager vi rektangler med et slags kryss. For å indikere at vi ønsker å inkludere videoer i et bestemt område, vil vi ta med avspillingssymbolet i containeren vår. I dette første eksemplet skal vi bare jobbe med bilder, i den øvre fangsten kan du se området som logo fra nettstedet vårt.

Dette ville være sluttresultatet av vår каркасные. Som vi kan se, er den delt inn i en overskrift som består av bildet der logoen vil bli funnet, og som vil fungere som en lenke til hjemmesiden ledsaget av to faner, en søkemotor og fire knapper i søkeboksen. I tillegg, allerede i kroppen, har vi tatt med en sidelinje sammensatt av en skillelinje og en serie kategorier som kategoriserer typen innhold som vil være på nettstedet vårt. En annen seksjon med en nummerering som inkluderer oppføringene som vil eksistere på nettstedet vårt, og til slutt en liste med de mest representative metakoder eller etiketter på nettstedet vårt.

I innholdsområdet, som vil bli definert av en seksjon som vil inkludere selvadministrerbart innhold, finner vi innholdet i artiklene våre. I dette tilfellet brødsmuler eller brødsmuler (som indikerer den organiske strukturen på nettstedet vårt, overskriften til artikkelen, metadataene, et avsnitt som en teksttekst, der et bilde er inkludert.

Som bunntekst har vi tatt med fire bilder som vil fungere som en lenke til andre områder på siden vår. Her kan vi inkludere logoer eller andre interessante seksjoner. Selv om dette området i virkeligheten vil virke mer som forfot, siden bunnteksten i seg selv vil gå litt lenger ned med brukspolitikken, juridisk merknad og copyright.

Når vi har definert den grunnleggende strukturen eller skjelettet på siden vår, må vi gå til neste nivå. Dette vil bestå av riktig design av hvert av områdene på nettstedet vårt. Vi vil med andre ord begynne å "fylle ut" hvert av disse områdene med innholdet som endelig blir satt inn på nettstedet vårt. Det anbefales at vi ikke begynner å designe disse elementene før vi arbeider med trådrammen, fordi det er veldig sannsynlig at hvis vi gjør det i denne rekkefølgen, senere må vi endre proporsjoner. Vi risikerer å forvride bildene våre og å måtte gjøre om utformingen av hvert av elementene, som enten blir bortkastet tid eller et resultat av lavere kvalitet.

I dette tilfellet vil utformingen av nettstedet vårt være ekstremt enkelt. Vi vil bruke forskrifter for materialdesign, siden vi skal bruke Google-logoen for å eksemplifisere denne praksisen. Jeg må avklare at formålet med denne veiledningen er å illustrere den tekniske kunnskapen, så det estetiske resultatet i dette tilfellet er irrelevant. Som du kan se, har vi litt etter litt fylt ut rommet med alle områdene som vi tidligere har bestemt i skjemaet vårt. Imidlertid gjorde vi en liten modifikasjon i siste øyeblikk. Som du kanskje har lagt merke til, har vi redusert størrelsen på logoen vår betydelig, og vi har inkludert en skillelinje i det nedre topptekstområdet som passer perfekt til den øvre menyen. I dette tilfellet har vi brukt knapper og materialer fra en ressursbank. Som designere kan vi designe dem selv (spesielt dette alternativet anbefales hvis vi ønsker at det skal presentere en veldig lik tonic til den som presenteres av merkevarebildet eller logoen).

Det er viktig at vi husker at vi skal arbeide på to forskjellige nivåer for å legge ut dette eksemplet. På den ene siden vil vi jobbe med objektene og på den andre siden utseendet til nettstedet. Det vil si på den ene siden i skjelettet til nettstedet vårt og på den andre siden i det hele flytende elementer som dette skjelettet vil støtte. Du vil legge merke til at det er områder som ikke vil flyte i det hele tatt, for eksempel området som sidefeltet vil okkupere, pre-foten eller skillelinjen som skiller toppteksten fra kroppen.

Struktur 1, 2, 3 og 4 vil være en del av bakgrunn fra nettstedet vårt, så det vil faktisk ikke være nødvendig for oss å eksportere som sådan fra Adobe Photoshop, selv om vi kan gjøre det, er det ikke nødvendig. Når det gjelder Flate farger (en av de viktigste egenskapene til flat design og materialdesign, de kan brukes perfekt gjennom kode ved hjelp av et CSS-stilark). Imidlertid må resten av elementene lagres for senere innsetting i HTML-koden vår. I dette lille diagrammet har vi også gjengitt områdene som hører til bakgrunnen på siden, slik at vi har en klar ide om hva det endelige utseendet på nettstedet vårt blir.

Som du vil være i stand til, er følelsen av å lage dette skjemaet i Adobe Photoshop å oppnå den virkelige dimensjonen til hvert element, og å avklare arrangementet og strukturen til hvert element. Tekstinnholdet har selvfølgelig ingen plass i denne fasen av prosessen siden det må være levert fra kodeditoren vår. Vi må også påpeke at vi i denne praksisen skal jobbe med knapper og statiske elementer, selv om disse vanligvis brukes fra rammer som Bootstrap eller direkte fra Jquery.

Når vi har opprettet hvert av elementene som utgjør websiden vår, er det på tide å begynne å eksportere dem og lagre dem i bildemappen som ligger i HTML-prosjektmappen. Det er viktig at du blir vant til å eksportere fra trådrammen, fordi det er veldig sannsynlig at du trenger å endre noen av de opprinnelige elementene basert på skjelettkonfigurasjonen. (I dette tilfellet har vi for eksempel endret størrelsen på de originale knappene, logoen og de fleste elementene som er en del av komposisjonen, inkludert bildene i det nedre området).

Det er viktig at vi lærer å lagre et hvilket som helst element uavhengig for å lagre det med dimensjonene de har og på en presis måte. Enhver feil, uansett hvor liten den er, kan påvirke alle elementene som er en del av websiden din. Husk at de vil være relatert til hverandre og må ha perfekte dimensjoner slik at de kan legges inn fra HTML i det endelige nettet. I dette tilfellet må vi kutte og lagre følgende elementer uavhengig:

• Vår logo.
• Alle knapper (de som er en del av hovedmenyen og resten).
• Alle bildene.

Vi kan gjøre det på mange måter, og kanskje vil du finne et alternativ som er mer effektivt for deg. Men hvis det er første gang du skal lage denne typen layout, anbefaler jeg at du følger følgende tips.

• Først må du gå til mappen der PSD-filen som inneholder trådrammen vår, og duplisere den så mange ganger som elementene du skal eksportere. I dette tilfellet har vi laget 12 eksemplarer fra originalen og lagret dem i samme mappe. Deretter vil du gi nytt navn til hver av kopiene og tildele hver enkelt av dem navnet på elementet den inneholder. Våre 12 eksemplarer vil bli omdøpt: Logo, menyknapp 1, menyknapp 2, søkefelt, øvre knapp 1, øvre knapp 2, øvre knapp 3 og øvre knapp 4. De resterende fire vil bli omdøpt til: Bilde 1, Bilde 2, Bilde 3 og bilde 4.
• Når dette er gjort, åpner vi filen med logonavnet.
• Vi går til lagpaletten vår og finner laget som inneholder logoen vår. Så vil vi trykke Ctrl / Cmd mens vi klikker på miniatyrbildet av laget. På denne måten vil logoen være valgt automatisk.
• Det neste trinnet vil være å fortelle Photoshop at vi vil at den skal klippe ut logoen på en presis måte. For dette trenger vi bare ringe beskjæringsverktøyet fra tasten eller kommandoen C.
• Når vi har gjort dette, vil vi klikke på Enter-knappen for å bekrefte kuttet.
• Nå vil vi gå til Fil-menyen øverst for å klikke på lagre hvordan. Vi velger navnet, som i dette tilfellet vil være «Logo» og vi vil tildele et format PNG, for å være filen som tilbyr den høyeste kvaliteten på nettet.
• Vi vil gjenta prosessen med alle kopiene og elementene. Når du har trimmet, må du sørge for at resten av lagene i paletten vår er usynlig eller eliminert. På denne måten kan vi lagre hvert element med en gjennomsiktig bakgrunn.

I dette tilfellet velger vi menyknappen 2 fra lagpaletten. Du kan se på skjermbildet hvordan grensene for knappen vår er valgt automatisk.

Når vi har valgt beskjæringsverktøyet fra C-tasten, blir lerretet vårt bare redusert til dimensjonene på knappen vår.

Nå er det på tide å lagre en og en alle elementene som er en del av nettstedet vårt og inkludere dem i bildemappen som vi vil bruke senere. Vi vil ringe fra koden vår, og vi vil fortsette med oppsettet, men fra nå av fra kodeditoren vår.

Selv om det er mange verktøy og alternativer for å lage en webside og som gjør prosessen helt intuitiv, er det veldig viktig at vi lærer oss å gjøre det på en håndbok. På denne måten vil vi lære hva som er grunnleggende bak utformingen av en webside.

Oppsummering:

1. Design struktur på nettstedet, og vær spesielt oppmerksom på innholdet du vil overføre og seksjonene du må opprette på nettstedet ditt.
2. Arbeid med skjelettet ditt eller каркасные fra Adobe Photoshop som angir i hvilke områder innholdet skal vises og formatet.
3. Stol på tiltakene og merkene du tidligere har utviklet, begynn å utforming overflaten av nettet. Inkluderer alle elementene (både flytende og faste). Ikke glem å ta med tilsvarende knapper, logo og bilder.
4. Klipp ut alle elementene som er en del av prosjektet en etter en. Forsikre deg om at de har de riktige tiltakene, og at de ikke vil gi deg problemer senere.
5. Lagre alle elementene i format PNG i bildemappen inne i prosjektmappen HTML.
6. Husk at dette prosjektet vil ha en utgang til webvinduet, så det er veldig viktig at du tar hensyn til fargemodus og bruker RGB.
7. La deg inspirere av andre nettsider du beundrer før du begynner å jobbe, og ikke glem å diskutere dette med teammedlemmene dine. Hvis det er et prosjekt for en klient, kan du prøve å holde deg til briefing så langt som mulig.