Website-Header in Photoshop

• Kann 3, 2024

In diesem Tutorial erstellen wir einen Website-Header in Photoshop^R was wir in Flash animieren werden^R Katalysator^TM. Die Animation beginnt mit einem leeren Hintergrund, und die Gestaltungselemente werden eingeblendet, um die Überschrift vor unseren Augen zu "erstellen". Die Animation wird so programmiert, dass sie "beim Laden" beginnt und nur einige Sekunden dauert. Dieser Website-Header ist für ein faktisches Grußkartengeschäft bestimmt.

Der erste Schritt besteht darin, den Header in Photoshop zu erstellen. Wir werden jedes Gestaltungselement auf eine eigene Ebene legen, um die Arbeit mit ihnen in Flash Catalyst vorzubereiten. Wie Sie sehen, werden wir 6 Designelemente haben.

1. Hintergrund
2. Untere Leiste über die Breite der Kopfzeile
3. Firmenname
4. Geburtstagskarte
5. Kürbis Notecard
6. Weihnachtskarte

1. Beginnen wir ein neues Projekt in Photoshop. Stellen Sie die Breite auf 1000 Pixel, die Höhe auf 225 Pixel und den Hintergrund auf transparent ein. Diese Größe wird am oberen Rand unserer Webseite gut passen.
   
   
2. Das einzige Element, das zu Beginn der Animation sichtbar ist, ist der weiße Hintergrund. Fülle die erste Ebene des Bildes mit der Hintergrundfarbe deiner Wahl. Benennen Sie diese Ebene im Ebenenbedienfeld in "Hintergrund" um.
   
   
3. Um die schattierte Kante zu erstellen, habe ich den inneren Schattenebenenstil verwendet. Doppelklicken Sie auf die Hintergrundebene und aktivieren Sie das Kontrollkästchen neben Inner Shadow. Stellen Sie den Abstand und die Drossel auf 0 und die Größe auf 49 ein.
   
   
4. Als nächstes fügen wir den dünnen Rand um das Bild mit dem Strich-Ebenen-Stil hinzu. Ich habe die Farbe auf Braun (# 6e674f), die Größe auf 2 und die Position auf Innen eingestellt.
   
   Als nächstes werden wir die Karten hinzufügen. Ich habe die Größe meiner Grußkarten auf 230 x 175 Pixel reduziert. Dadurch bleiben sie proportional zur Größe des Headers.
   
   
5. Kopieren wir die Kürbiskarte in unseren Header. Nenne die neue Ebene "Kürbis". Klicken Sie auf Bearbeiten - Freie Transformation, um die Karte leicht nach rechts zu drehen. Klicken Sie auf die Kürbis-Ebene und wenden Sie den Schlagschatten-Ebenenstil an, wobei Sie die Standardeinstellungen beibehalten.
   
   
6. Wiederholen Sie den letzten Schritt sowohl für die Geburtstags- als auch für die Weihnachtskarte.
   
   Als nächstes werden wir die Leiste am unteren Rand der Kopfzeile hinzufügen. Wir werden unsere Karten hinter diese Leiste stecken, um Karten in einem Regal zu emulieren.
   
   
7. Fügen Sie dem Ebenenbedienfeld eine neue Ebene hinzu und nennen Sie sie "Leiste".
   
   
8. Wählen Sie mit dem Auswahlrechteck-Werkzeug den unteren Bereich der Kopfzeile direkt innerhalb des braunen Rahmens aus. Wählen Sie eine Farbe für Ihre Leiste und füllen Sie die Auswahl mit dieser Farbe.
   
   
9. Doppelklicken Sie auf die Ebene und fügen Sie den Konturebenenstil wie zuvor zur Hintergrundebene hinzu.
   
   
10. Klicken Sie auf das Werkzeug Horizontaler Typ und wählen Sie eine Schriftart für Ihren Firmennamen. Ich habe die gleiche braune Farbe wie die Randfarbe verwendet. Geben Sie den Firmennamen auf der linken Seite der Kopfzeile ein.
    
    
11. Dieser Schritt ist optional. Wir werden den Text rastern. Klicken Sie mit der rechten Maustaste auf die Textebene und wählen Sie im Menü die Option Typ rastern.
    
    
12. Speichern Sie Ihr Projekt im Photoshop .psd-Format.
    
    

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Nachdruck der Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder eine eingetragene Marke oder eine Marke von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: Photoshop Web Design | Web Header Tutorial (Kann 2024).