Herumspielen mit Dingbats und The Gimp

ArticleCategory: [Es gibt verschiedene Artikel Kategorien]

Graphics

AuthorImage:[Ein Bild von Dir]

TranslationInfo:[Autor und �bersetzer]

AboutTheAuthor:[Eine kleine Biographie �ber den Autor]

Katja ist die deutsche Redakteurin von LinuxFocus. Sie mag Tux, Film, Fotografie und das Meer. Ihre Homepage befindet sich hier.

Abstract:[Hier sollte eine kleine Zusammenfassung stehen]

In diesem Artikel gebe ich einige Beispiele, wie man durch Benutzen von Dingbats und The Gimp gut aussehende Bilder kreieren kann. Die in diesem Artikel benutzte Version von Gimp ist Gimp-1.2.2.

ArticleIllustration:[Das Titelbild des Artikels]

ArticleBody:

Was sind Dingbats?

Wahrscheinlich bist du Dingbats schon mal begegnet, als du das Textwerkzeug von Gimp benutzt hast. Dingbats sind Fonts. Wenn du verschiedene Fonts ausprobiert hast, bist du wahrscheinlich auf Fonts gesto�en, die z.B. dingbats, davysdingbats oder davysotherdingbats hie�en und keine normalen Buchstaben waren, sonderen kleine Zeichnungen von Blumen, einem Klavier, Tieren etc. Vielleicht hast du dich dann gefragt, was du mit ihnen machen k�nntest. Aber normalerweise will man, wenn man das Textwerkzeug benutzt, Text einf�gen und wenn man sp�ter nach einem coolen Motiven sucht, hat man sie schon wieder vergessen. Aber denk noch mal nach. Sie k�nnen dir wirkich helfen, sehr gut aussehende Bilder in kurzer Zeit zu kreieren und du brauchst daf�r auch kein besonderes Zeichentalent zu haben.

Wo kann ich sie herbekommen?

In diesem Artikel benutze ich haupts�chlich Dingbats, die im Sharefontspaket mit dabei sind (davysdingbats, davysotherdingbats..), da ich glaube, da� viele von euch sie bereits installiert haben, aber ich werde auch ein paar Icons von anderen Dingbats zeigen, die ich toll fand. Es gibt wirklich tonnenweise coole und tolle Dingbats, die du vielleicht installieren m�chtest.
Du kannst die Sharefonts von http://ibiblio.org/pub/Linux/X11/fonts/ herunterladen und unter http://www.fontguy.com findest du eine Sammlung mit anderen Dingbats.
Lies André Pascuals Artikel �ber Freefont, TrueType und Muster mit The Gimp, um nachzulesen, wie man sie installiert.

Wie kann ich sie benutzen?

Nat�rlich kann man das normale Textwerkzeug benutzen, aber es existiert ein besonderes Werkzeug namens GDyntext, das hier vorzuziehen ist. Du findest GDyntext, wenn du mit der rechten Maustaste in ein Bild klickst
Filter --> Render --> DynamicText
Dadurch kannst du eine Vorschau auf die Icons bekommen und dann eins oder mehrere mit der Maus (so wie man etwas kopiert und pastet) selektieren oder, wenn du die Taste kennst, kannst du sie auch direkt eintippen..
In der Defaulteinstellung zeigt dir das Werkzeug schon die Buchstaben des Alphabets in Gro�-und Kleinbuchstaben an. Aber manchmal gibt es noch ein paar weitere Icons, die du z.B. durch Dr�cken von Sonderzeichen bekommst.
Eine andere M�glichkeit, die Icons einzuf�gen (und eine, die ich bevorzuge, wenn ich nach neuen Motiven suche) ist es, das CharMap Fenster zu benutzen, das du durch Dr�cken auf den Knopf, der sich ganz rechts oben im GDyntext Fenster befindet, bekommst. In der Charmap kannst du alle verf�gbaren Zeichen von einem Font sehen und kannst sie in dein Bild einf�gen. Links unten gibt es auch ein kleines Feld, wo du sehen kannst, welche Taste es ist.
Mit GDyntext kannst du auch die Gr��e der Icons einstellen, die hier viel gr��er sein kann als die verf�gbare Gr��e im Textwerkzeug. Von daher wirst du GDyntext vielleicht auch benutzen, wenn du Text in einer sehr gro�en Gr��e brauchst.
Du kannst auch die Farbe einstellen, die deine Dingbats haben sollen sowie sie rotieren oder bestimmen, wo sie sich im Bild positionieren sollen. Zun�chst ist die Farbe gleich mit der Vordergrundfarbe des Hauptmen�s von The Gimp, aber wenn sie sp�ter ge�ndert wird, hat dies keinen Effekt und man kann die Farbe auch im Werkzeug selber entsprechend ausw�hlen.
Der einzige Nachteil, den man mit diesem Tool hat, ist - zumindest auf meinem Computer (ich benutze Gimp1.2.2 unter Mandrake8.0) -, da� es manchmal Gimp zum Absturz bringen kann, wenn ich all die Tonnen an Spezialfonts geladen habe.

Was kann ich mit ihnen machen?

Vielleicht hast du dir die Dingbats inzwischen ja mal angeschaut. Nat�rlich gibt es ein paar Icons, wie z.B. den Fl�gel, die du so wie sie sind ohne irgendwelche �nderungen benutzen willst:

Fl�gel = davysotherdingbats: D, Delphin = critters by darrian: v, Pinguin = critters by darrian: u

oder bei einigen wie z.B. der Rose willst du vielleicht nur ein bi�chen Farbe hinzuf�gen:

[rose]

Rose = davysdingbats: k, Geigen = davysotherdingbats:5 ,Ostern = critters by darrian:Q, Schlumpf = Smurf:c

Aber vielleicht bist du bisher noch nicht wirklich �berzeugt, da� du aus ihnen ganz einfach einige sehr gut aussehende Bilder machen kannst. Aber es ist wirklich sehr einfach! Schon mit nur ein paar wenigen Mausklicks kannst du ein paar sch�ne kleine Bilder kreieren:

Benutzen von Gradienten

Oft sieht ein Icon schon sehr gut aus, wenn du es nur einfach mit einem Gradienten f�llst oder einen Gradienten als Hintergrund benutzt.
Gradienten in Gimp zu benutzen, ist sehr einfach. Um einen Gradienten aus nur zwei Farben zu bekommen, w�hlt man die zwei Farben, die man haben m�chte als Hintergrund- und Vordergrundfarbe. Jetzt einen Doppelklick auf den Gradientknopf (im Hauptfenster, siehe den Screenshoot rechts). Die Option unter Blend sollte: FG to BG (RGB) sein. Zieh jetzt eine Linie mit der Maus von rechts nach links in deinem Bild und das Bild wird mit einem Gradienten gef�llt. Die Optionen unter "gradient" legen fest, wie der Farbverlauf des Gradienten ist (z.B. linear). Durch Variieren der Richtung oder der L�nge der Linie, die du mit der Maus ziehst, beeinflu�t du ebenfalls, wie der Gradient in deinem Bild aussehen wird. Nat�rlich kannst du auch Gradienten mit mehr als zwei Farben benutzen. Klick auf File (im Hauptmen� von Gimp)-->Dialogs-->Gradients und du findest eine gro�e Auswahl an Gradienten. Wenn du einen davon benutzen willst, mu�t du nur auf ihn klicken, um ihn zu selektieren. Dann geh zur�ck zum Gradientenknopf und mache wieder einen Doppelklick. Die Blendoption mu� nun "Custom Gradient" sein. Dann mache es wie vorher und ziehe eine Linie mit der Maus �ber das Bild und es wird mit dem Gradienten gef�llt

Eigene Gradienten erstellen

Nat�rlich kannst du auch deine eigenen Gradienten erstellen. Um dies zu tun, klick wieder auf File-->Dialogs-->Gradients und w�hle einen Gradienten, der dem, den du erzeugen m�chtest, am n�chsten kommt. Dann klicke "Edit". Ein neues Fenster �ffnet sich. Klicke hier "Copy Gradient" und gib ihm einen beliebigen Namen. Jetzt siehst du ihn in der Liste der Gradienten, aber er sieht noch genauso wie der andere aus. Wir werden ihn jetzt editieren. Bleib im "Gradient Editor" Fenster. Unten siehst du ein gro�es Band mit den Farben des Gradienten. Darunter ist eine Zeile, wo du einige Dreiecke sehen kannst. Zwischen zwei schwarzen Dreiecken ist ein Abschnitt und man �ndert immer einen Abschnitt auf einmal. Um einen Abschnitt gr��er zu machen, kannst du einfach die Dreiecke zu dem Punkt ziehen, wohin du sie haben willst. Die Farbe des Bereichs mit einem dunkleren Grau k�nnen ge�ndert werden. Klicke in das Farbband mit einem rechten Mausklick und halte es gedr�ckt. Es gibt jetzt verschiedene Optionen, die du w�hlen kannst: Du kannst "Left endpoint's color" und "Right endpoints' color" sehen. Wenn du mit der Maus zu ihnen gehst, erh�lst du einen Farbkreis und kannst eine neue Farbe w�hlen. Der Endpunkt eines Abschnitts sollte diesselbe Farbe haben wie der Startpunkt des benachbarten Abschnitts, wenn du glatte �berg�nge zwischen den Farben haben willst. Nat�rlich gilt das nicht, wenn du eindeutig sichtbare Grenzen zwischen den Farb�nderungen haben willst. Durch Klicken auf "Blending function for section" kannst du den Farbverlauf bestimmen, also, ob die Farbe linear verlaufen soll, kreisf�rmig etc. Durch Klicken auf "Split segments at midpoint" kannst du den Abschnitt in kleinere Teile aufsplitten.

La�t uns jetzt ein paar Bilder anschauen:

[trompet]

Die Trompete ist von davysotherdingbats, Zeichen r. Ich habe ihr einen Gradienten mit einem gelben und orangenen Ton gegeben. (Stell sicher, da� die Trompete selektiert ist, da ansonsten das gesamte Bild mit dem Gradienten gef�llt wird.)

[rabbitonhat]

Der Hase auf dem Hut ist aus dem Font critters by darrian, Zeichen b, und ich habe ihn hellgrau ausgemalt. Auf einer neuen Ebene habe ich einen violet und einen grauen Ton als meinen Gradienten (grau= Vordergrundfarbe und violet= Hintergrundfarbe) gew�hlt. In der Mittte des Bildes habe ich eine diagonale Linie von einem h�heren zu einem niedrigeren Punkt (senkrecht zu der Linie, die du sehen kannst) von der L�nge des dunkleren violetten Tons gezogen.

[sunflower]

Die Sonnenblume besteht aus zwei Icons, beide von davysdingbats, Zeichen j und e. Ich habe den Stengel gr�n angemalt. F�r die Bl�te habe ich einen gelben und einen orangen Ton gew�hlt.

La�t uns jetzt ein Bild mit einem Gradienten, den ich selbst gemacht habe, anschauen:

[comeandjointhefun]

Zuerst habe ich den Text in dem Kreis erzeugt. Dazu bin ich ins Hauptmen� gegangen und habe auf Xtns (rechts neben File)--> Script Fu --> Logo --> Text in a circle geklickt. Hier habe ich den Text "Come and join the fun" eingetippt, aber als erstes Zeichen ein Leerzeichen gedr�ckt. Ansonsten w�ren das erste und das letzte Wort sehr nahe beieinander. Ich w�hlte als Radius 80, Start Angle 0 und Fill Angle 360. Als Fontgr��e w�hlte ich 25 und als Font Jayne Print. Die Textfarbe ist die Vordergrundfarbe aus dem Men�. Jetzt erh�lt man ein neues Bild. Ich l�schte den Hintergrund, f�gte eine neue Ebene hinzu und pastete die Pinguine hinein. Die Pinguine sind von critters by darrian,I. Dann habe ich erneut eine neue Ebene ge�ffnet, sie nach ganz unten bewegt und mit meinem selbstgemachten Gradienten gef�llt.

Wie w�r's mit einem Knopf?

[buttonwithmouseandco]

Ich habe ein helles und ein dunkles Blau als meine Vorder- und Hintergrundfarbe gew�hlt. Dann habe ich ein neues Bild mit einem wei�en Hintergrund ge�ffnet. In einer neuen Ebene selektierte ich einen gro�en Kreis mit dem Auswahlwerkzeug und f�llte ihn mit dem blauen Gradienten durch Ziehen einer Linie mit der Maus von links nach rechts. Ich kopierte die Ebene und reduzierte die Gr��e des Kreises in der neuen Ebene ein bi�chen. Dann habe ich ihn wieder mit meinem Gradienten gef�llt, aber dieses Mal habe ich die Linie von rechts nach links gezogen. Ich machte dasselbe mit einer dritten Ebene �ber den beiden anderen. Ich pastete den Kreis hinein und verkleinerte ihn und f�llte ihn mit dem Gradienten und zog dieses Mal wieder eine Linie von links nacht rechts. Nun pastete ich in einer weiteren Ebene �ber den anderen das Icon mit der Maus und der Blume (von critters by darrian,A). Dann rechter Mausklick in die Ebene Script Fu-->Shadow-->Drop-Shadow.

Script-Fu

Script Fus sind Skripte, so da� man einen Effekt mit einem Klick erzielen kann, f�r den man normalerweise mehrere Schritte brauchen w�rde. Man kommt zu Script-Fu entweder durch einen rechten Mausklick in ein Bild oder durch einen Klick auf Xtns (neben File oben im Hauptmen� von The Gimp). Es hei�t, da� man den rechten Mausklick ins Bild bei schon erstellten Bildern benutzen soll, w�hrend man durch Klicken auf Script Fu �ber Xnts ein neues Bild erstellen kann und bestimmen kann, welcher Textfont und welche Farbe benutzt werden sollen und welcher Text geschrieben wird.

La�t uns ein paar Bilder anschauen:

[rosewithchrome]

W�hle die Rose von davysdingbats,Zeichen k, und dann rechter Mausklick auf Script fu --> Alpha to Logo--> Chrome.

[grandpianogradientbevel]

W�hle den Fl�gel von davysotherdingbats, Zeichen D. Ich habe eine Gr��e von 140 benutzt. Dann rechter Mausklick ins Bild Script-Fu-->AlphatoLogo--> gradient bevel.

[catglossy]

W�hle die Katze aus davysotherdingbats, Zeichen 0 (null), und dann rechter Mausklick Script-Fu-->AlphatoLogo-->Glossy.

[pianoplaying]

Ich habe den Fl�gel von davysotherdingbats, D genommen, die zweite (rechte) Hand von davysotherdingbats, 2, (Man nimmt beide H�nde und radiert dann die erste (linke) weg und nimmt die rechte Hand zweimal) und den Kopf, ebenfalls von davysotherdingbats, 3. Dann plaziert man sie so, wie man es im Bild sehen kann. Ich spiegelte die H�nde horizontal und radierte die oberen Finger weg. Dann rechter Mausklick Script-Fu-->AlphatoLogo--> Textured.
Hier habe ich die folgenden Einstellungen benutzt:
Border Size (pixels):20
Pattern: hier benutzte ich ein Holzmuster
Mosaic Tile Type: Squares
Background Color: wei� (Hue: -1, Saturation:0, Value, Red, Green and Blue = 1)
Starting Blend: orange: hier ist es die Farbe, die als Vordergundfarbe in Gimp benutzt wird, hier ist es: H=29, S=73, V=91, R=234, G=147, B=61, HexTriplet:#ea933d
Ending Blend: gelb: Hue: 43.76, Saturation: 0.77, Value: 0.92, Red: 0.92, Green: 0.73, Blue: 0.21)

Hinzuf�gen einiger anderer Effekte...

Ich habe alles so, wie man es im Bild sehen kann, plaziert. Die T�nzer und der Klavierspieler sind von davysdingbats, L. Ich habe die Fahne vom Kopf wegradiert und ihn ausgemalt, wobei ich die H�nde wei� gemacht habe. F�r die Augen habe ich einen gro�en Pinsel genommen und zwei Punkte gemalt. Die Sterne sind beide gleich (dingbats, U), nur in unterschiedlichen Gr��en. Ich pastete den Stern auf eine Ebene und malte ihn aus. Dann �ffnete ich eine neue Ebene, kopierte und pastete ihn, spiegelte ihn horizontal und f�llte ihn mit der zweiten Farbe. Der Fl�gel ist von davysotherdingbats,D. Der Textfont ist amaze. Die Klaviertastatur ist von davysotherdingbats, e. Auf der Ebene unter der Klaviertastatur habe ich den Raum zwischen den Tasten mit einer wei�en Farbe ausgef�llt. Ich vereinigte dann die beiden Ebenen. Man macht dies, indem man die Augen der anderen, nicht Klaviertastaturebenen in der Ebenenbox unsichtbar macht (durch Klicken auf sie). Jetzt ist nur die Klaviertastatur sichtbar. Dann rechter Klick in das Bild Layers-->Merge visible layers und die Tastatur ist zu einer Ebene verschmolzen. Dann rechter Mausklick Filters-->Distorts-->IWarp. Hier deformierte ich die Tastatur mit den Optionen move und grow. Ich ging einfach �ber die Tastatur und deformierte sie bis ich zufrieden war. Jetzt mach die anderen Ebenen wieder sichtbar und rechter Klick Layer-->Merge visible layers. Dann rechter Mausklick Script Fu-->Alpha to Logo-->Blended (mit den Defaulteinstellungen).

[penguinsframe]

Ich nahm ein leeres Bild und dann rechter Klick ScriptFu-->Decor-->Add Border (default Werte). Dann wieder rechter Mausklick in das Bild ScriptFu-->Alpha to Logo-->Glossy. Dann habe ich nur noch die Gruppe von Pinguinen von critters by darrian, z hinzugef�gt.

[sunflowerswithcats]

Ich pastete die Klaviertastatur hinein (davysotherdingbats, e) und f�llte den Raum zwischen den Tasten mit wei� in einer neuen Ebene und verschmolz die beiden wie oben beschrieben. Dann rechter Mausklick in die Ebene mit der Klaviertastatur Filters-->Distorts-->CurveBend. Hier kannst du eine Kurve "designen", entlang der sich die Klaviertastatur biegen soll. Dann habe ich eine neue Ebene genommen und die beiden Katzen (davysotherdingbats, 0) hineingepastet und sie so gedreht, wie sie im Bild zu sehen sind, w�hlte einen gr�nen Ton und f�gte die Augen hinzu. Ich nahm eine neue Ebene und f�llte sie mit vielen der oben beschriebenen Sonnenblumen, so wie du es im Bild sehen kannst. Als Hintergrund habe ich einen Gradienten aus blau und gr�n gew�hlt.

[meadow]

Ich f�llte eine Ebene mit Sonnenblumen so wie im vorhergehenden Bild. Dann f�gte ich darunter eine neue Ebene hinzu und f�llte sie mit Sonnenblumen, deren Bl�ten mit einem roten Gradienten gef�llt sind. Wieder eine neue Ebene darunter, gef�llt mit Sonnenblumen mit einem violetten Gradienten und noch einmal, dieses Mal mit Sonnenblumen mit einem blauen Gradienten. F�r die gelb/orangen und violetten Sonnenblumen habe ich die Mitte der Bl�te mit gelb gef�llt. Die Sonnenblumen haben schon diese runde Form, deshalb f�ge einfach eine Ebene darunter hinzu und f�ll den Platz unter der Bl�te mit gelb und du erh�lst den Effekt. F�r die blauen und roten Sonnenblumen habe ich die ganze Mitte der Bl�te mit gelb gef�llt (ich habe �ber die andere Farbe gemalt). Als Hintergrund w�hlte ich eine gr�ne Gradientenf�llung.

[flowermeadow]

Dieses Bild ist so �hnlich wie das vorherige. Deshalb nimm das vorherige Bild und ersetze einfach den Hintergrundgradienten durch ein Hintergrundmuster, wobei ich das Muster mit den Bl�ttern gew�hlt habe. Dann klick auf die Ebene mit den blauen Sonnenblumen. Rechter Mausklick auf die Ebene Filter-->Map-->Fractal Trace (Warp und Defaulteinstellungen). Schlie�lich habe ich noch einige Stengel, die ich st�rend fand, ausradiert. Das ist alles.

Wahrscheinlich hast du jetzt schon viele Ideen, um weit gro�artigere Bilder zu kreieren als meine.
Viel Spa� und genie�e es! :-)

Referenzen

Die Webseite von Gimp:http://www.gimp.org
Eine Seite mit einer Menge cooler Ideen f�r 2D Graphiken: http://www.webreference.com/graphics