Photoshop-Tutorial (bilderintensiv + regelmäßige Updates)

Bin gefragt worden, ob ich nicht ein einsteigerfreundliches und leicht verständliches Photoshop-Tutorial machen kann.
An sich, klar. Unter den Grafikprogrammen ist gerade Photoshop das am weitesten entwickelte Profi-Programm, und deswegen schert sich Adobe auch wenig um den jungen Zeichner, der vor seinem PC sitzt und bei aller Liebe und Anstrengung kein Stück von dem Proggi versteht – es wurde ja für Profis aus der Grafik- und Werbebranche entwickelt.

Das heißt jetzt aber nicht, daß der „Ottonormalnutzer“ es nicht auch lernen könnte, mit Photoshop umzugehen. Wenn man die Grundzüge nämlich erstmal kennengelernt hat, ist das Programm sogar recht einfach zu verstehen.
Die meisten Tutorials setzen ein gewisses Grundwissen allerdings voraus, und dann nützt das Tutorial dem blutigen Anfänger auch nicht. Deswegen werd ich versuchen, erstmal ein paar oft gehörte, aber nicht richtig verstandene Begriffe zu erklären.
Ich schreibe hier für Photoshop 7, wenn in einer früheren Version irgendwas anders sein sollte, genügt eine kleine Nachricht und ich trag das dann nach.

INHALTSVERZEICHNIS

Pixelbilder
Vektorbilder
Unterschiede zwischen Vektor- und Pixelbildern, bekannte Programme
Richtiges Einscannen
Vorbereiten des Bildes für die Colorierung
Ebenen, restliche Vorbereitung für's Colorieren

Download des hier verwendeten Beispielbildes - 2,5 Mbyte, gut zum Mitmachen geeignet
Hier klicken

So los geht's

Der erste Punkt:

Was IST Photoshop überhaupt und wozu kann ich es benutzen?
Photoshop ist ein Programm zur Foto- und Bildbearbeitung, das mit Pixelbildern arbeitet.

…Pixelbilder?
Im Gegensatz zur „echten“ Bilderwelt gibt es zwei verschiedene Arten von Bildern in der digitalen Form: Die Pixelbilder und die Vektorbilder.
Ein Pixelbild besteht aus vielen, einzelnen Bildpunkten, den Pixeln. Ein Pixel kann immer nur eine Farbe tragen und ist immer gleich groß. Aus umso mehr Pixeln ein Bild besteht, desto größer und detaillierter ist es.
Hier zwei Mal dasselbe Bild mit verschieden großen Anzahlen an Pixeln. (Sorry daß ich gezeichnete Bilder nehm, aber bei Fotos gehts net so gut)

[Blockierte Grafik: http://thundermaster.de/ps7tut/krali-hoch.jpg][Blockierte Grafik: http://thundermaster.de/ps7tut/krali-niedrig.jpg]

So das war jetzt nicht viel, aber wenn das einigermaßen ankommt und verstanden wird, führ ich das gern weiter bis man mit dem Colorieren komplett durch ist

Jetzt zu den Vektorbildern:

Vektorbilder unterscheiden sich durch einige wichtige Eigenschaften von den Pixelbildern. Sie werden durch spezielle Kurven beschrieben, die im Prinzip wie die Graphen einer mathematischen Funktion aufgebaut sind und auch ähnlich berechnet werden. Zeichnet man also in einem Vektorprogramm eine Linie, so wird im Hintergrund die dazugehörige „Formel“ vom Programm berechnet.
Dadurch lassen sich durch Vektoren Grafiken erstellen, die beliebig weit vergrößerbar sind, ohne an Qualität zu verlieren – da sie nicht an Pixel, sondern mathematische Formeln gebunden sind.
Wenn Vektorbilder aber nicht durch Pixel, also Bildpunkte dargestellt werden, wie kann man sie dann weiterverwenden, zum Beispiel um ein Vektorbild ins Internet zu stellen? Dazu gibt es eine Technik, die man „Rastern“ nennt. Dabei tut das Programm so, als ob es die Vektoren auf ein Blatt Papier „klebt“ und dann abfotografiert. So erhält man ein (Pixel-)Abbild vom Vektorbild und kann es weiterverarbeiten.

Hier ein Ausschnitt einer Vektor-Karte in Originalgröße (100%) und daneben in starker Vergrößerung (18.000%) der markierte, blaue Kreis - keine Pixel zu sehen, kein Verlust an Schärfe. Das ist der Vorteil von Vektorgrafiken.

[Blockierte Grafik: http://thundermaster.de/ps7tut/vektor1.jpg][Blockierte Grafik: http://thundermaster.de/ps7tut/vektor2.jpg]

Also ^o^

Photoshop ist in allererster Linie ein Programm zur Bearbeitung von pixelbasierten Bildern, aber es gibt Ausnahmen:

- Pfade
- Schriften

Die Pfade sind Vektorkonturen, die man um Bilder legen kann, um z.B. einen Teil auszuschneiden. Nicht mit der normalen "Auswahl" verwechseln. (erklär ich später noch, die sind nicht wirklich wichtig beim Colorieren)

Sobald man in Photoshop Text eingibt, wird der durch Vektoren angezeigt, nicht direkt als gepixelte Schrift - also fast, als würde man in Word schreiben. Erst, wenn man Effekte auf die Schrift legen will, möchte Photoshop den Text rastern, also in Pixelform umwandeln. Klar, wie soll man auch auf eine praktisch nur durch Funktionen existierende Form irgendwelche Effekte anwenden.

Zum richtigen Erstellen von Vektorbildern benutzt man aber ein extra dafür geschriebenes Programm. Eine kleine Übersicht über die Bekanntesten:

Vektorprogramme
- Corel Draw (.cdr)
- Adobe Illustrator (.ai)
- Quark XPress (.qxd)
- Microsoft Word (.doc)

Pixelbasierte (Grafik-)Programme
- Corel Photo-Paint (.cpt)
- Adobe Photoshop & Photoshop Elements (.psd)
- Jasc Paint Shop Pro
- Microsoft Paint (.bmp)
- Corel Painter
- OpenCanvas

Das bedeutet:
Für jede Aufgabe gibt es passende Programme, die an die jeweilige Arbeitssituation angepaßt sind. Klar, man könnte "alles in einem" programmieren, aber das wär extrem verbuggt und schlecht zu bedienen.
Daher die Unterscheidung, und das bedeutet für das Umgehen mit Zeichnungen am PC: Pixelbasierte Programme verwenden.

Vektorgrafiken werden z.B. bei Logos für Firmen benutzt, die in hoher Qualität vorliegen müssen und bei Bedarf auch auf riesige Größen aufgeblasen werden können. Dazu sind Vektordateien verlustfrei, im Gegensatz zu z.B. JPEG, das bei der Komprimierung Qualität einbüßt.

Man benutzt Vektorproggis auch zum layouten. Das bedeutet, eine Webseite oder zum Beispiel eine Zeitung grafisch zu entwerfen, ihr also ein "Gesicht", ein Aussehen, zu geben.

@Jolty: Ich meinte, zum Layouten die Vektorproggis zu nehmen In Photoshop wird das wohl kaum einer machen oO Normale Grafiken auf der Seite sind ja meistens Pixel, da kommt man ja net drumrum

Freehand hab ich noch nie live gesehen und Artpro grad zum ersten Mal gehört o.o muß die oben dann noch reineditieren. Aber thx

Okay, weiter gehts.

Jetzt wissen wir also, daß wir zum Bearbeiten und letztendlich Colorieren unseres Bildes ein pixelbasiertes Grafikprogramm benutzen.

Dann sollten wir uns jetzt ein kleines, armes, auf Papier gezeichnetes Opfer suchen *grins*
In diesem Fall zwei junge Schwaben
[Blockierte Grafik: http://thundermaster.de/ps7tut/beisp1.jpg]

Ob wir jetzt eine Skizze oder ein wunderschön gezeichnetes Bild benutzen, ist für's Erste egal.
Zuerst müssen wir das Bild einscannen, und da ist scannen nicht gleich scannen.

Bei Bildern, die am PC coloriert werden sollen, empfehle ich einen Graustufenscan mit 300dpi Auflösung.
Dadurch ist das Bild schön groß und einfacher zu bearbeiten, als bei einem kleinen Bild. Zusätzlich sieht das Resultat um einiges besser aus. Nicht vergessen, mit dem Auswahl-Tool des Scannerprogrammes den Bereich auszuwählen, den man wirklich scannen will.

Warum schwarzweiß und nicht gleich ein Farbscan?
Naja, das hängt mit der Qualität des Scanners zusammen. Bei manchen kommt das, was eigentlich schwarz sein soll, dunkelgrün oder navyblau raus - und das bedeutet, nach dem Scannen noch unnötiges Nachbearbeiten. Um sowas zu vermeiden, scannen wir das Bild in schwarzweiß und ändern den Farbmodus später.

Hier ein Screenshot aus meinem Scannerprogramm. Die jetzt wichtigen Einstellungen sind mit rot markiert.
[Blockierte Grafik: http://thundermaster.de/ps7tut/scannen.jpg]

ZUSATZ

Hab von Ginome (dankeschön :)) Screenshots vom photoshop-eigenen Scanprogramm bekommen. Hier die Bilder.

Hier ist das Programm zu finden
[Blockierte Grafik: http://thundermaster.de/ps7tut/default1.jpg]

Und so schaut die Oberfläche aus, wieder mit beiden wichtigen Punkten markiert.
[Blockierte Grafik: http://thundermaster.de/ps7tut/default2.jpg]

Hat man alles so eingestellt, wie man es möchte, scannt man das Bild also ein.

So, jetzt haben wir also unser Bild eingescannt, und das Resultat sieht in etwa so aus (achtung, groß).
[Blockierte Grafik: http://thundermaster.de/ps7tut/bereit.jpg]

Jetzt bringen wir das Bild erstmal so in Form, daß wir es am Einfachsten colorieren können.

Zuerst wechseln wir vom Graustufen-Modus in den RGB-Modus, das geht so:
[Blockierte Grafik: http://thundermaster.de/ps7tut/rgb.jpg]

Eigentlich könnte man ja jetzt loslegen, oder? An sich ja, aber wir wollen das Bild noch etwas mehr herrichten. Euch sind die vielen Bleistiftlinien im Bild aufgefallen? Ja? Die sind auch unerwünscht, wenn das Bild sauber aussehen soll.
Also entfernen wir sie, und zwar mithilfe der Regelung für Helligkeit und Kontrast. Manche Zeichner verwenden lieber andere Hilfsmittel, aber ich mag diese Methode, einfach und effektiv.
Hier zu finden:
[Blockierte Grafik: http://thundermaster.de/ps7tut/hk.jpg]

Dieses Fenster öffnet sich:
[Blockierte Grafik: http://thundermaster.de/ps7tut/hk_fenster.jpg]

Zieht das Fenster so hin, daß ihr euer Bild sehen könnt. Regelt das Bild nun insgesamt kontrastreicher und heller. Das Ergebnis:
[Blockierte Grafik: http://thundermaster.de/ps7tut/hk_fertig.jpg]

Nächstes Mal: Die Colorierung XD

Hab noch was vergessen.

Naowri:
Bei Scannern gilt wirklich, daß die Billigteile meist nix taugen. Ich hab einen Canon Lide 50 USB 2.0 für 100 Euro und der scannt erstklassig. Gibt aber auch für etwa die Hälfte solide Scanner, aber auf jeden Fall sollte er von einer bekannten Marke sein, z.B. HP, Canon, Epson oder so.

Allgemein:
Ich könnte das Bild, das ich hier verwende, in der Originalgröße hochladen und zur Verfügung stellen, falls das jemand zum "Mitmachen" benutzen möchte. Interesse?

So

Download (2,5 Mbyte)

Sorry für den Doppelpost, aber es geht weiter

Die Colorierung
Um in Photoshop gemütlich und ohne böse Überraschungen colorieren zu können, kann man sich eine nützliche Funktion zunutze machen: Die Ebenen.
Ebenen kann man sich wie verschiedene Folien vorstellen, die über das Bild gelegt werden. Mit allen zusammen ergibt sich dann das komplette Bild. Wir benutzen die Ebenen, um die Farbe, die Outlines, die Schattierung und den Hintergrund zuerst unabhängig voneinander zu bearbeiten, um nicht durcheinander zu kommen.

Rechts von eurem Bild befindet sich ein Kasten, der ähnlich wie dieser aussieht:
[Blockierte Grafik: http://thundermaster.de/ps7tut/ebenen.jpg]
(Ist dieser nicht vorhanden, klickt auf Fenster -> Ebenen, um den Kasten einzublenden.)

Wichtig für uns sind jetzt folgende Einstellmöglichkeiten:
Pull-Down Menü links - Im Moment steht dort "normal". Später läßt sich hier einstellen, wie sich die ausgewählte Ebene in Relation zu den anderen verhalten soll.
Deckkraft - bestimmt, wie transparent die ausgewählte Ebene ist.
Das "Auge" - hier läßt sich die ausgewählte Ebene ein- und ausblenden.

Jetzt doppelklicken wir auf "Hintergrund", das neben der Miniatur unseres Bildes steht und kursiv geschrieben ist. Es öffnet sich folgendes Fenster:
[Blockierte Grafik: http://thundermaster.de/ps7tut/neue_ebene.jpg]

Wir sind jetzt dabei, aus unserem normalen Bild mit nur dieser einen "Hintergrundebene" eines mit mehreren zu machen. Dazu ist es praktisch, aus der "Hintergrundebene" eine normale Ebene zu machen. Stellt alles wie folgt ein:
[Blockierte Grafik: http://thundermaster.de/ps7tut/ebene_1.jpg]

Welchen Sinn hatte die Aktion jetzt?
Der Name dient dazu, die Ebenen später unterscheiden zu können, wenn man viele davon erstellt hat. Denselben Zweck erfüllt die Farbe. Ich stell aus Gewohnheit die Outlines-Ebene immer auf
Grau.
Und das multiplizieren? Mit dieser Einstellung haben wir festgelegt, daß alle Farben, die wir später auf einer anderen Ebene auftragen, mit denen unserer ersten Ebene multipliziert werden.
Beispiel: weiß x rot = rot, schwarz x rot = schwarz.
Dadurch können wir später sehr bequem colorieren, aber das seht ihr dann, warum diese Einstellung so sehr sinnvoll ist.

[Hinweis: wahlweise kann man auch über den Befehl "Ebene -> Neu -> Ebene aus Hintergrund" in dieses Dialogfeld gelangen. Doppelklickt ist nur komfortabler.]

Nun haben wir also unsere erste Ebene mit den Outlines. Jetzt erstellen wir eine zweite, auf die wir die Farbe auftragen werden.
[Blockierte Grafik: http://thundermaster.de/ps7tut/neue_farbebene.jpg]
[wahlweise kann man auch den Befehl STRG + Shift + N benutzen.]

Es öffnet sich wieder ein Einstellfenster, in das wir Folgendes eintragen:
[Blockierte Grafik: http://thundermaster.de/ps7tut/ebene_2.jpg]

Wenn ihr jetzt nach rechts schaut befindet sich über der Ebene Outlines jetzt eine Ebene namens Farbe. Wir nehmen die Farb-Ebene und ziehen sie unter die Outlines-Ebene, damit die Einstellung "Multiplizieren" so wirken kann, wie wir das wollen.
[Blockierte Grafik: http://thundermaster.de/ps7tut/verschieben.jpg]

Habt ihr alles richtig gemacht, sollte euer Arbeitsbereich in etwa so aussehen:
[Blockierte Grafik: http://thundermaster.de/ps7tut/ready.jpg]