[TUT] Bilder aus dem Internet als Makergrafik

[Ascare]

Ich habe hier schon seit einiger Zeit ein Tut liegen was ich irgendwann mal posten wollte und es nun tue.
Worum geht's?
Ihr kennt es, manchmal stößt man im Internet auf Grafiken wo man denkt das die sich gut im eigenen Makerprojekt machen würde, aber leider sind sie meist nicht optimal und sofort einsetzbar. Dieses Tut zeigt anhand eines einfachn Beispiels wie es doch geht.

Vorbereitung
Als Grafikprogramm benutze ich Photoshop, aber auch andere Programme wie Paintshop Pro, Gimp oder gleichwertige Programme sollten klappen. Viel Erfahrung mit den Programmen wird eigentlich nicht vorrausgesetzt.
Das Raster habe ich unter Bearbeiten->Voreinstellung->Raster auf 32 mit 2 Unterteilungen gesetzt.

Schritt 0
Man surft so ganz unauffällig im Netz und begegnet einer Grafik wo man denkt...hmm, gefällt mir:
http://mitglied.lycos.de/midgar/dump/kommode/kommode.jpg
In diesem Beispiel fand ich eine Kommode. Wichtig ist eigentlich das sie frontal gut zu sehen ist. Das der Hintergrund weiß ist, erleichert auch die Arbeit.


Schritt 1

http://mitglied.lycos.de/midgar/dump/kommode/kommode1.png
So, erstmal wird das Bild gespeichert und in Photoshop geladen. Dann wähle ich mit dem Zauberstab die weiße Fläche, stelle die Toleranz auf 96 und klicke auf Entf. und lösche somit den Großteil der weißen Fläche und der Bereich wird nun transparent. Bis auf die kleinen Unfeinheiten aun der unteren Seite der Kommode aber das kann erstmal so bleiben.


Schritt 2

http://mitglied.lycos.de/midgar/dump/kommode/kommode1_part.png
In meinem Beispiel möchte ich die Kommode für ein XP-Tileset verwenden also suche ich irgendwo an der Kommode eine Stelle, die möglichst nur das braune Muster der Kommode wiedergibt. Hier habe ich aus dem unteren Bereich in den Maßen 64x32 ein Stück in eine neue Ebene rauskopiert (es ist wichtig das dieses Stück in eine neue Ebene kopiert wird).


Schritt 3

http://mitglied.lycos.de/midgar/dump/kommode/kommode2.png
Jetzt skaliere ich die Kommode mit Bearbeiten->Transformieren->Skalieren auf die Maße 64x32 Pixel.


Schritt 4

http://mitglied.lycos.de/midgar/dump/kommode/kommode3.png
Das vorhin herausgeschnittene Stücke platziere ich eine Ebene unter die Kommode. So daß es fließend in die Kommode übergeht. Was oben zuviel absteht wird einfach markiert und gelöscht. Die Kommode ist nun insgesamt 64x48 Pixel groß.


Schritt 5

http://mitglied.lycos.de/midgar/dump/kommode/kommode4.png
Damit die Kommode obenrum etwas plastischer aussieht, kann man mit dem Ebenenstil etwas rumspielen. Ihr könnt die im Bild gezeigten Einstellungen verwenden oder selbst rumprobieren.


Schritt 6

http://mitglied.lycos.de/midgar/dump/kommode/kommode5.png
Um die Alphantransparenz an den Kanten wegzubekommen habe ich jetzt einfach mal das Bild auf indizierte Farben, also 256, reduziert. (Bild->Modus->Indizierte Farben).


Schritt 7

http://mitglied.lycos.de/midgar/dump/kommode/kommode6.png
Da ich gern eine Grafik habe die symmetrisch ist, habe ich einfach die linke Seite der Kommode gelöscht und auch die graue Unterfläche die noch zu sehen war entfernt. Jetzt habe ich nur noch das rechte Stück.


Schritt 8

http://mitglied.lycos.de/midgar/dump/kommode/kommode7.png
Das rechte Stücke wird kopiert und dann gespiegelt (Bearbeiten->Transformieren->Horizontal spiegeln). Nun habe ich eine symmetrische Kommode in "Makergrafik".


Ergebnis

http://mitglied.lycos.de/midgar/dump/kommode/kommode8.png
So sieht nun die Kommode aus und sie lässt sich nun in ein Tileset einsetzen. Je nachdem welchen Stil man im Spiel hat, kann man natürlich noch farbliche Anspassungen vornehmen. Am einfachsten ist es mit der Helligkeit, Kontrast und Sättigung rumzuspielen.


Screen

So, hab die Kommode farblich angepasst, bisschen geschärft und als Test mal in mein Game eingebaut:
http://www.npshare.de/thumbnails/36/2665/komm_bsp.th.png (http://www.npshare.de/files/36/2665/komm_bsp.png)

Und im RMXP-RTP (Kanten etwas ausgebessert):
http://www.npshare.de/thumbnails/36/4919/komm_bsp2.th.png (http://www.npshare.de/files/36/4919/komm_bsp2.png)

Das war's. Ihr seid dran. ;)

[Raknar]

Danke, kann ich viel mit anfangen.

[Kelven]

Eine gute Idee, aber mit einem kleinen Haken. Man muss diesen Grafikstil natürlich konsequent durchziehen, denn dieses Verwaschene, das beim Skalieren auftritt, beißt sich mit den klaren Konturen anderer Grafiken.

P.S. Bei deinem Beispiel finde ich diese helleren Linien am oberen Rand des Bildes nicht so schön.

[pascal45]

ich komme ja eigentlich sowieso nicht so ganz mit Chipsets klar aba was solls eig finde ich das Tut hilfreich nur wie schon gesagt wurde du musst das genauso weiter durchziehen aber ich kann mit Templates hab ichs gut hinbekommen und nicht nur aber auch für leute die zum ersten Mal ein Chipset machen isses hilfreich trotz und alledem gut
mfg pascal45

[WeTa]

ich komme ja eigentlich sowieso nicht so ganz mit Chipsets klar aba was solls eig finde ich das Tut hilfreich nur wie schon gesagt wurde du musst das genauso weiter durchziehen aber ich kann mit Templates hab ichs gut hinbekommen und nicht nur aber auch für leute die zum ersten Mal ein Chipset machen isses hilfreich trotz und alledem gut
mfg pascal45

Hier, schenk ich dir: , . ; -

[Ascare]

So, nochmal ein Beispielscreen mitgepostet.

@Kelven
Wenn man etwas scharfzeichnet und eine farbliche Anpassung vornimmt, dann geht das (denke ich mal). In meinem Projekt kommen sehr viele solcher unterschiedlicher Grafiken vor. Im Beispielscreen z.B. ist wirklich jedes Element (Boden, Teppich, Wand, Deko, Kerzenständer, Chara) anderen Ursprungs. Alles was man benötigt ist eine Abstimmung in der farblichen Anpassung. Natürlich erreicht man nie so eine "Aus-einem-Guß"-Qualität wie z.B. von Terranigma, aber dennoch kommt man mMn soweit das eine gewisse Harmonie zwischen den einzelnen Elementen herrscht.

[MA-Simon]

Hier, schenk ich dir: , . ; - ^^

Hm. eigentlich seeeehr schön gemacht und bebildert.
Interessant sowas. Aber... hm, mir persöhnlich fehlt da eben die "Kontur".
Ich bin da eher so der Typ, der es zwar so macht wie du, dann aber nachträglich nochmal konsequent drüberpixelt und die Komode nur als grobe Formvorlage benutzt.

EDIT:


Wenn man etwas scharfzeichnet und eine farbliche Anpassung vornimmt, dann geht das (denke ich mal). In meinem Projekt kommen sehr viele solcher unterschiedlicher Grafiken vor. Im Beispielscreen z.B. ist wirklich jedes Element (Boden, Teppich, Wand, Deko, Kerzenständer, Chara) anderen Ursprungs. Alles was man benötigt ist eine Abstimmung in der farblichen Anpassung. Natürlich erreicht man nie so eine "Aus-einem-Guß"-Qualität wie z.B. von Terranigma, aber dennoch kommt man mMn soweit das eine gewisse Harmonie zwischen den einzelnen Elementen herrscht.

Ich finde allerding gerade in deinem Beispielscreen, das da überhaupt nichts so recht zusammenpassen will, geschweigedenn Hamoniert o.O Ist eher eine Colage, verschiedener Stiel-Typen.

[Ascare]

Gut, Harmonie ist kein Fakt, sondern liegt im Auge des Betrachters. ;)

Hab mal versucht die Kommode ins XP-RTP einzubauen, Screen im ersten Post.