Create an Isometric Pixel Art Coffee Shop in Adobe Photoshop

This post is part of a series called Isometric Pixel Art.
How to Create an Isometric Pixel Art Tree in Adobe Photoshop

Final product image
What You'll Be Creating

If you are making a pixel art town illustration, or even if you only want to do a simple isometric pixel art piece, a coffee shop or restaurant will be a good thing to add.
We'll be making a small, simple building, but adding a few new tricks to make it look like a coffee shop.
Make sure to read these tutorials before continuing:
And optionally:
Let's figure out what size to make our building.
As usual, we take the character as a size reference. This will be the height of our building.

the height of the building

And this, the width of the facade. We can easily alter these sizes later on if we want.

the width of the building

And this will be the depth of the building. It will be pretty small.

the depth of the building

Let's add the top lines for the roof. They're the same L-shaped lines, only rotated 180 degrees. Place them a pixel above the other lines and then add a pixel on the corners to seal the rectangle.

drawing the roof

These extra lines we'll use for two reasons: the top space will house the shop's sign, and the line below that will be the top edges of the shop's windows and doors.

the space for the shop sign  window and door height

Now, add some vertical lines for the edges of the door and windows. I'm making both windows the same width and I'm leaving some extra space between the windows/doors and the corners. We'll add a bit of decoration later on in that space.

window and door widths

Let's add some depth to the door and windows. They're pushed back 2 pixels (and up 1 px).

closing the wall lines

Select them and nudge them while pressing Alt. Remember you can use the keyboard's arrows—it's usually easier to be precise with them.
We're designing this coffee shop to look good on a corner, and we'll add a nice floor texture to it, so we'll define this floor area.
So we'll add a pair of lines. On the side it will only allow people to walk past, like a regular sidewalk, but on the front there will be enough room for a few tables al fresco.

defining a floor area

Seal off the floor area.

defining the floor area

I made the front corner a bit rounded off because sidewalk corners usually are rounded. Actually they're usually a lot rounder, but I think this little bit is enough to convey that idea without having a big jagged semi-circle line.
The coffee shop we'll be making will obviously be a design that I defined. But I would hope that with the information I'm sharing in this tutorial, and in the rest of the series, you'll be able to create whatever you may want. And when doing so, I recommend you check reference images, maybe put together a mood board, and sketch out a few options before beginning actual pixel work. The resulting creations will usually be better than if you just follow your first impulse.
But anyway, we'll be doing this design of mine, and it's going to be in a vintage style, which I thought was a nice approach for a coffee shop.
Let's paint our building surfaces. As usual, lightest on the top, medium on the left and darker on the right, with the shades decreasing in brightness by 15%.
The color is sort of chocolatey—it's supposed to be wood or at least painted brown.

coloring the walls

Continuing to add color, here the glass is filled in, and the area for the shop sign will be dark grey, almost black, and will go around the side as well.

banner and window colors

To break up the cube shape and add detail, make the roof rectangle a bit larger, just so the corners stick out a little bit.
Then add the lighter highlights to those peak corners. Here the highlights are only applied to the roof and the vertical corners in the building.

adding highlights

Clean up the dark lines next to the new highlights.

adding small roof ledge

And for the horizontal peak corners we'll do a lighter line that extends beyond the window frames, as part of the style of building we'll be doing. These lines I made a bit contrasty; they're 20% lighter than the wall color.
And below them there's another line, with a shade that's darker than the wall, to give the light line more volume and convey the idea that it's a long board of wood going across the walls.

some lines at windows height

Above the lighter lines we'll also add lines with a shade that's darker than the wall.
And remove the rest of the black guidelines; we're done with those.

finishing window height lines

Add one more of those light lines right below the shop sign area. And again, add a dark line underneath the light one.

lines below sign

The decorations we'll add to the walls will be simple rectangles with a bit of effect to convey volume. For now do the rectangles in a new layer and in a bright color.

adding wall decoration

To get the relief effect you can copy the same rectangles, paste them, make them darker and offset them a bit (1 px to one side and 1 px up.)
They'll look even better if you remove the pixels in the corners in which the two different colors overlap.

doing wall decoration

Then fill them with their final colors, which you may want to make lower in contrast. Here the light one is just 10% more brightness.

finishing wall decoration

Copy these rectangles to the other corners and wall. Of course, the ones that go on the right side should have the color adjusted (darker).

copying wall decorations to all walls

Now let's get to work on the door.
We'll be doing double doors, so we'll need a line right down the middle. You can measure the door frame with the Selection Tool to find the total width, split that in half, and then you know the distance you should have between the one visible door edge and the center line you'll be adding.
Then around the glass we'll have more brown to frame it.

doing the doors

I recommend making the lines in lower contrast unless you want to convey different volumes. So here, the lines in the center of the doors and on the door corner are a dark brown, instead of the almost black of most outlines.
Give a style to the doors that matches the rest of the building. So add the relief rectangles and a small highlight below the glass.

finishing the wood details of the door

Let's add door knobs. They should be at about the height of the character's elbow.
Here I've only done the back plate where the knobs will go.

adding door knobs

And these would be the knobs. They're thin and don't have much detail because of their size, but they're nice and gold.

finishing door knobs

The effect we've been using for glass is to suggest a slight reflection of the window frames (I guess it may also be seen as if looking in at the window frames on the inside, but that would still be positive). I think this effect is simple, effective enough and easier to keep constant throughout your illustrations.
In any case, now's the time to apply it to the windows and doors. It's simply a darker line, one pixel off the actual frames.
Here I also made the corner lines where the wood and glass meet lighter than black, and with a hue that roughly averages the hue of the wood and the glass.

adding a bit of glass reflection

Now let's add a different surface "material" to the roof. It may be tar or gravel or whatever, but it should look like a pretty regular roof color.

adding roof surface

Soften the outlines of this roof rectangle and add a tiny highlight to the top two lines.
And add a bit of texture to it if you want.

adding roof texture

Now the building is basically complete. Nice! But without details it's always going to be boring.
What we'll be adding in terms of details will be: awnings, the shop sign, floor texture and tables. So there's still plenty to do.
We'll have the front awning covering the window and the door. But give it a pixel or two of distance to the corners of the building.
Create a new layer for the top line of the awning and one of the sides. We'll have little flaps with rounded corners dropping down, looking like little teeth. Here are two of them, and I let them define the width of that side of the awning.
The diagonal line is a 1:2 line. It's always best to avoid a jagged (irregular) line.

starting the awning

We extend the awning across by replicating the little flaps all along.

making the awning

And then make all the lines meet and have them be (or at least seem) equidistant from the awning edge to the building corner. To avoid cutting one of the flaps in half, I shortened the whole coffee shop 2 px (the windows are now a bit shorter).

finishing the lines for the awning

Add some color to the awning. They look nice in green.

adding color

Shade as usual, and lower the contrast for the flaps—they're to be a subtle detail.

finish coloring

Copy the awning for the other side and flip it horizontally, resize it and shade it slightly darker because we keep the right sides of things darker.

flip resize and re-shade

Now we move on to the lettering for the shop sign.
We'll be doing very small letters. You can resize them if you like, and they'll be more readable, but I thought that they worked OK being tiny. In any case, the building is so small that it can't have a very large sign.
These three lines will be the base for making our letters, and it'll be easy to turn them into any letter we want.

starting the letters for the sign

I'm going to very creatively name the coffee shop "coffee shop"… if you have another name in mind, use it!
"Coffee shop" has seven unique letters so I'll only bother to make those. So here are our base lines, seven times.

copy one for each necessary letter

Delete a few pixels, add another few and you'll have all the letters you need. Keep in mind that because of the isometric view, the letters should look skewed. In the case of the rounder letters it works ok to not attempt to skew them because then the letters lose their roundness and look less natural.

drawing the letters

Now you can copy the letters, line them up and finish the sign. Remember to keep the space between them regular.

ordering the letters

Here is the sign applied to the coffee shop. I made it yellow and gave it a bit of shadow to make it pop a little.

placing and recoloring the letters

Sign done. On to the floor texture.
We'll make the floor look as if it's made of bricks. I decided to arrange the bricks like an L.
Here's how I made the L based on a very tiny surface square.
Then replicate your L a few times to make a pattern.

creating the floor texture

To define the pattern you must select the points in which the tile starts repeating.
Here it is selected, and filled with what I thought was a nice, kind of pink color.
I chose to remove half of the pixels from the black lines to make the pattern lower in contrast, and then gave it a color only 5% darker than the brick pink.

finishing the floor texture

You can now select that rectangle and go to Edit > Define Pattern… and it will show up as a usable pattern for the Fill Tool.
You can also just replicate the pattern enough times to fill the area you want.
I don't just apply it to the area because I want it to align nicely with the edges and lines I already have.
So I do that in another layer under the coffee shop. I adjusted a few elements of the coffee shop to better match the pattern (but I can't really recommend that you be a perfectionist, as well—it can be frustrating).

placing the floor texture

Then just remove the unnecessary bits of pattern. You can do that by selecting the area you want to pattern with the Magic Wand Tool (Contiguous checked) and then going to the pattern layer, inverting the selection and hitting Delete.
Then you can merge down… and give the edges a soft shade.

finishing the floor

And to finish the surface work, now that we have our floor, let's add a shadow to the awnings. They're just two rectangles, corresponding to the awnings' widths and lengths, with black color at around 15% opacity.
You make them on a different layer, and then you can merge them down.

adding shadows

Finally it's time to make the pieces of furniture.
We'll start with the chair. It may look a bit on the small side, but it respects the proportions of our character and that's what's important. If we want our character to sit down, we won't have to give it different sized limbs just to make it look natural.
So first we define the height of the seat, and it should be at the character's knee height.
Then we make the square. We're making a square for the floor as well, that'll turn into the cast shadow later on.
Add the legs and back and you've got your chair outlines.

doing the chair

Now we turn those bottom lines to the cast shadow: black with transparency.
Add color to your chair. It'll be a dark wood color, I won't leave it the same color as the coffee shop for the sake of variety, but it shouldn't clash with the rest of our palette (use Image > Adjustments > Hue/Saturation… to easily find the shade you like).
Then add the highlights, the darker shades and a tiny touch of stripy texture.

finishing the chair

… and boom! chair done.
To make the table, it's a pretty similar process. Its height should be greater than the seat height, but lower than the character's waist.
Then color, shadow, shades and texture.

doing the table

We'll give it a single leg with a rectangle as a base.

finishing the table

Let's set a couple of tables. So that they don't both look identical, one of them will only have one chair.

making the two sets of tables

Here are the two sets of tables and chairs.

adding the tables

Now just find them a nice place in front of the coffee shop.

placing the tables

And the shop is pretty much done!
You still could add a few more details to the roof, like an air conditioner box or a chimney; I covered these elements in the apartment building tutorial.

adding a few extra details

The coffee shop is finished and ready for business. Remember you can continue to grow your collection of pixel art pieces if you follow this series of tutorials. Making a city will be a possibility.
Good luck with your creations!


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner