8 Bit & '8 Bitish' Graphics-Outside the Box

[Music] so my name is Mark Ferrari and uh I am going to start with a little slideshow of uh some of my previous work because I'm not assuming that a lot of you know who I am I think you're probably here because you're interested in 8bit and 8 bitish art whatever that is and you're probably saying yeah and Mark Ferrari who is that so uh I uh started with lucasfilm games when I was excuse me oh right I'm supposed to press this button there we go um I started with lucasfilm games when I before you were any of you born and we made everything with this palette those 16 colors and this is what the art looked like we didn't just have those 16 colors for this game the entire industry had those specific 16 colors to do every game they did

those 16 colors were arrived at by well-intentioned programmers who simply slid the RGB numbers to even intervals and said look how symmetrical how balanced we're done and the rest of us were left to do the crying and the cleanup so when I was hired at lucasfilm we couldn't even dither these colors because dither didn't compress in those days so I did the best I could to to do this and then we went on to dither I had a little something to do with this uh I put up some pictures on screen one day after we were done with Zach McCracken and the alien mindbenders which those things were just from and I said you know if we used dither uh our pictures could look like this and believe it or not this was a lot better so in spite ired by that

um we learned how to compress dither thanks to Ron Gilbert who is sitting in this room someplace and we made a game where you could actually have six or seven different kinds of blue uh rather than just four because of the fact that we could dither it this was all EGA it was all as you can see very low resolution and this game actually won Graphics Awards some people actually thought it a VGA game because they'd never seen EG Graphics look like this when we were done with that we went on to make a game called secret of the secret of Monkey Island which some of you have probably heard of um The Secret of Monkey Island we really got the use of dther down in the secret of Monkey Island we could have places that looked a lot less flat than those Zach McCracken environments we could have real sunsets in EGA

we could have atmospheric perspective we could have depth of field still in EGA we could render sand so that it looked a little bit like sand and not like a large yellow spot that someone had forgotten to color in it was exciting and inspirational for us artists and then we moved on from there um I'm going to now just put on a slideshow of other 256 color8 bit art I have done everything you're seeing now was done 8 bit this is not 8 bitsh art yet I'll get to that in a minute and this is stuff that I have done since then this was for the very last GBA Spyro game ever made as far as I know um

this is what I've been doing and while this is showing I would like to talk a little bit about the reason I am so and remained so interested in 8bit 256 color limited pallette art even after there was any technological or game design imperative to use it I am interested in it because it was so incredibly limited I don't actually have any desire to do EGA art ever again in my life but I will say that the most cre cretive work I ever did was done when I just had those 16 horrible colors to do it in if somebody gives you two gum wrappers and three sticks and tells you to make the p with this you will take two gum wrappers and three sticks as far as they can possibly go in in your effort to accomplish your mission if somebody gives you all the artistic resources of the universe and says make the p with this you will dabble in all of those resources until the time is up and you have made nothing at all

I think this is one of the challenges that's been facing our industry for some time is that the resources are so many now they are so vast and they replace themselves and render themselves obsolete so quickly that nobody has the time to do anything but just dabble for a moment in the current resource dour before it's gone and they are busy scrambling to learn just the merest proficiency of the next one back in these days I was able to work with Deluxe paint 2 by Electronic Arts for 10 years before I had to give that up and go on to the next art tool and during that 10 years I was able to do things with Deluxe paint that I don't think even EA ever imagined would be done with Deluxe paint I'm going to get out of this for a moment and show you some of what I ended up doing with Deluxe paint all of the animation that you see in these scenes right now is done with color cycling

there are no frames here there's no extra pieces of art this is actually an HTML5 color cycling emulator created by Joe Huckabee whom I will mention a little bit later so that anybody could see these pieces these were done for software products that have been dead for ages until Joe learned how to show them happening on the web and then they became pretty widely seen and pretty widely liked so here are snowflakes falling on a picture there is no actual transparency here this is one layer of 8 bit art with apparently transparent snowflakes falling in it here's waterfall and rain I will be talking just a little bit later about specifically how I did some of these effects in an 8-bit environment

today Deluxe paint 2 is barely usable even in a Doss emulator as you will see when I try to use it in a Dos emulator in just a little while the only real tool for producing true 8-bit art that I know of out there right now is a a program many of you probably know called promotion I am actually very grateful to Cosmo for doing all that he has done to keep an 8-bit tool alive and functioning out there but I have to say there are a number of things daint did that promotion does doesn't um and there and some of them are pretty important right now I'm not sure that there are uh ways to do some of what I did these pictures with in daint which is what these were all done in daint however I will say that Joe Huckabee hopes to have a product ready to look at sometime next year that does

all of this again and at the higher resolutions you want so those of you who are really waiting for a tool you can do stuff like this in in 8bit we'll probably have it sometime next year in the meantime I'm left to ask myself as people uh invite me to talk here why we are so interested in 8bit art when in fact there's so little way to produce it anymore and so few really intally compelling reasons to be doing 8bit art in today's gaming universe and I have pretty much come to the conclusion that most of you are probably here because you just love this aesthetic because maybe some of you remember playing games that looked and felt like this when you were younger before the very cinemagraphic first-person shooters that we mostly play today came along maybe some of you really love eight bit because you've never seen anything like

this being much younger and not have played these games back or these used these products back when they were made whatever your reasons I'm going to assume that you're here for inspiration about thinking about 8bit art and the first thing I want to say along those lines is that for me 8bit art is all about an environment that is small enough to be creative in what can you think to do with pixels and with a limited palette the great thing about a limited pallet is that you can use it you can manipulate it it isn't just there a giant ineffable cloud like the 32bit universe that provides whatever is called for you can actually go in and fool around what you're seeing over there on the right hand side of these things is uh your right hand side I assume is the pallet operating so you can see what parts are actually cycling and what parts aren't once I figured out how to do effects like these with color

cycling I went on to figure out how we could do more with an 8-bit environment so here we're going to see some of those same scenes so what you're going to see Now does not involve any extra frames of art either not a single anim frame not a single second piece of art what you're seeing now is all done simply by changing pallets on this one picture once I figured out how to rotate pallet positions to create the sense of animation for almost any environmental effect I could think of I started trying to figure out how to make the whole picture change by constructing it so that using pallets we could get it at any time of day in virtually any weather condition

I'm flipping quickly forward to get you some of the more interesting ones actually that was an interesting one these were for a product that put these originally put these pictures up on screen 24 hours and anytime you looked at your screen it was the same time of day in the picture that it was outside your actual windows and all done with pallet shifting now I'm going to show you another little trick with pallet shifting that I figured out in extremis about seven or eight maybe 10 years ago I can't remember so so we were doing a game for

one of these little you plug it into your TV the game is in the controller things it was an Xmen game and suddenly after all these years storage and processing time and all the rest of that really was an issue so we needed to cram as much art as we could in as little space as possible so we had this this game it was a storm game the the character storm she fights people off while flying through the air so we need a lot of backgrounds these backgrounds were all designed to scan line Parallax so they were whizzing by underneath you in a kind of perspective and we needed as many of these environments as we could but we didn't really have much space so here's a valley scene imagine storm is flying along up here first of all we wanted these scenes at different times of day so I just used the same old pallet uh tricks you've already seen to uh I'm going to load a pallet now so there we are at sunset and then I'm going to load another

pallet now and there we are at night you'll notice that some clouds changed and disappeared in there but we also needed other environments so now I'm going to load another pallet and we'll just get rid of those Hills and all those trees and now we're up in the stratosphere looking down at Clouds I'm going to load another pallet here here we are at sunset here we are at night but we really wanted some diversity too the clever Observer can still see those trees in there they look like clouds now but they're still trees so can we do anything more with pallets well okay let's do something really different how about that I did not Chang the picture I just

changed the pallet and uh here's that pallet in the evening oh nope nope sorry wrong pallet Cloud City they look the same here's that City in the evening here's that city at night so there are basically three scenes at three times of day in this one piece of art and I will be talking a little later about how I do that as well um again it's not so much that I expect you to run out and do pallet shift effects like this or color cycling effects like this it's just there was so much more to do with a pallette that you could control color by color that you could fiddle with the positions of things that there was so much more you could do because the environment was small enough that you could actually think about it that way and I think that that is probably part of the reason why 8 Bit And 8 bitish art is still so relevant today is because it was a

mentally and creatively manageable space to work in which I'm not sure a lot of our other much more cinemagraphic and three-dimensional things are quite the same and because it wasn't going to evolve so quickly that as soon as you began to figure out was going on everything had changed and you had to start over before I talk about any of that however I think the real reason I am here today is probably because I have been given the tremendous honor and uh really enjoyable uh opportunity to work with Ron Gilbert Gary Winnick and David Fox uh on a game called thimble weed Park and uh I'm going to put on a slideshow now while I talk about uh about that let's see here there we go so these are some backgrounds that I'm doing now for thimbleweed Park uh about a year ago

recognizing that there were a lot of people out there with a deep hunger for8 bit and8 bitish games after all this time uh Ron and Gary decided to try a Kickstarter where they basically told people if you'll fund us we will do a game like the Lucas film adventure games that you used to play in the late 80s as if you bought one and just found it now that realized you never opened it unwrapped it and started to play um if you've heard about the thimble weed Kickstarter at all you know that it was very very very successful hundreds and hundreds of thousands of dollars raised in 30 days and that indicated there was interest so they've been doing that game they have invited me to do the backgrounds for that game because I was the guy that did backgrounds for a lot of the games that people are remembering so nostalgically when they do it however as we really began thinking about what specifically to draw we realized that while while people have a marvelous memory of playing these games

when they were young some people at least they might not actually want exactly what would have been produced in 1987 I remind you of the the first slides I showed of the EG pallet and the artwork we made with it if people sat down to an EG game right now with solid colors like they would really have gotten in 1987 it might have been going like going to a renaissance fair and finding yourself in the actual Renaissance with sewage flowing in the streets and people with Hideous deformities and everybody smelling like people really smelled in the Renaissance they might prefer the Renaissance Fair so what we have decided to attempt to do is provide a game that feels just like people remember these games feeling and plays a lot like they remember them playing except that Ron and Gary and and David Fox have had decades to learn from the way they put those games together so now not only are we tweaking the art a

little so that it's renaissance fair not the actual Renaissance they have also had the chance to tweak the game design the interface all of those things so that they look and feel just like you remember them feeling but all of the things you didn't like about those earlier games have now been amended they play more intuitively they don't frustrate in the ways that they some of the earlier games might have frustrated and they don't force you to look at EGA and yet it you can see the pixels it looks pretty 256 colorish so this is not 8bit art this is being done in Photoshop and it is being done to feel like VGA 8bit Graphics I don't actually count colors I'm sure there's many times 256 colors in some of these pictures again I decided that we all decided I think that what we wanted to do is the art we would like to have made in those days in a way that feels like the art we did in those days that is what I mean by

eight bitsh art and so I'm going to talk a little bit about uh how I'm doing that as well and I have all sorts of demos that I can show you but for the sake of brevity I actually let me see a show of hands how many people here would rather hear me talk about what I'm doing with the eight bitsh art now or how many people would like me to talk more about how I did those things with color cycling and pallet shifting in an actual index color tool so8 bitsh art now raise your hands if you want me to start with that okay 8bit color cycling and okay I admire you you you poor little remnant of people who actually wants to hear about 8bit art but I guess I will start with thimbleweed Park then um so basically let me

okay where did I put them okay so I start by just doing a sketch like this oh you don't want to see it that way there we go so this is just done with the brush tool I'm just laying out the room and giving myself some quick indication of what's going to be in the room and if I'm not sure something's actually going to fit at resolution I actually draw it in hard pixels so that I make sure that we can actually put a machine with all of these features you know Ron will sometimes give me 10 whole pixels of space and tell me that he wants the thing to have mechanical arms and a keyboard and uh a place for the keys to show and paper coming out of it and um 15 lines of poetry in Aramaic uh and I have to figure out how to do that in 10 pixels so I I will now and then make

sure it's possible before I start um once I uh let me actually do this slideshow style pardon the delay here things I didn't anticipate okay so then I will start just coloring the room in trying to get a better sense of the space and then I start making these templates this is how I actually light the room I will create a pool of light I will create a bunch of them wherever there's supposed to be light on the wall and then I will use magic wand uh selections on those things and start just using Color balance to add yellow

to the wall and I'll start with the center circle and then I'll add a little bit more yellow and then I'll go to the first the center and the next circle out and add a little bit more yellow and you know or blue or green or red or whatever but basically I'm using Color balance to add light width and using selections to do it it is very important to turn every possible box to nearest neighbor you have to do that in general preferences you have to do that in free transform you have to do that in image size there's there's so many places to turn every to the interpolation to nearest neighbor you have to turn anti-aliasing off on every tool you're going to use your selections cannot be aliased your pencil cannot be aliased your fills cannot be aliased everywhere you can find an anti-alias box you have to turn it off you're probably going to be using the pencil tool almost exclusively if you want to do eight bitsh art in Photoshop um there are are ways to do uh

anti-aliasing a little more easily than in the old days uh so here's a jaggedy line that I want to anti-alias I will make a selection of that line I will move it over one I will press alt and remove all of that selection that is still covering the line and then I'll just adjust the color I'm going to hide the selection so that I can see what I'm doing and I will just every now and then Photoshop tells me something I know just to make sure and I'll adjust the color and then bringing that selection back I'll just move it over one

and I'll adjust the color and in this way I can very quickly adjust all those Jags at once I'm doing this with a mouse now at home I work on a 21in cintique which is a lot less awkward than doing this with a mouse I have to say so when I'm done and then I'll do this up above as well and when I'm done I quickly have anti-alias that whole line without going through one pixel at a time but an awful lot of this still needs to be done one pixel at a time uh so we've had to make some other decisions too we started out by uh we started out with a lot of dither let me find the radio station here so in the old days I was sort of the dither guy I was the one that convinced everybody that dither was a better way to do DGA and then I just kept doing it in VGA so you can see all of this dither in these walls um virtually all of that

was actually placed one pixel at a time I used the pencil tool to stamp down all of those things in these funny patterns that turned out to be not very viable we have way more backgrounds than you've seen there are going to be way more by the way all the artwork you're seeing here is in progress a lot of it isn't even fully colored in yet it's all subject to change I just want to do that caveat as we're looking at it so we decided to go with bands of color in instead so an awful lot of our rooms now going back to dolores's room you can see that rather than dither I am just doing concentric bands of color this is how we're shading things this is something there's actually time to do times the dozens and dozens and dozens possibly hundreds of backgrounds I'm never sure when Ron is going to give up and cut it out every time I think I'm caught up he comes up with another great idea it's like one of those anxiety dreams where every time you reach the

front door of the Haunted Mansion and are about to run outside it opens onto a new hallway full of twice as many ghosts it's a marvelous experience I want to make that clear Ron wherever you are very happy to be doing it but um uh so we are we are now using banded color rather than dithered color uh as I mentioned we are no longer holding ourselves exclusively uh to 256 colors in fact I'm not even holding myself exclusively to 1500 colors if I need to we just want to make sure that it looks like it and feels like it but don't actually go counting the colors so I'm going to go ahead and show this slideshow now and before I go on to talking more about Real 8bit Techniques all of you who have come here to talk about 8 bitsh art I'm hoping that perhaps you have questions and we're going to take 10 or 15 minutes right now to give you a chance to ask those

questions there are mics there and there in the aisle if you have a question if you could please come to the nearest of those mics and ask it I would be happy to answer them um I've told you some of the the most basic things the importance of nearest neighbor the importance of turning off anti-aliasing the importance of using selections I find it's much easier to fill any color in and then use either the color balance or the Hue value saturation controls to slide a bar around and find the color you want then it is to go into the palette and try and find the right color or make the right color like you might have done in an earlier tool so I'm going to start here and then just go back and forth so what's your question so as you grew as an artist using tools that were newer and newer and using techniques that you were and others were developing would you say that your taste in 8 bitish art changed from 8bit or do you think that your taste is was pretty solid and that's just the tools have changed um

most of the artwork that I have done for the past 10 or 15 years has been 32-bit high resolution artwork for all sort concept art and game art and art for various public publishing applications that's where my art went because when Gary Winnick first met me and asked me if I wanted to work for lucasfilm my first comment to him was I would love to work for lucasfilm but I am a died in the wool technophobe who's never touched the computer and I'm not sure I'm the guy for you and Gary's response was we find it's easier to hire artists and teach them to use computers than it is to find computer technicians and teach them to be artists I would say that the EGA pallet is proof of that um so that's what he did and the rest is kind of History uh but the truth is I have always primarily been in it for the art um I am not a big gamer I am certainly not a tech person to this day I'm pretty much an artist so as the tools allowed us to do more and more art I did more and more more art however as I said earlier I have never had as much fun

creatively as I did figuring out how to take this tool further and do things with it that made the pictures better even things that nobody ever actually saw coming so I really I enjoyed the creative experience of using limited color palette more than I actually enjoy the the Contemporary tools but I like the product that I'm getting out a lot of the Contemporary tools I like the fact that I can take those images everywhere I want to take them without constraint so it's a yes or no answer yeah thank yes yeah um what I'm trying to uh ask you here is like um I see the the the 8ish um artwork you're doing right now and I think it's uh biggest uh string um actually all of your art it's biggest string is the color itself so um do you have any tips uh as of if it's good to start with pixel art or if you should like do oils on other sort of traditional media to learn about color and how to reach that

sort of uh color Harmony in your work because that that's really what shines here for me well that's a really good question thank you for asking it um one of the biggest challenges I think in this age of digital art is that lots of people both administrators and employers and even artists themselves think that we have created tools that somehow do some or all of the art for you and that is not true um when I was working at a software contractor a fairly large one in Seattle a number of years ago I was asked to Mentor a number of young artists A lot of them coming straight to us from places like digipen you know in their very early 20s and I was working with one of those artists too who's a really very good artist these days in fact he's he's probably one of the most important artistic assets of his company at all but he was trying to do in a 3D environment he was trying to do a desert scene where there was bright sunlight on these structures and he wanted the Shadows to have that sort of dark cool look that they have but he couldn't make

it look right everything was just looking like big blobs of spilled ink so he asked me to come over and tell him you know how can I fix this and I said well I think you just need to ask yourself you know where is the light in those Shadows coming from and he said the secondary light source I said no I me he pointed at the interface there's the secondary light source right there on that little Globe no no I mean those aren't black so there's light in them from somewhere they're Shadows so it's not the same thing that's lighting up all the sunlit parts where does the light in a shadow come from and he pointed to the color wheel and I realized oh my God he he doesn't understand I'm asking questions about the world he thinks I'm asking questions about his tool and eventually we got to the point where he remembered to think while working in this 3D interface he remembered to think about a planet where the the star casts a warm yellow light and the sky radiates a blue

interference and it's that blue Skylight that is filling any light you see in a shadow and so the Shadows so we started once he started thinking about the real world and how light functions out here he was able to answer his own questions and do this thing but sometimes people don't think past the tool all of which is a long way of saying you still need art skills to do art in any digital environment if you don't know what you're trying to do and understand how it's done outside of that digital environment it's very unlikely you're going to make the tool do that part for you you've got to know what you're attempting to do so yes it's great to learn as much about art outside digital tools as you can and if you're going to learn art inside digital tools which more and more of us are going to do these days you need to first use them as virtual traditional media kinds of tools not as technical rendering tools because until you can do what you're trying to do with traditional media you're going to have a very hard time doing that in digital media yeah having said that

there are some things about using even digital media that I will just quickly say first of all um in some of these outdoor scenes like this Vista scene or some of the Street Scenes that you that you've seen there it is very important for me like this it's very important for me to do the sky and the background landscape first I can't uh let me get out of this just for a minute and actually pull up one of these Street Sheen and show you what it looks like with the sky turned off so where is B Street okay so oh these are

jpegs sorry I rearranged my entire desktop this morning so there wouldn't be a lot of confusing icons on the screen and now I am paying for that lack of foresight here you go okay so here is B Street let me magnify this a little here are some of the couple layers

involved if I turn off the sky all of the Skies I usually work with a cintique which means that the screen is a different size too I don't think this menu is going all the way to the bottom okay all right you can go away now hello really okay all right without the sky these buildings look like this I would have no idea to make anything on those buildings this color if it weren't for boy I hope this isn't as

tough why is that happening hello all right if it weren't for this blue sky behind this building I would have no idea what color to make anything so the first thing I do is turn off you know is turn off everything except for the background and do that and then I draw the buildings into the background because the sky and the light in the background tells me everything I need to know about what color everything else is going to be um another thing I would say is that when you're talking about my color sense in general contrast has a lot to do with why things work and I don't just mean contrast between light and dark I mean contrast between saturated and unsaturated color it's very important to have both in a drawing saturation I mean contrast between warm colors and cool colors it's probably pretty important to have both even if you're even if you're doing an underwater scene that's almost entirely Blues greens and purples there ought to be a little red and orange in it someplace or yellow something because

something that has no warm in it or no cool in it it's going to look monochrome and kind of boring so I try and make sure there's saturation contrast that there's color contrast and that there's value contrast in everything I do um uh pretty much anything you could say about standard art Theory would probably apply to digital art and you have to know that stuff because the tool doesn't know it for you yeah so I should go on to another question now yes you hey uh I have a question about your time of day shifting 8bit palette stuff where you change the color palette in order to do time of day which is really cool thank uh how do you paint it when you're actually like in iteration on it though okay so what I do is I paint it it in one time of day I often just start with morning where you know all of the faces for me left is just sort of inherently East West is kind of inherently right um I just have all the light coming from the left hand side of the picture and I

render it that way but then if I have a stretch of a rock Pinnacle for instance that has first of all I use very few colors when I when I'm doing that pretty much everything except the sky is three to seven colors for whatever the structure is is this because of pallet limitations you because of pallet limitations and here's why if I want sunlight to hit the top of that Rock Spire and then during the day moved down in the morning there's going to have to be a highlight side that looks like it's got three colors in it but each of those three colors is actually going to have to have a dithered gradient of five other colors in it so that some you have five colors that all look like the same color in the morning but as the light changes some of these colors get darker or lighter and change Hue so you're actually going have a whole bunch of colors in that one little strip of highlight taupe um that are going to have to change at different times of day so if I'm using more than three to seven colors for any object times four or five iterative colors

inside each one of those colors we're talking about a huge number of colors for this Little Rock Spire so no matter what feature I'm drawing except for the sky probably doesn't have more than seven colors in it and if possible five or three for Sky I use 16 to 32 colors Max I do that so that the dither won't be as a parent if you really want to hide dither the way to do it is a long gradient where the difference between this color and the next color in the dither gradient is so subtle that people don't see it clearly um so Sky I use more things for and then I try to reserve half the pallet for color cycling effects half the pallet will be color cycling ramps that can't obviously be used anywhere else in the drawing or you know trees and buildings would be flashing strangely so I have to use half the pallet for that which means another reason to constrain all of the static parts of the picture to as few colors as possible does that answer your question at all well do you paint with one pallet at a time so you can actually see

positional like red is Eastward and blue is Westward like do you paint with those types of palletes what I did was I I would make one picture and then I would move it to a different time of day and I would render it at that different time of day and I would just keep doing that to this one file until I had done it to the entire cycle I would usually start in the morning and go through the day till evening and each time I go to a new time of day there's a few more things I need to add to the picture to do that but I do also a very simple map of the picture first just you know very solid color blocked out picture so that I can have some sense of what I'm going to need light to climb down on because if I know that I'm going to need light to hit this first and then this and it's going to need to climb down these surfaces or up these surfaces right from the start I you know when I go to put in that highlight color I don't just put in the highlight color I can actually just fill it with a gradient of five colors knowing that I'm going to need to you know they're all the same color now they look like one color but but I'm going to need to change them as time goes by does that make sense yeah it does okay great

thank you yes hi you said you did all your dithering uh by hand pixel by pixel is there any kind of methodology or mental process you use when you're creating that or yeah it would be difficult to explain verbally right now but basically I mean I you know back in the EG days I was doing most of that by hand too if you're using a pattern that repeats obviously you make that pattern once and you stamp it down as brushes but a lot of times um um let's see here when you're doing something like this obviously in areas like these there isn't any repeating pattern for you to use so the idea there is that you start with a checkerboard and then it's every second pixel and then it's and you move up and you're always adding a pixel each time you want the dither to be more diffuse you're adding a pixel vertically

and a pixel uh horizontally to your spaces and that just creates a kind of branching pattern that reads fairly smoothly back in the days we did this CTR monitors were so blurry that we actually counted on the blur to sort of fill those colors in and blend them for us that's no longer an option either but um it didn't look quite this Dotty back then but it was still an improvement so there is however some something that I do and I I'm really glad you asked this question in the8 bitsh art that I forgot to mention uh even though it's all on my outline I I I make an outline and then I leave it home usually I brought it this time at least that's a step forward um I actually create dither templates first uh remember when I was talking about making lighting templates and then I just select the layer well I select the lighting template layer and I I use a magic wand selection of the center circle and then I go back to the wall and I just add some yellow to it and then I select both inner circles and add some more yellow to it well I do the same thing with dither a lot of times

there's a lot of times when you just need straight banded dither or you need a straight kind of circular dither pattern or a particular light shape of dither and when you when there's when there's a dither sort of pattern like that that you're going to need a lot of times you can just make it in Grays in a grayscale dither and keep it as a file someplace and then you can drag it in as a layer and put it you know on the layer above or below this and you can just S one of those colors and then go back to your layer and move color balance or HSV around until you get the color you want and then you select the next color in your dither pattern and just in if you want me if you want to see me do this I'll I'll do it in a minute later um but that way you can actually very quickly dither a large area with horizontal or circular dither because of course Photoshop does not have dither gradient fills uh they just didn't see that coming I guess thank you so yeah yes good day I just had a question I guess it was kind of more centered on EG

technology uh so that's a very good screenshot for it um when you're working with colors uh in the EG palette which is 16 colors M uh in an 8x8 pixel chunk is it similar to like the Commodore 64 where you're only limited to using two or four colors of that palette or can you use any of the 16 colors in that 8x8 pixel chunk and if it's the former how do you plan around that in your artwork you're talking about EGA environment here or an EG okay so EGA you could use any of those 16 colors anywhere in the picture okay cool CGA which came before it you were limited to four colors per little chunk of the picture okay but when we went to EGA we could put all 16 of those colors all beautiful 16 of those colors anywhere we wanted to in that picture whether we liked it or not geez thanks very much yes yes hi first of all I wanted to say You're really inspired to me when I was a little kid my dad actually showed me some of your art and it was just so mesmerizing and

amazing to me and now that I'm a little older I want to start working on like pixel art and stuff seriously so I was curious if you like had any advice for someone who's just getting into it and like what are the best programs to start learning right now the best program I can think of is promotion by Cosmo if any of you are interested in sort of keeping track of what Joe Huckabee is doing because I think he will be producing an a a far more flexible tool sometime next year uh his Twitter handle is Just J Huckabee that's J hu kab Y and he may have a better tool for you next year uh in terms of other advice you know I would basically say one of the great things about using 8bit art today as digital artists is that in the old days we were trying to create a commercial product with commercial imperatives within a very narrow time frame and within a very limited uh bunch of storage capacity there was a

whole lot of things you had to do when you had to do very quickly the beautiful thing about doing 8bit art today is that nobody really needs you to do this in some commercial template to a certain schedule and within certain limitations which means you're doing this for yourself so take it as far as you can take it you know do what you love we couldn't do what we love in those days I did all sorts of things I could love and Ron rushed in and told me why for technical reasons I could not do that so that was the experience you don't have that today so really enjoy the freedom of doing 8bit art in an age that doesn't need 8bit art just wants it that's you know that like marriage it's better to need your partner than to I mean better to want your partner than to need her my wife is in this audience too sorry Shannon I'll get this right someday um it's better to want your partner than to need them well it's better to want to do EGA art than it was to need to do EEG art I mean 8bit art back when we did it

so anybody else got any other questions no then I am actually going to uh check to make sure I haven't left anything really crucial out of my8 bitsh um oh yeah I was going to show you this uh I'm putting glasses on over my glasses someday you'll be this old too don't laugh too hard okay I don't know why that's happening but it's really annoying me okay so underneath this I have this this is a dither template and hopefully that's big enough that you can see how that's arranged on top of it I just have a solid color so if I want to apply dither to that color I just select SCT this tap it with the wand go back to

this I'm going to hide the selection for a moment and then I will just slide it to the color that I want and then I will go back down to this gradient and tap it with the magic wand and go back to the layer I'm dithering hide the selection so I can see what I'm doing and then go back and this is ever so much easier to do with a whack stylist than it is with a mouse then I'll go back tap the next layer of dither hide the selection and do the color I want and I can just go straight up that way I don't have to place a single Pixel with the pencil tool I've already done that and I can create these dither templates in promotion I can just fill a screen with an actual gradient fill and turn it save it as a BMP and drag it into Photoshop to use as a template here so I never actually had to create these templates by hand I let promotion do do that uh the only problem you're going to get into is in a in a room where you have dither in all sorts of funny shapes one

of the great things that promotion and daint and tools that were made for index color art have is they have gradient fills including a contour fill that will fill conforming to the shape of the space you're trying to fill in a variety of different ways there is no way to do that in Photoshop except doing it by hand uh or taking that shape into promotion as a BMP filling that shape with a contour gradient filled air saving it as a BMP bringing it back and using that as a template uh you won't be able to you it probably won't be in the colors you actually want it to be but it'll make a nice template for you to arrange those colors with uh um color balance and um Hue value saturation slider bars so um [Applause] so okay so I am going to now talk about the effects I did with color cycling

um I'm going to kill Photoshop and hope it comes up well when if we use it again so uh I'm going to go back to Joe Huckabee's website okay so um first of all this moving Mor of a waterfall um in here I'm going to sort of show you how that was laid out and done because there are a number of things you would need to know

uh best laid plans of M and men now okay why isn't promotion opening this file there we go okay this is how you make a waterfall first you start with a template to pour a contour gradient into a vertical Contour gradient in this point you're going to going to want that vertical Contour to repeat now the way to control the speed of your motion is

with the length not the speed of the gradient so for instance as the water first starts over the falls here it looks like it's moving very slowly by the time it's pouring down the front of the falls it looks like it's moving much more rapidly the speed of the gradient isn't changing that's all one gradient at one speed but by putting that gradient in very short little segments it only has to move that that color shift only has to move three pixels of vert IAL distance down here that color shift needs to move 5 10 pixels of vertical distance it has to all happen in the same period of time so that color shift is going to happen faster in a long gradient than it is in a short gradient so you're going to use vertical stuff to control your speed so you want the things at the top to be shorter vertically and the and the spaces at the bottom to be longer vertically while you fill it with that uh Contour gradient so that your waterfall pours slowly over the lip and then picks up speed as it falls secondly these little yellow bands in here are to bridge the seam between these gradients if you just make

different segments and pour the same gradient into it the the transition between each color in that cycling gradient is dithered until you reach the end of the gradient then there's this sharp cut off between the last color in the gradient and the first color in the gradient and if you leave it that way there will be this knife edge line where things flash in the middle of this otherwise smooth movement so you actually need to fill those little yellow margins with a vertical gradient and put the top half fill the top half with the last color of the gradient above it and fill the bottom half with the first color in the gradient below it so that there is never a point at which you just have a hard Edge between one color and the next uh so that's what I'm doing in these first four things I'm putting in I'm filling this with the bottom color and this with the top color then you want to create a checker board to create the semblance of transparency transparency is something you don't have in an 8bit art file uh usually at least

you certainly didn't when we worked with them so you create a uh a checkerboard dither and you fill one of the colors with your with the pattern the cycling pattern you just made and then you move it over slightly and you fill the other color with it so every other pixel is showing you one iteration of that cycling texture you just made and the pixels in between are showing you a different one and that way you can sort of cross this pattern with itself to get this sort of moving Mor that you see over here so one pattern transparently over another by simply filling the two patterns that you want to be transparent into every other pixel then you're going to create that very same pattern remapped

to the very to different gradients with the same number of colors moving at the same speed in the same direction but slightly shifted in value and Hue and you're doing this to shade your waterfall you'll notice that this gradient is very pale up here it's very dark down here it looks like I've rendered the gradient somehow well the the way I've actually done that is to create that very same pattern in gradients of equal length and speed and direction and then I've just created another sort of template you use stencils to put the light gradient in over this color and the next medium gradient in over this yellow color and the next and the next so that your gradient ends up it's the very same pattern it's all identical except for the the color so now you have the pattern uninterrupted while the color

changes from there you put it in its environment so you stick that in there in the rocks and it looks uh it looks pretty straight edged for a waterfall so you fill the edges you want to be full of Falls with another stencil color here a color that's nowhere else in your drawing so you can fill it easily and you take this really dark iteration of the very same pattern and you just stencil it into the edges now that dark pattern has the uh the the actual gradient in the pallet has been arranged with Cliff colors and fall colors in about equal amounts so once you stencil that with the rock colors and the Fall colors in equal amounts into these green spaces here the result is that when when the

gradient shows the Fall colors it'll look like that part of it is joined to the falls and when it shows the rock colors it'll look like that part of it is joined to the rocks and it'll make the edges of the fall seem to waver between the rocks and the fall and then you create some you know some water down here this particular Falls with done for a game that was actually not just 8 bit it was a character set game so these were all actually characters that you could just pick up and stamp down on a grid to make any kinds of Falls now you're going to make the Foam at the bottom you do that by creating a contour gradient fill into a pattern like this and then remapping those things so like this this is the the boiling foam at the bottom of the fs but because I've just filled it with the same gradient you can see how it flashes dark light dark light that's because the gradient is all

happening in all of these little cells at the same time and that doesn't look very good so once you've created that thing you create a what I used to call a clown color stencil like this and you fill a couple of those cells with the same number of clown colors as there are in your in your cycling gradient and you map those cycling colors to your gradient and then then you you you remap them with the gradient so that those cells look like this and then you uh you take some more cells and you map them in the same clown colors but this time you remap them so that whatever was the center color in the last one you start two colors up your gradient and remap them so that here in in this uh cell it's it's starting with color number one in that cycling gradient but in this cell it's going to start with color number three and you remap those cells and then you repeat the process and in the end instead of

this flashing gradient goes bright light bright light bright light you have this one where the different cells are going bright and dark at different time so that the overall Mass doesn't just flash at you I hope that made sense if it didn't I am going to be doing more Q&A and going to the Q and actually we have this room for a little longer so anybody who wants to stay at 11:30 I'll continue answering questions and you can say I didn't understand a thing you said try again so to do misted same sort of thing I create a clown color template to fill in with color cycling gradient I create a color cycling gradient that will go over the falls and a color cycling gradient that will go over the rock spaces I did this with a gradient fill distorted which is something you can do in an actual 8bit tool pretty easily usually and then I fill in those clown colors with those gradients so it looks like this and then because this was all done on character boundaries I was able

to um see if I can get my menu here I was able just to pick this up oh helps if you have a grid on okay no I'm not yeah there we go so I was able to pick this up and sure yeah all right never mind and flip it and make a waterfall of my own it's been a while since I've used a lot of these tools in case you couldn't tell so that's how I made a waterfall now I'm going to go through some of these other things very quickly actually it's 12:30 if you want to stay I'm going to go through some more of these scenes and tell you what I did to make these things if you need to go thank you very much for coming and uh I hope it was worth something thank

you so apparently there's not another session in this room till 2:00 I am not going to stay here till 2 o' don't worry but uh I will stay for up to another half an hour talking as long feel free to leave anytime you want um I will not take it personally so with the snow here um I'm actually going to open daint in a Doss box now this should be very entertaining even more entertaining than my use of more recent tools so with the snow what you're actually seeing is this I can ask question so you're actually seeing a snow pattern that looks like this it is one grading of about seven colors where all the colors are tuned to a single color except for one pet

position that is tuned to a snow color then I'm going to lay it over the picture like this only I'm going to identify color families in this picture dark Browns dark greens Grays whites and I'm going to create so right now you see I have a whole bunch of these uh cycling gradients they are all the same length they are all the same speed the snow color is positioned at the same spot in all of them now I am going to now you can see where the the different gradients come and go now I am going to map those gradients so that gradients that look the

same you can see that although these gradients will all have the same white dot in them gradients where the rest of the gradient is dark brown will go over all of the dark brown or black areas gradients that are dark gray will go over all of the green areas and I'm just going to copy that same pink pattern you saw only colored appropriately using a stencil and the grid function so that they're always laid down exactly and aligned with the others using a stencil for just those colors I want to cover I'm just going to stamp that pattern down five or six times over this whole picture and the result will be this and here I've left a couple of the colors un stenciled so you can sort of see see them if you're looking now and and down here I would need to do another gradient to do these Browns cuz it's it's kind of

showing right now if you're looking you can actually see those stripes all throughout the picture but because the all the colors in the gradient except for the snow color are so similar to the static background colors they are up against it looks without looking very carefully as if you've got little white dots moving transparently over a space when in fact they're embedded in it so I cannot actually get out of this dos box without doing this now I can get out of the Doss box these are part of the problems with the dir of tools here so I can't magnify this anymore but if you really look now you will actually see little Trails of background color I've just made sure that the background is filigre enough so that those Trails will not actually be very visible so that's what's going on there that's what's going on with the rain here it's the same

thing and there this that seawater was the same thing as the waterfalls this Mor pattern here there's something called the the wavering Edge remember in the waterfalls where I the edges of the waterfall with a gradient that was half the color of the rocks and half the color of the waterfall I'm making the fish flap their tails and everything here I'm making these corals and things seem to waver around by just putting a one to two pixel Edge on them and filling it with a linear cycling gradient fill that is half the color of the coral or the fish and half the color of the water around it so it makes those shapes seem to waver uh it's the same thing I do with um a reflection in a

pond so you see how the mountain seems to waver and the trees seem to waver there that's that static art that simply has a one to two pixel outline on it and is filled with gradients that are half the color of the image that's wavering and half the color of the background behind that image and it makes everything appear to waver it's also a really good way to do Flames so for instance in the uh there isn't actually any way to view these things except on Joe huckaby's little demonstration here so I'm very grateful for it so the flames in this scene this is another place where the gradients in these Flames are all different lengths and different speeds so that they move at different Paces if I had made them all if I had made the the light the yellow the light orange and the dark red gradients all the same length and the same size then these

Flames would have gone flash flash flash at you but because of the fact that the yellows and the oranges and the reds are all moving at different speeds from each other there isn't anything synced up to flash here so it's just a fluid M movement that keeps going this fire light on the back here same kind of thing I did with the snowflakes or the waterfall actually where the waterfall is light at the top and dark at the bottom I just made I I used a checkerboard dither to create this Moray pattern by putting moving bars that were diagonal to the upper right into every other pixel of a checkerboard and in the remaining pixels I made the same pattern move diagonal bars moving upper left then I took that texture and remapped it to five different gradients in five different colors from a very light color in here to medium colors to these very dark colors out here and when I had five identical pieces of text T in five different gradients of different colors then I stencl various parts of the Rock and simply popped that cycling texture

aligned with all of the others into the proper part of the Rock and you end up with this pattern moving over what seems to be a textured area so for instance no not that one mountain storm where is Mountain storm up up tell me when direct there we are okay so again it looks like I have a transparent layer of moving cycling texture over these clouds but I don't actually if you took all the static cloud away you discover that that's a solid piece of color cycling texture but it is mapped to different values so this is the very same pattern in a dark value here and the Very same pattern in a light value here just remapped to the various clown colors of my general Cloud sculpture behind them so is that making

sense you understand what I'm saying great does anybody have specific questions about any of these color cycling effects you've seen so far that you want to ask but I can uh back in the days when daint worked and was of resolution to actually fill the screen and everything um depending on the complexity of the scene it probably took somewhere between two days and a week and a half for one image uh because some of this is very meticulous it depended on what they wanted you know if they just wanted moving water that probably took me a day and a half if they wanted falling snow that took a week and a half you know it depends on what you were trying to do you can still make these in promotion you can still make these in promotion in fact I'm going to try and get promotion to work again let's see yep no come on just oh screw it yeah I don't

know what's with my computer all of a sudden I don't know why all my menus are insisting on being in the middle of the screen that's new is it oh it's probably because it's attached to whatever is projecting it that's interesting all right well you'll still be able to see some of this okay so that waterfall was actually done for this Spyro game the waterfall that I demoed the construction of earlier jeez oh this is really annoying oh good look at I moved it so um these scenes were done in promotion and you know you can see that I'm doing most of the the same things now these effects are a little cruder than the ones in the Landscapes I'm showing you

in the Joe Huckabee demo because this was a character set game so I not only had to do all of these things in the in the pallet constraints that I told you for 256 color picture but these scenes all had to be made out of 200 and some odd C characters that were repeatable so I I couldn't even be free form with my 256 color palette I had to do little 8 pixel by8 pixel characters out of which all of this was constructed so you know here you see this Mo pattern I try to reserve half the pallet um again going into the uh the demo here uh in this piece the color cycling starts here everything from here down is color cycling everything most most of this picture is not actually static color so the all of the static part of the picture is in these top four rows well four and a half rows I guess five

rows these top five rows of the whole picture going back to those storm photos the entire picture for all of those scenes is that big I didn't even use the rest of the pallette because we were going to put color cycling we did put color cycling effects over these pictures you know storm has a special power that raises the hurricane well then we have wind blowing over them that's made visible in various ways and all of those things were going to require the rest of the pallet so all nine of these scenes use this much pallet space um for the the scenes that you saw there so yeah you learn really quick quickly to make minimal use of colors and I should have said this when everybody was still here but um what you really

want is you want one to three highlight colors and you want one to three Shadow side colors what I call Bounce light colors and you want one what I call turning Edge color so when an object is lit the light hits it from One Direction and that's the bright side of the object some of that light misses the object and bounces off of things behind it and sort of lights up py the backside and that's the shadow side of the object and then there's this little Zone down the middle of the object where light is hitting it neither from the light source or bouncing back from other things and that's what I call the Turning Edge it's usually actually the darkest part of an object so I have highlight colors turning Edge colors and Shadow side colors really sorry I didn't say that while everybody was still here and um at the very least at these resolutions you need one highlight color one turning Edge color and one Shadow side color at the very most you probably need three highlight colors you know three little iterations of the bright colors on the bright side and three Shadow side and

one still turning color and I arrang them as turning color gradients so bye that was my wife I don't blow kisses to all of you I'm just warning you now um so you won't be disappointed let's see I guess I'm going to have to do this in D paint actually back to dosbox okay so in this picture we're really only the watercolor

Cycles I have all of these trees and you can see that there are lighter colors over here and there are some slightly lighter colors over here and all the dark colors in the middle of the picture so those trees are these colors probably right in here or maybe actually I guess it's these colors in here and I don't know I can't make this any larger cuz it's daint and that resolution used to fill a whole screen and that's as big as it gets now um but the the side facing the light is over here and then these are shadow colors now these trees were really large so I gave them some extra colors but then there's the Turning Edge portion of the of the ramp and then there's the these lighter colors at the side which are the shadow side and then I could just create a ramp like

this and I could create a a tree trunk and do a ridge gradient fill and so when I fill that tree trunk with that it just sort of comes pre-rendered do you see what I'm saying so I don't have to render the Highlight to the shadow um it just sort of renders that automatically I think I actually got parts of two gradients in here which is why it looks funny folded but I try and arrange my ramps from highlights through turning Edge through Shadow so I can do uh gradient fills that just render a thing for me by filling it with the gradient instead of having to go in with the individual colors and you know color all that kiso so now I'm going to hit control alt delete to get out of

dosbox any other questions you have yes so this isn't more this is not really a question this is more of a I just wanted to tell you that I think the artwork that you're doing is brilliant I feel privileged to having been here and experienced this tell you I feel like we're looking at like a master of his time and I want to see him no I mean I just said chill watching this so I just want to tell you that you know everyone here think I'm speaking on behal everyone here that this is masterful artwork and I just feel privileged to having got to see this so thank you I really appreciate that well thank you I mean when we did these originally they mattered for really practical logistical reasons storage processing time refresh rates on screens made doing full screen animations of environmental stuff like

this impossible um this was the only way you could do this kind of Animation now of course we live in a world where the resources are virtually infinite and getting more infinite all the time so there is no compelling reason practically to be doing any of these things anymore one of the reasons there are so few tools to do it in but as an artistic as a creative expressive Act I think that it really does put you in a a space that nothing else does so I applaud everybody who's actually going there to see what they can learn and what they can create because you end up taking the sensibilities and the kind of thinking processes with you back to those other tools are you waiting to ask a question yes oh so I just like a really quick observation and then a practical question so the observation I've also been trying to think about why this is so visually compelling like I love this I love your work in this whole Style thank you um and I just had this thought while watching this that maybe some of it has to do with a kind of a crisp Precision to the use of light that is

very hard to do in um you know in in 3D or in a lot of other media like the treat like I've heard you talk about light a number of times um today right and like there's something about the way that light gets gets handled that makes me think actually about like Photo realistic painting or um you know someone the surrealist like mcre or something like that that is very hard to do in other um you know in other styles but anyway so the Practical question is about the uh the dither templates so um I have really like I don't really have a lot of patience so this is I guess why I've never really been successful at doing this style but so like that was revolutionary using this like the the dther template Hue and color shift technique and so then the thing that immediately then came to my mind being lazy is like could you write like could I write some code that would then construct dther templates in different patterns and shapes and different I have no doubt that you could in fact I've seen people do it I I had a friend once who actually wrote a tool that would

allow me just to paint moving snow in actual color cycling over a scene this tool actually registered what was beneath the mouse what was beneath the cursor at any moment and you created you still had to create the the cycling things but it basically as you went pixel by pixel over the screen it just determined which of those gradients was the closest to the pixel you were over and just assigned this matched up dither pattern to those pixels as you went down and you could just paint falling snow over a scene in exactly the way I did except the machine did it for you so there are undoubtedly ways to animate the tedious parts of this and it is tedious it's tedious and it requires patience um uh or it requires exactly the kind of code and tools you're talking about I suspect strongly that Joseph huab knew pixel art tool will actually be providing opportunities to automate a lot of these things as well as working

in very high resolutions as well as giving you access to layers of pixel art and other things that you know are available in promotion but um sometimes rather awkwardly yeah thanks so anybody else you yes yeah F first of all thank you so so much for that information I know this web page for a few years already I as far as I remember I'm from demo scene and I was pixeling Art in on Comm 64 Amiga t s so I perfectly know let's say what I were talking about those uh low pet uh modes and low resolutions of course I never been able to do such a beautiful Graphics especially color cycling at you and I was working on using the promotion uh um software for GBA pixeling uh while um I could recommend if you can check it out there's additional freeware software for pixeling a graphics 2 uh graph x uh second it's a free of church and uh it's really cool so if you want to check it

out it's great and uh once again thank you and I'm waiting for that new tool for a pixeling yeah well keep keep a watch on Joe Huckabee because that's where it'll be coming from and I I certainly am going to be interested when it's accessible thank you thank you yes do you know if uh hak's new tool is going to out for plugins and extensions so that you could actually well the amazing thing the great the reason that this tool doesn't exist right now is that Joe's day job has pretty much prevented it uh Joe's going to be taking a Hiatus from that day job in just a couple months at that point Joe is an independent developer and a very accessible person and I am pretty sure that Joe would welcome any input from anybody who has things they're hoping the tool will do or hoping the tool will include or helping the tool will improve prove on so I cannot tell you for sure everything that's currently in the tool Joe's working but I can tell you he's a brilliant guy who if anybody can

incorporate input knows is going to know how to incorporate input it'll be Joe and if you are looking for specific features I encourage you to tweet him or uh you know find him in the uh sure out there in the Cyber Frontier someplace and tell him what it is you're looking for cuz now is exactly the time when he could use that information sounds great thank you great thanks yes I I just a quick question about um your setup in Photoshop like what's the canvas size like what ah well for this project we are trying to create a game that looks at about the same resolutions so our our screens actually have several resolutions but they are anywhere from 128 pixels High to 428 pixels High and the width is dependent upon what's happening from side to side in the screen uh but they are they are similar to the 640x480 kind of resolution that we last saw in the age of 8bit indexed

color games some of them are similar to the 320x200 kind of resolution we had back in the 80s uh so for screen size was there another part of your question that I missed I guess how do you have Photoshop set up so that you get the best result because you have Photoshop you can make your own custom templates well when I do the original sketch I make sure that I'm creating a new file that is you know 128 pixels High and 4 something 80 pixels wide and then I draw in that with the pencil tool so as as long as the as long as the file you're starting on is the right resolution uh a pixel will be that size automatically and again you're going to be using only the pencil tool not the brush tool and anti-aliasing and in uh will be turned off everywhere and nearest neighbor inter interpolation will be turned on everywhere does that mean it's time to stop 5 minutes great okay so I need to be out of here in 5 minutes they've been

extremely generous to let me go over this far and um if there's any urgent questions I will go over to the AL Cove not the one straight across from the room but down the hall for a little bit to continue talking more closeup and face to face with anybody here who wishes to do that otherwise thank you so much for all of this time and attention I appreciate it very much