Share
I denne opplæringen skal vi gå gjennom en gratis Photoshop-utvidelse kalt Velositey. Velositey (for tiden på versjon 2) gir vanlige layoutmønstre for å bygge prototyper for webdesign i Photoshop.
"Tilbring mer tid på å perfeksjonere detaljer og styling og mindre tid på alle de kjedelige tingene." - Velositey
Før vi får hendene våre Velcosy, la oss først undersøke noen vanlige layoutmønstre som finnes i mange nettsteder i disse dager.
Hvis vi tar en titt på tre av de mest populære WordPress-temaene i ThemeForest (Avada, Enfold og Salient), vil du legge merke til at de deler noen vanlige funksjoner.
For det første, på store skjermer, har de en navbar med deres logo bilde satt til venstre og navigasjonen til høyre. Under navbaren møtes vi vanligvis et heltbilde sammen med et par knapper som vises gjennom en animert lysbildefremvisning. Etter de streikende toppområdene finner vi ofte kolonner eller en slags nettbasert layout.
Siden denne typen layout er så vanlig i naturen, kan du ofte finne deg selv å bygge noe lignende. Prototyping kjente layouter gang på gang kan derfor bli en gjentakende oppgave.
I denne opplæringen vil vi gå gjennom Velcosys funksjoner og lære å bruke dem til å automatisere vanlige oppgaver, og i siste rekke øke vår prototyping-arbeidsflyt. I tillegg vil vi lære å gjøre bruk av Photoshops innfødte funksjoner for å tilpasse og legge til noen bjeller og fløyter til prototypen vår.
Uten videre, la oss komme i gang!
Minimumskravet til å kjøre Velositey er Adobe Photoshop CC 2014 / CS6. Sørg også for at du har installert Adobe Extensions Manager. Med de som er tilstede, last ned Velositey (du må betale med et Tweet eller Facebook-innlegg) og installere det via Adobe Extension Manager.
Start Photoshop og naviger til Vindu> Forlengelse> Velacey å avsløre Velositey-panelet.
Velacey panelFor å starte opp, lager vi en bare layout.
Først må vi opprette et nytt tomt dokument via [+] Ny mal knappen i Velositey-panelet.
Dette nyopprettede dokumentet kommer med guidelinjer som strekker seg over 1170px bredde med 30px renner. Dette er et praktisk arrangement hvis du planlegger å bruke Bootstrap som ditt nettsted grid grunnlag.
En av de første tingene du vil se under [+] Ny mal knappen er en serie av faner, den første er for overskrifter. Jeg skal velge det tiende toppmønsteret. Klikk på den, så Velositey genererer øyeblikkelig overskriften og legger den i dokumentet.
Header-alternativet i Velositey-paneletI vårt tilfelle gir den oss en header med logoen til venstre og navigasjonen til høyre. I Photoshop er innfødt Lag panel, vil du også finne lagene er riktig strukturert og oppkalt i Overskrift gruppe.
Den blanke layouten til toppteksten og dens lagstruktur i lag panel.Merk: Hvis du senere velger et annet headeralternativ, erstatter Velositey det første eksemplet.
Til tross for ulemper, vil mange fortsatt ha en glidebryter i deres nettside. Å legge til et skyveområde er like enkelt som topptekstområdet; Velositey gir et sett med glidermønstre som er klare til å legge til med et klikk på en knapp.
Alternativene til Slider layout mønster.Her har jeg valgt det siste skyvemønsteret som gir oss en glidebryter som inneholder en overskrift, dummyinnhold og to knapper.
Slider-området, med tilhørende lag .Som du kan se over finner du en ny gruppe, Slider, lagt til i Lag panel hvor alle skyvelagene ligger.
Å legge inn innholdsområdet er like greit. Naviger til den tredje kategorien i Velositey-panelet, og du vil finne noen innholdsalternativer.
InnholdsoppsettmønstreJeg har valgt den tredje stilen, og gir oss innholdet som er lagt ut i tre kolonner med hver kolonne som inneholder en overskrift, et bildeplassholder og en dummyinnhold.
Innholdsområdet med lageneEN modul, i dette tilfellet er en uavhengig innholdsblokk. Det er opp til oss å definere innholdet og hva det brukes til. I motsetning til Header, Slider og Content-områdene kan vi legge til flere moduler i et enkelt dokument. Her har jeg lagt til det andre modulmønsteret:
ModulmønstreDen andre typen modul gir oss et bilde plassholder (som spenner over dokumentgitteret), en overskrift og noen få linjer med dummy tekst.
Modulen lagt til med lageneDen siste delen av nettstedet vårt vil forutsigbart være bunnteksten. For footers, gir Velositey oss en rekke forhåndsinnstilte mønstre å velge mellom:
Det første bunntekstmønsteret gir oss følgende bunntekstlayout:
På dette stadiet har vi fullført å legge til alle nødvendige nettsider-fra toppteksten til footer-med bare noen få klikk. Hvis du vil ordne hver del riktig, kan du legge til noen vertikale mellomrom som:
Nå har vi grunnleggende layout på plass, det er på tide for oss å tilpasse det. Vi må endre et par ting for å gjøre prototypen presentabel.
Tommelfingerregelen når det gjelder å tilpasse Photoshop-dokumenter, er å la lagene være intakt når det er mulig. Hvert lag skal tilpasses uten å ødelegge sin opprinnelige form eller egenskaper. Dette fører oss til å ansette noen Photoshop-funksjoner som:
I tillegg foretrekker jeg å bruke minimumsbeløpet av lag som er mulig.
I vårt tilfelle, Smarte objekter er nyttige for å inkludere logo-bildet.
Til å begynne med, velg lag som heter logo innen Overskrift gruppe (for øyeblikket et rektangulært formlag). Deretter høyreklikker du og velger Konverter til Smart Object alternativ.
De logo laget er nå a Smart objekt.
For å plassere vår logo i dette laget, høyreklikk på logo lag og velg Rediger innhold alternativ.
Dette fører oss til et nytt dokument i Photoshop-vinduet. Innenfor denne kategorien, sett det rektangulære Form laget usynlig, og dra og slipp deretter logo-bildet i fanen, og juster logoen til venstre. Når du lagrer filen, bør endringene gjenspeiles i index.psd.
Logoen er plassert gjennom et smart objektNå skal vi konvertere logo lag, som nå er en Smart objekt, inn i en Koblet smart objekt. Dette lagrer effektivt vår logo som en ekstern fil. For å gjøre det, høyreklikk laget, og velg Konverter til koblet ... alternativ.
Photoshop vil be deg om å lagre Smart objekt fil, .PSB. Lagre Smart objekt av logoen i en typisk organisasjon som du ville gjøre når du organiserer nettstedets bilder. I dette tilfellet ville jeg lagre det i en navngitt mappe /Bilder.
"Lagre lagerfotografier / ikoner i en mappe nær PSD, ikke i en skrivebordsmappe med navnet" Diverse ting "- Photoshop Etiquette
Når vi jobber med smarte objekter nå, la oss gjenbruke logoen i vår footer. Gå over til bunntekst gruppe og finn logo lag. Høyreklikk på laget og velg Erstatt innhold ... .
Naviger til mappen der du lagret .PSB fil av logoen, velg filen, og trykk på Sted knapp. Du bør nå få logoet i bunnteksten.
Gjenta disse trinnene for å plassere bilder i de andre seksjonene; Innhold, Slider og Modul. Når det er gjort, bør du ha et lignende resultat til min under:
Å legge til en lagseffekt vil trolig være kjent for noen av dere som har brukt Photoshop en stund. Layer effekter vil gjelde en eller flere effekter som farge, gradient, skygge etc. på toppen av et lag. I vårt tilfelle skal vi bruke den til å sette en ny farge til logoen og legge til en gradient.
Starter ved å velge logo lag i Overskrift gruppe. Velg deretter fx ikonet i Lag panelet, hvor effektalternativene ligger. Å velge Fargeoverlegg ... , og sett fargen til hvit.
Gjenta dette trinnet for å tilpasse hver navigeringslinjefarge, ikonfarge i innholdsdelen og knappfarge i glidebryteren. I tillegg legger du til en gradienteffekt på glidebryteren for å gi mer kontrast mellom topptekst og glidebryter, slik at logoen og navigasjonen blir mer lesbare.
Justeringslag la oss tilpasse et lags tone (for eksempel lysstyrke og kontrast) på en ikke-destruktiv måte. I vårt tilfelle kan vi bruke et justeringslag for å slå modulens ikoner svart og hvitt.
Først velger du container lag i modul gruppe. Høyreklikk og velg Rediger innhold ... alternativ. Etterpå klikker du Nytt justeringslag og velg Svart og hvit… alternativ. Og voila!
Det siste du må gjøre er å omformulere overskriftene og teksten i innholdsplassholderne. Med det gjort, her er det, vår ferdige prototype:
Godt gjort, vi har vellykket bygget en designprototype for en nettside. Vi brukte Velositey, slik at vi raskt kunne generere det blanke oppsettet. Videre tilpasset vi lagene med farger, gradienter og justeringer på en ikke-destruktiv måte, slik at deres første skjema er intakt og muliggjør fremtidige endringer.
Har du andre tips og triks for å bruke Velositey? Gi oss beskjed i kommentarene!
Accentsconagua