Prototyping oppsett med Velositey for Photoshop
I denne opplæringen skal vi gå gjennom en gratis Photoshop utvidelse kalt Velositey. Velositey (for tiden på versjon 2) gir felles layout mønstre for å bygge webdesign prototyper innen Photoshop
"Bruk mer tid på å perfeksjonere detaljene og styling og mindre tid på alt det kjedelige ting." -. Velositey
Gjentatte oppsett Patterns
Før vi får våre hender vår Velositey, la oss først undersøke noen vanlige layout mønstre som finnes i mange nettsteder i disse dager.
Hvis vi tar en titt på tre av de mest populære WordPress temaer i Themeforest (Avada , enfold, og Fremtredende) vil du legge merke til at de har noen fellestrekk.
Først på store skjermer, de har en navbar med deres logo image satt til venstre og navigasjon til høyre. Under navbar vi vanligvis møter en helt bilde sammen med et par knapper som vises gjennom en animert lysbildeserie. Etter de streikende header områdene, finner vi ofte kolonner eller noen form for grid-basert layout.
Siden denne typen layout er så vanlig i naturen, kan du ofte finne deg selv å bygge noe lignende. Prototyping kjente oppsett gang på gang kan derfor bli et repeterende oppgave.
I denne opplæringen vil vi gå gjennom Velositey funksjoner og lære å bruke dem til å automatisere vanlige oppgaver, slutt å påskynde våre prototyping arbeidsflyt. I tillegg vil vi lære å gjøre bruk av Photoshop innfødte funksjoner for å tilpasse og legge til noen bjeller og fløyter til vår prototype.
Uten videre, la oss komme i gang!
Forutsetninger og oppsett
Minstekravet for å kjøre Velositey er Adobe Photoshop CC 2014 /CS6. Sørg også for at du har Adobe Tilleggskontroll installert. Med de tilstedeværende, laste Velositey (du må betale med en Tweet eller Facebook post) og installere det via Adobe Extension Manager
Launch Photoshop og naviger til Vindu >.; Extension > Velositey å avsløre Velositey panel.
Velositey panel
Basic Layout
For å starte, må vi skape et nakent layout.
Opprette nytt dokument
Først må vi lage et nytt tomt dokument via knappen [+] Ny mal innenfor Velositey panel.
Dette nylig genererte dokumentet vil komme med guider linje som strekker seg over 1170px bredde med 30px takrenne. Dette er en praktisk ordning hvis du planlegger å bruke Bootstrap som ditt nettsted grid fundament.
Legge til en Header
En av de første tingene du vil se under [+] knappen Ny mal er en rekke kategorier, hvorav den første er for overskrifter. Jeg kommer til å velge den 10. header mønster. Klikk på den, så Velositey vil umiddelbart generere header og sette det i dokumentet.
Header alternativ i Velositey panel
I vårt tilfelle, det gir oss en header med logoen satt til venstre og navigasjon til høyre . I Photoshop innfødte Layer panel, vil du også finne de lagene er riktig strukturert og navngitt i Header gruppen
nakne utformingen av header og dens lagstruktur i lagpanelet
Merk:.. Hvis du senere velger en annen header alternativet, vil Velositey erstatte det første eksempelet.
Legge til Slider §
Til tross for ulempene, mange mennesker fortsatt vil ha en glidebryter på deres hjemmeside. Legge til en slider område er like enkelt som topptekstområdet; Velositey gir et sett med glide mønstre klar til å legge med et klikk på en knapp.
Valgene av Slider layout mønster.
Her har jeg valgt det siste slider mønster som gir oss en skyveknapp som inneholder en overskrift, dummy innhold, og to knapper.
Slider området, med tilsvarende lag.
Som du ser ovenfor, vil du finne en ny gruppe, Slider, lagt innenfor Layer panel hvor alle glidebryteren lagene bor. Anmeldelser
Legge til innhold Seksjon
Legge innholdsområdet er like grei. Naviger til den tredje fanen i Velositey panel og du vil finne noen innholds alternativer.
Innhold layout mønstre
Jeg har valgt for tredje stil, noe som gir oss innholdet lagt ut i tre kolonner med hver kolonne bestående av en overskrift, et bilde plassholder, og dummy innhold.
innholdsområdet med sine lag
Legge til en modul
En modul, i dette tilfellet, er en selvstendig innholdsblokk. Det er opp til oss å definere innholdet og hva det brukes til. I motsetning til Header, Slider, og innholdet områder vi kan legge til flere moduler i et enkelt dokument. Her har jeg lagt den andre Module mønster.
Modul mønstre
Den andre typen modul gir oss et bilde plassholder (som spenner over dette dokumentet rutenett), en overskrift, og noen få linjer med dummy tekst
moduler med lagene
Legge til Footer §
Den siste delen av vår nettside vil forutsigbart være bunnteksten. For bunntekst, igjen, Velositey gir oss en rekke forhåndsinnstilte mønstre å velge mellom:
Den første footer mønster gir oss følgende footer layout:
I denne fasen har vi ferdig med å legge all de nødvendige Nettstedet Deler-fra topp til bunntekst-med bare noen få klikk. Å arrangere hver del riktig, kan det være lurt å legge noen vertikale mellomrom mellom dem slik:
Nå har vi den grunnleggende layout på plass, er det på tide for oss å tilpasse den. Vi trenger å endre et par ting å gjøre prototypen presentabel.
Tilpasning
Den tommelfingerregel når det gjelder å tilpasse Photoshop-dokumenter er å la lagene intakt når det er mulig. Hvert lag bør være tilpasset uten å ødelegge dets opprinnelige form eller egenskaper. Dette leder oss til å ansette noen Photoshop-funksjoner som:
Smarte objekter og Smart Koblede objekter
justeringslag
Lageffekter
I tillegg foretrekker jeg å bruke minst mulig av lag mulige.
Ved hjelp av smarte objekter
I vårt tilfelle, smarte objekter er nyttig for blant annet logobildet.
< p> Til å begynne med, velger du laget som heter logo innenfor Header gruppen (for tiden en rektangulær form lag). Deretter høyreklikk og velg Konverter til smart objekt alternativ.
Logoen laget er nå et smart objekt.
Å plassere vår logo i dette laget, høyreklikker du på logoen lag og velg Rediger Innhold alternativet.
Dette vil føre oss til et nytt dokument i Photoshop vinduet. Innenfor denne kategorien, satt den rektangulære formlag usynlig, og dra-og-slipp-logoen bilde i kategorien samkjøre logoen til venstre. Som du lagre filen, bør endringene gjenspeiles i index.psd.
Logo er plassert gjennom et smart objekt
Nå har vi tenkt å konvertere logo
lag, som nå er en Smart Object, inn eksterne smart objekt. Dette lagrer effektivt vår logo som en ekstern fil. For å gjøre dette, høyreklikk på laget, og velg Konverter til Linked ... alternativet.
Photoshop vil be deg om å lagre Smart Object fil, .psb. Spar Smart Object av logoen i en typisk organisasjon som du ville gjøre når organisere nettstedet bilder. I dette tilfellet ville jeg lagre den i en mappe som heter /Images "Keep lager bilder /ikoner i en mappe nær PSD, ikke i en stasjonær mappe som heter" Diverse ting "-. Photoshop etikette
Som vi jobber med smarte objekter nå, la oss bruke logoen i vår bunntekst. Head over til gruppen bunntekst og finne logoen lag. Høyreklikk på laget og velg Erstatt Content ....
Naviger til mappen der du lagret .psb fil av logoen, velg filen, og traff Place knappen. Du skal nå ha logoen i footer
Gjenta disse trinnene for å plassere bildene i de andre seksjonene.; Innhold, Slider, og modulen. Når det er gjort, bør du ha et lignende resultat til gruven under:
Bruke Lageffekter
Legge et lag effekten vil trolig være kjent for noen av dere som har brukt Photoshop en stund. Lageffekter vil gjelde en eller flere effekter som for eksempel farge, gradient, skygge etc. på toppen av et lag. I vårt tilfelle har vi tenkt å bruke den til å sette en ny farge til logoen og legge til en gradient.
Du begynner ved å velge logoen lag i toppgruppen. Deretter velger du fx Gjenta dette trinnet for å tilpasse hver navigasjon kobling farge, ikonet farge i innholdet delen, og knappen fargen i glidebryteren. I tillegg legger en gradient effekt av glidebryteren bildet for å gi mer kontrast mellom header og glidebryteren, slik at logo og navigasjons mer lesbar. justeringslag tillate oss å tilpasse et lag tone (som lysstyrke og kontrast) i en ikke-destruktiv måte. I vårt tilfelle, kan vi bruke et justeringslag for å slå modulen ikoner svart og hvitt. Først velger beholderen lag i Module gruppen. Høyreklikk og velg Rediger innhold ... alternativet. Deretter klikker du New Adjustment Layer og velg Black and White ... alternativet. Og voila! Det siste du trenger å gjøre er å endre ordlyden overskriftene og teksten i innholdsplassholdere. Med det gjort, her er det, vår ferdig prototype: Godt gjort, har vi lykkes bygget et design prototype for en webside. Vi brukte Velositey, tillater oss å generere nakne layout raskt. Videre har vi tilpasset lagene med farger, graderinger, og justeringer i en ikke-destruktiv måte, holde sin opprinnelige form intakt og åpner for fremtidige endringer. Har du noen andre tips og triks for å bruke Velositey? La oss beskjed i kommentarfeltet
ikonet i Layer panel, hvor effektalternativer bor. Velg Color Overlay ..., og sette farge til hvit.
Bruke justeringslag
Endelig resultat
Konklusjon
Ytterligere Reading
Photoshop CC 2014!? Hva er nytt for webdesignere
Photoshop etikette, A Guide to merkbar Web Design i Photoshop
Hvordan kode en Photoshop layout med CSSHat, LESSHat og PNGHat