Yellow Road Sign Icons
Posted on 17. Jul, 2009
by Tutorials Etc in Icons
Today's Etc Tutorial is a yellow road sign icon. We will be using a standard down arrow Photoshop shape to create the image inside of the road sign icon.
Here we’re going to create the download icon from the yellow road sign series of icons on IconsETC.
STEP #1
Create a new document 512px * 512px with 72dpi and a white background as seen below.
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.
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.
Step #4
Activate the by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu. Then enter the settings below.
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.
Step #6
Activate the by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu on the arrow layer. Then enter the settings below.
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.
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.
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.
Step #10
While the selection is active click on the new mask layer button as shown below.
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.
That’s it!
You should now have something like what you see below.
Didn’t get the exact same results? Want to save some time? Download the source files below.
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 as seen in the preview.
Related Tutorials
Premium
Juraviel
01. Oct, 2009
my outcome
http://i35.tinypic.com/2im8gh3.png
a lil bit different version
(im not a ps pro but i wanted to make some deviation)
Pamela
03. Oct, 2009
Love it!!
bocman
24. Nov, 2009
nice
bita
29. Jun, 2010
i need icon for distance where can i find it?
Lita
14. Jul, 2010
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/
Amit Patekar
26. Jan, 2011
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
Craig
20. Apr, 2011
That’s a well-written tutorial! I’m going to try it…
Reece
24. Apr, 2011
Awesome! I’ve been looking for new icons — love the road sign.
Gina Cittone
27. Apr, 2011
I just picked up Photoshop recently, and this looks like a great project that will help me get familiar with it!
Lorna
28. Apr, 2011
Thanks, what an informative tutorial. Very well written, and crucially it is easy to follow!
Bronwyn
29. Apr, 2011
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.
Marion
29. Apr, 2011
The highlight (starting at step
is a great trick. I think it will come in handy with other art projects.
Darrin Walker
01. May, 2011
Another great tutorial. I keep revisiting your site for new ideas — thanks!
Scott
06. May, 2011
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.
Morris B.
11. May, 2011
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.
Jamie Roux
12. May, 2011
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.
Trackbacks
19. May, 2013