Adobe Illustrator ist ein Design- Programm, Vektorgrafiken erstellt für eine Vielzahl von Anwendungen, einschließlich Druck, Bewegung und Web. Vektor Grafiken verwenden mathematische Formeln , um Bilder , im Gegensatz zu anderen Formaten wie GIFs Gegensatz , die eine Sammlung von Punkten verwenden präsentieren . Obwohl nicht speziell als Web-Design -Programm entwickelt , hat Illustrator haben fortschrittliche Tools, um Grafiken im Rahmen des Programms für die Website -Nutzung erstellt exportieren und erzeugt auch den Code für die Anzeige in einem Browser benötigt. Things You
Webdesign Schnittsoftware
brauchen anzeigen Weitere Anweisungen
Erstellen eines Layouts
1
Neues Illustrator -Dokument, das 960 Pixel breit ist mit einer Höhe von Ihre Wahl je nach Inhalt und Gestaltung Sie im Verstand haben . Eine Website 960 px breit entspricht der beliebteste Bildschirmauflösung Breite von 1024 Pixel , wenn die Scroll-Leiste und Fenster Kanten berücksichtigt werden .
2
erstellen handgezeichneten Skizze der grundlegenden visuellen Layout Ihre Website , wenn Sie nicht bereits getan haben . Dies wird Ihnen mit einem handlichen Referenz für die Erstellung in Illustrator zu stellen.
3
Erstellen Sie Ihr Layout mit dem Bild-und Text-Tools für einen stilisierten Kopf . Wenn Ihr Design beinhaltet Platz für Text wie Blogeinträge, lassen Sie das Feld in diesem Bereich leer oder erstellen Sie einen Rahmen um sie für einfache Abgrenzung .
4
In Führungen , um Ihr Design auf die verschiedenen Abschnitte der Abgrenzung das Layout . Dies ist sehr wichtig, weil Sie diese Führungen verwenden wird, um Scheiben , die die Grenzen der Elemente auf Ihrer Website definieren zu machen. Guides können Ihnen helfen, line up Objekte mit Präzision. Klicken Sie auf die vertikale oder horizontale Lineal und ziehen Sie die Maus an die gewünschte Position die Führung an sich werden.
5
Prüfen Sie die Platzierung Ihrer Führungen für Präzision und Genauigkeit. Zeichnen Sie mehr, wenn notwendig, um die einzelnen Elemente , wie Navigation Bilder, die Links auf Ihrer Website sein wird trennen.
Codegenerierung
6
Wählen Sie " Objekt " aus dem Menü , wählen Sie dann " Slice" und wählen Sie " Neues von Guides . " Wenn die Scheiben angelegt sind, werden Sie kleine schwarze Kästchen in jede Scheibe mit einer entsprechenden Anzahl zu sehen. Wählen Sie "Datei" aus dem Menü und wählen Sie "Speichern für Web und Geräte speichern ". Wählen Sie das Slice -Auswahl-Werkzeug , das das zweite Symbol in der Tool-Menü auf der rechten Seite des Bildschirms unter dem Hand-Symbol ist . Wählen Sie alle Scheiben .
7
Wählen Sie die Optimierung Einstellungen aus den Optionen auf der rechten Seite des Bildschirms . Sie können wählen, Voreinstellungen oder erstellen ein individuelles Profil, abhängig davon , ob Sie Ihre Bilder auf JPEGs, GIFs oder PNG -Dateien sein. Sie können auch die Qualität der Bilder .
8
Preview verschiedenen Einstellungen durch einen Klick auf den " 2-up " und "4 -up" Tabs. Am unteren Ecke jeder Vorschau können Sie die Optimierung Informationen wie Dateigröße und Browser Rendering-Zeit . Klicken Sie auf die Schaltfläche "Speichern" . Entscheiden Sie, wo Sie Ihre Bilder und Code , um gerettet zu werden und wollen navigieren Sie zu diesem Bereich mit dem " Wo : " Taste
9
Wählen Sie das Format für Ihre Arbeit. . Wenn Sie in HTML beherrschen sind und wollen nur die Bilder , weil Sie Code wird für sie später hinzuzufügen, wählen Sie " Nur Bilder ". Wenn Sie ein Neuling sind oder es vorziehen, die HTML-Code für Sie generiert , wählen Sie die " HTML und Bilder "-Option. Wenn Sie für die Positionierung der Elemente mit Cascading Style Sheets anstelle von Tabellen organisiert werden möchten, wählen Sie die "Default Settings" -Taste und wählen "Exportieren als CSS-Ebenen " in der "Layers "-Registerkarte.
10 < p> Öffnen Sie die HTML-Datei in einem Browser , um Ihre Arbeit zu sehen. Bearbeiten Sie die Dateien mit einem Web- Design-Programm.
