Entwerfen Sie eine Clean Launch-E-Mail für eine mobile App

In diesem Tutorial erstellen wir mit Adobe Photoshop eine eindeutige und coole E-Mail, in der der Start einer neuen mobilen App angekündigt wird. Wir werden uns mit der Verwendung intelligenter Objekte, dem Abschneiden von Masken und dem Verzerren von Text befassen und sogar die Psychologie unserer Benutzer untersuchen.

Schritt 1: Dokumenteinrichtung

Als erstes müssen wir ein neues Dokument erstellen, das für unser Design bereit ist. Der Standard für das E-Mail-Design ist 600 Pixel breit - wir werden unser Dokument 800 Pixel breit machen, aber das Design innerhalb des Zentrums 600 Pixel, damit wir ein besseres Gefühl dafür bekommen, wie das gesamte Design für die Mehrheit der Betrachter aussehen wird. Es gibt uns auch zusätzlichen Platz zum Arbeiten.

Wenn Sie also ein neues Dokument erstellen, müssen Sie die Breite auf 800 Pixel und die Höhe auf 1500 Pixel einstellen.

Schritt 2: Platzieren unserer Guides

Nachdem das Dokument fertig ist, müssen wir unsere Anleitungen platzieren. Diese werden verwendet, um zu bestimmen, wo wir unsere Inhalte platzieren, und um dem Gesamtdesign ein zusammenhängenderes Gefühl zu verleihen.

Stellen Sie zunächst sicher, dass Lineale (cmd / Strg + R) und Hilfslinien (cmd / Strg +;) aktiviert sind.

Gehen Sie anschließend zu Ansicht > Neuer Leitfaden. Dadurch wird das unten gezeigte Eingabeaufforderungsfeld geöffnet. Stellen Sie die Ausrichtung auf Vertikal und die Position auf 100 Pixel ein. Dies ist unsere erste Anleitung. Wiederholen Sie diesen Schritt mit den folgenden Werten. 130px, 370px, 400px, 430px, 670px, 700px.

Erstellen Sie dann eine einzelne horizontale Hilfslinie mit 590 Pixel.

Sie sollten jetzt insgesamt sieben vertikale Hilfslinien einrichten. Die beiden äußeren Hilfslinien bilden unsere Grenze und bilden die 600 Pixel, in denen wir arbeiten können. Die nächste Hilfslinie auf jeder Seite bietet eine Hilfslinie für unseren Text, damit sich der Atemraum verbessern kann Lesbarkeit. Die Anleitung mit 400 Pixel zeigt die Mitte des Dokuments und die Anleitung auf beiden Seiten ist wieder für unseren Text.

Schritt 3: Hintergrund

Toll. Wir haben unser Dokument eingerichtet, aber alles, was wir im Moment tatsächlich haben, ist eine große weiße Platte und einige Linien. Es ist Zeit, etwas Farbe hinzuzufügen!

Füllen Sie zuerst die Ebene "Hintergrund" mit der Farbe # e5e5e5. Dies kann auf zwei Arten erfolgen: Nehmen Sie entweder das Farbeimer-Werkzeug mit der als # e5e5e5 eingestellten Vordergrundfarbe und klicken Sie einfach auf die Leinwand. Wenn Sie jedoch etwas schneller sein und Tastaturkürzel verwenden möchten, stellen Sie Ihre Hintergrundfarbe auf # e5e5e5 ein und drücken Sie bei ausgewählter Ebene "Hintergrund" cmd / Strg und Rücktaste, um die Ebene zu füllen.

Als nächstes fügen Sie unserem Hintergrund einen Verlauf hinzu, setzen Ihre Vordergrundfarbe auf # a5c0b8, wählen dann das Verlaufswerkzeug und wählen den zweiten Verlauf in den Voreinstellungen. Dadurch erhalten wir einen Verlauf, der auf der Seite, auf der wir den Verlauf beginnen, vollständig undurchsichtig ist und transparent auf der anderen Seite. Stellen Sie sicher, dass der Verlauf auch auf linear eingestellt ist. Diese beiden Auswahlen werden unten gezeigt:

Zeichnen Sie nun einen geraden vertikalen Farbverlauf vom oberen Rand der Seite bis zu unserer Anleitung 590 Pixel im Dokument.

TIPP: Wenn Sie die Umschalttaste gedrückt halten, während Sie den Farbverlauf herausziehen, erhalten Sie eine gerade Linie.

Schritt 4: Die Überschrift

Jetzt ist unser Hintergrund sortiert, es ist Zeit für die Überschrift. Für die Überschrift habe ich die schöne Duke-Schrift von James T. Edmondson verwendet, die kostenlos bei The Lost Type Co-op erhältlich ist.

Der erste Schritt besteht darin, den Basistext in unser Design einzufügen, indem Sie mit dem Textwerkzeug Ihre Überschrift eingeben. Wenn Sie auch die Duke-Schriftart verwenden, stellen Sie den Stil auf "Füllen" und verwenden Sie die Schaltfläche "Alle Großbuchstaben", um sicherzustellen, dass alle Zeichen in Großbuchstaben geschrieben sind. Dies sorgt für eine sehr beeindruckende Überschrift. (Einige dieser Einstellungen sind nur über das Bedienfeld "Zeichen" verfügbar. Um sie zu aktivieren, gehen Sie einfach zu Fenster > Zeichen.) Die Einstellungen, die ich verwendet habe, sind unten gezeigt:

Lassen Sie uns nun den Bogen in unserem Text erstellen. Stellen Sie bei ausgewählter Textebene sicher, dass Sie weiterhin das Textwerkzeug verwenden, und klicken Sie auf die Schaltfläche "Verzerrten Text erstellen".

Wählen Sie "Bogen" für den Stil "Horizontal" und eine Biegung von + 20% (siehe unten):

Jetzt muss der Text die gesamte Breite unseres Dokuments ausfüllen, wobei der ausgewählte Text cmd / Strg + T drückt, um die freie Transformation zu aktivieren. Sie sollten jetzt ein Feld um den Text mit ziehbaren Ankerpunkten an allen vier Ecken und in der Mitte jeder Seite sehen.

Stellen Sie im oberen Menü sicher, dass "Seitenverhältnis beibehalten" aktiviert ist, indem Sie auf das Symbol zwischen den Attributen "Breite" und "Höhe" klicken. Dies bedeutet, dass wenn wir einen dieser beiden Werte ändern, der andere proportional skaliert wird, um sicherzustellen, dass unser Text nicht gequetscht oder gedehnt wird.

Geben Sie nun einen Wert von 600px in das Feld Breite ein und drücken Sie die Eingabetaste. Zentrieren Sie diesen Text mit der zuvor erstellten Mittelführung und stellen Sie sicher, dass er 30 Pixel vom oberen Rand unseres Dokuments entfernt ist.

Die Überschrift muss jetzt etwas gestylt werden, um sie wirklich druckvoll zu machen. Wenden Sie die folgenden Stile auf Ihren Text an:

Ein paar Anmerkungen zu den Ebenenstilen, die wir gerade angewendet haben: Der Schlagschatten hebt den Text ein wenig vom Hintergrund ab und ermöglicht es uns, hellen Text auf hellem Hintergrund zu verwenden, da der Rand dunkler ist. Wenn wir uns den inneren Schatten ansehen, haben wir ihn verwendet, um ein Highlight anstelle eines Schattens zu erstellen. Indem wir die "Größe" auf 0 setzen, erstellen wir eine durchgezogene Linie anstelle des normalerweise sichtbaren diffusen Schattens, dieses Highlight auch oben verstärkt die durch den Gradienten (die von oben kommende Lichtquelle) gegebene Beleuchtung.

Und das ist die Überschrift!

Schritt 5: iPhones

Wir werden jetzt das iPhone in unser Design aufnehmen. Laden Sie Jeff Brodericks großartiges iPhone 4 von Dribbble herunter.

Öffnen Sie nun die PSD und ziehen Sie die gesamte iPhone-Gruppe auf das Dokument, in dem Sie die E-Mail erstellen. Als nächstes müssen wir die Größe des iPhone auf 210 Pixel ändern und dieselbe Methode verwenden, die wir beim Ändern der Größe unseres Überschriftentextes verwendet haben, um sicherzustellen, dass das Seitenverhältnis gleich bleibt. Zentrieren Sie das iPhone und platzieren Sie es direkt unter dem Überschriftentext, wie im Bild unten:

Lassen Sie uns als nächstes unser Dokument ein wenig optimieren. Obwohl unsere Datei zu diesem Zeitpunkt nicht sehr groß sein wird, verringern wir durch die Reduzierung der Anzahl der Ebenen im Dokument nicht nur die endgültige Dateigröße, sondern auch die Unordnung im Dokument (alles gute Nachrichten, wenn Sie Ihre übergeben Dokument auf einen Entwickler.)

Erweitern Sie die iPhone-Gruppe, damit Sie den Inhalt sehen können. Er sollte folgendermaßen aussehen:

Klicken Sie nun mit der rechten Maustaste auf die Gruppe "Body" und klicken Sie auf "Merge Group".

TIPP: Sie können auch cmd / Strg + E mit der ausgewählten Gruppe drücken, um das gleiche Ergebnis zu erzielen.

Löschen Sie nun das Smart-Objekt "Retina Screen" und aktivieren Sie die Sichtbarkeit des Smart-Objekts "Screen". Ihr Ebenenbedienfeld sollte nun folgendermaßen aussehen:

Als nächstes müssen wir einen Screenshot einer App auf den Bildschirm bringen. Sie können das Smart-Objekt auf zwei Arten öffnen: Klicken Sie entweder mit der rechten Maustaste und klicken Sie auf "Inhalt bearbeiten" oder doppelklicken Sie auf die Ebenenminiatur.

Dadurch wird ein neues Dokument nur mit dem Bildschirm geöffnet. Fügen Sie jetzt entweder Ihren App-Screenshot ein oder holen Sie sich einen von Pttrns, einer großartigen Website, die Designmuster in iOS-Apps zeigt.

Als nächstes erstellen wir einen Schatten für das iPhone. Um mehr Tiefe in unser Design zu bringen, verwenden wir keinen Schlagschatten, der den Eindruck erweckt, dass wir das iPhone von oben betrachten. Stattdessen platzieren wir einen Schatten an der Basis des iPhones Machen Sie den Eindruck, als würde das iPhone aufrecht stehen.

Das erste, was Sie tun müssen, ist, eine Ellipse mit dem Ellipsen-Werkzeug zu zeichnen. Diese sollte 210 x 20 Pixel groß sein und so positioniert sein, dass die Mitte ungefähr wie folgt mit der Basis unseres iPhones übereinstimmt:

Es ist an der Zeit, dass dies eher wie ein Schatten aussieht. Klicken Sie zunächst mit der rechten Maustaste auf unsere Formebene, konvertieren Sie sie in ein intelligentes Objekt und benennen Sie die Ebene in "Schatten" um. Jetzt gehen wir zu Filter > Weichzeichnen > Gaußscher Weichzeichner und setzen den Radius auf 5,0 Pixel.

Schritt 6: Weitere iPhones

Unser Design sieht gut aus, ist aber etwas leer. Es ist Zeit, weitere iPhones hinzuzufügen. Der erste Schritt besteht darin, unsere "iPhone" -Gruppe zu duplizieren (damit wir in unserem Dokument etwas einfacher navigieren können und diese neue Gruppe "iPhone 2" nennen). Wenn unsere neue Gruppe ausgewählt ist, transformieren Sie diese Gruppe mit derselben Methode, die wir für die erste iPhone-Gruppe und unseren Überschriftentext verwendet haben, auf 210 Pixel Breite.

Positionieren Sie den unteren Rand unserer "iPhone 2" -Gruppe 20 Pixel höher als die Basis unseres ersten iPhone und 20 Pixel rechts von unserem 130 Pixel großen Lineal. Stellen Sie sicher, dass sich die Gruppe "iPhone 2" jetzt unter der Gruppe "iPhone" befindet. Es sollte ungefähr so aussehen:

Duplizieren Sie die Gruppe "iPhone 2", benennen Sie diese neue Gruppe in "iPhone 3" um und platzieren Sie sie 20 Pixel links von unserem 670 Pixel großen Lineal.

Wir haben also alle drei iPhones platziert, aber alle haben den gleichen Screenshot. Wir haben jedoch ein kleines Problem: Wenn wir in das für den Bildschirm verwendete Smart-Objekt gehen, werden alle drei Screenshots aktualisiert.

Um dies zu umgehen, klicken Sie mit der rechten Maustaste auf das Smart-Objekt "Bildschirm" und klicken Sie auf "Neues Smart-Objekt per Kopie". Löschen Sie dann die erste Ebene "Bildschirm". Führen Sie nun die gleichen Schritte aus, mit denen wir unseren ersten Screenshot mit diesem aktualisiert haben. Wiederholen Sie dies für das andere iPhone. Ihr Dokument sollte nun folgendermaßen aussehen:

Indem wir diese kleineren iPhones hinter unserem ersten und höheren (im 2D-Raum) platzieren, erzeugen wir die Illusion, dass das Design Tiefe hat. Im nächsten Schritt werden wir diesen Effekt verstärken, indem wir notieren, wie Licht und Schatten fallen würden, wenn dies ein Foto wäre.

Schritt 7: Tiefe hinzufügen

Wir haben unsere iPhones eingebaut und die Gesamtkomposition etwas vertieft. Jetzt werden wir ein paar zusätzliche Schritte unternehmen, um dies noch stärker hervorzuheben.

Das erste, was wir tun werden, ist einen Schatten des vorderen iPhone zu erzeugen, der auf die beiden hinteren iPhones fällt. Dupliziere die "iPhone" -Gruppe und nenne sie "Hard Shadow". Führen Sie nun die Gruppe zusammen, indem Sie entweder cmd / Strg + E drücken oder mit der rechten Maustaste auf "Gruppe zusammenführen" klicken. Dadurch wird die Gruppe zu einer einzelnen Rasterebene zusammengefasst, die wir dann bearbeiten können, um unseren Schatten zu erstellen.

Wenn die Ebene "Harter Schatten" ausgewählt ist, rufen Sie das Menü "Farbton / Sättigung" auf. Gehen Sie dazu entweder zu "Bild"> "Anpassungen"> "Farbton / Sättigung" oder drücken Sie "cmd / Strg + U". Schieben Sie dann einfach den Helligkeitswert auf -100 bis Schalten Sie unsere ausgewählte Ebene vollständig schwarz.

Dupliziere die Ebene "Hard Shadow" und benenne diese neue Ebene "Soft Shadow". Erstelle dann eine neue Gruppe mit diesen beiden Ebenen in "Shadows" und platziere sie hinter unserer "iPhone" -Gruppe, aber vor "iPhone 2" und "iPhone 3".

Unsere Schatten sind am richtigen Ort, also müssen wir sie verschwimmen lassen. Wir haben zwei Schattenebenen, unser "harter Schatten" wird ein stärkerer, härterer Schatten sein, viel weniger unscharf als "weicher Schatten", der viel mehr unscharf wird. Dies erzeugt einen realistischeren Schatten als eine einzelne Ebene. Stellen Sie ein Objekt auf Ihren Schreibtisch. Sie sollten einen engen, starken Schatten und einen breiteren, weicheren Schatten sehen.

Wählen Sie die Ebene "Harter Schatten" aus und wenden Sie eine 5-Pixel-Gauß-Unschärfe an. Wählen Sie dann die Ebene "Weicher Schatten" aus und wenden Sie eine 20-Pixel-Gauß-Unschärfe an. Ihre Schatten sollten ähnlich aussehen wie unten gezeigt:

Unser Schatten ist jetzt in, aber wenn wir über die iPhones und unter das Haupt-iPhone schauen, können wir sehen, dass es sich viel stärker ausbreitet als wir wollten und das 3D-Aussehen verzerrt, das wir bisher erreicht haben. Um dies zu lösen, erstellen wir eine Ebenenmaske in unserer Schattengruppe, die den Schatten nur auf die beiden hinteren iPhones beschränkt.

Erweitern Sie die Gruppen "iPhone 2" und "iPhone 3", damit Sie die Ebene "Basis" sehen können. cmd / Strg Klicken Sie auf das Ebenen-Miniaturbild der Basisebene in "iPhone 2", um eine Auswahl zu erstellen. Klicken Sie jetzt bei gedrückter Cmd / Strg + Umschalttaste auf die Basisebene in "iPhone 3". Sie sollten jetzt eine Auswahl für beide hinteren iPhones haben.

Klicken Sie nun auf die Ebenenmaskenschaltfläche mit der ausgewählten Schattengruppe.

Es ist nur noch ein Schritt, um unseren Schatten noch realistischer aussehen zu lassen. Wenn wir die Lichtquelle auf unseren iPhones betrachten, können wir sehen, dass sie von oben kommt. Daher sollte unser Schatten oben schwächer werden und allmählich stärker werden, wenn er niedriger und daher weiter von der Lichtquelle entfernt wird.

Nehmen Sie bei ausgewählter Ebenenmaske das Verlaufswerkzeug mit einem schwarzen bis transparenten Verlauf und stellen Sie die Deckkraft auf 30% ein. Zeichnen Sie nun einen Farbverlauf von der Oberseite des Haupt-iPhones nach unten, etwa zwei Drittel.

TIPP: Denken Sie daran, wenn Sie die Umschalttaste gedrückt halten, wird sichergestellt, dass Ihr Farbverlauf gerade gezeichnet wird!

Schritt 8: Der Boden

Als nächstes werden wir einen künstlichen Boden schaffen, auf dem die iPhones sitzen werden. Dies wird den angestrebten 3D-Effekt erneut verstärken. In diesem Fall bietet es jedoch auch eine visuelle Unterbrechung der Komposition, sodass wir viel nahtloser in unser Raster übergehen können. (Dies ist eine großartige Technik, wenn Sie jemals von drei auf vier Spalten wechseln müssen.)

Erstellen Sie zunächst eine neue Ebene mit dem Namen "Dunkel", platzieren Sie sie unter den iPhone-Gruppen und treffen Sie eine Auswahl mit einer Höhe von ca. 100 Pixel und der gesamten Breite des Dokuments.

Zeichnen Sie nun einen schwarzen bis transparenten Farbverlauf vom unteren Rand dieser Auswahl bis etwa zur Hälfte. (Stellen Sie sicher, dass Sie die Deckkraft auf 100% zurückgesetzt haben, nachdem Sie sie beim Bearbeiten unserer Ebenenmaske auf 30% eingestellt haben!)

Deaktivieren Sie dann die Auswahl. Gehen Sie dazu entweder zu Auswahl > Auswahl aufheben oder drücken Sie cmd / Strg + D.

Bewegen Sie die Basis dieses Verlaufs etwa 20 Pixel unter die Basis des Haupt-iPhones und stellen Sie die Deckkraft der Ebene auf 10% ein. Es sollte ungefähr so aussehen:

Fügen Sie dieser Ebene eine Ebenenmaske hinzu (mit der gleichen Methode, mit der wir zuvor eine zu unserer Gruppe "Schatten" hinzugefügt haben). Zeichnen Sie bei ausgewählter Ebenenmaske einen schwarzen bis transparenten Verlauf von der ersten zur zweiten und von der letzten zur vorletzten Führung, wie unten gezeigt.

Dupliziere diese Ebene, nenne sie "hell" und drücke dann cmd / Strg + T, um die freie Transformation zu aktivieren, klicke mit der rechten Maustaste und kehre vertikal.

Nachdem Sie diese Transformation durch Drücken der Eingabetaste bestätigt haben, öffnen Sie das Menü Farbton / Sättigung wie beim Erstellen unserer Schatten. Stellen Sie die Helligkeit auf +100 ein und klicken Sie auf "OK". Stellen Sie die Deckkraft der Ebene von 10% auf 60% ein und positionieren Sie die Oberseite dieser "hellen" Ebene so, dass sie die Unterseite der "dunklen" Ebene berührt.

Als letzten Schliff werden wir ein Leuchten in unserem Hintergrund erzeugen. Erstellen Sie eine neue Ebene über der Ebene "Hintergrund" und der Ebene "Hintergrundverlauf". Nennen Sie diese neue Ebene "Glühen".

Wählen Sie das Verlaufswerkzeug aus, indem Sie einen weißen bis transparenten Verlauf verwenden, der auf "Radialer Verlauf" eingestellt ist, und zeichnen Sie einen Verlauf, der kleiner als die Leinwandgröße ist.

Stellen Sie dann mit dem freien Transformationswerkzeug sicher, dass die Seiten mit den äußeren Führungen übereinstimmen, die Oberseite mit der Oberseite unseres Dokuments und die Unterseite mit unserer Führung bei 590 Pixel auf der Seite.

Um Ordnung zu schaffen, gruppieren Sie alle bisherigen Ebenen in einer einzigen Gruppe namens "Header".

Schritt 9: Aufruf zum Handeln

Jetzt haben wir unseren Zuschauern mitgeteilt, dass wir unser Produkt auf den Markt gebracht, ihnen einige Screenshots davon gezeigt und sie hoffentlich zum Herunterladen der App vorbereitet haben! Hier kommt ein Aufruf zum Handeln ins Spiel; Ein Gerät (in den meisten Fällen eine Schaltfläche), mit dem der Benutzer Maßnahmen ergreifen kann. In diesem Fall laden Sie unsere App herunter.

Zeichnen Sie mit dem abgerundeten Rechteck-Werkzeug mit einem Eckenradius von 7 Pixel eine neue Form von 255 x 58 Pixel und nennen Sie diese Ebene "Basis". Platzieren Sie es über allen anderen Ebenen in unserem Dokument. Positionieren Sie es in der horizontalen Mitte des Dokuments und 30 Pixel unterhalb der Basis der "dunklen" Ebene, die wir im vorherigen Schritt erstellt haben.

Wenden Sie nun die folgenden Ebenenstile an:

Ihr Button sollte jetzt so aussehen:

Es ist Zeit, dieser Schaltfläche Inhalte hinzuzufügen. Laden Sie zuerst ein iPhone-Symbol von thenounproject.com herunter und öffnen Sie die Datei in Illustrator. Ziehen Sie mit dem Auswahlwerkzeug eine Auswahl über das gesamte Symbol und kopieren Sie sie entweder durch Drücken von cmd / Strg + C oder durch Bearbeiten > Kopieren.

Sie können jetzt Illustrator schließen, zu Photoshop zurückkehren und das Symbol einfügen. Drücken Sie entweder cmd / Strg + V oder Bearbeiten > Einfügen. Das folgende Fenster wird angezeigt. Wählen Sie "Formebene" und klicken Sie dann auf "OK".

Nachdem sich die Form in unserem Dokument befindet, stellen Sie sicher, dass sie mit der Farbe #000000 gefüllt ist, und ändern Sie die Größe auf 41 Pixel (stellen Sie sicher, dass das Seitenverhältnis gesperrt ist). Platzieren Sie sie dann in der vertikalen Mitte 10 Pixel von der linken Seite.

Wir werden dem Symbol jetzt einen eingefügten Look geben, als ob es in den Knopf gedrückt worden wäre. Stellen Sie dazu die Füllung auf 50% ein und wenden Sie die unten gezeigten Ebenenstile an:

Geben Sie das folgende Aussehen:

Wir werden jetzt der Schaltfläche Text hinzufügen, um unserem Publikum mitzuteilen, was das Klicken auf die Schaltfläche bewirkt. Ich habe mich für den Ausdruck "Download im App Shop" entschieden. Damit werden zwei Ziele erreicht: Erstens wird ihnen mitgeteilt, dass die Schaltfläche entweder einen Download startet oder sie irgendwohin bringt, um den Download zu starten, und auch dort, wo er verfügbar ist.

Legen Sie eine Linie wie unten gezeigt über die andere. Ich habe Arial Bold in Weiß #ffffff für beide Textzeilen verwendet. Die obere Zeile ist auf 13,5pt und die untere auf 24pt eingestellt. Zentrieren Sie dies erneut vertikal und platzieren Sie es 15 Pixel rechts vom rechten Rand des Symbols.

Um dem Text ein wenig mehr Pop zu verleihen und ihn besser lesbar zu machen, wenden wir jetzt einen einfachen Schlagschatten an. Verwenden Sie die folgenden Einstellungen für beide Zeilen:

Diese App ist eine kostenpflichtige App. Es ist eine gute Idee, unseren Zuschauern den Preis zu diesem Zeitpunkt zu zeigen, damit sie beim Herunterladen keine böse Überraschung erleben. Wir ermöglichen ihnen nicht nur, jetzt eine fundiertere Entscheidung zu treffen, sondern verhindern auch eine schlechte Erfahrung mit unserem Produkt, was zu einem zufriedenen Kunden führt.

Das erste, was wir tun müssen, ist, unsere "Basis" -Ebene zu duplizieren, diese neue Form "Einschub" zu nennen. Nehmen Sie nun das Rechteck-Werkzeug und setzen Sie es wie unten gezeigt auf "Vom Formbereich subtrahieren".

Zeichnen Sie mit der ausgewählten Vektormaske unserer neuen "Einschub" -Form ein Rechteck, das die gesamte Schaltfläche bis zu 15 Pixel rechts von unserem Text abdeckt.

Wählen Sie nun das "Pfadauswahl-Werkzeug" und klicken Sie in der oberen Leiste auf "Kombinieren".

Stellen Sie als Nächstes die Füllung dieser Ebene auf 20% ein und wenden Sie die folgenden Ebenenstile darauf an. Dadurch entsteht der Eindruck, dass unser Preisbereich in die Schaltfläche eingefügt wird, und hilft, die beiden Bereiche zu unterscheiden.

Erstellen Sie eine neue Textebene mit dem Preis Ihrer App. Ich habe die Option "Hochgestellt" im Zeichenbereich verwendet, um die kleineren Zahlen zu generieren. Die verwendete Farbe war # b6d9ce, und die restlichen Einstellungen für den Text werden unten angezeigt:

Zentrieren Sie diesen Preis horizontal und vertikal, fügen Sie diese Ebenen einer neuen Gruppe mit dem Namen "CTA" hinzu, und Ihre Schaltfläche sollte folgendermaßen aussehen:

Schritt 10: Hinzufügen von Inhalten

Bis zu diesem Punkt sieht unsere E-Mail hübsch aus, aber wir konnten unserem Publikum nichts sagen. Wir müssen Text hinzufügen.

Zeichnen Sie ein neues abgerundetes Rechteck mit einem Randradius von 7 Pixel mit den Abmessungen 600 x 168 Pixel in Weiß(#ffffff) und platzieren Sie es 30 Pixel unter unserem Aufruf zum Handeln. Nennen Sie diese neue Ebene "Basis".

Wir haben den Hauptcontainer für unseren Text in, aber er ist sehr farblich nah an unserem Hintergrund, wir müssen ihn ein wenig hervorheben. Wenden Sie die folgenden Ebenenstile an, um einen zusätzlichen Schlag zu erzielen:

Dupliziere nun die "Basis" -Ebene und nenne die neue Ebene "Maske". Nehmen Sie das Rechteck-Werkzeug und ziehen Sie ein subtrahierendes Rechteck über die rechte Hälfte der Maskenebene. Dabei wird dieselbe Methode verwendet, mit der wir den Einschubabschnitt für unseren Aufruf zum Handeln erstellt haben. (Verwenden Sie die zu Beginn erstellten Hilfslinien, um zu zeigen, wo sich das Zentrum befindet.)

Wir werden diese "Masken" -Ebene verwenden, um eine Schnittmaske für Screenshots der App zu erstellen. Klicken Sie zuerst mit der rechten Maustaste auf die Ebene "Maske" und klicken Sie auf "Ebenenstil löschen". Fügen Sie dann einen Screenshot Ihrer App über der Ebene "Maske" ein. Klicken Sie mit der rechten Maustaste auf die Screenshot-Ebene und klicken Sie auf "Schnittmaske erstellen". Dadurch wird sichergestellt, dass nur die Bereiche über unserer Ebene "Maske" sichtbar sind.

Positionieren Sie nun Ihren Screenshot neu, sodass die Funktion, die Sie anzeigen möchten, klar ist und die Aufmerksamkeit Ihres Publikums auf sich zieht.

Um sicherzustellen, dass hellere Screenshots nicht ins Weiß bluten, werden wir für unseren Text ein kleines inneres Leuchten auf die Ebene "Maske" anwenden. Das ist eines der großartigen Dinge beim Ausschneiden von Masken. Alle darüber liegenden Ebenen erben die Ebenenstile der Maskenebene. Verwenden Sie einfach die folgenden Einstellungen:

Gruppieren Sie die Ebene "Maske" und Ihre Screenshot-Ebene in einer neuen Gruppe namens "Screenshot". Dann dupliziere die "Basis" -Ebene. Positionieren Sie es oben im Ebenenbedienfeld und wenden Sie bei einer Füllmenge von 0% den folgenden Ebenenstil an:

Jetzt haben wir ein Bild platziert, wir müssen unseren Text hinzufügen. Schalten Sie die Hilfslinien erneut ein und zeichnen Sie ein Textfeld (indem Sie ein Feld mit dem Textwerkzeug herausziehen, anstatt zu klicken), das zwischen der Hilfslinie rechts von unserer mittleren Hilfslinie und der vorletzten Hilfslinie verläuft. Stellen Sie dann oben einen Abstand von 30 Pixel sicher und Boden der Box.

Geben Sie eine Überschrift für dieses erste Feature ein. Ich habe meinen Titel in Arial Bold, 24pt und in der Farbe # 15ae7e festgelegt.

Für den Body-Text habe ich ihn wieder in Arial gesetzt, diesmal aber regelmäßig. Dieser Text war bei 13pt und der Farbe #999999. Ihr E-Mail-Design sollte jetzt ungefähr so aussehen:

Jetzt müssen wir zwei weitere dieser Funktionsblöcke hinzufügen. Der einfachste und schnellste Weg, dies zu tun, besteht darin, alle Ebenen, aus denen dieses erste Feature-Feld besteht, zu gruppieren und diese Gruppe "Feature 1" zu nennen.

Klicken Sie nun mit der rechten Maustaste auf die Gruppe "Feature 1" und klicken Sie auf "Gruppe duplizieren". Nennen Sie die neue Gruppe "Feature 2" und platzieren Sie sie 30 Pixel unter dem ersten Feature. Wiederholen Sie diesen Schritt, um eine dritte Feature-Box zu erstellen.

Mit den gleichen Methoden, die wir zum Erstellen des ersten Screenshots verwendet haben, tauschen Sie die Screenshots sowohl in "Feature 2" als auch in "Feature 3" aus und aktualisieren Sie dann auch den Text in jedem dieser Screenshots.

Der Funktionsbereich sieht fertig aus, wir können jedoch einen nützlichen psychologischen Trick anwenden, um die Chancen unseres Publikums zu verbessern, den von uns geschriebenen Inhalt zu lesen, und auch die Zusammensetzung Ihrer E-Mail ein wenig auszugleichen.

Wir werden die mittlere Funktion umdrehen, den Screenshot nach rechts und den Text nach links verschieben. Dies verhindert, dass der Betrachter der E-Mail die Überschriften scannt, und bewegt sie stattdessen über die E-Mail, wodurch wiederum viel mehr Text gelesen wird.

Bewegen Sie zuerst den Text in "Feature 2" nach links und richten Sie ihn an der zweiten Führung und der Führung unmittelbar vor der mittleren Führung aus. Wählen Sie dann die Ebene "Maske" aus, gehen Sie zur freien Transformation, klicken Sie mit der rechten Maustaste und klicken Sie auf "Horizontal spiegeln". Nehmen Sie dann die Gruppe "Screenshot" und verschieben Sie sie nach rechts.

Schritt 11: Ein letzter Aufruf zum Handeln

Wir werden unter unseren Funktionen einen weiteren Aufruf zum Handeln hinzufügen. Dies sollte die Effektivität unserer E-Mail-Kampagne verbessern - vorausgesetzt, wir haben die Aufmerksamkeit unserer Zielgruppe, indem wir ihnen Funktionen zeigen, die sie wahrscheinlich mehr wissen möchten. Indem wir eine Schaltfläche platzieren, mit der sie genau das direkt nach den Funktionen tun können, optimieren wir die Erfahrung.

Duplizieren Sie die zuvor erstellte "CTA" -Gruppe und platzieren Sie sie 30 Pixel unter den Features und oben in der Ebenenpalette. Löschen Sie dann alle Ebenen mit Ausnahme der ersten "Basisebene" und der beiden Textebenen.

In diesem Fall wird unser zweiter Aufruf zum Handeln die Benutzer dazu bringen, die Apps-Website zu besuchen. Aus diesem Grund lautet mein neuer Text "Möchten Sie mehr wissen? Besuchen Sie unsere Website". Sobald Sie den Text geändert haben, platzieren Sie ihn 10 Pixel vom linken Rand der Schaltfläche entfernt.

Wir werden jetzt rechts auf der Schaltfläche ein Symbol hinzufügen, dieses Computersymbol aus dem noun projekt herunterladen und es mit der gleichen Methode in Photoshop importieren, mit der wir das iPhone-Symbol in unser Dokument aufgenommen haben.

Ändern Sie die Größe auf 41 Pixel und platzieren Sie es 10 Pixel rechts von der Schaltfläche.

Kehren Sie nun zu unserer ersten "CTA" -Gruppe zurück, klicken Sie mit der rechten Maustaste auf das iPhone-Symbol und klicken Sie auf "Ebenenstil kopieren". Gehen Sie zu dem Symbol, das Sie gerade importiert haben, klicken Sie mit der rechten Maustaste und drücken Sie "Ebenenstil einfügen". Dies wird das Styling von unserem ersten Knopf wiederholen und unserem Design ein zusammenhängendes Gefühl verleihen.

Schritt 12: Die Fußzeile

Es gibt ein paar Informationen, die wir noch aufnehmen müssen. Einige davon sind gesetzlich vorgeschrieben, z. B. ein Link zum Abbestellen. Andere sind einfach nur nett und tragen dazu bei, dass mehr Personen sich für den Newsletter anmelden (z. B. die Angabe, warum dies der Fall ist) E-Mail erhalten).

Das erste, was wir tun müssen, ist eine 600 Pixel breite Linie 30 Pixel unter unserer Schaltfläche zu zeichnen - dies dient dazu, eine Aufteilung des Inhalts anzuzeigen. Zeichnen Sie diese Linie in Schwarz (# 000000) und stellen Sie die Deckkraft auf 20% ein.

Zeichnen Sie nun ein Textfeld von der zweiten bis zur vorletzten Anleitung, 10 Pixel unterhalb der gerade gezeichneten Linie. Ich habe dieses Textfeld mit folgendem Text gefüllt:

Sie erhalten diese E-Mail, weil Sie sich dafür entschieden haben, Updates zum Start von Hipster zu erhalten. Wenn Sie sich von zukünftigen Updates abmelden möchten, klicken Sie einfach hier.

Die Einstellungen, die ich verwendet habe, sind unten, die Textfarbe ist #808080.

Abschließend

Unsere E-Mail-Vorlage ist jetzt vollständig! Hoffentlich haben Sie einige großartige Techniken gelernt, die Sie auf andere Projekte übertragen können.

Ich würde empfehlen, sich mit Schnittmasken und intelligenten Objekten vertraut zu machen, wenn Sie dies noch nicht getan haben. Sie können Ihren Workflow wirklich beschleunigen und einige großartige Effekte erzielen, die mit anderen Methoden nur schwer zu erzielen sind. Das Beste ist, dass sie nicht destruktiv sind, was bedeutet, dass Sie sie später bei Bedarf ändern können.

Danke fürs Lesen!