Share
Å være en dyktig webdesigner betyr å ha en solid forståelse på nett, spesielt hvis du ønsker å forfølge responsivt webdesign. I denne veiledningen tar vi en titt på et Photoshop-skript for å generere dine egne tilpassede grensesnitt, pluss vi åpner hetten og ser på hvordan skriptet egentlig er laget.
Det er ganske sannsynlig at du allerede har brukt psd-filer fra et rutenett system eller en annen. Du har sannsynligvis åpnet psd, komplett med alle guider, da har du endret dokumentstørrelsen for å gi deg litt puste.
Når det gjelder skriptet, genererer det Photoshop-guider uavhengig av dokumentstørrelsen. Det vil tillate oss å spesifisere antall kolonner, rennestørrelsen og layoutbredden. Ok, nok med introduksjonene, la oss dykke inn.
Accentsconagua
Nummer() funksjon for å bare sikre nummer datatype.Guides.add () å legge til guider i dokumentet vårt.Før vi hopper inn i utviklingsprosessen, la oss først raskt dekke hvordan du faktisk installerer og bruker skriptet i Adobe Photoshop.
Dette skriptet er kompatibelt med Photoshop CS5 og nyere. Du kan laste ned skriptet fra lenken "Last ned: Kildekode", eller du kan laste ned oppdaterte versjoner av skriptet fra nettstedet mitt. Etter at du har lastet ned skriptet (.jsx-filen), kopier filen til [Photoshop root] \ Presets \ Scripts.
Du vil da kunne få tilgang til skriptet i Photoshop ved å gå til File> Scripts som vist nedenfor.
Før du starter dette skriptet må du ha minst ett aktivt dokument åpent (for øyeblikket vil ikke skriptet løpe og vil kaste en feil). Etter at du har startet skriptet, vil det vise sin første ledetekst. Det vil be deg om å legge inn bredden på oppsettet som skal brukes til webdesign.
Jeg har brukt en bredde på 960px som standard, så hvis du ikke angir en bestemt verdi på dette punktet, vil det gå med 960px. Du kan skrive inn hvilken som helst bredde, men det bør ideelt sett være et jevnt tall. Hvis du angir en merkelig verdi, si 955, vil beregningene i skriptet gi delte tall. Det betyr at brøkdel av en piksel, som ikke er mulig der posisjoneringsførere er opptatt. Selv om vi skulle avrunde den fraksjonelle verdien, ville vi ikke ha 100% nøyaktige stillinger for støttelinjene.
Etter at du har tastet "Enter" ved den første spørringen (eller trykk OK etter å ha satt opp layoutbredden) vises den neste spørringen som ber deg om å angi antall kolonner du vil bruke i oppsettet. Som standard bruker jeg 12 kolonner.
Endelig vises en tredje spørring som krever verdi for marginer (mellomrommet mellom grenser og og ytre kolonner). Denne verdien dobles deretter for å få takrommet, som det pleier å være tilfelle i 960-nettsystemer.
Etter at du har oppgitt verdier i alle tre spørsmålene, vil du se hjelpelinjer i dokumentet ditt, arrangert i form av kolonner. Hvis du ikke ser noen guider der, har du sannsynligvis slått av synligheten for guider. Du kan gjenopprette synligheten ved å gå til Vis> Vis> Guider (Ctrl +;).
I bildet ovenfor kan du se kolonner, marginer og rommeplass. Disse fargene er bare for å illustrere hva som er hva. Røde farger viser kolonner; hvit for renn og grønn for marginer. Faktisk får du ikke disse fargene; bare guider som i det følgende bildet.
Nå er vi kjent med hvordan bruk dette skriptet, la oss se hvordan vi egentlig kan skrive det med JavaScript!
Før vi faktisk starter skripting, må vi vite om det er et Photoshop-dokument åpnet og aktivt i programmet. Vi sjekker det med denne tilstanden:
hvis (app.documents.length! = 0) // Vår hele koden vil gå her annet // Ingen aktivt dokument eksisterer
Vi skal legge all den følgende koden i disse første krøllete armbåndene, og vi skal avslutte vårt skript med brace som ovenfor.
Vår første oppgave er å konvertere måleenhetene til Photoshop-dokumentet til piksler - vi må være piksel perfekt når du designer for nettet!
// Dette skal sette måleenheter av dokument til piksler. preferences.rulerUnits = Enheter.PIXELS;
Deretter bestemmer vi dimensjonene til Photoshop-dokumentet.
var doc = app.activeDocument; // lagre referanse av aktivt dokument til variabel "doc" for enkelt å skrive senere var docWidth = doc.width; // får bredden på dokumentet og lagrer den i "docWidth"
Dette rutenettet er uavhengig av dokumentets høyde, derfor trenger vi ikke å hente det.
Nå må vi finne det horisontale senteret av dokumentet eller dokumentbredden. Hvordan gjør vi dette? Enkel; dele dokumentbredden med to.
var docXcenter = docWidth / 2;
På dette tidspunktet kan det ikke være klart hvorfor jeg vurderer dette senteret, men når vi går videre, beskriver jeg bruken i skriptet vårt.
På dette tidspunktet må vi spørre brukeren om layoutbredden de vil bruke, antall kolonner og avstand mellom renner.
For eksempel bruker 960gs følgende faste kombinasjoner:
Vi vil oppnå klarere resultater hvis vi bruker en av disse kombinasjonene (la oss si det første) som standard.
// Få oppsettbredde fra bruker. Standard til 960px. var layoutWidth = Number (prompt ('Oppgi layoutbredde:', 960)); // Dette får antall kolonner fra brukeren. Mest passende 12,16 eller 24. Standard 12 kolonner. var cols = Number (prompt ('Oppgi antall kolonner:', 12)); // Gets margins fra venstre til høyre fra bruker. Som vil bli doblet for å få takrenner. Standard 10px var margin = Nummer (prompt ('Oppgi mellomrom mellom kolonner:', 10)); Ok, før vi går videre, la oss først ta en titt på hva som er "prompt".
spørre ("Melding til bruker her", "Standardverdi her"); Snart viser en dialog til brukeren med en melding og en inntastingsboks som nedenfor:
Brukeren skriver inn den nødvendige inntastingen, hvorpå prompt returnerer den innspillingen.
Den første delen av spørringen (som vises før kommaet) setter en melding i en dialog for brukeren. Vi kan veilede brukere om inngangstypen, og gyldige verdier etc. For eksempel;
prompt ("Oppgi antall kolonner. Passende verdier er 12, 16, 24.", 12); Den andre delen av spørringen er standardverdien for hurtig dialog. I tilfelle av kolonner her bruker vi 12 som en standardverdi.
Nummer er en metode som trekker ut tall fra den oppgitte inngangen. Hvis brukeren har skrevet inn noe annet enn et nummer (som et navn eller en annen streng), ville metoden returnere a NaN (Ikke et tall). Denne saniteten sørger for at du bare får nummerdatatypen som er viktig i enkelte situasjoner der bare tall fungerer.
Den første linjen blir verdien av layoutbredden. Den virkelige saken av nettstedet vil ligge innenfor den bredden. Som vi bruker 960gs er standardverdien for dette 960px, men du kan endre den til hvilken bredde du vil.
I den andre linjen får vi antall kolonnene brukeren ønsker å ha i layoutdesignen. 960gs bruker 12, 16 eller 24 kolonner da de fungerer veldig effektivt, men de er på ingen måte obligatoriske.
I tredje linje får vi rom som ligger mellom kolonnene og på grensene til oppsettet. Denne plassen dobler vanligvis mellom kolonnene som renner.
var gutter = plass * 2; // Beregner det horisontale senteret av oppsettet og så midten av dokumentet var layoutHalf = layoutWidth / 2;
Her blir takrommet beregnet og tildelt variabelen grøft. I den andre linjen beregner vi halvparten av layoutbredden som vi får gjennom brukerinngang. Med andre ord, det horisontale sentrum av vårt layout.
I de to første linjene i denne delen av koden beregner vi posisjonen til venstre og høyre grenser for vårt layout. Vi refererer til disse som ytre grenser; venstre grense er minLimitOuter og den rette grensen er maxLimitOuter.
I de følgende to linjene beregner vi de indre grensene til vårt layout. Dette er faktisk vår layoutbredde minus ryggbredden. Tenk på det som marginen som ligger rett innenfor layoutbredden.
// ytre grenser som er layoutbredden; var maxLimitOuter = docXcenter + layoutHalf; var minLimitOuter = docXcenter - layoutHalf; // Inner grenser for 960gs var minLimitInner = minLimitOuter + plass; var maxLimitInner = maxLimitOuter - plass;
Her kommer definisjonen av docXcenter som vi snakket om tidligere. docXcenter er sentrum for hele dokumentbredden. Vi må evaluere det for å plassere ting rundt sentrum av dokumentet. Vi vil ikke plassere en guide i sentrum, men vi trenger det til å plassere andre elementer.
Så hva er det layoutHalf? Dette er halvparten av bredden på oppsettet som definert av brukeren. Vi delte den bredden i halvdeler slik at vi kan sette hver halvdel på hver side av docXcenter. Herfra kan vi bestemme plasseringen av støttelinjene på venstre og høyre kant av oppsettet.
Den venstre guidenes posisjon ville være (Senter for dokument - halvdel av layoutbredde) og dermed vil guiden ved høyre kant være (Senter for dokument + halvdel av layoutbredde).
Her beregner vi bredden på hver kolonne. Vi trenger denne verdien senere når du gjentar prosessen med å legge til guide.
var colWidth = (layoutWidth - (cols * gutter)) / cols;
Til slutt kommer vi til vår første faktiske "guide add" -trinn! Her legger vi til to guider på layoutgrensene; våre ytre grenser.
doc.guides.add (Direction.VERTICAL, minLimitOuter); doc.guides.add (Direction.VERTICAL, maxLimitOuter);
Den første linjen legger til en vertikal veiledning til dokumentet vårt på stillingene minLimitOuter, den venstre kanten av oppsettet og maxLimitOuter høyre kant av layoutet.
La meg forklare litt mer om over linjene med kode.
doc.guides.add (Direction.TECHTICAL / HORIZONTAL, posisjon)
Denne linjen legger faktisk til guider i vårt Photoshop-dokument. "doc" er bare referansen til vårt nåværende aktive dokument. "guider" er et objekt av klasseguider, som ligger i dokumentet og er ansvarlig for atferdene og egenskapene til guider i et Photoshop-dokument. "add" er en metode for klasseguider som legger til guider i dokumentet vårt.
doc.guides.add () er en metode som krever bare to parametere. Den første er styrets retning, som kan være vertikal eller horisontal. Den andre parameteren er rett og slett posisjonen til guiden. Hvis du setter enhetene dine til piksler, vil det anta at verdien som er overført til den andre parameteren, er piksler, eller noen andre.
Den første løkken vil håndtere vår første gruppe guider og indre grenser:
for (i = 0; i < cols ; i++ ) guidPos = minLimitInner + ( ( colWidth + gutter ) * i ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos));
La oss se på det. Vi gjentar (loop) våre kode "kols" -tider, da dette er antall kolonnene brukeren vår ønsker å bruke. I dette stykke kode skal vi også legge til våre indre grenser.
Den første linjen etter "for" startlinjen er en variabel "guidPos" for styrestilling. "minLimitInner" sørger for at posisjonen til vår første guide starter fra minLimitInner; de indre grensene. Da fortsetter vi å multiplisere colWidth og renden med "jeg" som blir iterert 0 til "cols" ganger. På denne måten legger vi til vår første gruppe guider i dokumentet. Disse guidene vil være til venstre for hver kolonne.
Deretter kontrollerer vi i andre linje at guidPos-verdien overskrider maxLimitInner; høyre indre grense av dokumentet. I så fall bryter den ut av løkken. Hvis denne tilstanden ikke blir sant, fortsetter sløyfen til tilstanden er oppfylt.
Den tredje linjen med kode legger rett og slett veiledningene til dokumentet på guidPos stilling.
Tid til å håndtere vår andre gruppe guider.
for (j = 0; j < cols ; j++ ) if ( j == 0 ) multiply = 0 else multiply = 1; temp_gutter = ( gutter * multiply ) ; guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos));
Med få mindre forskjeller legger denne koden til guider til høyre kanter av våre kolonner og til høyre indre grense.
Her er den fulle koden:
hvis (app.documents.length! = 0) preferences.rulerUnits = Enheter.PIXELS; var layoutWidth = Number (prompt ('Oppgi layoutbredde:', 960)); var cols = Number (prompt ('Oppgi antall kolonner:', 12)); var space = Number (prompt ('Oppgi mellomrom mellom kolonner:', 10)); var doc = app.activeDocument; var docWidth = doc.width; var docXcenter = docWidth / 2; var gutter = plass * 2; // Gutter space var layoutHalf = layoutWidth / 2; // ytre grenser som er layoutbredden; var maxLimitOuter = docXcenter + layoutHalf; var minLimitOuter = docXcenter - layoutHalf; // Inner grenser for 960gs var minLimitInner = minLimitOuter + plass; var maxLimitInner = maxLimitOuter - plass; var colWidth = (layoutWidth - (cols * gutter)) / cols; doc.guides.add (Direction.VERTICAL, minLimitOuter); doc.guides.add (Direction.VERTICAL, maxLimitOuter); for (i = 0; i < cols ; i++ ) guidPos = minLimitInner + ( ( colWidth + gutter ) * i ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos)); for (j = 0; j < cols ; j++ ) if ( j== 0 ) multiply = 0 else multiply = 1; temp_gutter = ( gutter * multiply ); guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos)); // end-if app.documents.length else alert ("Ingen aktivt dokument eksisterer"); Selv om dette skriptet kan inneholde feil og ulemper, var målet å lære deg litt om JavaScript for Photoshop i et praktisk eksempel. Du har kanskje ikke grepet det i det hele tatt, men jeg håper det er minst kildet ditt nysgjerrighet. Hvis du har noen spørsmål i det hele tatt, vær så snill å la dem stå i kommentarene.
