Før vi faktisk begynne scripting, trenger vi å vite om det er en Photoshop-dokument åpnes og aktiv i søknaden. Vi sjekker det ved hjelp av denne tilstanden: (! App.documents.length = 0)
om {//Hele vår kode vil gå her} else {//Ingen aktive dokumentet foreligger}

Vi skal legge alt inn følgende kode innenfor disse første klammeparentes og vi skal avslutte vår script med} spenne som ovenfor

vår første oppgave vil være å konvertere måleenhetene Photoshop-dokumentet til piksler - vi trenger å være pixel perfekt mens designe for web
//Dette skal sette måleenheter dokumenter til pixels!. preferences.rulerUnits = Units.PIXELS;

Neste vi vil bestemme dimensjonene til Photoshop-dokumentet
Var doc = app.activeDocument; //Spare referanse av aktive dokumentet til variabelen "doc" for enklere skriving senere Var docWidth = doc.width; //Blir bredden på documentand lagrer den i "docWidth"

Dette grid system er uavhengig av høyden på dokumentet vi derfor ikke trenger å hente den.

nå må vi finne den horisontale sentrum av dokumentet, eller dokumentbredde. Hvordan gjør vi dette? Enkel; . Dele dokumentet bredde med to
Var docXcenter = docWidth /2;

På dette punktet kan det ikke være klart hvorfor jeg vurdere dette senteret, men som vi går videre vil jeg beskrive sin bruk innenfor vår script .

på dette punktet må vi spørre brukeren om utformingen bredde de ønsker å bruke, antall kolonner og gutter avstand

For eksempel bruker 960gs følgende faste kombinasjoner:

Layout bredde: 960 x

første kombinasjon: 12 kolonner: 10px ytre margin: 20px indre takrenne
< li> andre kombinasjon: 16 kolonner: 10px ytre margin: 20px indre takrenne

tredje kombinasjon: 24 kolonner: 5px ytre margin: 10px indre takrenne

Vi vil få bedre resultater hvis vi bruker en av disse kombinasjonene (la oss si den første) som standard.
//Få layout bredde fra brukeren. Standard for å 960px.var layoutWidth = Number (spør ( 'Skriv layout bredde:', 960)); //Dette blir antall kolonner fra brukeren. Mest hensiktsmessig 12,16 eller 24. Standard 12 kolonner. Var kolonner = Number (spør ( 'Skriv inn antall kolonner:', 12)); //Gets marginer fra venstre til høyre fra brukeren. Som vil senere bli doblet for å få gutter. Standard 10px Var margin = Number (spør ( 'Skriv inn mellomrom mellom spalter:', 10));

Ok, før vi går videre, la oss først? ta en titt på hva "spørsmål" er
be ( "melding til brukeren her", "Default verdi her");

spør viser en dialog for brukeren med en melding og en tekstboks som nedenfor.:

brukeren angir riktig inngang, noe som medførte rask avkastning som inngangs.

den første delen av ledeteksten (som vises før komma) 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 rask er standardverdien for rask dialog. I tilfelle av kolonner, bruker vi 12 som standardverdi.

Og hva Number ()?

Number er en metode som trekker tallene fra gitt innspill. Dersom brukeren har oppgitt noe annet enn et tall (som et navn eller en annen streng), vil metoden returnere en NaN (Not a Number). Dette sanitær gjør at du bare får antall datatype som er viktig i visse situasjoner der bare tall arbeid.

Den første linjen blir verdien av oppsettet bredde. Den virkelige spørsmål om nettstedet vil ligge innenfor denne bredden. Som vi bruker 960gs standardverdien for dette er 960 x, men du kan endre det til hva bredde du vil.

I den andre linjen, får vi antall kolonner vår brukeren ønsker å ha i sin layout design . 960gs bruker 12, 16 eller 24 kolonner som de jobber veldig effektivt, men de er på ingen måte obligatorisk.

I tredje linje får vi plass som ligger mellom søylene og på grensene for layout. Denne plassen dobler vanligvis mellom kolonnene som takrenne

Her er gutter plass blir beregnet og tildelt variabelen gutter. I den andre linjen, er vi beregne halvparten av oppsettet bredde som vi får gjennom brukerundersøkelser. Med andre ord, det horisontale sentrum av vår layout

I de to første linjene i denne delen av koden vi beregne posisjonen til venstre og høyre grenser for vår layout. Vi refererer til disse som ytre grenser; venstre grense er minLimitOuter og høyre grense er maxLimitOuter.

I de følgende to linjer vi beregne de indre grensene for vår layout. Dette er effektivt vår layout bredde minus rennesteinen bredde. Tenk på det som å være den margin som ligger rett innenfor layout bredde
//yttergrensene som er oppsettet bredde.; Var maxLimitOuter = docXcenter + layoutHalf; Var minLimitOuter = docXcenter - layoutHalf; //Indre 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 vår hele dokumentet bredde. Vi trenger å evaluere at for å plassere ting rundt sentrum av dokumentet. Vi vil ikke plassere en guide i sentrum, men vi trenger det for å plassere andre elementer.

Så hva er layoutHalf? Dette er halvparten av bredden av utformingen som defineres av brukeren. Vi delte at bredden i halvdeler, slik at vi kan sette hver halvdel på hver side av docXcenter. Herfra kan vi bestemme plasseringen av førerne på venstre og høyre kant av layout

Den venstre anvisning posisjon ville være (Center of dokument - halvparten av layout bredde). Og dermed guide på høyre kant ville være (Center of dokument + halvparten av layout bredde)

Her er vi beregne bredden på hver kolonne. Vi trenger denne verdien senere når gjenta "legger til guide" prosess
Var colWidth = (layoutWidth - (Cols * gutter)) /kolonner;

til slutt kommer vi til vår første ordentlige "guide legger til" trinn! Her legger vi to guider på layout grenser; våre yttergrenser
doc.guides.add (Direction.VERTICAL, minLimitOuter);. doc.guides.add (Direction.VERTICAL, maxLimitOuter);

Den første linjen legger en vertikal guide til vårt dokument om posisjonene minLimitOuter, den venstre kanten av layout og maxLimitOuter høyre kant av layout.

La meg forklare litt mer om ovennevnte linjer med kode.
doc.guides.add (Direction.VERTICAL /horisontale, posisjon)

Denne linjen faktisk legger guider til våre Photoshop-dokument. "Doc" er rett og slett referansen til våre aktive dokumentet. "Guider" er et objekt av klassen guider, som ligger i dokumentet, og er ansvarlig for oppførselen og egenskapene til guider innenfor et Photoshop-dokument. "Legge" er en metode for klasse guider som legger guider til vårt dokument.

doc.guides.add () er en metode som krever bare to parametere. Den første er i regi av guiden, som kan være vertikal eller horisontal. Den andre parameteren er bare plasseringen av guide. Hvis du setter dine enheter til å piksler vil det anta verdien sendes til andre parameter er piksler, eller henholdsvis annen

Den første sløyfen vil håndtere vår første gruppe av guider og indre grenser:
for (i = 0; i < kolonner; i ++) {guidPos = minLimitInner + ((colWidth + gutter) * i); if (guidPos > maxLimitInner) {break; } Doc.guides.add (Direction.VERTICAL, Number (guidPos)); }

La oss se nærmere på det. Vi gjentar (sløyfe) vår kode "Cols" tider, da dette er antall kolonner vår brukeren ønsker å bruke. I denne delen av koden vi skal også legge til våre indre grenser.

Den første linjen etter "for" startstreken er en variabel "guidPos" for guide stilling. "MinLimitInner" sørger for at posisjonen vår første guide starter fra minLimitInner; de indre grensene. Deretter fortsetter vi å multiplisere colWidth og gutter med "i" som blir iterated 0 til "Cols" tider. På denne måten legger vi vår første gruppen av guider til dokumentet. Disse guidene vil være på venstre side av hver kolonne

Så i andre linje sjekker vi om guidPos verdi overstiger maxLimitInner.; høyre indre grensen av dokumentet. Hvis så det bryter ut av sløyfen. Hvis denne tilstanden ikke faller sant, fortsetter løkke til betingelsen er oppfylt.

Den tredje linje med kode bare legger føringene til dokumentet på guidPos posisjon.

Tid for å håndtere våre andre gruppe av guider
for (j = 0; j < kolonner; j ++) {if (j == 0) {formere = 0} else. {formere = 1; } Temp_gutter = (takrenne * multiplisere); guidPos = (minLimitOuter - plass) + ((colWidth + gutter) * (j + 1)); if (guidPos > maxLimitInner) {break; } Doc.guides.add (Direction.VERTICAL, Antall (guidPos));.

Med noen små forskjeller dette stykke kode legger guider til høyre kant av våre søyler og til høyre indre grense

Her er den fullstendige koden:
if (! app.documents.length = 0) {preferences.rulerUnits = Units.PIXELS; Var layoutWidth = Number (spør ( 'Skriv layout bredde:', 960)); Var kolonner = Number (ledetekst ( "Skriv inn tall kolonner: ', 12)); Var plass = Number (spør ( 'Skriv inn mellomrom mellom spalter:', 10)); Var doc = app.activeDocument; Var docWidth = doc.width; Var docXcenter = docWidth /2; Var gutter = plass * 2; //Takrenne plass Var layoutHalf = layoutWidth /2; //Yttergrenser som er oppsettet bredde; Var maxLimitOuter = docXcenter + layoutHalf; Var minLimitOuter = docXcenter - layoutHalf; //Indre grenser for 960gs Var minLimitInner = minLimitOuter + plass; Var maxLimitInner = maxLimitOuter - plass; Var colWidth = (layoutWidth - (Cols * gutter)) /kolonner; doc.guides.add (Direction.VERTICAL, minLimitOuter); doc.guides.add (Direction.VERTICAL, maxLimitOuter); for (i = 0; i < kolonner; i ++) {guidPos = minLimitInner + ((colWidth + gutter) * i); if (guidPos > maxLimitInner) {break; } Doc.guides.add (Direction.VERTICAL, Number (guidPos)); } For (j = 0; j < kolonner; j ++) {if (j == 0) {formere = 0} else {formere = 1; } Temp_gutter = (takrenne * multiplisere); guidPos = (minLimitOuter - plass) + ((colWidth + gutter) * (j + 1)); if (guidPos > maxLimitInner) {break; } Doc.guides.add (Direction.VERTICAL, Number (guidPos)); }} //End-hvis app.documents.length else {alert ( "Ingen aktive dokumentet finnes"); }

Selv om dette skriptet kan inneholde feil og ulemper, målet var å lære deg litt om Javascript for Photoshop innen et praktisk eksempel. Du har kanskje ikke forstått det hele tatt, men jeg håper det er minst kilte din nysgjerrighet. Hvis du har noen spørsmål i det hele tatt, kan du gjerne la dem i kommentarfeltet.