In earlier tutorials, we created a pixel art character and gave it a car and places to live. Now, let's give it a place to work.
An office building is a great piece to do in isometric pixel art because you can add as many floors as you'd like and end up with a pretty large building that took about the same amount of work to do as a house or smaller building.
You'll need to have gone through the Isometric Pixel Art Character and the Isometric Pixel Art House tutorial before proceeding.
1. Dimensions
Let's make a floor height and footprint that looks congruent with our character.
Step 1
So we'll use the character as a measuring stick, as usual. Here the height I've chosen is 60 px for one floor.
I like using multiples of 10 px because moving the elements around using the keyboard arrows while holding down Shift happens in multiples of 10 px, so things fall into place much more quickly and easily.
Step 2
Now let's decide on the width for the entrance part of the building. It will have pretty wide double doors, so the width for the entrance should allow them in with a bit of space around.
I will also be keeping most of these distances in multiples of 10 px, for the reason explained above; it makes things easier later on (and if you're finicky at all, it feels good to have your distances measured in round numbers).
The vertical dashes here are simply being used as guides—we might delete them or draw over them later on, so they're not necessary but they usually are helpful.
Step 3
The entrance area will protrude a bit, so let's give it some depth.
Step 4
Add one more line parallel to the entrance. This will be the glass wall. Together with the entrance they would pretty much make the total width for our building.
We'll add some seams to the glass wall—that's why those dashes are there.
Step 5
Now let's add more depth: the side wall of the building. It'll be shorter than the front side.
Step 6
Let's finish the footprint. You can move the guide lines to another layer for a while. Here I closed off the area and filled it with white so that the next steps are a little easier.
Step 7
Now we duplicate the footprint and move it up to the height we had already decided for the level.
Since the surface was filled with color, we have slightly fewer lines to remove.
Step 8
We still have to remove the rest of the lines that the walls will block.
Add a few vertical corner lines and your volume is complete.
2. Details
Now we'll take care of most of the coloring and details that the first floor will require, which will stay almost the same for the rest of the floors.
Step 1
Let's add most of the vertical lines we'll need: one on each corner and some extra ones for the glass wall panes' edges.
Step 2
Find colors you like for the different sections of the building. I've chosen to make the entrance look like concrete. The glass walls are about the same color that was set for windows on the previous house tutorial, and the small area on the edge will be a dark brick kind of color.
You should try playing with the Hue/Saturation/Brightness sliders to find the final colors.
Step 3
Let's set a width for the double doors and push that surface a little bit into the volume. As usual, you'll want to make the peak corners a lighter shade than the walls.
Step 4
Now we set the height for the doors.
Step 5
And here I've done a slightly dark line right next to a slightly light line to look like small grooves—it seems to be common on these kinds of buildings and it makes the concrete walls not too flat/boring.
We'll also apply these grooves horizontally, later on.
Step 6
We'll make the front doors mostly glass, so fill with the same color as the parallel glass wall. Also, add vertical border lines for the doors, one on the inside corner and the other one in the center. To find the center you can measure the whole break in the concrete with the Select Tool (you'll get the width in the info panel), and then divide that by 2 and you'll know the distance between the inside corner and where the center corner must go.
Because the walls around the doors cover part of them, don't expect both of the doors' glass rectangles to be the same width.
Step 7
Let's add a frame around the glass. I've chosen a dark grey, with a slightly cool hue.
One pixel of grey was enough vertically. For the bottom line I left 3 px height. Also, add the dark lines between the grey and the glass.
Step 8
Here are the finished doors. I added a small highlight for the bottom part of the grey/metal areas, a few pixels at about the character's arm height (these are the locks) and a few darker glass lines, for some sort of glass effect.
Step 9
Now, on to the glass wall. Make the front corner lighter and add an area with a darker shade of the glass color. You can use the Magic Wand Tool to select the white top surface and then move that selection down about 10 px so the selection intersects with the areas of the glass wall you'll want to paint.
Step 10
Finish the lines for all these glass parts. Most corners don't need to be black, and the seams on the glass should be just slightly darker than the surrounding colors.
Also, push out the brown wall a bit.
Step 11
Adjust the colors of the brown wall, now that it's pushed out.
The ground floor is almost done.
Step 12
Now copy the level and paste it on a new layer (or Alt-Shift-up arrow) and place it right over the ground floor.
Step 13
Of course, there won't be doors on the subsequent levels, so start turning the doors into a window by joining them into one and adjusting the size. Here it's already a lot shorter, vertically.
Step 14
There's no need for the thick bottom edge on the frame, now that it's a window. Get rid of it and make the window narrower. Make sure to keep it centered; if you make it 12 px shorter on the right, make it 12 px shorter on the left as well.
Step 15
Then finish the areas around the window. Fill in the concrete wall color.
Step 16
And make the extra details on the wall. We'll be adding a few more grooves to the concrete, this time horizontally. Like the previous ones, these are made with one slightly darker shade of wall color, right next to a slightly lighter one. They will need to be applied to both the top and bottom of this level.
Step 17
Now for the glass. We want to keep the seams, but the top and bottom ones are right now in black and we want them with the same color as the rest of the seams.
Step 18
Finally we'll do the same with the brown wall, but it's even simpler for this one as there are no grooves or seams. It's just a continuation of the same colors. The easiest way to do this fix is with the Magic Wand Tool; selecting all three colors and then Alt-nudging 1 px up and also down.
Step 19
Let's add a tiny window to this brown wall. It'll be a nice little accent—the window will be in a different style. Start with a rectangle. If you do it like this, it looks as if it has rounded corners and it seems cleaner.
Step 20
Fill the rectangle with dark grey (the same color as in the door), and then add a highlight on the top and a few lines parallel to the top and frontmost edge.
Step 21
Give it some depth. Here I also added a highlight on the bottom border.
Step 22
Add a glass color and a dark line between the glass and metal.
Step 23
And then just duplicate it so it's also on the ground floor.
The second floor is complete.
3. Rise
The second floor is in a way like a tile—you could repeat it as many times as you want, and have a 100-floor building if you wanted.
Step 1
But we won't do 100 floors. For this building, five floors feels about right. Anyway, if the building is too tall and every floor is the same, it kind of wastes illustration space with more of the same.
You can select the second floor layer and press Alt-Shift-up arrow to duplicate it on the fly. Or you could copy/paste, and then just place where it belongs. As I mentioned before, it's possible to move selections 10 pixels in any direction by pressing Shift and the arrow keys.
Step 2
We'll repeat only part of the floor for the top, so that we have a piece of the building that's there simply to provide access to the rooftop terrace. We only need to bring up the concrete part.
You may want to do this on a new layer.
Step 3
Finish off the volume.
Step 4
Add the matching details.
Step 5
Here I added a small section to top off the little concrete box. It looked to me a little abrupt without it.
Step 6
Fill the top with a light shade of the concrete color and fix any lines that may need fixing. We'll be adding a bit of roof grainy texture, as we did with the apartment building. Start with a rectangle, centered on the top.
Step 7
Find a color you like for it, and then apply the soft grainy texture and soften the edge.
Step 8
If we wanted, we could imply the door to the terrace is on the side of the cube that we can't see, but instead let's add it to the visible side. We'll copy the doors we already did and adjust them to this new wall.
Step 9
It only needs one door. I kept the little lock visible, and aside from removing one of the doors I also made the one I kept a little narrower.
Step 10
The original door faced the lighter side of the building, so you should adjust the colors to match the new side.
Step 11
Then simply remove the bit of wall below the door.
Step 12
And to finish the volumes for the terrace, let's add a railing—it should be about the character's waist height. Start with the one at the back, and give it the colors of the brown wall.
Step 13
Then (you might want to put this in a new layer) make the railing go around and on the front edges.
Then simply make the borders that come into contact with wall or floor a bit lighter than black.
And all volumes are complete.
4. Textures
Time to finish our building by adding a few simple textures.
Step 1
This is the texture we'll add to the brown walls. It won't be black and white, but to create it, do these lines of 2 px alternating. You can draw just a few pixels and then select and duplicate many times until you cover a large area. You could also do it as a brush by selecting the tile and then going to Edit > Define Pattern.
Step 2
Once you have plenty of your texture, you place it in a new layer, covering all brown areas. Ideally the black parts of the texture should go over most of the black lines in the drawing.
Step 3
Change the opacity of the texture layer to 20%, or as desired.
Shortcut: you can change layer opacities by pressing numbers on the keyboard while the Move Tool is active.
Then on the layers with the brown wall, select all areas of the brown color with the Magic Wand Tool. If you have these areas spread over many layers, you'll find it useful to set the Magic Wand Tool to Sample All Layers.
Step 4
Go back to the layer with the texture and invert the selection (Select > Inverse) and delete.
You'll be left with texture that covers only the walls it's supposed to.
Step 5
Now find a color for the rooftop surface.
Step 6
And let's make another simple texture. For this surface we'll do tiles.
Start with a rectangle using a darker shade of the new surface color. Then inside this darker rectangle do another rectangle but with a shade that's lighter than the surface. Then duplicate and arrange multiple times.
Step 7
Duplicate until you can cover the whole terrace floor with the texture. The contrast shouldn't be too high for this tile.
Step 8
Then repeat the same process as before to cut out the unwanted areas of texture.
You can now, if you want, merge all your building layers.
Building Complete!
Congratulations! The office building is done, and now the pixel sky is the limit!
