Tile Making with Photoshop 5

OK, let’s get something straight from this point. I’m writing this tutorial based on my own experience, so, if you have achieved acceptable results by any other means, feel free to bash me, flame me at the boards, or even share your own knowledge with all the rest of us! Something else; I don’t intend to extend this into an entire series of tutorials, but then again, who knows? Time will tell…(hint, hint ;)

So, let’s get to the point. You can always create your own tiles with the MapEd built-in editor, but it’s not what’s best for them. Wouldn’t it be nice if you could use all your favorite programs to make your tiles, then import them to MapEd? Well, you can, but you must take some actions first, just to ensure that your tiles will appear in-game as they appear in-Graphics program. Fine, let’s rumble now! (I assume that you have some basic understanding of Photoshop 5.0, like selecting tools, colors, and the like.)

Part 1: Preparing the palette

Verge uses palettes for its graphics (some exceptions apply to the high color versions), meaning that every graphic file uses a defined set of colors to describe its own color information (for more info on palettes, check the other palettes tutorials on the Verge Source, notably aen’s one, since it was the first one published). In order to use your own tile graphics inside MapEd, without scrambling the colors, you must first modify them so that they use the standard Verge palette. Therefore, the first step is to acquire this palette from somewhere, in order to use it later on. This is usually easy. Use Photoshop to load a PCX file already using the Verge standard palette. You can find such files packed with Verge game demos (check the files section). Once it’s open, select Image > Mode > Color Table. What you will see is a table of colors. THIS is the Verge palette. Now, to use it in our files, we must save it. So pick “Save…”, and save it somewhere. You can choose between the Microsoft PAL format and the Adobe ACT format – I personally prefer the second one, but you can pick the Microsoft’s standard, especially if you plan to use Jasc Software’s Paint Shop Pro. WHAM! You just got yourself a copy of the Verge Palette! Let’s proceed…

Part 2: Preparing the grid

Fine, so you have the palette saved on your HDD, and you think “Great! I can start making awesome tiles for my game right away!”. Of course, you can, but it’s better if you make some more preparations before you start. As most of you already might know, MapEd defines its tiles as square 16x16 images. When you try to import a PCX file as a tileset (image import is not recommended when importing from graphics programs your own custom tiles), MapEd expects the file to be organized as follows:

The file must have a one pixel wide border around the entire picture.

Between the 16x16 tiles, there must be a single pixel wide padding.

ALL OF THE TILES MUST BE 16x16 IN ORDER TO BE PROPERLY IMPORTED!

To get a better visual image of what we are talking about, enter MapEd, press Ctrl to enter the Tile Editor, and click the H button on the tool pad at the bottom. See now the “grid” we were talking about? THAT you must reproduce using Photoshop (Yoda speaking;). There is a multitude of ways you can do this. I will upload ASAP a prepared grid to the files section, so that you won’t have to get into the mess of dabbling with the Photoshop built-in grid (hopefully soon enough, so I won’t cover this in here). Once you have the grid ready, you can place it either on the background layer, or on a separate layer, and clear all the unnecessary blanks (the latter is recommended, as you can turn it off as you please). Remember, for your own ease, fill the background with black color. Once this is prepared as well, we can go on to…

Part 3: Making our tiles

You got it there, Joneses; we will start making tiles right away…or maybe not!

The first thing to do is to create a backup of your file and update whenever you can, for if you screw it up with the palettes…I fear for your sanity :PP. Next advice: Use layers and transparency for you tiles…it’s worth it.

One more thing: It is wise to open the Swatches tab, click the small triangle there, and select “Replace Colors…” then browse for your Verge palette file (one more reason to save your file in ACT format…;)). This way, you have made yourself a set of the colors that are included in the palette, and that are completely legitimate for use.

Let’s begin: create a new layer on top of all. We will make a tile of a wooden surface, just for the sake of this tutorial. Pick the Marquee tool, and, having the grid visible, select a region of 2x2 tiles, minus the grid border pixels (not the padding pixels between the 16x16 grid spaces), non-antialiased, no feathering (all of the above are in the Options tab). That is…uhhhh… 33x33 pixels to be precise. Now, select a brown color from your Swatches, not too light, just a little bit darker from the average brown, and make sure it is not the reddish type, or your wood will be too orange in the final version. Now use the Fill tool, without anti-aliasing, on your selection. The result will be a 33x33 brown region. Deselect (remember, if you do something wrong, you can always use the History tab to go back and fix it), and click Preserve Transparency for your layer on the Layers tab. This allows you to edit only the non-transparent regions of this layer. Now, we must define a brush for your wood grain. So, make a new file, small sized, about 32x32 or 16x16, grayscale mode and fill it with white. Work with the background layer. Select the Airbrush tool, Dissolve mode, opacity 100%, black color, and, adjusting the Pressure percentage (once again, Options tab), SINGLE CLICK on the document (you might want to zoom to 400% or so). You must be looking at a splatter of black pixels on white color. If it is too dense or too thin, undo, adjust the pressure and try again, until you get a nice, even distribution of black color. Don’t make it neither too thick nor too light and thin. Now, choose “Select > Select All”, switch to the Brushes tab. Click on the small triangle, pick “Define brush”, and close the small document. You might want to save your new brush set (use the small triangle menu on the same tab). OK, now for the nice part: TEXTURING!!! Return to your old tileset document, and, having the same layer selected, pick the Burn tool. This remarkable tool “darkens” the regions you pass it above. Its little brother (on the same button, keep pressed), Dodge, does the opposite. Each one of these two tools can operate on highlights, midtones, and shadows. Highlights are the light areas of the material (like glossy, shining surfaces). Shadows are the darker and more color-saturated areas of a material (e.g. the scratches on a surface, who are deeper from the rest, thus not getting so much light). Finally, midtones are all the rest, the main body of a material, the most part of a surface, and usually the part of it that accurately defines the entire surface’s color. We want to make a wooden surface, so we need first and fore most wood grain. Pick the Burn tool, set it to midtones, pick your custom-made brush, and go over the brown region, using variable exposures and undoing until you end up with a satisfying result. Don’t make it too dark. Most of the times, you will have to use the tool multiple times, with different settings. Don’t expect it to come out as you like it in one single mouse stroke (not that it isn’t possible, but…aw, well, you know ^_^). Now you have to add the saturated, more reddish grain of the wood. So, switch to shadows burning, and repeat the procedure, this time with more prudence, as you already have a dark wood, don’t overdo it! Don’t forget, undo and History are your friends! OK, now you must pick up the Dodge tool and use it on highlight mode on multiple exposures to make the specular highlights of the wood (remember the brush!). Once again (here I go repetitive…*sigh*) don’t use the tool too much, or it will look extra lighted and somewhat funky. By now, you should be all right. One piece of advice: try to move your mouse in circles or in totally random directions when burning and dodging, or you will end up with a heavily patterned material. If the hue or the lightness of the wood doesn’t satisfy you, select “Image > Adjust > Brightness/Contrast” or “Image > Adjust > Hue/Saturation” and adjust it (the first one is more easy, the latter more powerful – remember that you might need to turn on the colorize option if you go for the second case). You might also want to work the final result out a little bit with the blur and sharpen filters (filter menu – be stingy with these, as they alter the colors too much, and you might get weird results later on, when applying the Verge palette). TIP: If you want to achieve better control over the final result, you can define more custom brushes as described above, and use them. Don’t limit yourself to only the splattered pixel pattern! Be creative, use strokes, lines, circles, whatever. If it produces nice results, it’s acceptable (strokes in combination with splattered pixels are great for grass patterns). In addition, if you want to be able to modify you tiles pixel by pixel, pick an intermediate color from the Swatches tab, and use any tool with the Multiply or the Screen modes, usually under 50% pressure. This will “burn” or “dodge” accordingly the image (pencil suggested for pixel editing). Oh, yes. ZOOM IN! 1200% is acceptable when tile editing.

Part 4: Fitting to the grid

You have a tile ready, it looks great. Well done. Let’s fit it to the grid so that you can export it. Continuing from the example above, you have a 32x32 wood mega-tile. But the Verge standard tile size is 16x16! What do we do now? Think… 16x2=32, right? So, all we have to do is divide our 32x32 tile in four smaller ones, sized 16x16. Well, this is simple. Just pick the Move tool (you can use the Ctrl button instead) and drag your tile so that its top left pixel coincides with the beginning of a tile placeholder in the grid (if you didn’t move the layer around in the previous section, it should already be in place). Move the layer with the tile under the grid. Now choose the Single Row Marquee tool (it’s in the same button as the Rectangular Marquee tool) and select the grid row that is covering the tile. Do the same with the Single Column Marquee tool, but hold down shift this time while clicking (it ill add your selection to the already existing one). You should have a single pixel width cross selection now. Make sure you have chosen the layer with the tile on it, and pick “Edit > Clear”. Now, make the grid invisible. See? It’s done! Now you have four wooden tiles, and you can use them as you please (in conjunction, alone, in different combinations, and the like). Save your file and back it up, the next step is risky.

Part 5: Converting to Verge Palette

Now is the time to use the palette we saved before. I repeat, save, and back up; if you screw it up here, your work is toast; you’ll have to do it again (and I mean it). Pick “Image > Mode > Indexed Color”. A dialog will pop up, asking for a palette. Choose custom, and load the Verge palette you saved before. Make sure that Preview is checked. You will your image in the background. If you messed around a lot with the colors, it is very likely that the tiles are as color-screwed as hell… The dithering options may help a little bit. Choose diffusion dither and best color matching. If the image looks better now, accept the settings (you may want to play around with the “Preserve exact colors” checkbox); otherwise press cancel, and use “Image > Adjust > Brightness/Contrast” or “Image > Adjust > Hue/Saturation”, to alter slightly the colors towards a lighter/darker, or more/less saturated look. Experiment with the options, undo, retry, undo, use the Indexed Color command, see the results, if they are still messed up, cancel, retry, etc. You must do this until you get the best results. (HINT: The Verge palette has many grays, so you might want to “Image > Adjust > Desaturate” your tiles and then “Image > Adjust > Hue/Saturation (Colorize)” or “Image > Adjust > Variations” them (do this only if your tiles are of one color only, other wise you might end up with a brown door knob O_o). Once you are over, save your file and back up, then convert to Indexed Color Mode. Photoshop asks you whether you want to flatten your layers. Answer yes. Now, select “File > Save a copy…” (NOT “Save”!). Browse for the MapEd directory, and save under the PCX format. Now select “File > Revert” and answer yes. Close the program (or minimize it, whatever :))), and open up MapEd. Press Ctrl, Import PCX, choose your PCX file, As Tileset, and click on each one of the tiles once (if you do so more than once, you will get multiple copies). Press Esc, and there! You have your tiles imported! They should look fine. If they don’t repeat the process of altering the colors before converting, until you make sure that they look OK under MapEd (MapEd is WYSIWYG, Photoshop is not! Yea! We beat Adobe! :PPP). You’re done.