Design your Photoshop iPad

Design your Photoshop iPad

Das iPad ist in aller Munde. Wir wollen euch zeigen, wie ihr euer eigenes iPad mit Photoshop bauen könnt. Dazu hat euch Florian eine tolle Step-by-Step Anleitung mit rund 50 Arbeitsschritten erstellt. Viel Spaß!

Programm: Adobe Photoshop CS4+
Schwierigkeitsgrad: Fortgeschrittene
Aufwand: 53 Schritte
[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’]

Tutorial iPad Photoshop bauen

iPad nachgebaut – in ca. 50 Zügen.

[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’]

Und los:

Neue Datei anlegen (Datei > Neu)

Tutorial iPad

Step 01

Aus der Hintergrundebene eine neue Ebene erstellen (Ebene > Neu > Hintergrund aus Ebene).

Ebenenstile öffnen: per Doppelklick in der Registerkarte Ebene auf die neu erstellte Ebene oder im Ebenenmenü der Registerkarte Ebene auf  fx > Gradient Overlay (Farbverlauf)

Tutorial iPad

Step 02

In den Farbverlaufstreifen klicken um zur Farbwahl zu gelangen (per Klick auf das Farbkästchen gelangen Sie zur individuellen Farbwahl)

Tutorial iPad

Step 03

Farbwert c7c7c7 eintragen

Tutorial iPad

Step 04

Eine neue Ebene erstellen (STRG + Shift + N)

Das abgerundete Rechteck – Werkzeug wie in Schritt 05 dargestellt konfigurieren und ein Rechteck aufziehen.

Mit STRG + T (transfomieren) lassen sich die Werte (976 x 1250px) eingeben.

Hinweis: Im Transformationsmodus wird als Standard die Größe des Objektes in Prozent angegeben. Per rechtem Mausklick in das Horizontal- und Vertikalfeld lassen sich die Einheiten verändern (in px, cm, mm etc.)

[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’]
Tutorial iPad

Step 05

Weitere Einstellungen erfolgen wieder in den Ebenenstilen:

Tutorial iPad

Step 06

Tutorial iPad

Step 07

Tutorial iPad

Step 08

Tutorial iPad

Step 09

Ebene kopieren und auf  99% skalieren (STRG + T, dann auf den Wert 99% skalieren. ACHTUNG:  Proportionen beibehalten!)

Tutorial iPad

Step 10

Ebenstile werden ebefalls übernommen. Lediglich der Farbverlauf (Gradient Overlay) wird geändert:

Tutorial iPad

Step 11

Tutorial iPad

Step 12

Tutorial iPad

Step 13

Eine Kontur (Stroke) wird hinzugefügt:

Tutorial iPad

Step 14

Resultat (Hintergrund + Rahmen 1 + Rahmen 2)

Tutorial iPad

Step 15

Wieder die Ebene kopieren und auf 99,5% skalieren.
Die Ebenenstile können entfernt werden.

Hinweis: Man kann Effekte ausblenden oder komplett löschen, indem man das fX-Icon auf den Papierkorb zieht.

Tutorial iPad

Step 16

Die erstellte Ebene (Rahmen 3) kopieren und den unten angegebenen Farbverlauf einstellen:

Tutorial iPad

Step 17

Tutorial iPad

Step 18

Tutorial iPad

Step 19

Nun wird die Ebene auf 99% skaliert.

Tutorial iPad

Step 20

[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’] [toggle title=”Display gestalten”]

Nun zum Display

Mit dem Rechteck-Werkzeug (und den gezeigten Einstellungen) ziehen wir eine neue Fläche auf und färben diese Weiss.

Mit dem Transformieren-Werkzeug (STRG + T) wird die genaue Größe eingestellt (770 x 1032px).

Dann setzten wir das Display in die Mitte des Rahmens.

Tutorial iPad

Step 21

Folgende Ebenenstile werden für diese Ebene benötigt.

Tutorial iPad

Step 22

Tutorial iPad

Step 23

Neue Ebene erstellen und eine Fläche mit dem Kreis-Werkzeug aufziehen (59 x 59px).
Diese wird mittig im unteren Teil des Rahmens angeordnet.

Tutorial iPad

Step 24

Tutorial iPad

Step 25

Neue Ebene und abgerundetes Rechteck-Werkzeug mit folgenden Einstellungen:

Tutorial iPad

Step 26

Die Ebene kopieren und auf 85% skalieren:

Tutorial iPad

Step 27

Nun mit dem Cursor auf das Thumbnail der Ebene gehen und per STRG + Mausklick links die “Auswahl markieren”.

Per Mausklick in die Ebene darunter klicken und mit ENTF den markierten Bereich löschen.

Die Auswahl wird per STRG + D aufgehoben.

Die obere Ebene kann nun gelöscht werden.

Tutorial iPad

Step 28

Durch Farbüberlagerung (Color Overlay) die Farbe für dieses Element anpassen.

Tutorial iPad

Step 29

[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’]

Zwischenstand

Tutorial iPad

Step 30

[/toggle] [toggle title=”Displayhintergund gestalten”] Weiter geht es mit dem Displayhintergrund (Wallpaper).

Einfach beliebiges Motiv wählen (Mindest- bzw. Idealgröße: 770 x 1032px) und als neue Ebene anlegen.

Tutorial iPad

Step 31

Zurück in der Displayebene (Shape 1) wird mit STRG + Mausklick auf die Maske die Auswahl markiert.

Tutorial iPad

Step 32

Nun markiert man wieder die Ebene mit dem gewünschten Hintergrund und erstellt eine Ebenenmaske (siehe unten).

Dank der Auswahlmarkierung maskiert sich der ungewünschte Bereich von allein.

Tutorial iPad

Step 33

[separator type=’transparent’ color=” thickness=” up=’20’ down=’20’] [/toggle] [toggle title=”Glaseffekt anlegen”]

Der Glaseffekt

Neue Ebene erstellen und wie schon vorher die Maske von Shape 1 oder die Maske von Displayhintergrund als Auswahl makieren und diesen Teil der Ebene mit Weiss füllen.

Tutorial iPad

Step 34

Auswahl aufheben (STRG + D) und die Sichtbarkeit der Ebene auf 15% setzen.

Tutorial iPad

Step 35

Das Polygon-Lasso-Werkzeug wählen und die weisse Fläche in etwa so wie gezeigt umrahmen.

Der markierte Teil kann nun durch ENTF oder via Ebenenmaske entfernt werden.

Tutorial iPad

Step 36

Ebenenmaske erstellen oder vorhandene nutzen. Das Auswahl-Werkzeug nehmen und den Feather (Kante) auf 50px stellen. Dann eine Auswahl wie unten gezeigt treffen.

Tutorial iPad

Step 37

..und in der Ebenenmaske maskieren (Schwarz füllen).

Tutorial iPad

Step 38

Weiter mit den “Buttons” des iPads. Hilfslinien wie gezeigt anlegen (STRG + R = Lineal (von diesem lassen sich Hilfslinien aufziehen)). Neue Ebene erstellen und mit dem abgerundeten Rechteck-Werkzeug (mit den gezeigten Einstellungen) kleine Rechtecke aufziehen.

Tutorial iPad

Step 39

Die eben erstellte Ebenen nach unten auf die vorletzte Position ziehen (unter Rahmen 1).

Tutorial iPad

Step 40

Folgenden Ebenstil anwenden.

Tutorial iPad

Step 41

Ebenenmaske erstellen und den Pinsel mit den folgenden Werten einstellen (kann abweichen). Wie im Bild maskieren.

Tutorial iPad

Step 42

Folgenden Ebenenstil hinzufügen und fertig.

Tutorial iPad

Step 43

Alle Ebenen (bis auf Hintergrundebene) markieren und mit STRG +G in einen Ordner gruppieren.

Gruppe kopieren und auf eine Ebene zusammenfügen (siehe unten)

Tutorial iPad

Step 44

[/toggle] [toggle title=”Spiegelung anlegen”]

Spiegeln des iPads

Tutorial iPad

Step 45

Ebenenmaske erstellen, auf diese klicken und mit STRG + I (invertieren) alles maskieren.

Tutorial iPad

Step 46

Auswahlrechteck mit Feather: 50px (Kante, Rand) und wie unten gezeigt aufziehen.

Tutorial iPad

Step 47

Den ausgewählten Teil demaskieren (weiss zeichnen) und Sichtbarkeit der Ebene auf 20%.

Fertig ist die Spiegelung.

Tutorial iPad

Step 48

[/toggle] [toggle title=”Schatten gestalten”]

Nun zum Schatten.

Neue Ebene erstellen und eine Ellipse (in Schwarz) wie unten gezeigt erstellen.

Tutorial iPad

Step 49

Unter Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner die Ellipse weichzeichnen (35px Radius)

Tutorial iPad

Step 50

Nach Geschmack transfomieren.

Tutorial iPad

Step 51

Um den Display (Shape 1)  hervorzuheben, folgenden Ebenenstil anwenden:

Tutorial iPad

Step 52

Optional

Noch eine optionale Einstellung, um den Klavierlack-Charakter des iPads hervorzuheben:

Tutorial iPad

Step 53

Fertig ist das eigene iPad. Viel Spaß beim nachbauen.

Wenn ihr möchtet können wir auch einmla schauen, wie man den eBook Reader Amazon Kindle Paperwhite nachbaut. Auch dieser gewinnt ja an ziemlicher Beliebtheit!

[/toggle] [toggle title=”Hier Arbeitsdateien downloaden | Photoshop-Datei (1,7 MB)”]


[/toggle]

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Der Weg zum eigenen Onlineshop

Der Weg zum eigenen Onlineshop

Ein aufregendes Kribbeln in den Fingerspitzen dürfte zu jedem Start eines Onlineshops dazugehören. Viel muss jedoch vor dem ersten Verkauf bedacht werden, damit alles sauber funktioniert. Hier wird erklärt, wie der Weg zu einem eigenen Onlineshop aussehen kann....

Business-Fotoshooting: Mach dir ein Bild!

Business-Fotoshooting: Mach dir ein Bild!

Wie wichtig ein gutes Foto, ist wohl eigentlich jedem klar. Und doch ist es ein typischer (Anfänger-)Fehler, der uns im Laufe der Jahre immer wieder begegnet: Dass schlechte Fotos genutzt werden – oder gar keine. Uns sind auch schon Websites untergekommen, die...

|

Platz für deinen Kommentar!

2 Kommentare

  1. Robert Piel

    Habs gerade nachgebaut =)
    Is zwar ordentlich aufwendig aber super erklärt.
    Danke an den Autor.

    Grüße

  2. Clara M.

    Ging mir ähnlich. Sieht bei mir noch ein bisschen eckig aus (bin wohl irgendwo durcheinander gekommen) aber im großen und ganzen gefällt es mir sehr. Endlich mal was auf deutsch.

    Bitte mehr von solchen Tutorials.

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Mehr verkaufen

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
 Workshop SEO & Marketing

Download