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
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
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.
Schritt 2: Button
Wie 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.
Schritt 4: Das Dock
Wir 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ß. 
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
In kurzer Zeit haben wir einen edlen iPad-Icon in Fireworks CS4 erstellt, der vielfältig verwendet werden kann.
Download
Ähnliche Artikel
Mit anderen teilen
Der Autor
Ivo arbeitet in einer Agentur als Screendesigner. Außerdem ist er freiberuflich als Interface Designer tätig. Er würde sich freuen euch als "Follower" bei Twitter begrüßen zu dürfen.
3 Kommentare
Hinterlasse einen Kommentar
Vorschau auf Adobe Fireworks CS5
Tutorial – Server Icon erstellen in Fireworks CS4
jQuery für Einsteiger – Teil 3: Events
Vorschau auf Adobe Photoshop CS5
Tutorial – iPad Icon in Fireworks CS4
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