Entwerfen von Websites in Illustrator

Adobe Illustrator ist ein Vektor-Grafiken-Abbildung-Programm, das Sie Vektor-Bilder und Formen mit einer Vielzahl von Tools und Grafikfilter erstellen kann. Verwenden Sie Illustrator, um das Aussehen und das Erscheinungsbild Ihrer Website entwerfen, und exportieren Sie dann die Bilder aus Illustrator in eine Webseite-Bauprogramm.

Anweisungen

1 Erstellen Sie ein neues Dokument in Adobe Illustrator. Die Breite auf 960 Pixel festgelegt, und legen Sie "Color Mode" auf "RGB." Verleihen Sie Ihren Dokumenten einen Namen und klicken Sie auf "OK".

2 Verwenden Sie das Rechteck-Werkzeug, um eine grundlegende Layout erstellen. Zeichnen Sie die graue Rechtecke innerhalb der schwarzen "Zeichenfläche" Grenze zur grafischen und textlichen Elementen entsprechen, die Sie in Ihre Webseite einbinden möchten. Passen Sie Ihr Layout, bis Sie zufrieden sind, und speichern Sie Ihre Arbeit.

3 Erstellen Sie Anleitung um Ihre graue Felder Linien. Um eine Führungslinie zu erstellen, klicken Sie auf die horizontale oder vertikale Lineale an den Rändern des Bildschirms, und ziehen Sie Ihre Maus auf den Arbeitsbereich. Lassen Sie die Maustaste los, um den Guide festzulegen. Sie können Hilfslinien wieder durch Klicken und ziehen sie mit der Maus anpassen.

4 Löschen Sie Ihre graue Felder; Sie werden mit einem leeren Arbeitsbereich von mehreren Führern beschriebenen hinterlassen.

5 Erstellen Sie die grafischen Elemente einer Webseite, wie Logos, Symbole und Text-Attrappen mithilfe der Tool-Palette von Adobe Illustrator. Verwenden Sie die Hilfslinien, wenn Ihre grafische Elemente auf der Webseite zu platzieren. Sobald Sie das Erscheinungsbild Ihrer Website erstellt haben, speichern Sie Ihre Arbeit.

6 Wählen Sie "Guides" aus dem Menü "Ansicht" und klicken Sie dann auf "Clear Guides" alle Hilfslinien auf dem Bildschirm zu löschen. Sie müssen erstellen neue Hilfslinien um Einzelelemente Ihre Mock-up für die Verwendung im Web zu speichern.

7 Wählen Sie eine Rubrik für Ihre Webseite-Mock-up wie das Navigationsmenü oder der grafischen Symbole, und ziehen Sie einen neuen Satz von Hilfslinien um in diesem Abschnitt, so dass jedes einzelne Element des Abschnitts in einer Box gekapselt ist.

8 Wählen Sie im Menü "Objekt" "Scheibe" und klicken Sie auf "Aus Hilfslinien erstellen". Nummern werden in den Feldern angezeigt, die Sie erstellt; Diese Felder sind grafische "Scheiben", die als einzelne Bilder für die Verwendung auf einer Webseite gespeichert werden können. Wählen Sie "Speichern für Web & Geräte" im Menü "Datei", ein neuen Dialogfenster zu öffnen.

9 Klicken Sie auf das "Slice-Auswahlwerkzeug" im Fenster "Speichern für Web & Geräte". Wählen Sie die Segmente, die Sie durch Anklicken im Viewer-Fenster exportieren möchten. "Image Type" auf "JPEG" und klicken Sie auf "Speichern" um Ihre Scheiben als einzelne Bilder zu speichern.

10 Wiederholen Sie die Schritte 6 bis 9, um einzelne Bilder aller grafischen Elemente Ihrer Webseite zu erstellen. Sobald Sie die grafischen Elemente gespeichert haben, in einer Web-Seite Design-Programm wie Adobe Dreamweaver importieren.

Tipps & Warnungen

• Um die Scheiben aus einzelnen Elementen des Entwurfs Webseite ohne Verwendung von Hilfslinien zu erstellen, verwenden Sie das Auswahl-Werkzeug, ziehen einen Rahmen um das Element, und wählen "Slice" aus dem Menü "Objekt", und klicken Sie auf "Aus Auswahl erstellen."
• Adobe Illustrator ist eine Grafik-Design-Anwendung und kann nur die visuellen Elemente einer Website entwerfen. Um eine vollständige Website zu erstellen, benötigen Sie eine Website-Bau-Programm wie Adobe Dreamweaver.