Anzeige
Tutorialbeschreibung

Schloss als Icon bauen

Schloss als Icon bauen

In folgender Übung bauen Sie ein realistisch wirkendes Vorhängeschloss, welches sich als Icon verwenden lässt.



Icons sind kleine Bilder, die ein Programm, ein Dokument oder auch einen Link (Verweis) repräsentieren. Per Doppelklick auf das Icon startet dann das Programm oder es öffnet sich der entsprechende Link.
Icons haben mehrere Standardgrößen; die kleinste Größe umfasst eine Fläche von 16 x 16 Pixel. Damit ein solches Bild auch in dieser Größe „funktioniert“, also erkennbar ist, sollte es eine relativ einfache Grundform zeigen und mehr oder weniger quadratisch sein, damit die Fläche optimal genützt wird.

Legen Sie eine neue Datei an. Öffnen Sie die Dokumenteinstellungen und geben Sie bei Format unter Benutzerdefiniert jeweils 300 Pixel (px) bei Höhe und bei Breite ein.

Bilder

Wählen Sie Datei > Importieren; hier das Bild „Schloss.jpg“. Schieben Sie es auf die Zeichenfläche; es hat die gleichen Maße und passt somit exakt auf die voreingestellte Seite.

Bilder

Generell ließe sich bereits dieses Bild als Icon verwenden; es füllt nahezu perfekt ein Quadrat aus und zeigt eine einfache, auch in der Verkleinerung erkennbare Form. Überprüfen Sie das Bild in den verschiedenen, für ein Icon relevanten Größen; Wählen Sie Ansicht > Icon-Vorschaufenster ...; es öffnet sich am rechten Bildschirmrand und zeigt alle Icon-Größen – von 16 x 16 bis zur größten Variante 128 x 128.
Zwar ist der Gegenstand recht gut zu erkennen, wirkt jedoch in schwarz/weiß etwas langweilig. Zudem erscheinen die Kanten nicht gestochen scharf. Hier lohnt es sich, eine farbige Vektorgrafik zu erstellen!

Bilder

Per Ebene > Ebenen ... öffnen Sie die Ebenenpalette. Nennen Sie die bestehende Ebene 1 um in „Vorlage“ und sperren Sie diese. Mit einem Klick auf das + in der Ebenenpalette fügen Sie eine neue Ebene hinzu. Nennen Sie die neue Ebene „Grundformen“ und wählen Sie als Position > Über aktueller.

Bilder

Zeichnen Sie mit etwa sieben Knoten die Umrandung der Oberfläche des Schlosses.

Bilder

Aktivieren Sie die neue Form mit dem Auswahlwerkzeug. Öffnen Sie den Dialog Füllung und Kontur und wählen Sie bei Füllung den linearen Verlauf; die Fläche ist mit einem Verlauf von der, zuletzt gewählten Farbe zu Transparent gefüllt.

Bilder

Mit einem Klick auf Bearbeiten öffnen Sie den Farbverlaufs-Editor. Ändern Sie hier den Verlauf von einem dunklen zu einem hellen Goldton. (Vergessen Sie nicht die Transparenz (A) auf 255 (deckend) zu setzen!). Ändern Sie zudem mit dem Farbverlaufswerkzeug die Verlaufsrichtung von links unten nach rechts oben.

Bilder

Aktivieren Sie die Oberfläche des Schlosses mit dem Auswahlwerkzeug. Wählen Sie Effekte > Aus Pfad erzeugen > Extrudieren. Geben Sie die gezeigten Werte ein und überprüfen Sie diese mit der Live-Vorschau. Mit Apply wenden Sie die Extrusion an.

Bilder

Um die drei einzelnen Randstücke anwählen zu können, wählen Sie zweimal Objekt > Gruppierung aufheben. Wählen Sie die drei Formen einzeln und stellen Sie im Dialog Füllung und Kontur bei Farbe der Konturlinie jeweils Nicht zeichnen ein.

Bilder

Wählen Sie mit gedrückter Shift-Taste alle drei Teile, dann Pfad > Vereinigung. Sie haben nun statt drei Teilen nur noch ein Randstück.

Bilder

Färben Sie das Randstück dunkel ...

Bilder

und duplizieren Sie ihn.

Bilder

Färben Sie das Duplikat hell und geben Sie der Unschärfe einen Wert von 4. Verkleinern Sie das Duplikat, indem Sie dreimal Pfad > Schrumpfen wählen.

Bilder

Schieben Sie nun die Deckfläche des Schlosses etwas beiseite; darunter liegen weitere, durch die Extrusion entstandene Seitenteile, die durch die Oberfläche verdeckt waren.

Bilder

Blenden Sie in der Ebenen-Palette die „Vorlage“ aus ...

Bilder

... löschen Sie die verdeckten Teile und schieben Sie die Deckfläche wieder auf das Schloss zurück. Stellen Sie im Dialog Füllung und Kontur bei Farbe der Konturlinie > Nicht zeichnen ein. Justieren Sie den Verlauf; fügen Sie eventuell eine Zwischenfarbe über den Verlaufseditor hinzu. Geben Sie der Unschärfe einen Wert von 2.

Bilder

Die scharfe Kante der Oberfläche oben und am rechten Rand bildet ein Duplikat: geben Sie der Unschärfe einen Wert von 0, verschieben Sie es etwas nach rechts oben und wählen sie Objekt > Absenken um es in der Reihenfolge nach unten zu schieben.

Bilder

Blenden Sie die „Vorlage“ wieder ein. Sperren Sie die „Grundformen“ und blenden Sie diese Ebene aus. Legen Sie eine weitere Ebene darüber für das Schlüsselloch und die Nieten.

Bilder

Ziehen Sie einen Kreis auf. Geben Sie der Kontur einen linearen Verlauf in Goldtönen; die Füllung zeigt einen eher grauen radialen Verlauf. Passen Sie hier die Verlaufsrichtung an die Beleuchtungsrichtung an! Wählen Sie zudem eine Konturstärke von 3,000 und eine Unschärfe von 4,0.

Bilder

Für die Verdeckung des Schlüsselloches ziehen Sie eine weitere, längliche Ellipse auf. Als Füllung wählen Sie Nicht zeichnen, die Kontur soll etwa 1 pt stark sein und eine kräftige Farbe zeigen.

Bilder

Drehen und stauchen Sie das Objekt, bis es in etwa das Schlüsselloch umkreist. Wählen Sie dann Pfad > Objekt in Pfad umwandeln.

Bilder

Zupfen Sie nun mit dem Knotenwerkzeug die vier Knotenpunkte und deren Greiferlinien wie gezeigt in Form.

Bilder

Füllen Sie die Form ebenfalls mit einem Verlauf und setzen Sie diese hinter die zuvor geformte Niete (Objekt > Absenken). Beim weiteren Formen können Sie die Ebene „Grundformen“ zum Überprüfen einblenden.

Bilder

 Sperren Sie die Niete über der Schlüssellochform; klicken Sie mit der rechten Maustaste darauf und wählen im Kontextmenü die Objekteigenschaften.

Bilder

Über Effekte > Aus Pfad erzeugen > Extrudieren geben Sie der Form eine Tiefe. Wählen Sie hier bei Stärke 5. Bearbeiten Sie das, nun drei-dimensionale Objekt in der gleichen Weise wie Sie es bereits mit dem Körper des Schlosses getan haben.
INFO: Die goldene Spiegelung auf der Oberfläche ist ein Duplikat der Deckfläche mit einem Unschärfewert von 10 und dem goldenen Verlauf des Schlosses, welcher mit dem Farbverlaufswerkzeug angepasst wird!

Bilder


Bilder

Ein weiteres Duplikat bildet, nach unten abgesenkt, den Schatten. Geben Sie ihm eine Unschärfe von 15,0 und setzen Sie die Deckkraft auf 80,0 herab.

Bilder


Bilder

 

Gruppieren Sie alle Elemente des Schlüsselloches und senken Sie die Gruppe ganz nach unten ab: die Niete erscheint wieder.
(((27)))

Wählen Sie Objekt > Alles entsperren und bilden Sie mit dem Duplikat der Niete einen Schatten. Gruppieren Sie Niete und Schatten.

Bilder

Blenden Sie die Ebene „Grundformen“ aus. Setzen Sie drei Duplikate der Niete an die entsprechenden Stellen. Bearbeiten Sie die Nieten: sie haben keine Kontur, sind etwas kleiner und zeigen einen Verlauf, der im Mittelpunkt einen leichten Goldton hat. Blenden Sie die Ebene „Grundformen“ zum Überprüfen wieder ein und vergrößern Sie die einzelnen Nietenschatten. Achten Sie darauf, auf welcher Höhe sich die Elemente befinden und senken Sie die Schatten nach Bedarf um eine Stufe nach unten ab.

Bilder

Sperren Sie alle Ebenen und legen Sie eine neue Ebene „Bügel“ an. Sie soll sich zwischen der Vorlage und den Grundformen befinden.

Bilder

Blenden Sie die „Grundformen“ aus und ziehen Sie einen Kreis ohne Füllung auf der neuen Ebene auf. Achten Sie darauf, dass die beiden seitlichen Knoten auf der Kante des Schlosses liegen.

Bilder

Duplizieren Sie die Form und verkleinern Sie das Duplikat, sodass sich die zweite Kontur auf der Innenkante des Bügels befindet.

Bilder

Selektieren Sie beide Konturen zusammen und wählen Sie Pfad > Differenz. Geben Sie der neuen Form als Füllung ein dunkles Grau und wählen Sie bei Farbe der Konturlinie Nicht zeichnen.

Bilder

Duplizieren Sie den dunklen Bügel-Ring. Färben Sie das Duplikat mit einem linearen Verlauf von Weiß nach transparent. Wählen Sie dreimal Pfad > Schrumpfen und geben Sie der Unschärfe einen Wert von etwa 4,5. Passen Sie mit dem Farbverlaufswerkzeug den Verlauf der Beleuchtung entsprechend an. Verschieben Sie zudem die Form etwas nach rechts oben.

Bilder

Ein weiteres, etwas verkleinertes Duplikat mit einem linearen Verlauf von Gelb nach transparent und einer, auf ca. 70 reduzierten Deckkraft bildet die goldene Spiegelung.

Bilder

Bilden Sie über der „Vorlage“ eine letzte Ebene „Schatten“. Duplizieren Sie die unterste form des Bügels. Wähen Sie dann Ebene > Auswahl zur darunterliegenden Ebene verschieben. Das Duplikat liegt nun auf der „Schatten“-Ebene.
Wählen Sie zudem auf der Ebene „Grundformen“ die Deckfläche sowie das Seitenteil des Schlosses. Duplizieren Sie beides und wählen Sie zweimal Ebene > Auswahl zur darunterliegenden Ebene verschieben um auch dese Elemente auf die der „Schatten“-Ebene zu verschieben.
Die Schattenebene sieht nun so aus:

Bilder

Wählen Sie alle Elemente, dann Objekt > Vereinigung. Wählen Sie einen Unschärfe-Wert von etwa 6 und färben Sie den Schatten schwarz. Verschieben Sie ihn nach links unten.

Bilder

Wählen Sie Ansicht > Icon-Vorschaufenster ...; das fertige Icon sieht dann so aus:

Bilder


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Euphorion
  • 05.12.2010 - 12:44

Liegt vielleicht daran, dass die neuere Version einiges durcheinander bringt:
Das mit den Farben ging nicht so wie es sollte.
Das "Extrudieren" ist jetzt wo ganz anders und erlaubt keine Regler mehr;
das Endergebnis fällt somit doof aus.

Und wenn alles klappen würde, würde ich mir mehr Erklärung wünschen.
Wieso ich bspw. bei Extrudieren dies oder jenes wähle etc., da ich sonst "einen Fisch bekommen habe, anstatt das man mir beibringt zu Fischen" :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.11.2008 - 17:32

gut gemacht, nur leider suche ich ein 32x32 tutorial

Portrait von didi1977
  • 09.10.2008 - 09:21

ein schön beschriebens tut, für anfänger wirklich nicht als einstieg zu empfehlen

Portrait von Duststorm
  • 27.08.2008 - 10:43

Als totaler Einsteiger, sehr schwer an Manchen Stellen.

Portrait von dollares
  • 01.06.2008 - 21:26

sehr schönes tutorial

Portrait von Jack7000
  • 01.06.2008 - 16:56

brauchbares Tutorial danke

Portrait von xxhawk12x
  • 31.05.2008 - 10:09

Saubere Arbeit echt Klasses Tutorial du bist einer derjenigen die einen formal Ansprechen mit Sie, die Rechtschreibung simmt auch dafür erst mal 2 Sterne von mir und dann hasst du in diesem Tutorial auch noch Werkzeuge benutzt die ich noch niemals in meinem Photoshopleben genutzt habe, vielen Dank.

Mfg.: H4wk

Portrait von siousu
  • 29.05.2008 - 21:40

sehr schön!
finde dieses hier: http://psdtuts.com/designing-tutorials/create-a-shiny-lock-icon-design/
aber ein bisschen besser :)
trotzdem 5Punkte, da es für Inkscape ist^^

gruss

Portrait von tom6969
  • 29.05.2008 - 13:27

genial gemacht, die frau hat ahnung

Portrait von AdinaT
  • 29.05.2008 - 12:08

schön gemacht und gut erklärt!!!!!!!!!!!

Portrait von bose1707
  • 29.05.2008 - 07:58

Viele Details, Super so kann ich als Anfänger auch noch mithalten. Klasse

Portrait von skyflight1981
x
×
×