Share
Dieses Tutorial ist ideal für Anfänger und Fortgeschrittene von Adobe Illustrator. Wir zeigen Ihnen, wie Sie eine Website gestalten und für die Verwendung im Internet vorbereiten. Außerdem verwenden wir die kürzlich veröffentlichte Website Elements Freebie, um das Design zu verspotten.
Starte ein Neu Dokument mit einer Breite von 960px und eine Höhe Ihrer Wahl. Ich habe diese Breite gewählt, da diese Website wahrscheinlich Internetverkehr mit durchschnittlichen bis großen Monitoren verursacht. Eine Breite von 960 Pixeln ist eine sichere Größe, die die Mehrheit der Besucher bevorzugt. Zum Schluss stellen Sie Ihre Farbmodus zu RGB.
Der schwarze Rand zeigt die von uns erstellte Dokumentgröße (als Artboard bezeichnet). Ich lege gerne einen leeren Screenshot eines Browserfensters während des Entwurfs auf eine eigene Ebene, um eine gute Vorstellung davon zu bekommen, wie meine Website aussehen wird, wenn sie fertig ist.
Dieser nächste Schritt ist sehr wichtig. Stellen Sie sicher, dass Sie wissen, mit welchem Zoom Sie das Dokument betrachten. Wenn alles gesagt und getan ist, wird Ihre Website zu 100% gesehen. Sie können während der Bearbeitung Ihres Layouts die Ansicht vergrößern und verkleinern. Stellen Sie jedoch sicher, dass alle Ihre Text- und Designelemente bei einer Anzeige von 100% lesbar sind. Verwenden Sie die unten hervorgehobene Dropdown-Liste (oder geben Sie einfach den gewünschten Prozentsatz ein), um den Zoom zu ändern.
Randbemerkung: In Adobe Illustrator werden die Zahlen manchmal unleserlich und zeigen die Zahlen nicht an, wenn Sie sie in den unten hervorgehobenen Zoombereich eingeben. Wenn Sie beispielsweise 58% eingeben, ändern sich die Zahlen während der Eingabe manchmal nicht. Wenn dies der Fall ist, drücken Sie einfach die Eingabetaste, nachdem Sie Ihre Werte eingegeben haben, und die Größe Ihres Dokuments wird auf die von Ihnen eingegebene Zahl geändert.
Die Zeichenfläche kann zwischen sichtbar und unsichtbar umgeschaltet werden Ansicht> Zeichenfläche ausblenden. Das Problem dabei ist, dass es etwas länger dauert, als Führungen anzuzeigen und auszublenden (Befehl + Semikolon-Taste) Ich finde es am besten, Guides zu verwenden und das Artboard auszublenden. Im Verlauf des Layouts einer ganzen Website werden Sie es viel einfacher finden, einen Tastenkürzelbefehl zu drücken, als an den oberen Rand des Bildschirms zu gehen und jedes Mal aus einer Liste auszuwählen.
Es kann leicht sein, ein Gleichgewicht und eine schöne Hierarchie herzustellen, indem Sie zunächst einfache graue Kästchen auf Ihrer Seite zeichnen. Die dünnen Rechtecke zeigen an, wo ich Text verwenden möchte, während die großen grauen Kästchen Bilder sind.
Nachdem Sie eine allgemeine Vorstellung davon haben, wie das Layout aussehen wird, können Sie Hilfslinien hinzufügen und die grauen Kästchen entfernen.
Fügen Sie nur die Hilfslinien als Referenz hinzu, und fügen Sie weitere Elemente hinzu, z. B. Navigation, Text und Verschärfung, an der sich das Logo, die Bilder und Symbole befinden. Es ist hilfreich, Ihre Guides ein- und auszuschalten (Befehl + Semikolon-Taste), während Sie das Layout verfeinern. Wenn die von Ihnen erstellten Guides nicht so gut funktionieren, wie Sie dachten, passen Sie sie auf jeden Fall an.
Randnotiz: Wenn Sie die Hilfslinien ein- und ausschalten, werden sie automatisch gesperrt. Sie können gesperrte Hilfslinien nicht verschieben. Um die Führungen schnell zu entsperren, drücken Sie Befehl + Wahl + Semikolon.
Fahren Sie mit dem Finalisieren der Kopfzeile mit Bildern, Symbolen und Grafiken fort.
Im Folgenden habe ich mich entschieden, eine hellblaue Farbe hinzuzufügen, um die Kopfzeile zu verbessern.
Fügen Sie Ihrem Text Stil hinzu und stellen Sie sicher, dass Links und Überschriften aussehen. Ich finde es viel einfacher und schneller, so viele Designelemente in Illustrator zu erstellen, dass ich mich darauf konzentrieren kann, die Website zu programmieren und zu programmieren, wenn die Zeit dazu kommt.
Es gibt verschiedene Möglichkeiten, um ein Design für die Verwendung in einem WYSIWYG-Editor (Was Sie sehen, was Sie erhalten) wie Adobe Dreamweaver vorzubereiten. Die erste Methode verwendet Slices. Slices können mit Hilfe von Guides oder einer Auswahl erstellt werden. Um Hilfslinien zum Erstellen von Segmenten zu verwenden, ziehen Sie zunächst Hilfslinien auf Ihre Seite um jedes Objekt, für das ein eigener Link erforderlich ist. Beispiel: Ein Symbol, das beim Klicken auf eine bestimmte Seite wechselt. Unten habe ich vier Symbole. Jedes Symbol führt den Besucher zu einer anderen Webseite oder einem anderen Bereich der Website.
Ich habe Hilfslinien zwischen jedem Symbol und etwas außerhalb des blauen Bereichs gezeichnet. In der Regel ist es sauberer, wenn Sie die Hilfslinien um 1 oder 2 Pixel außerhalb des zu schneidenden Bereichs zeichnen. Dadurch wird sichergestellt, dass keines Ihrer Kunstwerke abgeschnitten wird.
Randbemerkung: Zeichnen Sie nicht gleichzeitig Hilfslinien über Ihr gesamtes Layout. Führen Sie stattdessen Abschnitte einzeln durch. Führen Sie beispielsweise zuerst den Kopfbereich aus. Löschen Sie alle Ihre Führer, indem Sie zu gehen Ansicht> Hilfslinien> Hilfslinien löschen. Speichern Sie Ihre Slices für das Web (wird später erläutert), und wiederholen Sie diesen Vorgang für andere Bereiche des Layouts.
Sobald Sie Ihre Guides gezeichnet haben, besteht der nächste Schritt darin, Scheiben daraus zu machen. Um Scheiben von Ihren Guides zu machen, gehen Sie zu Objekt> Schnitt> Aus Hilfslinien erstellen. Gelegentlich erstellt Illustrator beim ersten Versuch möglicherweise keine Schnitte. Ich habe festgestellt, dass ich diesen Schritt manchmal drei oder vier Mal wiederholen muss, bevor Illustrator tatsächlich Scheiben schneidet. Die schwarzen, nummerierten Kästchen zeigen an, dass die Scheiben erstellt wurden.
Um Ihre Slices für die Verwendung auf einer Website zu speichern, gehen Sie zu Datei> Speichern für Web und Geräte… Verwenden Sie die Slice-Auswahlwerkzeug (K) in der oberen linken Ecke hervorgehoben, um die bestimmten Segmente auszuwählen, die Sie speichern möchten. Wählen Sie mehrere Schichten gleichzeitig aus, indem Sie die Umschalttaste gedrückt halten. Passen Sie die Einstellungen rechts an Ihre Bedürfnisse an. JPEG-Bilder eignen sich am besten für Elemente mit mehreren Farben, während das GIF-Dateiformat für Elemente mit großen Farbbereichen und nicht generell vielen Farben gut geeignet ist. Das PNG-Dateiformat eignet sich jedoch gut für transparente Grafiken (dies erfordert jedoch einige Anpassungen ältere IE-Browser). Möglicherweise möchten Sie die Qualität im Vergleich zum Dateityp testen und die Einstellung anpassen Qualität um Bandbreite zu sparen. Sobald Sie fertig sind, klicken Sie auf sparen.
Legen Sie fest, wo Sie die Bilder speichern möchten. Ich habe den Desktop ausgewählt. Wählen Sie unter Format die Option Nur Bilder aus und klicken Sie dann auf Speichern.
Auf Ihrem Desktop haben Sie jetzt einen Ordner namens Bilder. In diesem Ordner befinden sich die ausgewählten Slices (Bilder), die Sie ausgewählt haben. Diese Bilder sind hinsichtlich Auflösung und Dateigröße ideal für die Verwendung im Internet.
Löschen Sie Ihre Führer, indem Sie zu gehen Ansicht> Hilfslinien> Hilfslinien löschen. Zeichnen Sie jetzt neue Hilfslinien um den nächsten Bereich, den Sie schneiden möchten. Der Hover-Status (wenn sich der Mauszeiger über der Navigation befindet) ist rot, während der Aus-Status grau ist. Sie müssen beide Versionen der Navigation erstellen. Um dies effizient zu erreichen, müssen Sie zunächst alle Navigationselemente rot markieren und dann zu gehen Datei> Speichern für Web und Geräte…
Wählen Sie die bestimmten Slices aus, die Sie speichern möchten. Da meine Navigation nicht aus Bildern oder einer Fülle von Farben besteht, habe ich entschieden, dass der beste Dateityp für die Navigation GIF ist. Klicken Sie dann auf sparen. Beachten Sie außerdem, dass Sie, wenn Ihr Benutzer eine webgestützte Schriftart hat, HTML-Text anstelle von Bildern verwenden können.
Sie können Ihren Bildern an dieser Stelle einen neuen Namen geben. Sie werden jedoch automatisch für Sie benannt, daher ist dies nicht obligatorisch.
Wenn Sie Ihre Bilder am gleichen Ort wie zuvor gespeichert haben, werden Sie feststellen, dass der Ordner Bilder auf Ihrem Desktop jetzt die zusätzlichen Bilder enthält, die Sie gerade gespeichert haben.
Beachten Sie, dass dies nur ein möglicher Workflow ist. Alternativ können Sie irgendwo in Ihrem Dokument ein- und ausschalten, alle Ihre Slices erstellen und zusammen exportieren.
Die andere Methode zum Erstellen von Slices besteht darin, ein Objekt auszuwählen und dann zu gehen Objekt> Schnitt> Aus Auswahl erstellen. Das Erstellen von Slices mithilfe von Hilfslinien oder aus einer Auswahl ist ebenfalls in Ordnung. Verwenden Sie einen Workflow, den Sie für das jeweilige Projekt, an dem Sie arbeiten, am besten finden.
Gelegentlich müssen Sie nicht den Text einfügen, der in ein Slice fällt. Die Fußzeile enthält beispielsweise Text, der innerhalb des WYSIWYG-Editors eingegeben wird. Wenn dies der Fall ist, löschen Sie einfach den Text vor oder nach dem Erstellen der Slices, aber vor dem Speichern der Slices für das Web.
Nachfolgend werden Sie feststellen, dass ich den Text gelöscht habe, nachdem die Slices erstellt wurden.
Beachten Sie die endgültige Website. Wie Sie sehen, ist das Layout einer Website in Adobe Illustrator einfach und effektiv. Sie können schnell mit dem Design experimentieren und dieser Phase des Webdesignprozesses die Aufmerksamkeit und den Gedanken geben, die es braucht. Sie können das endgültige Bild unten anzeigen oder eine größere Version hier anzeigen.
Accentsconagua