If you want to make a pixel art city then a park would be a nice and pretty much necessary addition. The elements we'll cover in this tutorial would, in fact, be useful to accessorize other kinds of scenes, like gardens inside buildings, or terraces.
Please review the introductory tutorials in this series and the pixel art tree lesson.
1. Define the Size & Design of the Park
I usually start by defining the size of what will do based on the character's size. But for the park area itself, it might not be that useful to have the character on the canvas.
Step 1
But we can still put it up there for the sake of habit.
We're making a large rectangle. It could be a perfect square if you want—in fact, that may be ideal for the central plaza of a city. But I thought making it wide on one side and narrow on the other would make it a little less boring, and also, it manages to match the width of the City Hall from the last tutorial, which could eventually come in handy.
Step 2
Round off the corners, and the basic shape for the park is complete.
Could this be the easiest lesson yet? (hint: no)
Step 3
Always check reference images when you're making your own creations, make a moodboard, sketch options and try multiple alternatives. Of course, for now we'll follow a design I came up with, which I hope you like. It'll be a pretty typical, classic park: nice old lamp posts, gazebo, fountain, and so on.
Let's begin with some basic landscaping. We'll have a path going through the middle of the park.
There are many ways to find the center. Here's one you could try: make the two parallel lines that form the path and cut it into the clipboard, then select the center area of the park with the Magic Wand Tool (set to Contiguous) and then paste; Photoshop will automatically paste the clipboard on the center of your selection.
Step 4
A straight path down the middle of the park might be a little too boring. The references for park designs showed all kinds of swirling, curving paths, but I'd rather avoid so many curves, as they inevitably bring more jagged lines into our designs. So instead, we'll add some complexity by adding angles to the path.
So I made a straight horizontal line from one corner toward the path. The circle where they meet will be useful to find the proper width of the path regardless of its direction. The rules for the circle are: it must be twice as wide as it is tall, and its borders should match the two lines of the path.
Leave it on a new layer. The top line of the circle defines the top line for the new horizontal area of the path.
Step 5
Here's that area of the path, with the reference circle and extra unnecessary lines removed.
Step 6
Let's mirror the path for the opposite corner. You can simply copy the previous lines, paste them and then rotate 180˚ (Edit > Transform > Rotate 180˚.)
Step 7
Let's add another path that goes vertically through the park. The circle becomes useful again to get the width of the path right.
Step 8
Here are the outlines for the new path area.
Step 9
Clean the middle up. And let's add one more path angle change.
Notice the slightly rounded corners.
Step 10
Mirror that bit of path again, and why not fill it with some grass color already, on the areas that aren't the paths.
Step 11
We'll make the basic shapes of the gazebo as a guide that we'll later redraw over, and we'll start by making an octagon; use the Polygon Tool to create an eight-sided shape.
Then rescale it to 50% vertically to fit the isometric view, and then resize it (while maintaining the proportions) to a size you like on the park.
Step 12
We'll use different sizes of the octagon because we'll be adding some steps to it and they'll get smaller concentrically. So to the side of the original octagon I have a copy of it at 90% of the original size, and to the side of that one I have another octagon at 80% of the size of the original one.
I also kept another copy of the middle size octagon for use as the roof, later on, and another copy of the large one on the opposite end of the park, only to help me place the fountain later on.
Their colors are altered a bit so that we may tell the shapes apart.
Step 13
The top three octagons will be the steps and floor, so they should have some height; you can select them, copy and paste in place (or hold Alt while nudging) and move them up 2 pixels. I also inverted their colors to be able to tell the shapes apart.
Step 14
And here they are after being placed concentrically.
Step 15
Place the roof over the base, high enough that the character can stand inside.
Step 16
It seems as if we won't be able to avoid jagged lines on the roof, but it should be fine. Make some 2:1 lines along the top diagonal lines of the roof, and extend them to meet in the middle; that will be the tip of the gazebo's roof.
Straight lines should extend from that tip to the visible corners of the octagon. These lines can be made by clicking on the tip with the Pencil Tool, holding down Shift, and then clicking on one corner. A line automatically forms between the two points.
Step 17
Now let's make the basic shapes that will be the guide for our fountain. Start with a circle and a rectangle wider than the circle.
Then center them and merge them. They should look like a chunky Saturn.
Step 18
Copy that shape three more times, and join them on the corners to make a sort of square like this:
Remove the gaps inside and rotate the shape 45˚. This'll be the shape of our fountain.
Similarly to the gazebo, this shape will repeat concentrically, only this time the rescaling trick leaves much to be desired as the mix of the square and the circles results in the widths of the shapes being varied.
Notice how narrow the corners are vs. how thick the semicircles get at their centers.
Step 19
So here's a quick and dirty solution. Double-click the layer to go into the Layer Styles, and add a Stroke with a nice chunky size, setting the position to "Center".
Step 20
We'll add another stroke to that. We can do that by copying merged (Edit > Copy Merged) if you have a background layer, making invisible to copy merge only the fountain shape. On the new layer with the merged elements pasted, add the other (even thicker) stroke.
And we get this:
Those corners aren't very pretty and the circles aren't perfect, but this will all just be a reference for the actual pixel work, which we will get right.
Step 21
Rescale the shapes we made to 50% height, and then to a size similar to the reference octagon we had in place. Paste the fountain shape over the octagon.
And remove the octagon.
And now we've got these design ideas down. You'll notice there's a symmetry to our park, which for this design I thought was best, but designs don't always have to be symmetrical.
2. Create and Expand the Vegetation
Let's get to work on the different items we'll add to the park. Some are pretty simple, some definitely not.
If you haven't gone through the isometric pixel art tree tutorial, now would be the time to do it.
Step 1
Get your tree.
Step 2
Turn it into a mini tree.
Just make a simple oval shape, and include some of the shading from the edges of the tree to keep some of that volume. Then shrink the trunk and shadow.
Step 3
Turn that mini tree into a shrub. It has a pretty simple, egg-like shape, no trunk.
And you've got yourself three types of trees!
Step 4
We'll find places to dot with flowers. They look nice and increase the vegetation variety without much work.
Let's not worry about stems or leaves. Here's a pretty simple and isometric-as-possible kind of flower: just four petals and a soft outline (green like the grass, but darker)
I make the bottom of the outline a bit darker to act as a slight cast shadow. Modify into multiple colors when done.
3. Create Lamp Posts
Let's make our lamp posts. We'll have a number of them classing up the park.
Step 1
It'll be pretty thin, and definitely taller than the character.
Step 2
It's not necessary, but I wanted to add a cement base.
Add some highlights and shadows. I'd recommend avoiding a gradient-y look when shading, in general, but it's easier to be tempted with cylinders.
Also, you might want to give a little bit of transparency to the glass part.
4. Create Benches
Where else would people sit?
Step 1
The seating surface of the bench should reach about knee height on the character.
Step 2
To finish the structure, add some legs and a back. Then color and texture.
Step 3
It's easy for such a simple piece of furniture to finish it in four different views. One extra view is achieved by simply flipping horizontally.
Step 4
The rear views need some extra work, but it's pretty simple—just move back to the opposite edge of the seating surface. Recolor the outlines that might need it.
And flip for the extra view.
5. Create the Gazebo
Let's get to work on the definitive version of the gazebo.
Step 1
Here's the guide.
Work on a new layer.
You can start with the outermost lines.
Step 2
If you can achieve more ordered lines than what the guides suggest, then make them more ordered.
Here I'm already adding highlights on the front-facing corners of the steps, and slightly different roof highlights.
Step 3
You can get rid of the guide already.
Let's add the columns that hold the roof up, and also a bit of white trim underneath the roof.
Step 4
I'm giving the steps the same color as the cement base I used on the lamp post, to more easily keep things cohesive.
It should be a light grey, representing cement, or concrete.
Step 5
Add some proper shading to the steps.
Step 6
And soften the lines. There's no need for black on the corner line where two surfaces meet. I also softened some other lines on the steps just to reduce the contrast on those parts.
Step 7
Add some color to the roof and different shades. How do you think the light would reflect off the octagonal roof?
Step 8
Softer highlights on the roof. It's especially preferable to keep contrast low on all these roof lines because they're the jagged, not-ideal kind of pixel art lines.
Step 9
Let's give the roof some texture—not really tiles but a bunch of parallel lines.
You can start with pointers on the front-facing side, on a new layer.
Then add lines that cover it completely.
Step 10
The lines must go on a different angle on the neighboring side; they must be parallel to that side.
Do that and then remove the excess pieces of lines.
Step 11
And repeat for the next neighboring side.
We only need to work on one of the sides, because we'll get the other side by simply flipping.
Step 12
Add another set of lines, right next to the roof corner highlights. And remove the pixels that go right over the highlights.
Step 13
And now you can flip horizontally to cover all sides.
Step 14
Lower the layer opacity to 10% (or try 5% and up to see what you prefer). And then you can merge down.
Step 15
Here I added some extra improvements. First, a bit of extra white trim underneath the roof.
And then I lowered the roof a bit to cover up that ugly dark mess formed by the back area of the steps.
Step 16
And to further reduce the dominating greyness, let's add a few benches. I could have gone with four, but I liked how it looked with two.
Rearrange the layers, if you keep many around. If not, just erase the parts of the benches that would be covered by the roof and the columns.
The gazebo is complete!
6. Create the Fountain
Now we get to the fountain. This might end up being the focal point of the piece.
Step 1
Here's our guide, and on a new layer we can immediately correct those softened corners. We need only work on one quadrant of the guide; the rest can be achieved by flipping horizontally and vertically.
I added these lines to help maintain the same distances on these parallels. And I'll also keep many of those pixels as part of the curves.
Step 2
You can "freehand" the curves, and then edit and move a few pixels around.
Here are the curves after a bit of cleaning.
Step 3
Here's how the lines look after flipping horizontally and vertically to complete the fountain shape. You may not need the fountain shape guides anymore.
I did a last bit of retouching to the curves on one quadrant (and when done, replaced the other three with the new one)
Step 4
Now let's add some color: the previous cement color for the floor around the fountain and a lighter shade for what'll be the top of the fountain walls.
Step 5
Let's raise those walls a little bit.
I might have liked to raise it a bit more, but I didn't like how the lines looked, clashing against the lines around the cement floor.
But this height will be fine. The character can comfortably sit on that ledge.
Step 6
Add some vertical corners, close off those volumes, and add some underwater shading.
Step 7
Add a bit of shadow and highlights according to how you think the light would work on the walls.
And some highlights to all those peak corners that face toward us.
Step 8
Let's soften those lines on the sides of the walls, just below the top. They could also be removed, but I think they give a nice effect.
They should be just like the wall colors but around 20% darker.
Also add and/or soften those inside lines and lines where surfaces meet.
Step 9
We'll have some overflowing bowls above the pool. Let's add a base for them, starting with a circle in the center of the pool. The circle should be twice as wide as it is high.
You can make these circles with the Elliptical Marquee Tool. Fill the elliptical selection with the outline color and contract the selection (Select > Modify > Contract…) by one pixel to fill the inside with the color you want to give the circle.
Step 10
Turn the circle into a cylinder.
And give it the same finishes as the walls of the pool.
Step 11
Now, in a new layer, we add a circle above this cylinder base. This will be the lowest, and also the largest, bowl of our fountain.
Step 12
Add another, smaller cylinder, on a new layer, above the previous one.
Step 13
And then once again.
These are all the bowls we'll need.
Step 14
Apply some color to the first bowl; underwater colors on the center but lighter on the edges.
Step 15
Repeat for the other two bowls.
Step 16
And now let's connect the bowls so they're not magically floating above the fountain.
The bases and pedestals for these fountains can be pretty ornate, but because of our top view we just get a small glimpse, so a simple circle/sphere can be enough to do the trick.
Shade it nicely and soften the inside lines.
Step 17
And then extend the pedestal to connect the second bowl.
And the third bowl as well.
Step 18
To finish conveying these volumes, you might want to add a bit of shading to the inside of the bowls. They're concave shapes, and I think it's likely that light would act like this in such a shape.
Apply to the other two bowls, even though it's less noticeable in those.
And you've got the shapes done.
Step 19
But what about the water? Let's take care of that by adding not one, not two, but three water effects!
First, a reflection effect. Water in motion can look a bit like dunes, so we'll do a simple pattern that looks a little bit like a bunch of tiny dunes. We'll start with a warped checkered pattern.
And then giving these squares more of a delta shape.
Step 20
Here, on another layer I made these shapes to define the water surfaces, the areas where I'll apply my pattern.
Step 21
Here is the pattern repeated all over the water, applied only over the purple mask and on a new layer. It's in a similar color to the inside of the pool, but brighter.
Step 22
You can change the blending mode for the pattern layer to overlay or some other setting you might like and lower its opacity. And then, if you want, merge down.
Step 23
We'll have water overflowing from each bowl as drops going, naturally, down. That means that they'll hit the water surface where this circle denotes.
Step 24
Here in red, for visibility, are the drops I'm using. Near the top they are a bit closer together, but as they fall, the distance between each drop increases (by a gigantic 1 px).
I'm using two versions of these dotted lines—one is simply 1 px higher on the canvas than the other.
Step 25
Let's give the drops a light water color. And place them going around the circle, keeping them alternating and without much touching between the lines.
Step 26
Make the previous drops invisible. Now we'll add tiny splashes over the surface, which will be where those drops are hitting.
So we just take the circle where those drops are meant to hit but give them a spotty pattern look.
Step 27
And once we mix those two things (giving the falling drops a lower opacity) you should get a pretty convincing shower effect.
Step 28
Apply the surface splashes to the bowls.
Step 29
And apply the falling drops to them as well (I also slightly decreased opacities for the higher part of the bowl).
And you've got your convincing, watery, beautiful park fountain! Simple!
7. Place the Items
With the amount of elements and space to place them, the possibilities might be near infinite. Try different alternatives. I like keeping elements a bit sparse, just enough to convey abundance, but keeping things clean. But you might want a more saturated approach.
Step 1
The two things that we already know where they go are the gazebo and fountain, of course. Put them right over the guides.
Step 2
And get rid of the guides.
Let's add the lamp posts. Three per side seemed like enough for me. I also liked this spacing and them lining up with corners.
The three spots on the other side of the lawn are a guide for the placement of the lamp posts for that side. You can get those markers right off the newly placed lamp post; just copy them, rotate them 180˚ and put them over the other side of the lawn. The lamp posts will be upside down, but that's ok because you'll only use them to mark the spots.
Step 3
Place the lamp posts on the corresponding spots on the other side of the lawn.
Step 4
Now let's place some benches for gazing at the fountain, or who knows, pigeon feeding?
Step 5
I put the smaller trees against the fountain edge of the park: four of them, evenly spaced.
They clash a little with the fountain's space, so I moved that in a little bit. And I also moved the gazebo to correspond symmetrically and so that there's also enough space on that side for another four small trees.
Step 6
And now let's deploy our bigger trees!
As I said, I like keeping my items somewhat sparse. Anyway, there are more items being added to the environment, so there won't be any dull areas—except for two small open spaces, which parks need anyway.
Step 7
Now add some flowers here and there. See where you like them. I put them along a line, connecting the lamp posts in a way. Their placement should be a little bit random, I thought.
Step 8
And the little shrubs? Let's find them a nice spot. There's a certain lack of excitement to the gazebo and its surroundings. I found the little shrubs helped to fix that.
And with that we've found spots for all our elements.
8. Add Some Textures
There's still a bit of work to do before finishing our environment.
Step 1
Let's add some color to the path.
Step 2
We'll give it a cobblestone kind of pattern.
Start with some vertical lines, 4 px apart, some 5 px apart. Then add horizontal lines to make the individual stones. It may get tedious to make a larger pattern, but a larger pattern is good because it's more seamless.
To finish it, I tile it a few times in order to have a better idea of how it matches on the edges.
Step 3
Apply the path color we selected and a darker shade of it to the lines. It'll work best if it's subtle, so the colors only vary by a few percentage points in brightness.
We'll make some stones darker and some lighter. To space them out nicely, it's easiest to color them in noticeable shades, before replacing them with the final path colors.
Step 4
Tile it repeatedly all over the path areas, in a New Layer. Place it nicely. (Do the vertical lines clash too much with the park's vertical lines? If so, move it around a bit.)
Step 5
And with the Magic Wand Tool select the original path area, invert the selection and on the pattern layer, hit Delete. And you get this.
Step 6
For the grass we can apply this simple texture that I've probably used on half of the tutorials!
Step 7
And do the same as with the cobblestone pattern.
Tile…
… and remove the excess.
Step 8
And finally soften the surface lines. Where the grass meets the path, add a shade between the color of both surfaces but darker than them. Do a similar thing for the edges of the grass and path.
The park is pretty much ready now to be placed on an urban surface like a sidewalk.
Awesome Work, You're Now Done!
Congratulations! The park is a success! Pixel citizens are reportedly pleased.
I've added a few final details here: the character, a pair of pigeons and a touch of a highlight on the front facing edges of the grass, to give it the visual effect of standing about an inch higher than the rest of the surface.
A park would definitely add a lot to a city scene. And the items by themselves should also be very reusable: benches, lamps, and trees. So I hope you found value in this tutorial!
