En guide til rask prototyping med Photoshop CC

Innhold

• 01. Start med et rutenett
• 02. Definer forskjellige områder
• 03. Legg til litt navigering
• 04. Rund rektanglene dine
• 05. Legg til bilder
• 06. Innfør lagstiler
• 07. Isoler lagene dine
• 08. Opprett bildeaktiver
• 09. Kopier CSS-attributter

Det er nå mange prototyperingsverktøy og metoder som vil hjelpe deg med å lage mockups på nettstedet raskt og enkelt. Du skjønner kanskje ikke det, men Photoshop CC er et flott verktøy for rask prototyping. Ved hver revisjon har programvaren fått mer funksjonalitet for designere som raskt vil lage trådrammer eller prototyper for å dele med en klient, eller bygge et design klart for en utvikler.

De mest nyttige funksjonene for rask prototyping i Photoshop CC inkluderer mulighetene til å isolere lag, tilpasse hjørner med det levende avrundede rektangelverktøyet og kopiere CSS-attributter fra individuelle lag. Og Creative Cloud-oppsett gir også nyttige samarbeidselementer (abonner på Adobe Creative Cloud her).

I denne artikkelen vil vi gå gjennom hvordan du lager en rask prototype i Photoshop, ved å bruke bredden av verktøyene som er tilgjengelige for å lage en utvikler og klientvennlig sidemockup.

01. Start med et rutenett

Sett opp et dokument med dimensjonene på skjermen du designer for (smarttelefon, nettbrett og så videre). Deretter oppretter du et rutenett som vil danne grunnstrukturen - gratis utvidelse GuideGuide er nyttig for dette. Åpne utvidelsen opp, legg inn marginbredder, antall kolonner og takrenne. Trykk på GG-knappen, og du har nettet ditt.

02. Definer forskjellige områder

På dette tidspunktet er det nyttig å blokkere nøkkelområder i sidelayouten. Lag en mappe for topptekst, bunntekst, innhold og alt annet du trenger. Det er en god ide å definere hovedområder i nettstedsdesignet - begynner med en lys grå ramme for å skissere dem. Her har jeg brukt rektangelverktøyet til å tegne nettstedets overskriftsområde (1200 x 240 piksler) og lagt til tittelen.

03. Legg til litt navigering

Legg nå til navigasjonselementer. For å duplisere typen din, velg laget, hold nede Opt/Alt tast og dra. Holder Skifte begrenser justeringen. Juster tekstlagene dine nøyaktig ved å velge all navigasjonsteksten og trykke på knappen Distribuer vertikale sentre i verktøylinjelinjen. Dette justerer lagene jevnt og fordelt lagene dine, noe som gjør det ideelt for menyelementer som vist.

04. Rund rektanglene dine

Her legger vi til i et påmeldingsskjema til hjemmesidens oppsett ved hjelp av verktøyet Avrundet rektangel. Photoshop CC har en live Rounded Rectangles-funksjon, som lar deg tilpasse hjørneradien til formen din. Dette betyr at du kan gå tilbake og endre hjørner på et senere tidspunkt hvis designet ditt krever det. Dette kan høres ut som en mindre funksjon, men det er veldig nyttig.

05. Legg til bilder

Det er verdt å konvertere bilder til smarte objekter, da dette gjør dem lettere å oppdatere eller erstatte. Du kan bruke plassholderrektanglene som vektormasker for å holde bilder. Enten ta inn et bilde som et nytt lag, dupliser rektangelmasken og lenke det til det laget, eller foreta et valg fra ditt rektangel og bruk Lim inn spesial> Lim inn.

06. Innfør lagstiler

Lagstiler er en anstendig måte å legge til effekter på. For å bruke en lagstil som er brukt på et annet lag i bunken din, trykk Opt/Alt og dra FX-ikonet til det nye laget ditt. For å lage et Hover Over-lag som kan slås på eller av, bare dupliser bakgrunnsrektangelet, og grupper dette laget og tekstlaget ditt i en laggruppe.

07. Isoler lagene dine

Dette er en annen nyttig funksjon i Photoshop CC hvis du bare vil redigere noen av lagene dine. Velg lagene du vil redigere, og gå deretter til Velg> Isoler lag. Dette gjør at du kan fokusere på de spesifikke områdene som trenger arbeid, uten forvirring av andre lag som forstyrrer ting.

08. Opprett bildeaktiver

Adobe Generator er en Photoshop CC-funksjon som lar deg opprette bildeaktiver på farten. Gå til File> Generate> Image Assets. Nå, i Lag-panelet, legger du til et filtillegg som .png eller .jpeg for automatisk å eksportere det laget til en spesifisert mappe. Vi har gjort det her med en ikonfil.

09. Kopier CSS-attributter

En flott funksjon i Photoshop CC når du lager en HTML-prototype, er muligheten til å kopiere lagets CSS. Å gjøre dette Ctrl + høyreklikk på ønsket lag, og trykk Copy CSS Style for å legge til koden i utklippstavlen. Åpne et nytt dokument i Dreamweaver, Muse eller Adobe XD, og ​​lim inn CSS-koden din.

Denne artikkelen dukket opprinnelig opp i Datakunst, verdens ledende magasin for grafiske designere. Abonner her.