BEAUTY • FASHION • FOOD • INTERIOR • TRAVELS

Tutorial für transparenten Header mit div. Elementen

Da ihr euch extrem oft ein Tutorial zu meinem Header gewünscht habt, kommt hier nun eine kleine Anleitung.

Es ist kein 1:1 Tutorial, da dies erstens viiiiiel zu lange dauern würde und es zweitens auch keinen Sinn macht, wenn dann jeden den haargenau gleichen Header wie ich hätte. Logisch, nicht?!
Es ist also nur eine Anleitung für den „technischen Teil“, kreativ müsst ihr schon selbst sein. 😉

Ich habe das Tutorial im Photoshop erstellt, aber die Funktionen gibt es auch in Freeware-Programmen wie GIMP, etc.

IDEENFINDUNG
Zuerst braucht ihr erst mal eine Vorstellung, wie euer Header aussehen soll. Also welche Elemente ihr drauf haben wollt und wie das Endergebnis letztendlich aussehen soll. Besonders, wenn man noch nicht so viel mit Grafikprogrammen gearbeitet und nicht schon zig Elemente am PC gespeichert hat, ist es von Vorteil sich eine Skizze zu machen, wie das Endprodukt aussehen soll und auch welche Elemente ihr dafür benötigen werdet. Ich persönlich mag diesen „Schreibtisch-Look“, weshalb ich mich für Zetteln, Büroklammern, Stifte, usw. entschieden habe. Außerdem dürfen bei mir als Dekoelemente Schmetterlinge und Blümchen nicht fehlen.

ELEMENTE
Der wohl „schwierigste“ Teil. Wo bekomme ich diese Elemente her?! Da gibt es jetzt mehrere Möglichkeiten. Entweder ihr seid ganz dreist googelt nach den Elementen und benutzt dann irgendwelche Bilder, die ihr in den Weiten des WWWs gefunden habt. Ich persönlich würde davon die Finger lassen, da es erstens illegal ist und diese Bilder meist auch keine besonders gute Auflösung haben. Höchstwahrscheinlich haben die Fotos dann auch noch einen Hintergrund, den ihr entfernen müsst, usw.
Die zweite Variante ist, ihr erstellt euch diese Elemente selbst. Papier könnt ihr z.B. einscannen oder abfotografieren, aber auch im Photoshop grafisch erstellen. Tutorials, wie man Papier in einem Grafikprogramm erstellt, gibt es einige im Internet. Man kann natürlich auch andere Elemente wie Polaroid, Blätter, Blumen, etc. selbst erstellen, Tutorials (leider meist Englisch) gibt es genug im Internet. Ist sicher die „schönste“ Variante, da dann der Header 100%ig selbst gemacht ist. Ist aber auch die aufwendigste Möglichkeit.
Die dritte Variante ist, ihr kauft euch diese Elemente, so wie ich es gemacht habe. Gute Seiten für diese Elemente sind z.B. Shutterstock, iStock oder auch SXC. Es gibt dort ganze Element-Sets, wo ihr dann z.B. 10 verschiedene Papierstücke bekommt. Der Preis pro Set liegt etwa zwischen 10-30 Euro. Die Qualität der Bilder ist wirklich top, ihr habt einen transparenten Hintergrund (müsst den Hintergrund bei den Bildern also nicht mehr entfernen) und wenn ihr die Elemente öfter benutzt, dann sind die 10-30 Euro meiner Meinung nach gut investiert! Bei SXC ist die Auswahl der Fotos nicht ganz so groß, dafür ist die Seite für die private Nutzung kostenlos. Ihr müsst euch lediglich anmelden. Auch könnt ihr aber Deviantart, etc. nach lizenzfreien Elementen suchen.

ein Teil der Elemente, die ich gerne nutze auf schwarzen Hintergrund (normalerweise ist er transparent)

Wenn ihr diese Vorbereitungen getroffen habt, kann’s dann auch schon losgehen. 🙂

Ihr erstellt eine neue Datei in PS. Dazu müsst ihr eure Größe, die ihr haben wollt, wissen. Ich habe mich für 762×400 px entschieden. Ganz wichtig ist, dass der Farbmodus RGB ist und dass ihr den Hintergrund auf transparent eingestellt habt.

Dann öffnet eure Elemente, die ihr benutzen wollt, und zieht sie in euer Header-Dokument. Da ist es schlau, wenn ihr vorher schon eine Idee habt, wie der Header letztendlich aussehen soll, ansonsten schiebt ihr wahrscheinlich eure Elemente x-Mal hin- und her. 😉 Ich habe mir überlegt in den Hintergrund unordentlich verschiedene Zetteln zu platzieren. Am besten ihr dreht und spiegelt die Elemente nach belieben, so sieht das Ganze „unordentlicher“ aus.


Über die Zetteln habe ich dann die eigentlichen Deko-Elemente platziert. In meinem Fall sind das Schmetterlinge, Blümchen, Lippenstifte, usw. Da könnt ihr euch dann kreativ austoben, was zu euch und euerem Stil passt. Besonders nett finde ich, wenn ihr auch ein Foto von euch auf eurem Header habt. Ich habe mir dazu z.B. ein Polaroid-Bild gekauft und in die leere Fläche ein Bild von mir platziert. Ihr könnt aber auch einen Filmstreifen oder ein normales Bild mit weißen Rahmen benutzen.

Damit das Ganze nicht einfach „aufgepappt“ aussieht, ist es schön, wenn man den Elementen einen Schlagschatten gibt. Dadurch wirkt alles etwas plastischer.




Damit es noch interessanter wirkt, habe ich auch noch Bruches (also Deko-Pinseln) verwendet. Im Internet gibt es unzählige davon. Angefangen von Herzen bis Sternchen, Blätter, Striche, Blutflecken, Schmetterlinge, Blumen,… es gibt einfach ALLES! Die meisten kann man sich kostenlos downloaden. Gebt einfach in Google ein, welches Element ihr sucht (z.B. Flower Brush) und ihr bekommt eine Vielzahl an Pinselspitzen ausgespuckt. Mit denen könnt ihr dann eueren Header zusätzlich aufpeppen. Ich habe z.B. unter die Nagellackflasche einige „Flecken“ gestempelt, damit es wie ausgelaufener Nagellack aussieht. Oder auch unter die Kaffeetasse einen Kaffeefleck. Die Bruches könnt ihr in der Farbe, Größe und Deckkraft variieren, weshalb sie wirklich extrem vielfältig einsetzbar sind. 

Dann platziert ihr noch in eurer Wunschschriftart euren Blognamen am besten auf eine „freie“ Fläche, damit man es gut lesen kann. Und dann seid ihr eigentlich schon fertig.

Ganz wichtig ist übrigens, dass ihr euren Header im PNG-Format speichert. Solltet ihr in nämlich als JPG speichern geht euer transparenter Hintergrund verloren und ihr habt stattdessen einen weißen Background. Gerade wenn ihr aber wollt, dass man, so wie bei mir noch eueren Bloghintergrund (bei mir dieses Holz-Pattern) sehen soll, müsst ihr es als PNG speichern.

ZUSATZTIPPS
Besonders schön finde ich es, wenn ihr euren Header der Jahreszeit passend anpasst. Wenn ihr euren Header zusätzlich als PSD speichert, könnt ihr in jederzeit abändern. Also einfach Elemente tauschen. Z.B. anstelle der Sommerblume ein Herbstblatt als Element einfügen, oder im Winter etwas Schnee, etc.

Was ich euch auch noch empfehle, ist, nach alle 10-15 Minuten Zwischenzuspeichern. Photoshop macht leider keine Sicherungskopien, und wenn euer Programm oder Rechner abstürzt, geht alles verloren. (Besonders ärgerlich, wenn ihr schon ne Stunde dran arbeitet,… ich kann ein Lied davon singen.) Deshalb immer zwischendurch abspeichern. Auch sehr schlau, wenn ihr eure Versionen als VERSION1, VERSION2,… sichert und nicht immer das alte Dokument überschreibt, da es sein kann, dass euch z.B. die Version 2 besser als Version 4 gefallen hat und so könnt ihr dann noch zur „Ursprungsvariante“ zurückkehren.

Ich hoffe ich konnte euch etwas helfen.

Weitere Bildbearbeitungs-Tutorials von mir:

13 Antworten

  1. Vielen Dank für das Tutorial, beziehungsweise die guten Tips, vielleicht werde ich das bei mir mal ausprobieren, ich bin noch nicht so erfahren, was Bildbearbeitung angeht, obwohl mein Header und Hintergrund ja wenigstens auch selbst gemacht sind 🙂

    Liebe Grüße, die Doreen

  2. Oh super! Danke für die Beschreibung. Dachte zwar eigentlich, ich hätte wirklich Erfahrung und Ahnung in Sachen GRafik etc. aber man lernt eben doch nie aus. 😉

    Liebe Grüße
    EsKa

  3. Super Anleitung. Leider habe ich kein Photoshop. Deshalb musste ich mir meinen Header auf ppt zusammen mischen. Geht auch, doch ist definitiv nicht so toll wie die Variante mit Photoshop.

  4. @ Anonym: Wer lesen kann ist klar im Vorteil, gell?? 😉 Dann wüsstest du auch wo die Fotos her sind, denn das steht alles HAARGENAU im Text! 🙂

  5. Wozu lesen, wenn man es eh mit freiem Auge sehen kann, wie das funktioniert!! Ich meinte ja auch die Quelle zu deinem Entwurf-Banner.

  6. Es geht auch nicht um die Anleitung, die du lesen sollst, sondern es steht im Text drin woher ich die Bilder habe und das kannst du Super-Genie ja scheinbar nicht mit freiem Auge sehen. 😉

    Quellen sind: Shutterstock, iStock und SXC, wo ich meine Bilder KAUFE!

  7. Hallo Liebes,

    Den fiesen Anonymen Kommentaren zum Trotz (lass dich davon bitte nicht verletzten :(), habe ich vor dein tolles Tutorial bei mir auf dem Blog zu verlinken.
    Für nächsten Samstag schreibe ich grade an einem "Header" Inspirations und was geht und was geht nicht- Tutorial und werde dich dann ganz unten unter "Tolle Tutorials" verlinken 🙂

    Damit du bescheid weißt, falls hier weitere Kommentare reinschneien werden. Ich hoffe aber nur positive, sonst verhaue ich die Leute 😉

    Liebe Grüße
    Alenija
    von Project-Beautiful

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert