ID:30339
 
Keywords: graphics
I was impressed a lot by a recent post by TheMonkeyDidIt over at the BYOND Pixel Art Society, so I tried my hand at creating a seamless stone texture per his tutorial. I've done such work before, but my efforts had always ended badly for several reasons.

I learned these major lessons from the tutorial: 1) Start at the edges, work inward. 2) Don't be afraid to use the darkest color to "putty in" some awkward corners. 3) Use the next-darkest color all around the rock, not just on one edge for shadow, but use it most on the shadowed side--and don't be afraid to glob it on there. 4) Use that same color for some extra antialiasing around the cracks. 5) Highlights should be pretty irregular--they're rocks after all! 6) Avoid accidentally creating a strong horizontal or vertical line; it's best if you do this part first.

My first attempt was less than successful, but this time I was able to knock out a good stone tile in very little time. A little practice doesn't hurt. This is what I came up with for a first attempt:


That came out pretty well, and with only 4 colors. So I thought to make it look more realistic, less pixel-arty, I would process it a bit. Here's the same image after I ran it through a soften filter, then sharpened twice:


One of the first BYOND games I ever saw did something like this, but with orange rocks that had a fiery tone, and they varied in brightness. So, I worked up a little something along those same lines. I redid my palette so that the crack color was black, and the rocks were shades going from red to orange. Then I added a brighter orange, and a darker red, for a 5-color range plus black. Any given rock used 3 of the colors. I had to be careful not to group the same colors too much, or accidentally create a direction line for the eye to follow.


That came out amazingly similar to what I was trying to emulate, only the rocks are bigger. It looks even better with the same smoothing applied:


Once I'd done this, I realized the same thing could be done to the original gray tones, so I did some quick color swaps on the orange one:


Then I smoothed again:


All in all, I got a nice base to work from if I ever want to use this tile--and variations on it--in a game. It just goes to show that when it comes to pixel art, even if you fail once or twice, it pays to be persistent. I learned a lot from that tutorial, and there is a wealth of others out there.
I prefer the original, pre-processed stone tiles to the blurred ones.
I think they all look pretty damn good.
Elation wrote:
I prefer the original, pre-processed stone tiles to the blurred ones.

The blur doesn't work as well on the grey ones. But I think it blended beautifully with the red-orange ones.
Tiberath wrote:
The blur doesn't work as well on the grey ones. But I think it blended beautifully with the red-orange ones.

That might be because the red-orange shades actually change hue as they move up or down in brightness. The darker colors are pure red, but in the lighter ones, the amount of green is stepped up a little at a time. The shades are #300, #600, #930, #f60, and #f90. That's four different hues, so blending has a pretty interesting effect between them.
Very good! The tiles look great. I will be stealing this technique.
Really awesome work, LJR. Especially the rocks that used a different base brightness in sets 2 - 6. It makes some of the rocks look a bit set back from the others.

Also, nice use of the palette on the orange rocks. Using a hue shift between shades is a great technique and those look really good.
I've always thought that the red-orange-brown scheme often used in lava-themed areas looked exactly like a bowlful of Reese's Pieces. The effect is most prominent in the volcano levels in Super Mario 64.
What program did you use to soften and sharpen it?
My pixel editor of choice is PSP 4.1, which does a lot of simple stuff pretty well. What I did was first tiled my 32x32 icon into a 96x96 image, then use the soften/sharpen filters, then trim back to 32x32 using the middle section. (This avoids any issues that might show up at the edges of the image.) I imagine a basic soften or sharpen operation in Photoshop would give you much the same result.