Sprite as GIF
Adobe Photoshop is very good to experiment sprites animation and see your sprites with background. You can check the colors interactions of them.
I advice you to find this software, a version with the animation function (better after 7.0).
When you open it, don’t be worry if it’s the first time, we will see all the tool we need
Area 1 is the normal function for your workingspace and project.
Area 2 is for tools like Layers or Swatches(Nes Palette)
Area 3 is our tools for drawing pixels, erase, select etc.
We will prepare our working-space and create a project with a size of a tv screen NES size: 250px x240px.
Go to Area 1
File > New > Width: 256 pixels /Height: 240 /RGB > OK
1.2 Grid and rules
Let’s set the Grid to help us to see our NES sprites/tiles size on the working-space.
Go to Area 1
View > Rulers
View> Show > Grid
Ok this function are activated but we need to set them.
You can notice that a ruler appear one the left and top of your working-space.
Make a right-click on it > Choose Pixel
Make a left-click > You will have a new window Preferences
Preferences > Show > Grid
Grid > Gridline: 16 pixels / Subdivisions: 2
You will have now a grid of 16 by 16pixels (good for BG rules ) with small square of 8 by 8px (Good for Sprites).
1.3 Add NES palette
Now we will add the NES palette to our Swatches on the Area 2.
Download this file (save target as).
Then, on photoshop go to the Area 3. Click on Swatches and on the little icon of a menu of this swatches you can have access to Replace swatches.
Click on Replace swatches and select the NES-palette.aco
Now you have the Full NES palette. We will use it often. You can re-size the frame to make your NES palette pretty
1.4 Create a layer and basic tools
On the Area 3 click on Layers and add new layer
Each time you want to add a new element, different sprites or object, better you add it in a new layer. It will be good to move this layer on your working-space without disturbing the other element (layers)
Now, we will have a look to the Area 2.
1. This are tool for selection. the Move tool (black cursor) is to move your layer, (shortkey: V) . Under is Rectangular Marquee Tool (the frame selection), you can select something inside your layer on the working-space (Shortkey: M) and copy or cut and paste. When you select something and then you move it with Move Tool, it will be like a cut, you can move your slection but when you unselect it , it will be like a paste.
2. The Eyedropper tool (on the top) is used to pick-up the color of some pixel you choose (Shortkey: I). We will don’t use the tool in the middle.
The third Tool is the Pencil, but maybe it’s a Brush on your photoshop. In this case click-left long and select the Pencil (Shortkey: B). Then you need to set your pencil to 1px large, you will find this settings on the top.
Now, you have your main tool to drawn pixel on Photshop!
3.You have the Eraser Tool (Shortkey: E). Like the pencil, you need to make settings on the top, 1px and Mode: Pencil.
Then you have the Paint Bucket Tool (Shortkey: G), it just to fulfill a closed area with one color.
4.You have the Zoom Tool (Shortkey: Z). You can zoom with a normal click or to unzoom with click +Alt.
5.Now we will have the colors. You can set 2 colors (front and back) to switch between front and black just press X. you can double-click on a color to choose it. (To pick-up on your Swatches, where is the full Nes Palette).
We will take our Mario bros sprites. You can open YY-CHR load the mario.chr. Select your sprites of mario. One sprite line after another. For this click-right, hold and move till the last part of mario sprite (his foot). Copy it.
Go back to Photoshop, on your new project (we create before). Paste the mario sprite (n°1). A new layer will appear, You can rename it with a double-clik on his name, write Mario-Sprite-1.
Make the same thing with the second sprite of mario (on YY-CHR). It’s the other part of the 1st line of tiles. Copy and paste on photoshop, rename the layer Mario-Sprite-2. And again make the last sprite (line under the 1st mario sprite on YY-CHR)… copy/paste, rename layer Mario-Sprite-3.
So now we have 3layers with a sprite of mario different. We need to recompose mario to have his normal form.
First select the layer Mario-Sprite-1. Then, you can Zoom in. Take the Rectangular Marquee Tool (shortkey: M) and select the part of mario (2st tiles)
Take the Move tool (black cursor, shortkey:V) and move this part somewhere, better to fit it with the grid (more easy to built all together). Then Select the second part of Mario with Rectangular Marquee Tool and move it under the 1st part with the Move tool. And so on with the 3rd part and 4th. At the end you will get this:
Good! So now, we will need to make the same with the two other layers, Mario-Sprite-2 and Mario-Sprite-3. Select correctly the layer and make it. You will get 3 sprites of Mario.
We will make animation but before i hope nobody forget to save what we did. If not go to File> Save.
After that, you need to go on the top menu of Photoshop to activated the animation tools.
Window > Animation
It will be on the bottom of your working-space. If it’s look like this click on this bottom-right button.
Perfect, now you will have another type of animation tools with vignettes.
Like with NesST software, we needed to draw sprites on different metasprite page but the sprites were on the same place. We will make the same here. We will need to move the mario sprite on each other. Select the layer Mario-Sprite-2, take the Move tool (black cursor, shortkey:V) and on the working-space move the sprite on Mario-Sprite-1. Make the same with Mario-Sprite-3 layer.
Now you have all your layer (sprite) on the same place. We can start to make animation. Create another vignette on the Animation (Frames) down.
Create a third one. We have now 3 vignettes and 3 layers. You will select the 1st vignette of this animation. Then go to Layers on the right-side and click on the eyes icon to make them disappear from the working-space.
Select the 2nd vignette of Animation and now you will put out the eyes icon of Mario-sprite-1. The 3rd vignette will Mario-sprite-3, so you need to activate the eyes icon on this layer and put out from the Mario-sprite-1.
You can check if you made it right when you select 1st vignette, 2nd vignette and 3rd of the Animation. You need to have one layers per vignette.
No we can make the duration of each frame (vignette). Click under the vignettes in the time have choose 0,1 second. Now click under to change Once to forever.
Click on play and you can see your Mario walking.
If you want to change his color, you will need to pick-up color from Swatches and to be careful to make drawn pixel on the correct layer. You can help you with Pot Bucket Tool (Shortkey G). If you have some problem with Pot Bucket Tool, uncheck the function Anti-Alias, Continuous and All Layers on the top of the working-space.
We can crop the working-space to keep only mario. For this press C (Crop tool). And select your area, press enter. Check again your animation. If all is ok we can see how to make a gif from this.
1.6 Export GIF
We will make a Gif, but before save normaly your file in psd format.
To save it as a gif, go to
File>Save for Web Devices >
Need to select GIF then on Image Size better to choose a 100% or 200% or 300% etc mutlitple of 100%. I choose 600%.
You need to set the quality. Choose NEAREST NEIGHBOOR!! it’s very important.
Save it and here’s the new Gif animation of Mario walking.
You try with other sprites
Thanks for reading!