Es gibt eine große Anzahl von Website-Vorlagen im Web, aber sie haben einen Nachteil - sie sind nicht einzigartig. Wenn der Websitebesitzer nicht möchte, dass sich das Design seiner Website an anderer Stelle wiederholt, kann er eine Vorlage bei einem professionellen Designer bestellen oder versuchen, sie selbst zu erstellen.
Es ist notwendig
Adobe Photoshop-Programm
Anleitung
Schritt 1
Das Erstellen einer eigenen Vorlage ist nicht so schwierig, wie es auf den ersten Blick erscheinen mag. Zum Arbeiten benötigen Sie Adobe Photoshop - natürlich müssen Sie zumindest ein grundlegendes Verständnis der Arbeit damit haben. Aber bevor Sie das Programm starten und mit der Erstellung beginnen, müssen Sie sich im Voraus über das zukünftige Design Gedanken machen. Der bequemste Weg, dies zu tun, besteht darin, sich zuerst mit mindestens hundert vorgefertigten Vorlagen vertraut zu machen und deren Vor- und Nachteile zu bewerten. Achten Sie auf die gelungenen Lösungen bestimmter Gestaltungselemente. Dies bedeutet nicht, dass Sie sie kopieren werden, aber es ist durchaus vernünftig, einige schöne und bequeme Lösungen als Grundlage zu nehmen.
Schritt 2
Anhand der Analyse fremder Vorlagen und Ihrer eigenen Kreativität sollten Sie sich ein Bild davon machen, wie Ihre Seite aussehen wird. Am besten machen Sie grobe Skizzen des zukünftigen Designs mit Buntstiften auf gewöhnlichen A4-Blättern. Sie sollten erst mit der Arbeit mit Photoshop beginnen, wenn Sie eine klare Vorstellung davon haben, was genau Sie zeichnen werden.
Schritt 3
Starten Sie Photoshop, erstellen Sie ein neues 1200x1600-Projekt, legen Sie einen transparenten Hintergrund fest. Schalten Sie das Lineal-Tool ein, falls es noch nicht aktiviert ist, drücken Sie dazu die Tastenkombination Strg + R. Fangen aktivieren: Ansicht - Fangen.
Schritt 4
Jetzt müssen wir die Vorlage mit Hilfslinien unterteilen, die die Grenzen ihrer Elemente anzeigen - Seiten, Säulen usw. Sie möchten beispielsweise die Vorlage so aufteilen, dass links neben der Vorlage eine schmale Spalte, rechts eine breite Spalte und oben Platz für eine Kopfzeile ist. Dies bedeutet, dass Sie drei vertikale Linien (den linken Rand der Vorlage, den rechten und die Linie dazwischen) und eine horizontale benötigen, die den unteren Rand der Kopfzeile zeigt. Um eine vertikale Linie zu setzen, bewegen Sie den Cursor auf das linke Lineal auf der linken Seite, drücken Sie V und ziehen Sie die Linie bei gedrückter Taste an die gewünschte Position. Machen Sie dasselbe mit den anderen beiden vertikalen Linien. Horizontale werden auf die gleiche Weise gebaut, nur das obere Lineal wird verwendet.
Schritt 5
Suchen Sie einen Hintergrund für Ihre Vorlage, es sollte ein kleines, sich wiederholendes Muster sein. In Photoshop öffnen, auswählen, kopieren. Fügen Sie dann so oft wie nötig in die Vorlage ein, um sie mit dem Hintergrund zu füllen. Das Einfügen geschieht wie folgt: "Bearbeiten" - "Einfügen", und ziehen Sie dann den Hintergrundbereich an die gewünschte Stelle. Noch schneller ist es, ein Bild mit dem Befehl Strg + V einzufügen. Fügen Sie auf die gleiche Weise einen Hintergrund für den Site-Header hinzu. Sie können verschiedene Farbverlaufsfüllungen verwenden, um einen Hintergrund zu erstellen.
Schritt 6
Zeichnen Sie mit dem Bleistift-Werkzeug die Ränder der Vorlage und konzentrieren Sie sich dabei auf die bereits gezeichneten Linien (d. h. darüber). Sie haben die Basis der einfachsten Vorlage erhalten, jetzt müssen Sie sie mit den notwendigen Details ergänzen - Navigationsschaltflächen, Menüzeilen, verschiedene Dekorationselemente usw. Weitere Informationen zum Erstellen von Schaltflächen und anderen Elementen finden Sie in den entsprechenden Artikeln zum Arbeiten mit Adobe Photoshop.
Schritt 7
Die Vorlage ist erstellt, jetzt müssen Sie sie in Stücke schneiden, um sie in die HTML-Seite einzufügen. Verwenden Sie zum Schneiden das Slice-Tool. Um es zu finden, klicken Sie mit der rechten Maustaste auf das Rahmenwerkzeug und wählen Sie Ausschnitt aus dem sich öffnenden Menü. Nun können Sie die Vorlage beliebig verschachteln, dann speichern: "Datei" - "Für Web speichern". Wählen Sie im sich öffnenden Fenster den Dateityp: HTML & Bilder, geben Sie den Dateinamen an: index.htm und speichern Sie ihn. Sie haben eine index.htm-Datei und einen Bilderordner mit geschnittenen Bildern.
