Create 8-Bit Pixel Art with Photoshop (Part 1 of 3)

Transcription

1 Create 8-Bit Pixel Art with Photoshop (Part 1 of 3) Get Notifications Create 8-Bit Pixel Art with Photoshop for a Game (Part 1 of 3) by Alexandria O Brien In this tutorial I ll go through how to create a few different game sprites in Photoshop CC/CS6 using that retro, 8-bit pixel look. The game items and characters that I illustrate will be based on my favorite game genre: fantasy, adventure. Note: If you need to see a larger version of any of the images, just right-click and view the image in a different tab.

2 Setting Up Photoshop To Make Pixel Art Source: Pixel Art Photoshop Tutorial ( 1. Make a new square document anywhere from 20 to 100 pixels (depending on how large you want your sprite to be). I m going to work with a 50 px canvas. Width: 50 pixels Height: 50 pixels Resolution: 72 Pixels/Inch Color Mode: RGB (8-bit) Background Contents: Transparent Get Notifications Figure 1: New pixel file in Photoshop Figure 2: New blank canvas in Photoshop 2. Get your tools ready: select the pencil tool (under the brush tool dropdown menu) and set the size of the brush to 1 pixel. Select the eraser tool and change that to be 1 pixel in

3 size, and the mode to be pencil. Figure 3: The Pencil Tool is under the Brush Tool dropdown menu Figure 4: Change the Get Notifications pencil tool size to one pixel Figure 5: The eraser tool set to 1 pixel in pencil mode. 3. To help show where the pixels are on the canvas, we ll turn on the grid view. Adjust the grid view setting under Edit>Preferences>Guides, Grid & Slices. Change the grid to show every 1 pixel (with 1 subdivision). Click OK and then turn the grid on so you can see it. Go to View>Show>Grid. Figure 7: Change the grid to show every 1 pixel

4 Figure 6: Adjust the grid preferences Figure 8: Turn on the grid 4. One more change go back under Preferences>General and change Image Interpolation to Nearest Neighbor (preserve hard edges). Get Notifications Figure 9: Change Image Interpolation to Nearest Neighbor Now you re all set to start making pixel art! Make a Character Every good fantasy adventure game has a hero. We re going to start by making a single character sprite.

5 1. We ll start with the 50 by 50 pixel file we set up. Since we made the file with a transparent background, I m going to add a Solid Color background layer so we can see the grid without seeing Photoshop s transparency pattern too. At the bottom of the layers window, click on the icon that looks like a half-filled circle. Select the Solid Color option and choose a neutral color for the new Color Fill layer to be. 2. Add a new, transparent layer overtop that Color Fill layer. Go to Layer>New>Layer or just use the icon shortcut at the bottom of the layers menu shaped like a folded page. 3. Let s make the body of our character. Start by selecting a base skin color. I m going to use #f2cb9f. Get Notifications Figure 10: The shortcut to add a new solid color layer is at the bottom of the layers menu Figure 11: Selecting a base skin color 4. Use the Pencil Tool to draw the body. I m going to make my body as simple as possible and then tweak at the end to really shape the character the way I want him to look. We ll add more details once we have the base shape down. Tip: Add an additional layer for each new aspect in case you want to go back and edit anything. Tip: If you want to make a straight line, click once where you want the line to start and then, while holding the Shift Key, click a second time where you want the line to end. Photoshop will automatically create a straight line between those two points. Make the body shape however you want. Here s how I made my body shape: 1) Click once on the canvas with a 15px pencil for the head circle.

6 2) Make the chest a triangle (pointed down) and connect it with the neck (use 3 pixel thick pencil). 3) Make the torso with another triangle (pointed up) at the bottom-side tip of the chest triangle. 4) The legs come straight down from torso triangle base. 5) Make a dot where the end of the arm will be. I made one arm up and one arm down by his side. Hold shift and click on the shoulder to connect the end of the arm to the body. 6) Add a little more volume to the end of the arms for the hands and more to the ends of the legs for feet. Get Notifications 7) At this point, add or erase as desired to tweak the body shape. I added a bit more bulk to the legs, added a few pixels to make the neck and body thicker, and rounded the shoulders a little. Figure 12: The body being drawing on the canvas, starting with the head 5. Now we ll add the clothes, hair and face. Use the body base shape as a template for how the clothes should be, and get creative! I m going to add six new layers for a shirt, pants, shoes, hair, face, and details.

7 Figure 13: The Character details being added to the body, starting with the shirt Get Notifications Figure 14: I have 1 color fill layer, 1 body layer and 6 detail layers 6. If you haven t already, make sure to SAVE your Photoshop file as you progress. 7. At this point, our pixel buddy could be called finished, but I d like to add a bit more depth with shadows and highlights. Extra Step, Add Shading: Start by making a merged copy of all the layers together. Do this by turning off the visibility of the Color Fill layer (click the eye icons to the left of the layer thumbnail) then press

8 Command-Option-Shift-E (Mac) or Ctrl-Alt-Shift-E (PC). This will automatically make a copy of all visible layers into one layer placed at the top of your layers list. From here, I suggest putting your individual layers in a folder and turning off the visibility to keep everything organized. To quickly group the layers, Select-Click all of them then press Control/Option -G. Get Notifications Figure 15: Press Command- Option-Shift-E (Mac) or Ctrl- Alt-Shift-E (PC) to make a merged copy Figure 16: The unused layers are grouped in a folder. I also turned the Color Fill layer back on 8. Add a new layer and change the Blending Mode. (The Blending Mode can be accessed by the drop down option at the top of the layer s menu, to the left of the Opacity option. By default it says Normal.)

9 I m going to choose the Blending Mode: Soft Light because that seems to work well to darken the colors I used on my character. With this new layer selected (I ll call the layer Shading ), Alt-Click the layer below it (The layer with the merged character) to make a mask. This way, whatever you draw on the Shading layer will stay inside the mask of the Character layer. 9. Color on the Shading layer with a black pencil. With the Blend Mode changed, the color black will darken the color below it. So, the red in his shirt becomes dark red, the green of his hair becomes dark green, and so on. Tip: If the shading is too harsh for you, just change the Blending Mood or Opacity of the layer. If you want to add more variations of shaded colors, keep adding new Shading layers with varied opacities. I ended up adding two shading layersthe first one at 25% opacity and the second at 45% opacity. Get Notifications Figure 17: The Soft Light blending mode drop-down menu

10 Get Notifications Figure 18: Adding more depth to the character with extra shading layers 10. If you want add some highlights, add a new Highlighting layer exactly like the Shading layer, except make the blending mode Overlay and use a white pencil. 11. Once you re satisfied with your 8-Bit Character creation, it s time to save the final PNG sprite file. But first we should trim the canvas so it s snug against the image and there s no excess space. This will ultimately save on file size so it s optimal for any game. Turn off the Solid Color Layer visibility and then go to Image>Trim and change the Based On setting to Transparent Pixels. Click OK.

11 Figure 19: Trim the canvas around the image Get Notifications 12. Go to File>Save As >Save as type: PNG And here he is! The final 30 by 45 px PNG in all his tiny glory-> He s the perfect size to save the day on any mobile device where small graphics are preferred. If you want the image to be larger simply go to Image>Image Size> and change the Resample to Nearest Neighbor (hard edges). Figure 20: Change the resample option when you resize to keep

12 that pixel look Get Notifications To summarize: Start by changing a few settings in Photoshop so you can easily create pixel art. Do this by changing Preferences, Image Interpolation to Nearest Neighbor and the Guides, Grid & Slices to show every 1 pixel. Instead of using the default brush and eraser tools, use the pencil and set eraser to pencil mode. Choose your base color with the Color Picker menu and then draw a base shape. As you add more details, add more layers to keep them organized and separated in case you want to go back and edit anything. As an extra step, create a merged copy of all your layers using Command-Option-Shift-E (Mac) or Ctrl-Alt-Shift-E (PC). Add shading and highlights on additional layers with alternative blending modes and/or opacities. Finally, make sure to trim the sprite canvas down to its smallest size and save as a PNG. In the next part of this tutorial, I ll go over creating some other graphical assets of any good fantasy adventure game: an enemy, a weapon, and a health item.

13 Create 8-Bit Pixel Art with Photoshop (Part 2 of 3) Create 8-Bit Pixel Art with Photoshop for a Game (Part 2 of 3) In part one, we went over setting up Photoshop CS6/CC to make pixel art and then created a tiny 8-bit character sprite. In this part of the tutorial I ll go over creating an enemy, a weapon, and a health item. All using that retro, 8-bit pixel look. Note: If you need to see a larger version of any of the images, just right-click and view the image in a different tab. Make an Enemy Monster Using the same setup as we did for the main character graphic (as outlined in part 1) and mostly the same techniques, I m going to create a rat monster.

14 1. I ll start with a 50 by 50 pixel canvas. And with the grid turned on, I ll add a neutral Color Fill layer and start from there. Figure 1: A 50x50px blank canvas to create my pixel art on 2. I m going to start with a brown base color and create the body of this rat enemy. (Don t forget to use the pencil tool instead of the brush tool.) Figure 2: Using a base color to create the body shape.

15 How I made my rat body: 1) Click once with a 10 pixel pencil for the head. 2) The body is a peanut shape extending from the head at an angle 3. From here I ll add my details. I added some standard rat-like body parts: a long snout, ears, hands, fingers, legs, toes, and a tail. To really highlight the fact that this rat is a monster-type enemy, I also added monster-like details: red eyes and black nails. Figure 3: Creating an 8-bit rat, starting with the head 4. I decided that a brown rat just wasn t monster enough, so after I made a merged copy of all my layers, I added an adjustment layer (Layer>New Adjustment Layer>Hue/Saturation)

16 to change the overall color scheme to be green. Voilà, he s now a Mutant-Poison-Rat enemy. Figure 4: Adding a Hue Adjustment layer to change the overall color scheme 5. Next, I m going to add some shading and highlights like I did with the main character. I made some new layers and, using the blending modes Soft Light and Overlay, I added some more depth. (I also added his red eyes back in. Aren t layers great?)

17 Figure 5: Added additional layers for depth (and red eyes) 6. He s all ready to go, so just trim the image down and save the file as a PNG. Again, if you want to save the image larger than 50 by 50 pixels, just change the Image Size Resample option to Nearest Neighbor.

18 Make an Game Weapon Every good game character needs something special to defend themselves against the many evils in the world (especially Mutant-Poison-Rats!). Let s skip the typical beginner s wooden stick weapon and get right down to the good stuff: a golden sword. 1. Make a new canvas as we did before. (Or just delete all the layers from the previous project (except the Color Fill) and save it under a new file name.) 2. I m using a yellow color (#fff200) for the base shape of this golden sword. For the blade of the sword, I hold down the shift key and make a straight line7 pixels wideusing the pencil tool. I used grey for the hilt: just a straight horizontal line at the base of the blade. Tip: Keep in mind that it s a good idea to make a new layer for every additional aspect of your design, just in case you want to change anything later. Figure 6: Drawing the sword base shape

19 3. Now for the details of the sword: I want the blade to look metallic, so I m going to add a lighter yellow to one side. To get the right color I used the Eyedropper Tool to select the base color yellow and increased the saturation in the Color Picker window. Figure 7: The short cut for the Eyedropper Tool is (I) Figure 8: Change the saturation on the base yellow to get the right light yellow for the melt shine 4. As a final touch, I m going to add some bling to the hilt of the sword: rubies. I ll choose a deep red for the base color and a lighter version of that color for the shine.

20 Figure 9: I changed the brightness of the ruby s base color to get the right color for the shine 5. Now I ll add just a little more depth with additional shading and highlighting layers. As we did before, to add some shading, I made a new layer with a blending mode of Soft Light and drew in black. The Soft Light blending mode, however, doesn t really show up with the yellows of the blade because those colors are already so light. I still wanted to add a little shading to the blade, so instead of using a blending mode, I hand-picked a darker color (like I did for the shine of the blade).

21 Figure 10: Since the blending mode Soft Light doesn t work on the yellow, I choose the color myself 6. To finish up, trim the image and save it as a PNG.

22 Figure 11: An 8-bit Golden Sword Make an Item From med-packs to health pots, the idea of an item that can heal your character instantly is pretty popular for any game. Here s how to make a health potion. 1. I can say with confidence that most games make their health items predominantly red, so we re going to start with a red (#9e0b0f) base color. This item will be the shape of a round potion bottle with a thin neck opening and a cork stopper, so we ll start with a 10 pixel dot for the body. 2. The neck of the bottle will be 4 pixels wide extending up from the body. 3. The cork will be a brown color. It is 2 pixels above the top of the neck. 4. To make it seem like there is liquid inside the bottle, I added a slightly darker version of the base red (#5c0b0f) to the body half of the bottle, making sure that I only colored inside the body. I left some of the original base color to outline the darker colored area. 5. Next, to make the bottle look like glass, we ll add a shine spot with a light red diagonal line to one side of the body. Using the Color Picker, I choose a bright red (#ff0b0f).

23 Figure 12: Choosing alternative colors based on the original red

24 Figure 13: Creating an 8-bit Potion 6. Add smidge of shading and it s good to go. Want to make a different kind of potion? Just add a new Hue/Saturation layer and change it up a bit like we did with the green rat. You can save as many different colors of potion as you want. (To keep the cork the same color, I just added that layer back on top of the hue/saturation layer.) Figure 14: Arranging the layers: the shading layer, the cork color layer, the Hue/Saturation layer all masked over the merged copy of the health potion Here are my different colorations. Now I have: Mana Potion:

25 Anti-Poison Potion: Strength Potion: XP Potion: and anything else I can think of! As long as the item is labeled in the game, you can make any color any type of potion you want. And there you have it: three common game assets created using Photoshop, designed to look 8-bit and retro. To summarize, start by choosing your base color and then draw a base shape. As you add more details, add more layers to keep them organized and separated in case you want to go back and edit anything. Use the Color Picker to hand-select variations of your base color for a specific detail, like shine. As an extra step, use additional layers with alternative blending modes and/or opacities to add shading and highlights on top of a merged copy of all your layers. Make sure to trim the image s canvas down to its smallest size and save it as a PNG. In the third and final part of this tutorial, I ll go over arranging these individual game assets into sprite sheets. Go back to part 1: Create 8-Bit Pixel Art with Photoshop (Part 1 of 3) Go forward to part 3: Create 8-Bit Pixel Art with Photoshop (Part 3 of 3) By Alexandria O Brien

26 Create 8-Bit Pixel Art with Photoshop (Part 3 of 3) Create 8-Bit Pixel Art with Photoshop for a Game (Part 3 of 3) In this final installment of Creating 8-bit Pixel Art with Photoshop, I ll go over putting your sprites into a sprite sheeta single canvas that holds many sprite frames. One option would be to manually arrange the individual sprite images within Photoshop onto a larger canvas together. The trick is to know the size of each sprite frame and where it will be relative to the entire canvas in terms of coordinates. If, for example, we wanted to put each of our colored potion images onto a sprite sheet

27 1. First, find out what the individual sprite image size is. Each of my potion images are 10 by 16 pixels. Figure 1: Checking the dimensions of a single sprite image 2. Next, calculate the size that the entire sprite sheet would need to be based on the size of one sprite image and the number of images that will be on that sheet. I have five different potion sprites at each, so my canvas will be 16 pixels high and 50 pixels wide. This way, all the sprites will line up together horizontally.

28 Figure 2: Making a new canvas for the sprite sheet 3. Go to File> Place Embedded to insert each sprite into the canvas. Figure 3: Use the Place Embedded to insert each sprite onto the canvas

29 4. Arrange each sprite so they are side by side. Make sure you have the Snapping and Smart Guides turned on, as this will help align the images more easily. Figure 4: The Snap function is under the View tab at the top. Set Snap To > All

30 Figure 5: The Smart Guides are turned on under View>Show>Smart Guides 5. From here the sprite sheet is ready to be saved as a PNG. This method, however, is limiting and time consuming, especially if you are working with a large number of game assets. The best solution would be to use another program. There are several free sprite sheet generators on the web that can make this process much faster.

31 Stitches by Matthew Cobbs, for example, lets you upload your individual images and then download the composed sprite sheet PNG plus the CSS and HTML code. It s a little limiting when it comes to being able to arrange each sprite exactly how you want, but as long as you named the images accordingly, they should line up in an understandable manner. (I tend to name similar items with the same title word first, then a descriptor and/or number like Potion_01_Mana, Potion_02_Health, Potion_03_Anti-Poison, etc.)

32 Figure 6: Stitches, an HTML5 sprite sheet generator ( Figure 7: Here I uploaded the all the sprites and Stitches arranged them automatically. I even added a little padding between each sprite Here is the downloaded PNG from Stitches: From here you can reference a single sprite sheet in your game code and access all the individual sprite images on that sheet. Sprite sheets could hold any piece of game art you need, including animated loops (frames which, when played in sequence, will create an animation that can seamlessly loop from the last frame to the first frame without a break). Ready to put these sprites into action? Learn more about how to take a sequence of sprites and utilize them in your game code with Mark Lassoff s tutorial Animate a Video Game Character at Tutorial by Alexandria O Brien