Setting en Baseline Grid Med GuideGuide for Photoshop
Stille ut en registerlinjer for Photoshop-basert design er en uunnværlig første skritt i en ny nettside prosjekt. En baseline grid vil etablere konsekvent avstand mellom sideelementer, skaper harmonisk rytme gjennom hele siden. I tillegg i utviklingsfasen, kan ved hjelp av en CSS rammeverk med en kompatibel baseline grid gjøre sette design i kode langt enklere.
I en fersk tutorial på Webdesign Tuts +, Amir viste oss hvordan vi skulle skape en fleksibel Grid script for Photoshop til å ta grovarbeidet ut på å sette dine guider for layouten. På samme måte, kommer vi til å bruke en Photoshop utvidelse som vil gjøre alt de tunge løftene for oss - et flott alternativ, spesielt hvis du oppretter din egen tilpassede manus er litt for ambisiøst for dine behov I dagens tutorial, jeg kommer til å bruke en gratis utvidelse fra Cameron McEfee heter - riktig - GuideGuide. Head over til http://www.guideguide.me å laste ned plugin. Velg den versjonen som passer din Photoshop (CS4 +) og lagre den på et passende sted på harddisken. Merk: OSX brukere med Photoshop CS5 må installere Adobe Extension Manager Patch Å sørge for at Photoshop er lukket, åpner Adobe Extension Manager. Ved å klikke på "Installer" linken i toppmenyen, naviger til utpakkede GuideGuide forlengelse og klikk "Åpne". Etter å akseptere vilkårene, vil GuideGuide være klar til å nås neste gang når du åpner opp Photoshop Fyr opp Photoshop, og fra "Window" fil-menyen velger du "Extensions → GuideGuide '. GuideGuide utvidelsen vil nå vises i arbeidsområdet. Ikke bekymre deg for mye om inntastingsfeltet ennå, vi skal grave i forlengelsen kort tid Vi kommer til å være å holde ting veldig enkelt i dag og vil bli replikere den 960 x grid brukt av 960 Grid System (men du er velkommen til å nærme nett ved hjelp av hvilken målinger du synes er enklest). Hvis vi hodet over til området, er nettet som vi skal replikere legges ut i vanlig engelsk på hjemmesiden: For å omformulere dette, hva vi skal opprette i dag er et 960 x bredt lerret med 12 lik avstand og like store kolonner. . Med en 10px margin på hver side av lerretet, vil vi sitte igjen med en 20px gutter mellom hver av kolonnene Før vi går videre, jeg vet hva du kan si: " Hvorfor ikke bare laste ned Photoshop-malen fra stedet? ". Hva jeg skal vise deg hvordan du oppretter i dag er helt passelig for alle I Photoshop velger du File → Ny og opprette et nytt dokument 960 x bred 1050px høy Å sørge for at dine herskere vises (View → linjaler) drar ut to guider. til kantene av lerretet Åpning opp GuideGuide forlengelse, vil du se en rekke input felt og menyelementer som gjør at oss å definere vår horisontal registerlinjene, som følger (du kan også holde musepekeren over hvert ikon for beskrivelse.) Input verdiene som følger og klikk på GuideGuide knapp: Når du har innsendt verdiene, vil Photoshop automatisk gjengi alle guidene for rutenettet: Merk: Ved hjelp GuideGuide uten et utvalg vil automatisk gjengi guider over hele lerretet. Hvis du bare ønsket guider over en del av dokumentet (for eksempel en navigeringslinje), opprette et utvalg med markeringsverktøyet (M) før du bruker skjøte Som det står, har vi et helt brukbart horisontalt linjene. For å gjøre ting enklere for oss selv, vi nå kommer til å legge en visuell hjelper til å fortelle oss hva en kolonne er, og hva en takrenne er -. Noe som kan være vanskelig å skille når du zoomer rett inn på dokumentet Lag et nytt lag (Ctrl + Shift + N) Hotell og trekke ut et utvalg bredden og høyden av den første kolonnen. Trykker du Ctrl + BkSpace Deretter oppretter 12 totalt versjoner av laget ved å trykke på Ctrl + J Deretter velger alle de tolv lagene (Ctrl + klikk) Hotell og distribuere kolonnene ved å velge Fordel Horisontale Centers Til slutt, rydde opp i dokumentet ved å velge alle lag kolonne og flette dem sammen (Ctrl + E) Nå som vi har etablert en horisontal baseline, er det på tide å flytte inn på vår vertikale baseline. Vi kommer ikke til å gå dypere inn i teorien om vertikale linjene i dag, men hvis du ønsker å vite mer kan du lese om Stille Web Type til en registerlinjer. I dag, vi skal sette vår vertikal baseline basert på en kropp skriftstørrelse 14px. Å etablere en 1,5 linje høyde, og for å gi oss masse fleksibilitet, vil vår grunnlinjen være 7px (dvs. tre baseline enheter lik 21px) Jeg kommer til å være viser du to metoder for å oppnå dette. - gjerne bruke den som snakker til deg og din arbeidsflyt! Slik starter, vi kommer til å bruke GuideGuide gang. Åpne opp utvidelsen, skriver du inn følgende verdi og trykk på GuideGuide knapp: Når innsendt, Photoshop vil gjengi alle guider for vår vertikale baseline: På dette punktet, jo mer slu leseren vil har innsett at denne metoden er bare gjort mulig fordi vi laget vår dokument høyde i en perfekt multiplum av 7px (1050px). Hvis vi ikke tar dette første skrittet, ville GuideGuide gjengi så mange 7px guider som mulig og la resten på bunnen av dokumentet. Og i den enkle trinn, har vi laget en helt funksjonell vertikal baseline. Det eneste problemet er at dette dokumentet er nå svært opptatt. Også, hvis du er i vane å bruke guider i design, denne metoden kan fort bli forvirrende, rotete og ubrukelig. Hvis denne metoden ikke kile din fancy, kan du fjerne horisontale føringer < em> (Ctrl + Alt + Z) Hotell og skape et alternativ baseline ved hjelp av en pixel grid For vår alternativ metode åpne opp Photoshop grid valgpanelet (Edit → Innstillinger → Rister, guider og stykker) Nå, tilbake til dokumentet, kan du veksle synligheten av nettet av og på (Ctrl + ') Det er bra om denne metoden er at vi har skilt de horisontale og vertikale linjene, slik at du enkelt veksle deres synlighet avhengig av hvilken del av designet du arbeider på Uansett hvilken metode du foretrekker (guider eller nett lag), det siste trinnet er å skape en visuell hjelper for vår vertikale baseline på samme måte som vi gjorde for vår horisontal baseline (men vi kommer til å bruke en annen metode). Opprett et nytt dokument 1px x 7px med en gjennomsiktig bakgrunn: Ved hjelp av markeringsverktøyet (M), sette Style til Fast Størrelse Deretter definerer dette dokumentet som et mønster (Edit → Define Pattern) Leder tilbake til hoveddokumentet. Lag et nytt lag (Ctrl + Shift + N) Gi nytt navn på laget til "Vertical Baseline 'og slå opacity ned til rundt 30%. Selv om elementene ikke vil knipse til en av de visuelle hjelpere, uansett metode du brukte for den vertikale baseline (guider eller nett lag) i de forrige trinnene, den nyopprettede visuelle laget blir perfekt justert til grunnlinjen - noe som gir enkel snapping for hele design Og med det, har du opprettet en piksel perfekt baseline grid med hendige visuelle lag for neste prosjekt. Det eneste som gjenstår å gjøre er å gi din design litt pusterom Åpne opp dialogen Canvas Size (Bilde → Canvas Size).. Det endelige resultatet: Hvis du har gjort det hele veien gjennom, gode arbeidet! Du har nå alle teknikker som kreves for å lage dine egne registerlinjer i Photoshop. Det eneste rådet jeg vil gi er at selv om GuideGuide gjør en god jobb med å håndtere all nødvendig matematikk, har det å arbeide innenfor Photoshop begrensningene, nemlig at guidene kan kun plasseres på en full piksel. Hvis grid krever sub-pixel målinger, vil guider bli gjengitt så tett som mulig, med sine posisjoner blir rundet opp til nærmeste hele piksel. Med det i tankene, kan litt planlegging i starten unngå mye one-pixel hodepine senere i prosjektet Som en avskjed notat, kan du bruke GuideGuide for mye mer enn bare grunnlinjene.; eksperiment å bruke det for å legge ut nett for alle slags motiv komponenter fra bilderammer til menyer Takk igjen, og ikke glem å abonnere og legge igjen en kommentar nedenfor - vi vil gjerne høre dine tanker!
Trinn 1.: Last ned GuideGuide Plugin
Trinn 2:. Installer Extension
Trinn 3:. Aktiver GuideGuide Window
Trinn 4:. Etablere et referanse
prosjekt og eventuelle CSS rammeverk, uavhengig av mengden av søyler, lerret bredde eller takrenner. Vi bare bruker et enkelt eksempel for å demonstrere teknikker
Trinn 5:. Opprette et nytt dokument
Trinn 6: Lag noen guider
Trinn 7:. Sett GuideGuide to Work
Trinn 8:. Legg en Visual Helper
, fylle markeringen med # ff0084. Du er også velkommen til å bruke formen verktøy for dette, men sørg for dine piksler er nettopp valgt.
11 ganger . Velge det øverste laget, drar kolonnen til den tolvte kolonne posisjon med flytteverktøyet (V).
ikonet under flytteverktøyet (V) (alternativt Layer → Align → Horisontal Centers)
. Endre navn på lag "Horisontal Baseline 'og slå opacity ned til 10%
Trinn 9:. Vertical Baseline (Method Man)
Trinn 10:. Vertical Baseline (Metode to)
. Skriv inn følgende verdier for piksel grid:
, hvor hver horisontal linje av rutenettet etablerer din loddlinjen -. som du kan se her med en 600% zoom søkt
Trinn 11:. Lag en Visual Helper
, og dimensjonene til 1px x 1px. Lag et utvalg i bunnen av dokumentet (du vil bli zoomet inn så langt du kan gå her (Z)) og fyll den med # 00ff12 (Ctrl + Bkspace).
. Name it '7px Vertical Baseline'.
, velger hele lerretet (Ctrl + A) Hotell og trykk på Ctrl + Bkspace
å fylle markeringen. Fra rullegardinmenyene, velg "Mønster" for fylltype og den nyopprettede "7px baseline" for mønsteret.
Trinn 12:. Breathing Room
Og endre bredden til 1400px
Konklusjon
Andre ressurser
Fleksibel Grid script for Photoshop
Innstilling Web Type til en Baseline Grid
En bedre Photoshop rutenett for responsive web design av Elliot Jay Stocks