Share
Im Laufe der Jahre habe ich einige Methoden und Tricks entwickelt, um meine Produktivität und Arbeitskonsistenz zu verbessern. In diesem Lernprogramm wird erläutert, wie Sie modulares Denken in Ihrem Arbeitsablauf berücksichtigen können, wenn Sie flexible und leichtgewichtige Benutzeroberflächen mit Adobe Illustrator CS5 (oder höher) und einigen freien Ressourcen erstellen. Lass uns anfangen.
Gridcalculator.dk bietet die Optionen, die Sie zum Erstellen eines flexiblen Rasters benötigen. Dies kann Ihnen beim Experimentieren und Berechnen Zeit sparen.
Raster sollten von Objekten getrennt werden, sodass Sie die Sichtbarkeit unabhängig voneinander umschalten und sie beim Entwurf mehrerer Seiten oder Bildschirme wiederverwenden können.
Platzieren Sie Ihre Hilfslinien als oberste Ebenen Ihres Dokuments und vor allem Ihren Inhalt.
Wenn Ihr Raster über mehrere Spalten verfügt, teilen Sie diese am besten in unabhängige Ebenen auf. Andernfalls kann es zu voll werden. Einige Seiten benötigen möglicherweise vier Spalten, andere nur zwei. Auf diese Weise können Sie die Sichtbarkeit des Gitters nach Ihren Bedürfnissen verwalten.
Die Verwendung eines vollständig skalierbaren Browsers ist hilfreich, um hochauflösende Bilder zu exportieren und responsive Designs zu erstellen.
Positionieren Sie Ihren Browser unter allen Ihren Content-Layern.
Hinweis: In den Anhängen dieses Tutorials können Sie mein responsives Illustrator-Setup herunterladen, das Vektorversionen von Chrome Desktop und Safari Mobile enthält.
Anpassen Arbeitsbereiche (Fenster> Arbeitsbereich) Ihre persönlichen oder Projektbedürfnisse zu erfüllen, ist entscheidend für Ihren Workflow. Ich weiß, welche Werkzeuge ich am häufigsten verwende. Das Schließen / Öffnen von Fenstern und das Verschieben von Fenstern ist langweilig und unproduktiv. Ich arbeite derzeit mit drei Arbeitsbereichen, abhängig von der Bildschirmgröße:
Die Verwendung von Arbeitsbereichen ist wirklich nett: Ich kann die Benutzeroberfläche ganz einfach auf meine Standardeinstellungen zurücksetzen, indem Sie auf klicken Zurücksetzen (Name Ihres Artboards).
Verlassen Sie beim Erstellen eines neuen Dokuments die Neue Objekte am Pixelraster ausrichten ungeprüft. Ja, nicht geprüft.
Wenn Sie diese Option aktivieren, werden einige Elemente der Benutzeroberfläche (z. B. umrahmter (erweiterter) Text) verzerrt und Sie können einige Formen nicht frei zeichnen, wenn Ihre Punkte ständig am Pixelraster fangen.
Sie sollten auswählen, welche Objekte pixelorientiert sein sollen, indem Sie das auswählen Auf Pixelraster ausrichten Option aus der Verwandeln Panel.
Hinweis: Sobald Sie sich bewerben Auf Pixelraster ausrichten Bei einem Objekt können Sie das ausgewählte Objekt nicht in den ursprünglichen Zustand „nicht ausgerichtet“ zurücksetzen. Wenn Sie das Kontrollkästchen deaktivieren, werden Sie nicht gerettet.
Wenn Sie Ihr Bildmaterial um mehr als 100% vergrößern, können Sie die Pixel tatsächlich so sehen, als würden Sie mit einem Bitmap-Bild arbeiten. Aktivieren Sie es, indem Sie zu gehen Ansicht> Pixelvorschau. Auf diese Weise können Sie erkennen, welche Pixel unscharfe Kanten verursachen können, so dass Sie sie sofort fixieren können.
Hinweis: Das Pixelraster reagiert auf den Linealursprung (0,0). Wenn Sie den Ursprung des Lineals verschieben, ändert sich die Art und Weise, wie Illustrator das Bildmaterial „rastert“. Stellen Sie außerdem sicher, dass die X- und Y-Koordinaten Ihres Objekts gerundet sind.
Illustrator bietet einige grundlegende mathematische Funktionen zum Anpassen von Objekten in Fenstern und Dialogen. Dies ist nützlich, wenn Sie (+), subtrahieren (-), dividieren (/) oder multiplizieren (*). Diese Operationen können in Objekten, Strichen, Transparenz und vielen anderen Dingen verwendet werden.
Leider können Sie nur eine Operation gleichzeitig ausführen. So etwas wie „260/3 * 2“ ist nicht möglich.
Normalerweise wird dieselbe UI-Komponente immer wieder verwendet, wobei nur Größe und Farbe geändert werden. Denken Sie modular, planen Sie voraus und bauen Sie zerstörungsfreie Komponenten, die sich leicht recyceln lassen. Prüfen Sie nicht auf jedem Bildschirm, ob Sie vergessen haben, ein Element zu aktualisieren. Symbole können sehr gut sein, wenn sie gut ausgehen.
Wenn Sie das Originalsymbol ändern, werden diese Änderungen sofort in allen Instanzen des Dokuments übernommen. Dies ist besonders nützlich für wiederkehrende Bereiche wie Schaltflächen, Fußzeilen, Seitenumbruchelemente, Navigation, Hintergründe usw.
Sie können sogar Symbole innerhalb von Symbolen ("Combos") verwenden. Dadurch sparen Sie Zeit und sorgen für Konsistenz in der gesamten Benutzeroberfläche.
Die 9-Slice-Skalierung ist eine erweiterte Symboloption, mit der Sie definieren können, welche Bereiche eines Symbols sich beim Ändern der Größe nicht ausdehnen.
Wenn Sie die Breite eines Symbols ändern, ohne diese Funktion zu verwenden, erhalten Sie deformierte Formen. Dies kann besonders für Schaltflächen hilfreich sein, wenn Sie nur ein Segment eines Symbols strecken möchten.
Hinweis: Sie können jederzeit die 9-Skalierung in einem Symbol aktivieren. Um bessere Ergebnisse zu erzielen, aktivieren Sie die Option 9-Skalierung, wenn Sie das Symbol zum ersten Mal erstellen.
Erscheinungsattribute wirken sich nicht auf die zugrunde liegende Struktur eines Objekts oder einer Objektgruppe aus. Es ist sehr nützlich, Effekte wie abgerundete Ecken oder Stapel von Farbfüllungen zu verwenden, die jederzeit geändert oder entfernt werden können.
Es gibt eine Möglichkeit, Schaltflächen zu erstellen, die sich an Ihre Textlänge anpassen. Das ist wie:
Spielen Sie damit herum. Sie können das als speichern Grafikstil für zukünftigen Gebrauch.
Hinweis: Dies wird nur für das Drahtrahmen empfohlen, da die Pixelausrichtung bei dieser Methode schwierig ist.
Dies ist eine der am meisten unterschätzten Funktionen, aber es ist sehr mächtig. Jedes Mal, wenn Sie eine globale Farbe ändern, werden alle Objekte, die dieses Farbfeld verwenden, aktualisiert. Sie können Dutzende von Objekten sofort fein abstimmen.
Farbgruppen sparen viel Zeit, wenn Sie gleichzeitig mit großen Farbschemas oder mehreren Marken arbeiten. Wenn Sie ihnen eindeutige Namen geben, können Benutzer problemlos in derselben Datei suchen und arbeiten.
Wenn Sie experimentieren möchten, können Sie Paletten und Farbschemas von Quellen wie Kuler und Colourlovers herunterladen. Auch mit dem herumspielen Artwork einfärben Rad, um verschiedene Farbthemen auszuprobieren: Bearbeiten> Farben bearbeiten> Bildmaterial neu einfärben.
Zeichenstile können auf jede beliebige Textmenge angewendet werden: von großen Abschnitten bis zu einzelnen Wörtern. Sie sind flexibler und bieten Absatzstile. Da wir nicht drucken, verwenden Sie nur Zeichenstile, um sicherzustellen, dass Ihre Typografie konsistent ist.
Sie sollten die Liste der Zeichenformate nach Größe sortieren: von größerem zu kleinerem Text, nach Layoutreihenfolge: von oben nach unten oder alphabetisch. Dies hilft Ihnen, eine bessere Hierarchie zu erhalten und Ihre Liste zu durchsuchen.
Passen Sie Ihre Stile so weit wie möglich an, um zu vermeiden, dass zu viele Ausnahmen erstellt werden. Dies vereinfacht die Entwicklung und verbessert die Konsistenz.
Jeder Text ohne Kontext oder Relevanz zum Thema ist wertlos. Isoliere dich nicht von der wirklichen Erfahrung. „Lorem ipsum“ gibt dir eine Form, aber es gibt dir keine Bedeutung. Wenn Sie Ihre eigene Kopie für Überschriften oder zur Navigation schreiben, wird erklärt, wie sie verwendet werden und welche wertvollen Informationen sie geben können. Wenn für Ihre Site oder Anwendung Daten eingegeben werden müssen, geben Sie echte und relevante Wörter ein. Geben Sie einen echten Namen oder eine Stadt ein.
Wenn Sie echten Text verwenden, entdecken Sie Probleme, die ansonsten unbemerkt bleiben könnten: Spalten sind zu breit / eng, Felder müssen größer / kleiner sein, einige funktionieren in einer Sprache, andere jedoch nicht, usw.
Die Verwendung repräsentativer Daten ist ein guter Hinweis auf das Endprodukt.
Mit Illustrator sind Sie nicht auf eine bestimmte Auflösung beschränkt. In einem einzigen Dokument und mit Artboards können Sie simulieren, wie eine Benutzeroberfläche auf verschiedene Bildschirmauflösungen reagieren soll, und sie gleichzeitig mit globalen Farben, Symbolen und Zeichenstilen bearbeiten. Selbst bei einem Dutzend verschiedener Bildschirme bleibt die Datei klein und einfach zu verwalten.
Benennen Sie jedes Artboard entsprechend der Geräte- / Bildschirmgröße. Dadurch werden diese Bildschirme beim Speichern automatisch benannt. Im Tutorial werde ich einige Tipps zum Speichern und Benennen weitergeben.
Hinweis: In den Anhängen dieses Tutorials können Sie das Setup des responsiven Illustrators herunterladen.
Auf diese Weise können Sie sehen, wie eine einzelne Seite in jeder Bildschirmgröße aussieht, und alle Ebenen (Seiten) eines ausgewählten Artboards (Bildschirmgröße) unabhängig voneinander exportieren.
Aufräumen ist sehr wichtig, um Ihre Dateien in gutem Zustand zu halten und die Leistung zu steigern. Verwenden Sie dazu die in Illustrator integrierten Optionen.
Windows> Aktionen> Nicht verwendete Bedienfeldelemente löschen
Diese Aktion durchläuft automatisch jedes Fenster, wählt die nicht verwendeten Inhalte aus und löscht sie dann in wenigen Sekunden.
Diese Standardaktion umfasst nicht das Bereinigen Ihrer nicht verwendeten Zeichenstile. Sie können diesen Schritt hinzufügen oder manuell Wählen Sie Alle nicht verwendet aus, dann verwerfen sie sie.
Wenn Sie streunende Punkte, unlackierte Objekte und leere Textpfade entfernen möchten, gehen Sie folgendermaßen vor:
Blenden Sie bei Verwendung von Ebenen alle Gruppen oder Objekte in der aus Optionen des Ebenenfensters. So sollte es aussehen:
Benennen Sie jede Ebene mit einem Seitennamen. Geben Sie den Namen der einzelnen Ebenen an, damit sie beim Exportieren geordnet bleiben. Die Verwendung von Groß- und Kleinbuchstaben erleichtert die Lesbarkeit.
Diese 59 Ebenen / Seiten wiegen nur 2,5 MB (keine eingebetteten Bilder), was eine hohe Leistung und sehr schnelle Speicherzeiten ermöglicht.
Um Style-Anleitungen für die Entwicklung in Ihre Dateien aufzunehmen, sollten Sie eine „Unterebene“ erstellen, die jeder Seite / Ebene zugeordnet ist. Das ist wie man es macht:
Accentsconagua
GESTALTUNGSRICHTLINIE Diese Handbücher bleiben über Ihren Inhalten und da sie sich in einer "Unterschicht" befinden, können Sie deren Sichtbarkeit leicht verwalten.
Beim Platzieren von Bitmap-Bildern, nicht einbetten Sie in Ihrer Datei. Wählen Verknüpfung stattdessen.
Dies verringert die Dateigröße, verbessert die Leistung des Illustrators und ermöglicht die separate Bearbeitung dieser Bilder. Illustrator erkennt automatisch, wenn eine Datei aktualisiert wird.
Wenn Sie alle oben genannten Schritte ausführen, sollten Ihre Dateien leichtgewichtig sein. Wenn Sie beim Speichern die Option PDF-kompatible Datei erstellen aktivieren, wird Ihre Dateigröße aufgebläht und die Speicherzeit erhöht. Da es sich nur um Bildschirmgrafiken mit mehreren Ebenen und Zeichenflächen handelt, ist es nicht wirklich vorteilhaft, diese Option aktiviert zu lassen.
Laden Sie dieses Multi Exporter-Skript herunter, um die Exportoptionen besser steuern zu können. Die Verwendung ist ziemlich unkompliziert, aber schauen Sie sich die Dokumentation an, damit Sie sie voll ausnutzen können.
Durch die Fragmentierung der Gerätegröße und -auflösung ist der Export von mobilen Assets sehr zeitaufwändig. Nun, Skripte können auch dabei helfen. Laden Sie diese Illustrator-Skripts für mobiles Design herunter.
Für mobile Assets sind je nach Betriebssystem bestimmte Dateinamen erforderlich. Um ihren Namenskonventionen zu folgen, ist es einfacher, separate Illustrator-Dateien für jedes Betriebssystem zu erstellen. Wenn einige Assets für die Plattformen, auf denen Sie arbeiten, üblich sind, erstellen Sie eine Datei mit dem Namen „common“ oder wie immer Sie möchten.
In Web- und mobilen Umgebungen ist Leistung von zentraler Bedeutung und jedes Byte zählt. In Illustrator ist die PNG / JPG-Optimierung nicht möglich. Verwenden Sie ImageOptim (Mac OS X) nach dem Exportieren Ihrer Inhalte.
Wir gehen auf ein responsives und agiles Web zu, wo unsere Benutzeroberflächen gegen die Pixeldichte immun sein müssen und über viele verschiedene Größen hinweg konsistent sind. Unendliche Skalierbarkeit ist von unschätzbarem Wert und Vektoren sind ein wichtiger Teil der Auflösungsunabhängigkeit.
Der modulare Workflow von Illustrator ist ein Maßstab gegen Zeit und Zeit und ist eine solide Option in Bezug auf Produktivität und Flexibilität. Ich bleibe dabei. Was ist mit dir?
