How to convert a photo to NES format

A place for your artistic side. Discuss techniques and tools for pixel art on the NES, GBC, or similar platforms.

Moderator: Moderators

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

How to convert a photo to NES format

Post by dougeff » Tue Jul 14, 2015 10:00 pm

How to import realistic graphics into an NES game

I couldn't find a good tutorial on this, so I'm going to write it myself

I use Photoshop 5.5 (sorry, it's old)
-hold control, and click (=delete) all the swatches
-create 4 new swatches, white/lt gray/dk gray/black
-click the little arrow, save swatches as "4color.aco"

http://dl.dropboxusercontent.com/s/gtzh ... howto1.jpg

Open your photo
-select the part you want, and crop it.
-click image/image size, change to a realistic NES size...32x32, 16x16
-click image/adjust/curves, and draw 4 flat lines - this is the tricky part,
because final result will depend on exactly how you draw those lines.

http://dl.dropboxusercontent.com/s/ebue ... howto2.jpg

-at this point I touched it up slightly with the pencil tool
-click image/mode/indexed color
-click palette "custom", table "custom", load...
then find your 4color.aco file

http://dl.dropboxusercontent.com/s/2jh4 ... howto3.jpg

-click select/all, edit/copy

Open YY-CHR, New File...
-click edit/paste
-then touch up the picture, and save it.

http://dl.dropboxusercontent.com/s/9y75 ... howto4.jpg

You may have to adjust brightness after the "curves" step to get better
results with the index color step. All these examples are 32 pixels wide.

Here's a soccer ball (football), for another example.

http://dl.dropboxusercontent.com/s/zpfh ... howto5.jpg
nesdoug.com -- blog/tutorial on programming for the NES

lidnariq
Posts: 9492
Joined: Sun Apr 13, 2008 11:12 am
Location: Seattle

Re: How to convert a photo to NES format

Post by lidnariq » Tue Jul 14, 2015 10:27 pm

Thefox wrote a nice tool for this years ago: viewtopic.php?t=7363

tepples
Posts: 22014
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: How to convert a photo to NES format

Post by tepples » Tue Jul 14, 2015 10:33 pm

I've got a different technique for portraits.

Image

User avatar
tokumaru
Posts: 11744
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: How to convert a photo to NES format

Post by tokumaru » Wed Jul 15, 2015 5:23 am

The only advice I have regarding photos on the NES is... don't do it. 99% of the time it looks like crap. I can think of a few examples from movie-based games where actors have been redrawn that look nice, but that's very rare. 3 or 4 colors are far from being enough to represent real world lighting, so unless you use a lot of tricks to make it look like there are more colors (dithering alone won't cut it), don't expect good results.

EDIT: While I do think photos don't go well in actual games, I don't want to discourage experimentation. It's always fun to see how the NES handles things it wasn't supposed to, like photos, 3D, videos, and such. I just think it's important to know what belongs in a game and what doesn't.

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 7:23 am

I looked at some of the examples from thefox, and they look great! How did he get enough unique tiles to fill the entire name table? Bank swapping mid-frame?
nesdoug.com -- blog/tutorial on programming for the NES

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 10:57 am

Here's how this method looks at 128x128, and in an actual NES file. The only thing I touched up was the eyes and the beard. Slight dithering setting on the "indexed color" step.

I need to refine the process a little, I'm not 100% happy with the results yet.
Attachments
face.nes
(24.02 KiB) Downloaded 206 times
face1.jpg
face1.jpg (53.77 KiB) Viewed 7520 times
nesdoug.com -- blog/tutorial on programming for the NES

User avatar
rainwarrior
Posts: 7822
Joined: Sun Jan 22, 2012 12:03 pm
Location: Canada
Contact:

Re: How to convert a photo to NES format

Post by rainwarrior » Wed Jul 15, 2015 11:54 am

The only satisfactory way I've had for doing this is just to load up the photo in an image editor, put it on a layer underneath and draw the NES image on top of it by hand. It's not an instant process, but it isn't extremely time consuming either. You can do a lot better with your human brain and experiences than any automated process.

Making decisions about what lines are important, what things to highlight, where to concentrate detail, where to leave it out, where to smooth over an unimportant detail, etc. this is something that takes understanding of the image, recognition of the things in it, and an aesthetic appreciation of them. Simple computerized processes are just going to treat the image as a signal, every pixel is equal. More advanced ones might try to find edges or shapes and emphasize them. Really advanced ones might try to identify eyes or other areas that should have a different process of detail applies to them.

I'm reminded of the film A Scanner Darkly, where they used a processing tool to assist and start the process, but utlimately every frame gets adjusted and finished by an artist. https://www.youtube.com/watch?v=eke5VnpNcNk

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 12:11 pm

You just gave me an idea. You could use this kind of automated process (because it's actually fast - minus the coding it took like 5 minutes) and make a series of picture banks, and swap them every 8-10 frames, and you'd have a detailed movie file, in an NES game. you could have about 20-30 frames - that would be about 3-4 seconds of video. Combine that with a DMC sample and you could have audio and video in sync.
nesdoug.com -- blog/tutorial on programming for the NES

User avatar
tokumaru
Posts: 11744
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: How to convert a photo to NES format

Post by tokumaru » Wed Jul 15, 2015 12:23 pm

It would look something like this: viewtopic.php?f=2&t=11290

Uncompressed video isn't really practical to use in a game, as even a very short clip would consume nearly your entire CHR chip (unless you came up with a new mapper that could stream tiles from an SD card or something, but many would consider that cheating). But if you use a little compression, then yeah, I think NES can have little video clips here and there... maybe an opening sequence similar to that of Sonic 3D Blast on the Genesis.

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 2:25 pm

I was thinking more like this...10 images on a loop. Done with bank swapping.

Could be nice for a title screen. Mario 2 had uncompressed video at the very end (Mario sleeping).
Attachments
run.nes
(56.02 KiB) Downloaded 247 times
runNES.jpg
runNES.jpg (40.77 KiB) Viewed 7478 times
nesdoug.com -- blog/tutorial on programming for the NES

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 2:45 pm

By the way. I need to find a forum with less intelligent people. Every time I come up with (what I think is) something clever and interesting I get a "here's an example that's 1000x better and more complicated". Man, you guys never cease to amaze me.

That's a compliment by the way.
nesdoug.com -- blog/tutorial on programming for the NES

ccovell
Posts: 1014
Joined: Sun Mar 19, 2006 9:44 pm
Location: Japan
Contact:

Re: How to convert a photo to NES format

Post by ccovell » Wed Jul 15, 2015 4:06 pm

Remember, some of us here have been doing this since last century. ;-)

User avatar
tokumaru
Posts: 11744
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: How to convert a photo to NES format

Post by tokumaru » Wed Jul 15, 2015 5:04 pm

dougeff wrote:By the way. I need to find a forum with less intelligent people.
There are people here that have been around since the dawn of emulation... most ideas have already been thought of, and out of those, many have been actually executed. I can see how that can be frustrating for newcomers... on the other hand, they have years and years of interesting stuff to catch up with.

Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: How to convert a photo to NES format

Post by Sik » Wed Jul 15, 2015 5:31 pm

First thought: posterize it to seven shades. Four shades map directly to solid colors, the other three map to 50% checkerboard dithering between two colors. This will reduce the amount of detail, but has a high chance to look stylized enough to look like it was intentionally drawn like that. After this the amount of cleaning needed should be minimal hopefully (or even get away without doing it).

The biggest issue is that if I recall correctly checkerboard patterns don't play well with the way the NES encodes the video signal...

User avatar
dougeff
Posts: 2708
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: How to convert a photo to NES format

Post by dougeff » Wed Jul 15, 2015 6:04 pm

I actually have been visiting this forum for 6-7 years, I joined this year because I finally got around to programming a game.
nesdoug.com -- blog/tutorial on programming for the NES

Post Reply