Create a new document. My states are 500x500px @ 72 dpi (although dpi isn’t important unless you’re printing). Choose RGB colour and a transparent background. Under edit/preferences choose under ‘Guides, Grid, Slices & Count’ a grid size of 50px with 2 subdivisions. Under the view menu choose ‘show grid’, ensure you have ‘snap to/grid’ on and turn on ‘snap’.
You should now have a blank document with a grid displayed. Press ‘d’ to reset the colours palette to the default black foreground and white background colours. Next from the tools palette choose the ‘rounded rectangle’ tool (grouped with other shape tools). In the options toolbar ensure that the following are selected:
This will create a shape layer rectangle with 50px radius filleted corners with no style and a black fill colour.
Draw a square (snap should be on) that is 400x400px centred in the window:
Now to give it it’s look with the use of layer styles:
Double-click in the layer palette in ‘Shape 1’ (the rounded rectangle layer). Don’t double-click on the name or the layer thumbnail or vector mask thumbnail, just in ‘whitespace’ to open the Layer Style dialog box. Alternatively choose the Layer/Layer style menus. Here’s where you give your token its overall shininess, colour, bevel, etc. Here’s each of the dialog windows with it’s settings to create my blank token. You can choose your own colours or alternatively ‘sample’ them from the following images:
Next you need to make a white ‘background’ to show white through the state ‘image’ once we’ve created it. Create a new layer and reposition it that it is under the shape layer ‘Shape 1’. Now make a selection of the state by ctrl-clicking in the shape layer thumbnail. This creates a marching ants selection in the shape of the rounded rectangle. Ensure you have the new raster layer selected (Layer 1), the background colour is white (press ‘d’), then press ctrl-backspace to fill the new layer with white in the shape of the state. Press ctrl-d to deselect to remove the selection marching ants.
You should now have a blank token state ready to save. Keep this file as a blank for a base to create new states. Now let’s create a state. I’m going to use a custom shape that ships with Photoshop to show how to do it. Creating your own custom shapes with the pen tool and the other shape tools or by creating a path from a selection from a cleaned up raster image is beyond the scope of the simple tutorial. I suggest you Google various the vector tutorials out there. OK here goes.
Choose the Custom Shape tool from the tools palette. In the tools option bar click the down arrow to select a custom shape (I’ll use a default one, if you can download or create your own, even better).
Then ensure you have the Shape layer selected and that you’re working ‘in’ the shape itself by clicking the vector mask thumbnail. It has a white border when selected. Then choose the subtract option from the options toolbar.
Now drag over the image to create your token. Use the snap feature if preferred or turn it off if the custom shape is irregular.
If you know about the Direct and Path Selection tools you can modify or transform the state now.
Lastly modify the layer styles to change the colours, the satin effect and colours to your hearts content. I would recommend leaving the outer glow and bevel/emboss unmodified to ensure all the states retain the same feel.
Save it. Now to alter the image size to something more friendly for maptool. Choose menu Image/Image size to make this adjustment. I resize my states to 100x100px. Make sure you choose to Scale Styles.
Save As a .png and you’re done!
Here's a link to a .psd of one of my states: http://gallery.rptools.net/d/31818-1/Dy ... a0284df8f7
Hope this is of some use. Good luck.
-- AidyBaby --
EDIT: added a zip with all states:
