Wie erstelle ich mehrere Schaltflächen in großen Mengen mit Gimp?

Ich versuche, einen "Satz" von Schaltflächen zu erstellen. Eigentlich kann ich die Knöpfe einigermaßen leicht machen.

In GIMP habe ich eine Vorlage (Es ist ein Rechteck… soooo kompliziert).

  • Vorlage nehmen, Text zum Textfeld für Schaltfläche eins hinzufügen und speichern.
  • Ändern Sie die Textfarbe für Schaltfläche eins und speichern Sie sie. (Unterschiedliche Farben für Mouseover).
  • Nehmen Sie eine Vorlage, fügen Sie einen anderen Text für die Schaltfläche zwei hinzu und speichern Sie sie
  • … (Sie können sehen, wohin das führt)
  • Ändern Sie die Textfarbe für die Schaltfläche TWENTY… ugh…

Was ich also herauszufinden versuche, ist: Wie kann ich mehrere JPEGs gleichzeitig erstellen? Massenerstellung. Bei einer Vorlage (deren Schriftart, Größe, Farbe usw. ich ändern kann) könnte ich auf „Erstellen“ klicken und bam , ich habe 40 Bilder.

Beispielschaltflächen unten. Jeder Button ist ein JPEG in zwei Paaren: weiße Schrift, gelbe für Mouseover.

Tasten

Ist das für eine Website? Wenn ja, posten Sie ein Beispiel ... Sie könnten dies besser mit CSS tun, als ein einzigartiges Bild für jede Schaltfläche zu erstellen.
Soweit mir wenig Googeln sagt, hat Gimp eine Art Slicing, ähnlich wie Photoshop docs.gimp.org/en/python-fu-slice.html
Das sind wirklich einfache Schaltflächen und wären unglaublich einfach in HTML und CSS allein zu generieren – es sind überhaupt keine Bilder erforderlich (was Ihnen Zeit und die Download-Geschwindigkeit Ihrer Benutzer sparen sollte). Lassen Sie mich wissen, wenn Sie dabei Hilfe wünschen.
@ DA01 Wohl wahr ... Das würde die Neucodierung einer ASP-Website erfordern, die vor Jahren von jemand anderem erstellt wurde. Und hoffentlich wird es in Zukunft durch eine Drupal-basierte Seite ersetzt. Ehrlich gesagt, sind die Tastenänderungen selten genug, dass es einfacher ist, sie einfach manuell zu machen, wie ich es bei atm tue. Dies ist weitgehend akademischer Natur.
@Lollero Ich muss mir Slice ansehen ... Grafikbearbeitung ist neu genug für mich, dass ich die Begriffe zum Googlen meistens nicht kenne.
"Hoffentlich wird es in Zukunft durch eine Drupal-basierte Seite ersetzt" Hmm ... viel Glück. Drupal ist oft nicht unbedingt eine Verbesserung. ;)
@WernerCD hrm... Von Bildlinks würde ich wirklich abraten, auch wenn es nur vorübergehend ist. :S Sie sehen normalerweise wirklich nicht gut aus und eine Stilregel könnte möglicherweise sogar schneller eingerichtet sein.

Antworten (3)

Unten ist ein "einfaches" Skript-Fu, das zwei Ebenen-"Teilmengen" nimmt und das "Kreuzprodukt" davon macht und ein PNG für jede Kombination exportiert. Wir haben dies verwendet, um eine große Anzahl solcher "Schaltflächen"-Bilder zu erstellen.

Zum Beispiel:

  1. Hintergrund-1
  2. Hintergrund-2
  3. Hintergrund-3
  4. Vordergrund-1
  5. Vordergrund-2

Faktor 1 = "Hintergrund" und Faktor 2 = "Vordergrund" Erstellt 6 exportierte PNGs.

Beachten Sie auch, dass Sie zusätzliche sichtbare Ebenen haben können, z. B. Schlagschatten, und diese werden in jedes exportierte PNG kopiert. Stellen Sie einfach sicher, dass Sie die Sichtbarkeit der Ebenen wie gewünscht einstellen und speichern Sie, bevor Sie das Skript ausführen.

Dies wird nicht unterstützt. Wenn Sie sich mit Scheme oder Programmierung nicht auskennen, sind Sie wahrscheinlich besser dran, die manuelle Arbeit zu erledigen. Wenn Sie interessiert sind oder S-Ausdrücke einfach lieben, gibt dieses Skript einige Diagnosen aus und enthält einige Kommentare. Wenn Sie also die Skriptkonsole einschalten, können Sie einige Ausgaben sehen.

Kopieren Sie den folgenden Text in „export-pngs.scm“ und legen Sie diese Datei in Ihrem GIMP-Ordner „User“ scripts ab, unter Windows 7 „/Users/ yourusername /.gimp-2.6/scripts“. Wenn Sie GIMP neu starten, gibt es einen neuen Befehl File|Create|Create PNGs .

Bitte bitte bitte (das ist 3) Namensnennung beibehalten!

(define (script-fu-export-pngs filename outputfolder basename factor1 factor2)
    (let*
        (
        (image (car (gimp-file-load RUN-NONINTERACTIVE filename filename)))
        (layerinfo (gimp-image-get-layers image))
        (layerarray (cadr layerinfo))
        (layers (vector->list layerarray))
        (layers-f1 (matching-layers layers factor1))
        (layers-f2 (matching-layers layers factor2))
        )
(gimp-message (string-append "layers-f1=" (layer-list layers-f1)))
(gimp-message (string-append "layers-f2=" (layer-list layers-f2)))

        (gimp-image-undo-disable image)
        (layers-visible (append layers-f1 layers-f2) FALSE)
        (for-each
            (lambda (layer-f1)
                (for-each
                    (lambda (layer-f2)
                        (let*
                            (
                            (output-filename (string-append outputfolder "/" basename "_"
                                (car (gimp-drawable-get-name layer-f1)) "_"
                                (car (gimp-drawable-get-name layer-f2)) ".png"
                            ))
                            )
                            (output-png image layers (list layer-f1 layer-f2) output-filename)
                        )
                    )
                    layers-f2
                )
            )
            layers-f1
        )
        (gimp-image-undo-enable image)
        (gimp-displays-flush)
    )
)
; set visibility of all layers in the list
; layers: layer list.
; vis: TRUE or FALSE.
(define (layers-visible layers vis)
    (for-each
        (lambda (layer)
            (gimp-drawable-set-visible layer vis)
        )
        layers
    )
)
; top-level save-as-PNG
; image: source image.
; layers: layer list.
; layer-factors: current-factors list.
; output-filename: full path to save.
(define (output-png image layers layer-factors output-filename)
    (let*
        (
        (width (car (gimp-image-width image)))
        (height (car (gimp-image-height image)))
        (type (car (gimp-image-base-type image)))
        (output (car (gimp-image-new width height type)))
        )
(gimp-message (string-append "output-filename=" output-filename "\noutput-image=" (layer-list layer-factors)))
        (gimp-image-undo-disable output)
        (output-image
            layers
            layer-factors
            (lambda (layer)
                (let*
                    (
                    (new-layer (car (gimp-layer-new-from-drawable layer output)))
                    )
;(gimp-message (string-append "add-layer " (car (gimp-drawable-get-name new-layer))))
                    (gimp-drawable-set-visible new-layer TRUE)
                    (gimp-image-add-layer output new-layer 0)
                    (gimp-image-lower-layer-to-bottom output new-layer)
                )
            )
        )
        (file-png-save2
            RUN-NONINTERACTIVE output
            (car (gimp-image-merge-visible-layers output CLIP-TO-IMAGE))
            output-filename output-filename
            FALSE 9 FALSE FALSE FALSE FALSE FALSE FALSE TRUE
        )
        (gimp-image-delete output)
    )
)
; traverse layers and call add-layer as necessary
; layers: layer list.
; layer-factors: current-factors list.
; add-layer: function to add selected layers.
(define (output-image layers layer-factors add-layer)
    (let*
        ()
        (for-each
            (lambda (layer)
                (let*
                    (
                    (layer-visible (car (gimp-drawable-get-visible layer)))
                    )
                    (cond
                        ((contains? layer layer-factors) (add-layer layer))
                        ((= layer-visible TRUE) (add-layer layer))
                    )
                )
            )
            layers
        )
    )
)
; scan layer list for layer-names starting with the prefix
; layers: layer list.
; prefix: starting prefix of layer name.
(define (matching-layers layers prefix)
    (let*
        (
        (output '())
        )
        (for-each
            (lambda (layer)
                (let*
                    (
                    (layer-name (car (gimp-drawable-get-name layer)))
                    )
                    (if (match-prefix? layer-name prefix) (set! output (append output (list layer))))
                )
            )
            layers
        )
        output
    )
)
; return #t/#f if target starts with the prefix
; target: target string to match.
; prefix: starting prefix.
(define (match-prefix? target prefix)
    (let*
        (
        (numchars (min (string-length prefix) (string-length target)))
        (pfx (substring target 0 numchars))
        )
        (string-ci=? pfx prefix)
    )
)
; return #t/#f if item exists in the list
; layer: target layer.
; layers: layer list.
(define (contains? layer layers)
    (let*
        ((retv #f))
        (map
            (lambda (lx)
                (if (eqv? lx layer) (set! retv #t))
            )
            layers
        )
        retv
    )
)
; create comma-delimited list of layer names
; list: layer list.
(define (layer-list list)
    (let*
        ((buf ""))
        (for-each
            (lambda (lx)
                (set! buf (string-append (car (gimp-drawable-get-name lx)) "," buf))
            )
            list
        )
        (if (> (string-length buf) 0)
            (set! buf (substring buf 0 (- (string-length buf) 1)))
        )
        buf
    )
)
(script-fu-register
    "script-fu-export-pngs"
    "Create PNGs"
    "Create PNGs from 2 layer subsets"
    "escape-llc"
    "CC 3 Attribution"
    "2009-11-13"
    ""
    SF-FILENAME "Image Filename" ""
    SF-DIRNAME "Output Folder" ""
    SF-STRING "Base Name" ""
    SF-STRING "Factor 1" "color"
    SF-STRING "Factor 2" "glyph"
)
(script-fu-menu-register "script-fu-export-pngs" "<Image>/File/Create")

GIMP unterstützt Ebenen, also basic ideamüssten Sie eine einzelne Ebene für die Schaltfläche erstellen, eine Ebene für jede Farbe mit einem Mischmodus, um diese einzelne Schaltflächenebene einzufärben, und dann einzelne Ebenen für Text. Sie schalten die Sichtbarkeit jeder Textebene der Reihe nach um und eine einzelne Farbebene für den Schwebezustand usw.

GIMP unterstützt auch Skripting, daher ist es denkbar, dass man eine einzelne Textebene und ein Skript hat, das den Text ändert, jeden Farbzustand durchläuft, ein JPG von jedem exportiert und dann mit neuem Text wiederholt.

Ich verwende GIMP nicht, daher kann ich nicht genauer sein. Ein Trick für viele Programme (aber nicht alle) besteht darin, eine Reihe von Schritten mit einem beliebigen eingebauten Makrosystem aufzuzeichnen und dann die Schritte zu bearbeiten und eine Schleife darum zu wickeln.

GIMP hat etwas namens Script-Fu, mit dem Sie die meisten Aufgaben in Scheme automatisieren können. Ich persönlich mache jetzt kein Scheme, daher kann ich Ihnen selbst kein Skript zur Verfügung stellen, aber die Dokumentation für Script-Fu wäre ein guter Ausgangspunkt. Wenn Sie entscheiden, dass die Verwendung von Script-Fu eine akzeptable Lösung ist, können Sie sich einige grundlegende Tutorials ansehen, um Ihnen den Einstieg zu erleichtern.

Ich muss jedoch hinzufügen, dass Sie es wahrscheinlich besser von Hand tun sollten, wenn Sie nur ein paar Dutzend Schaltflächen erstellen und Scheme nicht kennen, denn vorausgesetzt, Sie haben Ihre Ebenen effizient eingerichtet, sollte dies nicht der Fall sein dauert so lange.