Create a pixel factory in Photoshop

The final result of the lesson

We continue to work on our isometric pixel world and in today’s lesson we will add an industrial plant to our collection. It is perhaps better to make it darker, but this does not mean that it cannot look interesting.

We use the brick texture again, add some metallic elements, draw large chimneys and smoke flowing from them. Let’s start.

Pay attention to the previous lessons of the series, if you did not pass them; Most of them talk about the basic tricks when working with pixel art in Photoshop, which I will not repeat in the fresh lessons.

All of these isometric, geometric, pixel-ideal works can become complex or tedious; If you find the drawing process unattractive, feel free to look for ready-made isometric graphics in the Envato Market store.

1. Determine the size

Get your first pixel character. We will make a plant two floors high – it will not be gigantic, but in the end a rather large box will come out with long chimneys and voluminous clouds of smoke going up. Therefore, the size of the finished building will be significant.

At first I wanted to make a sawtooth roof (it is quite often found in factories), but then I decided that this is not necessary and, most likely, is no longer common. Our building will still look very industrial.

Step 1

Use the character to determine the required height, and then double it.

I added extra lines (4 px between each) for both floors. They will be guides for the brick texture that we will create later. Because of this, I always take into account the texture, placing windows or other architectural elements.

Above the second floor I added an additional line so that the roof had a small ledge.

Step 2

Now we define the width of the building. It should be enough for at least one truck – however, in this series we have not drawn trucks yet!

Step 3

Add some depth. It does not have to be fixed; we may need to edit it if we want to add more windows.

Step 4

Close some surfaces by adding a few extra lines. Also at this stage, you can determine the width of the metal gate in front of the plant.

Step 5

Denote the width of the windows. There will be a door under one of the windows, so we will make these lines as wide as we want for the door. There will be no doors under the other windows, but for consistency (and simplification of work) they will all be the same width.

You can finish the wall by adding the remaining lines at the corners.

Step 6

At this stage, we are already adding some depth to the windows and gates.

Step 7

Then a bit of depth for the overhang of the roof.

2. Create additional designs

We almost finished our big box. The building will be simple, but there are several additional structures that will help create the effect of the plant, namely: large chimneys.

Step 1

At this stage, I began to draw a square stroke to print one of the chimneys. I also mark the distance between the pipe and add a line at the same distance from the other side. These lines will help us create the foundation for chimneys.

Do it all on New layer (New Layer).

Step 2

Add another line. It also surrounds the chimney contour at the back. Combine this line with the roof and extend it to get space for two more pipes.

Step 3

Place new chimneys at equal distances from each other. I will not make chimneys and their foundations centered or completely symmetrical. If you want, you can do this, but sometimes the design looks better when you get rid of symmetry or balance.

Step 4

This will be the width of the base. I want to retreat from the facade, so I did not finish the line a little.

Step 5

The base will be a long box with a small height, just a few steps.

Step 6

Complete the box forming the base. Add a few lines for the corners and clean up all the internal lines.

I marked the corner lines of the roof with a pink marker to make it easier to move the base and place it on the ground near the bottom left corner.

Step 7

The box is located at ground level. Now you can remove marker lines.

Step 8

These three cylinders will become chimneys. Are they long enough?

To create them, on New layer (New Layer) Draw a circle inside the square stroke. You can create a circle with the tool. Oval area (Elliptical Marquee Tool) by filling the selection with a color and then removing the internal pixels. To do this, compress the selection through the menu Select> Modify> Compress (Select> Modify> Contract) on 1 pixel, and then click Delete.

After that, copy the resulting circle and place it directly above the base at the desired height. Draw vertical lines to complete the shape.

Step 9

Remove all unnecessary lines. Add smaller circles inside to “open” chimneys.

I edited the outer circles to give them a neater look. In pixel art, cleanliness can often be better than accuracy.

All basic structures are now ready.

3. Finishing the surface of the building

Let’s move on to painting and texturing, as we will later add various small details.

Step 1

I used brick texture in many of the lessons in this series. I do not want to abuse it, but I really like it, and this time we will make a slightly different, simplified version.

I want the plant to look dark, so I’ll choose a chocolate shade for it. At this stage we will paint all surfaces with one shade.

The lines for the texture are very sharp, let’s give them a softer shade. This is easy to do with a tool. Fill (Paint Bucket Tool) unchecked Adjacent pixels (Contiguous). This will only work if the guides have their own color. Otherwise, you change the color of everything that has the same shade within the layer / selection.

Step 2

Now let’s underestimate the top lines of the gates and windows, and also get rid of unnecessary lines in this area.

Step 3

Under the nearest window there should be a door, we will make an opening for it.

You can also start painting the right wall of the plant with a dark tint (no matter which wall you will darken, the main thing is that it coincides with previous works). Remember to darken the guide lines for the future brick texture on the shadow side.

Step 4

To make the plant not look too monotonous, add a different color to it in the upper and lower parts.

Take a new cream color for the top (maybe it is a chocolate factory?), Immediately after working on the shadows. I usually recommend using the lightest shades at the top and the darkest on the right wall. Their brightness may vary from eight% before 15%.

Step 5

Apply color at the bottom.

Step 6

For this site “brick” guides we will not need.

Step 7

The base of the chimney should be combined with the upper part of the building, so let’s paint the roof with a dark gray color.

Step 8

For the roof we will make a simple texture – it can be gravel or any other suitable material.

Also add lighting to the top of the building and clear the dark lines. Do not forget to reduce the contrast of the inner corners at the joints of the surfaces.

Step 9

Apply the tips of past steps to the base of the chimneys, with only one major difference – this box does not have a ledge that we drew for the roof.

Step 10

Let’s paint the chimneys with a cool gray. Warm gray with shade 40? It also looks good, but we already have a lot of warm colors, so I chose a colder one.

You can try to make the pipes look like concrete or paint them with white and red stripes, as is sometimes done in real factories. I tried this option and preferred the concrete look.

Step 11

Complete the shades at the top of the tubes.

I finished by slightly changing the original lines, but I think this is for the best. As I mentioned earlier, in pixel art, purity can be better than accuracy.

Of course, you don’t have to draw all these elements three times – you can only work on one chimney, and when you’re satisfied with the result, copy it for the other two.

Step 12

Now let’s work on the shading of chimneys. There are many ways to shade cylinders. Here I used one light line near the left border and one dark line near the right, and then added tiny jagged lines, getting rid of perfectly straight stripes; thus the pipes came out as if glistening in the sun.

Step 13

Now let’s draw the top of the windows. You can leave them square, but I prefer the arched look.

This is what I did to get the shape of an arch.

Consider the screenshot below as different steps. I just thought it would be better to show all the progress in one image.

On New layer (News Layer) draw a circle the same width as the window and set the vertical slope to 26.5?, going to the menu Editing> Free Transformation (Edit> Free Transform). Then leave only the circle stroke. Clean up the lines to better evaluate the process. At the end, adjust the circle at its discretion; if you can make the lines more round or not so ragged, feel free to do it.

After you have received the final version of the window, apply it to everyone else.

Step 14

Let’s add some light to the windows (and doors). The backlight is usually placed right on the corner, but in the upper part of the arch it is quite difficult to do, since there the backlight turns into a dark outline.

For a smooth transition, the stroke is a little trick – at first it is almost black, then dark brown, and then disappears. The backlight goes up and disappears in about the same area as the black line. They go side by side only in this tiny zone. Add a bit of a dark brick shade to the wall just below this area.

Do the same with the rest of the windows.

Step 15

We now turn to the bottom of the windows; we will leave the brick color, just change the shade a little.

I tried to add a long slope of light windows at the bottom; the lines are very short, but they are diagonally 1: 1. I think this gives the windows a bit more volume. The color is the same cream, but with a lighter shade. So the windows will be combined with the base.

Step 16

Another trick to add volume: it only affects the corners. A little highlight on the top line of the base will also add extra volume.

Step 17

Let’s work on the metal gates. I slightly shifted the guides so that the bottom line seemed thinner. I also reduced the contrast of the lines.

Step 18

Try to add the backlight of the bottom line – then it will look like a small ledge, I think it is well suited for such gates. You can even make the gate slightly protruding at the junction of the doors and walls.

Reduce the contrast of the inner corners at the edges of the surfaces.

Step 19

We turn to the doors and windows.

I had almost drawn a bright yellow door, which was to be combined with the other colors and add variety. But in the end I kept it dark, like dark chocolate … I think this is definitely a chocolate factory.

The door is very simple. I added an inner rectangle, a tiny thin backlight and three pixels of metallic color that symbolize the lock.

Step 20

The windows (as I usually do) will have an aquamarine shade, not too bright or saturated. The window frames may be white, but I chose a door shade for them; just a little bit lighter.

Step 21

Maybe I was lucky, but I managed to add “slats” on the windows at equal intervals for short and long windows. Windows will also look good without or with minimum slats.

That’s how I got it. I have not forgotten about my usual effect for windows (a darker L-shaped shade parallel to the far edges of the frame).

Step 22

Here is how it looks after cleaning.

Step 23

As for the brick texture, unlike the previous lessons, we use a slightly different approach.

We already have horizontal guides, so on New layer (New Layer) we can draw vertical lines. We need only a few pieces, after which we copy (or use alt offset) them for the rest of the space. I will give these vertical lines a darker shade than horizontal ones. At the junction of the horizontal and vertical lines, the latter will prevail, so I painted them over the horizontal ones.

Step 24

To apply the texture, go to the brown wall layer, select the brick drawn in the previous step, and line the brick color with the tool Magic wand (Magic Wand Tool). Go to the layer with the texture lines, invert the selection by going to the menu Selection> Invert (Select> Inverse) and click Delete.

After that, just clear the lines inside the window frames and give the lines the desired brown color.

This is a very simple but effective texture. Before continuing, let’s try an alternate version.

Step 25

On New layer (New Layer) I added a new color (only for contrast) to the pixels near the top and front of the bricks; Thus, each brick has a L-shaped stroke.

As in the previous step, it is enough to draw several strokes and then duplicate them as many times as necessary until the entire surface is covered.

Step 26

Now paint over these lines with a lighter shade of the main brick color. This way you get the effect of a relief brick wall.

I like him, but I’m not sure about him; it looks like a small clutter of the picture and at the same time does not improve the version too much without it. Therefore, I will return to the original version.

However, it was a good option for testing or for use in future work.

4. Add industrial elements

I don’t know what kind of factory this is … maybe it’s really something related to chocolate, but since I’m not sure which machines use the chocolate factory, I’ll just add a few elements to make the building more industrial.

Step 1

Here is the layout (on a new layer) of elements that we will add.

The largest square will be the water tank (or other liquid?). The smallest ones will become air vents, and I’m not sure about the others, but they will work well.

Step 2

I have already talked about drawing air vents in a lesson in drawing a multi-story building (http://design.tutsplus.com/tutorials/create-an-isometric-pixel-art-apartment-building-in-adobe-photoshop–cms-23006 ). Here we will do the same.

To give a metallic look, I change the shade with brightness, so the lighter shades become warmer, closer to yellow, the darker ones become colder.

Step 3

Now let’s turn a large square into a water tank.

First you need to make a cylinder. The shadow will be black with opacity 10-20% – I usually use 15%. The final step here is to add a little extra width to the upper circle of the cylinder.

Step 4

This extra width will help draw the conical cap, which usually these pieces have.

Paint the container with cool gray and paint the legs with dark or the same color as for the base.

Step 5

Here, too, will need to work on shading. It almost repeats the style that we used for chimneys, but I added a bit more shades, as our form is wider. She would have looked less realistic with just three shades.

The shading at the top must be conical and proceed from the very top of the tank.

Step 6

We now turn to the boxes, which may or may not be air conditioning.

The boxes are pretty simple. They should have a metallic look and have any grills / fans or anything that can make them not so simple.

Step 7

Here is a view of the finished boxes. I added some shading to the hoses / cables to give them volume, and also worked on the lighting and the stroke to blend better with the environment.

Step 8

Now let’s draw another tank. This one will be smaller, horizontal and equipped with a pipe leading to the plant.

We turn a rectangle into a kind of cuboid, and that in turn will become a cylinder. To do this, we will draw ellipses on both sides. Let’s keep the shape slightly raised above the ground, considering the shadow.

Step 9

Now apply metallic colors and cylindrical shading.

The brown tint below represents the reflection of the roof.

Step 10

We will add some conic shading to the front circle and draw a pipe that looks like a straw at this stage.

Step 11

I gave the pipe a different color so that it was made from a different material. I also increased the highlight on the bend of the pipe, as it, in my opinion, should glare more strongly.

As a final touch, add a stand and soften the corners at the joints of the surfaces.

Step 12

That’s how all the elements are placed.

Step 13

Now you can clear the guides.

To add pimple to our pixel artwork, let’s take a pipe of a small capacity and attach it to the base of the chimneys, easily reaching even greater complexity.

5. Making smoke

I have not drawn pixel smoke / clouds for a long time, but I consider it necessary to draw clouds of smoke for our plant.

This element (as well as the glass in the windows), which many pixel artists make in their own way.

Anyway, here is my approach.

Step 1

Start with a few rough sketches (on a new layer) of the basic form, which should be a cloud of smoke. Their foundations should be the same width as chimneys, but then they will expand … as they expand, they will also become more transparent and disappear.

The sketch does not have to be accurate, but it will give an idea of ​​what the final shapes should look like and will be something of a guide for the shapes and curves that smoke will consist of.

All three clubs of smoke should move very similarly, but we don’t want to make one smoke and copy it twice, as it will look ugly; the picture will have a lazy look.

Step 2

Now let’s turn each sketch into a neat club of smoke.

I decided to make the shapes mostly square, I like the way it looks for pixel art. So start drawing a sketch on the new layer with straight vertical and horizontal lines.

Then round the corners. It is logical to make the corners wider / rounder as the smoke goes up and sharper closer to the base.

To complete a stroke, make a few lines going inside the form, as if a cloud of smoke overlapped each other.

Step 3

Now a little psychedelic.

We want the smoke to become more transparent as it rises, and ensure this, gradually reducing the opacity. But we will work with different degrees of transparency using bright colors.

Otherwise, it will be very difficult to work with the final color with different opacity (Magic wand (Magic Wand Tool) cannot separate opacity without special settings).

So, I decided to use four different colors for each smoke club. I used the first color right above the chimney, also working on some light shading. The remaining three colors spread a little faster.

After all this is done, you can start replacing bright colors with different shades of transparency of smoke. I chose the color for smoke almost white, with a small amount of yellow.

I made the following parameters of opacity (bottom up): 80%, 60%, 40% and 20%.

Stroke much softer (bottom up): 20%, ten%, five%.

Step 4

Of course, this whole process needs to be repeated for three sketches. Ideally, all this is better done at the same time for better consistency.

Here is the whole process for three puffs of smoke.

Step 5

And here we apply them to our building. Now the plant is 100% ready!

The plant is built and working. Congratulations!

The work is done. The factory is functioning, the smoke looks quite good, and it is almost perfectly clean so as not to litter the environment. Now you can add some industrial elements to your city, giving pixel residents jobs, and a pixel city more diversity and life.

Hope this lesson was productive!

Like this post? Please share to your friends: