Share
Att vara en kompetent webbdesigner innebär att du har en bra förståelse på nät, speciellt om du vill driva en lyhörd webbdesign. I den här handledningen tar vi en titt på ett Photoshop-skript för att skapa egna anpassade nät, plus vi öppnar huven och ser på hur manuset faktiskt görs.
Det är ganska troligt att du redan har använt psd-filer från ett nät system eller annat. Du har nog öppnat psd, komplett med alla dess guider, då har du ändrat dokumentstorleken för att ge dig lite andningsrum.
När det gäller vårt skript genererar det Photoshop guider oberoende av dokumentstorleken. Det kommer att göra det möjligt för oss att ange antalet kolumner, rännans storlek och layoutbredden. Okej, tillräckligt med introduktionerna, låt oss dyka in.
Accentsconagua
Siffra() funktion för att endast säkerställa taldatatypen.Guides.add () att lägga till guider i vårt dokument.Innan vi hoppar in i utvecklingsprocessen, låt oss först snabbt täcka hur man faktiskt installerar och använder manuset i Adobe Photoshop.
Detta skript är kompatibelt med Photoshop CS5 och senare. Du kan hämta skriptet från länken ovan "Ladda ner: Källkod" eller du kan hämta uppdaterade versioner av manuset från min hemsida. När du har laddat ner skriptet (.jsx-filen), kopiera filen till [Photoshop root] \ Presets \ Scripts.
Då kan du komma åt skriptet i Photoshop genom att gå på Arkiv> Skript som visas nedan.
Innan du startar det här skriptet måste du ha minst ett aktivt dokument öppet (för närvarande kommer skriptet inte att köras och kommer att kasta ett fel). När du har startat skriptet så visas det första prompten. Det kommer att be dig att ange bredden på layouten som ska användas för din webbdesign.
Jag har använt en bredd på 960px som standard, så om du inte anger ett visst värde vid denna tidpunkt kommer det att gå med 960px. Du kan ange vilken som helst bredd, men det borde helst vara ett jämnt tal. Om du anger ett udda värde, säg 955, kommer beräkningarna inom skriptet att göra fraktionerade tal. Det betyder bråkdel av en pixel, vilket inte är möjligt där positioneringsguider berörs. Även om vi skulle avrunda det fraktionsvärdet skulle vi inte ha 100% exakta positioner för guiderna.
När du har tryckt på "Enter" vid den första prompten (eller tryck på OK efter att ha ställt in layoutbredden) visas nästa fråga som frågar dig om att ange antalet kolumner du vill använda i din layout. Som standard använder jag 12 kolumner.
Slutligen visas en tredje prompt som kräver värde för marginaler (mellanslag mellan gränser och och yttre kolumner). Detta värde fördubblas sedan för att få rännans utrymme, vilket tenderar att vara fallet i 960-nätsystem.
När du har levererat värden i alla tre prompterna ser du guider i ditt dokument som är arrangerade i form av kolumner. Om du inte ser några guider där, har du förmodligen stängt av synligheten för guider. Du kan återställa synligheten genom att gå till Visa> Visa> Guider (Ctrl +;).
I ovanstående bild kan du se kolumner, marginaler och rännorutrymme. Dessa färger är bara för att illustrera vad som är vad. Röda färger visar kolumner; vit för rännan och grön för marginaler. I själva verket får du inte dessa färger; guidar bara som i följande bild.
Nu är vi bekanta med hur man gör det använda sig av det här skriptet, låt oss se hur vi faktiskt kan skriva det med JavaScript!
Innan vi faktiskt startar skript behöver vi veta om det finns ett Photoshop-dokument som öppnas och är aktivt i applikationen. Vi kontrollerar det med hjälp av detta tillstånd:
om (app.documents.length! = 0) // Vår hela kod kommer att gå här annat // Inget aktivt dokument finns
Vi ska sätta all följande kod inom dessa första krullningsbygelar och vi kommer att avsluta vårt manus med brace som ovan.
Vår första uppgift är att konvertera måttenheterna i Photoshop-dokumentet till pixlar - vi måste vara pixel perfekt när du utformar för webben!
// Detta ska ställa in måttenheter av dokument till pixlar. preferences.rulerUnits = Enheter.PIXELS;
Därefter bestämmer vi dimensionerna för Photoshop-dokumentet.
var doc = app.activeDocument; // spara referens för aktivt dokument till variabel "doc" för enkelt att skriva senare var docWidth = doc.width; // får dokumentets bredd och lagras i "docWidth"
Detta nät system är oberoende av dokumentets höjd, vi behöver därför inte hämta det.
Nu måste vi hitta dokumentets horisontella mittpunkt eller dokumentbredd. Hur gör vi det här? Enkel; dela dokumentbredden med två.
var docXcenter = docWidth / 2;
Vid denna tidpunkt kan det inte vara klart varför jag utvärderar detta centrum, men när vi går vidare beskriver jag användningen i vårt manus.
Vid denna tidpunkt måste vi fråga användaren om den layoutbredden de vill använda, antalet kolumner och avstånd mellan rännorna.
Till exempel använder 960gs följande fasta kombinationer:
Vi kommer att uppnå tydligare resultat om vi använder en av dessa kombinationer (låt oss säga det första) som standard.
// Få layoutbredden från användaren. Standard till 960px. var layoutWidth = Number (prompt ('Ange layoutbredd:', 960)); // Detta får antal kolumner från användaren. Mest lämpligt 12,16 eller 24. Standard 12 kolumner. var cols = Number (prompt ('Ange antal kolumner:', 12)); // Går marginaler från vänster höger från användare. Vilket kommer senare att fördubblas för att få rännan. Standard 10px var margin = Nummer (prompt ('Ange mellanslag mellan kolumner:', 10)); Okej, innan vi går längre, låt oss först ta en titt på vad som är "snabb".
prompt ("Meddelande till användare här", "Standardvärde här"); Snabbt visar en dialog till användaren med ett meddelande och en inmatningsruta som nedan:
Användaren matar in den önskade inmatningen, vid vilken tidpunkt återkommer den inmatningen.
Den första delen av prompt (som visas före kommatecken) sätter ett meddelande i en dialog för användaren. Vi kan styra användarna om ingångstypen och giltiga värden etc. Till exempel;
prompt ("Ange antal kolumner. Lämpliga värden är 12, 16, 24.", 12); Den andra delen av prompt är standardvärdet för den snabba dialogen. När det gäller kolumner här använder vi 12 som standardvärde.
Nummer är en metod som extraherar tal från den angivna ingången. Om användaren har skrivit något annat än ett nummer (som ett namn eller en annan sträng), skulle metoden återvända a NaN (Inte ett tal). Denna sanitet säkerställer att du bara får den datatypstyp som är nödvändig i vissa situationer där endast siffror fungerar.
Den första raden får värdet på layoutbredden. Den faktiska delen av webbplatsen ligger inom denna bredd. Eftersom vi använder 960gs är standardvärdet för detta 960px, men du kan ändra det till vilken bredd du vill.
I den andra raden får vi antalet kolumner som vår användare vill ha i sin layoutdesign. 960gs använder 12, 16 eller 24 kolumner eftersom de fungerar väldigt effektivt, men de är inte obligatoriska.
I tredje raden får vi det utrymme som ligger mellan kolumnerna och gränserna för layouten. Detta utrymme fördubblas vanligen mellan kolonnerna som rännor.
Var gutter = mellanslag * 2; // Beräknar den horisontella mitten av layouten och så mitten av dokumentet var layoutHalf = layoutWidth / 2;
Här beräknas rännans rymd och tilldelas variabeln ränna. I den andra raden beräknar vi hälften av layoutbredden som vi får genom användarinmatning. Med andra ord, den horisontella mitten av vår layout.
I de två första raderna i detta avsnitt av koden beräknar vi positionen för vänster och höger gränser för vår layout. Vi hänvisar till dessa som yttre gränser; den vänstra gränsen är minLimitOuter och den högra gränsen är maxLimitOuter.
I de följande två linjerna beräknar vi de inre gränserna för vår layout. Detta är effektivt vår layout bredd minus rännbredd. Tänk på det som marginalen som ligger direkt inuti layoutbredden.
// yttre gränser som är layoutbredden; var maxLimitOuter = docXcenter + layoutHalf; var minLimitOuter = docXcenter - layoutHalf; // Inner gränser för 960gs var minLimitInner = minLimitOuter + space; var maxLimitInner = maxLimitOuter - space;
Här kommer definitionen av docXcenter som vi pratade om tidigare. docXcenter är centrum för hela dokumentbredden. Vi måste utvärdera det för att placera saker runt mitten av dokumentet. Vi kommer inte att placera en guide i mitten, men vi behöver det för att placera andra element.
Så vad är det? layoutHalf? Detta är halva bredden på layouten som definierad av användaren. Vi delade den bredden i halvor så att vi kan lägga varje halva på vardera sidan av docXcenter. Härifrån kan vi bestämma läget för guiderna på vänster och höger kanter av layouten.
Den vänstra styrpositionen skulle vara (Center för dokument - hälften av layoutbredden) och följaktligen skulle guiden vid högra kanten vara (Dokumentets centrum + hälften av layoutbredden).
Här beräknar vi bredden på varje kolumn. Vi behöver detta värde senare när vi upprepar processen för att lägga till guide.
var colWidth = (layoutWidth - (cols * gutter)) / cols;
Slutligen kommer vi till vår första faktiska "guide add" -steg! Här lägger vi till två guider på layoutgränserna. våra yttre gränser.
doc.guides.add (Direction.VERTICAL, minLimitOuter); doc.guides.add (Direction.VERTICAL, maxLimitOuter);
Den första raden lägger till en vertikal guide till vårt dokument på minLimitOuter, den vänstra kanten av layouten och maxLimitOuter den högra kanten av layouten.
Låt mig förklara lite mer om ovanstående koder.
doc.guides.add (Direction.TECHTICAL / HORIZONTAL, position)
Denna rad lägger faktiskt till guider i vårt Photoshop-dokument. "doc" är helt enkelt hänvisningen till vårt aktuella aktiva dokument. "guider" är ett föremål för klassguider, som ligger i dokumentet och ansvarar för beteende och egenskaper hos guider i ett Photoshop-dokument. "add" är en metod för klassguider som lägger till guider i vårt dokument.
doc.guides.add () är en metod som endast kräver två parametrar. Den första är riktningens riktning, som kan vara vertikal eller horisontell. Den andra parametern är helt enkelt ledarens position. Om du ställer in dina enheter på pixlar antar det att värdet som överförs till den andra parametern är pixlar eller någon annan.
Den första slingan kommer att hantera vår första grupp guider och inre gränser:
för (i = 0; i < cols ; i++ ) guidPos = minLimitInner + ( ( colWidth + gutter ) * i ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos));
Låt oss titta på det. Vi upprepar (slinga) vår kod "kols" gånger, eftersom det här är antalet kolumner som användaren vill använda. I denna del av koden ska vi också lägga till våra inre gränser.
Den första raden efter startlinjen "för" är en variabel "guidPos" för styrposition. "minLimitInner" ser till att placeringen av vår första guide startar från minLimitInner; de inre gränserna. Då fortsätter vi att multiplicera colWidth och rännan med "jag" som blir iterated 0 till "cols" gånger. På så sätt lägger vi till vår första grupp guider till dokumentet. Dessa guider kommer att vara till vänster om varje kolumn.
Då kontrollerar vi i andra raden om guidPos-värdet överstiger maxLimitInner; den högra inre gränsen för dokumentet. Om så är fallet bryter det ut ur slingan. Om detta tillstånd inte blir sant fortsätter slingan tills villkoret är uppfyllt.
Den tredje raden av kod lägger bara till guiderna till dokumentet på guidPos position.
Tid att hantera vår andra grupp guider.
för (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 några mindre skillnader lägger denna kod till guider till högra kanter av våra kolumner och till höger inre gränsen.
Här är den fullständiga koden:
om (app.documents.length! = 0) preferences.rulerUnits = Enheter.PIXELS; var layoutWidth = Number (prompt ('Ange layoutbredd:', 960)); var cols = Number (prompt ('Ange antal kolumner:', 12)); var space = Number (prompt ('Ange mellanslag mellan kolumner:', 10)); var doc = app.activeDocument; var docWidth = doc.width; var docXcenter = docWidth / 2; Var gutter = mellanslag * 2; // Gutter space var layoutHalf = layoutWidth / 2; // yttre gränser som är layoutbredden; var maxLimitOuter = docXcenter + layoutHalf; var minLimitOuter = docXcenter - layoutHalf; // Inner gränser för 960gs var minLimitInner = minLimitOuter + space; var maxLimitInner = maxLimitOuter - space; var colWidth = (layoutWidth - (cols * gutter)) / cols; doc.guides.add (Direction.VERTICAL, minLimitOuter); doc.guides.add (Direction.VERTICAL, maxLimitOuter); för (i = 0; i < cols ; i++ ) guidPos = minLimitInner + ( ( colWidth + gutter ) * i ); if ( guidPos > maxLimitInner) break; doc.guides.add (Direction.VERTICAL, Number (guidPos)); för (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 ("Inget aktivt dokument finns"); Även om det här skriptet kan innehålla brister och nackdelar var målet att lära dig lite om JavaScript för Photoshop inom ett praktiskt exempel. Du kanske inte har fattat det alls, men jag hoppas att det åtminstone är kittlat på din nyfikenhet. Om du har några frågor alls, var god att lämna dem i kommentarerna.
