Wenn es einen Aspekt der Arbeit mit Illustrator gibt, der mir wirklich Spaß macht, ist das Konvertieren von Strichgrafiken in SVG-Bilder für Mobilgeräte oder das Web. Über das Menü Exportieren> Exportieren und um ehrlich zu sein, war die Funktion "Für Web speichern" - "Exportieren"> "Für Web speichern" nicht ganz einfach zu bedienen.
Das Konvertieren einer Zeichnung in das .svg-Format öffnete ein ziemlich einschüchterndes Dialogfeld, das für Benutzer, die sich mit diesem Workflow beschäftigen, eine verwirrende Auswahl an Optionen bietet, ganz zu schweigen davon, dass es mehrere .svg-Formate gab und nur eines davon das richtige war Format. Nachdem Sie sich an diesen Workflow gewöhnt hatten, war dies keine große Sache, aber die Lernkurve war steil.
Mit der neuen Funktion "Exportieren für Bildschirme" - Exportieren> Exportieren für Bildschirme - und dem Asset-Export-Bedienfeld, die im Juni 2016 in Illustrator CC 2015 eingeführt wurden, hat sich dies geändert. In diesem "How To" werde ich Ihnen zeigen, wie Sie beide verwenden können Eigenschaften. Lass uns anfangen.
01 von 04
So greifen Sie auf den Export für Bildschirme in Adobe Illustrator CC 2015 zu
Ich bin Illustrator-Benutzer seit Illustrator 88 und ich glaube, Sie können meinen Widerwillen verstehen, Illustrator als ernsthaftes Design-Tool für Web- und mobile Oberflächen und Projekte zu betrachten.
Als Artboards in der CS4-Version 2008 eingeführt wurden, dachte ich, dass dies eine interessante Ergänzung der Anwendung war. Als ich zum ersten Mal die mittlerweile veraltete Funktion "Für Web speichern" in Illustrator sah, fand ich sie wieder interessant, aber ich fand, dass die gleiche Funktion in Adobe Fireworks mehr mit Webgrafiken als mit Illustrator ausgerichtet war.
Mit der Einführung eines Mobile-First-Ansatzes für das Design und der zunehmenden Abhängigkeit von SVG-Bildern für mobile Projekte war Illustrator mein Ziel für SVG und wurde zu einem wichtigen Stopp im UI-Design-Workflow.
Wenn ich jedoch Assets für Mobilgeräte exportieren muss, sind Sketch 3 und Photoshop CC 2015 meine Werkzeuge. Illustrator hat die Liste im Juni 2016 mit dem wirklich raffinierten Export for Screens-Menü eingegeben.
Im obigen Beispiel habe ich zwei Bildschirme für ein iPhone, die sich auf separaten Artboards mit den Namen „Home“ und „Places“ befinden. Um sie auszugeben, habe ich Datei> Exportieren> Für Bildschirme exportieren ausgewählt. Das Dialogfeld Export für Bildschirme wird geöffnet.
02 von 04So verwenden Sie das Dialogfeld Export für Bildschirme
Wenn das Dialogfeld angezeigt wird, klicken Sie auf die zu wählenden Zeichenflächen. Es wird dann ein Häkchen gesetzt. Sie können auch auf den Namen der Zeichenfläche doppelklicken, um sie auszuwählen und zu ändern. Dies ist eine gute Sache, wenn Sie wissen, ob Ihre Zeichenflächen „Artboard 1“ und „Artboard 2“ heißen, was Ihnen ehrlich gesagt nichts sagt.
Im Bereich Auswählen haben Sie drei Möglichkeiten:
- Alles: Diese Auswahl exportiert jede Zeichenfläche im Dokument als separate Datei.
- Angebot: Geben Sie eine Reihe von Zeichenflächen ein, die exportiert werden sollen. Dies ist besonders nützlich für Projekte mit einigen Dutzend Zeichenflächen.
- Vollständiges Dokument: Wenn Sie diese Option auswählen, werden alle Zeichenflächen in einem einzigen Dokument zusammengefasst.
Im Bereich Exportieren nach können Sie den Zielordner für die Ausgabe auswählen. Der Standardordner ist der aktuelle Speicherort des Illustrator-Dokuments.
Bei den Formaten geschieht die „Magie“. Sie werden feststellen, dass es drei Icons gibt - iOS. Android und ein Gear. Die ersten beiden sind selbsterklärend. Das Zahnradsymbol öffnet die Formateinstellungen, mit denen Sie steuern können, wie die einzelnen Dateiformate in der Liste optimiert werden. Diese Einstellungen sind „formatspezifisch“. Wenn Sie Ihre Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche Einstellungen speichern. Diese Änderungen werden auf die auszugebenden Formate angewendet.
Wenn Sie sich für iOS oder Android entscheiden, wird die Liste mit allen auf dieser Plattform verfügbaren Auflösungen angezeigt. In der iOS-Auflistung werden die Skalierungsfaktoren für das Retina-Display angezeigt, und die Android-Auswahl wird Skalen von 0,75x bis 4x aufweisen, die praktisch jedes Android-Gerät auf dem Markt unterstützen.
Wenn ein Format angezeigt wird, das Sie entfernen möchten, klicken Sie auf das „x“. Wenn Sie eine hinzufügen möchten, klicken Sie auf die Schaltfläche + Skala hinzufügen.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Artboard exportieren. Eine Fortschrittsleiste zeigt Ihnen, wenn der Vorgang abgeschlossen ist.
03 von 04Verwenden der Dateien für den Export von Bildschirmen aus Adobe Illustrator CC 2015.
Wenn Sie die Ergebnisse des Exports für Bildschirme auschecken, werden Sie feststellen, dass Illustrator eine reduzierte Version jedes Bildschirms ausgegeben hat. Auf der Oberfläche scheint dies etwas schwach zu sein, insbesondere wenn Sie erwartet haben, dass Illustrator alle Teile und Teile als Bilder exportiert hat.
Wenn Sie einen Schritt zurücktreten und einen Moment darüber nachdenken, ist dies genau das, was Sie brauchen, weil Sie diese Ausgabe in einer Prototyping-Anwendung wie Adobe Experience Design, Principleformac, Atomic.io, UXPin oder einer anderen Prototyping-Anwendung verwenden können
In diesem Beispiel verwende ich Adobe Experience Design (XD), um einen einfachen Klick zu erstellen. Der erste Schritt im Prozess bestand darin, die Größe des iPhone 6 auszuwählen, die den Abmessungen der Illustrator-Benutzeroberfläche entsprach
Als die Benutzeroberfläche geöffnet wurde, wählte ich das Zeichenwerkzeug aus und klickte einmal auf das Pasteboard, um eine weitere Zeichenfläche hinzuzufügen. Ich nannte sie dann „Zuhause“ und „Orte“, wählte jede Zeichenfläche aus und importierte das PNG-Bild aus Illustrator in die Zeichenfläche.
Um die „Hotspots“ für das Klicken mit der Maus zu erstellen, habe ich ein Rechteck über der Schaltfläche „Durchsuchen“ auf dem Startbildschirm gezeichnet und die Füll- und Randwerte auf none festgelegt, indem ich diese Eigenschaften im Eigenschaftenbedienfeld abwähle. Dasselbe habe ich mit der Schaltfläche Zurück auf der Seite Orte getan.
Um die Interaktivität hinzuzufügen, wählte ich den Prototypmodus aus und klickte dann auf den "Hotspot". Dann zog ich den Pfeil (Draht genannt) auf die Places-Seite und stellte das Übergangsziel an den Places, die Bewegung auf Push Left (Links drücken), die Lockerungszeit und die Dauer des Übergangs auf 0,6 Sekunden.
Ich habe diesen Schritt mit dem Hotspot auf der Seite "Orte" wiederholt. Der einzige Unterschied war, dass der Übergang auf Push Right gesetzt wurde. Als ich auf den Play-Button geklickt habe, habe ich meinen Prototyp getestet.
04 von 04So verwenden Sie das Bedienfeld „Export Asset“ in Adobe Illustrator CC 2015
Neben dem Menü "Für Bildschirme speichern" hat Adobe ein neues Bedienfeld - Asset Export - hinzugefügt, mit dem der Workflow im UI-Design erheblich beeinträchtigt wurde.
Der Schmerzpunkt waren Ikonen. Illustrator ist eine großartige Anwendung zum Zeichnen von Vektoren. Zur Ausgabe, sagen wir 10 Symbole, auf einer Seite, von der 40 oder 50 erforderlich sind, wird jedes als SVG-Bild gespeichert. Dies erforderte zwangsläufig mehr Zeit als üblich dank aufeinanderfolgender Fahrten zum SVG-Panel. Dieser Schmerzpunkt ist jetzt Vergangenheit.
Dieses neue Panel finden Sie unter Fenster> Asset-Export. Wählen Sie beim Öffnen des Bedienfelds das Asset aus, das Sie in ein SVG-Format oder ein anderes Format konvertieren möchten, und ziehen Sie es in das Bedienfeld. Wenn Sie die Maustaste loslassen, wird dem Panel eine Miniaturansicht des Objekts hinzugefügt. Benennen Sie das Asset. Ziehen Sie Objekte weiter in das Bedienfeld, bis Sie fertig sind.
Wählen Sie jedes Element im Bereich Exporteinstellungen aus, oder wählen Sie alle aus, indem Sie die Umschalttaste gedrückt halten und auf jedes Element klicken. Wählen Sie Ihr Format aus - in diesem Beispiel wählte ich SVG- und klicken Sie auf die Schaltfläche Exportieren. Die ausgewählten Elemente werden als SVG-Dateien am selben Ort wie die Illustrator-Datei ausgegeben.
Wo dieser ganze Prozess noch schöner wird, müssen Sie nicht das Asset-Export-Bedienfeld verwenden. Wenn Sie unten im Bedienfeld auf die Schaltfläche Für Bildschirme speichern klicken, wird das Dialogfeld geöffnet.
Umgekehrt können Sie auf die Registerkarte Assets im Bereich Save for Screens klicken, um auf den Bereich Asset Export zuzugreifen. Wenn Sie beispielsweise ein benutzerdefiniertes Symbol auf einer Zeichenfläche haben, können Sie das Bedienfeld „Asset-Export“ im Dialogfeld „Für Bildschirm speichern“ öffnen und dieses Element in das Bedienfeld „Asset-Export“ ziehen.
