Free Icon Set Friday - Web Injection

In an effort to bring you, the readers, a steady stream of updated content, we've decided to publish a weekly column that will feature a royalty free, downloadable icon set for your use in any application or design!

For our first Free Icon Set Friday, we present to you an icon set by Midtone Design, the Web Injection icon set.



Download link provided by Tutorial9.

Creating a Web 2.0 Site Button

I'd recommend to use your result on Sivatar.com to promote your website!

Create a new image. (Width: 70px, Height: 70px)

Select your Rounded Rectangle Tool, and set the radius to 3 pixels, and the color to #ee920e. Create a Rounded Rectangle that is 1px away from the edge of the image on all sides.



Now, duplicate this layer and set the layer's blending options to screen. Reposition the screened duplicate so it only overlaps in the bottom right. (Remember, it's always good to hold shift while doing these sorts of things to maintain straight paths.) Rasterize both of these layers.



The next step is to remove a small portion of the bottom right corner, so the button will appear to be dogeared. Use your Polygonal Lasso Tool to create a right triangle selection, line it up with the button properly, then delete the selection from both layers.



Select your dogear layer, and apply a gradient overlay. (blend mode: multiply, #ee920e -> #FFFFFF, 120 degrees) Merge the two existing layers.



Pull out your Elliptical Marquee Tool and create a selection over your whole image that will be satisfying to yourself as a "lighting" layer. Create a new layer and fill your selection with a gradient that fades from white to transparent. Delete all areas of this "lighting" layer that do not overlap with the base image.



Last step, throw some text on there! I chose Tahoma, 11 pt (no anti aliasing), bold. Give it a drop shadow (2px distance, 1px size) and a stroke (#d48310) of 1 pixel.

Ta - da!



Hope you enjoyed this tutorial, if you did, please subscribe to the feed.