Was ist neu für Webdesigner in Illustrator CC?
Am 6. Mai hat Adobe seine neuesten Updates für seine kreative Software angekündigt. Einige dieser Aktualisierungen haben große Auswirkungen darauf, wie Benutzer mit ihren Tools arbeiten. In diesem Artikel möchte ich überprüfen, was Adobe in Illustrator geändert hat und wie es sich auf Webdesigner auswirkt.
Natürlich gibt es eine Reihe neuer Funktionen, wie AutoCAD-Bibliotheken, White-Overprint, Füll- und Strich-Proxy-Swap für Text, automatische Eckenerzeugung, Indic-Unterstützung, Paketdateien, unverpackte Bilder, Multiple File Place, Touch-Tools, Free-Transform-Tools und Bilder in Pinseln. Wenn Sie ein Illustrator-Junkie sind, sind das alles lohnende Funktionen, aber was ich speziell hervorheben möchte, sind die Kernverbesserungen, die jedem helfen, Grafiken für die Bildschirmausgabe zu erstellen.
HiDPI-Unterstützung
Mit dem Aufkommen von hochauflösenden Displays (wie dem MacBook Pro mit Retina-Display) sah Illustrator CS6 und früher verschwommen aus. Artwork und Icons sahen pixelig aus und Text wirkte anti-aliased. Die eigentliche Natur von Illustrator ist knackig reiches Artwork, so dass diese Erfahrung weniger als wünschenswert war. Zum Glück hat Adobe Illustrator CC verbessert, um diese hochauflösenden Displays zu nutzen. Grafik wird besser aussehen, Text wird klar aussehen, UI-Elemente (Symbole, Cursor usw.) werden glatter aussehen. Sie haben auch einige Verbesserungen am Rendering-Prozess vorgenommen. Es nutzt jetzt die Vorteile von Multi-Core-Maschinen und verwendet Rendering mit Threads zum Rendern von Grafiken. Sie sollten Verbesserungen bei Aufgaben wie Zoomen, Verschieben, Kopieren, Einfügen, Ziehen und Ablegen etc. sehen.
Führt Verbesserungen durch
Bei der Planung und Gestaltung von Seiten werden häufig Anleitungen verwendet. Wenn Sie mithilfe von Hilfslinien Mock-Ups in Illustrator erstellen, können Sie Inhalte präzise platzieren. In Illustrator CC gibt es vier Verbesserungen für Hilfslinien:
- Wenn Sie auf ein Lineal doppelklicken, wird an dieser bestimmten Position auf dem Lineal eine Hilfslinie erstellt.
- Wenn Sie die Umschalttaste gedrückt halten und anschließend auf eine bestimmte Position auf einem Lineal doppelklicken, wird die an dem Punkt erstellte Hilfslinie automatisch an der nächsten Marke (Division) auf dem Lineal ausgerichtet.
- Wenn Sie die Hilfslinien ausblenden (Strg / Cmd +;) und dann auswählen, werden die Hilfslinien nicht automatisch wie in früheren Versionen gesperrt.
- Erstellen Sie horizontale und vertikale Hilfslinien in einer Aktion. Gehen Sie dazu wie folgt vor: Klicken Sie in der oberen linken Ecke des Illustrator-Fensters auf den Schnittpunkt der Lineale und drücken Sie die Strg- (oder Cmd auf einem Mac) und ziehen Sie den Mauszeiger an eine beliebige Stelle im Illustrator-Fenster. Der Mauszeiger wird zum Fadenkreuz, um anzuzeigen, wo eine horizontale und vertikale Linie erstellt werden kann. Lassen Sie den Mauszeiger los, um die Hilfslinien zu erstellen.
Verbesserungen der Schriftartensuche
Die typische Typ-voraus-Suche durchsucht nur das erste Wort im Schriftartnamen, was im allgemeinen nicht sofort die besten Ergebnisse liefert. Außerdem kann das Suchen und Durchsuchen einer großen Anzahl von Schriftarten schwierig sein. Eine neue Suchfunktionsoption "Gesamten Schriftnamen suchen" wurde zu den Kontroll- und Zeichenfeldern hinzugefügt. Darüber hinaus wurde kürzlich bei MAX die TypKit-Integration für Desktop-Schriften angekündigt. Dies bedeutet, dass Sie problemlos Mock-Ups mit den gleichen Schriften entwerfen können, die Sie im Internet verwenden möchten.
Farbsuche Verbesserungen
Das Finden einer bestimmten Farbe aus einer Reihe von zahlreichen Farben kann zeitaufwendig und frustrierend sein. In Illustrator CC wurden Änderungen vorgenommen, um das Suchen und Finden einer Farbe wesentlich zu vereinfachen. Das Dialogfeld "Farbwähler" (doppelklicken Sie auf den Fill-Proxy in der Symbolleiste) verfügt jetzt über ein Such-Widget im Fenster "Farbfelder". Wenn Sie auf Farbfelder klicken, wird unter der vordefinierten Liste mit Farben eine Suchleiste angezeigt. Geben Sie den Namen einer Farbe oder eines RGB-Werts (oder CMYK für den Druck) ein. Wenn Sie "blau" eingeben, werden alle Farbfelder mit dem Wort "blau" in ihrem Namen angezeigt. Wenn Sie R = 77 eingeben, werden alle Farbfelder mit roter Farbe mit einem Wert von 77 in der RGB-Skala angezeigt. Das Such-Widget ist standardmäßig aktiviert.
Die Suchoption im Farbfeldbedienfeld wurde ebenfalls verbessert. Das Feld erzwingt keine automatische Vervollständigung. Die eingegebenen Zeichen werden nicht mehr automatisch durch die gefundene Farbe ersetzt. Sie können einen Namen für eine Farbe eingeben oder einfach die Werte für die RGB-Farbe (oder CMYK für Druck) eingeben, um nach einer solchen Farbkombination zu suchen. Das Suchfeld ist standardmäßig nicht aktiviert und muss zum ersten Mal im Untermenü des Bedienfelds aktiviert werden.
Es ist auch erwähnenswert, dass Kuler in Illustrator gebacken wurde. Wenn Sie diesen Adobe-Dienst zum Erstellen von Farbthemen und -gruppen verwenden, können Sie auf diesen Inhalt direkt in Illustrator CC zugreifen.
CSS-Eigenschaftenbereich
Das größte Feature für das Web sind natürlich die Verbesserungen an CSS- und SVG-Workflows. Wenn Sie ein Hardcore-Illustrator-Benutzer sind, haben Sie vielleicht etwas in CS5 namens HTML5-Paket verwendet, das von AdobeLabs erhältlich war. Aus irgendeinem Grund erschien es nie in CS6, aber viele dieser Funktionen sind mit diesem CC-Update zurückgekehrt. Diese Funktionen erinnern an das, was Photoshop CS6 durch die Creative Cloud-Updates und -Funktionen in Fireworks CS6 bereits zur Verfügung gestellt wurde.
Im CSS-Eigenschaftenfenster können Sie das CSS aus dem Illustrator-Dokument extrahieren. Hierfür gibt es verschiedene Möglichkeiten. Der Schlüsselschritt bei all diesen Arbeiten besteht jedoch darin, Ihre Ebenen im Ebenenfenster zu benennen. Natürlich kann Illustrator CSS generieren, ohne dass das Objekt einen Namen im Ebenenfenster hat, aber Sie öffnen sich selbst für eine unorganisierte und möglicherweise schlampige Art, Code zu generieren. Im Wesentlichen wird Illustrator die Klassenregeln benennen, die für Sie erstellt werden. Das generierte CSS kann Browserpräfixe für Webkit, Firefox, Opera und Internet Explorer haben. Es kann CSS-unterstützte Darstellungen wie Farbverläufe und abgerundete Ecken erfassen.
Sie können steuern, wie das CSS generiert wird, indem Sie auf das Dialogfeld CSS-Exportoptionen zugreifen. Sie können auf das Dialogfeld zugreifen, indem Sie auf die Schaltfläche CSS-Exportoptionen klicken. Dies ist die erste von vier Schaltflächen rechts unten im Bedienfeld. Das Panel bietet verschiedene Funktionen für CSS-Workflows:
- Zeigen Sie das CSS für ein ausgewähltes Objekt an
- Kopieren Sie den CSS-Code für ein ausgewähltes Objekt
- Exportiert das ausgewählte Objekt zusammen mit den in CSS verwendeten Bildern in eine CSS-Datei
- Exportieren Sie den CSS-Code für alle Objekte im Dokument in eine CSS-Datei
Darüber hinaus können Sie den CSS-Code für alle Objekte im Dokument exportieren, indem Sie im Menü Datei den Befehl Exportieren auswählen. Das öffnet ein Dialogfeld und von dort aus können Sie CSS aus dem Formatmenü auswählen.
Wenn Sie ein Objekt haben, wählen Sie es aus und stellen Sie sicher, dass es im Ebenenfenster richtig benannt ist. Wenn es ausgewählt ist, sehen Sie das CSS, das benötigt wird, um das Artwork in einem Browser im CSS-Eigenschaftenfenster zu generieren.
SVG-Code
In früheren Versionen von Illustrator mussten Sie ein Dokument als SVG speichern. Hier in der CC-Aktualisierung haben Sie die Möglichkeit, etwas innerhalb des Dokuments zu kopieren, dann zu Ihrem bevorzugten HTML-Editor zu gehen und einfach eine Paste auszuführen; Der gesamte SVG-Code wird in das Dokument eingefügt. Es ist ein überraschend schöner Workflow. Wenn dies für Sie nicht ausreicht, ist die traditionellere Methode zum Speichern des Dokuments als SVG weiterhin verfügbar.
Darüber hinaus hat Adobe die Unterstützung für den Export nicht verwendeter Stile hinzugefügt. Beim Entwerfen erstellen Sie häufig mehrere Grafikstile beim Erstellen von Grafiken. Sie können nicht alle verfügbaren Stile verwenden. Wenn Sie Bildmaterial im SVG-Format exportieren, werden nicht verwendete Formate nicht exportiert. Im exportierten CSS-Code sind den Grafikstilen keine Namen zugeordnet, und es kann schwierig sein, den richtigen Grafikstil zu identifizieren.
In Illustrator CC wurden zwei Funktionen hinzugefügt, um die Arbeit mit Stilen im SVG-Format zu verbessern, die diese Probleme beheben:
- Grafikstilname Wenn Sie Grafikstile exportieren, wird der Name jedes Stils mit der Definition des Stils in der CSS-Nomenklatur exportiert.
- Exportieren Sie nicht verwendete Stile. Wenn Sie Bildmaterial im SVG-Format exportieren, können Sie jetzt nicht verwendete Formate exportieren. Dadurch kann ein anderer Designer oder Entwickler, der die Stile importiert, die nicht verwendeten Grafikstile in anderen Grafikelementen verwenden.
Wie wirst du es benutzen?
Dies ist sicherlich kein Werkzeug, um komplette Webseiten zu kodieren. Was ich sehe, ist mit Illustrator zu erstellen, Mock-ups, dann Hand Code die Struktur in HTML und der Layout-Code in CSS. Wenn ein Schlagschatten, ein Farbverlauf, ein Muster oder sogar ein Logo benötigt wird, ist die Verwendung dieser neuen CSS-Extraktions- und SVG-Optionen sehr praktisch und spart viel Zeit.
Wenn Sie mehr über die neuen Funktionen in Illustrator CC erfahren möchten, Besuchen Sie die Illustrator-Produktseite.
Sind Sie ein Illustrator-Fan? Über welche Features von Illustrator CC freuen Sie sich am meisten? Lassen Sie es uns in den Kommentaren wissen.