Schreiben eines flexiblen Rasterskripts für Photoshop

Ein fähiger Webdesigner zu sein bedeutet, ein solides Verständnis für Grids zu haben, insbesondere wenn Sie reaktionsschnelles Webdesign verfolgen möchten. In diesem Tutorial sehen wir uns ein Photoshop-Skript zum Generieren Ihrer eigenen benutzerdefinierten Raster an. Außerdem öffnen wir die Motorhaube und sehen, wie das Skript tatsächlich erstellt wird.

Es ist sehr wahrscheinlich, dass Sie bereits psd-Dateien von dem einen oder anderen Raster-System verwendet haben. Wahrscheinlich haben Sie die PSD mit allen Anleitungen geöffnet und dann die Dokumentgröße geändert, um sich ein wenig Luft zu verschaffen.

Bei unserem Skript werden unabhängig von der Dokumentgröße Photoshop-Handbücher erstellt. Hier können wir die Anzahl der Spalten, die Rinnengröße und die Layoutbreite angeben. Okay, genug mit den Einführungen, lass uns eintauchen.

• Verwendung der Variablen als aktive Dokumentreferenz.
• Verwendung der Eingabeaufforderung, um Eingaben vom Benutzer zu erhalten.
• Number()-Funktion, um nur den Datentyp Number sicherzustellen.
• Guides.add(), um unserem Dokument Anleitungen hinzuzufügen.
• Benutzer der "for"-Schleife, um einen Vorgang zu wiederholen.
• Verwendung von "if", um einen Code bedingt auszuführen oder zu überspringen.
• Wie kann man Dokumente Maßeinheiten ändern?

Bevor wir mit dem Entwicklungsprozess beginnen, wollen wir zunächst kurz erläutern, wie das Skript in Adobe Photoshop tatsächlich installiert und verwendet wird.

Schritt 1: Verwendung des Herunterladens und Installierens

Dieses Skript ist mit Photoshop CS5 und höher kompatibel. Sie können das Skript über den obigen Link "Download: Quellcode" herunterladen oder aktualisierte Versionen des Skripts von meiner Website herunterladen. Nachdem Sie das Skript (die .jsx-Datei) heruntergeladen haben, kopieren Sie die Datei nach [Photoshop root]\Presets\Scripts.

Sie können dann in Photoshop auf das Skript zugreifen, indem Sie wie unten gezeigt auf Datei > Skripte klicken.

Schritt 2: Verwendung des Startens des Skripts

Bevor Sie dieses Skript starten, muss mindestens ein aktives Dokument geöffnet sein (derzeit wird das Skript nicht ausgeführt und es wird ein Fehler ausgegeben). Nachdem Sie das Skript erfolreich gestartet haben, wird die erste Eingabeaufforderung angezeigt. Sie werden aufgefordert, die Breite des Layouts einzugeben, das für Ihr Webdesign verwendet werden soll.

Ich habe standardmäßig eine Breite von 960px verwendet. Wenn Sie also an dieser Stelle keinen bestimmten Wert eingeben, wird 960px verwendet. Sie können eine beliebige Breite eingeben, diese sollte jedoch idealerweise eine gerade Zahl sein. Wenn Sie einen ungeraden Wert eingeben, z. B. 955, werden bei den Berechnungen im Skript Bruchzahlen gerendert. Das heißt, Bruchteil eines Pixels, was bei Positionierungshilfen nicht möglich ist. Selbst wenn wir diesen Bruchwert abrunden würden, hätten wir keine 100% genauen Positionen für die Führungen.

Schritt 3: Verwendung der Anzahl der Spalten

Nachdem Sie bei der ersten Eingabeaufforderung auf "Eingabetaste" geklickt haben (oder nach dem Festlegen der Layoutbreite auf OK klicken), wird die nächste Eingabeaufforderung angezeigt, in der Sie aufgefordert werden, die Anzahl der Spalten einzugeben, die Sie in Ihrem Layout verwenden möchten. Standardmäßig verwende ich 12 Spalten.

Schritt 4: Verwendung der Ränder und Dachrinne

Schließlich wird eine dritte Eingabeaufforderung angezeigt, für die ein Wert für die Ränder erforderlich ist (der Abstand zwischen den Grenzen und den äußeren Spalten). Dieser Wert wird dann verdoppelt, um den Rinnenraum zu erhalten, wie dies bei 960-Rastersystemen der Fall ist.

Schritt 5: Verwenden Sie das Ergebnis

Nachdem Sie in allen drei Eingabeaufforderungen Werte angegeben haben, werden in Ihrem Dokument Hilfslinien angezeigt, die in Form von Spalten angeordnet sind. Wenn Sie dort keine Hilfslinien sehen, haben Sie wahrscheinlich die Sichtbarkeit für Hilfslinien deaktiviert. Sie können ihre Sichtbarkeit wiederherstellen, indem Sie auf Ansicht > Anzeigen > Hilfslinien (Strg +;) klicken.

Im obigen Bild sehen Sie Spalten, Ränder und Rinnenraum. Diese Farben sollen nur veranschaulichen, was was ist. Rote Farben zeigen Spalten; Weiß für Dachrinne und Grün für Ränder. Tatsächlich erhalten Sie diese Farben nicht; führt einfach wie im folgenden Bild.

Jetzt sind wir mit der Verwendung dieses Skripts vertraut. Mal sehen, wie wir es tatsächlich mit JavaScript schreiben können!

Schritt 1: Entwicklung der Prüfung für Dokument

Bevor wir mit der Skripterstellung beginnen, müssen wir wissen, ob in der Anwendung ein Photoshop-Dokument geöffnet und aktiv ist. Wir überprüfen es unter folgenden Bedingungen:

1

 if ( app.documents.length != 0 ) 

2

 { 

3

4

 //Our entire code will go here 

5

6

 } else { 

7

8

 //No active document exists

9

10

 }

Wir werden den gesamten folgenden Code in diese ersten geschweiften Klammern setzen und unser Skript mit der Klammer } wie oben beenden.

Schritt 2: Entwicklung der konvertierenden Einheiten

Unsere erste Aufgabe wird es sein, die Maßeinheiten des Photoshop-Dokuments in Pixel umzuwandeln - wir müssen beim Entwerfen für das Web pixelgenau sein!

1

//This shall set  measuring units of document to Pixels.

2

  preferences.rulerUnits  = Units.PIXELS;

Schritt 3: Entwicklung der Dokumentsbreite

Als Nächstes bestimmen wir die Abmessungen des Photoshop-Dokuments.

1

var doc = app.activeDocument; //save reference of active document to variable "doc" for easy typing later on

2

  var docWidth = doc.width; //gets the width of the document

3

and stores it in "docWidth"

Dieses Rastersystem ist unabhängig von der Höhe des Dokuments. Wir müssen es daher nicht abrufen.

Schritt 4: Entwicklung des horizontalen Zentrums

Jetzt müssen wir die horizontale Mitte des Dokuments oder die Dokumentbreite finden. Wie machen wir das? Einfach; Teilen Sie die Dokumentbreite durch zwei.

1

var docXcenter = docWidth / 2 ;

An diesem Punkt ist es vielleicht nicht klar, warum ich dieses Zentrum evaluiere, aber im weiteren Verlauf werde ich seine Verwendung in unserem Skript beschreiben.

Schritt 5: Entwicklung der Benutzermessungen

An dieser Stelle müssen wir den Benutzer nach der gewünschten Layoutbreite, der Anzahl der Spalten und dem Rinnenabstand fragen.

Beispielsweise verwendet 960gs die folgenden festen Kombinationen:

• Layoutbreite: 960px
• 1. Kombination: 12 columns : 10px outer margin : 20px inner gutter
• 2. Kombination: 16 columns : 10px outer margin : 20px inner gutter
• 3. Kombination: 24 columns : 5px outer margin : 10px inner gutter

Wir erzielen klarere Ergebnisse, wenn wir standardmäßig eine dieser Kombinationen (sagen wir die erste) verwenden.

1

// Get layout width from user. Default  to 960px.

2

var layoutWidth = Number ( prompt ( 'Enter layout width:' , 960 ) ) ;

3

 // This gets number of columns from user. Most appropriately 12,16, or 24. Default 12 columns. 

4

  var cols = Number ( prompt ( 'Enter numbers of columns:' , 12 ) );

5

// Gets margins from left right from user. Which will  later be doubled to get gutter. Default 10px

6

  var margin = Number ( prompt ( 'Enter space between columns:' , 10 ) );

Was genau ist Prompt()?

Okay, bevor wir weiter gehen, schauen wir uns zunächst an, was genau "prompt" ist.

1

prompt ("Message to user here", "Default value here");

Die Eingabeaufforderung zeigt dem Benutzer einen Dialog mit einer Nachricht und einem Eingabefeld wie folgt:

Der Benutzer gibt die erforderliche Eingabe ein. An diesem Punkt gibt die Eingabeaufforderung diese Eingabe zurück.

Der erste Teil der Eingabeaufforderung (der vor dem Komma angezeigt wird) fügt eine Nachricht in einen Dialog für den Benutzer ein. Wir können Benutzer über den Eingabetyp, gültige Werte usw. informieren. Zum Beispiel;

1

prompt("Enter number of columns. Appropriate values are 12, 16, 24.", 12);

Der zweite Teil der Eingabeaufforderung ist der Standardwert für den Eingabeaufforderungsdialog. Bei Spalten verwenden wir hier 12 als Standardwert.

Und was ist mit Number()?

Number ist eine Methode, die Zahlen aus der angegebenen Eingabe extrahiert. Wenn der Benutzer etwas anderes als eine Zahl eingegeben hat (z. B. einen Namen oder eine andere Zeichenfolge), gibt die Methode eine NaN (keine Zahl) zurück. Diese Hygiene stellt sicher, dass Sie nur den Datentyp "Nummer" erhalten, der in bestimmten Situationen, in denen nur Zahlen funktionieren, unerlässlich ist.

Die erste Zeile erhält den Wert der Layoutbreite. Die eigentliche Sache der Website wird innerhalb dieser Breite liegen. Da wir 960gs verwenden, ist der Standardwert 960px, aber Sie können ihn auf eine beliebige Breite ändern.

In der zweiten Zeile erhalten wir die Anzahl der Spalten, die unser Benutzer in seinem Layoutdesign haben möchte. 960gs verwendet 12, 16 oder 24 Spalten, da sie sehr effektiv arbeiten, aber keinesfalls obligatorisch sind.

In der dritten Zeile erhalten wir den Raum, der zwischen den Spalten und an den Grenzen des Layouts liegt. Dieser Raum dient normalerweise als Dachrinne zwischen den Spalten.

Schritt 6: Entwicklung der Berechnung von Dachrinne und Zentrum

1

var gutter = space * 2; 

2

//Calculates the horizontal center of the layout and so the center of document 

3

  var layoutHalf = layoutWidth / 2 ;

Hier wird der Rinnenraum berechnet und der variablen gutter zugeordnet. In der zweiten Zeile berechnen wir die Hälfte der Layoutbreite, die wir durch Benutzereingaben erhalten. Mit anderen Worten, die horizontale Mitte unseres Layouts.

Schritt 7: Entwicklung des Definierens der Grenzen

In den ersten beiden Zeilen dieses Codeabschnitts berechnen wir die Position der linken und rechten Grenze unseres Layouts. Wir bezeichnen diese als äußere Grenzen; Die linke Grenze ist minLimitOuter und die rechte Grenze ist maxLimitOuter.

In den folgenden zwei Zeilen berechnen wir die inneren Grenzen unseres Layouts. Dies ist effektiv unsere Layoutbreite abzüglich der Rinnenbreite. Stellen Sie sich den Rand vor, der direkt innerhalb der Layoutbreite liegt.

1

  //outer limits that is the layout width;

2

  var maxLimitOuter = docXcenter + layoutHalf;

3

var minLimitOuter = docXcenter - layoutHalf;

4

5

  //Inner limits for 960gs

6

  var minLimitInner = minLimitOuter + space;

7

  var maxLimitInner = maxLimitOuter - space;

Hier kommt die Definition von docXcenter, über die wir zuvor gesprochen haben. docXcenter ist das Zentrum unserer gesamten Dokumentbreite. Wir müssen das bewerten, um Dinge um die Mitte des Dokuments zu platzieren. Wir werden keine Hilfslinie in die Mitte stellen, aber wir brauchen sie, um andere Elemente zu positionieren.

Was ist layoutHalf? Dies ist die Hälfte der vom Benutzer definierten Breite des Layouts. Wir haben diese Breite in zwei Hälften geteilt, damit wir jede Hälfte auf beiden Seiten von docXcenter platzieren können. Von hier aus können wir die Position der Hilfslinien am linken und rechten Rand des Layouts bestimmen.

Die Position der linken Hilfslinie wäre (Mitte des Dokuments - Hälfte der Layoutbreite) und daher wäre die Führung am rechten Rand (Mitte des Dokuments + Hälfte der Layoutbreite).

Schritt 8: Entwicklung der Spaltenbreite

Hier berechnen wir die Breite jeder Spalte. Diesen Wert benötigen wir später, wenn wir den Vorgang "Anleitung hinzufügen" wiederholen.

1

 var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;

Schritt 9: Entwicklung des Hinzufügens der Leitfäden zu äußeren Grenzen

Endlich kommen wir zu unserem ersten eigentlichen Schritt "Hinzufügen von Anleitungen"! Hier fügen wir zwei Hilfslinien an den Layoutgrenzen hinzu. unsere äußeren Grenzen.

1

doc.guides.add ( Direction.VERTICAL , minLimitOuter );

2

doc.guides.add ( Direction.VERTICAL , maxLimitOuter );

Die erste Zeile fügt unserem Dokument eine vertikale Hilfslinie an den Positionen von minLimitOuter, dem linken Rand des Layouts, und maxLimitOuter, dem rechten Rand des Layouts, hinzu.

Lassen Sie mich etwas mehr über die obigen Codezeilen erklären.

1

 doc.guides.add(Direction.VERTICAL/HORIZONTAL, position)

Diese Zeile fügt unserem Photoshop-Dokument tatsächlich Anleitungen hinzu. "doc" ist einfach der Verweis auf unser derzeit aktives Dokument. "guides" ist ein Objekt von Klassenhandbüchern, das im Dokument enthalten ist und für das Verhalten und die Eigenschaften von Hilfslinien in einem Photoshop-Dokument verantwortlich ist. "add" ist eine Methode für Klassenhandbücher, die unserem Dokument Leitfäden hinzufügt.

doc.guides.add() ist eine Methode, die nur zwei Parameter benötigt. Die erste ist die Richtung der Führung, die vertikal oder horizontal sein kann. Der zweite Parameter ist einfach die Position der Führung. Wenn Sie Ihre Einheiten auf Pixel einstellen, wird davon ausgegangen, dass der an den 2. Parameter übergebene Wert Pixel oder ein anderer Wert ist.

Schritt 10: Entwicklung der ersten Schleife

Die erste Schleife befasst sich mit unserer ersten Gruppe von Führern und inneren Grenzen:

1

  for ( i = 0 ; i < cols ; i++ ) {

2

  guidPos = minLimitInner + ( ( colWidth + gutter ) * i );

3

  if ( guidPos > maxLimitInner ) {

4

  break;

5

  }

6

  doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

7

  }

Schauen wir uns das an. Wir wiederholen (Schleife) unseren Code "cols" mal, da dies die Anzahl der Spalten ist, die unser Benutzer verwenden möchte. In diesem Code werden wir auch unsere inneren Grenzen hinzufügen.

Die erste Zeile nach der Startzeile "for" ist eine Variable "guidPos" für die Führungsposition. "minLimitInner" stellt sicher, dass die Position unseres ersten Leitfadens von minLimitInner ausgeht. die inneren Grenzen. Dann multiplizieren wir die colWidth und die Rinne mit "i", das 0 bis "cols" mal iteriert wird. Auf diese Weise fügen wir dem Dokument unsere erste Gruppe von Leitfäden hinzu. Diese Hilfslinien befinden sich links von jeder Spalte.

Dann prüfen wir in der zweiten Zeile, ob der guidPos-Wert den maxLimitInner überschreitet. die rechte innere Grenze des Dokuments. Wenn ja, bricht es aus der Schleife aus. Wenn diese Bedingung nicht erfüllt ist, wird die Schleife fortgesetzt, bis die Bedingung erfüllt ist.

In der dritten Codezeile werden die Hilfslinien einfach an der Position von guidPos zum Dokument hinzugefügt.

Schitt 11: Entwicklung der zweiten Schleife

Zeit, sich mit unserer zweiten Gruppe von Führern zu befassen.

1

for ( j = 0 ; j < cols ; j++ )

2

	{

3

if ( j == 0 ) 

4

{ multiply = 0

5

  }

6

  else

7

  {

8

  multiply = 1;

9

  }

10

11

temp_gutter = ( gutter * multiply ) ;

12

guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );

13

 if ( guidPos > maxLimitInner ) 

14

{

15

  break;

16

  }  

17

doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

Mit wenigen geringfügigen Unterschieden fügt dieser Code Hilfslinien an den rechten Rändern unserer Spalten und an der rechten innern Grenze hinzu.

Hier ist der vollständige Code:

1

if ( app.documents.length != 0 ) 

2

{ 

3

    preferences.rulerUnits = Units.PIXELS;

4

    var layoutWidth = Number ( prompt ( ' Enter layout width: ' , 960 ) );

5

    var cols = Number ( prompt ( ' Enter numbers of columns: ' , 12 ) );

6

    var space = Number ( prompt ( ' Enter space between columns: ' , 10 ) );

7

8

    var doc = app.activeDocument;

9

    var docWidth = doc.width;

10

    var docXcenter = docWidth / 2;

11

12

13

    var gutter = space * 2; //gutter space

14

    var layoutHalf = layoutWidth / 2;

15

16

17

    //outer limits that is the layout width;

18

    var maxLimitOuter = docXcenter + layoutHalf;

19

    var minLimitOuter = docXcenter - layoutHalf;

20

21

22

    //Inner limits for 960gs

23

    var minLimitInner = minLimitOuter + space;

24

    var maxLimitInner = maxLimitOuter - space;

25

26

    var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;

27

28

29

    doc.guides.add ( Direction.VERTICAL , minLimitOuter );

30

    doc.guides.add ( Direction.VERTICAL , maxLimitOuter );

31

32

33

    for ( i = 0 ; i < cols ; i++ )    

34

    {    

35

        guidPos = minLimitInner + ( ( colWidth + gutter ) * i );

36

37

        if ( guidPos > maxLimitInner )

38

        { 

39

            break;

40

        }

41

42

        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

43

44

    }

45

46

47

48

    for ( j = 0 ; j < cols ; j++ ) 

49

    {

50

        if ( j== 0 )

51

        {

52

            multiply = 0

53

        }

54

55

        else

56

        {

57

            multiply = 1;

58

        }

59

60

        temp_gutter = ( gutter * multiply );

61

62

        guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );

63

64

        if ( guidPos > maxLimitInner ) 

65

        {

66

            break;

67

        }

68

        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

69

    }

70

71

    }// end-if app.documents.length

72

73

    else

74

    {

75

       alert ( " No active document exists " );

76

      }

Obwohl dieses Skript möglicherweise Fehler und Nachteile enthält, bestand das Ziel darin, Ihnen anhand eines praktischen Beispiels ein wenig über JavaScript für Photoshop beizubringen. Sie haben es vielleicht gar nicht verstanden, aber ich hoffe, es hat zumindest Ihre Neugier geweckt. Wenn Sie Fragen haben, können Sie diese gerne in den Kommentaren hinterlassen.