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.

Glossy Black Button Icons

Here we’re going to show you how to create the 3D Glossy Black Button Icons on WebtreatsETC.

01-3d-glossy-black-button-social-networking-icons-webtreats-preview

Step #1

Create a new document 600px * 600px at 72dpi as seen below.

new600px

Step #2

Then create a new color fill layer by going to LAYER >> NEW FILL LAYER >> COLOR in the menu and choose the value #000000 as shown below.

3f3d39

Step #3

To add some lighting to the background first rasterize the color fill layer you just created by right clicking on the layer and choosing RASTERIZE LAYER . Then add the by going to FILTER >> RENDER >> LIGHTING EFFECTS in the menu and entering the settings below.

lighting-effects

Step #4

Now lets create the circular base of the icon. To do this activate the shape tool by pressing U. Make sure the circle tool is selected then draw out a circle 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”

step3

Step #5

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

blending-options outer-glow bevel-emboss contour color-overlay

Step #6

To create the shadow that helps give these icons their 3D look first create a new layer beneath the square layer you just created. Activate the brush tool by typeing B. Choose a simple round brush, set the opacity to 50%, the size to 25, and the sharpness to 0, then paint in a rough shadow around the base of the icon as seen below.

brush-in-icon-shadow

Step #7

To clean up the shadow first apply a motion blur filter by going to FILTER >> BLUR >> MOTION BLUR in the menu and entering the settings below.

motion-blur-icon-shadow

Step #8

To clean up the shadow further apply a gaussian blur filter by going to FILTER >> BLUR >> GAUSSIAN BLUR in the menu and entering the settings below.

gaussian-blur

STEP #9

Now above the square layer create a new layer by going to LAYER >> NEW >> LAYER in the menu. Activate the shape tool by typeing U. Make sure the custom shape tool is selected then choose the built in check mark 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”

Shape

Step #10

Activate the layer styles pallet on the checkmark layer you just created and enter the settings below.

shape-blending-options shape-inner-shadow shape-color-overlay

That’s it!

You should now have something like what you see below.

final-glossy-black-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
Create a Professional Coming Soon Landing Page PSD Template Crystal Clear Bubble Icons Myriad Wordpress Theme Grungy Rusted Carbon Fiber Text Effect Dejavu Wordpress Theme Image Masking and Sliding Transition Effect Fusion Wordpress Theme Echelon Wordpress Theme Adding Column Layout Shortcodes to Your WordPress Theme Method Wordpress Theme Starfield Tileable Twitter Background Tutorial 3D Transparent Glass Text Effect Persuasion Wordpress Theme Yellow Road Sign Icons How to use Google Analytics Content Experiments Grunge Yellow Warning Striped Icon & Text Effect Elegance Wordpress Theme Watercolor Social Networking Icons Red and White Pearl Download Icon Glossy Silver Web 2.0 Icon Tutorial Matte White Square Check Mark Icon Modular Wordpress Theme Brushed Silver Reflective Text Effect Coffee Stain Social Networking Icons Tutorial

21 comments on “Glossy Black Button Icons

  1. Alec says:

    I love this icon set and I’m trying to apply it to my company logo but to no avail.

    I am hoping to find someone who could take my company logo and give it this effect. I will pay for your work.

    Just post a comment here if anyone is interested. I’ll send you the photo and we can arrange payment.

    Thanks,
    Alec

    September 17, 2009 5:29 pm
    Reply
  2. Di says:

    I like the tutorial..but there is so much left out. Like how to create the contours and were to get the style used in the tutorial. The button doesn’t come out right without these. Spend hours seaching for the style on the web and info on creating coutours. I gave up. Thanks anyway.

    July 24, 2010 11:09 pm
    Reply
    1. Lita says:

      Thanks for alerting us of the some skipped steps. We will look into it when we update this tutorial.

      August 10, 2010 11:16 pm
      Reply
  3. Peg Rhodes says:

    Thank you for the tutorial, the pictures make it so much easier to learn how to do something than just the standard help documents in the software. Did you ever do an update to this tutorial to include the additional information?

    April 25, 2011 8:42 am
    Reply
    1. Lita says:

      You’re welcome Peg. Are you referring to additional icon graphics as shown on the tutorial preview? If so you can download our social media icon set in glassy black buttons from our webtreats site. Here’s the link to our 108 social media icons: http://webtreats.mysitemyway.com/free-3d-glossy-black-button-social-networking-icons/ In addition we also have animal icons, business icons, people and things icons, etc…in this style at our icons site. Enjoy: http://webtreats.mysitemyway.com/free-3d-glossy-black-button-social-networking-icons/

      April 25, 2011 7:20 pm
      Reply
  4. Blouberg Beachfront Accommodation says:

    What an excellent tutorial. For me at least. Although I’ve created a number of webpages at Squidoo and have some websites as well, all my work have been very simple since I’m very inexperienced at “special effects” etc. I will use this tutorial to build my own and use that where possible. Looking forward to another tutorial from you!

    May 4, 2011 1:06 am
    Reply

    60+ Photoshop Tutorials For Icon Design

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

    Around 100 Best All Time Photoshop Button Tutorials

    Do’s and Don’ts of Effective Icon Design « Bizzzs – Hub4india

    আইকন বানানো শিখতে চান?এই নিন ৬০টির বেশী ফটোশপ টিউটোরিয়াল

    100+ amazing tutorials about Icon Designs | TechInfoLabz

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>