Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

März 22nd, 2010 | von Ivo Mynttinen | Design, Tutorials

Ende nächsten Monats sollen die ersten iPads die deutsche Käuferschaft beeindrucken, Grund genug für uns schon jetzt einen ansprechenden Icon vom größeren Bruder des iPhones zu erstellen. In diesem Tutorial wird jeder einzelne Schritt ausführlich erklärt, es sollte also auch Einsteigern möglich sein in kurzer Zeit einen vielfältig verwendbaren Icon des iPads in Fireworks CS4 zu erstellen.

Das Ziel

Das Ergebnis
Wir wollen einen edlen iPad Icon erstellen, der dem Original in nichts nachsteht.

  • Vorraussetzungen: Adobe Fireworks CS4
  • Schwierigkeit: Leicht
  • Benötigte Zeit: etwa 20 Minuten

Schritt 1: Gehäuse

Nachdem wir ein neues Fireworksdokument in ausreichenden Maßen geöffnet haben werden wir zunächst die Vorderseite des iPads zeichnen. Hierzu verwenden wir das Rechteck-Werkzeug (U) und ziehen uns ein ausreichend großes Rechteck auf der Leinwand auf. Dieses Rechteck soll die silberne Hinterseite des iPads darstellen. Um den gewünschten Effekt in Fireworks zu erstellen setzen wir die Hintergrundfarbe des Rechtecks auf Weiß und die Farbe des Randes auf ein helles Grau, außerdem setzen wir die Eckrundung auf 8%. Um nun noch einen leichten “3D-Effekt” zu erzeugen fügen wir den Filter “Inneres Glühen” mit folgenden Eigenschaften hinzu:

  • Breite: 2
  • Deckkraft: 15%
  • Weichheit: 3
  • Farbe: Schwarz

Rundes Rechteck in Fireworks CS4
Nun werden wir ein zweites, etwas kleineres Rechteck erstellen, welches wir über dem Weißem Rechteck anordnen. Als Hintergrundfarbe wählen wir diesmal Schwarz. Zum Abschluss fügen wir noch einen leichten Schatteneffekt mit Hilfe des “Glühen”-Filters hinzu.Rechteck zentriert in Fireworks CS4

Schritt 2: Button

Verlauf ButtoniPhone Button in FireworksWie wir unseren Referenzbildern auf apple.com entnehmen können hat das iPad ähnlich wie das iPhone einen runden Knopf unterhalb des Displays. Diesen erstellen wir in Fireworks mit dem Ellipse-Tool (U). Als Füllkategorie verwenden wir einen Linearen Verlauf. Nun fügen wir noch das Symbol welches sich auf dem Button befinden muss hinzu. Hierzu erstellen wir ein Rechteck dessen Hintergrundfarbe wir auf Transparent setzen. Die Randfarbe hingegen setzen wir auf ein helles Grau und erhöhen außerdem die Pinselstärke noch auf 2. Zum Abschluss setzen wir die Rundung des Rechtecks noch auf 50%.

Schritt 3: Hintergrundbild

Wir möchten nun ein Hintergrund auf das Display kopieren, hierzu könnt ihr grundsätzlich jedes beliebige Bild nehmen dessen Maße ausreichend sind. Ich habe in diesem Tutorial dieses Hintergrundbild verwendet, welches auch mit dem iPad ausgeliefert werden soll. Das Hintergrundbild schneiden wir zunächst auf die richtige Größe zu und zentrieren es anschließend auf dem von uns zuvor erstellten Display.iPad Hintergrund

Schritt 4: Das Dock

Neigen in 3D Perspektive
Schatten in Fireworks CS4Wir wollen nun das für Apple Betriebssysteme typische Dock erstellen. Hierzu verwenden wir ein Rechteck mit der Hintergrundfarbe #999999 und einer Deckkraft von 60%. Außerdem weisen wir dem Rechteck noch den Filter “Rauschen” mit der Intensität 2 zu. Da das Dock nach hinten geneigt sein sollte verwenden wir das Neigen-Werkzeug (Q) und neigen das soeben erstellte Rechteck freihand. Um noch einen leichten Schatteneffekt zu erzielen fügen wir dem nun geneigten Rechteck einen Schlagschatten hinzu.
Nun wollen wir auf dem Dock noch einen Glanzeffekt hinzufügen. Hierfür zeichnen wir mit dem Stift-Werkzeug (P) eine leicht geschwungene Form, der wir anschließend noch den Mischmodus “Ineinanderkopieren” sowie eine Deckkraft von 20% zuweisen. Für den letzten Touch erstellen wir eine dünne Ellipse in der ungefähren Breite des Docks. Den Füllungsrand der Ellipse setzen wir auf “Weiche Kante”, die Hintergrundfarbe auf weiß. Leuchten in Fireworks CS4

Schritt 5: Icons

Bei einem mobilen Apple Produkt dürfen die charakteristischen, halbrunden App-Icons auf keinen Fall fehlen, daher werden wir diese nun auf dem Desktop des iPads einfügen. Ich habe in diesem Tutorial Icons aus dem Iconpack “iKon Icons” verwendet, welches ihr euch hier herunterladen könnt. Kopiert nun einige der Icons in euer Fireworks Dokument hinein und ordnet die Icons nach eigenen Ermessen auf dem Dock und dem Desktop an.

Schritt 6: Taskleiste

Um nun noch die “Taskleiste” zu erstellen zeichnen wir ein schwarzes Rechteck im oberen Bereich des Displays, die Deckkraft setzen wir auf einen Wert zwischen 40% und 80%. Über dem Rechteck können wir nun ein Textfeld anordnen, als Textfarbe verwenden wir Weiß um einen möglichst großen Kontrast zu erreichen.

Das Ergebnis

Apple iPad Icon
In kurzer Zeit haben wir einen edlen iPad-Icon in Fireworks CS4 erstellt, der vielfältig verwendet werden kann.
Download

3 Kommentare

  1. Philipp Soul sagt:

    Das Tutorial an sich ist meiner Ansicht nach, ziemlich ausführlich und gut geschrieben, jedoch finde ich das Endergebnis eher Enttäuschend, da es kaum realitätsgetreu aussieht. Man hätte defenitiv ein etwas schwereres Tutorial machen können, indem man mehr Effekte und Techniken benutzt, um am Ende ein wenigsten halbwegs echt aussehendes iPad Modul zu erstellen.

    Antworten

    Ivo Mynttinen antwortete:

    Das Tutorial ist für Einsteiger gedacht, da möchte man ungern mit zu komplizierten Techniken überfordern. Dennoch danke für deinen Comment, desweiteren werden demnächst einige kompliziertere Tutorials folgen.

    Antworten

    Philipp Soul antwortete:

    Okay, dann verstehe ich es natürlich.

    Dann werde ich mal gespannt warten auf das Nächste. =)

    Antworten

Hinterlasse einen Kommentar