Professionelle Webdesigner entwickeln Website-Vorlagen, normalerweise in leistungsstarken Grafikeditoren wie Adobe Photoshop. Das Ergebnis der Arbeit ist eine Datei mit einem Bild, die in dieser Form dem Kunden zur Verfügung gestellt wird. Um das vorgefertigte Design zu verwenden, dh um eine Webseite zu gestalten, müssen Sie die Vorlage ausschneiden.
Notwendig
Rastergrafik-Editor Adobe Photoshop
Anweisungen
Schritt 1
Öffnen Sie die Vorlagendatei im Grafikeditor Adobe Photoshop. Wählen Sie im Menü Datei und Öffnen oder drücken Sie die Tastenkombination Strg + O. Wechseln Sie im darauffolgenden Dialog in das Verzeichnis mit der Datei, wählen Sie diese in der Liste aus und klicken Sie auf die Schaltfläche "Öffnen".
Schritt 2
Wählen Sie einen geeigneten Maßstab zum Anzeigen des Vorlagenbilds. Verwenden Sie das Zoom-Tool oder die Kontextmenüelemente. Wählen Sie einen Maßstab, mit dem Sie den Cursor pixelgenau positionieren können. Dies ist notwendig, um die Referenzlinien genau einzustellen.
Schritt 3
Bilden Sie eine Reihe von Referenzlinien über dem Vorlagenbild. Schalten Sie die Anzeige von Linealen in Dokumentfenstern ein, wenn sie nicht bereits aktiviert ist. Drücken Sie dazu Strg + R oder wählen Sie Ansicht und Lineale aus dem Menü.
Schritt 4
Bewegen Sie den Mauszeiger über das obere Lineal, um eine horizontale Referenzlinie hinzuzufügen. Halten Sie die linke Taste gedrückt. Bewegen Sie den Mauszeiger nach unten in den Bildbereich. Ebenso können Sie mit dem richtigen Lineal horizontale Linien hinzufügen.
Schritt 5
Fügen Sie die erforderliche Anzahl von Referenzlinien hinzu und positionieren Sie sie entlang der Grenzen der Teilung der Bereiche der Vorlage. Die Linien sollten durch alle Stellen gehen, an denen Sie die Schablone schneiden möchten. Sie sollten alle Bilder und logischen Bereiche (Logo, Site-Header, horizontale und vertikale Menüs usw.) einschränken, die auf einer Webseite präsentiert werden.
Schritt 6
Aktivieren Sie das Slice-Tool. Die Schaltfläche befindet sich in der vertikalen Symbolleiste.
Schritt 7
Erstellen Sie mit dem Slice-Tool die erforderliche Anzahl von Schnittbereichen. Wählen Sie einen geeigneten Maßstab für die Anzeige der Vorlage. Verwenden Sie die Maus, um die Grenzen der Bereiche festzulegen. Die im dritten Schritt hinzugefügten Hilfslinien ermöglichen eine präzise Positionierung der Grenzen der von Ihnen erstellten Objekte. Passen Sie die vorhandenen Bereiche bei Bedarf mit dem Slice Select Tool an.
Schritt 8
Ändern Sie die Eigenschaften der Schnittbereiche nach Bedarf. Aktivieren Sie das Slice-Auswahlwerkzeug. Klicken Sie mit der rechten Maustaste auf den gewünschten Bereich. Wählen Sie im Kontextmenü den Punkt Slice-Optionen bearbeiten. Wählen Sie im angezeigten Dialog Slice-Optionen den Typ des Bereichs (Bild, leerer Bereich, Tabelle), den Hintergrundfüllmodus, geben Sie ggf. den Namen, die Ziel-URL, den Inhalt des Attributs alt="Image" und andere Werte an. OK klicken.
Schritt 9
Schneiden Sie die Schablone aus. Wählen Sie im Menü Datei und Speichern für Web und Geräte oder drücken Sie Umschalt + Strg + Alt + S. Geben Sie im Dialogfeld Für Web & Geräte speichern das Format und die Bildkomprimierungsparameter an, in die die Vorlage geschnitten wird. Klicken Sie auf die Schaltfläche Speichern. Der Dialog Optimiert speichern unter wird angezeigt.
Schritt 10
Wählen Sie HTML und Bilder (*.html) in der Dropdown-Liste Dateityp aus, und geben Sie im Feld Dateiname den Namen der Datei ein, in der das HTML-Markup der Vorlage platziert wird. Wählen Sie in der Liste Slices die Option Alle Slices aus. Geben Sie das Verzeichnis für die Ausgabe an und klicken Sie auf die Schaltfläche "Speichern".
Schritt 11
Im Zielverzeichnis wird eine HTML-Datei abgelegt, bei der es sich tatsächlich um eine fertige Webseitenvorlage handelt. Das Unterverzeichnis images enthält den Bildersatz, in den die Originalvorlage geschnitten wurde.
