Praxistipps fürs Pixeln. Bitte Einleitung lesen :-)

[Leana]

http://www3.pic-upload.de/05.07.09/8lqa8.png (http://www.pic-upload.de/view-2481049/-berschrift.png.html)

Hallo Com,

viele Probleme beim Pixeln entstehen dadurch, dass man nicht weiß, wie man am besten vorgeht. Zwar gibt es etliche Pixeltutorials, doch werden dort oft nur Basics erklärt. Deshalb habe ich mir überlegt, dass eine Art Pixelratgeber vielleicht nicht schlecht wäre und diesen Thread eröffnet.

Wie soll das Ganze funktionieren? Nun ja, zunächst sind natürlich Praxistipps gefragt. Wenn ihr bereit seid, einen solchen zu posten, dann seid so nett und benutzt folgende Einleitung:

Thema:
Schwierigkeitsgrad: -> Anfänger, fortgeschritten, Experte
Grafikprogramm: -> Name und Versionsnummer angeben

Bei Anfängertipps die Vorgehensweise bitte in Form einer Schritt für Schritt Anleitung beschreiben, denn viele Einsteiger können noch nicht richtig mit einem Grafikprogramm umgehen. Bei den anderen Schwierigkeitsgraden ist es selbstverständlich ok, wenn ihr gewisse Grundkenntnisse voraussetzt.

Zur besseren Übersicht wird jeder Pixeltipp von mir in einer Liste (eigentlich 3 Listen ;) ) verlinkt. Gibt es zu einem Thema mehrere Tipps der gleichen Kategorie, so werden sie durchnummeriert.

WICHTIG: Rumgemotze an einem Praxistipp ist unerwünscht! Gefällt euch ein Tipp nicht, so könnt ihr jederzeit eine andere Lösung posten.

Auch bei konkreten Pixelproblemen könnt ihr euch hier melden. Beschreibt aber bitte das Problem so genau wie möglich, denn mit Aussagen wie z.B. „Ich kriegs nich hin, kann mir wer helfen?“ kann keiner was anfangen J

WICHTIG: Pixelaufträge müssen weiterhin in den Pixelthread gepostet werden!

Außerdem gelten hier folg. Regeln:

- Kein Spam oder andere unnötige Kommentare!
- Da nicht jeder ein schnelles DSL hat, Bilder bitte nur im PNG-Format posten.
- Bilder, die die Maximalgröße von max. 640x 480 überschreiten, bitte in einen Spoiler packen.

Für Fragen oder Anregungen bitte den Fragenthread (www.multimediaxis.de/showthread.php?p=2366096#post2366096)benutzen.


Anfängertipps:
- Faceset umfärben (mit Gimp) (http://www.multimediaxis.de/showpost.php?p=2366093&postcount=2)
- Faceset umfärben2 (mit Photoshop CS3) (http://www.multimediaxis.de/showpost.php?p=2385994&postcount=3)
- Pixeltutorials (http://www.multimediaxis.de/showpost.php?p=2389680&postcount=4)


Tipps für Fortgeschrittene:
- Das erste Haus - Grundaufbau (http://www.multimediaxis.de/showpost.php?p=2509473&postcount=6)


Expertentipps:

[Leana]

So, ich will auch gleich mit gutem Beispiel vorangehen ;)

Thema: Faceset umfärben
Schwierigkeitsgrad: Anfänger
Grafikprogramm: GIMP 2.6.6

Hinweis: Die hier vorgestellte Methode funktioniert auch mit anderen Grafikprogrammen. Zwar heißen die Befehle in den meisten Fällen anders, aber die Vorgehensweise bleibt.

Ein häufiger Wunsch im Pixelthread ist das Umfärben der Haare eines Faces bzw. Facesets. Am Beispiel der grünumrandeten Rothaarigen
http://www3.pic-upload.de/05.07.09/ackp7w.png (http://www.pic-upload.de/view-2481065/Charaktere-PDS.png.html)
möchte ich euch die von mir bevorzugte Methode vorstellen:

1. Markieren des gewünschten Bereiches:
- Nach dem Öffnen die Darstellung vergrößern, indem 4-5 mal die Plus-Taste betätigt wird.

- Im Fenster Werkzeugkasten den Zauberstab auswählen
http://www3.pic-upload.de/05.07.09/kicuup.png (http://www.pic-upload.de/view-2481061/Umf-rben_Bild2.png.html)

und in der unteren Fensterhälfte dessen Modus auf Auswahl hinzufügen umstellen.

http://www3.pic-upload.de/05.07.09/cpbg5a.png (http://www.pic-upload.de/view-2481076/Umf-rben_Bild3.png.html)

Über die Eigenschaft Schwelle wird die Wirksamkeit des Zauberstabs eingestellt. Hier muss man ein bisschen experimentieren, da der „optimale“ Wert von der Farbscala des gewünschten Bereiches abhängt. Ist der Wert zu hoch, werden nämlich auch Pixel markiert, die nicht geändert werden sollen. In diesem Modus kann der Schwellenwert übrigens jederzeit verändert werden, ohne dass vorherige Markierungen verloren gehen. Bei meinem Beispiel habe ich den Hauptteil mit der Einstellung 25,5 markiert und den Rest mit dem Schwellenwert 12,8.

- Nun muss man nur noch einpaar Pixel anklicken ;) Irgendwann sollte das ungefähr so aussehen
http://www3.pic-upload.de/05.07.09/z5cyk8.png (http://www.pic-upload.de/view-2481070/Umf-rben_Bild4.png.html)

Habt ihr euch verklickt, so könnt ihr das mit STRG+Z wieder rückgängig machen.

- Nicht immer lässt sich der gewünschte Bereich vernünftig mit dem Zauberstab markieren. Über das Lassowerkzeug („freie Auswahl“) kann die Auswahl aber problemlos korrigiert werden.

2. Umfärben:
- Über das Menü Bild den Farbmodus auf RBG umstellen.

- Über Ebene/Neue Ebene eine weitere Ebene mit transparentem Hintergrund erstellen.

- Im Fenster Werkzeugkasten auf das schwarze Kästchen (Vordergrundfarbe) klicken und im zugehörigen Dialogfenster die gewünschte Farbe einstellen.
http://www3.pic-upload.de/05.07.09/2ldv7.png (http://www.pic-upload.de/view-2481082/Umf-rben_Bild5.png.html)

- Im Fenster Ebenen, Kanäle...
http://www3.pic-upload.de/05.07.09/79t4fc.png (http://www.pic-upload.de/view-2481092/Umf-rben_Bild6.png.html)

auf das Auge der untersten Ebene und anschließend auf die Bezeichnung der anderen Ebene klicken, so dass nur noch der transparente Hintergrund mit der Auswahl sichtbar ist.

- Das Füllwerkzeug (Fenster Werkzeugkasten) auswählen
http://www3.pic-upload.de/05.07.09/coq1py.png (http://www.pic-upload.de/view-2481095/Umf-rben_Bild7.png.html)
und in den markierten Bereich klicken.

- Den Ebenenmodus (Fenster Ebenen, Kanäle...) auf überlagern stellen und die unterste Ebene wieder einblenden, indem man auf das Kästchen klickt, wo vorher das Auge sichtbar war.

- Auf den Namen der untersten Ebene klicken und über das Menü Farben den Dialog Entsättigen öffnen.
http://www3.pic-upload.de/05.07.09/c9kwb.png (http://www.pic-upload.de/view-2481101/Umf-rben_Bild8.png.html)

Die Auswahl der Grauwertbestimmung hat Auswirkungen auf die Intensität der neuen Haarfarbe.
http://www3.pic-upload.de/05.07.09/o45mlv.png (http://www.pic-upload.de/view-2480899/Umf-rben_Bild9.png.html)

- Zum Schluss über Bild/Bild zusammenfügen beide Ebenen zusammenfassen und den Farbmodus auf indiziert zurücksetzen.

Ich hoffe, ich habs verständlich erklärt. Falls nicht -> einfach melden :)

[Xia]

Thema: Umfärben 2
Schwierigkeitsgrad: Anfänger/leicht fortgeschrittene
Grafikprogramm: Adobe Photoshop CS3

Da es immer noch viele Anfragen zum umfärben gibt, mache ich noch ein Tutorial für's umfärben. Diesesmal mit Photoshop CS3. So sieht mein Test zuerst aus:

http://img-up.net/img/bEFOREmDjJ5EkS.jpg

1. Schritt
Zuerst stellst du das Bild auf 16. Millionen Farben. Mache einen neuen Layer und markiere [mit diesem Makierkasten] das, was du umfärben möchtest. Ich habe ein Faceset als Beispiel genommen und werde bei diesem die Haare, Augen und den Kragen umfärben. Wenn man alles makiert hat, sucht man sich eine beliebige Farbe aus. (Ich nehme rosa)

2. Schritt
Nun musst du mit deiner Farbe alles markierte überdecken. Fertig? Dann kannst du dir aussuchen, wie es aussehen soll. Wenn man rosa haben will, nimmt man rot und wählt im Menü 'Hue' aus. Man kann was das angeht viel herum experimentieren.

3. Schritt
Das Faceset ist nun fertig. Man setzt das Bild wieder runter auf 265 Farben. Das Ergebniss ist hoffentlich befriedigend. - Und wie ich schon gesagt habe, kann man das bei allem am Faceset machen. Auch bei dem Gesicht.

So sieht es bei mir am Ende aus. (Wie schon gesagt habe ich Haare, Augen und Kragen gefärbt.)

http://img-up.net/img/afterSv4VQ.jpg

Da ich das Werkzeug etc. nicht so detailiert erkläre, ist dieses Tutorial für Anfänger die CS3 neu haben nichts. Falls man es schon 1 Woche bestitzt, dann ist dieses Tutorial leicht umzusetzten.

- Posen zu Charakteren des 2k(3) pixeln, folgt morgen -

[Leana]

Thema: Pixeltutorials
Schwierigkeitsgrad: Anfänger
Grafikprogramm: -

So, wie versprochen eine Übersicht über interessante Pixeltutorials.
Hinweis: Von manchen Tutorials gibt es mehrere Versionen, hier ist aber stets nur die aktuellste verlinkt. Weitere Pixeltuts findet man btw. im Tutorial-Sammelthread (http://www.multimediaxis.de/showthread.php?t=68025).

- Charas etc.:
Thema: Charaktere, Posen, Objekte u.a.
Autor: Taleph
Link: http://forum.rpg2000.4players.de/phpBB3/viewtopic.php?f=3&t=87643&hilit=Taleph+tutorial

Thema: Charset
Autor: Dragon Emperor, übersetzt von Silence
Link: http://www.rpga.info/forum/showthread.php?t=42800

Thema: Charas für RMXP
Autor: HamsterMan
Link: http://www.neoseeker.com/forums/22121/t951253-hamstermans-spriting-tutorial-v2-currently-unfinished/


- Chipset
Thema: Gras, Holz, Wege
Autor: Celen
Link: http://www.multimediaxis.de/showthread.php?t=100889&highlight=chipset+tutorial

Thema: Felswände
Autor: Celen
Link: http://www.multimediaxis.de/showpost.php?p=547603&postcount=72

Thema: Metallwände
Autor: V-King
Link: http://www.multimediaxis.de/showpost.php?p=1097911&postcount=41

Thema: gepflasterte Böden
Autor: V-King
Link: http://www.multimediaxis.de/showpost.php?p=1098465&postcount=47

Thema: Laminatboden
Autor: V-King
Link: http://www.multimediaxis.de/showpost.php?p=1098471&postcount=49

Thema: Gras, Holz, Stein u.a.
Autor: unbekannt
Link: http://pixel-zone.rpgdx.net/shtml/tutorials.shtml, Bereich Minitutorials


- Diverses:
Thema: Bäume
Autor: Celen
Link: http://www.multimediaxis.de/showpost.php?p=469625&postcount=31

Thema: Menürahmen, Prozentleiste
Autor: Shadow of Raven
Link: http://www.multimediaxis.de/showpost.php?p=663574&postcount=142

Thema: Felsen
Autor: Lil_Lucy
Link: http://upload.npcfighter.de/files/26/493Felsen_Tutorial.pdf

Thema: Bilder aus dem Internet als Makergrafik
Autor: Ascare
Link: http://www.multimediaxis.de/showthread.php?t=104270

[Spongie *W*]

@Xia: Deine Bilder sind leider down.
Lade sie doch wieder hoch - Bei www.imagebanana.com zum Beispiel. Die sind da sehr zuverlässig.

[Arnold]

Das erste Haus - Grundaufbau
Vorwort:
So, als erstes beginnen wir mit einem stinknormalen Haus. Lernt was aus diesem Tutorial.^^

Über Programme:
Hier möchte ich sagen man kann mit absolut jeden Programm ein Haus pixeln von Photoshop bis Paint. Ein Raster wäre von Vorteil damit man nicht so klein pixelt das man nicht mehr damit mappen kann. Ich werde Paint benutzen ohne Raster.

ALSO:
Thema: Standardhaus pixeln
Schwierigkeitsgrad: Fortgeschrittener Anfänger
Grafikprogramm: Paint

1.Schritt:
Wir wählen das Rechteck aus:
http://npshare.de/files/b300351b/Tool-Paint.PNG

2.Schritt:
Wir nehmen einen dunklen Farbton je nachdem in welcher Farbe man die Ziegel pixeln will und machen daraus ein 16x16-Tile. Dann mit einen hellen Farbton füllen
Ungefähr so:
http://npshare.de/files/ff4da923/16x16Tile.PNG

3.Schritt:
Wir nehmen nun den normalen Stift und pixeln mit den dunklen Farbton den wir auch für die Umrandung genutzt haben ein par Ziegel ein mit jeweils 3 Pixel Höhe.
Etwa so:
http://npshare.de/files/18c68f45/16x16TilemitZiegelrand.PNG
4.Schritt:
Nun sollen die Ziegel dreckiger wirken und somit auch realitätsgetreu ihr erinnert euch an die Füllfarbe? Wir nehmen nun einen ein wenig dunkleren Ton als die helle Füllfarbe.
Im nächsten Bild seht ihr was ich meine...(siehe 5.Schritt)

5.Schritt:
Wir kopieren das 16x16-Tile und fügen das nebeneinander ein damit am Ende 48x48 rauskommt. So:
http://npshare.de/files/6c8143de/3.PNG

6.Schritt:
Das sieht natürlich langweilig aus, deswegen nehmen wir jetzt die Ziegel am Rand und pixeln die in eine andere Farbe das gleiche auf der anderen Seite...dann sollte das so aussehen:
http://npshare.de/files/875282ea/Rand-Hausunten.PNG
7.Schritt:
Recht und links werden wir eine Abgrenzung pixeln am besten durch ein Holztile das ein bis zwei Pixel weiter runter geht als die Ziegel. Prinzip ist einfach Umrandung in dunkler Farbe dann unten dunkel und nach oben hin heller...dann auf die andere Seite kopieren dann sieht das so aus:
http://npshare.de/files/e2252aea/Mit%20Holztileyay.PNG
8.Schritt:
Nun das Dach erstmal mit schwarz ungefähr pixeln.
Es sollte vorne wie ein Dreieck hochgehen dann ein par Pixel nach hinten und das gleiche wie vorne...ach ich weiß es klingt blöd seht am besten selbst:
http://npshare.de/files/36bc0607/Dachohneiwas.PNG

9.Schritt:
Nun ein par Ziegel wie bei einem Dach eben. Die sollten immer zwei bis drei Pixel breit gehn...links immer hell rechts dunkel muss es sein. Naja aber ersteinmal ohne Farbe:
http://npshare.de/files/91e69ce7/Ziegelaufgemalt.PNG
10.Schritt:
Nun nehmen wir einen dunklen Farbton undzwar in der Farbe in der ihr es möchtet. nur die Umrandungen die bisher schwarz sind färbt ihr damit:
http://npshare.de/files/a33e7fdc/1.PNG
11.Schritt:
Nun füllen wir links mit einen hellen Ton und rechts mit einen dunklen.
Die in der Mitte färbt ihr noch heller als der Ton rechts, weil da der Lichteinfall ist.
Nun sieht das so aus:
http://npshare.de/files/029f185d/2.PNG

12.Schritt:
Nun könnten wir das so lassen aber es wirkt zu eintönig, deswegen nehmen wir je welcher Farbton einen etwas dunkleren wie bei den grauen Tiles.
Diesmal nicht mit Copy&Paste das wird alles per Hand gemacht, sonst sieht das blöd aus.
So sollte das aussehen:
http://npshare.de/files/56dd5629/Dachgeshadet.PNG
13.Schritt:
13.1Nun müssen wir die freie Fläche befüllen mit den grauen Tiles...auf ins vergnügen...einfach kopieren und einfügen. ;D
Dann die engsten Stellen dunkel machen.
13.2Fast fertig nun werden wir unten bei den grauen Tiles auf Grund richtigen Shadings drei Reihe der Ziegel dunkler machen von unten nach oben immer heller
So sollte es aussehen:
http://npshare.de/files/7d704c92/Fertigtadatadatada.PNG


Nachwort:
Mehr mache ich erstmal nicht dran da würden noch Türen und Fenster fehlen...