Allgemein

Wie bastelt man einen Header? [Tutorial]

Ich wurde schon sehr häufig gefragt, wie ich meinen Header gemacht habe und jetzt habe ich mich endlich mal entschlossen, euch ein Tutorial an die Hand zu geben. Allerdings ist das halt nur meine Art (und da auch nur ein Ausschnitt von), Grafiken zu erstellen. Es gibt viele verschiedene Wege und Grafikprogramme – ihr müsst es also nicht genauso machen. Für alle Anfänger ist es aber vielleicht auch so ganz interessant, wie so eine Grafik generell entsteht. 
Was benötigt man?
  • ein Grafikprogramm: ich arbeite schon jahrelang mit Paint Shop Pro 8 (hier gibts ein Download einer Testversion, die bestimmt nicht alle Möglichkeiten ausschöpft, aber so könnt ihr das Programm mal kennenlernen) – da das aber eine relativ alte Version ist, bekommt ihr die nur noch zu nem Spottpreis irgendwo gebraucht – ansonsten könnt ihr euch auch an GIMP versuchen, einer Freeware. Natürlich geht auch Photoshop etc., aber die Programme haben natürlich ihre Preise und so ein „einfacher“ Header bedarf jetzt nicht zig Effektmöglichkeiten.
  • Bilder/Fotos: Wenn ihr auf der sicheren Seite sein wollt, dann nehmt nur eigene Bilder!! Ansonsten fragt IMMER beim Rechteinhaber nach und lasst euch die Nutzungsrechte schriftlich geben. Ihr dürft NICHT einfach irgendwelche Bilder, die ihr über Google Images findet, verwenden!! Sowas kann wirklich teuer werden, also lasst die Finger davon. Wenn ihr keine eigenen guten Fotos habt, dann müsst ihr Lizenzen kaufen! Das habe ich auch getan und zwar bei Corbis Images – dort könnt ihr nach lizenzfreien Fotos suchen aber ACHTUNG lizenzfrei heißt nicht, dass ihr sie einfach so nehmen dürft, sondern dass ihr nur einmal einen Betrag zahlt und die Bilder dann so oft und in welcher Form ihr wollt, benutzen dürft. Für meine 2 Bilder (Nagellackfläschchen + Pinsel) habe ich 35€ gezahlt. Auch wenn man erstmal denken könnte, ich will dafür kein Geld zahlen, glaubt mir eine Abmahnung kostet wesentlich mehr 😉
  • Textures, Schriftarten, Pattern, Brushes etc: Um die Grafiken zu verzieren und zu verschönern, benötigt man noch ein paar Ressourcen, also Bastelmaterial^^. Da gibt es einige wirklich tolle Seiten, wo ihr schauen könnt – ich mag besonders Shizoo Design. Aber auch hier gilt: nicht einfach nehmen. Ihr müsst zwar meistens kein Geld bezahlen, aber natürlich einen Creditlink setzen, damit ihr sie nicht als eure ausgebt. Ich habe das oben im Impressum unter Credits angegeben. Gute Schriften gibt es z.B. bei dafont.com.
Wie gehe ich vor?
  • Ich öffne mein Grafikprogramm und erstelle eine neue Grafik. Ich erkläre jetzt einfach mal jeden einzelnen Schritt – wenn ihr da selbst schon viel Ahnung habt, braucht ihr das Tutorial natürlich nicht vollständig durchgehen. Für das neue leere Bild wähle ich die benötigten Maße, mein Header hat 940x245px:

 

  • Dann öffne ich die Bilder, die ich gern verwenden möchte. Oben auf den gelben Ordner mit dem Pfeil klicken und die Grafiken aus dem Verzeichnis wählen, wo ihr sie abgespeichert habt. Ich habe dann in meinem Grafikprogramm sozusagen 3 Bilder offen: das leere, das mein Header wird und die 2 Bilder, die ich einbauen will.
  • Das Schwierigste, aber auch das Spannendste ist nun die Kreativphase. Das heißt, ihr müsst euch überlegen, wie euer Header aussehen soll. Wie wollt ihr die Bilder anordnen? Welcher Schriftzug muss noch drauf passen? Und so weiter. Bei mir entsteht das Ganze eigentlich immer durch Rumprobieren. Zunächst erstmal importiert ihr die 2 Fotos in eure leere Grafik. Dafür klickt ihr das Foto an und drückt STRG+A und STRG+C, dann geht ihr ins leere Dokument und drückt STRG+L, bei dem anderen Foto genauso. Die einzelnen Fotos könnt ihr dann schließen. Ihr habt dann die Fotos als Ebenen in eurem Dokument. Ebene 1 ist also das leere Bild, Ebene 2 das eine Foto und Ebene 3 das zweite.
  • Nun positioniert ihr die Fotos. Falls euch die Ausrichtung eines Fotos nicht gefällt, könnt ihr es z.B. auch spiegeln – das habe ich bei dem linken Foto gemacht. Ihr könnt wirklich ganz viel machen, aber ich erkläre hier nur, was ich gemacht habe^^, sonst sprengt das Ganze den Rahmen.
  • Dann habe ich mir bei Shizoo folgende Textur ausgesucht: 66.jpg. Habe dann einfach n Screenshot gemacht (ihr könnt die Grafik natürlich auch abspeichern und wieder öffnen, aber das dauert mir zu lang^^). Dann im Grafikprogramm drückt ihr wieder einfach STRG+L. Nun überlagert die Textur natürlich eure anderen Ebenen und die Fotos sind nicht mehr sichtbar. Also macht ihr einen Doppelklick rechts auf das Wort Ebene 4 und im folgenden Fenster stellt ihr „Hellere Farbe“ ein und drückt auf OK. Ihr könnte auch dioe anderen Sachen mal ausprobieren 🙂
  • Nun seht ihr eure Fotos durch und die Textur liegt sozusagen darauf. Diese könnt ihr nun hinrücken, spiegeln etc wie ihr wollt und es euch gefällt. Ich habe es so gemacht, dass ich die Textur nach rechts gerückt habe:
  • Dann war es links natürlich noch ziemlich leer, also habe ich die Ebene 4 dupliziert – einfach rechte Maustaste auf das Wort Ebene 4 und auf Duplizieren klicken. Dann wieder vertikal spiegeln und an Position schieben. Dann sieht das Ganze schon ganz ordentlich aus:
  • Weil mir der Übergang bzw. die Kante beim Pinsel nicht gefiel, habe ich einfach nen weißen Streifen raufgelegt, ihr könnt das natürlich auch eleganter mit Brushes machen oder Masken etc. Ihr klickt auf das Auswahlwerkzeug (gestricheltes Rechteck) markiert den Bereich, den ihr Weiß haben wollt und geht dann links auf Füllwerkzeug und füllt die Fläche mit Farbe:
  • Weil links noch so ein oranger Punkt im Bild ist, habe ich rechts auch noch Punkte gsetzt, aber das ist ja Spielerei. Funktioniert über die Pinselfunktion ganz einfach. Ja und damit ist der Header auch fast fertig. Fehlt nur noch der Blogname oder was ihr halt als Schriftzug noch so haben wollt. Da geht ihr links einfach auf Textwerkzeug (das A) und wählt oben in der Navi die Schriftart und -größe aus. Ihr könnt das auch später immer ändern.
  • Dann klickt ihr in euren Header und es öffnet sich ein Texteingabefeld, dort tragt ihr euren Text ein. Die Schrift schiebt ihr dann dahin wo ihr wollt. Ich habe dann noch einen Rand drum gemacht und zwar so: Ihr dupliziert den Schriftzug, markiert ihn und klickt dann oben auf Auswahl -> Ändern -> Vergrößern -> Pixelanzahl 2. Dann nehmt ihr wieder das Füllwerkzeug und füllt die untere der beiden Schriftebenen. Ja und dann war ich fertig 😀

 

Wie gesagt, es ist nur ein Anreiz – eurer Kreativität sind da keine Grenzen gesetzt. Probiert doch einfach mal rum. Mit der Zeit lernt man alle möglichen Tricks und Kniffe! Ja und Spaß macht es auch!

 

 Habt ihr noch Fragen?
Arbeit ihr mit einem anderen Programm?
War das Tutorial hilfreich für euch?

You Might Also Like

21 Comments

  • Reply
    CrimiNail Art
    12. August 2012 at 13:53

    Ich könnte sowas nicht haha 😀

    • Reply
      sala83
      12. August 2012 at 13:59

      es ist leichter, als es aussieht^^

  • Reply
    Celia
    12. August 2012 at 14:01

    Sehr schön erklärt, ganz großes Lob *Daumen hoch*

  • Reply
    Isa
    12. August 2012 at 14:03

    Ich arbeite mit Photoshop 🙂 und hatte auch schon mal kurz das Thema angeschnitten hier:

    http://unlike-girl.blogspot.de/2011/09/zu-der-header-frage.html

    und

    http://unlike-girl.blogspot.de/2012/01/alles-zum-thema-header-layout.html

    aber bei dem zweiten Link muss ich peinlicherweise sagen, das waren damals die Layouts von meiner Grafikseite *hust* ^o^

    Aber ich finde dein Tutorial gelungen, da du alles mit Bildern belegt hast und so ist es einfach nachzuvollziehen, dankeschön dafür.

    • Reply
      sala83
      12. August 2012 at 14:09

      hehe ich hatte früher auch mal ne Grafikseite – lang lang ist her^^, existiert deine noch?

    • Reply
      Isa
      12. August 2012 at 17:52

      Echt? Das ist ja cool :> nee, ich hatte die als ich anfing zu bloggen gelöscht weil ich es zeitlich nicht mehr geschafft habe meinen Besucher u. Grafikanfragen gerecht zu werden (Buttonwünsche, Tutorials usw.) aber die Sachen habe ich alle noch *gg*

  • Reply
    Mei
    12. August 2012 at 14:05

    Hui, wirklich gut erklärt 🙂 Ich überlege momentan ob und wie ich meinen Header neu gestalten könnte, daher kommt dein Tutorial nicht ungelegen 😉

    Liebe Grüße

  • Reply
    LilyC
    12. August 2012 at 14:19

    Sind die Downloads auf der Seite also Shizoo eig. frei verwendbar?

    • Reply
      sala83
      12. August 2012 at 14:23

      also früher hatten die mal ne seite mit den rules und da stand halt, das es linkware ist sprich wenn man n credit setzt, kann mans verwenden – aber iwie find ich diese angaben nicht mehr Oo ansonsten einfach nachfragen, sie sind sehr nett – bei anderen grafikseiten stehts meistens dabei

    • Reply
      sala83
      12. August 2012 at 14:26

      wenn du natürlich materialien nutzt, die noch andere bilder etc enthalten, muss man halt auch da schaun, obs frei verwendbar ist

  • Reply
    Pink Fluffy
    12. August 2012 at 14:41

    Ich hab ja jetzt seit es meinen Blog gibt den selben Header gehabt, aber neulich packte es mich dann doch.. und ich wollte Kitsch! xD Ich bastel dann auch einfach mit Photoshop rum. Mal schauen, wie lange mir der aktuelle gefällt, bis ich dann wieder experimentiere, jetzt wo das erste Mal als Hürde überwunden wurde. ^^ Dein Ergebnis kann sich auf jeden Fall sehen lassen! Wirklich schön geworden!

  • Reply
    Babs
    12. August 2012 at 19:44

    Solche Tutorials finde ich immer super, gerade für Leute wie mich, die davon absolut keine Ahnung haben 😉 Das hilft mir immer sehr 🙂

  • Reply
    Mrs.Sunshine
    12. August 2012 at 19:53

    Ich finde deinen Header sehr schön und finde auch dieses Tutorial sehr gelungen! Vor allem die Tipps mit den Bezugsquellen finde ich sehr hilfreich 😀
    Ich hab inzwischen auch angefangen, an einem eigenen Header rumzubasteln. Bin ja noch immer headerlos 😉 Bis jetzt war das immer ganz okay für mich, aber inzwischen reicht es nicht mehr 😉

    Liebe Grüße 😀

  • Reply
    Schminktussi
    12. August 2012 at 21:47

    Das Tutorial ist wirklich toll geschrieben. Ich müsste mich auch mal an nen neuen Header machen. Bin mit meinem irgendwie gar nicht zufrieden. :/

  • Reply
    ♥ Leni
    13. August 2012 at 11:36

    Tolles Tutorial, genau so etwas habe ich gesucht!! Vielen Dank!! Dein Blog gefällt mir, folge dir nun 🙂

    Beste Grüße, Leni
    http://leniliebt.blogspot.de/

  • Reply
    Janine
    13. August 2012 at 13:58

    Ich hab mir alles via google beigebracht und war gerade auf einer Seite auf der jemand header, buttons etc. verkauft….es ist wirklich nicht so schwer wie's aussieht 🙂
    Klasse tutorial, hast bestimmt viel Arbeit da rein gesteckt!

  • Reply
    Yvonne
    13. August 2012 at 15:32

    das finde ich ja total klasse von dir das du das hier mal so detailiert beschrieben hast, vielen dank für deine mühe!!

  • Reply
    Sofia
    13. August 2012 at 17:12

    Du hast immer so tolle Ideen, wie man die Bilder verschönern kann! Auf sowas würde ich nie im Leben kommen ^.^

  • Reply
    Parkuhr
    14. August 2012 at 11:10

    Tollo. Muss mir auch irgendwann mal ein Header basteln, Hab da momentan nur keinen Seit für, aber wenn dann komm ich hier bestimmt drauf zurück:p

  • Reply
    *Anna*
    15. August 2012 at 7:45

    Tolles Tutorial, danke 🙂

    Auf der Arbeit benutze ich Photoshop und da gibt es wirklich sooo viele Möglichkeiten und man kann so tolle Sachen machen! Leider ist das natürlich ziemlich teuer und zuhause hab ich es dann auch nicht… da hatte ich zuerst GIMP, aber damit komme ich so gar nicht klar, dann hatte ich Paint.net und jetzt bin ich bei Photoscape gelandet. Und mit einer Kombination aus allen bekommt man auch schon einiges hin 😉

    LG Anna

  • Reply
    Soad
    26. Januar 2014 at 22:01

    Bin gerade auf den Blog gestoßen auf der Suche nach Tipps zum Basteln eines Headers für meinen Blog. Werde das ganze die Tage mal ausprobieren, danke schonmal.

    Lg Soad

  • Leave a Reply