Tipps für die Arbeit mit Illustrator. Für Webdesigner, die Photoshop bevorzugen

Tipps für die Arbeit mit Illustrator. Hier ist eine verrückte Idee: Entwerfen Sie Ihr nächstes Webprojekt in Illustrator. Wenn Sie ein primärer Webdesigner sind, werden Sie wahrscheinlich nicht besonders gut auf diesen Vorschlag reagieren. Illustrator kann einfach nicht alles, was Photoshop kann, oder?

Nicht genau

obwohl Photoshop ist zum De-facto-Tool geworden Webdesign, Illustrator ist mehr als in der Lage, Ihre Anforderungen zu erfüllen. Dank seiner Layout-Tools ist es oft ein besseres und geeigneteres Programm für Webdesign.

Da die meisten Webdesign-Profis nicht auf der Suche nach Beweisen in Illustrator herumlaufen möchten, habe ich eine Liste webbezogener Funktionen zusammengestellt, die Sie kennen müssen, um mit Webdesign in Illustrator experimentieren zu können.

Probieren Sie einige davon aus und ich garantiere Ihnen, dass Sie Illustrator als Standardtool in Ihrem Webdesign-Workflow verwenden werden.

1. Das Wichtigste zuerst: Stellen Sie alle Einheiten auf Pixel ein. Tipps für die Arbeit mit Illustrator

Standardmäßig verwendet Illustrator Metriken Einheiten für Objekt- und Punktgrößen für Text. Dies sind großartige Einstellungen für die meisten Designsituationen, aber für Web-Design Sie möchten wahrscheinlich überall Pixel sehen. Bevor Sie also mit anderen Arbeiten beginnen, stellen Sie sicher, dass Ihre Einheiten richtig eingerichtet sind.

So stellen Sie die Einheiten auf Pixel ein:

1. Im Menü „Bearbeiten“ öffnen
2. Wählen Sie im Untermenü „Einstellungen“ die Maßeinheiten aus.
3. Alle Optionen auf „Pixel“ setzen

2. Erstellen Sie Dokumente mithilfe eines Webdokumentprofils.

 

Wenn Sie mit der Arbeit an einem neuen Design beginnen möchten, scrollen Sie einfach durch das Fenster „Neues Dokument“ und überspringen Sie einige wichtige Details – etwa, Illustrator mitzuteilen, dass Sie planen, an einem Webdesign zu arbeiten, sodass Sie keine CMYK-Farben verwenden. und unscharfe Kanten des Objekts. Denken Sie daran, im Fenster „Neues Dokument“ die Einstellung „Internetprofil“ auszuwählen, und alles ist in Ordnung.

3. Aktivieren Sie die Pixelrasterausrichtung für Objekte. Tipps für die Arbeit mit Illustrator

Diese Funktion ist ein Lebensretter, wenn Sie jemals Probleme mit unscharfen Formkanten in Photoshop hatten.

Mit der Pixelrasterausrichtung werden die geraden horizontalen und vertikalen Segmente eines Objekts so angepasst, dass sie perfekt zum Pixelraster passen, während gekrümmte und geneigte Segmente glatt bleiben. Das Ergebnis sind gestochen scharfe, pixelgenaue Formen – etwas, das Sie sich im Webdesign unbedingt wünschen.

Über die obere Schaltfläche ist die Pixelrasterausrichtung aktiviert, was immer zu scharfen Kanten führt.

So aktivieren Sie die Pixelrasterausrichtung auf Objektebene:

1. Objekt auswählen
2. Öffnen Sie das Bedienfeld „Transformieren“ („Fenster“ > „Transformieren“).
3. Aktivieren Sie das Kontrollkästchen „Am Pixelraster ausrichten“ unten im Bedienfeld (falls Sie es nicht sehen, doppelklicken Sie auf das Bedienfeld, um die Optionen anzuzeigen).

Notiz. Die Pixelrasterausrichtung ist standardmäßig für alle neuen Objekte aktiviert, die mit dem Webdokumentprofil erstellt werden. Wenn Sie jedoch Objekte aus anderen Illustrator-Dateien einfügen, müssen Sie die Pixelausrichtung für sie manuell anpassen. Tipps für die Arbeit mit Illustrator

4. Aktivieren Sie die Pixelvorschau.

Mit der Funktion „Pixelvorschau“ verhält sich Illustrator genau wie Photoshop, wenn Sie Ihr Bild auf über 100 % skalieren – anstatt jedes Mal perfekte Vektoren zu erhalten, sehen Sie die Pixel tatsächlich so, als würden Sie mit einem Rasterbild arbeiten.

Wenn Sie die Pixelvorschau aktivieren, werden Sie sich wie in Photoshop fühlen.

Denken Sie darüber nach, wie cool es ist – Sie haben die ganze Leistungsfähigkeit von Vektorgrafiken zur Hand und können sehen, wie das Ergebnis auf Pixelebene aussieht.

Ordentlich, nicht wahr?

Pixelvorschau aktivieren oder deaktivieren

1. Ansichtsmenü öffnen
2. Wählen Sie Pixelansicht.

5. Verwenden Sie Grafikfenster. Tipps für die Arbeit mit Illustrator

Stellen Sie sich vor, dass zwei Videokameras auf Ihr Projekt gerichtet sind.

Eine Kamera verfügt über eine normale Zoomstufe und zeigt 100 % Ihrer Arbeit. Die andere Kamera hat eine Zoomstufe von 400 % und ist auf ein bestimmtes Symbol gerichtet, an dem Sie gearbeitet haben.

Wie ein Chirurg verwenden Sie die Zoomkamera, um winzige Änderungen auf Pixelebene am Symbol vorzunehmen, und werfen gelegentlich einen Blick auf die 100 %-Zoomkamera, um zu sehen, wie es in seiner tatsächlichen Größe tatsächlich aussieht.

Cover-Fenster eignen sich hervorragend, wenn Sie mit kleinen Elementen wie Symbolen arbeiten müssen – Sie müssen nicht ständig hinein- und herauszoomen, um zu überprüfen, wie alles aussieht.

Dabei handelt es sich um Grafikfenster – sie ermöglichen es Ihnen, Ihr Design gleichzeitig mit verschiedenen Zoomstufen, Farbeinstellungen und anderen Variationen anzuzeigen. Dies ist sehr nützlich für das Webdesign, insbesondere wenn Sie mit Details auf Pixelebene arbeiten.

So verwenden Sie Grafikfenster:

1. Öffnen Sie das Fenstermenü und wählen Sie dann Neues Fenster. Illustrator erstellt eine neue Registerkarte mit demselben Dokument.
2. Gehen Sie erneut zum Menü „Fenster“ und wählen Sie „Anordnen“ > „Alle ins Fenster verschieben“. Dadurch können Sie Änderungen vornehmen Größe und Platzierung der Fenster nebeneinander, wie Sie es für richtig halten.
3. Experimentieren Sie mit verschiedenen Zoomstufen in Fenstern und nehmen Sie einige Änderungen vor, um zu sehen, wie es funktioniert. Tipps für die Arbeit mit Illustrator

6. Verwenden Sie Symbole, um schnell Schaltflächen, Symbole und mehr zu erstellen.

Wie oft haben Sie dieselbe (oder fast dieselbe) Schaltfläche, dasselbe Symbol oder Widget in Photoshop erstellt? Wenn Sie sich für Webdesign interessieren, machen Sie das wahrscheinlich jeden Tag.

Illustrator kann Ihnen helfen, Zeit zu sparen und diese sich wiederholende Arbeit mit Symbolen zu vermeiden.

Im Wesentlichen sind Symbole ein endloser Satz vorgefertigter Symbole Design-Elemente, die durch einfaches Ziehen und Ablegen zum Werk hinzugefügt und dann bei Bedarf geändert werden können. Dies ist ideal für Schaltflächen, Symbole und andere Standardobjekte, die nicht von Grund auf erstellt werden müssen.

Aber es gibt noch einen weiteren Grund, warum Symbole mächtig sind, und zwar die sogenannte Instanziierung.

Symbole sind nicht nur praktisch, sondern erleichtern auch die Aktualisierung sich wiederholender Designelemente.

 

Wenn Sie Änderungen am ursprünglichen Symbol vornehmen, werden diese Änderungen im Wesentlichen sofort in allen Instanzen des Symbols in Ihrem Kunstwerk widergespiegelt. Benötigen Sie größere Buttons auf Ihrer Website? Ändern Sie einfach das Symbol. Möchten Sie, dass Ihre Formularfelder auf jeder Seite anders aussehen? Ändern Sie einfach das Symbol. Du hast die Idee.

Tipp: Wenn Sie nicht möchten, dass dies bei einer bestimmten Instanz des AS-Symbols passiert, klicken Sie mit der rechten Maustaste auf das Objekt in Ihrer Abbildung und wählen Sie Symbolreferenz unterbrechen. Dadurch wird es von automatischen Updates ausgeschlossen.

Hier ist ein gutes Video, das erklärt, wie man Symbole verwendet und manipuliert:

Verwenden von Symbolen in Adobe Illustrator von Adobe TV .

So verwenden Sie ein vorhandenes Symbol:

1. Öffnen Sie das Bedienfeld „Symbole“ über das Menü „Fenster“.
2. Ziehen Sie das ausgewählte Symbol auf Ihre Arbeit

Erstellen Sie ein neues Symbol:

1. Erstellen Sie ein Symbolbild
2. Öffnen Sie das Bedienfeld „Symbole“ über das Menü „Fenster“.
3. Ziehen Sie eine Illustration auf das Bedienfeld
4. Klicken Sie im Dialogfeld zur Bestätigung auf OK.

So bearbeiten Sie ein Symbol:

1. Öffnen Sie das Bedienfeld „Symbole“ über das Menü „Fenster“.
2. Doppelklicken Sie auf ein Symbol, um in den Bearbeitungsmodus zu gelangen.
3. Wenn Sie fertig sind, doppelklicken Sie irgendwo außerhalb des Symbolbilds, um den Bearbeitungsmodus zu verlassen.

7. Erweitern Sie Objekte einfach mit der 9-Segment-Skalierung. Tipps für die Arbeit mit Illustrator

Dies ist eine erweiterte Symbologiefunktion, mit der Sie definieren können, welche Teile eines Objekts während der Skalierung gestreckt werden und welche unverändert bleiben.

Links: Ein Beispiel einer gestreckten Schaltfläche mit und ohne 9-Segment-Zoomeinstellung. Rechts: Bei der 9-Segment-Skalierungseinstellung werden vier Hilfslinien verschoben, die Illustrator mitteilen, welche Teile des Objekts geschützt sind und welche Teile skaliert werden können.

 

Ein praktisches Beispiel ist ein Button mit abgerundeten Ecken. Wenn Sie ihn verlängern möchten, können Sie ihn nicht einfach horizontal strecken, da dies das gesamte Objekt verzerrt. Stattdessen müssen Sie die Formpunkte manuell verschieben. Mit der 9-Segment-Skalierung funktioniert die Dehnung wie gewünscht. Tipps für die Arbeit mit Illustrator

Um wirklich zu verstehen, wie es funktioniert, schauen Sie sich dieses tolle Video-Tutorial von Adobe TV an, um sich schnell mit der Funktionsweise vertraut zu machen:

Verwendung der 9-Segment-Skalierung mit Symbolen von Adobe TV .

8. Überall abgerundete Ecken!

Sie können in Photoshop ein abgerundetes Rechteck erstellen, aber Illustrator ermöglicht Ihnen, einen zerstörungsfreien Effekt abgerundeter Ecken auf fast jedes Objekt anzuwenden. Was ist eine zerstörungsfreie Wirkung? Dies bedeutet, dass Sie es ein- und ausschalten oder seine Einstellungen ändern können, ohne dass sich dies auf das zugrunde liegende Originalobjekt auswirkt.

Sie können den Effekt „Abgerundete Ecken“ auf nahezu jede Art von Objekt anwenden und nach Bedarf anpassen. Tipps für die Arbeit mit Illustrator

So wenden Sie den Effekt „abgerundete Ecken“ an:

1. Erstellen Sie ein Rechteck oder ein anderes Objekt mit scharfen Ecken
2. Wählen Sie im Menü „Effekte“ die Option „Stilisieren“ > „Abgerundete Ecken“.
3. Geben Sie einen Eckenradius ein und klicken Sie auf Vorschau, um zu sehen, wie es aussieht.
4. Klicken Sie auf OK, um den Effekt anzuwenden.

So ändern Sie den Effekt abgerundeter Ecken:

1. Wählen Sie ein Objekt mit abgerundeten Ecken aus
2. Öffnen Sie das Bedienfeld „Darstellung“ über das Menü „Fenster“.
3. Suchen Sie den Effekt „Abgerundete Ecken“ und doppelklicken Sie darauf, um seine Einstellungen zu ändern, oder klicken Sie auf das Augensymbol, um ihn ein- oder auszuschalten.

9. Erstellen einer schnellen Füllung mit einem Rastermuster. Tipps für die Arbeit mit Illustrator

Subtile Hintergrundmuster erfreuen sich im Webdesign großer Beliebtheit, doch viele Designer glauben, dass sie in Illustrator nicht einfach anzuwenden sind.

Ich muss zugeben, es ist nicht intuitiv, aber die Lösung ist einfach.

So erstellen Sie ein Bitmap-Muster:

1. Platzieren Sie ein Bild des Musters auf Ihrem Stück
2. Klicken Sie im oberen Menüband auf „Einfügen“ (wichtig – ohne geht es nicht!)
3. Ziehen Sie ein Muster in die Farbfeldpalette
4. Wenden Sie ein Farbfeld auf ein beliebiges Objekt an, um es mit einem Muster zu füllen

10. Automatische Platzierung von Text um Bilder und Objekte.

Photoshop ist für seine sehr einfachen Textbearbeitungsfunktionen bekannt. Wenn Sie Text um ein Bild fließen lassen möchten, müssen Sie zwei oder drei verschiedene Textrahmen erstellen und den Effekt simulieren. Tipps für die Arbeit mit Illustrator

Glücklicherweise ist Illustrator für Sie da.

Um Text um ein Bild zu wickeln:

1. Wählen Sie das Bild oder Objekt aus, um das Sie den Text umbrechen möchten
2. Öffnen Sie das Menü „Objekt“ und wählen Sie „Text umbrechen“ > „Neu“.
3. Um den Umbruchabstand festzulegen, öffnen Sie das Menü „Textumbruch“ erneut und wählen Sie „Textumbruchoptionen“.
4. Bewegen Sie das Bild über den Text, um den Umbrucheffekt zu sehen

11. Erstellen Sie reichhaltige visuelle Effekte mit Einstellungen für das Erscheinungsbild von Objekten. Tipps für die Arbeit mit Illustrator

In Illustrator funktioniert das Bedienfeld „Darstellung“ eines Objekts ähnlich wie Ebeneneffekte in Photoshop – Sie können einem Objekt mehrere Füllungen und Striche hinzufügen und dann mit deren Übertragungsmodi, Deckkraft und Effekten experimentieren, um interessante Ergebnisse zu erzielen.

Bei diesem Text handelt es sich lediglich um ein einzelnes Vektorobjekt, das mithilfe des Bedienfelds „Darstellung und Effekte“ gestaltet wurde.

Der Spielplatz ist ziemlich groß – von Schlagschatten, Unschärfe und Glühen bis hin zu Texturierung, Verzerrung und 3D. Auf diese Weise können Sie die meisten Effekte aus Photoshop nachbilden, während Sie weiterhin mit Vektorgrafiken arbeiten.

Das Bedienfeld „Darstellung“ ist leistungsstark und macht Spaß. Ich empfehle Ihnen, es sofort auszuprobieren oder sich das Tutorial unten anzusehen, um zu verstehen, wie es funktioniert:

Das Erscheinungsbild-Panel beherrschen von Adobe TV .

Sind Sie bereit, mit Illustrator zu experimentieren?

Das Erstellen von Websites und Benutzeroberflächen mit Photoshop ist mittlerweile zur Norm geworden und die meisten Designer sind mit dieser Lösung zufrieden. Tipps für die Arbeit mit Illustrator

Aber nur weil Photoshop so weit verbreitet ist, heißt das nicht, dass Illustrator nichts zu bieten hat – ganz im Gegenteil. Mit Tools wie Pixelrasterausrichtung, Textumbruch und Objektdarstellung ist es ein starkes Argument.

Kombiniert mit kraftvoll Layout-Tools und Vektorgrafiken, das Schneiden und Exportieren von Bildern ist Illustrator definitiv eine offensichtliche Wahl für Webdesigner, die schnell Websites entwickeln möchten.