Während Photoshop ist in erster Linie zum Bearbeiten und verbessern Sie Fotos und Grafiken erstellen entworfen , können Sie das Programm " Slice-Werkzeug " und "Speichern für Web und Geräte speichern " Optionen, um Web-Seiten aus Ihrer erstellen PSD Bilddateien. Verwenden Sie das Slice- Werkzeug zu schneiden ( oder "Scheibe" ) die PSD in einzelne Abschnitte. Jede Scheibe wird eine separate Web- Element , z. B. eine Schaltfläche oder ein Textfeld . Photoshop legt jede Scheibe im eigenen HTML-Tabelle . Anschließend können Sie Hyperlinks oder andere HTML-Tags zu den verschiedenen Scheiben und exportieren Sie die PSD zu HTML- Web-Seite. Things You
Adobe Photoshop CS3 oder höher
brauchen anzeigen Weitere Anweisungen
Erstellen einer Webseite in Photoshop
1
Starten Sie ein neues Bild in Photoshop PSD mit den Abmessungen Sie wollen für Ihre Web- Seite , wie folgt aus: Klicken Sie auf " File" in der Menüleiste und wählen Sie " Neu", um das Dialogfeld Neu angezeigt . Geben Sie die Seitenbreite (in Pixeln) in der "Breite" -Feld und die Höhe (in Pixeln) in der "Höhe " ein.
2
Typ "96" im Feld "Auflösung" und klicken Sie auf " OK. " Dies schafft eine leere Leinwand für Ihre Web- Seite .
3
Erstellen Sie die Banner-Grafiken und Schaltflächen am oberen Rand der Seite. Sie können vorhandene Bilder und legen Sie sie an oder nutzen wollen Photoshop Grafik-und Text-Tools zu erstellen und das Layout des Banners .
4
Wählen Sie den " Slice-Werkzeug " (fünfte Taste von oben in die Toolbox ) . Wenn das Slice-Werkzeug nicht angezeigt wird , klicken Sie und halten Sie die Taste und wählen Sie " Slice-Werkzeug " aus dem fly -out.
5
Ziehen Sie den Mauszeiger um die erste Schaltfläche oder einen Bereich in dem Banner , wo Sie möchten einen Link zu erstellen . Photoshop erstellt eine Box oder "Scheibe ", um das Objekt herum und legt sie in einer Tabelle. Wenn Sie die Seite exportieren , zeigen Sie Ihre Scheiben als separate Objekte in einzelnen HTML-Tabellen .
6
rechten Maustaste auf die Scheibe , und wählen Sie " Bearbeiten Slice-Optionen " aus dem Fly-Out- Menü, um das Slice-Optionen Dialogfeld . Verwenden Sie dieses Dialogfeld , um die Eigenschaften der Schaltfläche zu definieren. Geben Sie beispielsweise den URL-Link in dem Feld "URL" . Geben Sie den Ziel-Browser -Seite , alternative Tags und so weiter. Klicken Sie auf " OK".
7
Wiederholen Sie diese Schritte für die Erstellung und Bearbeitung von Tasten Slice-Optionen für jeden Bereich, den Sie möchten, anklickbar.
8
Mit dem Slice-Werkzeug zu definieren ein Bereich auf der Seite , wo Sie wollen , um ein Textfeld zu platzieren. Rechten Maustaste auf die Scheibe , und wählen Sie " Bearbeiten Slice-Optionen " aus dem Fly-Out- Menü .
9
die " Scheibe Typ " Drop-Down und wählen Sie " Kein Bild ". Der "Text in Zelle angezeigt "-Feld wird angezeigt. Sie können entweder Ihren Text in diesem Feld oder kopieren und fügen Sie es von einem Textverarbeitungsprogramm. Wenn Sie fertig sind , klicken Sie auf " OK".
10
die Klicken Sie auf " Scheibe Typ " Drop-Down und wählen Sie " Kein Bild. " Die "Text in Zelle " angezeigt wird angezeigt. Sie können entweder Ihren Text in diesem Bereich oder zu kopieren und es aus einer Textverarbeitung Wenn Sie fertig sind , klicken Sie auf " OK "
. Hinweis: . dieses Feld unterstützt die meisten HTML-Tags. Zum Beispiel, um einige der Text kursiv zu machen , legen Sie einfach den Text zwischen den " Ihren Text " -Tags. Verwenden Sie "
" Absatz Auszeiten zu schaffen , und so weiter.
Beachten Sie auch, dass der Text in dieser Tabelle nicht in Photoshop angezeigt --- Sie können nicht sehen, bis Sie die Seite exportieren.
11
Weiter Hinzufügen und Definieren von Slices für Texte, Bilder , Grafiken und so weiter, bis Sie das Layout fertig .
12
Klicken Sie auf " File" in der Menüleiste und wählen Sie "Speichern für Web und Geräte speichern ". Es öffnet sich das Für Web und Geräte Dialogfeld Speichern unter. Verwenden Sie dieses Dialogfeld, um Hintergrundfarbe, Bildkompression und Qualität, und so weiter kontrollieren.
13
Klicken Sie auf die Schaltfläche "Speichern" zu nennen und exportieren Sie die Web-Seite.
