Advertising is everywhere, and it's possible that it will need to crop up in your pixel art world. So today we're going to find out how to turn a regular image into its isometric pixel art equivalent by making a billboard ad.
Please refer to the pixel art character tutorial before doing this one.
1. Dimensions
Let's first do the billboard; this will be our canvas-within-a-canvas for most of the actual work.
We'll use the character to define the height of our billboard post.
Step 1
Four times the character's height seems tall enough, and anyway this would be easy to adjust later on.
Step 2
The width of the post we can set to about as wide as the character.
Step 3
Finish outlining the post. The bottom line curves slightly to show the post is cylindrical.
Step 4
And then we add lines for the billboard itself.
Step 5
Fill with color.
Step 6
And add some shading, especially to give volume to the cylinder.
Our canvas is ready.
2. Adapting the Picture
Isometric pixel art isn't meant to be realistic, so to properly incorporate a photograph into a pixel art scene, the picture should go through a sort of transformation to make the style match the rest of the illustration.
First, we'll need a picture.
Step 1
I put this burger together, but you could do an ad for a car or whatever you may feel like. Also, you may use this picture if you want.
I added the name of the burger because that'll be part of the ad and because I wanted it in a big, stylized font. There'll be more lettering, but it'll be best to do the rest directly in pixels.
Step 2
To adapt the picture to the isometric view, you need to transform (Edit > Free Transform…) the photo and set the Vertical Skew to 26.5˚.
And then resize to match the billboard. It's a good idea to do this in a layer above the billboard and with some transparency set to the layer to see the billboard edges behind it.
Step 3
You can continue to trim and adjust the picture. Here I made sure the burger and the word were well positioned within the billboard canvas.
Step 4
As I'm using a solid background color I have applied it to the billboard canvas: red all over with a line of highlight in the top border.
Now let's move on to…
3. Lettering
For most of the small lettering it'll be best to work directly pixel by pixel. We'll do that, but we'll first get the burger name which was done in large letters.
Step 1
Here I traced the "C", the "l" and the "o" right over the reference lettering (but on a different layer), and instead of tracing all of the letters, I copied the "o" because the rest of the letters are similar enough to it.
Step 2
The rest of the letters shouldn't take a lot of work to nail.
Step 3
We'll add more details to the ad. Let's say the Clogger is a new burger that people must try out. So we'll add the word "NEW" right next to Clogger in small slanted letters.
We can get the "N," "E" and "W" (and most letters in the alphabet) easily out of these "8" looking shapes.
Step 4
Erase a few pixels and you'll have the word you want.
Step 5
Normally it's best to avoid anti-aliasing, but these "rules" are more flexible in a 2D image within the isometric pixel art. Here, Clogger gets a smoother treatment and also a bit of shadow.
Step 6
We'll add a last bit of lettering to direct customers to the restaurant. We'll have "ONLY AT [restaurant logo]"
So we need three little lines per letter, and they'll be in this case just three pixels wide. Again, we can get the letters we'll need from a basic structure.
I decided to make a very simple logo. Just something that resembles enough a recognizable fast food logo.
Step 7
Then place the last bit of lettering on the billboard.
And if you want, you can go ahead and merge all the lettering with the billboard layer.
4. Tracing and Pixelating
To begin tracing the burger, leave the billboard in one layer and the reference in another layer above, and start your work in a new layer above all previous ones.
Step 1
Here I have traced the buns with black lines, using cleaner, less jagged lines as much as possible.
Step 2
You can then fill the buns with black to make a solid shape and then fill with the color you'll use for the bread, which can be eyedropped right out of the reference picture if you want.
Step 3
Now let's add detail to the bun. We get a little peek at the inner sides of the bread, which are usually lighter.
Step 4
Then add a bit of shading—for the bottom of the bun it's mostly to convey volume, while for the top of the bun it'll show slightly darker baked areas of the bun.
Step 5
The idea is to reduce the complexity of the shapes as well as the number of colors, so a darker shade and a highlight will be enough to complete the coloring for the buns.
Step 6
Add one final detail to the bun: sesame seeds. They're light pixels with a bit of shadow underneath. You can do the shadows on a different layer with black and then reduce the layer opacity. If you want, try different blending modes for the layer.
Step 7
Now that the buns are done, let's move on to the patties. We'll make them both identical so that we only need to do one. It's OK if we start to move away slightly from the reference—in fact, it's better to do that unless you're doing a pixelated version of a portrait, in which case you'd really like to get the likeness across.
Now that we're diverging a bit from the reference and to avoid confusion with the whole mess of pixels it has, we'll move to the side and glance at it for reference without needing to trace right over it.
Step 8
Here are our two big patties with a patty color already and the reference no longer being a distraction.
Step 9
Let's give volume to one of the patties: lighter on the top and also on the center.
Unlike most of the rest of our pixel art, we won't use dark outlines for these elements as we're doing a 2D image and not a 3D element in the pixel art world.
Step 10
Finish the shading and copy it for both patties. Then on a new layer you should add some texture to the beef. It doesn't need to be complex at all.
Step 11
But it should be subtle, so adjust the opacity and then merge down.
Step 12
Beef patties done. Let's cheese them up.
A single line of yellow pixels across the patties will be a good starting point.
Step 13
Now let's make the cheese corners dropping down onto the patties. This is starting to get delicious.
They should be offset a little. You'll notice the biggest cheese corner is basically the same for both patties but in different positions, and then there's a bit of another corner merely peeking in (different positions).
Step 14
Add some shading to the cheese. The edges should be lighter, and the right side is a bit darker. Also, a bit of shadow cast over the patties helps give them volume and contrast.
Cheese done.
Step 15
Now we get to the vegetables. We'll have one big slice of tomato and above it a layer of pickles/green-stuff and above that some onion/mayonnaise/white-stuff. Much like in our reference.
Step 16
And here we're giving these elements some volume with the shading: lighter at the center, and in the case of the tomato slice, also at the top.
There are different light areas for the green-stuff, which should help to convey three different pickles. Same thing with the white-stuff.
Step 17
To finish these vegetables I'm adding a shadow/outline hybrid that helps separate them and make them pop a bit more. It's simply a darker line along the top edge of each element.
Step 18
Let's continue stuffing our burger with more tasty fillings.
In the middle we'll have some onion rings. On a new layer you can do some basic shapes for it. It should feel pretty free-form so go ahead and doodle it on, making some slightly wavy shapes.
Step 19
The wavy shapes would be rings so they'll be thicker in the middle and thinner on the edges as they disappear into the burger. Fill the rest of the space with a darker, redder color.
Step 20
Add a little darker shading to the rings, and a touch of lighter pixels, like a greasy sparkle on the rings.
If you're pleased with the onion rings you can merge the layer down.
Step 21
And finally we do something very similar to the bottom fillings, which will be pulled pork.
The shapes for this are irregular but squarer. Just a bunch of little chunks, which can be doodled as well. They should be done in a new layer.
Step 22
And then colored red or brown with a darker hue on the sides and even darker in between and around the shapes.
Step 23
Do some shading. The darkest lines help to distinguish the volumes, but they don't need to work the same as outlines, so we can get rid of some of those.
Step 24
As with the rings, we add a few light pixels, like greasy, shiny bits.
I moved the bottom bun up a pixel because I thought it looked better.
Now I'm happy with my burger. I merged all elements into one layer.
Step 25
And to finish I added a cast shadow to the burger.
And that's it. The billboard is done!
Congrats!
The billboard ad is complete. The new Clogger looks pretty delicious; clogged arteries sound like a small price to pay.
Now you know how to turn a picture into isometric pixel art. I hope that's useful!
