The answer is simple: People prefer talking face to face. A mascot/avatar helps companies to connect with people and develop a relationship with them. Generally, people prefer common types of avatars such as humans and animals. It’s hard to connect with something abstract, although it is possible. There is also an emotional aspect – the more emotional the design is, the more likely it creates a feeling for visitors. The three following steps should make it easy to create an attractive mascot:

• Consider your target audience
• Make the mascot match the website
• Give the mascot a personality

And yet, most of the mascots and avatars don’t serve their purpose as effectively as we’d expect. Concerning these less effective avatars – for some reason most companies stick with a mascot who has personality but who doesn’t ‘live’ on the site. Therefore, I would like to point out five different examples.

One of the most popular examples of a typical mascot is MailChimp.

Whenever you check reviews about the best online mascots, the MailChimp monkey is always among them. It took 7 years of work and revision until the creator of the logo was finally happy with the result. It happened only when they hired an expert, creator of Firefox logo Jon Hicks, who redesigned the mascot and gave the logo its current appearance. You can read more about the design process of MailChimp mascot here.

Another highly rated example from Jon Hicks is Silverback @ silverbackapp.com

The creation process took a lot less time than for MailChimp, but it’s a good example of the steps a designer goes through to get a good mascot that relates well with users. An idea was turned into basic sketches, which, after adding some details, were scanned in. The next step involved the first layer of colors in Photoshop that resulted in a realistic gorilla wearing a shirt and a drawing pad. But it is difficult to relate to a simple animal. Therefore, as a last phase, Hicks added some more human-like details and facial expressions. You can see the steps of this process here.

One mascot, which takes a step further motion-wise, is Crayons.

The Belgian mascot Crayons is rather rare in the mascot world because it is based on an inanimate object. And yet they have still managed to create a friendly mascot which creates positive feelings and is easy to bond with emotionally. The only negative side to Crayons is its relative similarity to the Microsoft paperclip Clippy. The designer has given the mascot more emotions and movement than usual, and I must say that without a doubt he has done it successfully. Some emotions displayed by the Crayons mascot can be found here.

Now, I’m not quite sure whether Roger MozBot by SEOmoz should be grouped with Crayons or following Sportlyzer.

SEOmoz has done even more amazing work with an inanimate object. Roger MozBot looks like he is alive and emotional. In addition, most female users probably find him cute. SEOmoz has used Roger MozBot in several situations on their homepage and he ‘lives’ a separate life on Twitter and Facebook. And yet, he is still somewhere in between. It’s difficult to say whether it’s because of the company’s brand building or because of the fact that,despite his cuteness, he is still just an inanimate robot.

Sportlyzer has tried to go even further with its avatar, Mike Lyzer.

The virtual coach avatar, Mike Lyzer, is a key element of Sportlyzer’s UI therefore an attempt to make the avatar as ‘live’ as possible has been made. Mike, like Roger MozBot,communicates on Twitter and Facebook but, in addition, he also has a primary role on Sportlyzer. He acts as a coach on the website and gives practical advice to users. Mike’s avatar was chosen via a competition on 99 Designs. Applicants were given three emotions and they had to create a virtual coach from whom people would like to receive advice. You can see the development of Coach Mike Lyzer and some examples of the winning designs in action here.

The last two examples seem to be taking it one step further, and yet we still haven’t seen many examples like this – most of the mascots are rather like MailChimp’s monkey or Silverback’s gorilla. Is there a good reason as to why sites are choosing this path? Is it simply because different mascots and avatars serve different purposes or have SEOmoz and Sportlyzer really gone a few steps further in mascot development? If so, then what’s next?

Below is the round-up collection for iPhone related designs that will give your iPhone the new look and some of them even guide you on how to create your own iPhone theme.

Tutorials Wrap

Make And Use Themes With WinterBoard

This tutorial is simply organized to guide you step by step in creating your own iPhone theme. Whether you want to partially create the new theme or entirely create the new look than the usual theme, you can play around with the theme with this guidance.

Design Your iPhone Widgets

If you like the dashboard panel on your iPhone or want to slightly change it and have your own designed icon on it, this is the right tutorial for you.

iPhone Theme Behind The Making

For some of you who doesn’t want to change your iPhone and design the theme from scratch, say you only want to change the icons, or change the SMS background, just for few simple changes. This will tell you how.

PSD Files Resources

iPhone Icon Style .psd Kit

iPhone Style Buttons Modified

App Icon Template Kit

Upojenie PSD

iPhone GUI

iPhone Gradation Set

iPhone 3G-3GS .psd

Apple iPhone 4G .psd

iPhone Icon Designs

Keyboard For iPhone

iPhone Icons

Upojenie iPhone Icons

40 Beautiful MAC OS X and iPhone Inspired Icon Sets

35 Free Icon Sets for your iPhone – Pimp it Up!

30 Free iPhone Icon Sets

50+ Free Hand-picked Creative and Amazing iPhone Icon Sets

iPhone Wallpaper Designs

Extraverage iPhone-Wallpapers

iPhone Wallpack Vol 1

iTunes Store Art For iPhone

30 Free iPhone Wallpapers

TokyoCandies iPhone Wallpapers

Filter017 iPhone Wallpapers

50 iPhone Wallpapers for Design Lovers

100 (Really) Beautiful iPhone Wallpapers

SnowCover Designs

While listening to your music on your iPhone, you will notice how standard is the look from the lockscreen. But, do you know that you can change and customize that look with SnowCover? It is an extension to display the cover-art on the lockscreen in a different way. You can use your own background and Vinyl-Cover / CD-Case images. Credits to Thyraz for creating the vinyl cover-artwork. Be creative and customize your own or see samples below.

Selective iPhone Themes

eZuneHD

Channel Zero

Teknologik iPhone Theme

Ocean and Vodka

Adeline

Protek

Labeled Theme for iPhone

Whitoken iPhone Theme

Milk iPhone

Extra

iPhone Skin Designs

Make your iPhone skin looked different from the other. Get awesome designs for your iPhone skins or create your own onn GelaSkins, Infectious, or MusicSkins.

iPhone Design Tools

If you decide to take iPhone designs seriously, features which is offered by iPhone Designs Tools would be very useful for you. From iPhone templates, sharp vector graphics, to Apple guidelines can be found here. All packed depends on your need.

If you like outcome be sure to keep reading – you will learn a lot of advanced and interesting features to build these two icons.

Final preview

Step 1

Start by creating a new group, named pen. We’ll put everything there to keep layers organized.

Activate rectangle tool and draw a rectangle. Click top, right, and left middle to add points. Move some points to create pen’s base. Use image below for reference.

Step 2

Add these layer styles.

Step 4

Select path we just created, copy it by pressing  - CTRL+C.

In Path panels, create new path and paste (ctrl+V). Modify the path to make it longer. See picture below (#2). Change path to selection by ctrl+click the path. In Layers panel create new group and click Add Layer Mask icon. Every details on the pen will be placed inside this group.

Step 5

Draw a small rectangle on top of the pen. Use color #906a00. Press ctrl+T for transformation, right click and choose warp. In the option bar select Warp: Arch with blend setting 30%.

Step 6

Add these layer styles.

Step 7

Using similar steps above, create another shape on the pen. Use layer styles shown below.

Step 8

Using an ellipse tool create an ellipse. Add these layer styles.

Step 9

Zoom closer to see more detail. Create new layer. Create selection with polygonal lasso for highlight. Fill the selection with white (Edit > Fill). Remove selection ( ctrl+D ) then add Gaussian Blur (Filter > Blur > Gaussian Blur). Make the highlight more subtle by lowering its opacity to 80%.

Step 10

Create shape shown below. Change its fill layer to 0% and add these layer styles.

Step 11

Duplicate shape a few times and place it below.

Step 12

Create new layer. Using soft brush, draw white line along the pen’s body. Add Gaussian Blur to soften it. Change its opacity to 65%. Erase both ends using soft eraser. Duplicate highlight layer to make it stronger.

Step 13

The gold metal is more reflexive and need to cast more lights. Create new layer. paint it with white, add Gaussian blur and change its opacity to 50%.

Step 14

Now, we’ll add marble texture to the pen. Add another layer above all layers. Press D button to change foreground and background color to black and white. Click Filter > Render > Clouds then Filter > Render > Difference Clouds. Do this a few times until you have satisfying result. Change blend mode to Overlay and opacity to 40%.

Step 15

Use pen tool and draw pen’s handle. Add Inner shadow.

Step 16

Draw small circle under the pens handle. Add these layer styles.

Step 17

Draw small circle and put it under all the other layers.

.

Step 18

Draw small rectangle to connect pen and its handle.

Step 19

Draw pen’s tip underneath the pen’s body. Add some layer styles.

Step 20

We’re done with the pen. Right click pen’s group and choose Convert to Smart Object.

Next, we’ll focus on the envelope so click the eye icon to hide the pen.

Step 21

Create new group named envelope. We’ll put every shapes here.

Activate rounded rectangle tool. Choose radius 3px in the option bar. Draw a rectangle on the stage. Add these layer styles.

Step 22

Draw another shape like shown below. Add these layer styles.

Step 23

Draw similar shape, this time on top. Use layer styles shown below.

Step 24

Copy the path, and transform it until it looks like this.

Step 25

Ctrl+click on path to change it to selection. Create new layer, fill it with black.

Step 26

Remove selection ( ctrl+D ). Add Gaussian Blur.

Step 27

Change its opacity to 40% and erase shadow outside the envelope using soft brushed eraser.

Step 28

Draw a rectangle shape. Press ctrl+T, right click and choose Warp, then move its top side. Duplicate rectangle by pressing ctrl+alt+T

and right arrow a few times. Press ctrl+shift+alt+T few time to repeat the duplication.

Step 29

Duplicate layer ( ctrl+J ) and change its color to #f1b6c1.

Step 30

Select rectangle number 1, 3, 5, 7, … and delete it. This way, we’ll alternating red and blue shape.

Step 31

Select both red and blue shape layers, alt+drag to duplicate it. Put it in every side of the envelope.

Step 32

Remove unneeded shape by adding layer mask and paint it with black.

Step 33

Okay, we’re done. Right click envelope group and choose Convert to Smart Object. Press ctrl+T and rotate the envelope.

Step 34

Unhide the pen by clicking its eye icon. Ctrl+click pen to create selection base on its shape. Create new layer and fill it with black. Press ctrl+T, move pivot point to bottom left corner and start dragging to rotate it.

Step 35

Click Filter > Blur > Gaussian Blur. Add layer mask and give it a white to black gradient. As you can see below, we have just creating its shadow.

Step 36

Oops, I forgot the envelope’s shadow. This one is easy, just add drop shadow layer style to the envelope layer.

Final Result

We’re done. I hope you like the result and enjoy doing this tutorial.

If you want to create effective icon designs, then you should take a holistic approach to issues such as audience, size, simplicity, lighting, perspective, and style. Here we bring you a good opportunity and a good starting place for making icons that using these below toolkits will work together with you and fits within your budget.

1.Adobe creative suite

Adobe CS5 is most important tool for icon designers. It might seem prohibitively expensive, but it includes a lot for your money. For icon designers, CS5’s most useful tools include Photoshop, the market leading piece of image editing, manipulation and compression software; Illustrator, an artwork program used throughout the creative industries; and Fireworks, which lets you allow to  optimize images for the web.

2.Axialis icon workshop

Axialis Icon Workshop6.5 is a highly compatible piece for your  icon creation priced at $49.95, conversion and editing software available for Mac, Windows and Unix OS too. Besides the standard features you would expect, IconWorkshop is the only icon editor which lets you create and edit Image Strips for toolbars. The new generation of icons uses variable transparency (alpha channel). This feature permits creating beautiful icons with smooth borders and shadows. Axialis IconWorkshop also simplifies the icon creation process by providing you with a vast array of basic image objects, You can drag and drop on top of one another for professional looking results and it’s compatible with graphic industry standards.

3.Awicons

I think minimal and letterpress effects currently are very popular in webdesigns and many designers will find this collection useful and worth bookmarking!

1. Free Minimal Icon Set

Editable PSD file with Illustrator vectors.

2. Mini Icons

Free icon set from http://www.famfamfam.com/. 16×16 GIF.

2.1. Smooth Icon Set

Icon Set: home, help, calculator, lock, print, push pin, clipboard, scissors, key, flag, shield, pencil, tag, trash, news, info, network, credit card, money, forum, database, music, camera, video, rss, download, heart, favorite, chart, paperclip, laptop, gear, clock, star, and more.

3. Mono Icons

108 gray 32×32 PNG icons. You can customize the color. Also free for commercial use.

4. Iconic

Iconic is a minimal set of icons consisting of 114 marks in raster and vector formats. 5 different sizes up to 32×32, nice flexibility. Creative Commons 3.0 license.

5. Pictodeck

Pictodeck is a set of over 700 pictograms in vector format designed specifically for Keynote. That means you can scale them to any size you desire without any loss in quality. All of the icons also support transparency. The set was created by Aaron Richard. All are licensed slightly differently under Creative Commons.

6. Ecqlipse 2

100+ icons in various resolution up to 128×128. Also available as .ico.

7. Letter Pressed Icons

collection of over a 100 letter pressed icons, in various letter pressed styles. The icons include three PSD files which are full of icons which you can drag and drop into your designs. Creative Commons license.

8. Kostenlose Icons

9 GIF icon sets. Creative Commons license.

9. Token

128 icons in light and dark versions. Available as 128×128 PNG or ICO up to 256×256.

10. Eusmis

99 16×16 ICO files.

11. Pictoico

100 fully scalable pictograms/icons. Comes as a AI, SVG, XAR.

12. Social Media Icon Pack

22 500×500 PNGs. Free to use in commercial and personal works.

13. Wireframe Mono

244 (8 cursors) icons optimized for 16×16, 32×32, 48×48. Available as PNG, ICO, GIF. Creative Commons Attribution-NonCommercial license is free.

14. Picol

Massive set of about 500 icons. Available as 16×16, 32×32 PNG or SVG.

15. DOT Pictograms

68 free icons up to 256×256 PNG.

16. Snow Icon Pack

102 royalty free website & GUI icons that can be used for both personal and commercial purposes. Royalty free license. TIFF, ICNS, ICO, ICON, PNG. 32×32

17. UIDesign Icon Pack

51 free icons. PNG, ICO, ICNS. Designed by Alexey Egorov.

18. Pixeley

30 16×16 icons. PNG, ICO, ICNS. Created by el73.be

19. Mini Pixel Icons

320 icons available in various color themes. 14×14 GIF.

20. Pixelated

21 icon in light and dark version. Transparent GIFs.

21. 165 Lovely Free Vector Icons

AI, SVG, JPEG.

22. 135 Free Vector Icons

AI files.

23. Mini Icons

113 10×10 GIFs. Creative Commons Attribution-ShareAlike license.

24. Doctype Icons

42 16×16 GIFs

25. BWPX.ICNS

A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. Creative Commons license.

26. Splashy Fish Icons

450+ 16×16 PNG icons.

27. Hand Pointer Icons

36 icons, 6 different types, 6 color variants.

28. Silk Companion

450+ 16×16 PNG icons.

29. Symbol Signs collection

Available in OpenType font format.

30. Diagona Icons

200 PNG icons. 10×10, 16×16.

31. 30 Free Vector Icons

Icons with apple touch. PSD file.

Do you know some more free minimal icon sets? Let us know!

Step 1 – Background

Let’s start by creating the background.

Create  a new document ( CTRL+N) and make it  500 by 500 px.

Create  a new layer(CTRL+SHIFT+N), fill it with random color and then add a Gradient Overlay like in the screenshot below:

Gradient overlay:

• f6f7f7
• b7b9c5
• f6f7f7

Step 2 – Body

Create a new layer.

Select the rectangle tool and make a shape with it to be something similar like screenshot below (the color doesn’t matter now).

Press  ”Ctrl + T” or go to Edit>>Free Transform Path to select the transform mode.

A button will appear to switch the transform mode to wrap mode.

Click on it:

Now your selection  should have been changed a little bit:

Click hold and drag point 1 to the 2, try to follow screenshots very closely now:

Do the same with the other point:

Once you have done, Hit the Enter button and you should have got something similar to Television screen shape:

Great! Now let’s add these Blending Options:

• Inner Glow

• Gradient Overlay:
• 1b1b1d
• 9lle36

Done? You should get something like this now:

Step 3 – The Display

Create a new layer.

Select your Rectangle Tool (U) again, set it to 2px and create another rectangle  like below:

..and add following Blending Options now:

• Bevel And Emboss

• Color Overlay (#161618)

• Stroke (#323232)

Step 4- The Glass

Create a new layer.

Create a new rectangle but just a little bit bigger than the first one. Make sure it is set to 2px.

..and set it below the first and the second layer. So it should appear like this to get some more 3D in depth look:

Do the same settings as we’ve been done in previous Step 2 :

After modifying hit Enter or click OK to approve it:

Now add  Blending Options (for the first picture you only need to set the Fill Opacity to 0%):

• General blending – Fill Opacity :0%

• Inner Glow

Your outcome should look like this now:

Step 5 – Stem

Okay, now we need stem where monitor will sit on. Let’s do it!

Create a new layer and create something like the selection below using your tool preferred. I used the Polygonal Lasso Tool (L) here:

Fill it and add following Blending Options:

• Gradient Overlay:
• 454545
• ffffff
• 454545

Let’s create a new layer again and make a selection like screenshot below:

(you can do it by ctrl+click on previous layer and then with lasso tool select selection from previous layer selection)

And add these Blending options now:

• Inner Shadow

>

• Bevel And Emboss

• Gradient Overlay:
• lalala
• 858282
• lalala

Your result should look like mine:

Merge 2 stem layers together now.

Step 6 – The Stand

Okay, let’s create stand now!

Create a new layer and draw a rectangle like screenshot below:

Go to Edit, Transform Path>>Perspective.

Now select the square above the left corner and drag it a little bit to right to create something like screenshot below. When you are finished set it to lie below the stem layer.

When you are done add following Blending Options:

• Inner Shadow

• Bevel and Emboss

• Color Overlay (just something not so black..make it dark grey)

Step 7 – Reflection

Duplicate the Stem layer, then  go to Edit>Transform>Flip vertical and set it below the original stem.

Now create a new layer and brush with a white color on the stand.

Now erase the parts you don’t need anymore (like the picture below)  and bring the Opacity down until it looks realistic:

Step 8 – Glow

Create a new layer and create a selection like this with your Polygonal Lasso Tool (L):

Fill it with white color (or use subtle gradient if you prefer it that way):

Now just bring the opacity down a little bit as you like to get realistic effect.

Create a new layer and brush with a black color on the left side like I did to give it more 3D look.

I will not go in detail in those small steps,but small tips to finish:

• Create buttons - to do it create a new layer and add some light gray circle with your brush tool like i did and just enable the inner shadow in the Blending Options.
• Add Text – add some text there to make your own LCD brand,just don’t forget to add your text the buttons and the gray line below your text.

You should have your own LCD TV now! Great!

Is it not easy? Add now some cool looking image, portfolio work and put it on your webdesign, be creative!

You can download the Photoshop files here.

Before we start, let’s see what we’ll be creating below. Notice that you can even see the USB symbol on its cable. As I said, highly realistic.

Our Final Output

Step 1-Creating Wacom’s Base

Start by creating a new file, 512×512 px, RGB, 72 dpi, white background. Create a rounded rectangle with 5 px radius. Add some drop shadow. This will be our Wacom’s main body.

Step 2

Create new layer above it. Fill the layer with white. Click Filter > Noise > Add Noise. Give a small amount of monochromatic noise.

Step 3

Hit ctrl+alt+G to turn layer into a clipping mask. Change blend mode to Multiply and lower its opacity to 50%. This way, our Wacom will have a bit of texture on it.

Step 4-Add 3D Look

Currently, our Wacom looks very flat. It’s just a 2D rectangle. To turn it to a 3D shape we can’t just use a bevel and emboss style. We’ll play with lights and shading to do that. In new layer, create a transparent to white gradient in lower part of wacom. Change its opacity to 20%.

Step 5

Draw another gradient to the other side. See picture below to see light direction for each side.

Step 6

Draw a black rectangle with 20% opacity. Add layer styles Bevel and Emboss and Outer Glow.

Step 7-Separating Buttons

Now, we need to create gap between Wacom’s panel and its body. The trick here is using thin line in white and black. Together, these two lines create depth and make our brain thinks “It’s a 3D shape!”

Create new layer. With pencil tool, diameter 1 px, opacity 70%, draw a black line. Underneath it, draw another line, this time white with 50% opacity.

Step 8

Draw another black and white line to separate other panels.

Step 9-Scroll Area

Next, creating big scroll area. Using ellipse tool, shit+drag to draw a perfect circle. Add some layer styles.

Step 10

Draw smaller circle inside previous one. Add another layer style.

Step 11

Use polygon tool with 3 sides to draw two triangles.

Step 12

Inside the scroll area, draw a circle. Select the path circle, hit ctrl+C and ctrl+V. Press right and down arrow few times to move it. In the option bar select subtract to create a crescent shape. Next, draw path to remove top part of the crescent.

Step 13

Duplicate crescent layer. Move it to other side of the scroll area. Hit ctrl+T and right-click choose Flip Vertical.

Step 14

Write FN1 and FN2 in lower button. I use a bold italic Helvetica here. If you don’t have Helvetica, you can use similar sans-serif font like Arial. Add layer styles shown below.

Step 15

Next step is creating arrow for next and previous button. Draw arrow directly using pen tool is not recommended. It’s just too hard.

Here’s what I prefer to do, create a blue rectangle then using pen tool click one of its top corner. We have a triangle now.

Select the path and duplicate it. Move it by pressing left and top arrow a few times. Choose subtract from the option bar.

Last thing to do is select both path and rotate it -45 degree.

Step 16

Duplicate the arrow and flip it vertically to create arrow for opposite direction. Give both arrow these layer styles to make them glow.

Step 17

Wacom put a small light under the button and it make the indicator really glow. So, create a new layer. Activate brush tool and choose star shape brush. With foreground set to light blue, click once on top of every button indicator to give them subtle sparkle.

Step 18

Upper part of bamboo and its lower are different. The upper part is very slick and glossy. Select the upper part and add adjustment layer Curves. In the Curves dialog box create a small S curves and hit OK This will increase its contrast and give it a glossy look.

Step 19

To make it looks more glossy, we’ll add some reflections. Again, select the upper part and add a transparent to white gradient.

Step 20

Don’t forget the brand. Here, i just use a light italic helvetica and wrote BAMBOO. Then I add a layer mask and paint the line inside B with black.

Step 21

So far, here’s what we have.

Step 22-Creating Cable

Move on to the detail. Draw a black rectangle in top right corner. This will our cable’s head.

Step 23

Draw a smaller rectangle. Use gray color and add Inner Shadow.

Step 24

Inside the gray rectangle draw a USB symbol.

Step 25

Duplicate the gray rectangle.

Step 26

Add a bold B. Hit ctrl+T and flip it vertical and horizontal. Add Drop Shadow and Outer Glow.

Step 27

Finally, draw a triangle shape. With tool brush hardness 95% draw a black cable. Underneath it draw the shadow manually.

Step 28-Drawing Pen

To make things easier we’ll create pen in a separate file. We start from a simple gray rounded rectangle with 5 px radius. Select some points using white arrow tool and move it until we have basic pen shape. To give a 3D look add gradient overlay.

Step 29

Upper part of the pen is very slick and glossy. Draw a black shape, hit ctrl+alt+G to create clipping mask. Add gradient overlay.

Step 30-Creating Pen’s Button

Draw a rectangle in lower part of the pen. Add layer styles shown below.

Step 31

Draw smaller rectangle in the middle of the pen’s button and add a gradient overlay.

Step 32

Almost done! Draw a very small rectangle at the end of the pen.

Step 33

Draw a black rounded rectangle on top of the pen. I also draw a very small reflection on it.

Step 34

Our pen is done! Now, we’ll import it to our wacom picture. Select all layers and right-click choose Convert to Smart Objects.

Drag our new smart object to Wacom file. Hit ctrl+T and rotate it.

Step 35

Duplicate the pen, right click and choose rasterize layer. Hit ctrl+T and distort it until it seems laying on our wacom. This pen will be our shadow.

Step 36

Hit D and shift+alt+Delete to fill the duplicated pen with black.

Step 37

Give it a Gaussian blur and add a layer mask. Draw a white to black gradient until the shadow gradually fades away.

Step 38

Here’s our wacom right now.

Step 39

I don’t really like the plain white background. So, I found this texture and paste it under the Wacom.

Conclusion

For final touch, i want to make Wacom really stands out from the background. I create a new layer. Fill it with a radial gradient gray to white. Change the blend mode to Overlay. That’s it! I hope you have some fun with this tutorial and learn something new.

Free download PSD file

Wait! To help you following this tutorial, I also give you the psd file. Click here to download it.

1.Free vista Animal icons

These free vista animal icons are from visualpharm. Available in all sizes,Windows,MAC and PNG formats too.The icons are free for personal use and also free for commercial use.

2.Animal archigraph icons

Animal Archigraphs, is made especially for all of you animal lovers! They are animal archigraphs, or 3D animal icons. They also carry a bit of a glossy effect which really makes them shine. There are 26 icons in total. Hope you enjoy them!

3.Bearbrick Icons

Incredible work. Featured on many icon galleries.Free for personal use

4.Qee icons

Different designs, you will be sure to find more than a few that will catch your attention. They are 100% free to download.

5.Easter bunny icons

This set includes 44 cute easter icons that you can use for web and print design. Icons include: bunnies, birdies, Easter eggs, and candy bars. You can use them to spirit up your blog themes or to design your Easter postcards and invitations.

6.Zoom eyed creatures

Turbodesigner Olesia Kozlova have drawn a set of icons with the nicest goggle-eyed creatures.You are free to do whatever you want with them but be careful not to let them subdue your mind. Take this hypnotoad to start with.They have popped their eyes and are full of attention.All graphics in Download section are free to use for personal non-commercial purposes

7.Moshii world sea creatures icons

The set of impressive sea creature icons,bird and twitter icon too.The Moshii World icons set is free to use.

8.Pacman icons

Inspired from Pacman game.Another interesting fact about these icons is that the author of the set, Stanislav Smoliakov, moved to Goa (India). Most of the icons were drawn there at the coast of the Indian Ocean. As it turns out Turbomilk became a Russian-Indian company.All graphics in Download section are free to use for personal non-commercial purposes.

9.Fugly Monster icons

Unique creature design.Available in .icns .ico .hxq and png formats.Dock style.

10.Icons from iconfinder

Well designed and detailed icons.the 3D white shape as the base, that has it’s own custom perspective look.These icons are licensed under: Creative Commons Attribution-No Derivative Works 2.5 Denmark.

11.Curl finder icons

In this pack you’ll find 2 icons in different formats.These icons are for personal use only.

12.Icons for online shop

Free icons for online shop.-Status of the icons are  Shopping cart is empty, Shopping cart full, Consultation with a specialist, Photos and Video.Available in PNG format.

13.Black and Blue icons

Mac OS X application icons such as iChat, iPhoto, iTunes, Address Book, Text Edit, iCal in black and blue colors.

14.Aeon by kyo-tux

These icons are belong to Mac and Windows.All the icons are available in PNG format with 256*256 px dimension.

15.Mac dock makeover

A winter style theme, based on white, silver, and blue colors to give my dock a “chilled” look. Icons included are Dashboard Icon,Safari Icon,Finder Icon and iPhone iTunes Icon etc…It’s a collection of Dock icons.

16.CHANGHONG LT700 icons

The set of 5 icons for control panel things.Just another blue dock icon.

17.Icon pack in Mac OS X style

This set is free and intended for non-commercial usage only.Available 5 dimension.

18.Vista and XP OS icons

For vista and Xp OS . Designed using Adobe illustrator CS.

19.Leopard icon pack-updated

Revision pack of leopard icons.Added more icons in this package.And it’s already downloaded 10000+ times.

20.Umi icons full pack

A Full pack of icons for Mac OS. Glossy blue style.

21.Puck icons pack

New set of Dock icons for both PC and Mac use.Some rights reserved. This work is licensed under aCreative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

22.Apple TV icons

23.Apple Mug Icons and Extras

24.Sticker pack

Sticker type of icons.This collection contains 20 individual sticky icons with large resources for Vista & Leopard. Two sets are available.

25.Wi-fun icons

26.Manto Emotion / Emoticons

Manto is a set of emotion icons, or emoticons, that have an array of different emotions, and they are quite interesting little emotion icons.

27.Mr.Zhong Emoticons

Unique and crazy icons.They come with faces only and also with body. Hope you like.

28.Snooker ball Emoticons

All of the Snooker Balls icons are beautifully put together and have a great glossy look to them. Cool set of glossy emoticon balls.

29.Popsicle Icons with Emotions

These are funny emoticons in funky style.

30.Lego heads

Awesome and a retro style emoticons.

31.iPhone icons roundup

Here are the  coolest roundup of  iPhone icons you will ever see in your life. They are really look great, and best of all, they are 100% free to use! Spice up the look of your iPhone with these set of awesome iPhone icons.

Iphone  roundup 2

Northstar Iphone icons

These are simply wonderful icons.There are a total of 44 awesome icons in this pack!.

CMT Iphone icons

32.SuperMario Box icon packs

Set os 5 icons inspired from SuperMario characters.Attribution (Creative Commons)

33.Acid trip – Shrroms,Monsters and Candy

They are composed of shrooms, monsters, candy, faces, weather, creepy pacman icons and more.Having the collection of Creatures,Emoticons and food icons too.

34.Fungii iconset

These icons are  designed like futuristic retro style.The fungii name comes because of the creepy end.Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

35.Wacky gamer icon set

36.Pioneer camp icons

These set are  fully related to camp items.Free for non-commercial use

37.Baggy icon set

Baggy Icon Set was designed by Paul Kadysz. Set contains 5 high quality icons in 3 different formats. Here’s how the set looks like.

38.Blue retro rusted grunge  nature wonders

This blue retro rusted grunge icons natural wonders set includes a wide assortment of icons from nature.

39.Archigraphs Cars Icons

Cars Dock Icons created for free use.Now for MacOs X, and Windows Vista.Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

40.Neon light icon set

Neon icons for dark themes.Really a unique style.

41.Ipod Nano icons

A set of beautiful dock icons for MacOs X, and Windows Vista.Some rights reserved.

42.Ice cream and cake

Very delicious icons for your taste.Set of 15 icons.

43.Rave icon pack

Just another Collection of food icons.All the icons contained in this set are intended for personal desktop use ONLY. These icons MAY NOT BE REDISTRIBUTED, SOLD OR EXCHANGED FOR ANY GOODS OR SERVICES WHATSOEVER. By downloading this file you are agreeing to be bound by these terms of use.

44.Coca cola Family

Coca cola family pack available in PNG format.They look realistic and have great lighting. There are 3 different icons: diet coke, coca-cola classic, and coke zero, and you also get 3 separate icons with a bit of coke spilled around the base of the cans.

45.Mini breakfast icon (Cracked egg)

Anyone who wishes to use the icons are free to use them. with  some reservations please read this on source.

Origin and source for all icon packs:

• Icondock
• Iconshock
• Iconfinder
• Iconspedia
  
• 365icon
• Deviantart
• Dawghouse design studio
  

A big thanks for all the sources to help us to bring this Massive collection of Icon roundup including User interface icons and Social media icons :)

I have also made 25 social media icons for 1stwebdesigner readers. But take a look at the tutorial first, then you may download those icons for free.

1. Make A Rounded Rectangle

The size and the color of the rounded rectangle is completely up to you. In this tutorial, I am using 10px radius for the rounded rectangle.

2. Give Effects

3. Add Some Text & Logo

In this example, I am using Futura for “SUBSCRIBE” word and Verdana for the rest. Once again, you may choose your own fonts and elements to be added on the rounded rectangle. I used Futura & Verdana simply because they are my favorite fonts.

Please note that I am using RSS logo from Iconspedia, which can be downloaded for free here. Feel free to download it as it is free to be used on personal and commercial project.

4. Add Effect On The Logo (optional)

Do you notice that there is difference on the subscribe logo? This is optional one, you may apply this effect if you want.

5. Important!

Remember to remove background layer before saving your file as .png format. You must save this as .png format if you want to place your button on colored background.

Download PSD file & Fonts

I believe some of you want to apply this effect. I am providing psd file for all of you who wants to apply this effect instantly, without following steps that I’ve explained. I have also provided Futura & Verdana to be downloaded for free.

Some Example That I Already Made

These are some of the buttons that I have made using this cool effect. If you want to see where I used them, just visit my blog. I placed RSS and Twitter button at top sidebar. I have also used Stumble Upon button at the end of every article.

1WD Social Media Icons Pack By Albert Lie

Actually, not all of them are social media icons. I add some icons like friendster, blogger & skype just for fun only.

License: This icons are licensed under GPL v2. You are free to do anything with them. The only requirement is to keep them free for users. There is no attribution link needed and you are allowed to use them in your personal and commercial projects for free.

To promote your blog or articles in social media world you need a creative and unique icons and i am sure you will find your most favorite and suitable icons here to include them in your blog or website.

1. WHITE MAGIK – A Free Social Icon Pack

A clean set of icons from chethstudios.Re-distribution not allowed! White Magik is perfect for white minimalistic sites and can be used with image hover for excellent looks!. It includes 45 icons in .PNG format.

2. Elegant social media Icon Pack

Just another contribution from chethstudios. An elegant design icons. Well you’re free to use in your blog. But Please DON’T re-distribute.

3.3D Social media icons

This 3D Social Media Icon Pack comes with 20 icons which include your favorite social media websites such as Digg, StumbleUpon, Twitter and lot more from dawghouse design studio.Get the license details of usage from source.

4.Vintage post stamp icons

The set comes with 23 icons of your favorite social media sites, all in 200 x 200px and in transparent PNG formats. These icons would surely be a perfect fit for your vintage or grunge themed web designs!

5.Glowing social niche icons

Neat icon set.License usage :Creative Common license BY-ND

6.Social icons sticker set

Pretty nice icons. It’s a sticker type social icons.Available in .PNG, EPS and Ai format. Free for any use.

7.Social icons vector set

Consists of 16 popular social media icons, available in both vector and PNG (64×64 pixels) format. Free for any use.

8.Social icons pack by Sylwia Besz

Clear design icons.This work is licensed under a Creative Commons Attribution 3.0 License.

9.Social media icons pack from Blogperfume

Designed as a circular style. Available in 3 sizes (128*128, 64*64, 32*32).Please feel free to use Social Media Icons Pack on both personal and commercial projects. These icons are designed by Eli a south Australia web designer. They provided these icons in two parts.

10.Woven fabric social media icon set

This set contains 26 icons of your most favorite social media sites such as Digg, Delicious, StumbleUpon, Twitter, Facebook and lot more! These icons would be perfect for websites or blogs that uses textures or a grungy theme.

11.Social icons made of wood

Wood theme icons from webtoolkit4.me .The set consists of 11 icons in PNG format (64 x 64). It’s free for both personal and commercial projects.

12.Icon texto web 2.0 inside icon pack

Download this free Windows Vista icon pack for your Website or Application. 32 icons in .PNG format.It’s free! These icons are released under CC License Attribution-Noncommercial 3.0

13.Amazing 3d social icons

A brand new set that consists of 20 3D icons in PNG format (64×64 & 128×128pixels). It’s really an awesome icons.

14.Hand drawn social icons

Very cool and creative set of drawn, sketched social icons! Have fun with this one! Hope you enjoy them.

15.Worn out soda cans-social-icon-pack

The Worn-Out Soda Cans Social Media Icon Pack is free to use for both your personal and commercial projects.The icon pack once again features icons of our favorite social media sites in 200×200, transparent PNG formats.

16.Social media icons by plechi

Free vector social media icons.This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License. Designed by plechi.

17.Jeans-social-media-icon-pack

Great work and unique idea the designer.Free for personal and commercial use.the credit goes to nishad.

18.vector-social-media-icons

This free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format. Now this icon pack is updated recently.This icon set is released under is licensed under Creative Commons Attribution-Share Alike 3.0 Unported License.

19.Minimum-icon-set

This  minimum social media icon set.includes deviantart, delicious, flickr, Gmail, twitter.This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

20.Grunge peeling stickers social media icons

This Icon Pack is chuck full of 20 Grunge Peeling Social Media Stickers, This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

21.Iconshock’s free social icon pack

Smooth edge icons and a classy look.It’s a freebie from Iconshock.

22.Wooden badges icon pack

The icon pack contains web and social media icons such as StumbleUpon, Digg, Twitter and several others!.This icon pack is free to use for both your personal and commercial projects but may not be sold or redistributed in any way.

22.Icon pack with PSD

A full set of icons ready for use with mac and pc. Attached with PSD.

23.Social grunge icons

Grunge effect in social icons made in a elegant way.available in PNG format.Designed By: tydlinka

24.Networking and Bookmarking icon set

There are a total of 36 icons with 9 different Social Media – Networking  & Bookmarking sites.Of course this pack is going to be regularly updated and reorganized .License/Usage : Free for personal and Commercial work

25.Icons made with the type tool and helvetica

Helvetica social Icons that are 99% made with the type tool in Photoshop.
Everything is made with the type tool in Photoshop and variations of the Helvetica font.There aren’t really any typographical icons around the web like this icons.Free to download and use.

26.Social web button sets

There are 20 social web buttons in two sizes and two colors. Download is free.

27.Old bottle crowns icon set

The icon set consists of 20 very unique and never before created bottle crown icons such as Digg, Stumble Upon, Twitter, Delicious, Technorati and a whole lot more.These icons are free to use for both your personal and commercial projects but may not be redistributed or sold in any way.

28.Gummy-social-icon-set

29.Social trucks icon set

Social Truck Icon set consists of 10 social network icons; These cute icons are designed by Andrea Austoni . Andrea is an Italian freelance designer currently living in Krakow, Poland. He specializes in icon design and illustration.these icons are absolutely free and you are allowed to use them in personal or commercial project. Just don’t redistribute

30.32 Pixel Social Media Icons

Free for personal and commercial use.Cute design.

31.Web 2.0 Gift Icons by IconsPedia

This icon pack contains 14 icons, including popular social bookmarking services and our favourite browser  Firefox etc… The icons are available in PNG, ICO and ICNS format. They are free to use for both personal and commercial projects, including websites, templates & software. You are not allowed to sell or redistribute the icons anywhere else.

A Big treat from webtreat

In this below lists  you are going to view a massive contribution of webtreats.mysitemyway.com in social media icons.They have done a great work in social media icons! and these are high quality designs.

32.Glowing Neon Social Networking Icons

108 free high-resolution Glowing Neon Social Networking Icons. 2,000 more icons of this style will soon be released on ETC format.

33.Crystal clear bubble icons

It’s an updated set of icons including Drupal,Deviant art icons etc… They are free to download and use. 154 icons available.

34.Blue Chrome Rain icons

2000 more icons are available in this style in webtreats.

35.Orange grunge stickers

Wonderful orange social media icons in grunge style with some pop out effect.

36.Black paint splatter icons

No attribution necessary for these icon packs.Splatter effect in social media icons it’s a creative and unique concept from the designers.

37.Red and white pearl icons

38.Glossy black glass icons

20 web icons in .png format made with these styles, and a layered psd of the image below, which has editable text should you want to use this as a text effect.

39.Blue Jelly Social Media Icons

40.In-focus simple white icons

This matching set is designed to be put in the sidebar of your theme so you can link to your social media profiles.There are 10 more color variations for icon set is available.

41.Glossy waxed wood icons

42.Retro Grunge Stripes Social Media Icons

A classy look and these icons meet international standars.Retro Grunge Stripes Social Media Icons.

43.Crumpled paper social icons

A creative look for social media icons by this way.It’s suitable anything like grunge or crumpled themes.

44.Glassy space social icons

Just another beautiful glassy style icons.

45.Grunge-warning-stripes

46.Vibrant pattern icons

This vibrant pattern icons social media logos set includes the most popular social bookmarking and networking icons (Digg, Delicious, StumbleUpon  and Yahoo logos etc…

47.Twitter icons

Free set of unique twitter graphics.There really is no limit to what you can do with this brilliant set, lovingly designed by Pasquale D’Silva.The set includes 40 Files in total, all in transparent .png format.

48.Twitter icons by sibusinho

Really a cute twitter icon for your blogs or websites.Also only noncommercial use is allowed.

49.Twitter icons promo set

This breaks down to roughly 1,800 icons added to each existing set and 20 brand new sets! Here’s a little twitter promo pack with 53 twitter icons, one from each set!.

50.RSS cheese icon style

The set contains 4 high resolution RSS icons that come in four sizes: 512×512, 256×256, 128×128 and 64×64. Icons are completely free and can be used without any restrictions in any type of project including commercial projects.