Foto als Webseitenhintergrund

Benutzeravatar
eleanora
Administrator
Beiträge: 8144
Registriert: Do 25. Mär 2010, 00:53
Skype:
Wohnort: Osnabrück
Kontaktdaten:

Foto als Webseitenhintergrund

Beitragvon eleanora » Fr 19. Okt 2012, 13:34

Es ist relativ einfach eine Hintergrundgrafik zu malen, wie z.B. beim Twitterlook, um jedoch ein Foto als Hintergrundgrafik zu verwenden, musst du ein bissle tricksen, wenn es eine wiederholende Grafik (breite) werden soll.

Ok, als Beispiel habe ich hier ein Foto mit Meerblick und wunderschönen Wolken ausgesucht.

Ausgangsbild

Das Bild stammt aus der Sammlung von http://www.morguefile.com und steht frei zum Verbasteln zur Verfügung. Das Bild ist soweit ideal, hab aber zwei kleine Makel, die wir ausbügeln müssen, bevor wir es einfach als Hintergrund einsetzen können.

1. Wenn du eine horizontale Hilfslinie aus deinem Lineal ziehst, merkst du, dass die Erdkrümmung auf dem Bild mit abgebildet ist.

2. Es kommt frisch aus der Kamera und ist viel zu groß als Layoutgrafik einer Webseite.

Kümmern wir uns erst einmal um Problem 1

Schritt 1
Klicke auf das Perspektiven-Tool :perspektiv: und schiebe die rechte untere Ecke nach oben, so dass der horizont begradigt ist.

Schneide anschließend das Bild unten ab, so dass die Lücke weg ist und entfernst die Hilfslinie.
Jetzt skalierst du dein Bild auf 1200px Höhe. Damit hast du schon mal eine ganze Menge Speicherplatz gespart.
#


Schritt 2
Ok, jetzt muss das Bild noch horizontal wiederholbar sein.

Markiere einen Bereich in deinem Bild mit dem Rechteck-Tool :recheck:
Bearbeiten - Ausschneiden und anschließend Bearbeiten - Einfügen als - neue Ebene.
Jetzt spiegelst du beide Ebenen horizontal :vspiegeln: , so dass die Schnittkante nach außen zeigt.
#


Schritt 3
Schiebe nun die obere Ebene ein Stück über die untere Ebene, so dass sie sich überlappen.
#


Schritt 4
Bringe beide Ebenen auf Bildgröße, so dass du die Ebenenbegrenzungen nicht mehr sehen kannst.
Füge der oberen Ebene eine Ebenenmaske hinzu Menü Ebene - Maske - Ebenenmaske hinzufügen. Bestätige den Assistenten mit den Ausgangswerten: Weiß (volle Deckkraft)
Aktiviere die Sprühpistole :airbrush:
Stelle die Vordergrundfarbe auf Schwarz und wähle einen Pinsel mit Radius 100 und Härte 0, so dass du eine große Fläche abdecken kannst.
#


Schritt 5
Male nun über die Kante mit der Sprühpistole auf der Ebenenmaske, so dass die Naht nicht mehr sichtbar ist.
Vereine alle Ebenen und schneide das Bild zu, so dass der transparente Bereich auf der linken Seite verschwindet: Ebene - automatisch zuschneiden.
Speichere dein Bild als hintergrund.jpg und baue ihn in deine Webseite ein. --> Hinter dem Horizont...
#
Schau rein, in unsere Smiley-Werkstatt!
Aussuchen - Rechtsklick - Grafikadresse kopieren
im Beitrag als img einfügen!
Meine Lieblingssmileys ... BildBildBild

Zurück zu „Einsteiger Tutorien“



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast