Einen Diagonal-Website-Hintergrund erstellen

July 26

Erstellen einen diagonalen Hintergrund sorgt für eine auffälligen Design-Funktion auf Ihrer Website. Einfach platzieren einer diagonalen Linie auf eine Grafik und es als ein Hintergrund führt eine gehackte, uneben aussehen, so benötigen Sie ein Lückenfüller. Andernfalls wird die Linie gebrochen. Diese Anweisungen beziehen sich auf die Verwendung von Photoshop auf einem PC, aber die Prinzipien sind dieselben für andere Design-Software und Computer-Systeme.

Anweisungen

1 Öffnen Sie eine neue Seite mit 200 Pixel im Quadrat.

2 Hintergrund Farbe mit einer Volltonfarbe wie schwarz.

3 Erstellen Sie eine neue Ebene.

4 Zeichnen Sie ein Rechteck (Regel) 10 Pixel Höhe und die Breite der box.

5 Füllen Sie mit einer helleren Farbe als Hintergrund, z. B. weiß.

6 Frei transformieren Sie ("Strg" und "T") die Rechteck-Regel (Ebene 1) und drehen Sie 45 Grad zu. Dazu halten die Shift-Taste und drehen das Rechteck, oder manuell ändern Feld Grad Drehung im oberen Menü von 0.0 bis 45. (Verwenden Sie-45 Grad für eine obere rechte untere linke Diagonale).

7 Ziehen Sie die Endpunkte der Mitte des Rechtecks, bis sie die Ecken des Hintergrundes, Futter Feld oben zentriert und bündig mit dem Rand überlappt. Vergrößern Sie die Seitenansicht um hilft die Regeln auszurichten, wenn nötig.

8 Verringern Sie die Leinwandgröße 100 Pixel Square (unter "Bild" dann "Canvas Size"); Stellen Sie sicher, dass das mittlere Lage Feld ausgewählt ist, und geben Sie 100 in Höhe und Breite Felder.

9 Klicken Sie auf "OK", und wenn Sie aufgefordert werden, klicken Sie auf "Weiter" um den Vorgang abzuschließen.

10 Erstellen Sie eine neue Schicht (Layer 2).

11 Zeichnen Sie ein Feld 5 Pixel im Quadrat (halten die Shift-Taste beim Zeichnen) und füllen Sie mit weiß.

12 Duplizieren Sie die Ebene 2 (Kopie der Ebene 2).

13 Verschieben Sie das Layer 2-Bild, bis die Box in der rechten oberen Ecke abschließt.

14 Verschieben Sie das Kopie der Layer 2 Bild, bis die Box in der linken unteren Ecke abschließt.

15 "Für Web speichern" (Alt + Strg + Umschalt + S) und passen Sie die Bildgröße auf 10 oder 20 Pixel im Quadrat.

16 Export als GIF-Datei.

17 Fügen Sie das Bild auf Ihrer Website über das < Body >-Tag (< BACKGROUND="IMAGE.gif Körper" >) oder das Stylesheet, korrekt URL-Speicherort festlegen.

< STYLE TYPE = "Text/Css" > BODY {-Hintergrundbild: URL(IMAGE.gif);} < / STYLE >

Tipps & Warnungen

  • Versuchen Sie, mit einer gestrichelten Linie anstatt einer durchgezogenen Linie für Vielfalt.
  • Um mehr Platz zwischen den Zeilen zu erstellen, speichern Sie die Datei in einem größeren Format, z. B. 80 Pixeln oder 100 Pixel quadratisch.
  • Die Ecke Quadrate sind immer halbe Höhe des Rechtecks (Linie) Sie erstellen; Wenn die Zeile 20 Pixel hoch ist, sind die Felder Ecke 10 Pixel im Quadrat.
  • Die Ecke-Boxen Lücke die zwischen Bildern, so dass die Zeile glatt und ungebrochen sieht.
  • Halten Sie die ursprüngliche PSD-Datei um mehr Diagonale Hintergründe zu erstellen, indem Sie einfach Farben.
  • Falls das Bild nicht angezeigt wird, überprüfen Sie, ob Sie den richtigen Speicherort des Bildes angegeben haben.