Profil ansehen
Nachricht schreiben
Als FreundIn hinzufügen

Web 2.0 Button mit Inkscape erstellen

Kreis zeichnen
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....

Formgröße ändern
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...

Farbverlauf zeichnen
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ße...

Schatten zeichnen
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 Fusszeil...

Glanz auflegen
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 Krei...

⇐

⇒

Schritt 4 / 7 - Schatten zeichnen

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.

weiter mit: Glanz auflegen ⇒