We're continuing the work on our isometric pixel art world, and on this occasion we'll add an industrial workplace to our library. It may be good to make it look dull, but that doesn't mean it can't be pretty as well.
We'll be using some brick texture yet again, some metallic elements, huge chimneys and some smoke plumes. Let's get to work.
Check previous tutorials in this series if you haven't; most lessons cover Photoshop tips and tricks and pixel-art specifics that I may not necessarily cover in the later tutorials.
All this isometric, geometric, pixel-perfect work can get difficult or tedious; if you find doing the work unappealing, feel free to shop for great ready-made isometric graphics on Envato Market.
1. Define the Dimensions
Get your pixel character out. We'll be doing a two-level tall factory—it won't be huge, but it'll be a big box with some very tall chimneys and big smoke plumes shooting up, so it will still be a very respectable size
I considered doing a sawtooth roof (pretty common in depictions of factories), but then I thought it wasn't necessary and probably isn't very common anymore. We'll still make our building look very industrial.
Step 1
Use the character to find a level height you like, and then double it.
I added extra lines (4 px between each) for every level as a guide for the brick texture to be added later on. This way I'm mindful of the brick lines while placing windows and other architectural elements.
Above the second level I left an extra line for the roof to have a little ledge.
Step 2
Now let's define a width for the building. It should be enough for at least one truck—not that we've covered a truck in these tutorials yet!
Step 3
And now add some depth. This doesn't need to be a fixed size; we may want to edit it when we add the windows.
Step 4
Close off some surfaces by adding a few extra lines. Also, you may already define the width of the metallic gate we'll add at the front.
Step 5
These will be the widths of the windows. Below one of the windows we'll have a door, so basically we need to make the lines as wide as we'd expect a door to be. The rest of the windows won't have doors, but for consistency (and to make the work easier) they'll all be the same width.
You can then close off the volume by adding the remaining corner lines.
Step 6
Here we're already adding a bit of depth to the gate and windows.
Step 7
And then add a bit more depth to have the roof's ledge.
2. Create Additional Structures
We've got our big box pretty much done. The building will be simple, but there are a few more structures that will really help convey that it's a factory: namely, the big chimneys.
Step 1
Here I started adding a square outline as a bounding box for the footprint of one of the chimneys. I'm also marking the distance between the chimney and adding an equally distant line on the opposite side of the chimney box. These lines will help us make a base for the chimneys.
Do this in a New Layer.
Step 2
Let's add another line, just like the last ones going around the back of the chimney reference square. Align the last line with the roof and start extending it to where we'll add two more chimneys.
Step 3
Make the new chimneys equidistant. I won't make the chimneys and their base centered or completely symmetrical. You can if you want to, but sometimes some design doors open up when you let go of rigid symmetry or balance.
Step 4
This will be the width of the base. I want it to recede a little from the facade, so I made it not align with the front by just a bit.
Step 5
The base will be a long box with a bit of a height, like a few steps.
Step 6
Finish the box that makes up the base with the extra corner lines and by cleaning up the back lines.
I added some pink marker lines matching the roof corner to help move and place the base at ground level, where they'll match the bottom left corner.
Step 7
The box is placed at ground level. You can now delete the marker lines.
Step 8
These are the three cylinders that will make the chimneys. Are they tall enough?
To make them you can, on a New Layer, draw a circle with its edges matching the edges of the chimney reference squares. The circle can be done with the Elliptical Marquee Tool, filling the elliptical selection with outline color and then deleting the inner pixels, which can be done by contracting the selection (Select > Modify > Contract…) by 1 px and hitting delete.
Once you have your circle, you copy it to the top, directly above, at the height you like, and then just add the vertical lines to finish the shapes.
Step 9
Clean the unnecessary lines up. Add the inner circles to open the chimneys up.
I edited the outer circles to what I thought made a cleaner look. Cleaner can often be better than accurate in pixel art.
With that, all the major structures are now done.
3. Finish the Building's Surfaces
Let's get the coloring and texturing out of the way already, as we'll be adding several bells and whistles to the building.
Step 1
I've used a brick texture in many tutorials on this series. I don't want to abuse it, but I do really like brick texture, so we'll make a slightly different and simpler version this time.
I want the factory to look a bit dark, so I'm choosing a sort of chocolate color for it. It's applied over all the walls and in the same shade, for the time being.
The texture lines are pretty jarring, so let's give them a nicer shade. It's easily done with the Paint Bucket Tool with Contiguous checked off (provided the textures lines had a unique color… otherwise you'll change the color of everything that shared the same shade within that layer/selection).
Step 2
Now let's lower the tops of the gate and the windows and get rid of unnecessary lines in that area.
Step 3
The frontmost window was meant to have a door on the first level, so let's give it a frame.
You also can start adding a darker shade of brown on the right side (or it doesn't matter what side as long as it's consistent with your other pieces). Remember to also shade the brick lines a bit darker on the shaded side.
Step 4
In order not to make the factory too boring, we'll add another color to it, at the top and at the bottom.
Here's the top with the new cream color (maybe it's a chocolate cream factory?) with some shading already. As usual I would recommend making the shading lightest at the top and darkest at the right side—their brightness may change by 8% to 15%.
Step 5
Apply the color at the bottom.
Step 6
We won't need brick lines for that bottom part.
Step 7
We'll make the base of the chimneys match the top part of the building, so let's get to coloring the top of the roof with a dark grey color.
Step 8
And here a simple texture is applied to that dark grey surface—it may be gravel or whatever might be a good material for a roof surface.
Also let's add the highlights to the top, and clean the darker lines up. And lower the contrast on the inside corners, where the surfaces meet.
Step 9
So now we take the above steps and apply them to the base of the chimneys, with the main difference being that this box doesn't have a ledge like the roof.
Step 10
Now let's give a cool grey to the chimneys. It could also work as a warm grey at about 40˚ hue, but as we already have plenty of warm colors, I opted for a cooler hue.
You can try to make it look like concrete, or you can do the white and red stripes that factory chimneys sometimes have. I tried those and preferred the concrete look.
Step 11
Finish the shading on the very tops of the chimneys.
I ended up altering the original lines quite a bit, but I think it's for the best because as I mentioned before, cleaner can often be better than accurate in pixel art.
Of course, you don't need to draw all these elements three times—you can work on just one of the chimneys, and when you're happy with it you copy it for the other two.
Step 12
Now we'll add some shading to the chimneys. There are many ways to do cylindrical shading. Here it's just one light stripe just off the left edge and a dark one next to the right edge, and I added tiny serrated edges just to get rid of the perfect vertical lines the stripes had; they made the chimneys look a bit glossy.
Step 13
Now let's properly do the top parts of the windows. You can leave them square, but I had an arch in mind.
Here's what I did to get the arch shape.
Take this as multiple steps; I just thought it was convenient to demonstrate the progress on one facade.
On a New Layer, take a circle that's the same width as the windows and set vertical skew (Edit > Free Transform) to 26.5˚. Then keep only the outline. Clean up the lines to better evaluate progress. And finally do your own edits to the circle; if you can make the line look less jagged or more round, go for it.
Once you arrive at the final version of the window, you can apply it to the rest of the windows.
Step 14
Let's add the highlights to the windows (and door). The highlight goes as usual right on the corner, but on arches it can be a bit tricky at the top, where a highlight line has to in a way turn into a dark outline.
Here there's a hint of the top of the outline vanishing—it's near black, then it's just dark brown, and then it's gone. The highlight goes up and vanishes as well at about the same area where the near-black line vanishes. They run side by side just on that one little area. Add a touch of a darker shade of brick color on the wall just below that area.
Once that's done, apply to the rest of windows.
Step 15
Now let's draw the bottom of the windows.
It's pretty straightforward for the short window; we keep the brick color, just in a lighter shade.
For the long windows I tried giving it a slight slope on the bottom frame; the lines are very short but they go up in a 1:1 diagonal and that gives the windows, I think, an extra bit of dimension. The color stays cream (but a lighter shade) to match the base.
Step 16
One more little trick to give the base an extra bit of dimension: it projects out just a little bit on the corners. Some highlights on the top line of the base also help get the extra volume.
Step 17
So now let's work on the metallic rollup gate. I moved the lines just a bit because I wanted the bottom line to be very thin. Also, I lowered the contrast for the texture lines.
Step 18
Try adding a highlight to the bottom line—it may look a bit like a lip, which I think works alright on a rollup gate. In fact, it can even stick out a tiny bit right on the visible corner where ground, wall and gate meet.
Finally, just lower contrast on the inside corners where surfaces meet.
Step 19
On to the door and windows.
I almost went with a bright yellow door as it went well with the rest of the colors and would have added something that pops. But in the end I kept it dark, like dark chocolate… I guess this really must be a chocolate factory.
The door is very simple. I just added an inner rectangle, a tiny subtle highlight and three metallic-looking pixels to represent a lock.
Step 20
The windows, as I usually prefer them, get an aquamarine hue but not too bright or too saturated. The frames around the windows may have been nearly white, but I decided to make them match the door; just a touch lighter.
Step 21
It may have been luck, but I was able to add rails to the windows at regular intervals while matching the different bottoms of the tall windows and the short one. The windows may work just as well with no rails or minimal rails.
This is how I added them, with the usual window effect (a darker shade of the glass color shaped like an L, parallel to the farther edges of each of the frames).
Step 22
And here's what they look like after cleaning up.
Step 23
As for the brick texture, we'll be doing that with a different approach than the one in previous lessons.
We already have the horizontal lines and so we can, in a New Layer, draw the vertical lines. We only need to draw a few of them and then we can copy (or Alt-nudge) all over the surface. I'll give these vertical lines a slightly darker shade than the horizontal ones. On the points where the horizontal and vertical lines meet, the vertical will prevail, which is why I've drawn the verticals over the horizontals.
Step 24
To apply the texture, go to the layer with the brown walls and select the brick and brick line colors with the Magic Wand Tool. Then go back to the layer with the texture lines, invert the selection (Select > Inverse) and hit Delete.
Then just clean up the lines on the insides of window frames and give the lines the desired brown color.
It's a pretty simple but effective texture. Before we proceed, let's quickly try an alternative version.
Step 25
Here in a New Layer I added a different color (only for contrast) to the pixels on top and the frontmost edges of the bricks; so every single brick has a sort of L pointing up and to the frontmost corner.
Again, you only need to draw on a few bricks and then duplicate again and again until you've covered all the surfaces.
Step 26
Then just turn those lines into shades lighter than the background brick color, and you get this raised brick effect.
I like it, but I'm not convinced about it; it seems as if it's cluttering the graphic a little bit while not looking, in my opinion, that much better than the version without the effect. So I will continue without it.
But it was a good option to try or to keep around for future use.
4. Add Industrial Elements
So I'm not sure what this is a factory of… it might be true that it's something chocolate-related, but not being sure what machinery chocolate factories use, I'll just add elements to make the building look more industrial.
Step 1
Here's a placement guide (New Layer) for the elements we'll be adding.
The biggest square will be a water (or some other liquid?) tank. The smallest ones will be small roof vents and the others I might not be very sure but they'll fit in nicely.
Step 2
I already covered small roof vents in the apartment building tutorial, but here it is again, a pretty simple way to do those.
To help achieve a metallic look, I alter the hue together with the brightness, so lighter shades become warmer, closer to yellow, while the darker shades become cooler.
Step 3
Now we turn the larger square into a water tank.
First we'll make a cylinder. The shadow should be black applied at 10%-20% opacity—I tend to use 15%. In the last step here, there's a bit of extra width for the top circle of the cylinder.
Step 4
That extra width will help to give it the conical cap these things seem to have.
Give it a cool grey and some dark color for the legs, or maybe the same grey as the rest of the tank.
Step 5
And here's the shading. It pretty much follows the style of the shading on the chimneys, but I added more shades because this is a wider shape and it looked a little bit too sparse with only three shades.
The shading on the top should have wedge shapes directed at the very top of the tank.
Step 6
Now on to the boxes that may or may not be air-conditioning units.
The boxes are pretty straightforward. They should still look pretty metallic and have some slits/vents or anything to make it a bit less simple.
Step 7
Here the boxes get finished and the hoses/cables get some shading to show a bit of volume, lighting and outlines that blend better with the environment.
Step 8
Now let's do another tank. This one will be smaller, lie horizontally and have a pipe connecting down to the factory.
We turn the rectangle into a cuboid and that into a cylinder by drawing the circles on the two ends. Let's keep this shape elevated a bit in regards to the shadow.
Step 9
Now we'll apply metallic colors and cylindrical shading.
The brown shade at the bottom is intended to be a reflection of the ground. I'm not sure if it accomplished it, but I kept it.
Step 10
We'll add a bit of conical shading in the front circle and create the pipe, which looks more like a straw at this stage.
Step 11
I gave the pipe a different color from the tank as it very well may be a different material. I enlarged the highlight at the elbow of the pipe because that's where I think it would shine the most, being metallic.
Finally, add a stand to it and soften the corner lines where surfaces meet.
Step 12
Here are all the elements placed.
Step 13
You can now clean up the guidelines.
And to get more bang for our pixel buck, let's take the pipe from the small tank and connect it to the base of the chimneys, easily achieving some extra complexity.
5. Make the Smoke
I hadn't drawn pixel art smoke/clouds in a while, but it felt necessary to create some smoke plumes for our factory.
This is an element (not unlike glass windows) that many pixel artists would probably do very differently from each other.
Anyway, here's my approach.
Step 1
Start by making some rough sketches (in New Layers) of the basic shape you'll want to give your smoke plumes. They should start with the same width as the interior of the column but then spread out… as they spread out they'll also thin out and sort of vanish.
The sketch doesn't need to be pretty, but it will give you an idea of what the finished shapes will look like and a guide for the shapes and curves you'll give to your plumes.
The three plumes should flow very similarly, but we don't want to do only one plume and repeat it twice, because that wouldn't look good; it would look lazy.
Step 2
Now we turn each sketch into a nice smoke plume.
I decided to mostly make the shapes square, which I like, this being pixel art. So start by tracing over the sketch (in a New Layer) with straight horizontal and vertical lines.
Then round out the corners. It would make sense to make the rounded corners wider/rounder as the plume goes up, and sharper when they're closer to the bottom.
Then, to finish outlining, make some of the lines go inside the shape as if puffs of the smoke overlap with the rest of the plume.
Step 3
Now let's get a little psychedelic for a while.
We'll want the smoke to thin out as it rises, and we'll convey that by lowering opacity gradually toward the top, but we'll be working on those different opacities by using bright colors.
Otherwise it would be a pain in the neck to work with the final color at differing opacities (the Magic Wand Tool can't even separate the opacities without some tweaking.)
So what I chose to do was to have four different shades on each plume. The first one I used only right above the chimney exhaust and also working as a bit of a light shading for the plume. The other three shades are spread a bit more evenly.
I gave the areas where the different shades meet a pattern kind of transition. And I also made different shades for the outline, which, together with the smoke, should vanish as the plume goes up.
Once all of that is done, you can start to replace the funky colors with the different opacity smoke color, which I made as an almost white color, with a bit of a yellow hue.
I made the opacities from the bottom to the top: 80%, 60%, 40% and 20% on the fill. And the outlines much softer (bottom to top): 20%, 10%, 5%.
Step 4
Of course, this is done for all three sketches, ideally simultaneously so that they are more consistent.
Here's the process for the three plumes.
Step 5
And here they are applied to the building—making the factory 100% done!
Factory Up and Running. Congrats!
The work paid off. The factory is operational, the smoke plumes look pretty nice and almost too clean to be pollution, and now you can equip a city with some industry elements, giving your pixel art characters a place to work and your pixel art town more variety and life.
Hope this was productive!
