Share
Å sette opp et grunnlinje for dine Photoshop-baserte design er et uunnværlig første skritt i et nytt nettstedsprosjekt. Et grunnlinje vil opprette konsekvent avstand mellom sidene dine, og skape harmonisk rytme gjennom hele siden. I løpet av utviklingsfasen kan ved hjelp av et CSS-rammeverk med et kompatibelt grunnlinje også oversette design til kode langt lettere.
I en nylig opplæringsveiledning på Webdesign Tuts + viste Amir oss hvordan du lager et fleksibelt grid-skript for Photoshop for å ta det grunne arbeidet ut av å sette inn veiledningene for layoutet. På en lignende måte skal vi bruke en Photoshop-utvidelse som gjør alt tungt løft for oss - et godt alternativ, spesielt hvis du lager et eget skript, er litt for ambisiøst for dine behov.
Jeg tar deg gjennom hvert trinn som kreves for å sette både et horisontalt og vertikalt grunnlinje i Photoshop som er fleksibelt, tilpassbart og dødt enkelt å fullføre på mindre enn ti minutter.
I dagens veiledning skal jeg bruke en gratis forlengelse fra Cameron McEfee som heter - passende - GuideGuide. Gå over til http://www.guideguide.me for å laste ned pluginet.
Velg versjonen som samsvarer med Photoshop (CS4 +) og lagre den på et passende sted på harddisken.
Merk: OSX-brukere med Photoshop CS5 må installere Adobe Extension Manager Patch.
Sørg for at Photoshop er stengt, åpne Adobe Extension Manager.
Klikk på koblingen Installer i toppmenyen, naviger til den ekstraherte GuideGuide-utvidelsen og klikk på "Åpne". Etter at du har akseptert vilkårene, vil GuideGuide være klar til å bli åpnet neste gang du åpner Photoshop.
Brann opp Photoshop, og fra filmenyen 'Window' velg 'Extensions → GuideGuide'.
GuideGuide-utvidelsen vil nå vises i arbeidsområdet ditt. Ikke bekymre deg for mye om inntastingsfeltet ennå, men vi skal snart grave inn i utvidelsen.
Vi skal holde ting veldig enkelt i dag, og vil kopiere 960px rutenettet som brukes av 960 Grid System (selv om du er velkommen til å nærme gridene ved hjelp av hvilke målinger du finner enklest). Hvis vi går over til nettstedet, blir gridet som vi kopierer lagt ut i vanlig engelsk på hjemmesiden:
For å omformulere dette, hva vi skal skape i dag er et 960px bredt lerret med 12 like fordelte og like store kolonner. Med en 10px-margin på hver side av lerretet, vil vi bli igjen med en 20px renner mellom hver av kolonnene.
Før vi fortsetter, vet jeg hva du kanskje sier: "Hvorfor ikke bare laste ned Photoshop-malen fra nettstedet?". Hva jeg skal vise deg hvordan du lager i dag, er helt tilpassbar for noen prosjekt og noen CSS-rammeverk, uansett antall kolonner, lerretbredde eller takrenner. Vi bruker bare et enkelt eksempel for å demonstrere teknikkene.
I Photoshop velger du Arkiv → Nytt og lager et nytt dokument 960px bredt ved 1050px høyt.
Sørg for at linjalene dine vises (Se → Linjaler) dra ut to guider til kantene på lerretet.
Når du åpner GuideGuide-utvidelsen, vil du legge merke til en rekke inntastingsfelter og menyelementer som gjør at vi kan definere vårt horisontale grunnlinje, som følger (du kan også sveve over hvert ikon for en beskrivelse.)
Skriv inn verdiene som følger og klikk på GuideGuide-knappen:
Når du har sendt inn verdiene, vil Photoshop automatisk gjengi alle guider for rutenettet:
Merk: Hvis du bruker GuideGuide uten valg, vil det automatisk bli gjort guider over hele lerretet. Hvis du bare vil ha guider over en del av dokumentet (for eksempel en navigasjonslinje), opprett et valg med markørverktøyet (M) før du bruker utvidelsen.
Som det står, har vi et perfekt brukbart horisontalt grunnlinje. For å gjøre det enklere for oss selv, skal vi nå legge til en visuell hjelper for å fortelle oss hva en kolonne er og hva en rigg er - noe som kan være vanskelig å skille mellom når den zoomes inn i dokumentet.
Lag et nytt lag (Ctrl + Shift + N) og trekk ut et utvalg bredden og høyden til den første kolonnen. Pressing Ctrl + BkSpace, fyll ut valget med # ff0084. Du er også velkommen til å bruke formverktøyet for dette, men pass på at pikslene dine er nøyaktig valgt.
Deretter lager du 12 totale versjoner av laget ved å trykke Ctrl + J 11 ganger. Hvis du velger det øverste laget, drar du kolonnen til tolvte kolonneposisjonen med Move-verktøyet (V).
Deretter velger du alle tolv lag (Ctrl + Click) og distribuere kolonnene ved å velge Fordel horisontale sentre ikon under Move-verktøyet (V) (Alternativt Lag → Juster → Horisontale sentre)
Endelig rydder du opp dokumentet ved å velge alle kolonnelagene og slå dem sammen (Ctrl + E). Gi nytt navn til laget 'Horisontal grunnlinje' og ring oppaktheten til 10%.
Nå som vi har etablert en horisontal grunnlinje, er det på tide å bevege oss på vår vertikale basislinje. Vi kommer ikke til å dykke inn i teorien om vertikale grunnlinjer i dag, men hvis du vil lære mer, kan du lese om Stille inn webtype til et grunnlinje.
I dag skal vi sette vår vertikale basislinje basert på en skriftstørrelse på 14 px. For å etablere en 1,5-linjehøyde, og for å gi oss stor fleksibilitet, vil vår basislinje være 7px (det vil si tre baseline enheter som er lik 21px).
Jeg skal vise deg to metoder for å oppnå dette - gjerne bruke hvilken som helst som snakker til deg og arbeidsflyten din!
For å starte, skal vi bruke GuideGuide en gang til. Åpne utvidelsen, skriv inn følgende verdi og trykk på GuideGuide-knappen:
Når du har sendt inn, vil Photoshop gjengi alle guider for vår vertikale basislinje:
På dette punktet har den mer sparsomme leseren innsett at denne metoden bare er mulig fordi vi opprettet dokumenthøyde i et perfekt multiplum på 7px (1050px). Hvis vi ikke tok dette første trinnet, ville GuideGuide gjengi så mange 7px guider som mulig, og la resten stå nederst i dokumentet.
Og i det enkle trinnet har vi opprettet en perfekt funksjonell vertikal baseline. Det eneste problemet er at dette dokumentet nå er veldig opptatt. Også, hvis du er vant til å bruke guider i designene dine, kan denne metoden raskt bli forvirrende, rotete og ubrukelig.
Hvis denne metoden ikke klyser din fancy, kan du fjerne de horisontale støttelinjene (Ctrl + Alt + Z) og opprett en alternativ basislinje ved hjelp av et pikselrutenett.
For vår alternative metode åpner du Photoshops gridpreferansepanel (Rediger → Innstillinger → Grids, Guides and Slices). Skriv inn følgende verdier for pikselruten:
Nå, tilbake til dokumentet, kan du slå synligheten til nettet på og av (Ctrl + '), hvor hver horisontale linje av rutenettet etablerer din vertikale basislinje - som du kan se her med en 600% zoom påført.
Den gode tingen om denne metoden er at vi har skilt ut de horisontale og vertikale basislinjene, slik at du enkelt kan bytte synlighet avhengig av hvilken del av designet du arbeider med.
Uansett hvilken metode du foretrekker (guider eller gridlag), er det siste trinnet å skape en visuell hjelpemiddel for vår vertikale grunnlinje på samme måte som vi gjorde for vår horisontale grunnlinje (men vi skal bruke en annen metode).
Opprett et nytt dokument 1px x 7px med gjennomsiktig bakgrunn:
Ved hjelp av Marquee-verktøyet (M), still inn stilen til Fast størrelse, og dimensjonene til 1px x 1px. Lag et utvalg nederst i dokumentet (du vil bli zoomet inn så langt du kan gå her (Z)) og fyll den med # 00ff12 (Ctrl + Bkspace).
Definer deretter dette dokumentet som et mønster (Rediger → Definer mønster). Gi det navnet '7px Vertikal Baseline'.
Gå tilbake til hoveddokumentet ditt. Lag et nytt lag (Ctrl + Shift + N), velg hele lerretet (Ctrl + A) og trykk Ctrl + Bkspace å fylle utvalget. Fra rullegardinmenyene, velg 'Mønster' for fylletypen og den nyopprettede '7px-basislinjen' for mønsteret.
Gi nytt navn til laget til "Vertikal baseline" og ring oppaktheten ned til rundt 30%.
Selv om elementene ikke kommer til å snakke til noen av de visuelle hjelperne, uansett hvilken metode du brukte for den vertikale basislinjen (guider eller gridlag) i de forrige trinnene, vil det nyopprettede visuelle laget være perfekt justert til grunnlinjen - slik at du enkelt kan snappe for hele design.
Og med det har du opprettet et perfekt grunnlinje med piksel med praktiske visuelle lag for ditt neste prosjekt. Det eneste du må gjøre er å gi designet ditt et lite pusterom.
Åpne dialogboksen for lerretstørrelse (Bilde → Lerretstørrelse) og endre bredden til 1400px.
Det endelige resultatet:
Hvis du har gjort det hele veien, bra jobb! Du har nå alle teknikker som kreves for å lage dine egne tilpassede grunnlinjer i Photoshop.
Det eneste rådet jeg vil tilby er at selv om GuideGuide gjør en god jobb med å håndtere all nødvendig matte, må den jobbe innenfor Photoshops begrensninger, nemlig at guider kun kan plasseres på en fullpiksel. Hvis rutenettet ditt krever mål for sub-pixel, vil guider bli gjengitt så tett som mulig, med posisjonene deres avrundet til nærmeste fullpiksel. Med det i tankene kan en liten planlegging i begynnelsen unngå mye av enpiksel hodepine senere i prosjektet.
Som parting notat kan du bruke GuideGuide for mye mer enn bare basislinjer; eksperimentere med det for å legge ut rister for alle slags designkomponenter fra bilderammer til menyer!
Takk igjen, og ikke glem å abonnere og legge igjen en kommentar nedenfor - vi vil gjerne høre dine tanker!
Accentsconagua