Introduction:
Pixel Art - Part II Workflow

The following is more a step-by-step exercise to create a complex Pixel Art structure, namely the famous Ultrashock yogurt shop! The images below show what you should have after doing this tutorial.

2.1. The finished Ultrashock yogurt shop, click to enlarge

Since the result of this tutorial is to be made interactive in the following two parts we have to make both interior and exterior of the building. We are also forced to follow the rules of tile based worlds from part one. It will be easier to complete the tutorial series if you do.

1. Creating Our World

Open Photoshop and create a new document, 800*600 pixels in size at 72 dpi. Reuse the gray floor tile from part one and make an isometric grid, 24*24 tiles in size. This will be the world our Pixel Art lives in. Then we make a “blueprint” of our building by coloring tiles, blue for walls, white for windows, turquoise for the counter and orange for the doors. You could make your shop different in shape and size but it would be easier to follow the tutorial if you just copy my example.

2.2. Click to enlarge

Next we give the building a one block high wall. These should be places on all tiles made blue in the blueprint. Take a cube from part one and paste it in a new layer over the gray tile grid. Make sure the cube is positioned correctly over the blue tile furthest back. When it comes to duplicating, I see many people copying the object just to paste several copies in new separate layers. This could be a good strategy but not for making a straight wall like this one. Instead, use the Marquee Tool to select your cube, and then use Ctrl+Alt+Click and drag to create a selected copy on the same layer. Simple drag the new cube to the next correct position and repeat the process, soon you will have your wall. Remember to use a new layer for any wall that could overlap another one.

The finished walls of the building will be five blocks tall and since our world ends behind the back walls, those can be drawn all the way up from the beginning. Select your blocks that are making up the two back walls (those on white tiles should be left as they are to make room for the windows), Ctrl+Alt+Click and drag straight up. Repeat four times to make the wall five blocks high. It should now look like the image below.

2.3. Click to enlarge

Now when you have two finished walls you can remove any extra lines that come from building with blocks. Either draw over them with the Pencil Tool or, as I do when possible, select the blocks face color with the Magic Wand Tool and Ctrl+Alt+Click and drag to cover the lines. Must be one of the best short cuts in Photoshop!

牋 The most important part of the shop is where the money-yogurt transaction takes place. That is why we have to add a counter. Create a new layer and duplicate cubes just like when we made the walls except this time they should be on the turquoise tiles. Make it almost two blocks high.

2.4. Click to enlarge

Next we give the final walls some height. There are three different rooms for our man to play in so we need three sets of walls. Start with the wall in front of the back room. A part of the left outer wall should also be included for the back door. Create a new layer, select the walls and duplicate straight up to match the height of the back walls.

2.5. Click to enlarge

Do the same with the small room to the right. This is going to be our toilet.

2.6. Click to enlarge

The next and final wall layer is for the outer front walls. Remember to remove the extra lines each time you finish a set of walls.

2.7. Click to enlarge

Last but not least it is time to add a roof. I did this by simply duplicating the gray bottom grid layer. Move the layer copy to the top and place the grid just on top of the walls. Add height by selecting the layer content, Ctrl+Alt+Click and drag up. Connect the two objects at the edges using vertical lines and fill the side surfaces.

To make the building a little more interesting I made the top just a bit sloped (just a tweaked pyramid from the “basic isometric shapes” image in the first part of the tutorial).

2.8. Click to enlarge

Congratulations! Now you have a finished Pixel Art yogurt shop! Well, not really. It looks kind of lame without any details and I do not think many people would like to eat there. At this point you should add your own color. Just remember to keep the walls layered like before; you do not want all color on a single top layer. You also have to think about the shading rules from part one, keep it consistent!

牋 In my example I used a light brownish gray to make the walls less extreme. But not to make things too boring I kept a blue stripe at the top.

2.9. The yogurt shop with new colors, click to enlarge

2. Adding Transparent Windows

Adding windows to you buildings are something that is very easy to do in Photoshop. There are of course many other ways, colors and opacity levels for making windows but this is how I do it.

2.10. Making simple transparent windows in Photoshop

Create a new layer over the wall holding your window (1). Fill the window space with a light blue, #bb8eff was used for the image below (2). I usually leave one pixel at the edge because I do not like my windows looking as they have been painted on the building. Set the opacity level of the layer to 70% and your window is finished (3).

3. Adding Details

Now when the building is complete we need to add some details to make it a bit more interesting. I have chosen to add a table, some stools and a cash machine so the guests can both buy and eat their yogurt. I am also adding some plants and a few posters to enhance the dining experience…

I will keep this part short and only write about key techniques since making objects like these is much a matter of tweaking shapes.

2.11. Details are what makes Pixel Art come alive

The stools are made from the cubes in part one, reduced to 5 pixels in height, and with three very simple legs attached. The table is made the same way, just 2*5 tiles in size and with longer legs.

I have used a gray stool seat for the bottom part of the cash machine. On top is a slightly smaller cube, also 5 pixels high but with one side raised. Next I added some buttons on the top surface.

Plants are always a nice addition and what could be easier to make than cactuses? The pot is a short cylinder, made by setting the height of a circle to 50% (as seen in image 1.7. in the first part). To make them appear round I have used the Gradient Tool to add some shade. Finally I added some random pixels to the green part in order to give the impression of thorns.

Posters, paintings, textures etc are things that can be fun to use, it is easy too if you know what you are doing. Here I am making a few posters by using real photographs. Some people would say that this is not Pixel Art, and I agree to a certain extent, but there are some nice things you can learn by doing it.

This is one of the few occasions we can use the magic numbers of Pixel Art! Put your image in a new layer and select Free Transform (Ctrl+T), enter W: 89.443% (horizontal scale) and V: 26.565° (vertical skew) and voila! You have a correct skewed image. If you want your poster facing the other way, simply give the vertical skew a negative value (V: -26.565°). The last thing to do is to give the poster a black 1 pixel line around the edge; this will enhance the Pixel Art look.

Details like these can then be duplicated in order to fill a space or reused in future work. Still, some minor changes could improve the overall impression, like various heights for the cactuses. Colors are another thing that is easy to vary.

4. Adding Pixel People

No shop is complete without staff and customers, so let us add some people! This is probably the hardest part since organic objects can not be made from only simple geometrical shapes. Drawing people is one thing but to actually make them look like humans and at the same time keep the Pixel Art look is really hard.

• I like to start by making a single block and then divide that into sections to determine size and proportions. Create your block on a new layer and, as you can see, I am still using the old gray grid as a background. Use your previous Pixel Art work as a reference when setting the height of the z-axis; it would not be much fun if your people are taller than the doors.
  
  
• If you want your people to move around they have to be smaller than one tile, otherwise they would collide with the walls. Make them at least one pixel smaller and since people are not the shape of cubes we also reduce the length of the x-axis to make the block a little more human like.
  
  
• Next we have to rely on our artistic talent in order to sketch a figure. I always use a tablet pen for this kind of work (well, I use tablets for everything really) and I suggest getting one if you are still drawing with a mouse. Now, set the opacity of the layer holding your block to around 30% and create a new layer on top of that one. Zoom in and use a red 1 pixel pencil at 20% opacity to sketch a man. Use the underlying block to make sure you stick to the proportions.
  
  
• When you are satisfied you can remove the block layer and create a new one at the very top. This is where you trace the sketch with a solid black 1 pixel pencil. This step is not easy and there are no shortcuts but practice makes perfect as people say, just copy the below image into Photoshop and zoom in to see how I have done.
• Use the original block colors and the Paint Bucket Tool to add color to your man.
  
  
• The last thing to do is to add some shadow and detail. Drawing facial features are always tricky and mostly a matter of adding/removing a few pixels at the time while zooming in and out to see the result. Remember that the face should not have as much contrast as Pixel Art usually does.
  
  Shading a person is also more difficult than shading simple shapes. Start by selecting only the person (I use Ctrl+A, Ctrl+Arrow Key Up & Down). Then use a black 10 pixel pencil at 10% opacity to draw a shade. Think about where your light source is!
  
  Since I am using a pressure-sensitive tablet, I have the benefit of controlling the size of my pencil by applying pressure. If you are using a mouse you might have to use a smaller pencil for certain areas.

2.12. Creating a human – from block to person

The next step would be to animate the guy, but I will save that one for the last part.

5. Conclusion

There, I hope you are satisfied with the result. You could continue working on your shop, adding more details or give the rooms different wallpaper for example (I added a prism shaped window at the roof so you can see what is going on inside). But since we have two parts left in the series I encourage you to save an untouched copy.

In the next part (Isometrics in Flash) I will show you how to take you pixels into Flash. We will look at how to code an isometric environment and how to prepare it for the last interactive part.