Create 8-Bit Pixel Art with Photoshop (Part 1 of 3) Notifications Get 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. Setting Up Photoshop To Make Pixel Art Source: Pixel Art – Photoshop Tutorial ( http://youtu.be/hFZBUWHVSrM) 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 Notifications Get — Figure 1: New 50×50 pixel file in Photoshop — Figure 2: New 50×50 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 size, and the mode to be “pencil.” — Figure 3: The Pencil Tool is under the Brush Tool drop- Notifications down menu Get — Figure 4: Change the 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 — Figure 6: — Figure 8: Adjust the Turn on the grid grid preferences 4. One more change–go back under Preferences>General and change “Image Interpolation” to Nearest Neighbor (preserve hard edges). Notifications Get — 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. 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 Notifications base skin color. I’m going to use #f2cb9f. Get — 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. ● 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. Notifications 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 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. — Figure 13: The Character details Notifications being added to the body, starting with Get the shirt — 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 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. Notifications Get — Figure 16: The unused layers are grouped in a folder. I also turned the — Figure 15: Color Fill layer back on Press Command- Option-Shift-E (Mac) or Ctrl- Alt-Shift-E (PC) to make a merged copy 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”.) 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 Notifications below it. So, the red in his shirt becomes dark red, the green of his hair becomes dark green, and so on. Get 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 layers—the first one at 25% opacity and the second at 45% opacity. — Figure 17: The Soft Light blending mode drop-down menu Notifications Get — 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. Notifications — Figure 19: Trim the canvas Get around the image 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 that pixel look Notifications Get To summarize: Start by changing a few settings in Photoshop so you can easily create pixel art.