15 März 2012

Guestpost the3rdvoice - DIY Header




Ich werde immer wieder gefragt, wie ich denn Janas Footer, Rominas Header oder meinen Header erstellt habe. Eigentlich wollte ich ein Video-Tutorial dazu machen, das hat aber leider nicht so ganz hingehauen, deshalb versuche ich es mal mit meinen schriftlichen Erklärbärkünsten.

Wichtig vorneweg: Meine Photoshopskillz sind bei weitem nicht ausgereift und ich bezeichne mich nicht als Könner. Es gibt bestimmt andere Mittel und Wege etwas ähnliches zu erstellen mit viel weniger Aufwand - ich zeige euch hier lediglich wie ich immer vorgehe, und das so genau wie möglich. Ich hoffe, so können es auch blutige Photoshopanfänger verstehen. Und an die Fortgeschrittenen: Bitte nicht durchdrehen. ;D
Ich selbst benutze Adobe Photoshop CS5, ein Wacom Intuos 3 und einen Mac.


Was du brauchst:
- Adobe Photoshop (Eine 30 Tätige Testversion mit allen Funktionen gibt es auf Adobe.com zum kostenlosen download)
- Ein Grafiktablett (mit Stift zeichnet es sich einfach besser - wer's mit Maus versuchen will kann das aber auch gerne tun!)
- Ein nicht zu kleines Bild (es ist zwar für die meisten nur fürs Web, aber je größer das Bild, desto genauer kannst du zeichnen und desto schöner ist das Ergebnis).
- Ich verwende in diesem Tutorial dieses Bild. Wenn du es nachbasteln möchtest zum üben kannst du es gerne benutzen.


Schritt 1: Das Zeichnen

- Öffne das Bild in Photoshop.
- Drücke F7 - das Ebenenfenster sollte jetzt eingeblendet sein. Das brauchst du zur Übersicht. Alternativ: Fenster --> Ebenen
- Klicke in diesem Ebenenfenster auf den schwarzweißen Kreis und wähle "Farbfläche". Hier öffnet sich die Farbpalette, wähle Weiß. Dein Ebenenfenster sieht nun so aus (klick)!

- Erstelle nun eine neue, transparente Ebene:
- Ebene ---> Neu --->Ebene
- oder Tastenkürzel: MAC: "cmd - shift - N" // WIN: strg - shift -N
- Ein Fenster öffnet sich, übernehme folgende Einstellungen:


- Auf dieser neuen Ebene wird nun gezeichnet.
- Nun musst du aber, damit du sehen kannst WO du zeichnest, die weiße Farbfüllebene ausblenden. Dazu klickst du auf das Auge links neben der Ebene, hier (klick) habe ich es markiert. Klicke auf das Auge, sodass es nicht mehr zu sehen ist.
- Nun ist deine Arbeitsfläche nicht mehr weiß, sondern das Foto ist wieder zu sehen.

- Jetzt können wir anfangen zu Zeichnen. Wähle dazu die eben angelegte transparente ZEICHENEBENE aus. (Einfach drauf klicken - bitte darauf achten, dass sie beim zeichnen immer angewählt ist, sonst malst du auf deinem Foto herum und das bringt dir nicht besonders viel. ^__^)
- Dein Ebenenfenster sieht nun SO aus (klick).

- Wähle nun den Pinsel in deiner Werkzeugleiste. (Alternativ einfach "B" drücken)
- übernehme diese Einstellungen: 1px Pinsel, Normal, 50% Deckkraft.


- Wenn du ein Grafiktablett hast, wähle das rot markierte Symbol!
Hiermit kannst du die Deckkraft deines Pinsels mit der Druckempfindlichkeit deines Stiftes Regeln. Je fester du aufdrückst, desto dunkler wird dein strich.

- Nun beginnst du ganz einfach, mit deinem Pinsel die Konturen des Gesichtes/des Körpers/oderwasauchimmer nachzufahren. Ich habe mit dem Auge begonnen.

Wichtig: Lass dich nicht von "falschen Linien" irritieren - mal einfach drauf los! Selbst wenn du glaubst dieseunddiese Linie war jetzt total falsch - einfach nochmal drüber malen.
Je mehr und genauer du zeichnest, desto schöner wird es am Ende. Und nicht gleich aufgeben, Übung macht den Meister!
Ich bin übrigens absolut keine große Zeichnerin. Eigentlich nicht mal mehr eine kleine. Wenn ich das schaffe, schaffst du das also auch ;)

- Mein Bild sieht nun so aus:


- Blende nun mal kurz die weiße Farbfüllung wieder ein (Das Auge wieder "herklicken"), dann siehst du genau, was und wo du schon gezeichnet hast. Das sieht dann so aus (klick).

Jaja, so rangezoomt sieht es aus als hätte der kleine Bruder was gekritzelt. Macht aber nichts. ;)

- Zeichne weiter so viel du willst.


Schritt 2: Vom Foto zum Comic

Vielen von euch reicht vielleicht sogar der einfache Filter den ich hier verwende, für mich sah das aber noch nicht schön genug aus, deshalb habe ich noch'n bisschen weiter dran rumgebastelt.

- Also: Wähle dein Foto, also die HINTERGRUND-Ebene aus. Dupliziere diese mit "cmd-J" oder mit "Ebene ---> Ebene duplizieren."
- Die neue Ebene heißt nun "Hintergrund Kopie" oder eben so, wie du sie benannt hast. (Ebenen benennen ist übrigens wichtig, damit du dich später wieder auskennst!)
- Wähle nun "Filter --> Kunstfilter --> Tontrennung & Kantenbetonung". Ich weiß leider nicht, ob dieser Filter in früheren Photoshop Versionen verfügbar ist.
- Mein Filterfenster sieht so aus, übernehme die Einstellungen:


- Je nach dem wie groß dein Bild ist kannst du die Tontrennung etwas ändern. Mache es möglichst so, dass du ähnliche Abstufungen hast wie in diesem Bild. Du kannst es natürlich auch ganz anders machen, kommt ganz drauf an, was dir gefällt.
- Klicke nun auf OK.

Dein Bild sieht jetzt schon total fancy Comic-mäßig aus ^__^. Wem das reicht, kann die nächsten paar Schritte überspringen, mir persönlich aber gefallen die scharfen Kanten überhaupt nicht.

- Blende die ZEICHENEBENE aus. (Die Sache mit dem Auge anklicken, ihr wisst schon!)
- Wähle nun das Smudge-Tool, bzw. Wischfinger-Werkzeug:
- Wähle einen Schwellwert von ca. 50%, auch hier kannst du variieren. 100% ist aber definitiv zu viel, da verschmierst du alles nur ;)
- Jetzt fängst du an über die Kanten zu "malen". Ich fange mal an der Backe an, damit ihr seht, was ich meine.

Übrigens: Die Pinselgröße kann ich euch nicht vorgeben. Je nach dem wo du malst musst du sie anpassen. (Mit einem Rechtsknick auf das Bild kommst du schnell ans Pinselgröße ändern. Noch schneller geht es, wenn du ctrl und alt gleichzeitig gedrückt hältst, mit der Maus irgendwo aufs Bild klickst und den Cursor nach rechts oder links ziehst. Links wird dein Pinsel dann kleiner, rechts größer.)

- Meine erste gemalte Kante sieht nun so aus:


- Und jetzt zum lustigen Teil: das machst du jetzt überall ;). Auch hier gilt: Je genauer du zeichnest, desto schöner wird es. Du kannst natürlich auch mal einen größeren Pinsel verwenden und zwei, drei kanten gleichzeitig verwischen. Vor allem bei den Haaren verliert man schnell die Geduld. Da mach ich auch nicht jede Kante einzeln.
- Mein Bild sieht nun so aus:


- Jetzt wollen wir natürlich dass der Hintergrund verschwindet. Dazu maskieren wir ihn einfach raus.
- Als erstes aber müssen wir die Ebenenreihenfolge ändern. Und zwar von so nach so (klick). Einfach die Farbfüllebene UNTER unsere Hintergrund Kopie Ebene schieben (Anklicken und ziehen).
- Blende die Farbfüllebene wieder ein. (Auge!)

- Wähle nun die Hintergrund Kopie Ebene aus und klicke dann auf dieses Symbol im Ebenenfenster:
- Nun erscheint neben deiner Hintergrund Kopie Ebene eine Ebenenmaske. Das sieht nun so aus (klick)
- Klicke auf die Ebenenmaske (nicht nur auf die Ebene, sondern auf die MASKE!) um sie anzuwählen.
- Male nun mit deinem schwarzen Pinsel an der Kante des Kopfes. Das gemalte wird weiss.
- Auch hier: je kleiner der Pinsel, desto genauer kannst du außen herum malen. Ich habe es jetzt sehr grob gemacht:


Was passiert beim Maskieren?
- Du blendest bzw. schneidest gerade quasi den störende Wand im Hintergrund aus, sodass die weiße Farbfüllebene die darunter liegt zu Vorschein kommt. Wäre die Farbfüllebene darunter nun beispielsweise Blau, wäre das was du "wegmalst" auch blau. Die Bereiche werden aber nur ausgeblendet - falls du dich also vermalst tauscht du deinen Pinsel kurz in einen weißen aus (X drücken) und malst das, was du versehentlich hast verschwinden lassen, wieder ins Bild hinein.
Eine Ebenenmaske zu verstehen ist für blutige Photoshopanfänger wahrscheinlich nicht ganz einfach. Wer aber verstehen will sollte sich einmal das hier durchlesen: http://photoshop-lernen.de
- Male so viel weg, wie du möchtest bzw. wie es für dich gut aussieht. Du musst übrigens nicht den Standart-Pinsel nehmen. Probier ein bisschen mit deinen Pinselspitzen rum (auch mit runtergeladenen Brushes), so kannst du auch einige coole Effekte erzielen, auch wenn du mitten ins Bild reinmalst!
- Meines sieht nun so aus (klick).

So, eigentlich sind wir jetzt schon fertig!

Was du jetzt noch machen kannst:
- Dupliziere deine Zeichenebene. So sehen deine am Anfang gemalten Striche noch kräftiger aus!
- Oder du ziehst die duplizierte Zeichenebene einfach mal weg vom Körper, so wie ich es oft mache. Oder du machst beides ;)
- Wenn du deine Hintergrund Kopie Ebene duplizierst und sie auf "Negativ Multiplizieren" stellst wird sie noch mal aufgehellt, falls dein Comic dir zu dunkel ist.
- Was auch oft und gerne gemacht wird: Erstelle eine Blaue Ebene und stelle diese auf "Ausschluss" (Deckkraft runterregeln!!)
- und/oder erstelle eine Pinke Ebene und stelle diese auf "Aufhellen" (Deckkraft runterregeln!)


So ihr lieben, ich habe mein bestes gegeben. Jetzt seid ihr an der Reihe.
Ich würde mich übrigens riesig freuen, wenn ihr mich auf eurem Blog/Homepage erwähnt, falls ihr dieses Tutorial benutzt. Ich freu mich auch, wenn man mir zeigt, was ihr so gebastelt habt. ;)

Falls es jetzt noch offene fragen gibt könnt ihr mir gerne auf Formspring schreiben oder eine E-mail: [email protected]


Author: Angela von the3rdvoice 

Mein Name ist Angela, ich studiere nun schon im 4. Semester Fotodesign in München und - auch wenn man es mir nicht ansieht - bin ich tatsächlich schon zweiundzwanzig. Neben diesem ganzen Photoshopkram und dem Fotografieren bin ich natürlich auch hoffnunglos der Modewelt verfallen, wie wir alle eben.





53 opinions:

  1. Wow, das sieht echt super aus!! :)

    Übrigens ein super Tippfehler über den ich heute bestimmt den ganzen Tag lachen werde, ziemlich zum schluss hast du DENKKRAFT statt Deckkraft geschrieben! :D Hach herrlich, ich hätt beim Klausurenlernen auch gerne mehr Denkkraft ! ;D

    AntwortenLöschen
    Antworten
  2. ich liiiiebe es und muss das unbedingt mal probieren. danke dafür!!
    http://erdbeerplunder.blogspot.com

    AntwortenLöschen
  3. ICH HAB EH DEN COOLSTEN HEADER VON IHR BEKOMMEN- HA!

    http://angeladorn.com/tokobanner.jpg

    <3

    AntwortenLöschen
    Antworten
  4. Leonie Löwenherz15. März 2012 14:19

    Das sieht so toll aus! Ich glaube, das würde ich NIE hinkriegen!

    AntwortenLöschen
    Antworten
  5. Richtig schönes Tutorial! Normalerweise lese ich mir sowas selten durch, da ich meine Fotos meist ohnehin nicht bearbeite, aber das sieht so cool aus (hat mich auch damals schon begeistert, als Jana ihren Footer präsentiert hat), dass ich es tatsächlich ganz durchgelesen habe, obwohl ich Photoshop sowieso nicht habe (es würde sich für mich wohl nichtmal lohnen, die Testversion runterzuladen) und das auch bestimmt nicht so hinkriegen würde :D

    Liebe Grüße!

    AntwortenLöschen
  6. Kultur und Stil15. März 2012 14:32

    wow, ich finde das sieht sehr schön aus! ich hatte die testversion schon einmal, weiß jemand ob man die ein zweites mal herunterladen kann?

    xxx Anita

    AntwortenLöschen
  7. Finde ich auch wirklich super gelungen. Die Spiegelung im Armreif ist witzig :D
    Liebst
    Annie

    AntwortenLöschen
  8. thumbs up! <3

    AntwortenLöschen
  9. Der Header ist echt total gut! (:

    LG

    AntwortenLöschen
  10. shopaholic housewife15. März 2012 15:15

    Wow, tolle Tipps!! Merci :)

    http://shopaholichousewife.blogspot.com/

    AntwortenLöschen
    Antworten
    • la vie quotidienne15. März 2012 16:34

      woooww das sieht sehr toll aus!!!
      Gute Idee!

      xoxo aus München
      La Vie Quotidienne
      www.laviequo.com

      Löschen
  11. wunderschöner header & super erklärt!!
    werde ich auch mal ausprobieren!

    lg Anja

    AntwortenLöschen
  12. Toller Blog!
    Du hast eine Leserin mehr! Würde mich sehr über deinen Besuch freun... :)

    Danke für den tollen Post! Vielleicht probier ich das auch mal aus...

    http://www.nina-nici.com/

    AntwortenLöschen
  13. Ist interessant wie andere das machen, wirklich toll und ein paar Tipps nehm ich mit.
    Bin nicht so der Filterfreund, aber ich werde es mal ausprobieren!
    lg Spaanks.de

    AntwortenLöschen
  14. Wahnsinnig toller Post ;)
    wird demnächst bald ausprobiert

    AntwortenLöschen
  15. Wow! Das sieht wahnsinnig toll aus, super Post! :)

    AntwortenLöschen
  16. Vielen Dank für die Anleitung :) aber ich denke, ich bin trotzdem zu ungeschickt dafür :D

    Sabrina<3

    AntwortenLöschen
    Antworten
  17. Du schaust wirklich nicht aus wie 22 :D
    Mir gehts genauso, ich werde auch 22 und muss IMMER brav meinen Perso vorzeigen!

    AntwortenLöschen
    Antworten
    • Angela Dorian15. März 2012 19:46

      ich werde sogar beim bier kaufen danach gefragt ;) aber hey, irgendwann werden wir darum benieden, dass wir so jung aussehen!

      Löschen
    • wer mit 22 NICHT nach seinem Perso gefragt wird sieht mindesten aus wie 28,die haben nämlich ALLE die anweisung bis geschätze 25 zu fragen, eben weil man das nie so abschätzen kann. ich finde du siehst ganz normal 22jährig aus!

      Löschen
  18. Stephanie Hadrath15. März 2012 19:17

    Das sieht super aus!!!
    xxx aus Spanien
    stephaniehadrath.blogspot.com
    shbyhadrath.blogspot.com

    AntwortenLöschen
  19. tolles tutorial. ich bin bei weitem nicht so gut in photoshop aber einen versuch ists wert :)

    X, Annie
    anniewear.de

    AntwortenLöschen
  20. Shades of Nature15. März 2012 20:02

    Richtig toll erklärtes Tutorial! Werde ich mich sicherlich die Tage mal dran setzten, denn mein Blog benötigt dringend etwas mehr pepp!

    xo Kat by
    Shades of Nature

    AntwortenLöschen
  21. wow toll geworden <3
    hab nämlich schon, seit du's auf deinem Blog angekündigt hast, auf den Gast-Post gewartet ;)

    AntwortenLöschen
  22. richtig gut und richtig hilfreich!!
    ich war schon von anfang an begeistert von janas footer und auch von rominas header; werds jetzt auch mal versuchen

    AntwortenLöschen
  23. Ich wünsch mir grade ein Grafiktablett ...soooooooooo sehr!

    AntwortenLöschen
  24. und wie bekommt man die Pinselstriche im Hintergrund hin?

    AntwortenLöschen
    Antworten
    • Angela Dorian16. März 2012 11:04

      das sind nur brushes, diese hier: http://browse.deviantart.com/?qh=&section=&q=photoshop+paint+brush#/d13vc48

      Löschen
  25. Vielen Dank für die Anleitung, Ich werds direkt mal probieren. Hab bisher kaum mit dem Wacom gearbeitet und irgendwie eier ich mit dem Stift noch ziemlich unbeholfen rum.

    AntwortenLöschen
  26. indie by heart16. März 2012 01:10

    Nice tutorial! Too bad I don't have the photoshop. :>

    Satu
    - Indie by Heart

    Join Birthday Giveaway.

    AntwortenLöschen
  27. Vielen Lieben Dank! Habe schon auf deinem Blog gelesen, dass du hier einen Gastpost haben wirst und habe darauf gelauert. Sieht toll aus und ist wirklich nicht schwer, danke dafür. :)

    AntwortenLöschen
  28. guuutes tutorial und ein superhübsches bild!

    AntwortenLöschen
  29. Leonie Löwenherz16. März 2012 20:44

    Aaaah, jetzt hab ich all meinen Mut zusammengenommen und mir extra die Testversion runtergeladen (was eeewig dauert, das ist ja rieeesig!) :)
    Und was ist? In der Testversion gibts kein Wischfinger-Werkzeug. Habs dann mit dem Weichzeichner probiert, aber das wurde nix :(
    Jetzt probiere ich mal, dein Tutorial in GIMP zu übertragen, vermute aber dass ich bei der Tontrennung Probleme bekommen werde :/

    Drück die Daumen!

    AntwortenLöschen
    Antworten
    • welche Version von Photoshop ist das denn? bei der neusten (PS5) sollt das eigentlich dabei sein....

      Löschen
    • Angela Dorian20. März 2012 17:15

      der wischfinger ist immer irgendwo.. bei mir ist er beim weichzeichner-tool versteckt.

      Löschen
  30. vielen dank für diese super anleitung, angi! was hastn du fürn grafiktablet? und wie funktioniert das genau? kann man da photoshop drauf machen und dann mit touchscreen?

    AntwortenLöschen
    Antworten
    • Angela Dorian20. März 2012 17:14

      häää.. nein haha :D:D HAHA sorry ich musst grad so lachen ;)

      ein grafiktablett schließt du via usb an deinen rechner an, das ist dann wie eine maus - nur eben ein stift und ein paar anderen sachen :D

      oh gott wie süß die frage gerade war. :DD

      Löschen
  31. habe es mir viel schwerer vorgestellt.. sollte mal ein grafiktablet in meiner nähe sein, werde ich das sicher auch ausprobieren! :)

    AntwortenLöschen
  32. damn,bin noch gar nich auf die idee gekommen,einfach einen der filter zu probieren..habe meine erste digitale zeichnung "per hand" gemacht.hätte mirne menge arbeit gespart,wenn ich das vorher gesehen hätte.tolles tutorial,probiere ich GARANTIERT aus.

    AntwortenLöschen
  33. Hab es sofort ausprobiert aber ich finde niergenwo diesen Finger zum verwischen...:( Kann mir jemand erklären wie ich den hinbekomme??

    AntwortenLöschen
  34. den wischfinger müsste es beí jeder version geben!!
    bei mir muss man zum beispiel mit rechtsklick auf das weichzeichnersymbol (sieht aus wie ein tropfen) und dann kann man den wischfinger auswählen. also einfach mal danach suchen!

    AntwortenLöschen
  35. in der werkzeugleiste; weichzeichner (tropfensymbol) - scharfzeichner (dreiecksymbol) - wischfinger (finger^^).

    AntwortenLöschen
  36. wow dankeschön :-) genau sowas suche ich seit monaten

    AntwortenLöschen
  37. melina devotion20. März 2012 16:18

    an anonym.
    diese tropfen da. drück dort mal länger drauf ; dann kommt rechts daneben auch die auswahl zum wischfinger.
    musste auch erst eine weile suchen :)

    AntwortenLöschen
  38. Hast du noch mehr von diesen tollen Bilder??:)

    Echt suuuuupeeeer!!! <3

    AntwortenLöschen
  39. Hast du noch mehr von diesen tollen Bilder??
    Dieses ist nämlich echt suuuuupeeeer!!! <3

    liebe Grüsse Gloria B

    AntwortenLöschen
  40. hat alles super funktioniert :)
    aber wie kann ich die duplizierte zeichenebene wegziehen vom körper ??

    lg

    AntwortenLöschen
  41. Bin absoluter Noob in Photoshop. Ist aber echt super erklärt, habs einigermaßen hinbekommen :)
    DANKE, Angela :)
    Aber mich würd auch mal interessieren wie das mit der Zeichenebene vom Körper wegziehen funktioniert.. DAS hab ich nicht verstanden x)
    Grüßeee <3

    AntwortenLöschen