How to Create Buddy Icons (Plus an Exclusive Web Freebie!)

Today we’re going to walk through the creation of your very own vector-based Buddy Icons with a nice bonus – a free set of Envato™ Marketplace icons to use on your own website!

About the Author: Orman Clark is a UK based Web Designer specializing in pretty pixels and front-end development. He spends most of his time designing WordPress themes and other free resources for designers at PremiumPixels.com. Keep up to date with Orman and PremiumPixels on Twitter, Dribbble and Forrst.

Tutorial Details

• Program: Adobe Illustrator CS3+
• Difficulty: Beginner
• Estimated Completion Time: Under 1 Hour

Step 1 Organizing Your Layers

Open up Adobe Illustrator and create a new document with the following settings: 800×600 pixels, 72dpi, RGB color, units in pixels and a white background

With your new document created, open your Layers palette by going to Window > Layers if it is not already visible and create 4 new layers. Call them “base”, “icon”, “light” and “overlay”

Step 2 Creating the Base

Working on the “base” layer you just created, select the Rounded Rectangle Tool, choose a light grey color, and click anywhere on your canvas. In the dialogue box that appears select the following: Width “42px”, Height “42px”, Corner Radius “10px” and click OK.

Step 3 Creating the Inner Light

Ensuring that you are on the “light” layer, select the Rounded Rectangle Tool once again, select a darker grey, and click on the canvas. This time choose: Width “38px”, Height “38px”, Corner Radius “8px” and click OK.

Step 4 Creating the Inner Light Cont…

Keeping on the “light” layer, select the Rounded Rectangle Tool one final time, select an even darker grey, and click on the canvas. This time choose: Width “34px”, Height “34px”, Corner Radius “6px” and click OK.

Step 5 Creating the Inner Light Cont…

Hold down Shift and click the two innermost rectangles to select them both. With them both selected open your Pathfinder palette by going to Window > Pathfinder if it is not already visible and click the “Minus Front” icon. This will leave you with a hollow rectangle.

Step 6 Creating the Inner Light Cont…

With the hollow rectangle selected, head over to the Gradient palette (Window > Gradient) and select a linear gradient, from white to white, set at 90 degrees, with the left gradient anchor set to 0% opacity, the right gradient anchor set to 80% opacity and the gradient location at 80%

Open the Transparency palette (Window > Transparency) and set the Blending Mode to “Soft Light”.

Step 7 Creating the Overlay

Switch to the “overlay” layer, choose any color, and create yet another rounded rectangle using: Width “38px”, Height “38px”, Corner Radius “8px”. Using the Elipse tool, create an elipse and position it over the rectangle as shown.

Step 8 Creating the Overlay Cont…

Hold down Shift and click the elipse and rectangle to select them both. Using the Pathfinder palette as before, click the “Minus Front” icon. This will leave you with the shape of the overlay.

Step 9 Creating the Overlay Cont…

With the overlay shape selected, head over to the Gradient palette and select a linear gradient, from white to white, set at 0 degrees, with the left gradient anchor set to 25% opacity, the right gradient anchor set to 0%, and the gradient location at 50%. Set the Blending Mode to “Soft Light”.

Believe it or not, we are now finished with the basic setup and are now free to play with color!

Step 10 Creating a Vimeo Icon

Now that we have finished with the basic setup, we can start making individual icons. As an example, I am going to walk through the creation of a Vimeo icon. The purpose here is to show you how easy it is to create your own icon once you have a basic template set up!

Create two new swatches by clicking the “New Swatch” icon in the Swatches palette (Window > Swatches). Define the swatches as follows:

• Swatch One: “gradient bottom” with the following values: R “31″, G “117″, B “196″.
• Swatch Two: “gradient top” with the following values: R “113″, G “188″, B “237″.

Step 11 Applying a Gradient

Going back to the “base” layer, select the base rectangle and apply a gradient using the new gradient swatches we just created.

Step 12 Creating the Logo

Fortunately, the Vimeo logo is based upon the Black Rose font. Download the font and type the letter “v” ensure you are working in the “icon” layer. I’ve typed my text at 55pt with a very light grey colour. Convert the text to outlines (Type > Create Outlines) and position the v in in the center of the rectangle.

Step 13 Creating a Drop Shadow

Select the logo shape and press CTRL/CMD+C to make a copy. Press CTRL/CMD+B to paste the copy behind the original. With the copied shape still selected, press enter to adjust the positioning. Change the horizontal positioning to 0.5px and the vertical positioning to -0.5px and click OK.

Step 14 Creating a Drop Shadow Cont…

Change the color of the copied shape to black, set the Blending Mode to “Soft Light” and change the opacity to 50%

Step 14 Adding a shadow

An optional step may be to create a shadow for the entire icon. Working in the “base” layer, create a small ellipse at the foot of the icon. Fill this icon with a radial gradient, from black to black, set at 0 degrees, with the left gradient anchor set to 60% opacity, the right gradient anchor set to 0%, the aspect ratio set to 8%, and the gradient location at 60%.

Step 15 Create Your Own!

That’s all there is to it! Following the basic guidelines set out in this tutorial you can easily create your own scalable icons for almost any application or site. Just open up your icon template and drop in your own logo!

Bonus Exclusive Freebie!

Since this tutorial is for Envato™ I thought I’d take the time to create a set of BuddyIcons for the Envato™ Marketplaces. Included in the pack are icons for ThemeForest, GraphicRiver, AudioJungle, ActiveDen, VideoHive, 3DOcean and CodeCanyon. Brandon (the site editor here) even took a few minutes to follow the tutorial and create his own contribution: 2 flashy Webdesigntuts+ icons.

The pack contains the icons in transparent .png format in three sizes; 32x32px, 64x64px, 128x128px together with the the original artwork (.ai)

Download the Freebies and Tutorial Files!

Using the Icons in Your Own Designs

The beautiful thing about having your own set of BuddyIcons is that they work so well when it comes time to integrate social-media and other links into your own designs. Each icon is uniform in size and you can use them in a variety of situations. Below are just a few quick ideas:

This example shows how you might use the BuddyIcons in a header navigation space.

This example shows how you might use the BuddyIcons in a sidebar widget.

This example shows how you might use the BuddyIcons in a footer space.

Why You Should Use ‘em…

When you consider the concept of an icon from a theoretical point of view, there are quite a few benefits to using a uniform set instead of using bits and pieces from all over the place. Icons attract the attention of viewers, encourage click-throughs, and they are a great way to bring a splash of color and style to your designs. A uniform icon set can go one step further by creating a cohesive, balanced, and artistic element to a design. Using several icons in one place can even help to make a website look like it’s active and engaged in the community… all the more reason for designs to include a little bit of BuddyIcon love somewhere on the site.

That’s all for now; We hope you enjoyed the tutorial and the freebie! You can check out the complete BuddyIcon set without the exclusive Envato™ icons at PremiumPixels. Be sure to check back here (or subscribe) at Webdesigntuts+ for more great freebies like this in the future!