Aufbau einer Website-Layout ist eine anspruchsvolle Aufgabe , die Grafik-Designer Jahre braucht, um Meister . Sowohl für die erfahrene und unerfahrene , bietet Adobe Photoshop eine Reihe von Tools , die helfen, den Prozess der Erstellung eines Website-Layouts . Bevor Sie beginnen, sollten Sie eine gute Vorstellung davon, wie Sie Ihre Website zu schauen . Skizzieren Sie ein paar Beispiele auf Papier vor Beginn , so dass Sie bereits über eine solide Ausgangsbasis . Beginnend mit einem Logo bereits entworfen wird auch die Geschwindigkeit Ihres Layout-Erstellung . Anleitung
1
Erstellen einer neuen Datei in Photoshop , indem Sie auf "Datei "-Menü und wählen Sie " Neu." Die Größe des Bildes wird die fertige Größe Ihrer Website zu ermitteln , so wählen Sie eine Breite, die für die meisten Bildschirme ist . Eine Breite von 750 Pixel wird dafür sorgen, dass Ihre Website für jedermann sichtbar mit einer Bildschirmauflösung gleich oder größer als 800 x 600 ist . Geben Sie einen Wert für die Höhe von etwa 500 Pixel. Dies kann später angepasst werden. Drücken Sie auf " OK".
2
Entwerfen Sie Ihre Website- Header, der die Fläche, die auf der Oberseite Ihrer Webseite erscheint, ist . Dieser Bereich sollte auf nicht mehr als 200 Pixel in der Höhe begrenzt. Fügen Sie Ihre Website- Namen und das Logo in diesem Bereich , sowie einige Grafiken oder Fotos , die den Zweck Ihrer Website zu markieren. Zum Beispiel kann eine gemeinnützige Gesellschaft Website-Layout gehören Fotografien von Personen, die sie haben dazu beigetragen .
3
erstellen Navigationsleiste unter dem Header, der etwa 50 Pixel hoch ist. Wählen Sie die "Text -Typ " aus der Werkzeugleiste auf der linken Seite , und klicken Sie auf das Bild zu schreiben . Geben Sie die Namen der verschiedenen wichtigsten Seiten Ihrer Website (wie "Home ", " Über uns ", " Kontakt ", " Produkte ", etc.).
4
Machen Sie ein Feld unter Ihrer Navigationsleiste, um den Bereich, den Text auf Ihrer Website gehen zu vertreten. Sie können diesen Bereich leer für jetzt verlassen, aber Sie brauchen, um das Gebiet so reserviert , dass Sie nicht hinzuzufügen Designs zu. Der Bereich kann so breit sein wie Ihre Kopf-und Navigationsleiste oder schmaler sein , um auf den Seitenleisten links, rechts oder beide.
5
Entwurf Seitenleisten unterbringen , wenn Sie Zimmer verließ für sie. Diese Seitenleisten wird unter Ihrem Kopf beginnen und gehen über die gesamte Länge der Seite , bis Ihr Fußzeile. Ihre Sidebar kann entweder gehören Grafiken oder Fotos , oder kann ein anderer Bereich für Text sein . Wenn Sie die Reservierung der Bereiche für Text sind, können Sie lassen Sie sie leer . Ansonsten beginnen, die Grafiken , die in Ihrem Seitenleisten erscheint entwerfen.
6
erstellen Fußzeile am unteren Rand des Bildes. Die Fußzeile sollte so breit wie der Kopf , kann aber wie groß oder klein , wie Sie wünschen . Sie brauchen nicht zu verlassen ausreichend Platz zwischen Kopf-und Fußzeile für den Text als Ihr Entwurf automatisch wachsen und schrumpfen , um mehr oder weniger Text unterzubringen kümmern. Fügen Copyright-Informationen in der Fußzeile sowie alle Haftungsausschlüsse Sie hinzufügen möchten .
7
Weiter auf alle Aspekte der Website-Layout arbeiten, bis Sie mit dem Aussehen zufrieden sind. Speichern Sie die Datei , indem Sie auf das Menü "Datei" und wählen Sie " Speichern". Speichern Sie das Bild in Adobe Photoshop-Format (*. Psd) , so dass Sie später darauf zurückkommen können und zusätzliche Änderungen ohne Verlust an Qualität.
8
Wählen Sie den " Slice" -Tool in der Symbolleiste auf die linken und Drag Auswahl rund um die verschiedenen Bereiche des Bildes . Wenn Sie nur eine Kopfzeile , Fußzeile und Textbereich , stellen drei Auswahlmöglichkeiten um diese drei Bereiche . Wenn Sie Seitenleisten enthalten , zusätzliche Scheiben um diese Gebiete . Ziehen Sie einen Auswahlrahmen um einen Bereich mit dem Slice-Werkzeug ausgewählt ist alles, was benötigt wird, um ein Stück zu schaffen.
9
Klicken Sie auf "Datei" und wählen Sie "Save for Web ". Photoshop wird Dateinamen für jede der Scheiben Sie erstellt anzufordern und wird ein separates Bild für jedes der Scheiben erzeugen . Die Scheiben können dann für Ihr Website-Layout mit einem Website-Design -Programm wie FrontPage oder Dreamweaver oder per Hand mit HTML-Code wieder .
