Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / [PS Tut] Cartoony(ish) Rock Wall Texture

Years of Service
User Offline
Joined: 25th Sep 2008
Location: ...pillow room...
Posted: 25th Nov 2009 06:01 Edited at: 25th Nov 2009 06:02
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.

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
Ashingda 27
Years of Service
User Offline
Joined: 15th Feb 2008
Posted: 25th Nov 2009 17:14
Wow that's awsome, thanks for sharing!
Years of Service
User Offline
Joined: 25th Sep 2008
Location: ...pillow room...
Posted: 25th Nov 2009 17:33
Np, I was looking around here and was seeing very few actual art tutorials...
Years of Service
User Offline
Joined: 1st Dec 2004
Location: On your head, weeeeee!
Posted: 25th Nov 2009 22:21
That is a very good texture. I could see myself using that.
Perhaps you could release a series of cartoon texture tutorials?

here's a tip to make textures loop:
use filer>other>offes and enter half the textures with and half the height.
Work away the lines and your texture is ready.

Years of Service
User Offline
Joined: 25th Sep 2008
Location: ...pillow room...
Posted: 25th Nov 2009 22:38
Yup, I had just left that stage out.

As for a pack... Eh, we'll see. I've got to figure out how to make solid walls first >.>
Years of Service
User Offline
Joined: 25th Sep 2008
Location: ...pillow room...
Posted: 28th Nov 2009 23:45

Here's an example of one i've spent some time working on.
Years of Service
User Offline
Joined: 3rd Jul 2008
Location: Equestria!
Posted: 30th Nov 2009 15:22
that was awesome i am easily going to give this a shot

[Q]uik, Quiker than most
Years of Service
User Offline
Joined: 25th Sep 2008
Location: ...pillow room...
Posted: 1st Dec 2009 03:08
Can't wait to see what you come up with

Maybe I should have posted this in the 3D section... It might have gotten a better response...

Anyway, I did a quick render... Bit shiny though, got carried away with modo's awesome renderer and material editor...

Login to post a reply

Server time is: 2023-01-31 13:42:32
Your offset time is: 2023-01-31 13:42:32