O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with Sprites in Photoshop

When it comes to working with sprites and tiles in Photoshop, it is important to set up your grid and guides to help get a better sense of the dimensions of each tile, especially when there is a lot of transparent space around the sprite. You can easily do this by going into Photoshop’s Preferences menu and selecting Guides, Grid, & Slices... (Figure 2-6).

The menu where you will set the guide size to match your sprite tile size.

Figure 2-6. The menu where you will set the guide size to match your sprite tile size.

From here, you can set the guide size to match your sprite tile size. For our game, all the sprites are 16×16 or 8×8 pixels. By setting the subdivisions to 2, we will be able to see grids that work with our character sprites and level tiles as well (Figure 2-7).

How to navigate the Photoshop Preferences menu to set your grid and guides.

Figure 2-7. How to navigate the Photoshop Preferences menu to set your grid and guides.

Once you set this up, just turn on grid view from ViewShowGrid. You can also set auto-snapping to the grid, which may help align sprites more easily.

Now you should be able to see the grid around your sprite.

Figure 2-8. Now you should be able to see the grid around your sprite.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required