Nun will ich euch als erstes das Produkt dieses Tutorials präsentieren:

Der fertige Hintergrund

Das schöne an der Methode ist, dass sie sich sehr leicht anpassen und verändern lässt, wodurch sich je nach bedarf ganz unterschiedliche Backgrounds erstellen lassen.

Was man braucht:

Als Grundlage für den Background wird zunächst eine hochauflösende Textur benötigt. Viele Blogs veröffentlichen regelmäßig wirklich schöne Texturen zur freien Verwendung. Ein bisschen googlen hilft hier .  Ich habe mich hier jedoch nicht bei einem Blog, sondern bei http://freetextures.org bedient. Genau gesagt benötigt ihr für dieses Tutorial diese Textur.

Als erstes erstellen wir in Photoshop ein neues Dokument mit den Maßen 800px x 600px. Im Prinzip könnt ihr die Auflösung je nach Bedarf auch deutlich größer wählen, dies hängt letztendlich von der Auflösung der verwendeten Textur ab. Aber in diesem Tutorial beschränken wir uns auf 800×600.

Wir beginnen in unserem neuen Dokument mit einem reflektierenden Verlauf
(hier: Vordergrundfarbe: #c8866d, Hintergrundfarbe: #93527f). Den Verlauf ziehen wir von der unteren linken in die obere rechte Ecke:

Verlauf

Wie schon erwähnt lassen sich die Farben natürlich nach belieben ändern, aber ich mag Lila (wie man an unserer Seite sieht ).

Nun öffnen wir die Textur und stellen diese über “Bild->Modus” auf “Graustufen” um. Außerdem verkleinern wir das Bild über “Bild->Bildgröße” auf 800px x 600px. Die entfärbte und verkleinerte Textur ziehen wir nun über unseren Verlauf und stellen die Deckkraft auf 17%:

Textur über unseren Verlauf

Das sieht doch für’s Erste schon einmal ganz nett aus, allerdings ist es noch weit entfernt von dem gewünschten Ergebnis. Die Ebene mit der Textur (“Ebene 1 im Bild”) duplizieren wir nun und drehen sie um 180°:

Ebene drehen

Nun öffnen wir ein weiters mal die Textur und stellen sie wieder auf Graustufen um, die Größe lassen wir jedoch unberührt (auf 1200px x 900px). Jetzt ziehen wir die Textur in voller Größe in unseren Hintergrund und drehen sie um 90°. Theoretisch hätte man die Ebene mit der Textur auch ein weiteres mal duplizieren können und dann um 90° drehen. Da das Bild jedoch höher als es breit ist, ließe sich so nicht die volle Fläche füllen.

90° Drehung

Die Deckkraft der gerade gedrehten Ebene stellen wir wiederum auf ca. 15%. Man könnte die Textur noch weitere Male einfügen, drehen und die Deckkraft runterstellen, für diesen Hintergrund soll es jedoch reichen. Insgesamt sollte das ganze bis jetzt so aussehen:

Aktueller Stand der Dinge

Nun fehlt noch ein letzter Schritt, welcher sehr viel ausmacht. Und zwar werden wir die Kanten des Bildes mit Hilfe eines großen Pinsels leicht und sanft verdunkeln. Hierzu erstellen wir als nächstes über “Ebene->neu” eine neue Ebene, welche vorerst ganz vorne sein sollte. Jetzt wählen wir das Pinselwerkzeug und hier einen sanften Pinsel mit etwa 200px Durchmesser:

Pinsel wählen

Mit diesem Pinsel malen wir nun am Rand des Bildes entlang, sodass das Ganze dann etwa so aussehen sollte (Nicht vergessen, die Vordergrundfarbe auf schwarz zu stellen…):

Mit dem Pinsel

Ich empfehle hierbei nicht allzu penibel zu sein, sondern lieber frei darauf loszuzeichnen: Einmal rum und fertig. Die Ebene, welche wir gerade so schön mit dem Pinsel bemalt haben, stellen wir jetzt noch auf eine Deckkraft von ca. 30 % und voila: Fertig ist unser hübscher Background:

Der fertige Background

So das war es auch schon. Geht ziemlich schnell, oder?

Das ganze soll jedoch nur ein sehr einfaches Beispiel darstellen, welches wirklich schnell zu erstellen ist. Es soll die lediglich Grundprinzipien dieser Methode zeigen. Durch Kombination verschiedener Texturen und Verläufe und Änderungen in der Ebenenreihenfolge und Deckkraft, stehen einem wirklich unmengen an Möglichkeiten zur Verfügung, sich einen individuellen Background zu erstellen.

Ich nutze schon seit Längerem zu diesem Zweck als Alternative zu Photoshop das kostenlose Tool XAT Image Optimizer. Mit Hilfe der “Magic Compression” lässt sich die Dateigröße von JPG Dateien hiermit deutlich verkleinern (ohne große Qualitätsverluste).

Der XAT Image Optimizer kann in der Standardversion hier kostenlos runtergeladen werden:

http://www.xat.com/io/index.html

Hat man das Programm installiert ist die Bedienung denkbar einfach. Als erstes muss das zu verkleinernde Bild über “File->Open..” (STRG+O) öffnen:

Datei öffnen

Danach öffnet man das “Compress Image” Werkzeug:

Komprimieren Werkzeug

Mit dem Werkzeug hat man nun die Möglichkeit die Magic Compression und die JPG Quality einzustellen. Die Magic Compression kann man ruhig auf 100% stellen. Es ist sehr hilfreich, dass man sobald das Compress Werkzeug geöffnet ist, sowohl das Originalbild als auch das komprimierte Bild angezeigt bekommt. So kann man mögliche Qualitätsverluste sofort erkennen. Außerdem wird die Dateigröße sowohl absolut als auch prozentual zum Originalbild angezeigt.

Beispiel

Im Beispiel sieht man, dass das Bild auf 54% der Originalgröße geschrumpft werden kann. Die Qualität ist hierbei fast gleichbelibend.

Mit dem Compression Werkzeug kann man außerdem andere Dateiformate auswählen und sieht sofort wie stark das Bild komprimiert werden kann und ob die Qualität darunter leidet.

Möchte man das komprimierte Bild abspeichern, muss man nur noch auf “File->Save Optimized As…” (STRG+S) gehen und die komprimierte Datein am gewünschten Ort abspeichern.

Abspeichern

Müssen mehrere Dateien auf einmal komprimiert werden bietet der Image Optimizer weiterhin einen Batch Wizard an (“File->Batch Wizard…”).  Ich persönlich nutze die Funktion jedoch lieber für einzelne Dateien, da ich so immer direkt die Qualität sehe. Die restlichen Werkzeuge des Tools sind in meinen Augen nicht wirklich zu gebrauchen und die üblichen Bildbearbeitungsprogramme (Photoshop, IrfanView) liefern hier bessere Ergebnisse.

Außerdem habe ich mich entschieden, Feedburner zu nutzen, was ich nur jedem empfehlen kann. Feedburner ist sehr einfach einzurichten und ermöglicht dem potentiellen Feed Abonnenten ein einfaches hinzufügen des Feeds zu allerlei verschiedenen Readern. Für mich hat das ganze außerdem den Vorteil, dass Feedburner mir ausführliche Statistiken über die Feed Abonnenten liefert.

So und nun bitte rechts klicken und den Feed abonnieren!

Hier nun eine kleine Vorschau, was euch bei meinen Backgrounds erwartet:

Vorschaubild der Twitter Backgrounds

Hier könnt ihr euch alle 10 Backgrounds als ZIP-Datei runterladen:

> Jetzt Downloaden <

Ihr könnt mit den Backgrounds anstellen, was ihr wollt (Ja, sogar verkaufen ). Wenn ihr Farbwünsche oder Ähnliches habt, schreibt einfach ein Kommentar. Jetzt viel Spaß mit den Backgrounds.

Eine davon will ich im Folgenden vorstellen:

Inkscape

Inkscape ist ein Open Source Vektorbearbeitungsprogramm und hat mir einige Male beim Vektorisieren gute Dienste geleistet. Auch wenn die Ergebnisse sicher nicht mit dem händischen Nachzeichnen mithalten können, lassen sich dennoch gute Vektorgrafiken erzeugen. Manchmal ist das Vektorisieren auch hilfreich um schicke Effekte zu erzielen, z.B. für schöne Hintergründe für Header.

Mit Inkscape ist ein Bild einfach und schnell zu vektorisieren. Ich werde dies an einem kleinen Beispiel zeigen:

Ich nutze Mal ein Foto von einem Hochhaus für dieses Beispiel. Also als Erstes öffnet man die Test Datei (test.jpg):

Öffnen

Nun wählt man das Bild aus und geht auf  “Pfad” > “Bitmap vektorisieren…”

Vektorisieren

Jetzt öffnet sich ein kleines Fenster mit einigen Einstellungsmöglichkeiten. Am Besten probiert man einfach etwas rum, bis das Ergebnis gut aussieht. Nett ist, dass man über “aktualisieren” immer eine kleine Vorschau zu sehen bekommt.

Einstellungen

Wenn einem die Vorschau gefällt, einfach auf “Ok” klicken und schon wird die Vektorgrafik erstellt. Nun muss noch das Pixelbild (Foto) aus dem bild entfernt werden. Hierzu einfach die Grafik auswählen und mit Hilfe der “entf”-Taste entfernen. Übrig bleibt die Vektorgrafik. Diese kann nun über “Speichern unter…” als EPS oder einem anderen Format gespeichert werden.

Vektor

Am besten probiert man das ganze mit verschiedenen Bildern aus, es kommen sehr nette Sachen dabei raus. Auch Logos lassen sich relativ gut vektorisieren und auch die Geschwindigkeit des Tools überzeugt. Cool sieht es auch aus, wenn man Portraitfotos vektorisiert.

Hier könnt ihr die test.jpg und test.eps runterladen und selber probieren (ihr könnt mit dem Bild anstellen, was immer ihr wollt):

vektor

Und hier noch einige Beispiele, welche mit Inkscape innerhalb weniger Sekunden erzeugt sind:

Das Google Logo als Vektor

Das kommt dabei raus, wenn man ein Partyfoto vektorisiert