Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Yellow Road Sign Icons

Here we’re going to create the download icon from the yellow road sign series of icons on IconsETC.

yellow-roadsign-download-icon

STEP #1

Create a new document 512px * 512px with 72dpi and a white background as seen below.

new512

STEP #2

To create the base of the icon first activate the shape tool by typeing U. Make sure the rounded rectangle shape tool is selected and the radius set to 10px then draw out a square similar to the one shown below.

TIP “Hold the shift key down while dragging to maintain the correct proportions and hold down spacebar to reposition”

Step2

Step #3

Rotate the square you just created by 45% by going to EDIT >> TRANSFORM >> ROTATE and enter the settings you see below. Click Enter to commit the changes.

Step3

Step #4

Activate the by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below.

sign-layer-style-1 sign-layer-style-2 sign-layer-style-3 sign-layer-style-4 sign-layer-style-5 sign-layer-style-6 sign-layer-style-7 sign-layer-style-9

Step #5

Now above the square layer create a new by going to LAYER >> NEW >> LAYER in the menu. Activate the by typeing U. Make sure the custom shape tool is selected then choose the built in arrow shape and drag out a shape similar to the one below.

TIP “Hold the shift key down while dragging to maintain the correct proportions and hold down spacebar to reposition”

shape1

Step #6

Activate the by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu on the arrow layer. Then enter the settings below.

shape-layer-style1 shape-layer-style2 shape-layer-style3

Step #7

Rotate the arrow you just created by 90% by going to EDIT >> TRANSFORM >> ROTATE >> ROTATE 90 CW. Then select the move tool and center the arrow.

shape2

Step #8

To create the highlight create a new layer on top of the arrow layer. Activate the shape tool by typeing U and make sure the oval shape is selected then draw out an oval shape similar to the one below.

TIP “Hold the shift key down while dragging to maintain the correct proportions and hold down spacebar to reposition”

overlay1

Step #9

While keeping your oval layer selected hold down CTRL (or Command) and click on the thumbnail of the diamond layer. This should select the contents of that layer.

overlay2

Step #10

While the selection is active click on the new mask layer button as shown below.

overlay3

Step #11

Activate the by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu on the masked oval layer. Then enter the settings below.

overlay-layerstyle-1 overlay-layerstyle-2

That’s it!

You should now have something like what you see below.

yellow-roadsign-download-icon

What’s Included in the Download

  • Fully layered source PSD
  • .ASL file with layer style needed to create the icons – ready to install!
  • BONUS: 36 fully layered popular icons in this style.
Download
You might also like
Image Masking and Sliding Transition Effect Adding Versatile Button Shortcodes to your WordPress Theme Modular Wordpress Theme Starfield Tileable Twitter Background Tutorial Coffee Stain Social Networking Icons Tutorial Adding Column Layout Shortcodes to Your WordPress Theme Elegance Wordpress Theme Fusion Wordpress Theme How to use Google Analytics Content Experiments Data URI Tileable Transparent Patterns Echelon Wordpress Theme Construct Wordpress Theme Crystal Clear Bubble Icons Myriad Wordpress Theme Persuasion Wordpress Theme Brushed Silver Reflective Text Effect Glossy Silver Web 2.0 Icon Tutorial Dejavu Wordpress Theme Blue Retro Grunge Text Effect and Icons Method Wordpress Theme 3D Transparent Glass Text Effect Glossy Black Button Icons Matte White Square Check Mark Icon Red and White Pearl Download Icon

27 comments on “Yellow Road Sign Icons

    1. Lita says:

      Can you be more specific about the distance icon that you are looking for? We have over 2000 icons in Yellow Road Sign design at our sister site, icons.mysitemyway.com. When looking for a specific icon it would be best to use the “Browse All Tags” tab of the menu to browse all of our tags in alphabetical order. Here’s a link to our collection of the yellow road sign icons: http://icons.mysitemyway.com/category/yellow-road-sign-icons/

      July 14, 2010 8:34 pm
  1. Amit Patekar says:

    Excellent tutorial thank you. I have used the stroke to give the black border, when i followed all the steps the outer black border was missing in my image.

    Is it because that i have not used the bewel properly or you missed the stroke step :)

    Any ways thanks all the tutorials are awesome.
    Regards
    Amit Patekar

    January 26, 2011 11:33 am
  2. Bronwyn says:

    I agree — this tutorial is really well written. Usually I go to YouTube to see a tutorial in action, but you did a great job with just text and images.

    April 29, 2011 7:08 am
  3. Marion says:

    The highlight (starting at step 8) is a great trick. I think it will come in handy with other art projects.

    April 29, 2011 11:10 am
  4. Scott says:

    My brother works in construction, and his birthday is later this month. I’m going to try to make a couple signs with the yellow background and print them out. It’ll be a challenge for me, but he’ll really appreciate it.

    May 6, 2011 12:08 pm
  5. Morris B. says:

    I’m going to send this post to my son. He has been really into creating icons and web designing in general, so I think he’d enjoy going through this tutorial.

    May 11, 2011 8:07 pm
  6. Jamie Roux says:

    Excellent tutorial. I downloaded the whole set and can’t wait to start using them. What I like about them is the fact that they really stand out. This is important, since I’ll only be using them where I really want to draw attention to something.

    May 12, 2011 8:12 am

    Create Yellow Road Sign Icons | Downrex

    60+ Photoshop Tutorials For Icon Design

    Make Road Sign Icon in Photoshop Urdu Tutorial | My Free Tutorials

    Make Road Sign Icon in Photoshop Video Tutorial | My Free Tutorials

    60 adet photoshop ikon yapımı alıştırması | FaydalıWeb | Internetin Faydalı Yüzü

    60+ Photoshop Tutorials For Icon Design | Web Developer

    60多个图标设计的Photoshop教程 | Focusec

    60+ Photoshop Tutorials For Icon Design | Bizimhost.biz

    64个图标设计Photoshop教程 | 互联网的那点事

    DESIGNSBYTES » Blog Archive » 25 Excellent Icon Design Photoshop Tutorials

    40 Useful Tutorials for Designing Icons | Web Design Core

Comments are closed.