Share
Was Sie erstellen werdenIn diesem Lernprogramm erfahren Sie, wie Sie mit Sketch eine einfache und mutige E-Mail-Newslettervorlage erstellen.
Wenn Sie sich mit dem Versand von E-Mail-Newslettern beschäftigen, sollten sie als Schlüsselpunkte Ihrer Marketingstrategien betrachtet werden. Sie geben uns direkten Kontakt mit potenziellen Kunden, aber wir müssen darauf achten, wie wir sie gestalten, um richtig zu kommunizieren, Aufmerksamkeit zu erregen und (vor allem) unsere Ziele zu erreichen.
Hier ist das Briefing hinter dieser Entwurfsübung: Stellen wir uns vor, wir sind ein Unternehmen, das Online-Lernressourcen anbietet. Wir möchten mit unseren potenziellen Kunden in Kontakt treten und die Vorteile der Nutzung unserer Plattform offenlegen. In dieser Situation können wir mit Sketch einen sauberen, aber effektiven E-Mail-Newsletter erstellen, um unsere Anforderungen zu erfüllen.
Wir werden ganz von vorne anfangen und die gängigsten Werkzeuge, die wir in Sketh haben, verwenden, um unsere Vorlage zu erstellen. Sie werden staunen, wie einfach dies sein wird!
Um dieses Tutorial erfolgreich abzuschließen, müssen Sie die verfügbaren Anhänge herunterladen. In der ZIP-Datei finden Sie Text und Bilder, die wir in den folgenden Schritten verwenden werden.
Ich werde verwenden Helvetica Neue als Standardschriftart. Wenn Sie die Schriftart nicht zur Verfügung haben, versuchen Sie es mit Helvetica oder Arial.
Hinweis: Denken Sie daran, ein verantwortungsbewusster Designer zu sein! Damit meine ich: Denken Sie daran, Ihre Ebenen mit beschreibenden Namen umzubenennen, gruppieren Sie die Ebenen und organisieren Sie den Inhalt. Ihre Kollegen werden es Ihnen danken, vertrauen Sie mir.
Sind Sie bereit? Lass uns anfangen!
Beginnen wir mit dem Erstellen einer neuen Zeichenfläche. Gehe zu Einfügen> Zeichenfläche (A) aus dem Hauptmenü oder der Symbolleiste. Klicken Sie nun in Sketchs Leinwand, und ziehen Sie sie 620 x 3000px artboard. Wenn Sie Schwierigkeiten haben, denken Sie daran, dass Sie diese Werte über das Feld ändern können Inspektor auf der rechten Seite des Bildschirms. Sie können den Namen der Zeichenfläche auch von ändern Layer-Liste auf der linken Seite des Bildschirms.
SpitzeEin gängiger Ansatz beim Entwerfen von E-Mail-Vorlagen besteht darin, mit einer Dokumentbreite von etwa 550 bis 650 Pixel zu beginnen. Erfahren Sie mehr über E-Mail-Marketing in diesem großartigen Artikel von Nicole Merlin.
Lassen Sie uns nun einige Handbücher erstellen, die wir als Referenz verwenden, um unsere Elemente richtig zu platzieren, was zu einem soliden und ausgewogenen Design führt. Wo sollten wir die Guides platzieren? Lass uns ein wenig nachdenken:
Eine E-Mail-Vorlage kann auf viele Arten gestaltet werden. Eine der häufigsten ist das Erstellen eines 1-Spalten-Layouts. Dieses Layout ermöglicht es uns, den Benutzer auf einfachere Weise zu führen, indem ein vertikaler Fluss von Inhaltsblöcken nacheinander verwendet wird. Darüber hinaus haben wir bei der Konstruktion mit einer einspaltigen Struktur die Möglichkeit, diese problemlos an verschiedene Geräte anzupassen.
In dieser Übung üben wir jedoch etwas mehr Übung, um ein dreispaltiges Layout zu erstellen. Es tut uns leid!
Aktivieren Sie die Regeln und beginnen Sie mit der Erstellung von Leitfäden. Gehe zu Ansicht> Lineale anzeigen (^ R). Klicken Sie nun auf das horizontale Lineal bei 30px, 200px, 225px, 395px, 420px und schließlich bei 590px. Sie können die Lineale verschieben, indem Sie sie ziehen und verschieben. Sie können auch Ihre eigenen Reiseführer auf ähnliche Weise verschieben. Um Hilfslinien zu entfernen, ziehen Sie sie über die Lineale hinaus.
Der Header unserer E-Mail ist sehr wichtig. Es ist der erste Kontakt, den wir mit dem Benutzer haben, und deshalb müssen wir unser Hauptangebot kommunizieren. Es ist auch eine gute Entscheidung, den Namen des Unternehmens und einen guten Slogan anzuzeigen, gefolgt von einem CTA-Button, der die Registrierung oder das Erhalten weiterer Informationen über uns ermutigt.
Zuerst sollten wir ein hinzufügen Vorläufer, Ein einfacher Textlink, über den der Benutzer auf die Webversion unseres Newsletters zugreifen kann, falls sein E-Mail-Client ihn nicht korrekt anzeigen kann.
Wähle aus Textwerkzeug (T) Klicken Sie auf eine beliebige Stelle der Leinwand, um eine Textebene einzufügen. Beachten Sie, wie die Inspektor wurde geändert, um alle Eigenschaften der Textebene anzuzeigen. Geben Sie "Probleme beim Anzeigen dieser E-Mail" ein. Online ansehen “.
Ändern Sie die Farbe in # 8FA6B3 und setzen Größe zu 11px. Wählen Sie jetzt nur den Teil "Online ansehen" aus und ändern Sie die Farbe in # FF736D. Lass es ausgewählt. Drücke den Optionen Symbol neben Farbe und klicken Sie auf den zweiten Dekoration Option, um den Text zu unterstreichen.
Bewegen Sie das Objekt vom oberen Rand der Zeichenfläche und lassen Sie a 30px Spanne.
Ein ... kreieren 620x500px Rechteck mit der Rechteck (R) Tool und platzieren Sie es direkt unter dem Textlink und verlassen Sie es 30px zwischen ihnen. Wählen Sie das Rechteck aus und ändern Sie die Farbe in # F5F7F8 Verwendung der Inspektor Panel. Deaktivieren Sie das Kontrollkästchen Grenzen Option, um es zu entfernen.
Öffnen Sie die svg-Datei „icons“, die diesem Lernprogramm beigefügt ist. Wählen Sie alle Symbole aus, kopieren Sie sie und fügen Sie sie in das Dokument ein, in dem unsere Vorlage erstellt wird. Wir werden sie verwenden, um den Hintergrund unseres Headers zu dekorieren.
Ich habe die Ikonengruppe auf gesetzt X = -50 und Y = 0 (suchen Position Eigenschaften im Inspektorfenster), können Sie jedoch selbstständig anpassen.
Spitze: Sie werden sehen, dass sich einige Teile unserer Symbole außerhalb der Zeichenfläche befinden und von Sketch automatisch ausgeblendet werden. Nichts ist falsch. Dem Programm ist bekannt, dass Sie eine Zeichenfläche verwenden, um Ihren Designbereich einzuschränken, sodass die Teile der Elemente zwischen der Zeichenfläche und dem Rest der Leinwand verborgen werden. Versuchen Sie, die gesamte Gruppe außerhalb der Zeichenfläche zu verschieben, um sie vollständig anzuzeigen. Siehst du? Vergessen Sie nicht, es wieder in seine ursprüngliche Position zu bringen!
Wählen Sie in der Ebenenliste den Ordner "Icons" und das zuvor erstellte Rechteck aus. Gruppieren Sie sie mit einer der verfügbaren Optionen in Sketch. Verwenden Sie zum Beispiel die Gruppe Symbol in der Werkzeugleiste oder benutze die (⌘-G) Tastenkombination, um es zu tun. Bewegen Sie die Gruppe am unteren Rand nach unten Layer-Liste, Benennen Sie es in etwas wie "Hintergrund" um und verwenden Sie den kleinen Pfeil links, um den Inhalt anzuzeigen.
Wählen Sie das Rechteck aus und gehen Sie zu Ebene> Als Maske verwenden.Warten Sie auf die Magie. Die Skizze verwendet das Rechteck, um jede darüber liegende Ebene zu maskieren Layer-Liste. Wenn wir zuvor den zu maskierenden Inhalt und die Maske zusammen gruppiert haben, haben wir keine Auswirkungen auf die Elemente außerhalb der Gruppe. Ziemlich nützlicher Tipp!
Jetzt sollten die Icons bereits wie folgt maskiert sein:
Öffnen Sie die "Logo" -Svg-Datei und kopieren Sie das Logo in unser Dokument. Ich weiß, dass es zu groß ist Inspektorentafel seine Abmessungen ändern in 90 x 31px. Verschiebe es nach X = 265, Y = 100.
Erstellen Sie eine neue Textebene und setzen Sie deren Breite auf 560px. Verschiebe es nach X = 30 und Y = 220. Bearbeiten Sie nun den Text und ändern Sie ihn in "Ihr Ort, um reale Fähigkeiten zu entdecken". Legen Sie seine Eigenschaften auf fest Gewicht = Fett, Farbe = # 424242, Größe = 48, Linie = 45 und Ausrichtung = Mitte. Wählen Sie nur das "echte" Wort aus und ändern Sie es in kursiv.
Jetzt entwerfen wir unseren primären Aktionsknopf. Zeichne ein 220 x 45 px Rechteck. Gehen Sie zum Inspektorfenster und legen Sie die Einstellungen fest Radius zu 30. Veränderung Füllen zu # D92B2B. Bewegen Sie es unter dem Slogan-Text und lassen Sie es herum 50px zwischen den beiden Objekten.
Unser Button macht keinen Sinn, wenn wir ihn leer lassen! Wir brauchen ein Aufruf zum Handeln Text, ein paar Worte, die sich auf den Hauptsatz konzentrieren und die Aufmerksamkeit des Benutzers auf sich ziehen. Ich würde gerne mehr über diese Art von Marketing sprechen, aber um etwas zu beschleunigen, erstellen wir einfach eine Textebene und geben dann "Join us from 10 $ / month" ein..
Ändern Sie die Eigenschaften in Gewicht = Fett, Farbe = #FFFFFF und Größe = 15. Verschiebe es nach X = 225, Y = 375, Nur in unserem abgerundeten Rechteck.
Wir werden diese Schaltfläche später noch einmal verwenden, es ist also eine gute Idee, sie als Symbol zu speichern. Gruppieren Sie die Text- und Rechteckebenen und klicken Sie auf Symbol erstellen Option aus der Hauptsymbolleiste. Beachten Sie, wie der Ordner auf der Layer-Liste hat sich von blau zu lila geändert.
Ich denke, wir brauchen etwas mehr Kontrast zwischen dem Vordergrundinhalt und dem Hintergrundbild, also nehmen wir eine kleine Änderung vor. Gehe zum Layer-Liste, Erweitern Sie den Ordner Hintergrund und duplizieren Sie das Rechteck, mit dem Sie die Hintergrundsymbole maskieren. Bewegen Sie es an den Anfang der Gruppe, gehen Sie zu Inspektor Panel und ändern Mischen zu Erleichtern und Opazität zu 50%. Am Ende solltest du so etwas bekommen:
Unser Header ist fertig!
Jetzt, da wir die Aufmerksamkeit des Benutzers haben, müssen wir ein wenig über uns und unsere Dienstleistungen sprechen. Wer wir sind? Was machen wir? Wir müssen diese Fragen direkt und präzise beantworten und versuchen, einige zusätzliche Vorteile bei der Nutzung unserer Plattform zu zeigen.
Erstellen Sie zwei neue Textebenen. Stellen Sie ihre Breite zu 480px. Sie können eingeben, was Sie möchten, aber ich habe den Text verwendet, den Sie in der angehängten Textdatei finden.
Erledigt? Verwenden Sie nun die folgenden Positionen und Eigenschaften:
Zeichne ein 100px breite Linie (Einfügen> Form> Linie) und eingestellt Dicke zu 2px und Randfarbe zu #E24A4A. Platzieren Sie es zwischen den beiden Textebenen und lassen Sie dabei einen Abstand von 25px zwischen jedem Element. Denken Sie daran: Wenn Sie die Taste drücken Alt Wenn Sie den Cursor bewegen, können Sie die Abstände in Pixel zwischen den ausgewählten Elementen sehen.
Wir werden die vorherige Struktur in diesem Tutorial einige Male wiederholen. Wählen Sie aber zunächst die Linie und die Textebenen aus und gruppieren Sie sie. Denken Sie daran, organisiert zu sein und geben Sie ihm einen Namen. Ich habe "Erster Block" verwendet.
Wählen Sie die Textebene „Online suchen…“ aus, und klicken Sie auf Inspektorentafel und erstellen Sie einen neuen Textstil, indem Sie auf "Keine Textstile" klicken Neuen Textstil erstellen. Machen Sie dasselbe mit der zweiten Textebene. Jetzt wird jede mit diesen Stilen verknüpfte Ebene sofort aktualisiert, wenn Sie ihre Eigenschaften bearbeiten.
Hinweis: Beachten Sie, dass Sketch keine Textstile speichern kann, auf denen mehrere Schriftgrade auf derselben Ebene angewendet werden. Wenn ich das sage, werde ich für dieses Tutorial keine Stile verwenden. Wenn Sie mehr über Stile erfahren möchten, lesen Sie unseren A-zu-Z-Leitfaden für Sketch.
Öffnen Sie die Svg-Datei "highlights-icons". Kopieren Sie die drei Symbole, die Sie finden, in das Dokument und fügen Sie sie in Ihr Design ein. Verwenden Sie die bereits vorhandenen Hilfslinien, um sie so auszurichten, als würden Sie ein dreispaltiges Layout direkt unter dem vorherigen Block verwenden. Stellen Sie sie nicht zu nahe an den Block, lassen Sie den Leerraum herum 40px. Wenn Sie Hilfe benötigen, schauen Sie sich das folgende Bild an:
Erstellen Sie drei 170px breite Textebenen mit Helvetica Neue Bold, Größe = 15, Linie = 18, Farbe = # 424242 und Ausrichtung = Mitte. Legen Sie diese Elemente um 30px Verwenden Sie dazu die Anleitungen unter den Symbolen und beginnen Sie mit der Eingabe, oder kopieren Sie den Text aus der angehängten Datei!
Ein weiterer Block ist fertig!
Ein übliches Merkmal in Newslettern ist das Versenden der neuesten Artikel oder Inhalte, an denen sich die Leser interessieren würden. Nach unserem primären CTA und dem Teil, in dem wir ein wenig über uns selbst sprechen, erstellen wir einen Block, in dem wir die neuesten Lektionen zeigen, in denen wir verfügbar sind unsere Lernplattform.
Beginnen Sie mit dem Duplizieren des "ersten Blocks", den Sie bereits gemacht haben. Lege es unter die vorherigen Blöcke, 40px Rand und verwenden Sie den Inhalt im .TXT Datei, um die Textebenen zu ändern. Es sollte ungefähr so sein:
Gehen Sie zum Ordner „Unterricht“ in den Quelldateien und importieren Sie alle Bilder in Ihr Dokument Einfügen> Bild. Sie haben jetzt sieben Bilder mit einer Breite von 620 Pixeln. Wir werden einen von ihnen in voller Größe verwenden und die Größe des Rests ändern, um in unser 3-Spalten-Layout zu passen.
Fügen wir etwas Text für unser großes Image hinzu. Fügen Sie drei Textebenen ein, verwenden Sie die Textdatei noch einmal und legen Sie die Eigenschaften und Positionen wie folgt fest:
Für die anderen Lektionen, die wir zeigen, benötigen wir noch einige Textebenen. Lass uns das nochmal machen; Fügen Sie drei Textebenen ein, geben Sie ein, was Sie möchten, oder kopieren Sie Texte aus der bereitgestellten Datei. Legen Sie ihre Eigenschaften und Positionen anhand des folgenden Bildes als Referenz fest und wiederholen Sie den Vorgang fünfmal, um die restlichen Lektionen zu beenden.
Ein weiterer Block ist fertig. Nehmen Sie sich einen Moment Zeit, um Ihre Ebenen zu organisieren, und fahren Sie dann mit dem nächsten Teil fort!
Ich weiß, dass unsere E-Mail-Vorlage… lang ist. Aber es ist kein Problem, wenn wir wissen, wie wir damit umgehen sollen! Die Benutzer müssen den gesamten Inhalt nach unten durchblättern. Es ist daher eine gute Idee, einen einfachen Aufruf zu einem weiteren Aufruf zur Aktion anzubieten, ohne den gesamten Weg zurück zum Anfang der E-Mail zu blättern.
Erinnern Sie sich an den "ersten Block", den Sie zuvor kopiert haben? Bewegen Sie es erneut, bewegen Sie es unter dem "Unterrichtsblock" und lassen Sie dabei einen Rand frei 40px und ändern Sie den Inhalt wie folgt:
Einfügen 620x243px Rechteck und füllen mit # F5F7F8. Fügen Sie nun eine Textebene hinzu und ändern Sie deren Inhalt und Eigenschaften anhand des folgenden Bildes als Referenz:
Gehe zu Einfügen> Symbole und wählen Sie die zuvor erstellte CTA-Schaltfläche. Lege es unter den vorherigen Absatz.
Wir sind fast fertig!
Ok, wir haben unseren Hauptblock und einen Aufruf zum Handeln. Als Nächstes haben wir einige sekundäre Nachrichten und ein wenig mehr Inhalt hinzugefügt. Später sprachen wir erneut über unser Hauptangebot und wiederholten den Aufruf zum Handeln. Jetzt ist es an der Zeit, die Fußzeile zu entwerfen und unsere Vorlage fertigzustellen!
Ein ... kreieren 620x130px Rechteck. Fülle es mit # 555E68 und lege es unter den CTA-Block. Als nächstes erstellen Sie eine andere 620x45px Rechteck und füllen mit # 383E44. Sie sollten mit so etwas enden:
Importieren Sie die „logo-white“ -Datei in Ihr Dokument und verschieben Sie sie nach X = 265 und Y = 2787.
Fügen wir den abschließenden Text hinzu. Fügen Sie drei Textebenen ein und legen Sie ihre Eigenschaften und Positionen wie folgt fest:
Dies ist nicht notwendig, aber Sie können die Höhe der Zeichenfläche nur an den Platz anpassen, den Sie wirklich benötigen. Sie können dies tun, indem Sie es im auswählen Layer-Liste und seine Höhe auf dem ändern Inspektor Panel. Ich habe es in geändert Höhe = 2937px.
So sollte das Endprodukt aussehen.
Ich hoffe, dir hat dieses Tutorial gefallen. Lassen Sie mich wissen, wenn Sie stecken bleiben oder nach etwas fragen müssen. Hast du eine Idee für mein nächstes Tutorial? Hinterlasse einen Kommentar! Ich freue mich darauf zu sehen, wie es Ihnen geht!
Accentsconagua