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
Trackbacks
13. Jan, 2010