Wir zeigen Ihnen in diesem Photoshop-Tutorial, wie Sie einen "Apple IOS Button" für Ihre Homepage oder Webshop erstellen.

Sollte Ihnen das Tutorial gefallen oder Sie haben Fragen zu dem Tutorial schreiben Sie doch einen Kommentar.

Beginnen Sie mit einem neuen Projekt in der Größe 300 Px mal 250 Px und einem Hintergrund Ihrer Wahl.
(Wir nutzen in diesem Tutorial die Hintergrundfarbe Blau, damit man die einzelnen Schritte des Buttons besser sehen kann.)

Schritt 2

Für unseren Button benötigen wir eine Fläche mit abgerundeten kanten.
Gehen Sie dazu auf das Werkzeug "Abgerundetes-Recheck-Werkzeug" (U).

Am oberen Rand Ihres Bildschirms sehen Sie jetzt die Einstellungen.
Nehmen Sie die Einstellungen wie auf dem Bild vor.

Erstellen Sie eine neue Form.

Schritt 3

Erstellen Sie eine Hilfslinie (STRG + R).
Gehen Sie auf das Linieal und Drücken Sie die Linke Maustatse und halten diese Fest und ziehen Sie bis in die Mitte der Form.
(Fortgeschrittene können diesen Schritt auch übergehen und ohne Hilfslinie arbeiten.)

Schritt 4

Vergrößern Sie Ihre Form und gehen Sie jetzt links auf das Werkzeug "Direktauswahl-Werkzeug" (A)

Schritt 5

Klicken Sie jetzt auf den Ankerpunk und schieben in in die Mitte. (Wir tun dieses mit den Pfeiltasten "Rauf & Runter" auf der Tastatur)

Wiederholen Sie den Schritt mit dem unteren Ankerpunkt.

Schritt 6

Wählen Sie beide Ankerpunkte aus und ziehen diese nach Links. (Pfeiltaste "Links" auf der Tastatur)

Ihre Form sollte jetzt so aussehen.

Schritt 7

Die Grundform ist Fertig und jetzt werden wir das ganze befüllen.
Hierzu wechseln Sie in die "Fülloption" der Form. (Rechtsklick auf die Form und Fülloption wählen.)

Schalgschatten
Farbe #82A2B7

Schatten nach innen
Farbe #000000

Verlaufsüberlagerung
Position: 0% - Farbe: #425D75
Position: 48% - Farbe: #456078
Position: 51% - Farbe: #4F6B85
Position: 100% - Farbe: #6787A4

Der IOS Button ist jetzt fertig.

Wir wünschen viel Spaß beim nachbauen

Download der Photoshop Datei