Icons für Desktop und Web

Wir zeichnen mit dem Abgerundetes-Rechteck-Werkzeug ein Rechteck, das oben und unten beinahe rund ist. Die Rundung können wir bei gehaltener Maustaste mit den Pfeiltasten (nach oben: runder; nach unten: spitzer) beeinflussen.
Wir duplizieren die Form, indem wir sie mit dem Auswahlwerkzeug und gedrückter alt-Taste verschieben.

Wir aktivieren das Frei-Transformieren-Werkzeug (rot markiert) und verformen das zweite Rechteck perspektivisch (zweites Icon). Das zweite abgerundete Rechteck soll oben schlanker sein als unten.

Wir schieben das erste, unveränderte abgerundete Rechteck mit dem Auswahl-Werkzeug über das zweite verformte abgerundete Rechteck.
Dabei achten wir darauf, dass es ungefähr die Mitte überschneidet und etwas schräg zu stehen kommt.

Wir löschen den überstehenden Bereich mit dem Form-Erstellen-Werkzeug weg, indem wir bei gedrückter Maustaste die alt - Taste gedrückt halten (ein Minuszeichen erscheint neben dem Werkzeug-Symbol) und ziehen das Werkzeug in die Fläche, die weggelöscht werden soll.
Wir gruppieren die entstandenen Objekte.

Wir bringen mit dem Ellinpse-Werkzeug zwei kleine Kreise (für die Augen) an. Diese beiden Kreise gruppieren wir.

Wir klicken einmal auf das Polygon-Werkzeug (welches sich unter den geometrischen Werkzeugen befindet). Jetzt erscheint das Polygon-Optionsfeld.
Hier geben wir 3 Seiten ein. Der Radius ist egal.

Ein Dreieck wird erstellt. Wir drehen es mit dem Auswahlwerkzeug und gedrückter Shift - Taste auf den Kopf. (Wenn wir die Shift-Taste drücken, rastet das Objekt nach jeweils 45° Drehung ein).

Wir aktivieren das Direkt-Auswahl-Werkzeug (rot markiert) und wählen einen der Kreise, die bei den drei Ecken ercheinen, an. Diesen Kreis ziehen wir einwenig gegen die Mitte (etwa so wie in der Abbildung links).

Diese Form stauchen wir mit dem Auswahl-Werkzeug noch etwas zusammen. Sie soll später die Nase des Hundegesichtes geben.

Wir platzieren die Nase in das Hundegesicht. Dabei achten wir darauf, dass wir mit dem Objekt die vertikale Mittelachse treffen und etwas unter der horizontalen Mittelachse bleiben.

Wir zeichnen mit dem Zeichnen-Werkzeug (rot markiert) eine Linie auf der vertikalen Mittelachse. Diese Linie beginnt am unteren Pfadende der Nasenform und hört am unteren Ende der Hundegesichtform auf.

Wir zeichnen mit dem Buntstift-Werkzeug (rot makriert) ein Hundeohr.
Wir stellen das Buntstift-Werkzeug zuvor ein. dazu klicken wir zweimal auf das Icon des Werkzeuges (oder betätigen einmal die Return-Taste bei aktiviertem Werkzeug) und stellen im nun erscheinenden Bedienfeld die Genauigkeit auf "glatt" ein.

Wir betätigen den Befehl Menu / Objekt / Transformieren / Spiegeln und geben im Bedienfeld eine vertikale Spiegelung ein.
Aber aufgepasst: nicht mit OK , sondern unbedingt mit Kopieren bestätigen, damit wir am Schluss zwei Ohren haben.

Wir platzieren die Ohren ungefähr an ihren Platz und gruppieren sie.
Jetzt haben wir folgende Objektgruppen: Gesicht mit angeschnittener Fläche, Augen, Ohren. Zusätzlich haben wir folgende Einzelobjekte: Linie und Nase.

Wir wählen alle Objekte auf dieser Ebene aus (mit dem Auswahlwerkzeug überfahren oder mit cmd + A) und aktivieren im Steuerbedienfeld "An Auswahl ausrichten". Dann betätigen wir das Icon für die vertikale Zentrierung. Jetzt werden alle Objekte zusammen eingemittet. Gruppierungen gelten dabei als eigene Objekte.

Wir öffnen die Farbpalette und kreiieren einen hellen Braunton für das Hundegeischt und einen dubklen Braunton für Ohren, Nase und Auge.
Wir färben die Form mit dem Interaktiv-Malen-Werkzeug ein. Dazu müssen alle Formen ausgewählt sein.

Die Konturen aller Objekte färben wir dunkelbraun ein. Ausser beim rechten Auge, wo wir die Kontur ganz weglassen.
Wir schliessen die fertige Illustration auf ihrer Ebene ab.

Wir zeichnen auf einer neuen Ebene ein Rechteck und mit dem Zeichenstift-Werkzeug zeichnen wir gleich noch eine Linie.
Tipp: bevor wir den zweiten Punkt setzen, drücken wir die Shift-Taste. so wird der Punkt vertikal auf derselben Position gesetzt.

Diese Linie dubplizieren wir, indem wir sie bei gedrückter alt -Taste mit dem Auswahlwerkzeug etwas weiter nach rechts ziehen. Diesen Vorgang können wir beliebig oft wiederholen, indem wir cmd + D aktivieren.

Die ganze Reihe ziehen wir als Gruppe wieder bei gedrückter alt -Taste mit dem Auswahlwerkzeug nach unten.

Wir löschen einzelne Linien, verkürzen andere Linien und setzen ein Rechteck ein. So erinnert das Rechteck an eine Zeitung.

Wir färben die Zeitung ein und schliessen die Ebene ab.

Wir öffnen eine neue Ebene und zeichnen ein Rechteck. Mit dem Zeichenstift-Werkzeug ziehen wir eine Linie von der linken oberen Ecke zur Mitte und zur rechten oberen Ecke.

Mit dem Direkt-Auswahl-Werkzeug ziehen wir die Spitze noch etwas nach unten. Wir können auch die ganze Form etwas nach unten ziehen, wenn wir wollen.

Wir färben den Brief ein und ergänzen mit dem Zeichenstift-Werkzeug die unteren Schnittlinien.

Als Kontrast können wir die obere Fläche etwas dunkler einfärben. Dann können wir entweder die ganze Form wieder hochschieben oder mit dem Zeichenstift-Werkzeug schliessen (einfach in einen Endpunkt klicken und auf die Positionen des darunter liegenden Rechtecks klicken, bis die Form geschlossen ist).

Wir verleihen den Objekten eine dunkle Kontur.

Wir wenden uns noch einmal dem Hund zu: Wir wählen die Form an und betätigen den Befehl Menu / Objekt / Umwandeln. Damit wandeln wir die Form von einer Interaktiven-Malgruppe in normale Formen und können sie weiter bearbeiten.

Wir wollen nämlich noch die überstehenden Konturreste bei den Ohren weglöschen. Wir wählen sie mit dem Direktauswahl-Werkzeug aus und löschen sie mit der Delete-Taste.

Jetzt haben wir auf drei Ebenen die drei Illustrationen: Hund, Brief und Zeitung.

Wir stellen die Objekte in die richtige Postition und ordnen die Ebenen übereinander an (Hund, darunter Brief, darunter Zeitung).

Wir öffnen alle Ebenen und wählen alle Objekt aus und kopieren sie (cmd + C).
Wir setzen sie genau am selben Ort in eine neue oberste Ebene ein (cmd + F) und schliessen die anderen Ebenen wieder.
Wir fügen die Objekte mit dem Pathfinder-Bedienfeld (erstes Icon "Zusammenfügen") zu einem Objekt zusammen.

Wir färben das Objekt durkelbraun ein. Dann erstellen wir ein Rechteck darüber, welches die zusammengefügte Form in der Mitte überschneidet.
Wir schneiden die Objekte mit dem Pathfinder-Bedienfeld (zweites Icon "Vorderes Objekt abziehen").

Die Transparenz dieses Objektes stellen wir im Steuerbedienfeld so zurück, dass es zum Schatten des Hundes wird.

Wir exporiteren die Zeichnung und betätigen den Befehl Menu / Datei / Exportieren / Exportieren als ….

Wir bestimmen den Speicherort und lassen das Optionskästchen "Zeichenfläche verwenden" inaktiv.

Wir stellen die Ausgabeoptionen auf 300dpi und transparente Hintergrundfarbe ein.

Wir öffnen die Website iconverticons.com und wählen die Online-Variante.

Wir ziehen unsere png-Datei in das vorgesehene Feld auf iconverticons.com.

Diese Dateien hat nun dieser Webdienst aus unserer Datei hergestellt: weitere png's, sowie ico- (Windows, Linux und Mac) und icns-Dateien (Mac).
Diese Dateien können wir als favicons, als kleine Logos auf einer eigenen Website und als Ordnerbilder auf unserem Computer brauchen.

Wir packen sie nach dem Download in einen gemeinsamen Ordner.

• 1: Im Informationsfenster zu einem Ordner können auf Mac Bilddateien (4) eingefügt werden.
• 2: Der Ordner mit dem neuen Ordnerbild auf dem Desktop
• 3: Das ist der Ordner mit den png-Dateien. Die kleinste davon (16x16px) eignet sich als favicon-Datei.
• 4: Diese Datei können wir als Ordnerbild einsetzen.
• 5: Diesen ordner entpacken wir und erhalten Datei 4.
• 6: Diese Datei können wir unter Windows als Ordnerdatei einsetzen.