Gimp Tut: Webdesign web 2.0 Banner
In diesem Tut möchte ich auf eine praxisbezogene Arbeit mit gimp eingehen. Dabei möchte ich eine Art Banner in gimp erstellen, der für das Web 2.0 tauglich sein soll. Was bedeutet nun web 2.0? Ganz einfach, im Prinzip handelt es sich um Grafiken und Darstellungsweisen, die runder und nicht mehr flach und eben sind. Web 2.0 bedeutet abgerundete Kastendarstellungen d.h. Buttons oder abgerundete Banner. Zudem sollen die web 2.0 Grafiken eine 3-D Wirkung auf den Betrachter ausüben. Das bedeutet sie haben Schatten und wirken etwas erhaben anstatt flach.
Gimp bietet einfache Werkzeuge um die web 2.0 Gestaltung in die Bilder oder Grafiken einwirken zu lassen. Im folgenden möchte ich anhand eines Beispiels eine kleine Fotobearbeitung vornehmen, indem ich Bildobjekte freilege und diese in einen Banner integriere, welcher web 2.0 Grundzüge aufweisen soll.
Schritt 1 gimp Tut:
Vorab öffne ich mir eine neue Datei, in welcher der Banner später erstellt werden soll. Dazu unter gimp-Menü „Datei“ > „Neu“. Dort gebe ich die Bildgröße ein z.B. 600 x 200 Pixel.
Schritt 2 gimp Tut:
Nun öffne ich die Dateien, welche die benötigten Bildobjekte beinhalten. In diesen Bilddateien markiere ich die benötigten Objekte mit dem Auswahlwerkzeug. Dazu kann man das Lassowerkzeug, wie Zauberstab, magische Schere,Vordergrundauswahl, Schnellmaske oder ein anderes Auswahlwerkzeug hernehmen. In meinem Fall nehme ich den Zauberstab und markiere eine Sonnenblume, welche Teil meines Banners werden soll. Diese Sonnenblume kopiere ich nun in das neue Bannerbild. Dort erstelle ich aus dem eingefügten Objekt eine Ebene. Da nehme ich über das Ebenenfenster vor – oder über das Menü „Ebene“ > „neue Ebene“.
Schritt 3 gimp Tut:
Wer möchte, kann in dem Banner beliebig viele Objekte aus anderen Photos oder Bildern einfügen. Der Einfachheit halber benutze ich einige Pinselobjekte, die ich ebenfalls ein meinem Banner platzieren möchte. Aber bevor man das Bild mit Objekten versieht, ist darauf zu achten stets für jedes Objekt eine neue Ebene zu erstellen, damit man im Nachhinein das Bild auch bearbeiten kann. In diesem Fall lege ich eine neue Ebene über den ganzen Hintergrund. Im übrigen versehe ich den Hintergrund im nächsten Schritt mit einem Farbverlauf von grün nach weiß. Dazu klicke ich auf den Farbverlauf-Button des gimp Werkzeugkastens und wähle dort die entsprechenden Farben aus. Die Sonnenblume erhält noch einen Schlagschatten, um dem Bild mehr Ausdruckskraft zu verleihen.
Schritt 4 gimp Tut:
Nachdem ich noch einige Pinselobjekte in das Bild integriert habe schreibe ich mein Logo in den Banner. Dazu klickt man auf den Text-Button des gimp Werkzeugkastens und wählt dort die entsprechende Textfarbe und Textgröße aus. Anschließend kann man das Logo mit dem „Verschieben“ - Werkzeug an die richtige Stelle positionieren. Auch beim Text kann man Effekte einbauen. Dafür eignen sich selbstverständlich Schatten und Linseneffekte. Ich wähle in dem Fall den Xach-Effekt, der unter „Filter“ > „Licht und Schatten“ > „Xach-Effekt“ zu finden ist. Wer mit seinen Logos etwas spielen möchte kann es mit Effekten unter „Filter“ > „Alpha aus Logo“ probieren.
Schritt 5 gimp Tut:
Im Prinzip kann man an dieser Stelle das Bild im xcf-Format speichern. Denn in den nachfolgenden Schritten erfolgt lediglich die Feinarbeit und die Ausrichti
ung an das web 2.0 Design. Als erstes möchte ich also abgerundete Kanten bei meinem Bild haben. Dazu füge ich vorab alle Bildelemente zusammen über das Menü „Bild“ > „Bild zusammenfügen“. Anschließend klicke ich auf den Menüpunkt „Filter“ > „Dekoration“ > „Rand abschrägen“. Dort wähle ich die Dicke des Randes aus, der abgeflacht oder abgerundet erscheinen soll. Anschließend bearbeite ich das Bild, dass sich aus dem „Rand abschrägen“-Modus ergeben hat mit der Funktion „Filter“ > Dekoration > „Runde Ecken“. Dort gebe ich den Radius ein, aus dem die Rundung der Ecken berechnet wird. Hier ist darauf zu achten, dass dieser Wert nicht zu hoch eingestellt wird, um die Abrundung der Kanten nicht zu sehr abzuschneiden.
Das war im Prinzip die grobe Vorgehensweise, wenn man einen Banner oder eine Collage in gimp erstellen möchte, die einen völlig anderen Hintergrund haben soll, als die Anfangsbilder. Ich hoffe, diese Schritt- für Schrittanleitung kann Interessierten eine kleine Hilfe sein.