Tutorialbeschreibung

Pixelart - Einführung

Pixelart - Einführung

Hier werde ich euch erklären, wie man ein Bild á la Pixelart erstellt. Es wird ein sehr langes
Tutorial sein, also solltet ihr ein wenig mehr Zeit hiermit investieren.
Aber das sollte euch nicht abschrecken!

Begriffe, die ich öfter erwähne:

2er Paar, Diagonale 2er Kästchen:
das untere: einser Kästchen diagonal:

Bilder


Kommen wir zur Sache:

Öffnet zuerst einmal eine neue Datei. Die Größe ist eigentlich egal, allerdings müsst ihr bedenken:
So groß wie eure Datei ist, so groß ist auch euer Pixelart, denn dieses könnt ihr im Nachhinein
nicht mehr vergrößern oder verkleinern!! Da ihr jedes einzelne Pixel zeichnet!

Ich habe 800x600 (72 DPI) gewählt.

Jetzt stellt ihr euch mal alles ein, und zwar werden wir bei diesem Tutorial hauptsächlich
den Buntstift brauchen. .
Bilder

Ebenso werdet ihr euch an den Navigator orientieren müssen, wo ihr gerade seid. Denn
das Nächste, was wir machen, ist, zoomt so weit in das Dokument hinein, wie es geht.
Bilder

Wir wollen uns einen Wohnblock zeichnen. Eines vorweg, ihr könnt hierbei euren Wohnblock so groß
und hoch machen, wie ihr wollt (natürlich auch kleiner).
Wir beginnen mit der unteren Seite vom Haus.
Eure Maus sollte jetzt ein kleines Viereck sein (ein Pixel!). Zeichnet nun 1 Kästchen mit der Farbe
Schwarz, danach diagonal an der rechten unteren Ecke 2 Kästchen weiter, anschließend
diagonal weitere 2 Kästchen. Das sollte so aussehen:
Bilder

Keine Sorge am Anfang schaut es ziemlich langweilig aus, aber ihr kommt bald rein, und dann werdet ihr
sehen, es ist gar nicht so schwer, nur 2 Kästchen zu zeichnen
Ihr zeichnet jetzt so lange weiter, bis ihr von selbst sagt, so jetzt reichts, das ist breit genug für mein "Haus".
Um euch ungefähr einen Richtwert zu geben, zeige ich euch meine Version :
Bilder

Damit ihr nicht zählen müsst, es sind 26 Stück 2er Pärchen.
Gut, jetzt müssen wir uns eine vertikale Linie nach oben zeichnen. Die vertikalen von Häusern sind meistens immer eine vollkommen gerade Linie! Also nicht so schwer. Ein kleiner Tipp, damit man nicht so viele Kästchen zeichnen und klicken muss, klickt einmal die Anfangsstelle an (also dort wo eure Linie beginnt) und dann drückt ihr die SHIFT-Taste und drückt auf den Endpunkt.
Jetzt habt ihr eine vollkommen gerade Linie. Beachtet aber, ihr müsst, bevor ihr die Linie nach oben zeichnet, noch ein kleinen Pixel dransetzen:
Bilder

Wie hoch ihr das Ganze macht, bleibt euch überlassen, nun müssen wir wieder diagonal weitermachen:
Bilder

Jetzt müsst ihr allerdings aufpassen, so groß eure Anfangslinien (also die, die ihr bisher gezeichnet habt) sind, so lang müssen auch alle anderen parallelen Linien sein! Aber keine Sorge, ihr müsst euch jetzt nicht merken, wie viele Kästchen ihr gezeichnet habt, wir passen die anderen Linien einfach an!
So, eure Linie (von der vertikalen Linie aus) sollte jetzt so ungefähr aussehen:
Bilder


Perfekt!
Jetzt erstellen wir uns genau die selbe Linie weiter unten nochmal. Spätestens jetzt solltet ihr auch den
Grundriss erkennen:
Auf dem Bild sollte das Rote einen Pfeil darstellen. In diese Richtung zeichnen wir jetzt:
Bilder

Gut, nun solltet ihr einmal so lange zeichnen, bis ihr im Navigator so ca. glaubt, dass ihr nun aufhören
solltet, da die obere Linie auch so lang ist (ich hoffe, das ist jetzt verständlich ausgedrückt!)
Um zu kontrollieren, zoomt einfach ein wenig hinaus, oder geht gleich auf "Tatsächliche Pixel":
Bilder

Sollte ungefähr hinkommen! Ist wahrscheinlich ein wenig zu lang. Wenn das der Fall sein sollte,
dann zeichnet ihr einfach mit Weiß über euren schwarzen Strich drüber.
Nun, wie finden die zwei Linien zusammen? Wir beginnen von oben!
Bilder

Und nun wisst ihr schon, was kommt. Einfach nach euren gezeichneten 1. Pixel den nächsten zeichnen,
allerdings MIT SHIFT-Taste gedrückt, so kann es zu keiner ungeraden Linie kommen!
Falls ihr jetzt, wenn eure zwei Linien nicht zusammenkommen, etwas korrigieren müsst, dann könnt ihr
einfach mit Weiß drüber malen. Dazu wechselt ihr hier (siehe Bild) die Farben:

Bilder


Gut, wenn es korrigiert ist, müsst ihr sie nun verbinden. Die Verbindungsstelle sollte so aussehen:
Bilder

Nun habt ihr schonmal eine Seite vom Haus fertig. Um den Rest des Hauses fertigzustellen, müsst ihr genau
dasselbe Prinzip nur mit den anderen Seiten anwenden. Ich habe hier aber zur Kontrolle die Oberseite:

Bilder

Um die nächste Kante um das Viereck zu schließen, müsst ihr einfach mit einem Pixel nach oben und
zwei weitere diagonal. Dann beginnt ihr wieder mit demselben alten Schema.
Die Linie sollte wieder ungefähr so lang gemacht werden (für den Anfang), wie die auf der gegenüberliegenden
Seite. Danach beginnen wir mit der anderen noch fehlenden Kante.

Kante 1:                                                              Kante 2:

Bilder
Bilder


Gut, nun die Endkante, also die letzte fehlende Kante müsst ihr so zeichnen:
Bilder

Die zweite Fläche ist fertig. Das einzige, was ihr jetzt noch erledigen müsst, ist, die letzte Vertikale
nach unten zu zeichnen (gaaanz  links).
So, der erste Schritt ist geschafft:
Bilder

Fein! Ihr solltet mittlerweile etwas vertraut sein mit dem Umgang der Pixel. Das einzige, was noch fehlt,
ist die Ausschmückung. Da das hier nur eine Einführung ist, zeige ich euch nur ein paar restliche mögliche
Varianten (denn den Rest könnt ihr individuell dazuerfinden, denn bei Pixelart geht es ja nicht um realitätsnahe
Sachen).

Also fangen wir an mit dem zweiten Schritt:

Hier geht es zuerst darum, eine Treppe und einen Eingang
Für den Ansatz der Treppe haben wir uns schon einen Pixel gezeichnet. Wenn ihr euch euer Bild betrachtet,
seht ihr ganz unten links ein kleinen Pixel, der "wegsteht". Genau hier beginnen wir zu zeichnen.

Ihr zeichnet jetzt 2 Pixel diagonal nach unten. Da dran hängen wir (immer noch diagonal) 1 Pixelpaar (2 Kästchen) an. Danach geht ihr genau neben dem letzten Pixel waagrecht nach rechts weiter. Zuerst nur
1 Pixel, danach wieder unsere diagonale fortgesetzte Linie!
So sollte dann die Treppe aussehen:
Bilder

Verwirrend?
Eigentlich nicht, ihr seht am Ende (ganz rechts) sind 3 Pixel gemalt. Dann zeichnet ihr eine Zeile weiter
oben 2 Pixel, danach diagonal wieder 2 Pixel, etc.
Um es nach einer Treppe aussehen zu lassen, müssen wir uns noch 2 Linien mit Schwarz dazuzeichnen.
Es ist egal, wohin ihr sie zeichnet. Wichtig ist nur, dass dazwischen noch Platz ist für die Grautöne.
Wie ihr am Bild schon erkennen könnt, fangen wir an mit einem relativ dunklen Grau (ich nenne
deshalb keine genaue Farbe, da ihr euch das selbst aussuchen könnt) einfach die in der Mitte
entstehenden Lücke zu füllen (natürlich mit 2er Schritten).
Wenn ihr das habt, könnt ihr noch 2 weitere Grautöne verwenden. Einen relativ hellen und einen, der
sich in der Mitte von dem dunklem und dem hellen Grau befindet. Das Ganze sieht dann so aus:

Bilder

Wenn ihr jetzt euch das Ganze in 1:1 (Tatsächliche Pixel) anseht, könnt ihr die Treppe erkennen.
Kommen wir zum Tor. Sucht euch eine Stelle aus, an der ihr zu zeichnen beginnen wollt.
Für das Tor braucht ihr 2 vertikale Linien und die Schließung kommt darauf an, wie euer Tor
denn aussehen soll. Ich habe mich für eine Variante mit einem kleinen Bogen entschlossen:
Bilder

So, der Grundriss vom Tor steht. Um den Bogen noch zu schließen, müssen wir von den nach innen gesetzten
2er Paar ausgehen. (Einfach wieder eine diagonale Linie zeichnen. Diagonal deswegen, damit es dann in
der 1:1 Ansicht gerade aussieht!)
Bilder

Nun fängt die Gestaltung an. Ich habe mir nun einfach in der Mitte einen Balken in Dunkelgrau gezeichnet.
Dafür habe ich meinen Buntstift auf 3 umgestellt (Größe) ein kleiner Tipp, der Shortcut für die Veränderung
der Größe sind der Beistrich und der Punkt (Beistrich = kleiner , Punkt = größer). Gut. So sieht mein
bisheriges Ergebnis aus :
Bilder

Jetzt nehmt einfach einen etwas helleren Ton und fühlt die Punkte die am nächsten zu Schwarz sind also
ca. so :
Bilder

So ein wenig Farbe dazu und dann passt der Bogen einmal (und zeichnet auch gleich
einen dritten vertikalen Strich nach unten, jener kennzeichnet die zwei Türen)
Bilder

Für das Muster der Tür ist jetzt eure kreativität gefragt, wenn ihr euch damit jetzt nicht
beschäftigen wollt dann ist hier meine Variante (keine Kommentare,nur Bilder) :
Bilder
Bilder

Bilder

Bilder

Vergesst nicht bei euren dritten vertikalen Strich, zwei kleine Schwarze punkte noch nach links
und rechts für die Türklinken zu machen.

Super!
Der nächste Schritt ist ein Plakat mit Schrift genau über dem Tor, um das zu machen braucht ihr nur euer
bisher erlerntes anzuwenden, wir brauchen also ein weiteres 4 eck :
Bilder

Um eine Art von Rahmen zu erhalten müssen wir jetzt noch mit einer dünkleren Farbe den ersten Rahmen
nachziehen :
Bilder

Füllt die Lücken jetzt noch mit einer noch helleren Farbe !
Jetzt könnt ihr eurer Kreativität freien Lauf lassen, ich habe für das Tutorial "nur" einen Schriftzug
mit 2 Varianten gewählt, der Text beinhaltet das "kreative" Wort : Hello

2 Varianten deswegen, für die die eine eher dickere Schrift erzeugen wollen , oder für die die
nur eine kleine Strichschrift haben wollen (ihr werdet den Unterschied in der 1:1 Ansicht sehen)
Bilder

Gebt den Text ein bisschen Schatten (bei der Strichschrift) und ein wenig Farbe (bei der dickeren )
Bilder

So, jetzt können wir noch beginnen den Grundriss des Hauses etwas realistischer zu zeichnen, wir geben ihm
einen Schatten, das heisst, die Linien die wir ganz am anfang gezeichnet haben ziehen wir mit einem Grauton
nach (sollte etwas dunkel sein)
Bilder

Das bisherige Ergebnis :
Bilder

Gut, jetzt zeige ich euch wie man sich Fenster macht, müsstet ihr eigentlich inzwischen auch schon,
können (da es ja nicht allzu schwer ist) :

Bilder


Wir brauchen auch hier ein wenig Schatten :
Bilder

Damit wir uns jetzt allerdings etwas Arbeit ersparen kopieren wir uns das erste Fenster
Also Auswahltool und dann strg+c und strg+v , nun an die richtige Stelle setzten und passt!
Bilder


Diesen Vorgang macht jetzt sooft wie ihr wollt, oder solange bis ihr eurere Fläche gefüllt habt :
Bilder

Jetzt müsst ihr selbstverständlich alle erstellten (durch Kopien ) Ebenen wieder zusammenfügen und auf
eine einzige Ebene reduzieren
Dazu klickt ihr die Ebene an und setzt überall eine kleine Schleife und dann Strg+e :
Bilder


Schritt 3 : Die Füllung

Jetzt kommen wir zu einen mühsamen Teil, und zwar werden wir dem Ganzen etwas Farbe geben,
ich habe Orange gewählt, um sich ein klein wenig zu ersparen macht den Pinsel etwas größer (3 oder 4).
Versucht nun alles schön auszumalen (nehmt euch bitte auch die Hilfe mit der Shift - Taste zu Herzen)
Bilder

Gut, wenn ihr noch eine spezielle Textur haben wollt nur zu, dafür müsst ihr nur die Farbstufe ein wenig
ändern und ein paar versetzte Pixel setzten.
Für die obere Fläche habe ich mir eine Holztextur überlegt :
(dafür müsst ihr ein paar hellbraune Linien setzten, und den Rest mit einer dunkleren füllen,oder umgekehrt)
Bilder

Bilder

Bilder

Ich habe mir dann auch noch eine kleine "Unebenheit" eingebaut, also einfach ein kleines Feld
noch dunkler gemacht (um der Eintönigheit beim Färben zu entgehen)
Bilder


Gut, sieht ja schon mal ganz gut aus (für ein Tut , bzw euer vielleicht erstes Pixelart)
die letzte Fläche könnt ihr nach belieben füllen, also einfach irgendwas reinzeichnen,
mehr Fenster, oder eine Grafik ganz egal was.
Ich habe mich für eine kleine Grafik entschieden.

Kommen wir zu den letzten Schritten. Wir "bauen uns noch einen kleinen Weg und ein "Bäumchen"

Für den Weg müsst ihr euch nach der Treppe einfach eine Stelle aussuchen ich habe jene genommen die
vom Tor weggeht.
Ich denke das Schema ist nun schon bekannt deswegen ist die Erklärung das fertige Bild,
für die Füllung habe ich dann noch ein paar "Unreinheiten" eingefügt.
Bilder

Kommen wir zum Baum :
Ich habe jetzt einen sehr individuellen Baum gemacht, denn darum geht es eigentlich
bei Pixelart, es muss nichts sein das in der Realität wirklich vorkommen kann (ich
gebe euch später noch ein paar Links wo ihr euch das ansehen könnt) 
Mein fast fertiger Baum : (hier fehlt nur noch das Gras)
(drei vertikale Linien und dann zeichnet ihr zuerst die unterste dunkelgrüne linie, um
zu wissen wie breit euer Baum wird, und dann beginnt ihr mit der schwarzen Farbe
eine Art Pyramide zu zeichnen )
Bilder


Das umrundete, sollen mehr aussehen wie Steine, also geben wir ihm einen hellen Schatten (hellgrau)
und dann fügen wir ein Gras ein (zuerst einmal mit der gewünschten Farbe füllen, danach fügt ihr dann
die Unreinheiten ein, einfach einen dunkleren oder helleren Ton dazu geben )
Bilder

Bilder



Ich habe mir den Baum jetzt nochmals kopiert und an eine andere Stelle gesetzt. Anschließend
natürlich wieder alles auf eine Ebene reduziert.

So, hiermit ist mein Tutorial beendet.

Das Ergebnis könnte so oder besser aussehen :
Bilder


Gut, wenn ihr hier angekommen seid, habt ihr ziemlich viel Zeit in mein Tutorial investiert,
dafür möchte ich mich einmal bedanken. Nun gebe ich euch noch zwei Links für Vorlagen.
Aus denen könnt ihr euch zukünftige bessere Varianten aneignen.
Die beste Variante ist, einmal sich das ganze ins Photoshop zu holen, nachzeichnen, löschen,
und das Ganze selbst noch einmal zu probieren !

Hier die Links:
leider hat das nicht geklappt deswegen nur so der Link :

 http://www.eboy.com/browse/ecity/cities
 http://www.trevorvanmeter.com/flash.html

Gut, ich danke für eure lange Aufmerksamkeit, und hoffe, ich habe euch eine verständliche Einführung
in Pixelart gegeben.

Hier geht es mit Teil II weiter: http://www.psd-tutorials.de/tutorials/2d/adobe-photoshop/grundlagen/view/388--pixelart-teil-ii


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von aether
  • 17.04.2006 - 11:34

wow thx echt super beschrieben ect. jetzt kan ich auch reinhaun ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.03.2006 - 19:26

Sehr schön und ausführlich beschrieben.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.03.2006 - 08:48

das ist ja sehr umfangreich...
bin ja mal auf den zweiten teil gespannt..
den werde ich jetzt mal angehen

Portrait von ramydamy
  • 12.03.2006 - 15:13

Sieht ja echt nett aus - werd ich auch mal ausprobieren! Schön beschrieben!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.01.2006 - 21:14

Hey.. echt hammer tutporial..
Dauert zwar lange reinzukommen, aber richtig gut alles erklärt und so.. respekt... Sehr gut.. volle punktzahl

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.01.2006 - 17:58

Genau das wollte ich schon immer mal machen....wird heute wohl ne lange nacht.....!!!!!

Portrait von sacrifice
  • 18.10.2005 - 23:40

hm.. ich würde nicht gerade schreiben "anständigen designer" <br>
denn a würde ich entgegnen deffniere mir diesen begriff ;) <br>
aber ja.. ist sehr viel arbeit, bzw. man braucht zeit<br>
die man nicht immer findet. zum designen würde ich <br>
es auch nur verwenden falls es der auftraggeber haben will, ansonsten ist es "just for fun" und etwas anderes. <br>
<br>
zu deinem punkt mit dem erleichtern, ja die gießkanne :) <br>
daran hätte ich auch denken sollen,<br>
das problem war das sie nicht immer das gemacht hatte was ich wollte, ich glaub deswegn hab ich <br>
drauf vergessen, aber danke für den hinweis :)

Portrait von Kelly1
  • 17.10.2005 - 12:52

Vielen Dank für die super Beschreibung!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.10.2005 - 17:12

Sehr viel Arbeit reingesteckt, Kompliment!<br>
<br>
Nur eine Sache ist zu Umständlich...<br>
Einem anständigen Designer würde sowas nichtmal einfallen, aber ich kann mich noch an meine eignen Pixelart-zeiten erinnern ;)<br>
<br>
Das ausmalen, muss nicht mit Strichen erfolgen, die "Gießkanne" erleichtert das ganze doch sehr.<br>

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.09.2005 - 12:13

Oh wie Geil.<br>
Steh ja total auf Pixelart, danke.<br>
Werd ich mir mal zu Gemüte führen.<br>
<br>
5 Sterne

Portrait von Gehlhouse
  • 06.08.2005 - 23:39

Da hast du dir wirklich sehr viel Mühe gegeben. Ich persönlich würde aber eine andere Technik vorziehen. Was ist denn mit den Fenstern in Stockwerk 3-5 los? Irgendwie sehen die verschoben aus..... Tina

Portrait von sacrifice
  • 12.08.2005 - 21:09

Erst einmal danke für das positive Feedback von <br>
euch, war nicht ganz einfach das Thema zu erklären,<br>
da man, meiner meinung nach, sich sowieso eine<br>
eigene Art zulegt, und man kommt ja auch ziemlich<br>
schnell hinein in das Ganze. <br>
<br>
@gehlhouse <br>
Ich lerne gerne dazu, also wenn du eine andere Technik hast, nur zu :) <br>
Die Fenster sehen deshalb so aus, weil ich sie "nur" kopiert habe, da ist mir die Genauigkeit dann schon<br>
ausgegangen (nach ein paar stunden :) )<br>
Ich hoffe das stört nicht allzu :)

Portrait von Anita
  • 06.08.2005 - 20:15

Klasse Tutorial, gut beschrieben und sehr gut bebildert :-)<br>
<br>
LG Anita

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.08.2005 - 14:10

Super tut, hatte das mal woanders gelesen, aber nicht so gut :)<br>
werde mich bald mal dransetzten<br>
<br>
mfg

Portrait von Nappel
  • 06.08.2005 - 14:08

schönes tut. gut beschrieben

Portrait von TRex2003
  • 06.08.2005 - 11:33

das is einfach nur klasse :D benötigt etwas einarbeitungszeit aber du hast es gut beschrieben :)

Portrait von Kartoon
  • 06.08.2005 - 11:25

Hey Sacrifice!<br>
Wollt eig. schon immer auch mal sowas machen aber bin nie dazu gekommen! Echt ein super Tut von dir!

x
×
×