Selvstudie: Sådan layouter du en webside med Adobe Photoshop

Der er et stort udvalg af værktøjer til at designe websider og arbejde på en helt enkel og funktionel måde uden at indtaste eller røre ved kode. De er utallige, foreslået af ansøgninger (Adobe Dreamweaver er et eksempel) eller direkte af online platforme såsom Wix. For en webdesigner er det imidlertid vigtigt at kende de manuelle procedurer. HTML5 og CSS er de grundlæggende søjler for layoutet af websteder og destinationssider.

Men oftere end du kunne forvente, bliver du nødt til at henvende dig til applikationer som Indesign eller Adobe Photoshop som supplement til dit layoutarbejde og give dem en perfekt finish. I dag vil vi se i denne omfattende vejledning, hvordan vi kan layout en webside ved hjælp af Adobe Photoshop. I denne første del forbliver vi i det arbejde, der skal udvikles fra Photoshop, selvom vi i fremtidige rater vil se, hvordan vi kan anvende dette arbejde direkte i HTML-kode for at gøre det funktionelt.

Startende med designet af vores wireframe

Til at begynde med layoutet og designet af en webside er det enormt vigtigt, at vi begynder med at definere, hvad de grundlæggende elementer vil være, dette er skelettet. Denne struktur vil tjene som en støtte til at indeholde alt indholdet (hvad enten det er tekst eller multimedie). Ved at definere hver af de sektioner, der udgør vores side, vil vi kunne arbejde på dem med fuld nøjagtighed og give et visuelt design, der er så nøjagtigt som muligt.

Det er meget vigtigt, at vi tager højde for de dimensioner, som vores hjemmeside vil have, hvis den har en i boks eller i fuld bredde. En webside i boks vil være inde i en lille container, og derfor vises der et mellemrum omkring den. Tværtimod vil en fuldvidde web optage hele skærmen på den enhed, der gengiver siden. Valget mellem en eller anden modalitet svarer på stilistiske spørgsmål og vil også afhænge af behovene i det projekt, som vi arbejder på. Vi arbejder i dette eksempel med den boksede tilstand, så den ikke optager al den plads, der leveres af browseren.

For at skabe vores trådramme er den første ting, vi skal gøre, at gå ind i Adobe Photoshop-applikationen og inkludere de dimensioner, som vores side skal have. I dette eksempel er vores side 1280 pixels bred. Størrelsesproblemet kan dog variere afhængigt af den endelige destination eller den enhed, som vi vil gengive vores side på. Der er ingen tvivl om at for at et webdesign skal være funktionelt og effektivt, skal det være lydhør og det skal tilpasse sig alle enheder på markedet. Men i dette tilfælde skal vi arbejde på at skabe en prototype, som vi skal gengive på en stationær computer. Alligevel vil det responsive problem blive diskuteret senere, for nu er her et hierarki af skærmdimensioner at arbejde med i dette eksempel. Husk, at i dette tilfælde laver vi landingssidens layout i Adobe Photoshop og derefter migrerer det til HTML5 OG CSS3. Målet med denne lille praksis er at konvertere et design oprettet i Photoshop til et brugbart og interaktivt webdesign, der reagerer på brugerens bevægelser.

Målinger til 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

Tablets målinger

iPad alle modeller samt iPad Mini: 1024 x 768

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

Galaxy Tab 2 og 3 (10.1 inches): 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 til stationære computere

Små skærme (bruges f.eks. I netbooks): 1024 x 600

Mellemstore skærme: 1280 x 720/1280 x 800

Store skærme: bredde større end 1400 pixels, eksempel 1400 x 900 eller 1600 x 1200.

For at begynde at distribuere elementerne og tildele sektioner i vores web-mockup er det meget vigtigt, at vi tager højde for proportionerne for at sikre en læsbar og melodisk finish. Det er vigtigt, at du bruger indstillingerne for regler og guider, som du kan finde i topmenuen Vis. At arbejde proportionalt og nøjagtigt er det bedst, at vi arbejder fra procenter. Vi klikker på visningsmenuen og derefter på indstillingen «Ny guide» for at vælge opdelingens modalitet. I dette tilfælde laver vi fire lodrette opdelinger på 25%, og vi tager dem som en reference for at placere vores billeder i sidefoden og billedet af vores logo i overskriften.

Der er en kode til at udpege hvert af de områder, der vil besætte vores model og den funktion, som hver af dem vil have. For eksempel for at angive det område, som et billede vil besætte, opretter vi rektangler med en slags kryds. For at indikere, at vi vil inkludere videoer i et bestemt område, inkluderer vi afspilningssymbolet i vores container. I dette første eksempel skal vi kun arbejde med billeder, i den øverste optagelse kan du se det område, der vil besætte logo fra vores hjemmeside.

Dette ville være slutresultatet af vores wireframe. Som vi kan se, er det opdelt i en overskrift sammensat af det billede, hvor logoet findes, og som vil fungere som et link til startsiden ledsaget af to faner, en søgemaskine og fire knapper i søgefeltet. Derudover har vi allerede i kroppen inkluderet en sidelinje sammensat af en skillebjælke og en række kategorier, der kategoriserer den type indhold, der vil være på vores websted. Et andet afsnit med en nummerering, der inkluderer de poster, der vil findes på vores side, og endelig en liste med de mest repræsentative metatags på vores site.

I indholdsområdet, som defineres af et afsnit, der inkluderer selvadministreret indhold, finder vi indholdet af vores artikler. I dette tilfælde brødkrummer eller brødkrummer (som angiver den organiske struktur på vores websted, overskriften på artiklen, metadataene, et afsnit som en teksttekst, inden for hvilket et billede er inkluderet.

Som sidefod har vi inkluderet fire billeder, der fungerer som et link til andre områder på vores side. Her kan vi inkludere logoer eller andre interessante sektioner. Selv om dette område i virkeligheden vil virke mere som forfod, da sidefoden selv går lidt længere nede med brugspolitikken, den juridiske meddelelse og ophavsretten.

Når vi har defineret den grundlæggende struktur eller skelet på vores side, bliver vi nødt til at gå til det næste niveau. Dette vil bestå af det faktiske design af hvert af områderne på vores websted. Med andre ord begynder vi at "udfylde" hvert af disse områder med det indhold, der endelig vil blive indsat på vores hjemmeside. Det anbefales, at vi ikke designer disse elementer, før vi arbejder på trådrammen, fordi det er meget sandsynligt, at hvis vi gør det i denne rækkefølge, bliver vi nødt til at ændre deres proportioner senere. Vi risikerer at forvride vores billeder og at skulle gøre om designet på hvert af elementerne, hvilket enten bliver spild af tid eller et lavere kvalitetsresultat.

I dette tilfælde vil designet af vores websted være ekstremt enkelt. Vi bruger forskrifter for materialedesign, da vi skal bruge Google-logoet til at eksemplificere denne praksis. Jeg må præcisere, at formålet med denne vejledning er at illustrere den tekniske viden, så det æstetiske resultat i dette tilfælde er irrelevant. Som du kan se, har vi lidt efter lidt fyldt rummet med alle de områder, som vi tidligere har bestemt i vores skema. Vi lavede dog en lille ændring i sidste øjeblik. Som du måske har bemærket, har vi reduceret størrelsen på vores logo betydeligt, og vi har inkluderet en skillelinje i det nederste overskriftsområde, der forbinder perfekt med den øverste menu. I dette tilfælde har vi brugt knapper og materialer fra en ressourcebank. Som designere kan vi designe dem selv (især denne mulighed anbefales, hvis vi ønsker, at den skal præsentere en meget lignende tonic til den, der præsenteres af brand image eller logo).

Det er vigtigt, at vi husker, at for at gøre dette eksempel skal vi arbejde på to forskellige niveauer. På den ene side vil vi arbejde på objekterne og på den anden side udseendet af hjemmesiden. Det vil sige på den ene side i vores websides skelet og på den anden side i alle flydende elementer, som dette skelet understøtter. Du vil bemærke, at der er områder, der overhovedet ikke vil flyde, såsom det område, som vores sidebjælke vil besætte, forfoderen eller delelinjen, der deler hovedet fra kroppen.

Struktur 1, 2, 3 og 4 vil være en del af baggrund på vores webside, så i virkeligheden er det ikke nødvendigt for os at eksportere som sådan fra Adobe Photoshop, selvom vi kan gøre det, er det ikke nødvendigt. Når det kommer til Flade farver (Et af de væsentligste træk ved fladt design og materialedesign, de kan anvendes perfekt gennem kode ved hjælp af et CSS-stilark). Resten af ​​elementerne skal dog gemmes til senere indsættelse i vores HTML-kode. I dette lille diagram har vi også gengivet de områder, der hører til baggrunden på siden, så vi får en klar idé om, hvad vores websteds endelige udseende bliver.

Som du vil være i stand til, er formålet med at oprette dette skema i Adobe Photoshop at opnå den virkelige dimension af hvert element og afklare arrangementet og strukturen for hvert element. Naturligvis har tekstindholdet ingen plads i denne fase af processen, da det skal være leveret fra vores kodeditor. Vi må også påpege, at vi i denne praksis vil arbejde med knapper og statiske elementer, selvom disse generelt bruges normalt fra rammer som Bootstrap eller direkte fra Jquery.

Når vi har oprettet hvert af de elementer, der udgør vores webside, er det tid til at begynde at eksportere dem og gemme dem i billedmappen inde i HTML-projektmappen. Det er vigtigt, at du vænner dig til at eksportere fra din wireframe, fordi det er meget sandsynligt, at du bliver nødt til at ændre nogle af de originale elementer baseret på skeletkonfigurationen. (For eksempel har vi i dette tilfælde ændret størrelsen på de originale knapper, logoet og de fleste af de elementer, der er en del af kompositionen, inklusive billederne i det nederste område).

Det er vigtigt, at vi lærer at gemme ethvert emne uafhængigt for at gemme dem med de dimensioner, de har, og på en præcis måde. Enhver fejl, uanset hvor lille, kan påvirke alle de elementer, der er en del af din webside. Husk, at de vil være relateret til hinanden og skal have perfekte dimensioner, så de kan indtastes fra HTML i det endelige web. I dette tilfælde skal vi uafhængigt klippe og gemme følgende elementer:

• Vores logo.
• Alle knapper (dem, der er en del af hovedmenuen og resten).
• Alle billederne.

Vi kan gøre det på mange måder, og måske finder du et alternativ, der er mere effektivt for dig. Men hvis det er første gang, du laver denne type layout, anbefaler jeg, at du følger følgende tip.

• Først skal du gå til mappen, hvor PSD-filen, der indeholder vores wireframe, er placeret og duplikere den så mange gange som de elementer, du skal eksportere. I dette tilfælde har vi oprettet 12 eksemplarer fra originalen og gemt dem i samme mappe. Dernæst omdøber du hver af kopierne og tildeler hver enkelt af dem navnet på det element, den indeholder. Vores 12 eksemplarer omdøbes: Logo, menuknap 1, menuknap 2, søgefelt, øverste knap 1, øverste knap 2, øverste knap 3 og øverste knap 4. De resterende fire vil blive omdøbt til: Billede 1, billede 2, Billede 3 og billede 4.
• Når dette er gjort, åbner vi filen med logoets navn.
• Vi går til vores lagpalet og finder det lag, der indeholder vores logo. Så trykker vi på Ctrl / Cmd mens vi klikker på miniaturen af ​​det nævnte lag. På denne måde vil logoet være valgt automatisk.
• Det næste trin vil være at fortælle Photoshop, at vi ønsker, at det skal klippe logoet ud på en præcis måde. Til dette skal vi kun ringe til beskæringsværktøjet fra nøglen eller kommandoen C.
• Når vi har gjort dette, klikker vi på vores Enter-knap for at bekræfte klippet.
• Nu går vi til den øverste filmenu for at klikke på gem hvordan. Vi vælger navnet, som i dette tilfælde er «Logo», og vi tildeler et format PNG, for at være den fil, der tilbyder den højeste kvalitet på nettet.
• Vi gentager processen med alle kopierne og elementerne. Når du er trimmet, skal du sørge for, at resten af ​​lagene i vores palet er usynlig eller elimineret. På denne måde kan vi gemme hvert element med en gennemsigtig baggrund.

I dette tilfælde vælger vi vores menuknap 2 fra lagpaletten. Du kan se på skærmbilledet, hvordan grænserne for vores knap automatisk er valgt.

Når vi først har valgt beskæringsværktøjet fra C-tasten, reduceres vores lærred kun til dimensionerne på vores knap.

Nu er det tid til at gemme alle de elementer, der er en del af vores websted, en efter en og inkludere dem i billedmappen, og som vi senere vil bruge. Vi foretager opkald fra vores kode, og vi fortsætter med vores layout, men fra nu af fra vores kodeditor.

Selvom der er mange værktøjer og alternativer til layout af en webside, der gør processen fuldstændig intuitiv, er det meget vigtigt, at vi lærer at gøre det på en manuel. På denne måde lærer vi, hvad der er fundamentet bag designet af en webside.

Resumé:

1. Design struktur på hjemmesiden, og vær særlig opmærksom på det indhold, du vil sende, og de sektioner, du skal oprette på dit websted.
2. Arbejd med dit skelet eller wireframe fra Adobe Photoshop, der angiver i hvilke områder indholdet vises, og deres format.
3. Stol på de mål og mærker, som du tidligere har udviklet, start med at design overfladen af ​​nettet. Omfatter alle elementer (både flydende og faste). Glem ikke at medtage de tilsvarende knapper, logo og billeder.
4. Klip alle elementerne, der er en del af projektet, ud en efter en. Sørg for, at de har de rigtige foranstaltninger, og at de ikke vil give dig problemer senere.
5. Gem alle elementer i format PNG i billedmappen inde i projektmappen HTML.
6. Husk, at dette projekt vil have en output til webvinduet, så det er meget vigtigt, at du tager højde for farvetilstand og anvender RGB.
7. Bliv inspireret af andre websider, som du beundrer, inden du kommer på arbejde, og glem ikke at diskutere dette med dine teammedlemmer. Hvis det er et projekt for en klient, så prøv at holde fast i briefing så langt som muligt.