Ein iPad schnell in Photoshop bauen

Dieses kleine Tutorial soll zeigen, wie schnell man mit einfachen Mitteln realistische Ergebnisse erzielen kann. Ich werde in diesem Tutorial bewusst keine Werte für die Effekte ect. angeben, da ich a) der Überzeugung bin, durrch ausprobieren verinnerlicht man die Sachen mehr und b) ihr Euer "iPad" vielleicht irgendwo einsetzen wollt und ich diesen Entwurf speziell für diesen Blog gemacht habe (also in Webauflösung).

Los geht's:

Schritt 1 - Die Grundform:

Erstellt in Photoshop ein neues Dokument in der von Euch gewünschten Größe. Meine Arbeitsfläche habe ich mit 1000 Px Breite angelegt. Ich habe mich nicht exakt an die Maße des iPads gehalten, sondern frei Schnauze und pi mal Daumen ungefähr die Proportionen gesetzt.

Deshalb: Zieht mit dem "Abgerundetes-Rechteck-Werkzeug" ein eben solches auf. Wählt dafür schwarz als Vordergrundfarbe aus. Experimentiert mit dem  Radius (oben in der Leiste) der abgerundeten Ecken, bis ihr ein für Euch passendes Ergebnis erzielt.

Schritt 2 - Der Rahmen:

Nun kopiert die Ebene mit dem Rechteck auf eine neue Ebene und setzt diese in der Ebenenhirarchie unter das erste Rechteck. Da es sich bei dem Rechteck um Vektor-Pfade handelt, können wir dieses ohne Probleme transformieren. Drückt also cmd+t (strg+t unter windows) und zieht das untere Rechteck bei gedrückter Shift und Alt Taste ein wenig größer - eben so, wie der Rahmen des iPads ungefähr ist. Durch das gedrückt halten der Shift-Taste haltet ihr beim Transformieren die Proportionen bei, die gedrückte Alt-Taste sorgt dafür, das das untere Rechteck aus der Mitte heraus vergrößert wird.

Nun macht ihr einen Doppelklick auf die Ebene des unteren Rechtecks und gebt der Ebene eine Verlaufsüberlagerung (linear, dunkelgrau zu hellgrau) und experimentiert mit Abgeflachte Kante und Relief so lange aus, bis Euer Rechteck ungefähr so aussieht:

Schritt 3 - Die Display Fläche

Zieht mit dem Rechteck-Werkzeug ein Rechteck auf, das ihr oberhalb der obersten Ebene anordnet. Dies stellt das Display dar, und sollte in einem dunklen grau gehalten sein:

Schritt 4 - Der Glossy-Effekt

Nun kopiert ihr das obere Rechteck mit den abgerundeten Ecken, noch einmal auf eine neue Ebene, die ihr zuoberst anordnet. Drückt nun mit gedrückter cmd-Taste (Strg bei Windows) auf die Vektormaske dieser Ebene. Dann seht ihr, das eine Auswahl des Rechtecks gemacht wurde. Daraufhin wählt ihr aus der Werkzeugleiste das Polygonlasso aus und schneidet von der Auswahl ein gutes Stück weg.

Nun klickt ihr in der Ebenenpalette auf das Masken-Symbol und zieht die Fläche der Ebene auf 0. Als Nächstes geht ihr per Doppelklick auf die Ebene in die Ebeneneffekte und gebt der Ebene einen Verlauf von weiß zu schwarz und stellt den Ebenemodi des Verlaufs auf negativ multiplizieren. Geht wieder aus den Ebeneeffekten heraus und spielt mit der Deckkraft der Ebene, bis Euch die Spiegelung gefällt:

Schritt 5 - Der Home-Button

Nun zieht ihr an der Stelle, wo der Home-Button hinkommen soll einen Kreis auf (Ellipsen-Werkzeug mit gedrückter Shift-Taste) und ordnet diese Ebene wiederum zuoberst an. Wählt dabei schwarz als Farbe. Danach dubliziert ihr diesen Kreis auf eine neue Ebene. Klickt wieder mit gedrückter cmd-Taste (Strg-Taste unter Windows) auf das Miniaturbild der Ebene, um eine Ausahl des Kreises zu machen. Jetzt nehmt ihr von der Auswahl mit dem Ellipsenauswahl-Werkzeug ein Stück rechts weg. Macht hier wieder einen Verlauf wie aus Schritt 4 rein. Zusätzlich gebt ihr dem angeschnittenen Kreis noch einen Schatten nach innen. Nun sollte das ganze so aussehen:

Zum Abschluss zieht ihr jetzt mit dem Abgerundetes-Rechteck-Werkzeug über dem Kreis ein kleines Rechteck auf. Zieht die Fläche der Ebene auf 0 und gebt ihr eine Kontur in mittlerem Grau.

Schritt 6 - Die Kamera

Zieht jetzt auf der anderen Seite des iPads einen kleinen Kreis auf, der schwarz sein sollte. Gebt diesem einen schwarz-weiß verlauf und zieht die Deckkraft vom Verlauf sehr weit runter (auf ca. 20%). Jetzt macht ihr einen kleineren Kreis darüber (die Linse). Diese bleibt einfach schwarz. Nun kopiert ihr den unteren Kreis und legt die Kopie zuoberst ab. Zieht hier die Fläche auf 0 und passt die Deckkraft des Verlaufs an bis es gut aussieht.

Finis - das war's.

Nun sollte das Pad ungefähr so aussehen:

Ich persönlich markiere nun immer alle Ebenen (ausser dem Hintergrund) und erstelle ein SmartObject daraus - so wird garantiert das auch bei nachträglichem skalieren die Ebeneffekte gleich bleiben. Nun noch ein anderer Hintergrund unter das iPad geschoben oder unter der Glossy-Ebene ein Bild auf das "Display" gelegt und die Illusion ist perfekt.

Ich hoffe Euch hat das Tutorial gefallen und die Schritte waren halbwegs nachvollziehbar!

Hier noch einmal das Ergebnis: