Cartoony Rock Wall
A Photoshop Tutorial
By Pb
Final Product:
Step #1:
First, we need to get a new image to work with. I picked a 256x256 px size canvas. Size doesn't matter, but make sure it is a power of 2 (128x128, 256x256, 512x512, etc). Make sure that the background is set to transparent.
Step #2:
Secondly, we need to pick a color, preferably one that matches a rock. I just picked a desaturated medium yellow/orange, but if you want to be more realistic, you can pick a color from an image of a real rock. This will be our medium color. We will use a total of 3 different colors for painting.
Step #3:
Now we need to fill the canvas with our medium color. Just use the bucket tool. You can use the shortcut
G to access it quickly.
Step #4:
Now we need to grab the two other colors we will be using. Click the foreground color box at the bottom left of the screen. Then pick a slightly lighter and more saturated color than our medium.
Click OK, then press
X to swap foreground for background color, and click the foreground color box again. Now pick a color slightly darker and less saturated than our medium.
Step #5:
Now, we are going to want to outline our bricks, but first, we must set up a grid pattern to make sure that it will line up well for tiling.
Go to Edit>Preferences>Guides, Grid, Slices and Count
Step #6:
Now change the Grid>Gridline Every: setting to a small power of 2 (such as 16 or 32). You can set the subdivisions to 2 if you'd like some more accuracy but leaving it at 1 will do fine. You can get your grid to show up by pressing
Ctrl+'
Step #7:
Now we need an appropriate brush for our grouting. I used a 5px brush for this step, it'll give it a nice effect later on. However, I don't suggest using a larger size.
Step #8:
Now, using your darker color, make some straight horizontal lines along every major grid line. You can make a straight line between two points by clicking at one point, then holding shift when you click at another.
Step #9:
Now, turn off your grid (
Ctrl+'). We will freehand (using only a mouse with no guidelines) the vertical lines of each brick. Spread them out proportionally to your liking. Since we aren't using a grid, don't be afraid to have a little squiggly in your vertical lines. Keeps it from being so uniform
I suggest zooming in to 200% when doing this.
Step #10:
Now, we are to begin our first shading. We will use our two colors (lighter, and darker) for this. But first we must pick an appropriate brush. Pick one that is a little bit less than half the height of each brick. Make sure the brush is set to 40-50% opacity.
Step #11:
Now, using the lighter of your three colors, we will make a couple strokes in each brick to represent highlights in the stone.
Step #12:
Now, using a couple pixel smaller brush, we will make shadows using our darkest color. try not to paint over the highlights, only around and in between.
Step #13:
Once that is done, we need to give it that rocky texture. Luckily there is a little trick we can use by using photoshop's filters.
Go to Filters>Artistic>Sponge
Step #14:
Change the settings to these.
Step #15:
Now, that is a bit to much texture, we need to reduce it some. Press
Shift+Ctrl+F to open the Fade Filter menu. Change the opacity to around 40-50%.
Step #16:
By now, if you had a really lighter dark (lol) dark color, your earlier outlines will be a bit hard to see. Don't worry. Now we are just going to make those previous lines even darker. Use the Burn tool (located at the bottom of the main group of your tools pallete), with opacity set to 30%, and brush size set to 3px to paint over your outlines again. Zoom in to about 200-300% so you can see the pixels of the filter easily. Try to make your brush kinda follow the darker bits of the image.
Step #17:
Now this is where some skills are needed. What we need to do is add some sharp contrast to the highlights of the rocks. To do that, we will need a 1px size Burn tool, set to 30% exposure. When you look at the image closely, you should see some color patches, try to use the Burn tool to outline these in places. It may take some practice to get down well, so duplicate your layer.
Step #18:
Now, we need to add some contrast to the grouting as well. So use the same burn tool to trace over the grout lines again.
Step #19:
Now, it's time to add some character to this well. Try using a 60% exposure burn tool, with 1px width, to add in some cracks in the stone.
Step #20:
Now, we need to finalize it. Some contrast and such edits are in order. Go to Image>Adjustments>Brightness/Contrast, and set the contrast to +40.
Step #21:
Now, it's too saturated. Go to Image>Adjustments>Hue/Saturation, and change saturation to -20.
Final:
And there ya go, you can try adding some mossy green stuff to the bottom if you like.
*You'll notice that I have more detail at the top of the image and less at the bottom, I was getting tired and this is like the 4th time I've done this thing. Lol
