Hintergrundbilder können eine Homepage in der Optik sehr einfach aufwerten. Wie Du diese erstellen kannst und worauf Du dabei aufpassen musst, dies erfährst Du auf dieser Seite.
Erstens: Hintergrund mit Photoshop eigenen Mitteln
Gern kannst Du den bereits vorgefertigten Entwurf aus dem vorherigen Workshop verwenden, schalte dazu alle nicht benötigten Ebenen ab (Auge) oder folge noch einmal diesem Workshop.
|
|
![Screenshot 01 - neue Datei öffnen](../image/hintergrund_adobe/normal/adobe01_kl.jpg) Der Workshop beginnt mit dem öffnen einer neuen Datei über "Datei -> Neu -> Leere Datei ...". |
![Screenshot 02 - Dateiname und Dateigröße](../image/hintergrund_adobe/normal/adobe02_kl.jpg) Im Dialogfeld gibst Du einen Namen (Hintergrundbild) und die Größe (Breite: 988 Pixel, Höhe: 768 Pixel) an und übernimmst mit einen Klick auf "OK". |
![Screenshot 03 - Hintergrundfarbe](../image/hintergrund_adobe/normal/adobe03_kl.jpg) Die Hintergrundfarbe stellst Du über einer der Farbkästen links in den Tools ein (doppelt anklicken und im Dialogfeld auswählen), danach klickst Du auf den Farbeimer und anschließend ins Feld, welches jetzt die Farbe angenommen hat. |
![Screenshot 04 - Füllebene: Verlauf](../image/hintergrund_adobe/normal/adobe04_kl.jpg) Als nächstes erstellst Du über "Ebene -> Neue Füllebene -> Verlauf ..." eine neue Verlaufsebene. |
|
![Screenshot 05 - Verlaufsebene benennen](../image/hintergrund_adobe/normal/adobe05_kl.jpg) Im Dialogfeld kannst Du einen Namen angeben (oder den vorgeschlagenen behalten) und übernimmst alles mit einem Klick auf "OK". |
![Screenshot 06 - Effekte Verlaufsebene einstellen](../image/hintergrund_adobe/normal/adobe06_kl.jpg) Das folgende Dialogfeld bietet viele Optionen und Farbverläufe an - folge dazu allen Dreiecken zum anklicken und such das Dir gefallende Muster aus, klick es an und Übernehme alles mit "OK". |
![Screenshot 07 - Verlaufsebene: Skalierung, Winkel, ...](../image/hintergrund_adobe/normal/adobe07_kl.jpg) Im abschließenden Dialogfeld kannst Du noch Winkel, Skalierung, ... festlegen -> mit "OK" übernehmen |
![Screenshot 08 - Deckkraft Verlaufsebene](../image/hintergrund_adobe/normal/adobe08_kl.jpg) Die Deckkraft kannst Du jetzt auch nachträglich ändern - betreffende Ebene anklicken, Deckkraft einstellen (Tastatureingabe oder Schieberegler). |
|
![Screenshot 09 - Musterebene erstellen](../image/hintergrund_adobe/normal/adobe09_kl.jpg) Der Adobe Photoshop stellt mehrere Werkzeuge zur Gestaltung zur Verfügung welche man parallel verwenden kann - eine zusätzliche Musterebene erstellst Du über "Ebene -> Neue Füllebene -> Muster ...". |
![Screenshot 10 - Musterebene benennen](../image/hintergrund_adobe/normal/adobe10_kl.jpg) Im sich anschließend öffnenden Dialogfeld kannst Du einen Namen für die Ebene angeben - Du übernimmst alles mit einem Klick auf "OK". |
![Screenshot 11 - Muster auswählen](../image/hintergrund_adobe/normal/adobe11_kl.jpg) Der Adobe Photoshop stellt viele Muster zur Ebenenfüllung - folge den Dreiecken um Dir ein Muster auszusuchen. Mit einem Klick auf "OK" übernimmst Du alles. |
![Screenshot 12 - Deckkraft Musterebene](../image/hintergrund_adobe/normal/adobe12_kl.jpg) Die Deckkraft kannst Du jetzt noch mit einer Tastatureingabe oder mit dem Schieberegler verändern. |
|
![Screenshot 13 - Skalierung bearbeiten](../image/hintergrund_adobe/normal/adobe13_kl.jpg) Falls Dir die Skalierung des Musters nicht gefällt, so kannst Du zu jeder Zeit das Symbol anklicken und dies ändern. |
![Screenshot 14 - Skalierung geändert](../image/hintergrund_adobe/normal/adobe14_kl.jpg) Hast Du die richtige Skalierung gefunden so übernimmst Du mit einem Klick auf "OK". |
![Screenshot 15 - Datei abspeichern](../image/hintergrund_adobe/normal/adobe15_kl.jpg) Wenn Du ein passendes Hintergrundbild erstellt hast, so musst Du es abspeichern - zuerst als großes Bild über "Datei ->Speichern unter ...". |
![Screenshot 16 - Datei abspeichern: Dateigröße](../image/hintergrund_adobe/normal/adobe16_kl.jpg) Im anschließend öffnenden Dialogfeld stellst Du auf maximale Dateigröße ein (da diese Datei noch einmal benötigt wird). |
|
![Screenshot 17 - abgespeichertes Bild öffnen](../image/hintergrund_adobe/normal/adobe17_kl.jpg) Das Hintergrundbild ist so zu groß, also öffnest Du es noch einmal über "Datei ->Öffnen ...". |
![Screenshot 18 - Bildbereich markieren](../image/hintergrund_adobe/normal/adobe18_kl.jpg) Nun wählst Du das Markierwerkzeug (Modus: Normal), klickst ins Bild und ziehst einen Bereich über das gesamte Bild, so dass das Muster abgedeckt ist. |
![Screenshot 19 - Bildbereich kopieren](../image/hintergrund_adobe/normal/adobe19_kl.jpg) Anschließend kopierst Du den Bereich über "Bearbeiten -> Kopieren". |
![Screenshot 20 - Neue Bilddatei](../image/hintergrund_adobe/normal/adobe20_kl.jpg) Im Anschluss erstellst Du eine neue Datei über "Datei -> Neu -> Leere Datei ...". |
|
![Screenshot 21 - Name neue Bilddatei](../image/hintergrund_adobe/normal/adobe21_kl.jpg) Jetzt gibst Du im Dialogfeld einen Namen an (prüfst Interesse halber Breite und Höhe) und übernimmst mit einen Klick auf "OK". |
![Screenshot 22 - neues Bild einfügen](../image/hintergrund_adobe/normal/adobe22_kl.jpg) Das kopierte Bild fügst in diese neue Datei über "Bearbeiten -> Einfügen" ein. |
![Screenshot 23 - neues Hintergrundmotiv ansehen](../image/hintergrund_adobe/normal/adobe23_kl.jpg) Zum Abschluss dieser Aktion schaust Du Dir das Bild zur Kontrolle an eh Du es abspeicherst. |
![Screenshot 24 - neues Hintergrundbild abspeichern](../image/hintergrund_adobe/normal/adobe24_kl.jpg) Ist mit dem neuen Hintergrundbild soweit alles in Ordnung, dann kannst Du es abspeichern über "Datei -> Speichern unter ...". |
|
![Screenshot 25 - Dateigröße des neuen Motives](../image/hintergrund_adobe/normal/adobe25_kl.jpg) Beim Abspeichern das fertigen Motives musst Du keine 100% mehr verwenden - hier reichen jetzt auch 60% (Hoch). |
![Screenshot 26 - fertiges Motiv mit Browser dargestellt](../image/hintergrund_adobe/normal/adobe26_kl.jpg) So sieht das hier erstellte Motiv in einem Browser aus - Auflösung des Bildschirmes: 1280 x 1024 Pixel - keine Fehler sichtbar. |
|
|
|
Vorsicht geboten ist bei Musterfüllungen mit Natur- und Gesteinsmustern da hier sehr oft große Dateien entstehen (Skalierung, Musterwiederholung, ...).
|
Zweitens: Zusätzlich mit Schriftzug
![Screenshot 27 - Arbeiten mit Schriften](../image/hintergrund_adobe/normal/adobe27_kl.jpg) Als nächstes versuchen wir mit Schriften zu arbeiten, dieses Mal öffnen wir dazu eine vorhandene Datei und schalten nicht benötigte Ebene aus (Augen entfernen bei der jeweiligen Ebene durch anklicken). |
![Screenshot 28 - Schriftfarbe und Text](../image/hintergrund_adobe/normal/adobe28_kl.jpg) Nun wählst Du eine Farbe aus, klickst das Textwerkzeug an, stellst Schriftgröße, Schriftart, ... ein, anschließend klickst Du ins Bild und gibst noch einen Text ein. |
![Screenshot 29 - Text verschieben](../image/hintergrund_adobe/normal/adobe29_kl.jpg) Nach dem Du auf die neue Textebene geklickt hast (Feld Ebenen) kannst Du diese mit dem Verschiebewerkzeug verschieben. |
![Screenshot 30 - Text ausschneiden](../image/hintergrund_adobe/normal/adobe30_kl.jpg) Für die weitere Bearbeitung ist es sinnvoll, den Ausschnitt mit der Lupe zu vergrößern um anschließend zum Beispiel den Text mit dem Zauberstab (SHIFT-Taste dabei gedrückt halten) auszuschneiden. |
|
![Screenshot 31 - Text wird ausgeschnitten](../image/hintergrund_adobe/normal/adobe31_kl.jpg) Nach dem Du die Ebene aus dem die Schrift ausgeschnitten werden soll angeklickt hast (hier Hintergrund) schneidest Du diese über "Bearbeiten -> Ausschneiden" aus. |
![Screenshot 32 - Effekt vergeben](../image/hintergrund_adobe/normal/adobe32_kl.jpg) Nun suchst Du Dir einen passenden Effekt aus, klickst in doppelt an und das Zeichen "fx" befindet sich auf der Ebene. |
![Screenshot 33 - Effekt bearbeiten](../image/hintergrund_adobe/normal/adobe33_kl.jpg) Mit dem Anklicken des Zeichens "fx" öffnet sich das Dialogfeld zum bearbeiten. Hier kannst Du verschiedene Werte einstellen und mit einem Klick auf "OK" übernehmen. |
![Screenshot 34 - Deckkraft Text ändern](../image/hintergrund_adobe/normal/adobe34_kl.jpg) Auch mit der Änderung der Deckkraft des Textes kannst Du die Optik verändern - einfach Ebene anklicken (Feld Ebenen) und den Schieberegler betätigen (oder Wert mit Tastatur eingeben). |
|
![Screenshot 35 - Textmotiv abspeichern](../image/hintergrund_adobe/normal/adobe35_kl.jpg) Bist Du mit dem Textmotiv zufrieden, so musst Du es abspeichern um es weiter zu bearbeiten ("Datei ->Speichern unter ..."). |
![Screenshot 36 - Speicherort und -name](../image/hintergrund_adobe/normal/adobe36_kl.jpg) Im sich jetzt öffnenden Dialogfeld legst Du Dateiname, Speicherort und Dateiart fest - was Du dann mit einem Klick auf "Speichern" übernimmst. |
![Screenshot 37 - Dateigröße](../image/hintergrund_adobe/normal/adobe37_kl.jpg) Anschließend öffnet sich das nächste Dialogfeld in dem Du die Dateigröße festlegst - Du benötigst diese Datei noch einmal zum weiter bearbeiten - also Qualität: Maximal. |
![Screenshot 38 - gespeichertes Textmotiv öffnen](../image/hintergrund_adobe/normal/adobe38_kl.jpg) Um das Textmotiv noch einmal zum weiteren Bearbeiten zu öffnen gehst Du über "Datei -> Öffnen ...". |
|
![Screenshot 39 - Textmotiv auswählen](../image/hintergrund_adobe/normal/adobe39_kl.jpg) Im sich anschließend öffnendem Dialogfeld öffnest Du die Datei mit anklicken und einem Klick auf "Öffnen". |
![Screenshot 40 - Bereich im Textmotiv markieren](../image/hintergrund_adobe/normal/adobe40_kl.jpg) Das Textmotiv ist jetzt als Gesamtbild wieder geöffnet, nun wählst Du einen Bereich mit dem Markierwerkzeug (Modus: Normal) aus. |
![Screenshot 41 - Bereich kopieren](../image/hintergrund_adobe/normal/adobe41_kl.jpg) Den markierten Bereich kopierst Du jetzt über "Bearbeiten -> Kopieren". |
![Screenshot 42 - Neue Datei fürs Motiv](../image/hintergrund_adobe/normal/adobe42_kl.jpg) Als nächstes öffnest Du eine neue Datei über "Datei -> Neu -> Leere Datei ...". |
|
![Screenshot 43 - Name vergeben](../image/hintergrund_adobe/normal/adobe43_kl.jpg) Im sich nun geöffneten Dialogfeld vergibst Du einen Namen (Name) und siehst Dir die Werte von Höhe und Breite an - und übernimmst dann mit einem Klick auf "OK". |
![Screenshot 44 - Textmotiv einfügen](../image/hintergrund_adobe/normal/adobe44_kl.jpg) Das so zugeschnittene Textmotiv fügst Du in die neue Datei über "Bearbeiten -> Einfügen" ein. |
![Screenshot 45 - kleines Textmotiv abspeichern](../image/hintergrund_adobe/normal/adobe45_kl.jpg) Das so erstellte kleine Textmotiv speicherst Du jetzt über "Datei -> Speichern unter..." ab, im sich öffnenden Dialogfeld gibst Du Dateiname, Speicherort und Dateiart an und klickst dann auf "Speichern". |
![Screenshot 46 - Dateigröße](../image/hintergrund_adobe/normal/adobe46_kl.jpg) Jetzt gibst nun noch die Dateigröße an - Qualität Hoch sollte jetzt reichen, was Du mit einem Klick auf "OK" übernimmst. |
|
![Screenshot 47 - Fehler im Browser](../image/hintergrund_adobe/normal/adobe47_kl.jpg) Mit einer vorgefertigten HTML-Datei kontrollierst Du Dein Werk - hier sind verschiedene Abstände nicht ganz OK - auch der Farbverlauf (Hell - Dunkel) ist nicht gut getroffen - Meine Empfehlung wäre hier: noch einmal das Ganze. |
|
|
|
Wenn man ein Hintergrundbild erstellt, so sollte es maximal 15kb (Kilobyte) haben, der Farbverlauf mit Muster (erste Variante) besitzt hier eine Dateigröße von 13,4kb (also im Limit), und der Entwurf mit Schrift (zweite Variante) liegt bei 37,3 kb (also über dem Limit).
Noch kleinere Dateien kann man auch selbst erstellen, wie im Anschluss jetzt ein Karomuster.
Drittens: eigenes Muster erstellen
![Screenshot 48 - Neue Datei für eigenes Motiv](../image/hintergrund_adobe/normal/adobe48_kl.jpg) Eigene Motive kann man sehr klein gestalten - also erstellen wir eine neue Datei über "Datei -> Neu -> Leere Datei ..." |
![Screenshot 49 - Dateiname fürs neue Motiv](../image/hintergrund_adobe/normal/adobe49_kl.jpg) Im sich nun öffnenden Dialogfeld vergibst Du einen Namen (Zum Beispiel Karomuster) und legst die Größe auf 30 x 30 Pixel fest - jetzt übernimmst Du noch mit einem Klick auf "OK" |
![Screenshot 50 - Farbauswahl treffen](../image/hintergrund_adobe/normal/adobe50_kl.jpg) Als nächstes kannst Du eine Farbe bestimmen - Farbfenster bei den Tools anklicken, Farbe im Dialogfeld auswählen, mit OK übernehmen. |
![Screenshot 51 - Farbe übernehmen](../image/hintergrund_adobe/normal/adobe51_kl.jpg) Anschließend klickst Du auf den Farbeimer, danach ins Bild und das Kästchen hat die Farbe bekommen. |
|
![Screenshot 52 - neue Ebene für Karomuster](../image/hintergrund_adobe/normal/adobe52_kl.jpg) Jetzt benötigst Du eine neue Ebene, welche Du über "Ebene -> Neu -> Ebene ..." erstellst. |
![Screenshot 53 - Ebenenname](../image/hintergrund_adobe/normal/adobe53_kl.jpg) Im sich jetzt geöffneten Dialogfeld vergibst Du einen Namen (hier Karo) und übernimmst wieder mit OK. |
![Screenshot 54 - Senkrechte erstellen](../image/hintergrund_adobe/normal/adobe54_kl.jpg) Nun wählst Du das Markierwerkzeug, stellst den Modus auf "Feste Größe", die Breite auf 1 Px, die Höhe auf 30 Px und klickst jetzt ins Feld. |
![Screenshot 55 - Senkrechte mit Farbe füllen](../image/hintergrund_adobe/normal/adobe55_kl.jpg) Als nächstes klickst Du den Farbeimer an (vorher andere Farbe auswählen) und klickst jetzt noch in den markierten Bereich, woraufhin dieser mit der gewählten Farbe gefüllt ist. |
|
![Screenshot 56 - Waagerechte erstellen](../image/hintergrund_adobe/normal/adobe56_kl.jpg) Anschließend klickst Du wieder auf das Markierwerkzeug, stellst den Modus auf "Feste Größe", die Breite auf 30 Px, die Höhe auf 1 Px und klickst jetzt wieder in das Bild. |
![Screenshot 57 - Waagerechte mit Farbe füllen](../image/hintergrund_adobe/normal/adobe57_kl.jpg) Die Waagerechte füllst Du jetzt mit Farbe in dem Du wieder den Farbeimer anklickst und danach in den markierten Bereich (eventuell beide Seiten) klickst und die Waagerechte hat ebenfalls die Farbe bekommen. |
![Screenshot 58 - Karomuster speichern](../image/hintergrund_adobe/normal/adobe58_kl.jpg) Gespeichert wird das so erstellte Muster in dem Du über "Datei -> Speichern unter ..." gehst, |
![Screenshot 59 - Dialogfeld: Dateiname, Speicherort, ...](../image/hintergrund_adobe/normal/adobe59_kl.jpg) im Dialogfeld Speicherort, Dateiname und Dateiart angibst und |
|
![Screenshot 60 - Dialogfeld Qualität](../image/hintergrund_adobe/normal/adobe60_kl.jpg) im letzten Dialogfeld noch die Qualität angibst (Hoch sollte reichen). |
![Screenshot 61 - Kontrolle mit Browser](../image/hintergrund_adobe/normal/adobe61_kl.jpg) Und so sieht am Ende das erstellte Karomuster im Browser aus - ich finde etwas zu groß - also ein kleineres erstellen oder über das Freistellwerkzeug ("Bild -> Freistellen") verkleinern. |
![Screenshot 62 - Karomuster auf diagonal stellen](../image/hintergrund_adobe/normal/adobe62_kl.jpg) Eine weitere Möglichkeit das Karo zu verkleinern ist es auf die Diagonale zu stellen. Dazu markierst Du als erstes einen kleineren Bereich (21 x 21 Px) in der Mitte des Bildes. |
![Screenshot 63 - weitere Ebene im Karomuster erstellen](../image/hintergrund_adobe/normal/adobe63_kl.jpg) Danach erstellst Du eine neue Ebene über "Ebene -> Neu -> Ebene ...", |
|
![Screenshot 64 - weitere Ebene Namen vergeben](../image/hintergrund_adobe/normal/adobe64_kl.jpg) welche Du im sich nun öffnenden Dialogfeld benennst und mit einem Klick auf "OK" alles übernimmst. |
![Screenshot 65 - Ebene einfärben](../image/hintergrund_adobe/normal/adobe65_kl.jpg) Anschließend färbst Du diese mit dem Farbeimer wieder ein, |
![Screenshot 66 - Ebene wechseln - drehen vorbereiten](../image/hintergrund_adobe/normal/adobe66_kl.jpg) stellst jetzt die größere Fläche auf unsichtbar (Auge durch anklicken entfernen), wechselst auf die Ebene der Linien (im Feld Ebenen anklicken) und gehst anschließend auf "Bild -> Drehen -> Auswahl frei drehen". |
![Screenshot 67 - Bildlupe](../image/hintergrund_adobe/normal/adobe67_kl.jpg) Um besser arbeiten zu können solltest Du die Lupe anklicken und anschließend ins Bild - so oft klicken bis es eine angenehme Größe hat, danach über die Markierpunkte Drehen so dass die Linien eine Diagonale ergeben. |
|
![Screenshot 68 - Ebene freistellen](../image/hintergrund_adobe/normal/adobe68_kl.jpg) Im Anschluss daran kannst Du die nicht mehr benötigte Ebene löschen (Rechtsklick - Menü folgen), danach aktivierst Du den neuen Hintergrund und stellst diese Ebene über "Bild -> Freistellen" frei. |
![Screenshot 69 - Ebene verkleinern](../image/hintergrund_adobe/normal/adobe69_kl.jpg) Nun über die Markierpunkte den grauen Bereich ans Bild ziehen, erst oben und |
![Screenshot 70 - Ebene verkleinern](../image/hintergrund_adobe/normal/adobe70_kl.jpg) dann unten, danach mit dem grünem Haken bestätigen. |
![Screenshot 71 - Bild auf tatsächliche Pixel stellen](../image/hintergrund_adobe/normal/adobe71_kl.jpg) Bevor Du speicherst noch ein Blick aufs tatsächliche Bild - Lupe anklicken, mit rechts ins Bild klicken und im Menü "Tatsächliche Pixel" anklicken. |
|
![Screenshot 72 - neues Karo speichern](../image/hintergrund_adobe/normal/adobe72_kl.jpg) Auch dieses Karo speicherst Du wieder über "Datei -> Speichern unter ..." ab. |
![Screenshot 73 - Dialogfeld: Speicherort, Dateiname, ...](../image/hintergrund_adobe/normal/adobe73_kl.jpg) Im sich anschließend öffnenden Dialogfeld wählst Du wieder Speicherort, Dateiname, ... aus und gehst mit "Speichern" weiter zum nächsten Dialogfeld - Qualität ((Hoch sollte reichen). |
![Screenshot 74 - Browserdarstellung des Karomusters](../image/hintergrund_adobe/normal/adobe74_kl.jpg) Du siehst, das Karo ist jetzt wesentlich kleiner - die Darstellung besitzt keine Fehler (alle Linien durchgängig) - Bildschirmauflösung ist wieder 1280 x 1024 Pixel. |
|
Gerade Motive mit Mustern (Wiesen, Blumen, Gesteine, ...) sind schwer zu beherrschen da mitunter keine Wiederholungen vorhanden sind.
Sind keine Wiederholungen vorhanden, so sind die Ansätze des Hintergrundbildes sichtbar, was nicht gerade sehr schön aussieht.
Trotzdem bietet der Adobe Photoshop eine Vielzahl an Motiven (Verläufe, Muster) welche durchaus gut für ein Hintergrundbild geeignet sind.
Alternatives Speicherformat: *.GIF (gerade bei wenigen Farben von Vorteil)