Inkscape/ Button (SVG-Editor)

Zurück zur Archivübersicht/zur Startseite

Dieses Tutorial stammt von Inky aus dem deutschen Inkscape-Forum und wurde von ihm unter die GFDL gestellt. Danke!

(Für eine neuere Fassung dieses Tutorials, die der Inkscape-Version 1.0.1 entspricht, siehe das Kapitel Glasbutton.)

Hier basteln wir uns einen Glas-Button, der irgendwie zu einer Art «hello-World» im Grafikbereich geworden ist. Um das Ergebnis gleich mal vorwegzunehmen bzw. dir den Mund ein bisschen wässrig zu machen, hier schon mal ein kurzer Blick auf das Ergebnis:

Einleitung

Nachdem wir in Inkscape mit 2D-Elementen wie Kreisen und Rechtecken arbeiten, müssen wir für einen schönen 3D-Effekt ein bisschen tricksen, um an unser Ziel zu kommen. Um einem Objekt Dreidimensionalität einzuhauchen, brauchen wir aus diesem Grund vor allem Licht- und Schattenffekte.

Damit zerfällt unsere Aufgabe in drei Teile bzw. Ebenen. Eine Ebene für die farbige Grundform, eine weitere für den Innenschatten der Grundform und dann natürlich der Lichtkegel bzw. die Reflexion der Lichtquelle auf der Oberfläche. Wenn wir diese drei Teile dann wie Folien übereinanderlegen, erhalten wir unseren Glasbutton. Später benötigen wir natürlich noch eine vierte Ebene, um unseren Button auch etwas anzeigen zu lassen. Dazu aber erst später.

Hintergrund

Starte Inkscape oder öffne mittels Ctrl+N eine neue leere Vorlage. Zum besseren Arbeiten kannst du durch Drücken der Taste 1 oder über Ansicht > Zoomfaktor > Zoomfaktor 1:1 die Ansicht vergrössern. Anschließend über das Menü Ebenen > Ebene umbenennen der aktuellen Ebene den Namen «Button» geben.

Nun links das Kreiswerkzeug ( F5 ) auswählen und bei gedrückter Ctrl Taste einen Kreis ziehen. Am besten erreichst du das, indem du die Maus diagonal nach rechts unten ziehst. Die Grösse spielt noch keine Rolle. Noch während der Kreis markiert ist, mit Umschalt+Ctrl+F oder über Objekt > Füllung und Kontur die Füllfarbe wählen. Gib im Feld «RGBA» zum Beispiel die Farbe 22e62fff oder f4dc16ff ein.

Sofern der Kreis eine Umrandung besitzt, klicken wir abschließend noch auf den zweiten Reiter «Linienfarbe» und deaktiveren die Außenlinie durch Klicken auf das Kreuz links oben. (erster Knopf von links). Damit sollte Schritt 1 abgeschlossen sein. Das Ergebnis sieht nun etwa so aus (hier mit geöffnetem XML-Editor):

Jetzt passen wir die Grösse des Dokuments und des Kreises an, zum Beispiel 300 Pixel. Um den XML-Editor kennenzulernen, machen wir es gleich damit – es ist gar nicht schwierig. Du bekommst ihn über Bearbeiten > XML-Editor oder mit Umschalt+Ctrl+X. Die Höhe und Breite des Dokumentes findest du zuoberst in den Parametern width und height.

Klicke auf das entsprechende Attribut, ändere den Wert und klicke auf Setzen. Nun wird der Kreis bearbeitet. Den findest du eine Ebene unter «id="layer1"» – am schnellsten siehst du das, wenn du den xml-Editor immer offen hast, denn dann siehst du, welcher Knoten neu dazu kommt. Die Position und Grösse des Kreises wird nun durch sodipodi:cx bzw. sodipodi:cy (c steht für center, als Zentrum, x bzw. y für die Achse) und sodipodi:rx bzw. sodipodi:ry (r für Radius) definiert. Damit der Kreis nun in der Mitte ist, setze das Zentrum je auf die Hälfte der Breite/Länge, also 150 px. Damit man später bei einer Verwendung z. B. im Internet etwas mehr Freiheiten hat, lassen wir einen Rahmen weg, das heisst der Radius des Kreises wird auch auf 150 px gesetzt. Das kann nun etwa so aussehen:

Dass der Kreis noch immer nicht in der Mitte ist, liegt an dem Attribut transform: Löschen wir es, ist wieder alles in Ordnung.

Jetzt rufen wir bei immer noch aktiviertem Kreis das Farbverlaufswerkzeug links auf und ziehen einen Farbverlauf von der oberen linken Ecke in die untere rechte des Dokuments:

Dupliziere anschließend den Kreis mit Ctrl+D, damit die Farben etwas stärker werden.

Schatten

Jetzt erstellen wir über das Menü Ebene > Ebene hinzufügen ... über der aktuellen Ebene eine neue Ebene und geben ihr den Namen «Schatten». Du wirst bemerken, dass das Dropdown-Feld in der Fusszeile von Inkscape automatisch auf die neu erstellte Ebene umspringt und dessen Namen zeigt.

Wähle nun mit dem Auswahlwerkzeug F1 nochmals den Kreis aus. Die Ebenenanzeige springt wieder auf die Button-Ebene. Wir kopieren entweder mittels Ctrl+C oder über Bearbeiten > Kopieren unseren Kreis in die Zwischenablage. Wechsle jetzt entweder über das schon erwähnte DropDown-Feld in der Fusszeile oder per Ebene > Zur darüberliegenden Ebene umschalten auf die neu erstellte Schatten-Ebene. Hier fügen wir per Ctrl+Alt+V oder Bearbeiten > An Originalposition einfügen die Kopie unseres Kreises aus der Zwischenablage wieder ein.

Farbverläufen werden im xml-Code eine ID vergeben, normalerweise in der Form linearGradient oder radialGradient, gefolgt von einer vierstelligen Nummer. Auf diese Weise kann mehreren Objekten der selbe Farbverlauf zugewiesen werden. Will man nun eine Farbe im Verlauf ändern, muss man das nur im jeweiligen Farbverlauf tun und nicht für alle Objekte einzeln. Will man ein Objekt, das dupliziert wurde (wie hier der Kreis) mit einem anderen Farbverlauf versehen, muss man dafür einen neuen Farbverlauf erstellen (hier durch duplizieren), da ansonsten alle Objekte, denen der Farbverlauf zugewiesen ist, mitverändert würden.

Öffne wieder den Dialog «Füllung und Kontur» per Shift+Ctrl+F. Der Farbverlauf ist hier der selbe wie für die anderen Kreise. Damit wir nicht den für alle bearbeiten, muss er zuerst dupliziert werden. Du siehst, dass die Nummer bei «linearGradient» wechselt. Nun kannst du den Verlauf bearbeiten. Ändere ihn auf Radial mit dem Icon rechts neben dem Linearen Verlauf. Setze nun die innere Farbe auf die selbe, die du schon für den Kreis verwendet hast – in diesem Beispiel f4dc1600 (gelb) – mit dem Unterschied, dass du die Transparenz auf 00 setzen musst (4dc1600). Für die Äussere wählst du ungefähr 000000c8.

Später wenn du fertig bist, kannst du mit diesem Wert einfach mal ein bisschen herumspielen, um zu sehen, wie sich der Innenschatten verändert.

Glanz

Dupliziere den Schatten mit Ctrl+D, schneide ihn mit Ctrl+X aus. Jetzt brauchen wir eine neue Ebene. Diesmal geben wir ihr den Namen «Glanz». Also wieder Ebene > Ebene hinzufügen .... Füge den Kreis in der Glanzebene über Einfügen > An Originalposition einfügen wieder ein. Eine Alternative, um einen neuen Verlauf zu erstellen, ist, im Dialog «Füllung und Kontur» unter «Füllung» zuerst auf das Kreuz (keine) zu klicken und dann auf den linearen Farbverlauf.

Wähle das Farbverlaufswerkzeug links oder mit Ctrl+F1 und ändere die Laufrichtung mit der Maus von oben nach unten, während du die Umschalt und die Ctrl Taste gedrückt hältst, und die Farben für den Verlauf oben weiss und unten transparent:

Wähle nun mit F1 das Auswahlwerkzeug aus. Jetzt hat unser Farbverlauf auf der Ebene «Glanz» acht Anfasspunkte, welche sich mit der Maus verschieben lassen. Schieb nun den rechten unteren Anfasspunkt bei gedrückter Ctrl + Umschalt Taste ein wenig nach links oben (diagonal sozusagen), um den Kreis um ein paar Pixel zu verkleinern. Drei, vier Pixel sollten ausreichen. Alternativ kannst du auch im xml-Editor den Radius um die gewünschte Grösse verkleinern. Das Ergebnis sollte dann ungefähr folgendermassen aussehen.

Jetzt den unteren, mittleren Anfasspunkt ohne Drücken einer zusätzlichen Taste mit der Maus nach oben bis etwas leicht über die Mitte des unteren Kreises schieben, damit du anschliessend folgendes Ergebnis erhälst.

Jetzt folgt im Prinzip schon der letzte Schritt, damit wir mit unserem Glassbutton fertig werden. Zieh den mittleren, rechten Anfasspunkt bei gedrückter Umschalt Taste in Richtung Kreisinneres, bis im oberen Bereich zwischen unserem Glanz und dem Aussenrand des unteren Kreises der Abstand überall ungefähr gleich ist. Damit ist die Grundform unseres Glasbuttons fertig:

Logo

Wenn Du noch ein Logo oder eine Beschriftung im Button anbringen willst, musst Du einfach eine weitere Ebene über der Button Ebene erstellen (aber unterhalb der Schatten- und Glanz-Ebene). Wechsel dazu am besten per Dropdown-Feld in der Fusszeile auf die Button Ebene und füge per Ebene > Ebene hinzufügen ... eine weitere Ebene hinzu. Gib der Ebene beispielsweise den Namen «Logo». Hier kannst du nun einfügen, was dein Button später anzeigen soll:

Spiel etwas mit der Grösse des Logos herum, denn es gilt nicht «je grösser, desto besser». Freier Raum ist ein wichtiges Gestaltungsmittel. Auch dieser Button ist nicht perfekt.

Um das Logo zu bearbeiten, kannst du natürlich die darüber liegenden Ebenen mit einem Klick auf das Auge neben dem DropDown-Feld ausschalten, nachdem du auf sie gewechselt hast. Falls du aber nur die Grösse oder die Position ändern musst, ist das zu umständlich. Klicke dazu bei gedrückter Alt-Taste auf den Kreis. Achte dabei auf das DropDown-Feld in der Fusszeile. Mit jedem Mausklick (bei gedrückter Alt-Taste) wechselst du immer eine weitere Ebene tiefer. Wenn du ausserdem ein weiteres Objekt direkt über dem Logo hast, kannst du die Alt-Taste gedrückt halten. Ziehst du nun mit der Maus, wird das ausgewählte Objekt (hier das Logo) verschoben, egal, was unter der Maus ist.

Wenn Du es bis hierher geschafft hast, aber immer noch experimentierfreudig bist, spiel doch einfach ein wenig mit den Farben des Kreises auf der Button-Ebene herum. Alternativ kannst Du auch mit dem Farbverlauf der Schattenebene experimentieren, und einmal versuchen, weitere «Verlaufsschritte» hinzuzufügen, um zu beobachten, wie sie das fertige Ergebnis beeinflussen.

Oder du änderst die untere Farbe beim Farbverlauf für den Glanz ein wenig zur Hintergrundfarbe hin. Am besten geht das, wenn du die Hintergrundfarbe mit dem Hexcode eingibst und dann die Helligkeit in der «HSL»-Darstellung der Farbe erhöhst.

Viel Spass beim Ausprobieren!