So erstellen Sie einen professionellen Website-Header in Photoshop

Photoshop CC 2014 ist ein ideales Werkzeug zum Entwerfen professioneller Bilder für Ihre Website, einschließlich Bannern. Wenn Sie Ihr erstes Banner entwerfen, halten Sie das Design einfach, damit die Grafik nicht mit zu vielen visuellen Informationen überladen wird. Wenn Ihr Unternehmen Firmenfarben und eine Firmenschrift hat, können Sie diese sicherlich in Ihrem Banner verwenden.

Schritt 1

Starten Sie Photoshop. Drücken Sie "Strg-N" oder wählen Sie "Neu" aus dem Menü Datei. Geben Sie im Dialogfeld die Höhe und Breite Ihres Banners an, z. B. 900 Pixel breit und 150 Pixel hoch. OK klicken."

Schritt 2

Wählen Sie bei Bedarf eine einfarbige Hintergrundfarbe für das Banner. Klicken Sie dazu in der Symbolleiste auf das Symbol "Vordergrundfarbe" und wählen Sie eine Farbe aus, klicken Sie dann auf das "Rechteckwerkzeug" und ziehen Sie es über das gesamte Banner. In diesem Tutorial werden wir jedoch zwei Farbverläufe überlappen, anstatt einen einfarbigen Hintergrund zu verwenden.

Schritt 3

Klicken Sie in der Toolbox auf das Werkzeug "Farbverlauf". Klicken Sie in der Optionsleiste auf das Menü "Füllen" und wählen Sie den Schwarz-Weiß-Verlauf aus den verfügbaren Voreinstellungen aus. Klicken Sie auf eine beliebige Stelle oberhalb des Banners im Canvas und ziehen Sie den Cursor unter das Banner. Lassen Sie die Maustaste los, um den Farbverlauf anzuwenden.

Schritt 4

Klicken Sie in der Toolbox auf das "Horizontal Text Tool". Ziehen Sie den Cursor über das Banner, um ein Textfeld zu erstellen. Verwenden Sie die Menüs in der Optionsleiste, um Schriftart, Schriftgröße und Farbe festzulegen. Ziehen Sie das Textfeld so, dass es auf der linken Seite des Banners zentriert ist.

Schritt 5

Wählen Sie "Öffnen" aus dem Menü Datei und wählen Sie ein beliebiges Bild auf Ihrem Computer aus, das Sie für Ihr Banner verwenden möchten, z. B. ein Firmenlogo, ein Bild von sich selbst oder ein Produkt, das Sie verkaufen. Wenn das Bild geöffnet wird, wählen Sie "Duplizieren" aus dem Ebenenmenü. Ändern Sie das Ziel in Ihre Header-Datei, die "Untitled-1" heißen würde, es sei denn, Sie haben sie bereits gespeichert. Klicken Sie auf "OK", um das Bild als neue Ebene zu Ihrem Banner hinzuzufügen.

Schritt 6

Wählen Sie "Transformieren" aus dem Bearbeiten-Menü und klicken Sie dann auf "Skalieren". In den meisten Fällen ist das gesamte Bild auf dem schmalen Banner nicht sichtbar, aber sein Umriss ist sichtbar, nachdem Sie "Skalieren" ausgewählt haben. Ziehen Sie eine beliebige Ecke des Bildumrisses, um die Größe für Ihr Banner zu ändern. Halten Sie beim Ziehen die Umschalttaste gedrückt, um das Seitenverhältnis zu sperren. Drücken Sie Enter." Ziehen Sie das Bild so, dass es sich auf der rechten Seite des Banners befindet.

Schritt 7

Klicken Sie in der Symbolleiste auf das Symbol "Vordergrundfarbe", um den Farbwähler zu öffnen. Klicken Sie auf eine beliebige Stelle auf der rechten Seite des Banners, um seine Farbe im Farbwähler anzupassen, und klicken Sie dann auf "OK".

Schritt 8

Wählen Sie das "Rechteckwerkzeug" aus der Toolbox. Klicken Sie auf das Menü "Füllen" und wählen Sie dann das Symbol "Verlauf" oben in den Menüoptionen. Ziehen Sie den Cursor über das Banner von der linken Seite des Bilds bis zum linken Rand des Banners. Das erstellt ein Rechteck mit einem Farbverlauf mit der Farbe, die Sie aus dem Bild angepasst haben.

Schritt 9

Suchen Sie die Ebene "Rechteck 1" im Ebenenbedienfeld, die das gerade hinzugefügte Verlaufsrechteck enthält. Ziehen Sie diese Ebene nach unten, um sie zur dritten Ebene von oben zu machen – unter "Ebene 1" und der Ebene, die Ihren Text enthält. Klicken Sie oben im Ebenenbedienfeld auf das Menü „Deckkraft“ und ziehen Sie den Schieberegler auf etwa 50 Prozent. Wenn Sie den oberen Farbverlauf halbtransparent machen, wird er mit dem darunter liegenden Farbverlauf verschmolzen, wodurch ein reichhaltiger Hintergrund entsteht.

Schritt 10

Wählen Sie die Ebene mit Ihrem Text im Ebenenbedienfeld aus. Klicken Sie auf das Menü "Ebene", wählen Sie "Ebenenstil" und klicken Sie dann auf "Abschrägung und Prägung". Stellen Sie sicher, dass das Stilmenü auf "Prägung" eingestellt ist und ziehen Sie den "Tiefe"-Schieberegler nach links - etwa "225" Prozent -, um dem Text nur einen kleinen Teil dieses Effekts hinzuzufügen.

Schritt 11

Klicken Sie im Ebenenstilfenster auf die Option "Satin". Verwenden Sie für diesen Stil einen Mischmodus von "Multiplizieren" und reduzieren Sie die Deckkraft auf etwa "15" Prozent. Dies kombiniert den Satin-Stil mit dem Präge-Stil. Passen Sie die Einstellungen bei Bedarf an und klicken Sie auf "OK".

Speichern Sie das Bild als weboptimiertes Banner, indem Sie im Menü Datei die Option "Für Web speichern" auswählen. Wählen Sie "JPEG" aus dem Menü Format und verwenden Sie eine Bildqualität zwischen 75 und 80 Prozent. Dadurch wird ein Bild mit kleiner Dateigröße erstellt, das von jedem Webbrowser schnell geladen wird, ohne die Bildqualität zu beeinträchtigen. Klicken Sie auf "Speichern" und wählen Sie einen Speicherort für die Datei auf Ihrem Computer. Fügen Sie nach dem Schließen von Photoshop die Datei zu Ihrer Webseite hinzu.