Designing Custom Road Sign Icons Using Photoshop

Final Image

Road signs today are more than just for the road. Look at all the different digital and printed designs out there and you will see a lot of them guiding people as they look through web pages, software interfaces and even for catalog printing, flyer printing and posters. Now, you can easily download a lot of these road sign icons online, BUT I know that for many designers, it is always a better option to get one’s own design. This helps make your layout look a lot fresher and of course it is more original. Luckily for you, it is not actually that hard to create custom road sign icons in Photoshop. There are a lot of built in shapes that you can exploit to easily setup the basic look. You can then just customize it with your own particular flourishes. In this guide, we will show you how you can do this yourself. Just follow through the steps and see. 1. Open your Adobe Photoshop and create a new document for your road sign. The overall size depends on your use, but make sure you use higher resolution values if you are printing these signs (300ppi) while lower resolutions are best for web digital graphics (72ppi).

2. Once done, click on OK. Now, let us add a background colour. Since these days, it is better to use a gradient than a pure colour, we will add a gradient to our background. First, choose you

3. In our example we are doing to use the hex grey color #a1a1a1 for the foreground colours and e6e6e6 for the background colour. Once done, select the gradient tool in the tool window.

4. Then, just drag the tool top to bottom to apply the gradient.

5. Now you should see the gradient appear.

6. Great, now let us first create the base of our sign. Click first on the Rounded Rectangle Tool in your tools window.

7. Now, look on top in your options bar, and select a radius of 30pixels for the rounded rectangle tool. Draw a perfectly symmetrical rounded rectangle by just dragging the tool outwards.

8. Then press CTRL+T and then rotate your rounded rectangle tool to get a good diamond shape. NOTE: depending on your simulation, you can also try the diamond custom shape tool. If you do not have that though, then use this method manual rotation method using the transform tool. Do not be afraid it should be ok.

9. Afterwards, select the layer and click on “Blending Options”.

10. Once the layer options are open, first click the drop shadow option. Leave the rest of the controls on default.

11. Next, tick the gradient overlay options, and use a 3 style gradient with dark edges and a white center like so. Once you are done, press OK.

12. Now we have a metallic type base for our sign.

13. Next, duplicate this layer by right clicking on it and selecting duplicate layer...

14. Afterwards, clear the layer’s style by right clicking on that new layer. This will let us customize this shape better.

15. Then, resize this new layer so that it looks a bit like this:

16. Once resized, click on the blending options once again of your sign. Tick of the gradient colour first, and decide on the proper design color combination that you want for your road sign. It is better to use bright hot colours such as Yellow, Orange and Red so that these sign icons look more visible.

17. Now, Click on stroke and set a 1pixel black colour stroke.

18. Once done, press OK.

19. Now all you have to do is to add your road symbols. For this tutorial, we are just going to great a Dead end road signal. So just type in DEAD END, in your road sign.

20. Just change up the text symbols you are using for different kinds of effects.

Here are just a few more examples:

Great! Now just customize your signs for your purpose. Good Luck!