Adobe Illustrator CC für Web-Designer, erstellen
Neun-Slice-Skalierung ist ein guter Weg, Symbole zu definieren, in geeigneter Weise auf Ihrer Web-Seite zu skalieren. Zum Beispiel möchte ich eine Bannergrafik entwerfen, den Titeltext enthält und skaliert gut, ob der Titel kurz oder lang ist. Normalerweise entwerfe ich Webseiten mit Lorem Ipsum, weil ich nicht alle den endgültigen Inhalt habe, bevor ich brauche, um mein Design zu schaffen. Also mein Vorschlag könnte einen kurzen Titel umfasst (siehe Abbildung 5).
Öffnen Sie die Creative Cloud-Desktop-Anwendung und wählen Sie die Registerkarte Schriftarten.
Klicken Sie auf Durchsuchen Schriftarten auf Typekit die Typekit Repository von Webfonts zu öffnen.
Wählen Sie den Desktop-Filter.
Wählen Sie eine Schriftart und wählen Verwenden Sie Schriftarten> On My Desktop automatisch herunterzuladen und die Schrift auf dem lokalen Computer zu installieren.
Weitere Informationen finden Sie in meinem Artikel "Typekit, Photoshop CC - Web Design" aus, die beschreibt, wie eine Web-Safe-Workflow mit Photoshop CC und Typekit erstellen. Sie können diesen Workflow Illustrator CC auch anzuwenden.
EXTRACT CSS-Eigenschaften
GENE BILDER VON IHREM SCHICHTEN
Das CSS-Eigenschaftenfenster extrahiert die CSS-Eigenschaften für jedes einzelnes Element, das Sie in Illustrator wählen, aber es kann auch einen globalen CSS-Stylesheet und das Bild-Assets Ihrer Seite generieren. Sobald Ihr Web-Design fertig ist, wählen Sie alle und klicken Sie auf Export Selected CSS eine globale CSS-Datei sowie Bild-Assets im PNG-Format zu erzeugen. Von hier aus müssen Sie nur das HTML-Skelett Ihrer Seite erstellen und die CSS-Datei einen Arbeits Web-Prototyp (siehe Video 4) haben, importieren.
EXPORT Scalable Vector Graphics (SVG)
Vektorgrafiken ermöglichen Designer Icons, Symbole oder Logos zu erstellen, die auf allen Bildschirmen gut aussehen, einschließlich Retina-Displays. SVG-Grafiken skaliert gut, sind in der Regel leicht und kann durch Web-Server komprimiert werden.
Sie können auch SVG-Dateien mit Illustrator CC exportieren Grafiken durch Auswahl und sie in die Zwischenablage zu kopieren. Anschließend können Sie den SVG-Code in Ihr bevorzugtes HTML-Code-Editor einfügen. Edge-Reflow CC, zum Beispiel, können Sie eine SVG-Datei auf Ihrem comp hinzufügen, indem Sie einfach Kopieren und Einfügen der Grafiken aus Illustrator CC in Reflow CC (siehe Video 5).
Responsive Web-design- Mit Illustrator CC, sind Sie auf eine bestimmte Auflösung beschränkt. Sie können mehrere Zeichenflächen (eine pro Seite) in einer einzigen Illustrator-Datei erstellen, um darzustellen, wie die Web-Seite auf verschiedene Bildschirmauflösungen reagieren soll. In Verbindung mit dem Edge Reflow CC ermöglicht Illustrator eine leistungsstarke Workflow für responsive Web-Designer.
UX-Prototyping und wireframing - Durch seinen modularen Ansatz mit Text und Symbolen zu arbeiten, kann Illustrator CC helfen, Ihre Produktivität als Web-Designer zu erhöhen. Der 9-Slice-Skalierung Modus ist ein Schlüsselmerkmal für UI-Komponente Prototyping und Anwendungslayouts.
SVG und Symbol-Fonts - Vektorgrafiken sind ein notwendiger Bestandteil für High-Density-Bildschirme Targeting. Illustrator CC ist die Anwendung schnell Vektorgrafiken zu zeichnen. Die Ausgabe an SVG ist natürlich und sauber.
Workflow mit Web-Entwickler - Export sauberen CSS-Dateien aus Illustrator CC, und sogar das Bild-Assets direkt zu JPEG, PNG oder SVG-Format erzeugen.
Flaches Design - Der aktuelle Trend im Web-Design ist sauber und minimalistisch, und Illustrator bietet eine ideale Umgebung für Zeichnen von Formen und das Experimentieren mit Farben und Web-Fonts.