Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Making a Complete Tileset with Photoshop


Anna Comnena
 Share

Recommended Posts

Well, I haven't given much to the community lately so I am planning quite a project!

Please wait for all the images to load!

My plan is to create a new, custom tileset from scratch, and give it freely to the community. What's more, is during the creation of this tileset, I will document it and write a tutorial covering my progress, as a guide for people wanting to make their own custom tileset.
:azn:

Just making a tileset in itself is a large project, but keeping track of it and posting about it adds to the size! So this will take some time (just writing this post took an hour!). I will try to do updates daily or every other day.

Disclaimers: I may or may not use filters and other "cheating" methods, if I feel the effects are worth it. As I have posted before, filters and effects can be problematic with pixel art, but if used correctly they can be an asset as well.

* * *

This is a pre-planning step, I've just trying to decide the scope and how to proceed. I'll start by listing what graphics will be needed in the end product to make a complete tileset. From experience, this will always grow, but there can be good minimums to base off of. I've thought of one from my past work with several tileset styles, including my own.

The graphics we should need to depict for a complete tileset:

* Ground tiles
* Grass, dirt, sand minimum
* Natural details
* Trees and bushes
* Flowers, weeds, grasses
* Rocks, stones, pebbles
* Cliff tiles
* Earth and stone cliff styles
* Cliff details; rockslides, caves, etc.
* Water
* Water/underwater base
* Water transparency and animation
* Waterfalls

* * *

* Roads & Bridges
* Wooden plank, stone/brick arch
* Structures
* Walls: Plaster, wooden, brick, stone
* Roof: tile roof, thatch roof
* Details: windows, doors, chimneys
* Settlement Objects
* Wells, fountains, pillars, lampposts, benches
* Barrels, crates, sacks, general cargo
* Signs, notice boards, stairs, ladders
* Tents, awnings, hearth, fire

* * *

* Interior Walls
* Flooring and rugs
* Bookcase, storage shelves, bottle/potion shelves, tool shelves
* Furniture: Table, chair, stool, bed, couch, desk, dresser
* Interior lamps, fireplace, etc.
* Interior doors and windows
* Fringe Trim, support beams

This isn't a set-in-stone list either, but from experience this seems to cover the minimum things you'd need. I'm sure other things will come up as I go and will be added.

* * *

It's been nice to see how willing people are to make their own tilesets recently, and I do hope this will help some of you out! This thread will be updated as progress (or lack of) occurs. It will be Locked for cleanliness, as I plan to use each post for a certain section. PM me if you have comments or questions.
:icon_music:

Next Phase to start: graphic planning and tool setup!
Link to comment
Share on other sites

PHASE 1: Photoshop setup, and making some handy tools.

This phase is going to be a basic introduction, getting people familiar with certain tools in Photoshop I use very often. Many of you may already know how to do this stuff, or do the same thing a different way, that's fine too. This tutorial is really just a documentation of me making a tileset.
:azn:

Ok, first important feature you want to set up in Photoshop is the grid!

Go to Edit>Preferences>Guides & Grid… and set it up so you have a gridline every 32 pixels.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup01.png)
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup02.png)
Now lets set that up so it appears on your image to guide you! Go to View > Show and turn on the Grid:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup03.png)
Notice that I circled the hotkey! Remember this hotkey, it will be very useful for you!

Now the grid is displayed, let's enable Snap to this grid. This will keep tiles aligned easily.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup04.png)
Notice that the Snap To function does not have a hotkey, this is why the Show Grid hotkey is so important! You will not always want to have the Snap on, it can divert your pixel drawing and everything. So it's best to be turned on and off at will, which makes that hotkey very handy.

Ok, this is getting too much like a "how to use Photoshop" tutorial, so lets move on more quickly shall we?

For setting up the tools, just makes sure to always use the PENCIL tool, not the paintbrush, and from every tool, at the top when the tool is active, make sure it's always on Normal mode, and turn off any Anti-alias function, and for tools with Tolerance levels, set them to 1 (they default at 32 if I remember correctly).
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup05.png)
Oh yeah, last thing about tools, you'll primarily only use Pencil, Paint Bucket, Magic Wand, and Selection Box. Do not, ever, use Smudge, Blur, or Sharpen tools in pixel art!

If you have any other questions about setting up Photoshop, go find some tutorials about it online. :P

* * *

Now to begin making graphics we need. The first thing is to set up some palettes we will use for this project. It doesn't have to be completed now, because we will add to it as we go. The second thing, is making some template graphics. From previous work I have found out that sometimes if you set up a template for similar things it can save a lot of time. In the specifics for this case, we will make a ground transition template!

For palettes, it's good to go with 5 shades per base color. This allows for outlines, shading, base, light, and highlight shades. You may not use every shade depending on the circumstance, but they are useful and it's a small amount so it will not be too hard to handle.

Let's start by creating a new file, I prefer a fairly small rectangular image file that I can move below my projects to keep the palette handy. Now let's start with a base tile for grassy ground:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup06.png)
Then with a large-sized pencil, place it down on your palette image, and then select a color that is darker than that one:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup07.png)
From there, go one other shade darker, and then color pick the center (base) color again, and then go 2 shades lighter.
From here, let's try doing another grass color, maybe a more golden shaded grass. So select the base green shade, and base a new gold grass base from that:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup08.png)
Continue doing that for different shades, in my case I also added earth (rich brown), and sand (beige/tan).
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup09.png)
Ok, lets add a few other color shades for now, we can add more later:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup10.png)
This is just the way I like my palettes set up, it's easy for me. Do whatever you feel comfortable with. A palette is important, however, to ensure that your colors remain consistent. Make sure to save your palette image as a easy name so you can access it when you need it!

* * *

Now to make a transition template. If this was my first time doing this, I would skip this step since I wouldn't know that I'd have a need for this. But luckily I do know, so in this case we have the benefit of foresight!
:azn:
Start off by creating a new image with the dimensions of 32x32 pixels. Turn off the grid if it's on (you probably had to turn it off to place palette correctly). With the Box Selection Tool, select the bottom half of this graphic (32x16):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup11.png)
Then fill the bottom with a Gray color (I used #999999) and then fill the top with Black (#000000).

Zoom in to 800% zoom – in Photoshop this is the best per-pixel zoom level -- and start checkerboarding above the gray line with gray dots. Checker fully for the first two or three rows, then break it up and place a few semi-randomly. Then do this with black, on the opposite side.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup12.png)
Now we have a good transition between the black and gray! It will come in handy later. Right now let's do some more: Open a new image, size 160x96, and Select All on our little transition and CTRL-C (Copy). Paste that in the second grid space on the top row of the new image.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup13.png)
Then rotate the canvas of the transition image, Ctrl-A, Ctrl-C again, and paste that in, and repeat until you have four sides:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup14.png)
Make sure to merge down all of these into a single layer. They should be aligned cleanly with the grid's help.

Now for doing corners!

Copy one side and paste in in the image, moving it to a corner grid slot. Don't merge this layer down. Then switch to Layer 1 and copy the other side of that corner, and paste/move it into the same corner grid slot. Don't merge either of these, you should know have Layer 1, Layer 2, Layer 3 now:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup15.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup16.png)
Crop off the ends of the respective layers like so:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup17.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup18.png)
Then fill in any blank space with the appropriate color, then select the entire tile square, and turn off the Grid. Round the corners with appropriate dithering, using the highest layer you have in that corner:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup19.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup20.png)

If you are happy with the corner, merge the layers down, but keep the selection box on that tile. Turn the Grid back on, copy that tile and open a new image (it will auto-size to 32x32, your selection). Paste the corner into the new file, rotate it, select all, and paste the rotated corner onto your main file and snap it to the appropriate corner. Repeat until you have all the corners:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup21.png)
If you are happy with the corners, then merge all the layers down, and fill in the center with the gray color you are using. Just about done!

For the interior corners, I going to try and cheat something here. Usually I'd make them the same way as the outer corners, but that may not be necessary, we can try just inverting the colors on the outer corners to make interior corners! So with the Grid still on, select each corner you have and move copies of them over (merge the new corners to their own layer):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup22.png)
Now, with the inner corners on their own layer (Layer 2), lets Magic Wand the black region and Clear it (DEL key). With that gone, deselect and then drag the selection box over the square again, containing the inner corners. Then using the Paint Bucket, fill the gray areas with black, and then fill the clear areas with gray:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup23.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup24.png)
(There might be an easier way to do that but I don't know how…)

![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/setup/setup25.png)
Anyway, save that transition template for later, it will be extremely useful when we start doing actual tiles!
:azn:

* * *

Ok this is all for now, sorry. I know it doesn't look like much yet, but setting up tools right now will make things go smoother later on.

The next phase will be: Ground Tiles. Expect that within the week. For the record, setting this up took a long time; I would say doing the documentation takes twice as long as doing the actual graphic work itself… so yeah I'm sorry if I will be going too slow for people following this!
:P
Link to comment
Share on other sites

PHASE 2: Ground tiles (wilderness/natural environment).

Ok, ground is an important step in making a tileset, obviously! It is the area that is crossable and will make up the majority of your gameworld. I'm gonna cheat and use filters for the base ground tiles, since we want a soft uniform texture; also to help this part go faster (this project will take a lot of time as it is!).

* * *

The first thing you need to do, is open up your palette image, and then make a new 32x32 image, then fill it with your base grass color:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground01.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground02.png)

Now lets start! This should go by quickly!
Go to Filter > Noise > Add Noise… and put in some noise that you think looks good. At this stage leave Monochrome unchecked, we could use some random splatterings of color!
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground03.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground04.png)
Ok you might be happy with this as it is, but let's do a little bit more to it!
Go Filter > Noise > Median… and set the radius in the Median Filter to 1 (any more and it will wash out). As an alternate to this, you can run it through a Blur filter a couple of times.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground05.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground06.png)
Now, add a light amount of noise again, preferably Monochrome, and then if you want, run it through the filters and repeat this process! Be careful not to go overboard, this method can add depth to your tile texture, but it can be easily overused as well.

When you are happy with it, save the file (I named mine grass1.psd). **Now lets do a quick test to see it's tile-ability! Zoom your grass tile to 800% zoom, and then go to Filter > Other > Offset. Set it 16 pixels both directions, and Wrap Around for the edge. This will be a useful tool later on so remember this!**
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground07.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground08.png)
It is unfortunate that my grass tile does tile well, I cannot give a good example of what you would see if your tile doesn't tile well. Basically when you offset your tile, if it has seams, they will appear in the offset graphic as a cross in the center of your tile. Clean these up manually if you have this issue (don't use blur or smudge, manually do it with a pencil).

Ok so now we have a decent grass tile, do the same process for your other ground tiles as you see fit.

Here are some ground tiles I made (zoomed to 400%):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground09.png)
Ok these are good I think. Could be better but whatever! Oh yeah, for the gravel and second sand tile, I didn't use any color with the noise. Depending on the texture you want, sometimes that can be better.

* * *

… will continue this later! ...
Link to comment
Share on other sites

PHASE 2: Ground tiles (wilderness/natural environment). CONTINUED!

Sorry for the delay, lets get back to this!
;)

* * *

Now, lets put these into good use! Remember that template we made previously? Yep that would be great right now!
:azn:

Open up your transition template and turn the Grid on if it isn't already. Let's fill up those blank spaces we left before. With the grid on, select one of the empty tile squares, then turn off the grid (so it doesn't interfere) and zoom in on the selected square.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground10.png)
Make a rough patch in the center and dither the edges:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground11.png)
Fill the outside with black:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground12.png)
Copy that square, move it over, and switch the colors around (I used a temp third color for placeholding):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground13.png)
Remember to merge that new layer down once the colors are switched. Now we should have that template filled out!

Now save your template again and make a new image of the same dimensions (160x90). Now open your single ground tile files, and paste each one in a bunch of times until it fills this new file. Combine the layers of each piece into their own (sand is in this example):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground14.png)
Have it so every type of ground is on it's own layer. This makes the next step easier, also this helps you doublecheck if you have any tiling problems with your ground. If you don't like how they look now is a time to go back and tweek them. For this set, I think I used too much noise for grass, but I'm going to go with it.

* * *

Now, make a new image, size 320 x 320\. This will be useful as a tileset file, by itself for EE 3.0, but also good to attach to others for a EE 2.7 and earlier tileset. Copy your transition template several times into this new image, like so:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground15.png)
Now, with the convenience provided by the "groundfill" image we just made, paste in the rectangles of each ground type in a similar manner:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground16.png)
Make sure the ground blocks are on their own layer, and that the transitions are on their own layer!

I'm pretty sure you all can see where we are going with this!
Now with the transition layer selected, click where the black region would be:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground17.png)
And then switch to the ground layer, and with this same region selected, clear it (DEL key):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground18.png)

Hide the transition layer, and fill the empty space of the ground layer with Black:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/ground/ground19.png)
Now we have a nice set of ground tiles to use!

Next phase will be grasses and trees, should be a lot of fun!
;)
Link to comment
Share on other sites

  • 2 weeks later...
PHASE 3: Brush tiles (long grass, trees, bushes)

Note: I'm sorry for the delay, I've been a little busy, so I don't think entries to this tutorial will be more frequent than once a week. But it will get done!

* * *

Ok now we start having some fun! :azn:

First off, open your palette image and make a new 32x32 image file.

Select the second-darkest shad for your grass, and make a rough grass tuft. It can look sloppy and exaggerated right now, don't worry about it! Then select the second to lightest shade and fill it in with some defined grass blades:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush01.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush02.png)

With the medium color extend a few extra blades of grass, and then fill in and lightly outline them with the darker color again. Once you're happy with your grass tuft, copy and paste it as a new layer, and move them around:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush03.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush04.png)

Keep doing that until you have almost the whole tile filled up, then merge all the layers down **except for the original, keep that by itself on it's own layer and hidden (replace that space with another paste if you need to).** Once they are merged, take the darkest shade of grass color you have and fill in the spaces:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush05.png)![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush06.png)

This would be a good point to save this new image. ;)

* * *

Ok, well I'm going to speed things up and stop making images every single step, I'm gonna assume you can keep up with me by now!

Now it's time to check if our long grass tile actually can tile. Go Filters>Other>Offset, 16 px both ways and wrap around. If there is no noticeable seams now that's good. Break up any globs of the same color and any seams you have, then press Ctrl-F (last Filter used) to toggle between offset positions, and keep tweeking if you need to. In my example tile I only had to fill in a blade of grass in a blob of dark green near the edges:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush07.png)

Remember, with this offset position, the edges of your tile would now be in the center generally. So this is a good easy way to check tileability (yay for making up words). You can also use the offset tile as your tile if you want to once the seams are cleaned.

Now, lets make a new image, 160 pixels by 96 pixels (the same size as template_transition) and paste your longgrass tile to fill most of it:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush08.png)

Unfortunately with this long grass we can't use the dithered transitions we used with the ground, we will have to make a new one. So with the grid, use the Selection Box tool and select the outside half of the edge tiles (using the half just to make it easy:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush09.png)

Clear it, and then with an eraser (1 px size), manually round the outside corners and add any concave details you want. Don't go too deep though, especially near the grid lines, keep the half-mark there so they line up. Also you don't need to touch the interior corners at the moment:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush10.png)

Now lets use the original tuft of long grass we drew, paste it in along the edges in a sporadic pattern to give more detail and bushiness to the edges of the grass tiles. When you are done, merge the layers of these piece together, but don't merge it down completely; first clear any of these off the center longrass tile (as these pasted pieces may break the general tiling of the main longgrass tile):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush11.png)
(In the lower corners add in a single tuft then clump a few together for extra details.)

Ok! Now we have a good set for longgrass tiles! Save this larger file as longgrass2 or longgrass_template or something! Notice that we used no filters or noise or anything, so it is easy to recolor this longrass for other shades, which we will likely do later.
;)

* * *

Ok, now we are going to start on TREES! Trees are very interesting objects, each individual one is extremely unique, but at the same time the concept of "tree" is very generic and familiar.

To make trees efficiently, in my experience it's best to make them modular. This allows them to be versatile but retains the general form, and it's easy to use! The downside is that you really have to keep track of your layers in your source material documents so you don't inadvertently combine things and cover over objects you may have future use for.

Another note, is that in general RMXP trees are 4 tiles wide, with 2 tile wide trunk base. I don't particularly like this method, so for most of my smaller trees they will be centered on a single tile.

* * *

Let's start with making a small tree document. Make a new PSD size 96 pixels wide, by 128 pixels high. Colorpick the darkest shade of your bark color, and draw a general outline for a trunk (let's just focus on the trunk at the moment). Now take the middle bark shade, and trace the bottom, bevel it out, don't just make it flat across, then with the paint bucket fill in the body of the trunk (make sure Contiguous is checked):
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush12.png)

Ok, now make a new layer, and start adding some limbs. Do it similar to the trunk outline a few limbs with the darkest, and then fill in any interior with the middle shade. Remember that lower limbs are thicker than higher limbs, and that limbs are less thick than the trunk where they meet. You also don't have to extend them too far, just enough to give a sense of the tree's structure:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush13.png)
(Make sure the dark color is outlining the middle shade.)

From here, we have to make a decision. This is the first major object that will require **shading.** This is an important decision because your shading has to be consistant for all of your graphics. For simplicity let's do the usual "upper left" general light source, as in RMXP and similar tiles. So doing this let's now shade the tree properly, with bright areas more on the left, darker areas more on the right:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush14.png)
(Notice the limbs "behind" the trunk are shaded darker in general as well?)
Ok I'll explain how to do this shading/texture at once: first take the shade darker than the middle but less than the outline, and gradually draw small lines downward for bark texture; do this quite a bit on the right side (or whatever side your shade will be on). Add a few small lines of darker shade on the left side as well, even though it's the light side, we need to account for texture. Then take a shade lighter than the middle and do the same thing on the lighted side. Do the same thing for the limbs, but have more of the shading on the underside, and have less highlights.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush15.png)
:azn:

* * *

If you are happy with the limbs and trunk, feel free to combine the layers for convenience if you haven't already. Now let's make a new layer, call it "leaf1" or something, because this is where we are going to start filling out our bare naked tree!
;)

Similiar to the long grass, select the second darkest shade for your leaves, and lets draw a clump of generally teardrop shaped leaves. Fill in the centers of each leaf with the middle shade, and if you want add a little bit of highlight with a slightly lighter shade, but don't add too much!
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush16.png)

Now like the longgrass, lets copy and paste this clump of leaves around to fill in the tree! But you don't need to fill it all the way, leave plenty of large gaps this time. When you are happy with their placement, merge all these copied clumps into their own layer, call this layer "mid-leaf" or something like that. We are going to use several layers of foliage together to fill out our tree.
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush17.png)

(A tip for this, is when you start pasting the leaf clumps down, after a little bit **set all other layers as invisible**, then merge all the leaf clumps together at once.)

Make a new layer, leaf2 or something, and lets make another clump of leaves. Make it very similar but smaller, and use darker shades. Mainly have the outline shade for your leaf colors, and then fill the insides with the middle color – and add no highlights to this clump!
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush18.png)

Now let's copy and paste this new clump, make sure it pastes **below** "mid-leaf" layer, and use this to fill in some more. Combine these together into a layer – don't let it merge into the trunk or other leaf layer -- and then, lets move this layer **under** the Trunk layer:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush19.png)
This will help add depth to the tree foliage.

If you feel the need, copy a few more of the leaf1 clumps and add them to the "mid-leaf" layer to fill out some more.

It's time for a highlight clump of leaves. Do the same process, but this time for the main leaf coloring, fill it in with the shade slightly lighter than the normal leaf, and outline these leaves with the second-to-darkest shade. Copy and paste them in areas where you need highlights, depending on the shape of the tree and where your light source comes from:
![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/brush/brush20.png)
(Most common place for these would be near the upper left, in the lush part of the tree that is facing the light the most.)

It's a simple process, start small and build up the tree from there. If you want you could add more layers of leaves too. I think 3 is useful enough though. Remember to start out sparse and then as you fill in start clumping leaves more densely, and it's a very intuitive method that I'm sure you can add your own insight to!

* * *

Alright, we got ourselves a nice looking tree! Repeat the same process for an alternate tree or two if you want now.
:azn:

* * *

I'm taking a break from this now, will come back to finish up brush at a later time.

Next up: Brush (continued) – large trees, pine trees, bushes, flowers, weeds.
Link to comment
Share on other sites

  • 4 weeks later...
Sorry, I'm putting this on hold for a little bit. I need to get back to work on STO, and me and Gwen have a super secret classified project that requires my attention.
:icon_meditation:

I will continue to work on this, but not enough to make regular updates. I will post the whole thing (and make an HTML version) when it's completed. Sorry for any inconvenience, and thanks to everyone who's shown interest.
:icon_alabanza:
Link to comment
Share on other sites

  • 1 year later...
Ok big bump; I'm going to be adding to this tutorial again.

Please don't post and reply to this yet, as when I started it I was a moderator and I kept it locked but I could still work on it; this is to keep each post entry in a clean order.

Looking back on my list, I'm going to skip a few things:
**Bushes** - consider these small trees, focus more on the foliage layers
**Flowers, Weeds, Grasses** - these can be made a variety of ways; similar to the long grass

I'll start with rocks, and then take on cliffs (probably one of the hardest parts in my opinion).
Link to comment
Share on other sites

@NGHS:

> HOLY DUCK.
>
> A++ for Anna
> Nice work.

Um, thanks, but I asked people not to post here. :huh: :P

Ok anyway, I'm going to do things a bit differently, and not have screenshots for every step. That was extremely time consuming.

Lets start with small 1 tile rocks. Make sure you have your 5 shades for a stone color.

Begin with a new 32x64, or a 64x64 file (basically we want to do atleast 2 1-tile rocks, possibly 4). I'm going with a 32x64, 2 single rocks, in a column. Draw general shapes with your rock outline color, to be your stones. Rocks are like trees, each one is unique but at the same time they all look generic like rocks. **Clean up the outline, and redraw over the lower third or half of the outline with a slightly lighter color of stone – dark outlines in the air, less dark on the ground (more blend).** Also add some very basic shading with that color, and the middle stone shade as well. _(first column in the following image)_

![](http://img.photobucket.com/albums/v400/annacomnena/projects/tileset/rocks01.png)

Once you have a general shape in place, paint the remaining empty space in the rock with the second-to-lightest stone shade. Then select your lightest stone shade, and start dithering in highlights. How and where you place these highlights can greatly alter the rock's shape and form, so make sure to keep in mind where your lighting is coming from (make sure lighting is always consistant!). _In this example I'm continuing to use the general "up and left" light source._

The second and third columns show two types of fill/highlights I've done. The third one is more of a solid color field, which can work, it all depends on how "dirty" you want everything to look. But even noticed on the large fields of color, the transititions had a little bit of dithering to them.

That's all for now.
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...