Erstellen Sie eine illustrative iPhone/iPad-Landingpage in Photoshop

Seien Sie ehrlich, es gibt eine App für fast alles. Mit neuen Apps kommt eine Innovation in der Art und Weise, wie wir unsere mobilen Produkte potenziellen Kunden präsentieren können. Apple hat uns mit einer wunderschön glänzenden und schlanken Marke gesegnet, die im Grunde großartige Websites für uns erstellt. Dieses Tutorial geht noch einen Schritt weiter und enthält einen illustrativen Stil unter dem Apple-Glanz, um eine einzigartige Zielseite zusammenzustellen.

Seien Sie ehrlich, es gibt eine App für fast alles. Mit neuen Apps kommt eine Innovation in der Art und Weise, wie wir unsere mobilen Produkte potenziellen Kunden präsentieren können. Apple hat uns mit einer wunderschön glänzenden und schlanken Marke gesegnet, die im Grunde großartige Websites für uns erstellt. Dieses Tutorial geht noch einen Schritt weiter und enthält einen illustrativen Stil unter dem Apple-Glanz, um eine einzigartige Zielseite zusammenzustellen.

Schritt 1 - Richten Sie das Dokument ein

Vielleicht bin ich alte Schule, aber ich liebe immer noch Websites, die auf 960px festgelegt sind. Es ist so eine schöne runde Zahl, teilbar durch 1, 2, 3, 4, 5, 6, 8, 10, dass es viel einfacher ist, mit einem Pseudo-Gitter zu arbeiten. Dieses Tutorial ist nicht anders; Deshalb habe ich ein neues Dokument mit einer Größe von 1000 x 1200 Pixel erstellt, dessen Richtlinien die Mitte für ein 960 x 1200 Pixel großes Design herausarbeiten.

Dann richten wir die Spalten ein, die wir für den Rest des Entwurfs verwenden werden. Ich habe 3 Spalten mit 40 Pixel Abstand zwischen ihnen ausgewählt. Die Spalten von links nach rechts sind 240px, 390px, 240px.

Schritt 2 - Erstellen Sie einen verzierten Hintergrund

Da unser Design so aussehen soll, als würde es auf einem Bücherregal stehen, benötigen wir eine Art Tapete, um direkt dahinter zu sitzen.

Erstellen Sie eine neue Ebene und füllen Sie die gesamte Ebene mit Weiß (Umschalt + F5). Gehen Sie zu Ihren Ebeneneigenschaften und überlagern Sie Ihr verziertes Muster (ich überspringe die Erstellung des Musters, da ich davon ausgehe, dass jeder bereits weiß, wie das geht).

Nach dem Anwenden des Ebenenstils sollte unser Dokument ungefähr so aussehen:

Schritt 3 - Fügen Sie das Regal hinzu

Wir erstellen eine neue Ebene, die sich über das gesamte Dokument erstreckt und ungefähr 140 Pixel groß ist. Wir werden die gleiche Technik wie in Schritt 2 anwenden, obwohl wir anstelle der verzierten Textur eine Holzstruktur anwenden werden. Es gibt wieder Hunderte von Websites, die lizenzfreie Holztexturen verschenken: Google-Suche nach lizenzfreien Holztexturen

Das Ergebnis sollte ungefähr so aussehen:

Benennen Sie diese Ebene in "shelf" um.

Das Regal sieht ein wenig flach aus, daher müssen wir mithilfe von Verläufen, Schatten und Lichtern etwas Tiefe hinzufügen. Fügen Sie neue Ebenenstile hinzu für: Kontur, Schlagschatten und Verlaufsüberlagerung wie folgt:

Sie sagen sich vielleicht, dass der Schlagschatten gerade ziemlich hässlich aussieht. Einverstanden; aber es wird nicht so hart aussehen, wenn wir die Bücher davor haben. So sollte Ihr Dokument jetzt aussehen:

Danach erstellen wir die Vorderkante des Regals. Duplizieren Sie (Befehlstaste + J) die Ebene "shelf" und benennen Sie sie in "front of shelf" um. Bewegen Sie die Ebene "front of shelf" nach unten, sodass die Unterseite der Ebene "shelf" mit der Oberseite der Ebene "top of shelf" ausgerichtet ist. Schneiden Sie 20 Pixel von der Unterseite der Ebene "top of shelf" ab, damit die Höhen variieren. Wir möchten die Illusion vermitteln, dass das Regal tiefer ist als die Vorderseite des Regals hoch.

Danach müssen wir einige der Ebenenstile für die Ebene "top of shelf" ändern. Zuerst müssen wir die Ebene "front of shelf" unter die Ebene "shelf" in Ihrer Ebenenpalette verschieben. Dann kehren wir den Farbverlauf um (und verringern die Deckkraft), da der Schatten unten statt oben sein soll. Auf diese Weise erstellen wir eine Lichtquelle in der vorderen oberen Ecke des Regals - genau dort, wo wir unsere Bücher und unseren iPhone-Screenshot zeigen.

Nachdem Sie alle Ebenenstile angewendet haben, sollte Ihr Bild folgendermaßen aussehen:

Jetzt könnten wir hier aufhören, aber ich denke, dass im Regal nur ein bisschen mehr Details fehlen. Die Ecken scheinen immer noch ein wenig flach zu sein, und wir möchten, dass sie eine Menge Tiefe haben. Deshalb fügen wir einige einfache, 1 Pixel hohe Hervorhebungslinien hinzu, um ihr einen zusätzlichen Tiefenschub zu verleihen.

Erstellen Sie die Linie direkt unter dem 2-Pixel-Strichrand der Ebene "shelf". Anschließend können Sie entweder eine zu füllende Farbe auswählen (Umschalt + F5), die heller ist als die gesamte Holzmaserung des Regals, oder einfach mit Weiß füllen und die Deckkraft anpassen. Das Ergebnis gibt Ihnen ein bisschen mehr Tiefe:

Schritt 4 - Erstellen Sie die Rückseite des Bücherregals

Wir werden unser Holzmuster aus dem obigen Regal wiederverwenden, um eine Art "back" zu unserem Bücherregal zu schaffen. Die Idee hier ist, es so aussehen zu lassen, als hätten wir das iPhone und die Bücher oben auf das Bücherregal gestellt und unsere zusätzlichen Informationen darin. Wir erstellen diese Ebene unter den Regalebenen im Stapel.

Erstellen Sie eine Auswahl, eine Füllung mit Ihrem Holzmuster (Umschalt + F5). Benennen Sie diese Ebene in "back of shelf" um.

Da unsere Lichtquelle auf die obere vordere Ecke des Regals gerichtet ist, müssen wir die Rückseite etwas dunkler machen, damit sie eher wie ein Bücherregal mit Tiefe und weniger wie Holzböden aussieht. Mit Ebenenstilen ist dies ganz einfach. Fügen Sie Ihrer Ebene "back of shelf" einen Ebenenstil "Farbüberlagerung" hinzu und setzen Sie die Farbe auf "Schwarz". Stellen Sie die Deckkraft auf 50% ein, und Sie sollten jetzt das dunklere Holz für die Rückseite des Bücherregals sehen.

Nach einer leichten Anpassung an die Deckkraft meines verzierten Hintergrunds sollte Ihr Bild ungefähr so aussehen:

Schritt 5 - Erstellen Sie das Logo

Nachdem wir unser gesamtes Dokument sowie alle für das Theme erstellten Hintergrundebenen eingerichtet haben, erstellen wir alle Elemente, die sich über dem Hintergrund befinden (technisch gesehen im Hintergrund).

Für das Logo habe ich die Schriftart Rockwell (es ist meine Besessenheit in letzter Zeit) mit 60px gewählt. Erstellen Sie eine neue Textebene mit Text: "Read it". Um dieses Blasengefühl zu erhalten, müssen wir einige Ebenenstile für Strich, Verlaufsüberlagerung, inneren Schatten und äußeres Leuchten hinzufügen (nahezu jeder Ebenenstil, den Sie möglicherweise hinzufügen können). Hier sind die Einstellungen:

Richten Sie Ihr Logo nach dem Anwenden der Ebenenstile an der Anleitung ganz rechts aus. Es sollte ungefähr so aussehen:

Jetzt brauchen wir das Lesezeichenband für das "i". Wir beginnen mit der Erstellung einer neuen Form (die ich mit dem Polygonal Lasso-Werkzeug von Grund auf neu erstellt habe). Füllen Sie Ihre Auswahl mit einer beliebigen Farbe. Es sollte in diese Richtung gehen:

Da ein festes schwarzes Lesezeichen extrem hässlich ist, müssen wir ihm etwas Glanz verleihen. Alles, was wir hier brauchen, ist eine Schlagschatten-, Strich- und Verlaufsüberlagerung, um das Farbband hervorzuheben:

Ihr Lesezeichenband sollte jetzt folgendermaßen aussehen:

Sie müssen nur noch das "i" hinzufügen, für das wir dieselbe Schriftart (Rockwell) mit weißem Text verwenden. Fügen Sie einen leichten inneren Schatten hinzu (70% Deckkraft; 90 Grad; Abstand: 1; Drossel: 0; Größe: 1) und Sie sollten fertig sein. Ich habe meinem Lesezeichen auch ein Muster hinzugefügt, aber hier ist im Grunde das, was Sie sehen sollten:

Schritt 6 - Hinzufügen der Bücher

Mach dir keine Sorgen; Sie müssen nicht alle von Grund auf neu erstellen. Das Schöne am Web ist jetzt, dass es Tausende von Optionen für Stock-Illustrationen gibt - was Ihnen am Ende Zeit spart. Ich habe die Bücher bei iStockphoto hier gefunden. Diese genauen Bücher sind für dieses Tutorial nicht ganz kritisch. Wenn Sie es vorziehen, können Sie jederzeit mit dem nächsten Abschnitt fortfahren.

Wenn Sie die Bücher gekauft haben, platzieren Sie sie auf Ihrem Bild in der Mitte Ihres Regals:

Die Bücher sind für sich genommen viel zu flach, daher fügen wir ein paar weitere perspektivische Schatten hinzu (wie wir es bei den Regalecken getan haben), damit sie so aussehen, als würden sie im Regal sitzen. Benennen Sie zuerst die neue Ebene mit den Büchern in "books" um.

Fügen Sie der Ebene "books" einen Schlagschatten mit den folgenden Einstellungen hinzu: Deckkraft: 19%; Winkel: -90; Entfernung: 10; Verbreitung: 10; Größe: 15. Wählen Sie für die Farbe ein Braun aus der Ebene "back of shelf". Wir verwenden hier Braun, weil das Schwarz einfach zu viel zu sein scheint und nicht passt.

Um den Schatten unter den Büchern zu erzeugen, erstellen wir eine neue schwarze Ellipse, die sich über die gesamte Breite der vertikal stehenden Bücher erstreckt. Wir werden uns danach mit dem schiefen Buch befassen.

Rastern Sie die schwarze Ellipse und gehen Sie zu Filter > Weichzeichnen > Gauß-Weichzeichnen. Verwenden Sie einen Radius von 4,7, um die gewünschte Streuung zu erhalten. Stellen Sie die Deckkraft der schwarzen Ellipsenebene auf 70% ein, um sie etwas weicher zu machen. Das Ergebnis sollte folgendermaßen aussehen:

Wiederholen Sie die gleiche Technik für das schiefe Buch, jedoch mit einer viel kleineren Ellipse. Es sollte ungefähr so aussehen:

Schritt 7 - Fügen Sie den iPhone- und Preisaufkleber hinzu

Keine iPhone-Landingpage ist vollständig ohne ein großes, glänzendes iPhone - und dieses Tutorial ist keine Ausnahme. Ich habe die iPhone-Vorlage der großartigen Leute von teehan + lax verwendet, um sie auf das Gerät zu emulieren. Entfernen Sie alle Ebenen, die nicht auf Ihrem iPhone enthalten sein sollen, und ziehen Sie sie in Ihr Dokument. Stellen Sie es etwas tiefer in das obere Regal, um die Illusion zu vermitteln, dass das iPhone näher bei Ihnen ist als die Bücher. Wir wollen das hübsche iPhone vorne und in der Mitte.

Offensichtlich würde hier Ihr Helden-Screenshot von Ihrer App gehen. Ich werde nichts zu meinem hinzufügen, aber Sie sind sicherlich willkommen, wenn Sie das Tutorial durcharbeiten. Außerdem verwenden wir dieselbe Technik aus Schritt 6, um der Unterseite des iPhones einen Schatten hinzuzufügen. Ihre Ausgabe sollte wie folgt aussehen:

Nur ein letzter Punkt (einer der wichtigsten) ist der Preisaufkleber. Erstellen Sie zunächst einen Kreis in der oberen rechten Ecke des iPhones. Benennen Sie diesen Kreis in "price sticker" um:

Wenden Sie die folgenden Ebenenstile für Schlagschatten, Abschrägen und Prägen, Verlaufsüberlagerung und Kontur an. Dies ist ein wichtiger Ebenenstil, da wir ihn im Rest der Site für Schaltflächen usw. mehrmals verwenden werden.

Dadurch entsteht etwas völlig Butteriges:

Fügen Sie Text für den Preis mit einem 1px Dropshadow oben hinzu und unser Aufkleber ist fertig:

Bisher haben wir Folgendes erstellt (sieht ziemlich gut aus und das Beste von allem: sehr einzigartig):

Schritt 8 - Kaufen Sie die Text und AppStore-Schaltfläche

Wir vermissen immer noch unseren "Call to Action" -Button, um Leute zum AppStore zu bringen, um unsere App zu kaufen. Wir werden diesen Text so erstellen, als wäre er in die Vorderseite des Regals "gemeißelt" (mit einer perfekten Schriftart).

Also los geht's: Erstellen Sie einen neuen Text; Ich benutzte: "Your book collection will love you for it." Ich habe Gotham mit 36px verwendet, um das gewünschte Aussehen zu erhalten. Auf diesen Text müssen wir zwei Ebenenstile anwenden, um ihm das gemeißelte Aussehen zu verleihen:

1. Innerer Schatten: Mischmodus: Multiplizieren, Farbe: Schwarz, Deckkraft: 75%, Winkel: 90, Abstand: 1, Drossel: 0, Größe: 2
2. Farbüberlagerung: Farbe: schwarz, Deckkraft: 47%

Ihr gewünschtes Ergebnis sollte je nach Schriftart ungefähr so aussehen:

Jetzt müssen wir die AppStore-Schaltfläche hinzufügen. Ich habe ein iPhone-Symbol von IconFinder.net verwendet, um die Schaltfläche "Im AppStore verfügbar" neu zu erstellen.

Erstellen Sie zum Erstellen der Schaltfläche ein neues abgerundetes Rechteck mit einem Randradius von 10 Pixel. Ich habe mein Rechteck mit einer Breite von 240 x 74 Pixel erstellt.

Da wir unseren schönen kleinen Ebenenstil für Schaltflächen bereits beim Erstellen des Preisaufklebers in Schritt 7 erstellt haben, können wir den Ebenenstil einfach von diesem Aufkleber kopieren und den Ebenenstil in unsere neue Schaltflächenebene einfügen. Klicken Sie dazu mit der rechten Maustaste auf die Ebene, von der Sie den Ebenenstil kopieren möchten, und wählen Sie im Popup-Menü die Option "Ebenenstil kopieren". Wählen Sie die Ebene aus, auf die Sie diesen Ebenenstil anwenden möchten, klicken Sie mit der rechten Maustaste und wählen Sie "Ebenenstil einfügen". So einfach ist das.

Platzieren Sie das von IconFinder heruntergeladene iPhone-Symbol oben auf der Schaltfläche und geben Sie ihm folgende Ebenenstile:

1. Innerer Schatten: Mischmodus: Mehrfach, Farbe: Schwarz, Deckkraft: 57%, Winkel 90, Abstand: 1, Drossel: 0, Größe: 1 (dies gibt uns einen schönen inneren Schatten
   damit das Symbol so aussieht, als wäre es in der Schaltfläche festgelegt)
2. Farbüberlagerung: #edfed4 (oder eine ähnlich helle Farbe, abhängig von den Farben, die Sie für Ihren Aufkleber ausgewählt haben)

Fügen Sie den AppStore-Text hinzu und verwenden Sie den Ebenenstil, den Sie für das iPhone-Symbol im Text erstellt haben, erneut. Ihr Ergebnis sollte wie folgt aussehen:

Schritt 9 - Funktionsliste

Dies ist wahrscheinlich der am wenigsten interessante Teil des Designs, aber am interessantesten für alle, die Ihre App kaufen möchten. Erstellen Sie eine neue Überschrift mit einer Größe von 30 Pixel (ich habe wieder Rockwell verwendet) und geben Sie den Text "Features" ein. Erinnern Sie sich an die Anleitungen, die wir zu Beginn dieses Tutorials erstellt haben? Wir werden sie jetzt für unsere 3 Spalten verwenden; Richten Sie daher den Feature-Text an der Anleitung ganz rechts aus.

Wenden Sie einige Ebenenstile auf diesen Text an:

1. Farbverlaufsüberlagerung: #bcab8e bis #ebdbbe oder ähnliche Farben, damit es auf dem dunklen Holz gut zur Geltung kommt (dies kann auch nur einfacher Text sein)
2. Schlagschatten: Mehrfach, Farbe: Schwarz, Deckkraft: 75%, Winkel: -90, Abstand: 1, Drossel: 0, Größe: 1 (weil wir diesen gemeißelten Effekt erzeugen möchten)

Erstellen Sie unten einen kursiven Text und fügen Sie einige Aufzählungszeichen hinzu. Einfach genug, oder?

Schritt 10 - Fügen Sie einige Screenshots hinzu

Wir müssen unsere App zeigen. Unser iPhone-Screenshot enthält nicht nur Bilder unserer App, sondern wir sollten auch vergrößerte Bilder unserer App anzeigen, damit die Benutzer genau wissen, was sie erwarten können.

Zuerst duplizieren wir (Befehlstaste + J) unsere Textebene "Features" aus Schritt 9. Ändern Sie den Text in "Screenshots" und verschieben Sie ihn so, dass er in der mittleren Spalte platziert wird.

Dann erstellen wir die Screenshots. Wir beginnen mit der Erstellung der äußeren Einfügungsebene. Erstellen Sie zunächst eine neue abgerundete Rechteckform (180 x 180 Pixel) mit einem Radius von 10 Pixel. Kopieren Sie den Ebenenstil aus dem gemeißelten Text in Schritt 8 und fügen Sie ihn in Ihre abgerundete Rechteckform ein. Duplizieren Sie die Ebene (Befehlstaste + J) und platzieren Sie sie gleichmäßig in der 390 Pixel breiten Spalte:

Jetzt erstellen wir einen Platzhalter für die Bilder (Sie würden diese natürlich später durch die Screenshots Ihrer App ersetzen). Erstellen Sie ein weiteres abgerundetes Rechteck, diesmal jedoch mit folgenden Einstellungen:

1. Breite: 160px
2. Höhe: 160px
3. Radius: 5px (der innere abgerundete Bereich eines Rechtecks sollte immer die Hälfte des Randradius des äußeren abgerundeten Rechtecks betragen)

Duplizieren Sie die Ebene und verschieben Sie die duplizierte Ebene über den anderen Screenshot-Einschub.

Fügen Sie diesen beiden Ebenen (mit der Farbe #f6f3eb) für den Platzhalter eine Farbüberlagerung hinzu.

Zuletzt müssen wir das Zoomsymbol hinzufügen. Zeichnen Sie zunächst einen Kreis in der oberen rechten Ecke (wie Sie es für den Preisaufkleber getan haben). Meins ist ungefähr 30px im Durchmesser.

Fügen Sie den gleichen Ebenenstil vom Preisaufkleber in den neuen Kreis ein. Ich habe die Verlaufsfarben und die Strichfarbe angepasst, um ein etwas anderes Aussehen als das Grün zu erzielen.

Zuletzt müssen wir das Symbol "Zoom" hinzufügen. Ich verwende das Zoomsymbol aus dem erstaunlichen Glyphish-Symbolsatz. Zu
Wenn Sie das Zoomsymbol vervollständigen, müssen Sie nur einen leichten inneren Schatten (ca. 1 Pixel) hinzufügen, um ihm eine gewisse Tiefe zu verleihen.

Duplizieren Sie die von Ihnen erstellte Zoom-Symbolgruppe und verschieben Sie sie in die andere Miniaturansicht. Wenn Sie dies implementieren, wäre es definitiv cool, einige zu tun
Cooles Zoomen auf diese Screenshots, während Sie darauf geklickt haben. Vielleicht für meine ersten Nettuts :).

Schritt 11 - Testimonials

Last but not least für den Hauptteil sind die Testimonials. Ich habe die Sprechblasen aus einem abgerundeten Rechteck und einer benutzerdefinierten Form erstellt.
Wir beginnen mit dem abgerundeten Rechteck. Erstellen Sie ein neues abgerundetes Rechteck mit folgenden Einstellungen:

1. Radius: 40px, Breite: 240px (Breite der rechten Spalte) und Höhe: 80px

Wählen Sie nun das benutzerdefinierte Formwerkzeug und suchen Sie die Sprechblase, um den Schwanz zu erstellen:

Erstellen Sie eine Sprechblase über der abgerundeten Rechteckebene, damit sich nicht nur der Schwanz überlappt.

Wählen Sie beide Ebenen aus und führen Sie sie zusammen (Befehlstaste + E). Das Ergebnis sollte eine Form sein, auf die wir dann etwas Styling anwenden können.

Lassen Sie uns noch einmal unseren Ebenenstil vom Preisaufkleber kopieren und den Ebenenstil in unsere Testimonial-Blase einfügen (wir machen ihn in einer Sekunde zu einer Holzstruktur). Wir tun dies, weil wir die meisten Stile vom Aufkleber haben möchten, wie die Stile "Abschrägen", "Schlagschatten" und "Strich". Wir werden lediglich ein wenig mit der Textur und den Farben spielen, um das richtige Aussehen zu erzielen. Durch die Wiederverwendung solcher Ebenenstile können Sie Ihre Designs konsistent halten und sich eine Menge Zeit sparen, indem Sie nicht immer wieder dieselben Effekte neu erstellen müssen.

Zuerst ändern wir die Verlaufsüberlagerung. Wir brauchen eine Farbe von transparent bis transparent (da die Holzmaserung von hinten sichtbar sein soll). Ich habe mich dafür entschieden, dass der Farbverlauf zu einem sehr dunklen Braun verblasst: #292115.

Zuletzt machen wir eine Musterüberlagerung der Holzstruktur, damit sie sich besser in den Hintergrund einfügt.

Stellen Sie die Strichfarbe so ein, dass sie dunkler braun (nicht grün) ist, und schon sind Sie fertig!

Alles, was Sie jetzt tun müssen, ist, Ihre begeisterten Kundenbewertungen hinzuzufügen, und Sie haben eine einzigartige Testimonial-Blase. Duplizieren Sie die Testimonial-Gruppe
und bewege es direkt unter den anderen, und das war's!

Schritt 12 - Mailingliste

Wir beginnen mit der Erstellung des umgebenden Containers, in dem sich Text und Formular befinden. Ich habe ein abgerundetes Rechteck mit einem Radius von 40 Pixel und einer Breite von 960 Pixel (unsere Seitenbreite) erstellt. Ich habe den Ebenenstil aus dem Text in Schritt 8 eingefügt, um ihm das Gefühl zu geben, dass er eingefügt ist. Wie ich bereits erwähnt habe, verwende ich meine Ebenenstile immer so oft wie möglich wieder, um die Konsistenz zu gewährleisten.

Ich ging noch einmal zu IconFinder, um das Mail-Symbol zu finden - zum Glück für uns.
Das 64 x 64 Pixel große Symbol war genau das, was wir brauchten. Platzieren Sie dieses Symbol in der linken Ecke unserer eingefügten Leiste - es wird der Anker sein
für den Newsletter und helfen Sie, die Schaltfläche Senden auszugleichen.

Fügen Sie danach "Möchten Sie die neuesten Nachrichten? Treten Sie der Mailingliste bei." Text. Ich habe das Gotham wieder benutzt, aber mit einer etwas kleineren Größe bei 24px. Machen
die Textfarbe #161008 (da wir nicht möchten, dass sie zu stark hervorsticht) und fügen Sie unten einen hellbraunen 1px-Schlagschatten hinzu (wieder erzeugen wir diese Tiefe).

Beeindruckend! Wir sind so nah. Alles was wir tun müssen, ist das E-Mail-Formular und den Button hinzuzufügen und wir sind fertig. Erstellen Sie ein weiteres abgerundetes Rechteck mit einem Radius von 20 Pixel.
(die Hälfte des äußeren abgerundeten Rechtecks) und eine Höhe von 40 Pixel (damit wir auf beiden Seiten keine geraden Kanten haben).

Man kann beachten, wie gleichmäßig der Abstand auf der rechten Seite ist. Durch die Halbierung des Innenradius erhalten wir eine gleichmäßige Polsterung zwischen Außenbehälter und Innenbehälter.

Erstellen Sie mit denselben Voreinstellungen für das abgerundete Rechteck (Radius 20 Pixel, Höhe 40 Pixel) eine neue Schaltfläche für abgerundete Rechtecke. Kopieren Sie den Ebenenstil von unseren Zoom-Symbolen aus Schritt 10 (die rot-orange Farbe). Fügen Sie diesen Ebenenstil in Ihre neue Schaltfläche ein. Sie sollten so etwas haben:

Jetzt müssen Sie nur noch den Text "Senden" hinzufügen und fertig!

Abschluss

Das ist es. Wir haben eine einzigartige iPhone-Landingpage erstellt. Verschmelzen Sie einen neuen illustrativen Stil mit dem glänzenden iPhone-Feeling. Dieses Tutorial ist nicht nur für eine Buchanwendung gedacht - Sie können die Bücher im Regal gegen fast alles austauschen (d. h. Sie können sie in einen Tisch für Getränke umwandeln). Hoffentlich, hat es euch gefallen!