German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)
In diesem Lernprogramm werden viele der Tools von Adobe Illustrator vorgestellt, die für jedes Designer-Toolkit unerlässlich sind. Sie sollen Anfängern und fortgeschrittenen Webdesignern helfen, Vertrauen in die Verwendung von Illustrator für Webdesign zu gewinnen. Wir beginnen mit dem Einrichten des Dokuments für das Web und diskutieren, wie Zeichenflächen zum Festlegen mehrerer Bildschirmgrößen verwendet werden können. Wir werden lernen, wie Sie ein Baseline-Raster erstellen (inspiriert von Teehan+Lax 'Baseline-Raster mit den in Illustrator integrierten Tools). Außerdem erfahren Sie, wie Sie mithilfe von Symbolen, Ausrichtungswerkzeugen sowie Zeichen- und Grafikstilen mühelos ein einheitliches Design erstellen. Dies hilft uns nicht nur beim Drahtrahmen, sondern auch beim Experimentieren mit dem Erscheinungsbild des Designs, das weitaus einfacher ist, als es Photoshop zulässt.
Schritt 1
Ah... Adobe Illustrator. Oft ist ein vernachlässigter Teil des Toolkits eines Webdesigners jedoch eines der leistungsstärksten verfügbaren Webdesign-Tools. Es ist nicht nur viel stabiler als Photoshop, sondern ermöglicht es uns auch, präzise und konsistente Layouts mit Präzision und Leichtigkeit zu erstellen. Wenn Sie noch nicht mit Illustrator als Drahtmodellierungswerkzeug experimentiert oder es in Ihren Webdesign-Workflow integriert haben, verpassen Sie es. Keine Sorge, der Tag kann trotzdem gerettet werden.
Ich habe versucht, so umfassend und gründlich wie möglich zu sein, um Anfänger und Fortgeschrittene gleichermaßen anzusprechen. Ein einmal detaillierter Schritt wird jedoch möglicherweise nicht wiederholt, und einige Details werden dem Leser zum Ausfüllen überlassen. Darüber hinaus wird dieses Tutorial ausgeführt Lernen Sie, wie Sie Zeichenflächen und Gitter für drei separate Bildschirmgrößen einrichten. Das Design selbst entspricht jedoch der Bildschirmgröße.
Beginnen wir damit. Laden Sie zuvor jedoch League Gothic, Goudy Bookletter, Ostrich Sans und Chunk Typefaces von The League of Movable Type herunter
Schritt 2
Wir beginnen mit der Erstellung eines Dokuments mit 1280 x 800 Pixel und 3 Zeichenflächen, eine für Bildschirm, Tablet bzw. Mobile. Ich habe beschlossen, sie horizontal und in einem Abstand von 400 Pixel auszulegen, damit das andere Dokument uns nicht vom Arbeiten ablenkt. Die wichtigeren Details betreffen die Einheiten (auf Pixel eingestellt), den Farbmodus (auf RGB eingestellt) und den Vorschaumodus (auf Pixel eingestellt). Das alles kann für Sie offensichtlich sein, außer für den Vorschaumodus.
Da Illustrator ein Vektorprogramm ist, kann jede erstellte Grafik unendlich gezoomt werden und behält ihre Genauigkeit bei. Dies ist zwar besonders vorteilhaft, um die Netzhautkompatibilität aufrechtzuerhalten und verlustfrei zu bleiben, kann jedoch unseren verfeinerten pixelschiebenden Geschmack verzerren, den wir alle lieben gelernt haben. Wenn Sie den Vorschaumodus auf Pixel einstellen, können Sie die Grafik vergrößern und in Pixel anzeigen. Sie können mit der Tastenkombination Strg + Alt + Y zwischen Pixel und Vorschau wechseln.
Wenn dies nicht möglich ist, gehen wir zu Bearbeiten > Einheiten > Einstellungen und setzen alle Einheiten auf Pixel, sofern dies noch nicht geschehen ist.
Schritt 3
Wie Sie sehen werden, sitzen 3 Zeichenflächen vor Ihnen. Öffnen Sie das Zeichenflächenbedienfeld (Fenster>! Rtafeln) und passen Sie die Einstellungen für die Zeichenflächen nach Ihren Wünschen an. In unserem Fall verwende ich die Größe 1280 x 800 px für die Bildschirm-Zeichenfläche und benenne sie als solche um. Für das Tablet und die mobilen Zeichenflächen werde ich die integrierten Voreinstellungen für iPad und iPhone auswählen. Stellen Sie die mobile Zeichenfläche außerdem in den Hochformatmodus ein und fahren Sie fort.
Schritt 4
Jetzt erstellen wir ein Raster. Erstellen Sie ein blaues Rechteck (kann eine beliebige Farbe haben) mit den folgenden Größen. Die Breite soll der Größe des Gitters entsprechen, während die Länge beliebig und leicht einstellbar ist. Da ich die Länge des Dokuments, das ich am Ende erstellen würde, im Voraus kenne, habe ich das Raster für die Zeichenfläche "Bildschirm" mit 4920 Pixel ausgewählt.
Schritt 5
Wählen Sie mit den erstellten Rechtecken das Rechteck in der Zeichenfläche "Bildschirm" aus und gehen Sie zu "Objekt"> "Pfad"> "In Raster teilen". Dies bietet ein leistungsstarkes Werkzeug zum Erstellen von Gittern. Ich habe 12 Spalten und eine 24-Pixel-Rinne für eine Gesamtgröße von 960 ausgewählt (Die Spaltenbreite wird automatisch berechnet). Dadurch wird das Rechteck in 12 Gitter aufgeteilt, und wir müssen sie zuerst gruppieren, um sie als einzelnes Objekt zu verschieben. Um die Hilfslinien zu erstellen, duplizieren wir das soeben erstellte Raster und drücken Strg + 5 oder Ansicht > Hilfslinien > Hilfslinien erstellen. Wiederholen Sie diese Schritte für das Tablet und die mobilen Zeichenflächen mit den unten aufgeführten Einstellungen. Ein letzter Schritt für das Raster besteht darin, die Deckkraft auf 40% einzustellen.
Schritt 6
Als Basis zeichnen wir eine Linie mit einem Strichgewicht von 1 Pixel über die Länge aller drei Zeichenflächen und verwenden den Transformationseffekt, um Kopien in festgelegten Intervallen zu erstellen. Dies gibt uns den Vorteil, dass wir die Grundlinie neu anpassen oder sogar erweitern können, indem wir einfach die Anzahl der Kopien oder das Intervall dazwischen neu anpassen. Für dieses Grundlinienraster halten wir uns an das 6-Pixel-Grundlinienraster von Teehan + Lax. Stellen Sie die Deckkraft auf 20% ein.
Schritt 7
Et Voila! Unser Baseline-Raster wird erstellt. Alles was übrig bleibt ist die Ebene zu sperren und wir können loslegen. Erstellen Sie eine neue Ebene und nennen Sie sie Header. Wir werden für jede Ebene einen anderen Abschnitt organisieren, sobald die Abschnitte angezeigt werden.
Schritt 8
Für den Header haben wir drei Elemente. Das erste ist das Logo, das zweite ist die Navigation und das dritte ist die typografische Behandlung. Das Logo wird durch Zeichnen eines 140 x 168 Pixel großen Rechtecks mit einem 15-Punkt-Start mit einem Außenradius von 48 Pixel und einem Innenradius von 42 Pixel erstellt. Sie können den Stern manuell erstellen und die Anzahl der Punkte anpassen, indem Sie die Maustaste gedrückt halten und die Aufwärts- und Abwärtspfeiltasten drücken. Der Innenradius kann durch Drücken der Strg-Taste und Ziehen der Maus bei noch gedrückter Taste angepasst werden. Verwenden Sie "League Gothic" bei 48px für den Logo-Text.
Schritt 9
Die Navigation ist ein Rechteck von 795 x 48 Pixel. Das Menüband wird erstellt, indem ein Ankerpunkt in der Mitte der rechten Kante hinzugefügt und der Ankerpunkt wie gezeigt zurückgezogen wird. Die Navigationselemente werden einzeln mit einer 16 px "Goudy Bookletter" -Schrift erstellt. Die inaktiven Links erhalten einen separaten Zeichenstil, der zu diesem Zeitpunkt eine hellere Farbe aufweist. Um die Navigationselemente gleichmäßig zu verteilen, rufen Sie das Ausrichtungswerkzeug auf. Wenn die Option Abstand verteilen nicht verfügbar ist, klicken Sie auf das Dropdown-Menü des Bedienfelds und zeigen Sie die Optionen an. Richten Sie die Objekte an einem Schlüsselobjekt aus. In diesem Fall wählen Sie Startseite und verteilen den Abstand um 36 Pixel.
Schritt 10
Die typografische Behandlung besteht aus zwei Elementen mit Bändern. Das erste Band erstellen wir, indem wir drei Rechtecke zeichnen. Fügen Sie für die beiden gleich großen Rechtecke auf der Rückseite Ankerpunkte in der Mitte hinzu und ziehen Sie sie zurück, um ein Menüband zu erstellen, wie wir es zuvor für die Navigation getan haben. Wählen Sie beide Formen aus und vereinen Sie sie im Pathfinder-Bedienfeld. Erstellen Sie daraus einen zusammengesetzten Pfad (Strg + 8). Wählen Sie dann das Rechteck in der Mitte und den Versatzpfad um 4 Pixel aus.
Schritt 11
Wählen Sie den Versatzpfad und die Bänder auf der Rückseite und subtrahieren Sie die Pfade. Fügen Sie die resultierenden Formen hinzu, um das gewünschte Ergebnis zu erzielen. Verwenden Sie "Ostrich Sans", um ein "Hallo" bei 72px Bold hinzuzufügen, und wir sind mit diesem speziellen Band fertig.
Schritt 12
Das zweite Menüband wird mit derselben Methode erstellt. Erstellen Sie ein Menüband. Dupliziere und spiegele es dann mit dem Transformationseffekt.
Schritt 13
Versetzen Sie den Pfad und subtrahieren Sie den resultierenden Pfad vom dahinterliegenden Menüband. Verwenden Sie "Ostrich Sans" bei 40px Bold.
Schritt 14
Nachdem unsere Bänder hergestellt sind, werden wir mit der Typbehandlung fortfahren. Dies ist der Teil, in dem ich weniger Hände halten würde und mehr oder weniger hoffen würde, dass die Bilder leicht genug sind, um zu folgen. Der Text selbst ist ohne Erklärung einfach zu erstellen. Die Striche variieren um 1px, 3px und 6px Dicke. Die kreisförmigen Striche werden durch Erstellen einer gestrichelten Linie der Größe 0px mit einem Spalt von 12px und einer Kante mit abgerundetem Radius erzielt. Der wiederholte Sterneffekt wird durch Erstellen eines einzelnen Sterns und Verwenden von Kopien des Transformationseffekts alle 18 Pixel erzielt.
Schritt 15
In der neuen Ebene "About" erstellen wir den nächsten Abschnitt. Sperren Sie den zuvor erstellten Abschnitt. Zuerst erstellen wir die Überschrift und ihren Hintergrund. Wir werden das gleiche Band wie im Logo verwenden, mit dem einzigen Unterschied in der Größe. Erstellen Sie zwei Rechtecke mit den folgenden Einstellungen. Vereinige sie und erstelle einen zusammengesetzten Pfad (Strg + 8).
Schritt 16
Wir werden dies auch in ein Symbol umwandeln, damit wir es für andere Abschnitte wiederverwenden können. Speichern Sie die soeben erstellte Form und speichern Sie sie als Grafiksymbol. Die Überschrift verwendet die Schriftart "Chunkfive" mit 21 Pixel. Wir werden dies als Zeichenstil mit dem Namen H2 - Abschnittsüberschrift speichern.
Schritt 17
Für den About-Abschnitt habe ich mich für viel Text und zwei schwebende Bilder entschieden. Illustrator kann einen solchen Effekt simulieren. Beginnen Sie mit der Erstellung der beiden Absätze. Der erste Absatz wird hervorgehoben und als Zeichenstil(Hervorhebung) gespeichert, während der Absatz einen eigenen Zeichenstil verdient, der im gesamten Design wiederverwendet werden kann.
Schritt 18
Erstellen Sie ein 304 x 247 Pixel großes Rechteck über dem gerade erstellten Text. Gehen Sie zu Objekt > Textumbruch > Erstellen, um ein schwebendes Bild zu erstellen. Wir werden den Rand auf 24 px anpassen, indem wir zu den Optionen für den Textumbruch über Objekt > Textumbruch > Textumbruchoptionen wechseln.
Schritt 19
Wiederholen Sie diese Schritte für ein anderes Bild und platzieren Sie es wie gezeigt.
Schritt 20
Da wir das Symbol bereits erstellt haben, ziehen wir es einfach in diesen neuen Abschnitt (Ebene: Portfolio) und geben den Text ein und wenden den Zeichenstil H2 - Abschnittsüberschrift an. Ziehen Sie für das Portfolioelement ein Rechteck heraus und erstellen Sie wie gezeigt Text.
Schritt 21
Sobald das Portfolioelement erstellt wurde, erstellen wir daraus ein Symbol zur Wiederverwendung. Erstellen Sie ein Grafikelement für Portfolioelemente, ziehen Sie zwei der folgenden Instanzen heraus und verteilen Sie sie gleichmäßig auf 64 Pixel.
Schritt 22
Inzwischen wiederholen wir nur die gleichen Dinge. Das Blockzitat wird mit Text Wrap verschoben.
Schritt 23
Die horizontalen Regeln werden mit Effekt > Transformieren & Verzerren > Transformieren in einem Intervall von 30 Pixel mit der entsprechenden Anzahl von Kopien erstellt.
Schritt 24
Holen Sie sich die Vector Social Icons von der Grafikdesign-Kreuzung für die Social Media-Schaltflächen.
Schritt 25
Für die Fußzeile kopieren wir das Logo aus der Kopfzeile und fügen es hier ein. Wir werden auch das Site-Menü und den Copyright-Hinweis hinzufügen.
Schritt 26
Unser Drahtrahmen sollte jetzt so aussehen. Sie können darauf klicken, um eine größere Vorschau zu erhalten.
Schritt 27
Und jetzt das lustige Stück. Wir werden anfangen, am Aussehen zu arbeiten, beginnend mit dem Hintergrund. Erstellen Sie eine neue Ebene über den Hilfslinien und unter jeder anderen Ebene. Zeichnen Sie mit RGB (247, 94, 80) ein Rechteck, um die gesamte Zeichenfläche abzudecken. Für die Texturen erstellen wir zwei separate Füllschichten, beide farbig RGB (0,0,0). Verwenden Sie Texturizer unter Effekt > Textur > Texturizer, um einen Körnungseffekt und ein Notizpapier mit einer Deckkraft von 5%, einer Überlagerung im Mischmodus und einer Überlagerung von 10% anzuwenden. Sperren Sie diese Hintergrundebene, damit wir sie nicht versehentlich verschieben (Illustrator belastet den Computer ansonsten aufgrund einer versehentlichen Bewegung ziemlich stark).
Schritt 28
Erstellen Sie eine neue Farbfeldgruppe im Farbfeldbedienfeld und fügen Sie Farben mit den folgenden Einstellungen hinzu: RGB (247,94,80); RGB (233,200,97); RGB (232,223,156); RGB (145,192,158); RGB (125,119,105). Illustrator verfügt über ein Farbführungsfeld, in dem Farboptionen wie Farbtöne / Farbtöne, Warm / Kühl und Lebendig / Stumm angezeigt werden
Schritt 29
Wenden Sie Roughen mit einer relativen Größe von 0,05% auf den Header an und legen Sie das Detail auf 100 fest. Stellen Sie die Füllschicht auf RGB (63,60,53) ein. Unterhalb dieser Füllung erstellen Sie eine weitere Füllung RGB (247, 94, 80) und wenden den Transformationseffekt mit den folgenden Einstellungen darauf an (Effekt > Verzerren und Transformieren > Transformieren).
Schritt 30
Für die letzte Füllschicht erstellen wir zunächst ein Muster. Zoomen Sie mit 6400% hinein und erstellen Sie ein 4 x 4 weißes Rechteck. Erstellen Sie 1 x 1 px Quadrate über der Diagonale. Wenn Sie ein Pixelmuster erstellt haben, wählen Sie es einfach vollständig aus und ziehen Sie es in das Farbfeldbedienfeld. Sie können es jetzt verwenden. Erstellen Sie eine neue Füllebene, wenden Sie das soeben erstellte Muster an und setzen Sie die Deckkraft auf 40% und den Mischmodus auf Multiplizieren. Wenden Sie den Transformationseffekt auch bei 4px horizontal und 6px vertikal an. Speichern Sie dies schließlich als Grafikstil im Grafikfenster.
Schritt 31
Verwenden Sie den soeben erstellten Grafikstil und wenden Sie ihn auf die Navigation und die Bänder im Haupttext an. Gehen Sie für das Logo zu Effekt > Stilisieren > Runde Ecken und stellen Sie den Radius auf 5 px ein. Stellen Sie ein 1-Pixel-Strich-RGB (63,60,53) ein und wenden Sie dann einen Transformationseffekt an, der den Strich für insgesamt 3 Kopien auf 93% verkleinert. Erstellen Sie als Nächstes die RGB-Füllebene (237, 211, 129) mit einem 2-Pixel-Schlagschatten (X- und Y-Versatz), der auf 8% Farbbrennmodus eingestellt ist.
Schritt 32
Stellen Sie für diesen Effekt die Füllschicht auf RGB (233,200,97) ein. Erstellen Sie eine Füllschicht darunter bei RGB (55, 52, 46). Wenden Sie eine horizontale und vertikale Transformation von 1 Pixel auf diese Ebene an und erstellen Sie drei Kopien (wodurch ein 3D-Texteffekt erzeugt wird, der dem Herausziehen des Ganzen nach dem Duplizieren in Photoshop ähnelt). Wir werden eine 2 x 2 px-Version des Musters verwenden, das wir zuvor erstellt haben. Erstellen Sie dieses Muster, ziehen Sie es in das Farbfeldbedienfeld und wenden Sie es auf die neue Füllebene unten an. Stellen Sie die Deckkraft auf 50% ein und transformieren Sie sie horizontal und vertikal um 6 Pixel. Speichern Sie dies als Grafikstil.
Schritt 33
Für den normalen dunklen Text haben wir einen Roughen-Effekt mit einer relativen Größe von 2% und einem Detail von 7 angewendet. Die verschiedenen Striche werden mit dem zu Beginn erstellten Muster oder mit einem Roughen mit einer relativen Größe von 0,1% und einem Detailsatz erstellt bis 100. So sieht unsere typografische Behandlung aus.
Schritt 34
Für die Striche habe ich Kombinationen und Variationen von Mustern verwendet, die früher zusammen mit dem Roughen-Effekt verwendet wurden.
Schritt 35
Es ist jetzt einfach, die zuvor erstellten Stile erneut anzuwenden. Dies wird besser visuell verstanden, weshalb ich vorschlagen würde, sich die Bilder anzusehen. Wählen Sie den Text aus und der entsprechende Zeichenstil wird angezeigt. Hier zahlt sich unsere anfängliche Anstrengung aus. Ändern Sie den ausgewählten Text, gehen Sie zu den Bedienfeldoptionen und wählen Sie Zeichenstil neu definieren. Dies gilt überall dort, wo der Zeichenstil im Dokument verwendet wurde.
Der letzte Erscheinungsstil, den wir erstellen, ist der Bildplatzhalter. Stellen Sie den Strich innen mit weißer Farbe auf 4 Pixel ein. Wenden Sie einen Schlagschatten von 2 px (X- und Y-Versatz) an und stellen Sie den Mischmodus und die Deckkraft auf Multiplizieren auf 35% ein
Schritt 36
Arbeiten Sie weiter. Sie müssen auf das Symbol doppelklicken, damit Sie es bearbeiten können. Wenden Sie die Charakter- und Erscheinungsstile an, die wir entwickelt haben, um sie endlos wiederzuverwenden. Wenn Sie mit dem Ergebnis zufrieden sind, drücken Sie die Esc-Taste, um den Isolationsmodus zu verlassen. Der Effekt wird auf die anderen Portfolioelemente angewendet. (Eine alternative Möglichkeit wäre gewesen, die Verknüpfung zum Symbol zu unterbrechen, den Stil nach Herzenslust zu bearbeiten und das Symbol später neu zu definieren.)
Schritt 37
Geduld, Ausdauer, harte Arbeit und Wiederholung ergeben ein klareres Bild.
Abschluss
Und hier ist das Endergebnis. Ich hoffe, Sie fanden das Tutorial nützlich und strotzen nur so vor Aufregung. Sie können versuchen, an den Tablet- und Mobile-Versionen zu arbeiten, Illustrationen hinzuzufügen und möglicherweise mehr Tiefe und Experimente mit Layout und Farben vorzunehmen. Ich habe auch Social-Media-Symbole in der Navigationsleiste hinzugefügt. Ich würde gerne sehen, was Sie als Ergebnis machen, also teilen Sie.
By
