At the start of the month I released the Iconic Island – a map pack with an island map and a load of individual map icons indicating things like castles, cities and ruins. Today I’m covering how to create your own icons. This is a slightly longer tutorial than normal and will cover some new Photoshop techniques, specifically using the pen tool, and more on layer blend modes. There’s also a video at the end of the tutorial to help illustrate the steps in more detail.
1. Create a Rough Sketch
To start with, we need a rough sketch of the icon. Here I’ve used a nice big brush and not worried too much about getting everything precisely right. The key here is to create a shape that still reads well at a small scale, so try to avoid introducing any fine detail – this is the reason for using a large brush at this stage.
2. Using the Pen Tool
Icons are meant to be viewed at small scales. For this to work you want very clean edges on the outline. This is where the pen tool comes in. The pen tool allows you to create a vector outline in Photoshop which is incredibly handy. At this stage I drop the opacity of the sketch down to 10-20% and switch to the pen tool (P). To start, click on a corner – you’ll see a single anchor point appear. To add a straight line segment to the path click the next corner – you’ll see a straight line appear between the two points. The real power comes in the curves though. To add a curved segment, you want to add an anchor point to the center of the curve. Spot where you think that is, then click and drag at that point. Dragging puls out two handles on the anchor point and controls the curvature of the line. If there’s a corner coming up next in your shape, just click and you’ll see the curve complete. If there’s another section of curve (like the multiple curves on the flags), click and drag on the middle of the next curve.
In the image above, you can see that I added a curved path to the hull by finding the middle of the curve, and clicking and dragging so that the handles form a tangent to the curve.
3. Finish Outlining the Shape
It’ll take a little time – especially with a complex shape like this one – but take a little time carefully using the pen tool to outline your shape. Here I’ve created a number of paths – one for the outside (when you come all the way round, just click the very first anchor point to have the path join up) – and a number of paths inside. This is all done on the same paths layer.
You can see that I’ve made some changes to the sketch layer as I’ve gone along, and I’m not outlining the ripples.
4. Change the Path to a Selection
The next step is to change the path to a selection. To do this, open up the Paths Dialog (under Window->Paths if it’s not already open). Find the path (it should just be called Work Path). Then look at the buttons at the bottom of the dialog and find the Load Path as Selection button. Click that and you’ll see the path turn into a selection. Notice above that the internal paths cut out of the selection automatically.
5. Fill the Selection
Okay, that’s the hard part done. Now we can go back to the layers dialog, add a new layer, and fill the layer with black (option + delete, or Edit->Fill…). Notice that the shape is very crisp – that’s the result of using the path tool. I’ve hand drawn the ripples in at this stage.
6. Add Some Colour
A black image is fine, but we want slightly more interesting icons than that, so we’ll use some layer effects to add visual interest. First off, a texture. Here I add a new layer above the black shape, and right click the layer and select Create Clipping Mask. This means that whatever I do on this layer will only show up where they layer below is opaque. In this case I’ve filled the layer with a basic parchment texture. The clipping mask relationship shows up as a little arrow beside the layer. You can stack multiple layers like this.
7. Adding Some More Effects
Next I create a new layer. This layer I set to colour burn and use a grey-ish red. This adds an almost dried bloodstain feel to the icon. I add a layer effect to this layer of inner shadow – with distance set to zero and a large spread. Initially you won’t see anything, but then you have to make sure to mask the layer to the shape of the icon. To do this, select the base icon layer, right click -> Select Pixels. Then select the colour burn layer, and click the layer mask icon (rectangle with a white circle in it). The mask will be the selection, and suddenly your inner shadow will work!
Don’t worry if that sounds really mysterious – you can see the process in the video. It’s not as complicated as it sounds. I’ve also duplicated my base icon layer and set the blend mode to colour at low opacity, to grey out the layer a little. You could just as easily use a hue/saturation layer for that.
Finishing Up
The icon’s now done. To finish up, turn off all the background layers, so that your icon’s on a transparent background. Then grab a selection that includes all of the icon and copy-merged (command + shift + c). Open a new document – it’ll default to the right size – and paste in the icon. Voila! Save it as a .png and you have a lovely icon.
The joy of the layer styles is that you can add new icons easily, and they’ll have exactly the same style. This helps to keep a consistent look and feel to your icon sets.
If you enjoyed this, then make sure you check out the Iconic Island for more icons. Here’s the set of icons that were produced for that pack:
Finally, here’s a video that takes a simpler icon – a tower – from start to finish. There’s a few extra tips slipped in there that might be handy. Enjoy!
