Grunnleggende: Design et nettverk wireframe i Photoshop

En nettsteds wireframe er en grunnleggende visuell guide som brukes i et nettsteds grensesnittdesign som setter dens struktur og hjelper med å opprettholde designkonsistens gjennom hele prosjektet. De er vanligvis ferdige før noen kunstverk er utviklet.

I denne bloggen vil jeg ta deg steg for steg gjennom prosessen med å opprette en wireframe for nettstedet, som den som er vist i figur A, ved hjelp av Photoshop CS2 (PS). (Jeg liker å bruke PS for wireframes fordi det er det samme verktøyet jeg bruker for all min grafisk design, og fortrolighet gjør det enklere.)

Figur A

I forbindelse med denne bloggen antar vi at de første møtene dine med kunden har funnet sted, og at de har gitt kravene til nettstedet.

La oss si at vi oppretter et nettsted for The Juniper Wood Company, en ledende håndarbeider av tremøbler, som ønsker å ha og selge håndlagde produkter og tjenester på nettet.

Selskapet ønsker å redesigne sin online tilstedeværelse med følgende krav:

  • Enkel, men elegant webside
  • Utvalgt seksjon for håndlagde varer
  • Informasjon om selskapet
  • Komplett produkter med en online katalog
  • Tilpassede etterbehandlingstjenester tilgjengelig
  • Bildegalleri og kjente videoer
  • Online bestilling

Av hensyn til denne opplæringen vil den første malen utvikles for en hjemmeside, med de resterende sidene (barnesidene) basert på denne hovedmalen.

Lag en bakgrunn

Når Photoshop er åpent, oppretter du et nytt bilde ved å velge File, New fra verktøylinjen. Opprett deretter en tilpasset dimensjon på 800 piksler med 600 piksler som vist i figur B. Dette handler om den absolutt laveste oppløsningen som de fleste nettlesere vil tillate. Hold bildeoppløsningen på 72 piksler / tomme, RGB-fargemodus og bakgrunnsinnholdet satt på gjennomsiktig.

Figur B

Velg OK, så ser du den blanke bakgrunnen vist i figur C. Dette vil være basismalstørrelsen for wireframe på alle sider på nettstedet.

Figur C

Nå fortsetter vi med de neste trinnene.

Deretter oppretter du et nytt lag ved å velge Lag, Nytt og Lag på menyverktøylinjen. Dobbeltklikk deretter på det valgte laget og gi det nytt navn til "bakgrunnsfarge", som vist i figur D. (Merk: laget blir det aktive laget når det er uthevet ved å klikke på det fra lagpaletten.)

Figur D

Når det nye laget er valgt og aktivt, kan du nå legge til en hvit bakgrunn ved å gå tilbake til menyverktøylinjen og velge Lag, nytt fylllag, Ensfarget ..., som vist i figur E. Dette får opp det nye lagfargefyllet 1, vist i figur F. Klikk OK. I dialogboksen Fargevelger velger du den hvite fargen og sørger for at "Bare webfarger" er avkrysset, og klikker deretter OK.

Figur E

Figur F

Bakgrunnsfargelagets pall er nå oppdatert med det faste hvite fargevalget som vist i figur G Legg merke til at Color Picker viser RGB-tallene 255, 255, 255 og kodingen #ffffff? Dette er en nyttig referanse for all manuell koding som kan gjøres senere i Dreamweaver eller kodingsverktøy. Figur G

Nå, gå videre og lagre filen. Velg Fil, Lagre som ... på menyverktøylinjen, eller velg Skift + Ctrl + S, og navngi filen, og klikk deretter Lagre. Jeg har lagret denne filen som et Photoshop-dokument og het den WireframeTemplate.psd som vist i figur H.

Figur H

Designelementer

Nå kan vi begynne å legge til tekstbokser, bildebokser, topptekster, bunntekster, bannere, rullegardinmenyer og koblede knapper.

For hvert element legger vi til et nytt lag i dokumentet. For å begynne med å legge til et bannerelement for topptekst, legger vi til et nytt lag som vi gjorde i trinn to for å lage bakgrunnen. Før du begynner med å legge til bannerelementet, må du imidlertid sørge for at bakgrunnsfargen din er et gråtonevalg. Du kan gå direkte til Color Picker fra verktøylinjen som vist i figur I.

Figur I

Når det nye laget er aktivt, velg Rounded Rectangle Tool, vist i figur J, fra verktøylinjevinduet, velg Geometry-alternativene ( figur K ) og velg Fast størrelse, skriv inn 780 px bredde og 100 px høyde. Forsikre deg om at radiusen er satt til 5 px. Sett deretter markøren øverst til venstre i dokumentet, som vist i figur L, og klikk en gang så vil det nye rektanglet vises. Det kan trenge å være sentrert litt - du kan bruke Move Tool for denne oppgaven.

Figur J

Figur K

Figur L

Når rektangelets øverste bannerelement er lagt til, kan vi tone ned gråtonefargen litt ved å gå til det aktive laget og justere opaciteten som sett i figur M (sett den til 50 ved å skyve Opacity skalaen eller skrive inn innstillingen manuelt).

Figur M

Følg de samme trinnene for å legge til alle andre elementer, for eksempel tekstbokser, reklamebannere, bildebokser osv. Dimensjonene vil avhenge av de spesifikke kravene til hvert prosjekt. For det neste elementet la jeg til en venstre sidefelt som vist i figur N, og med rektangelverktøyet fremdeles valgt, alt jeg trengte å gjøre var å endre Geometri-alternativene til 260 px bredde og 400 px høyde, og deretter plassere markøren rett under toppen banneret på venstre side og klikk en gang. Innstillingen for uklarhet for gråtonen er fremdeles satt til 50%, så det er ikke nødvendig å justere denne innstillingen. Jeg la deretter til en høyre kolonne med dimensjonene 510 px bredde og 400 px høyde, og så ble bunntekstelementet lagt til 780 px bredde og 70 px høyde. Husk å lagre filen etter at du har lagt til hvert element. Dette er wireframe-malen etter at de fire hovedelementene er lagt til, og vist i figur O. Legg merke til hvordan hvert elementobjekt oppretter et nytt lag i PS.

Figur N

Figur O

Nå er det på tide å legge til tekstbeskrivelser for å identifisere formålet med hvert element vi har lagt til. Forsikre deg om at valg av farge gane vil være i kontrast til bakgrunnen slik at teksten blir synlig.

Når Shape 1-laget er valgt, velger du Horizontal Type-verktøyet som vist i figur P og klikker og drar en tekstboks på toppen av formen. Velg deretter din skrift, punktstørrelse og skriv inn teksten din - "Header Banner" i dette tilfellet, som vist i figur Q. Jeg bruker Arial, Regular, 18 point og Sharp.

Figur P

Figur Q

Fortsett å legge til tekstbeskrivelser til de tre andre hovedelementene. Legg merke til i figur R at med hvert teksttillegg ble et nytt lag lagt til, og fordi det aktive laget ble valgt med hvert tillegg ble tekstlaget lagt over det aktive laget, dette sikrer at teksten blir synlig over gråtonelementet.

Figur R

Neste vil vi legge til underelementer for å definere sideoppsettet ytterligere. Vi bruker de samme trinnene som er beskrevet i trinn 1-5 i denne delen, med den eneste forskjellen at gråtonen vil være en litt mørkere nyanse. Nærmere bestemt er gråtonen for disse elementene lagt til 70%. Du vil se resultatet i figur S. Bare husk å forsikre deg om at elementet du jobber med er det aktive laget, og at du skifter forgrunnsfargen til hvit før du legger til teksten, og deretter vender du tilbake til bakgrunnsfargen når du legger til rektangelobjektene. Den endelige malen vises på bildet nedenfor. Husk å lagre filen din med hvert elementtillegg.
  • Bedriftslogo - 200 px w, 70 px h, lagt til overskriftsbanner
  • Hovednavigasjon - 550 px w, 50 px h, lagt til overskriftsbanner
  • Featured Handicraft - 245 px w, 125 px h, lagt til på venstre sidefelt
  • Bildegalleri - 245 px w, 125 px h, lagt til i venstre sidefelt
  • Video - 245 px w, 100 px h, lagt til på venstre sidefelt
  • Velkommen - 490 px w, 100 h, lagt til høyre kolonne
  • Online katalog - 490 px w, 100 px h, lagt til høyre kolonne
  • Servering, stue, kjøkken, utendørs, - 110 px w, 80 px h lagt til i online katalogelementet, endre opacitet til 90%
  • Blogg - 385 px w, 160 px h, lagt til høyre kolonne
  • Bannerannonse - 100 px w, 160 px h, lagt til høyre kolonne

Figur S

Som nettutvikler vil du oppdage at hvert prosjekt, klient og situasjon er annerledes, men når du prøver å legge grunnlaget for nettstedet, vil det høste gevinstene til slutt.

© Copyright 2020 | mobilegn.com