Photoshop ist ein großes Werkzeug für diejenigen, die eine visuelle Annäherung an Web-Design oder die sich von der Idee, den Umgang mit HTML-Code eingeschüchtert nehmen wollen. Es verfügt über alle Werkzeuge, die Sie brauchen , um Bilder , Texte und Grafiken in eine Webseite integrieren Layout , und alles, was benötigt , um diese Elemente für das Web zu optimieren, und Adobe Dreamweaver im Besonderen. Things You
Computer Adobe Photoshop Software (vorzugsweise CS3 oder höher)
Bilder und Inhalte für eine Webseite (oder Dummy- Inhalte ) auf Twitter zeigen Weitere Anweisungen
Initial Setup brauchen
1

Starten Sie Photoshop und wählen Sie Datei> Neu aus dem Menü . Klicken Sie auf den Preset Dropdown-Menü und wählen Sie Internet. Passen Sie die Größe Dropdown- zu einem Standard-Web- Größe, die Sie möchten, dass Ihre Seite zu sein .
2

Select File-> Open aus dem Menü und öffnen Sie das Bild , das Sie als nutzen würde Ihre Header. Dadurch wird eine neue Registerkarte oder Fenster für das Bild , je nach Ihren Photoshop -Einstellungen .
3

Wählen Sie das Auswahlrechteck Werkzeug aus der Werkzeug-Bedienfeld auf der linken Seite Ihres werben. Setzen Sie den Stil Dropdown-Menü , um Feste Größe in den Tool Options Panel über Ihre Leinwand und die Breite gleich der Breite der Seite, die Sie in Schritt 1 erstellt haben. Die Höhe kann so groß oder klein , wie man es den Header Bild gerne auf Ihrer Webseite erscheinen .
4

Wählen Sie das Verschieben-Werkzeug aus der Werkzeuge-Palette und bewegen Sie das Festzelt über die Fläche des Bildes Sie wollen als header image . Wählen Sie Bild > Crop aus dem Menü .
5

Wählen Sie Bearbeiten > Kopieren , um die beschnittene header image kopieren. Wechseln Sie wieder auf die Registerkarte oder Fenster mit Ihrer Web-Seite werben. Wählen Sie Bearbeiten> Einfügen, um den Kopf auf der Web-Seite einfügen. Mit dem Verschieben-Werkzeug , bewegen Sie den Header , so dass an den oberen Ecken an den oberen Ecken Ihrer Webseite passen .
Entwerfen Sie Ihre Seite und Erstellen von Slices
6

öffnen und fügen Sie alle anderen Elemente, die Sie wollen, um Ihre Web -Seite. Sie können in andere Bilder mit dem gleichen Verfahren verwendet, um die Header -Paste . Fügen Sie ein Menü mit Text , indem Sie die Art Werkzeug aus der Werkzeuge-Palette . Die meisten Web- Seiten enthalten einen Header , ein Körper, der Ihre wichtigsten Inhalte und Grafiken oder Bilder mit dem Inhalt oder den Menüpunkten zugeordnet sind , und eine Fußzeile , die oft auch Kontaktinformationen oder Copyright-Vermerke .
7

Denken Sie daran, die Grundidee von Tabellen in Website-Design beim Verlegen Sie Ihre Seite in Photoshop.
8

wählen Sie Ansicht > Raster aus dem Menü , und wählen Sie das Slice- Werkzeug, verschachtelt unterhalb des Crop -Werkzeug in das Bedienfeld Werkzeuge . Klicken und ziehen Sie ein Feld mit dem Werkzeug um die Gesamtheit Ihrer Seite zu beginnen .
9

Als Scheiben rund um den Header, Body und Footer der Seite weiter zu unterteilen die Seite. Dieser Prozess ist der Beginn der Verlegung der Seite in einer Tabelle Format für die Verwendung in Dreamweaver.
10

Stellen Scheiben um jedes grafische Element der Header, Body und Footer wie Menü-Buttons , Logos oder Bilder . Versuchen Sie, Scheiben für Ihre Buttons und Ausrichten Elemente ausgerichtet zu halten . Die Snap -Funktion in die Sache zu vereinfachen helfen.
Speichern und Optimieren Sie Ihre Design for Dreamweaver
11

Zugang Desktop Ihres Computers und erstellen Sie einen neuen Ordner für Ihre Web -Seite. Mac-Benutzer wählen Finder> Neuer Ordner. Windows-Benutzer auf dem Desktop mit der rechten Maustaste und wählen Sie Neu> Ordner. Erstellen Sie eine zusätzliche Ordner in diesem Titel " Bilder . "
12

Zurück zu Photoshop und wählen Sie Datei > Für Web speichern (oder Speichern für Web und Geräte für CS4 Benutzer). Es öffnet sich ein Dialog , in dem Sie Ihre geschnittenen Bildern für das Web und Dreamweaver optimieren .
13

Als Dateityp , Qualität und Farbeinstellungen an jeden Ihrer Scheiben in der rechten Spalte der Dialog . Wählen Sie ein Slice , indem Sie es im Schaufenster der Dialogbox . Fotografische Bilder sollten als JPEG-Dateien in den Drop-down knapp unter Preset -und Solid- farbigen Bildern, wie Logos oder Menü-Tasten gespeichert werden können, im GIF-Format für optimale Web-Performance gespeichert werden. Qualität Anpassungen können in den beiden Dropdown-Menüs unten vorgenommen werden. Die meisten Bilder können ihre Qualität reduziert, während noch auf der Suche auf Ihrer Webseite fein, so senken die Qualität , bis Sie einen deutlichen Unterschied sehen . Dies macht die Seite schneller geladen .
14

Klicken Sie auf Speichern , wenn jede Scheibe eingestellt worden ist . Wählen Sie HTML und Bilder im Format Dropdown der Dialogbox , die erscheint. Ändern Sie den Zielordner in den Ordner images innerhalb der Webseite Ordner auf dem Desktop erstellt . Ihr Layout ist nun optimiert und bereit für den Einsatz in Dreamweaver. Die Elemente der Seite können in der Palette Dateien in Dreamweaver gefunden werden , auf der rechten Seite Ihrer Website angezeigt. Sie können einen Blick auf Ihre gesamte Layout in Scheiben geschnitten und für das Web optimiert und gewartet werden , wie Sie es gestaltet in Photoshop durch das Öffnen der . Html -Datei in Ihre Bilder Ordner erstellt , wenn Sie die für Web speichern in Photoshop fertig zu bekommen.