Basic info: You can use any “paint” type application to do this, however general consensus will deem Photoshop to be the best of the bunch. When I reference Photoshop, it could apply to whatever paint app you are using, however certain aspects may not be available. This tutorial is based on the assumption you are using Photoshop, however you can still get the basic ideas even if you using another program.

• Getting ready
• What should I create?
• Photoshop basics
• Viewing your new texture
• Time-saver tricks

First off, you will need to download the painter kit and templates from the developer page. Do this by clicking to THERE CENTRAL, and then the link to the dev signup page. Click the download tools button, and save the files you want (you will need the Previewer and docs, and whichever painting kits you wish to work with) Once you have downloaded the kits, unzip the painter file(s) into a directory of your choice. I put mine in the THERE installed dir (above ThereClient) to make it easier.

Getting Ready

1. Find which file you want to edit. Look at the HTML documentation that came with the painter kit, and see which filename matches the shirt/pants/buggy you wish to change
2. load up your painter application, henceforth referred to as Photoshop.
3. open the file you wish to change.

What should I Create?

If you don’t already have an idea for what to make, staring at a blank template can be frustrating. Try starting with a favorite image, and then tweak it around a bit. Or throw some color down until an idea forms.

Working in Photoshop

History

There are basic principles you should keep in mind when working with Photoshop. One is History. This is sort of a visual history of your work, which allows you to UNDO back to any given point. Choose Window->History to open this box, if it is not already open. The default history level is about 20; personally I like to change mine to 200 or so to make sure I can always go back. Using a tool repeatedly can often fill up the history box quickly. To change the amount of history undo levels, click Edit-> Preferences -> General. Change the history states to 200, or whatever number you feel comfortable with. Now, if you do a bunch of drawing or smudging that you decide doesn’t look good, you can just click the last “good” state in history and it will revert the image back to that. Hitting Ctrl+Z will just undo the last event. History allows you to screw around w/out losing your original setup. Of course, its always wise to save your file before you start doing wacky things.

Zooming

Hit Z for the zoom tool, or choose the magnifying glass from the toolset. This extremely useful tool lets you zoom the picture in by clicking the left mouse button, without actually changing the size of the texture. Holding Alt will let you zoom back out. I find working with a zoomed in texture easier than making it larger and then resizing it later… because you can always tell how the image will turn out. Shrinking down later can distort the image or text, but working with a zoomed in image will never alter the final product.

Layers

One of your best friends is Layers. These allow you to paint on different levels, without destroying the underlying picture. It makes it very easy to move and slightly adjust specific details without moving the entire template around, and also lets you “aim” your new template over the original one. This can be helpful when trying to figure out where to place an image or text over the original template.

1. create a new layer – Ctrl+Shift+N, or choose Layers->new->new layer from the menu
2. You can now start drawing, or paste in an image you wish to work with. When pasting, Photoshop will automatically create a new layer for you. Keep this in mind if you are trying to draw on a layer and paste as well.
3. You can link and merge layers by clicking the little box next to the eye in the layers window, and then hitting Ctrl+E. This will combine the linked layers into one.
4. Moving selections. Hold Ctrl and move the mouse. This will drag just the current layer around, leaving all others in place. This is very useful for moving just a piece of the texture w/out changing the whole thing.
5. The little eye symbol on each layer lets you show or hide the layer, w/out deleting it. This is extremely useful if you are trying to place your new drawings over the old template. If you want your background to be black, you can create a new layer above the background, and use the paintbucket tool to dump a solid black paintjob on it. Then you can hide the layer, and still use the wireframe template to help you place your design. When its time to save, just unhide the black layer again and you are set!
6. Name your layers. When you have just a few layers, this isn’t as big a deal. But when u have a ton of them, you can easily lose track of whats what. Its best to name the layer to something you will instantly recognize. You can always rename the layer later by right clicking it in the Layers box and choosing properties.

Selection

Another good friend is the marquee tool for Selections. With this tool, you can manipulate just a small part of an overall image or drawing, or even save a selected area to easily recolor or adjust it in the future. Pressing M (or L for the lasso) on the keyboard will switch to this tool. For painting buggies, this tool is invaluable. You can highlight various areas of the buggy frame, and save those selections. Then, when working on a new layer, you can reload those selections into the current layer, and color/adjust/etc the exact areas you wish to change.

1. using the square marquee tool, or the lasso tool right below it, highlight an area you wish to change. We will assume you want to re-edit this area later
2. Now right click, and choose Save Selection. Name it appropriately.
3. You can adjust the color, dump a paintjob, or do almost anything you can image to this selection area, w/out touching the surrounding texture. If you decide later you want to adjust the color just a little bit, you can Load Selection. This helps immensely if you have a hard time selecting the exact area again.
4. Moving selections. You can actually drag around a selected area, much like you drag around a layer. However, once this is dragged and set, it will be fused back onto the current layer you are working with. Keep this in mind when moving or adjusting selection areas.

Free Transform

When working with images, one of the best tools is Free Transform. This allows you to rotate, flip, scale, skew and distort an image or selection in almost any way imaginable.

1. Using a selection tool, select an area, or an entire layer you wish to change
2. Right click anywhere in the selection, and choose Free Transform. You will notice the boundary box changed a bit
3. Now you can either manually drag the corners around, move the entire selection, etc… or you can pick from the preset tools. Right click again to choose some presets, such as flipping horizontally or vertically, rotating, skew, etc.
4. Just play around with the image till it fits your needs. Free Transform can open new ideas if you tool around with it enough.

Using “Actions” to save time

One of the nicest things about Photoshop is the ability to save actions (like a macro) to do certain tasks. Pretty much any image manipulation can be saved as an action, but for our case we only want to worry about saving. From the top bar, pick Window->Actions. You will notice it is in the same box as History, so alternatively you can just click the tab in that box. Anyway, lets create an action to save your file as a JPG.

1. click the button on the bottom bar that looks like a folder. This will create a new set. Name it THERE.
2. Click the button next to the folder, it looks like a paper with the edge folding up. This will start creating the new action. Name it something like “shirt save” or “buggy save”, depending what you are working on. Pull down a function key, F9 for example. This will make it so you can just hit F9 on the keyboard to perform this action later.
3. Click the Record button at the top right of this dialog box.
4. Select your texture template, and choose Save As, pick JPG, and overwrite the JPG file you saved before. Choose the quality, and that should complete what you need to do. Now hit the Square [] button on the bottom bar, this will stop recording the action.
5. Now, any time you wish to save your PSD as a JPG to test it in the previewer, you can simply hit F9 and that’s it! Easy, and quick, especially if you are just moving a layer a few pixels to test. Hitting Cntr+S will still save your PSD file normally, so you now have the ability to dual save effortlessly.
6. Hit reload in the previewer, and it will reload your image to the new one you just saved.
   

This concludes the tutorial for basics, look for more detail in the future.

by Randra_Loqqet