Skip to content

100 Creative Twitter Backgrounds Featuring Illustration

September 1, 2009

If you’ve ever created a Twitter account and customized it with some text, you would have discovered that the amount of text that you can display to describe yourself is very limited.

This is where designing, creating, and publishing a creative Twitter background and using it as your billboard comes into place.

Many designers and creatives utilize actual illustrations and images that will attract the viewers’ attention. By capturing a reader’s imagination in the process, illustrative backgrounds will most likely remain within their memory for a longer period of time.

Here are 100 creative Twitter backgrounds that feature illustration, that should inspire your own Twitter designs.

Farrhad
Twitter Background Image

Elite Styles

Twitter Background Image

Emily Chen

Twitter Background Image

Lee Maplesden

Twitter Background Image

Anousone

Twitter Background Image

Vonster

Twitter Background Image

Scott Clark

Twitter Background Image

Rogie King

Twitter Background Image

James Ridlo

Twitter Background Image

Twestival Jozi

Twitter Background Image

Krftd

Twitter Background Image

Jwhedon

Twitter Background Image

Andy Sowards

Twitter Background Image

Brian Paulwicz

Twitter Background Image

Lea

Twitter Background Image

Kiam Dean Art

Twitter Background Image

Paul Boag

Twitter Background Image

Jason Later

Twitter Background Image

Tony Chester

Twitter Background Image

Melissa Scroggins

Twitter Background Image

Brad Smith

Twitter Background Image

Sallid

Twitter Background Image

Brian Sweeney

Twitter Background Image

Aaron Miller

Twitter Background Image

Lorenzo Gabba

Twitter Background Image

Andrew Murphy

Twitter Background Image

Matt Davis

Twitter Background Image

Holey Coww

Twitter Background Image

Jen Parks

Twitter Background Image

Think Design

Twitter Background Image

Evan

Twitter Background Image

Graphic Identity

Twitter Background Image

Niko Bellic

Twitter Background Image

Adam Kayce

Twitter Background Image

Lizette Gagne

Twitter Background Image

CSS Girl

Twitter Background Image

Sean Carter

Twitter Background Image

Djuro

Twitter Background Image

Yahoo

Twitter Background Image

Mr. Tweet

Twitter Background Image

Ed Dale

Twitter Background Image

Technorati

Twitter Background Image

Silver-Solutions

Twitter Background Image

Vectips

Twitter Background Image

Just Tweet It

Twitter Background Image

Dark Motion

Twitter Background Image

Elitists Snob

Twitter Background Image

Divvoted

Twitter Background Image

Leeanne Lowe

Twitter Background Image

Best Deals (Amazon)

Twitter Background Image

Sean Boone

Twitter Background Image

Deuhlig

Twitter Background Image

Camiseteria

Twitter Background Image

Web Designer Depot

Twitter Background Image

Djambzov

Twitter Background Image

Giographix

Twitter Background Image

Local Hero Design

Twitter Background Image

LouPage

Twitter Background Image

Paul Miser

Twitter Background Image

Gareth Hardy

Twitter Background Image

Gerri Elder

Twitter Background Image

Must Have Menus

Twitter Background Image

Mail Chimp

Twitter Background Image

Maggie Summers

Twitter Background Image

Blink Interactive

Twitter Background Image

Nikolina

Twitter Background Image

Sophie Miller

Twitter Background Image

Nicholas Patten

Twitter Background Image

_a_n_d_y

Twitter Background Image

American Hell

Twitter Background Image

Desizn Tech

Twitter Background Image

Bryan Lagos

Twitter Background Image

mrGTB

Twitter Background Image

Adrian Herritt

Twitter Background Image

Sneh Roy

Twitter Background Image

Cyan Banister

Twitter Background Image

Michael Parenteau

Twitter Background Image

Juvincent

Twitter Background Image

Simona Buzatu

Twitter Background Image

Jan Cavan

Twitter Background Image

Patrick Ruddell

Twitter Background Image

Nalora Burns

Twitter Background Image

Kevin Dove

Twitter Background Image

Natalie-Anne

Twitter Background Image

Lynn Chyi

Twitter Background Image

Satyakam Misra

Twitter Background Image

Spurrachel

Twitter Background Image

Travis Bucholtz

Twitter Background Image

Charity Michot

Twitter Background Image

LBOI

Twitter Background Image

Jonathan Nelson

Twitter Background Image

Weird News

Twitter Background Image

Koko Hinson

Twitter Background Image

Riku

Twitter Background Image

Jolly Lizard

Twitter Background Image

Tucker Kimball

Twitter Background Image

Shirt Pizza

Twitter Background Image

Rob James

Twitter Background Image

Khai

Twitter Background Image

Karl Bastian

Twitter Background Image
var infolink_pid = 24649;

Create A Leopard ‘X’ in Photoshop

August 29, 2009

With the recent release of Mac OS X Leopard, I’ve decided to create a tutorial where you can create your own ‘X’. This tutorial is a great exercise in using the dodge and burn tool as well as working with selections.

WATCH THE TUTORIAL HERE

Set the stage. Take a dark photo will very little color so you can see the X in proper lighting. If the X were against a white background, it would be hard to see the highlights of the edges in the later stages of this tutorial. This desatuared Cosmos Wallpaper will do the job to achieve this.

Myraid Pro Bold

Type out the ‘X’

Take the text tool and type out the capital letter ‘X’. I’ve found that the “Myriad Pro Bold” font creates a close resemblance to the real X used in Apple’s artwork. Make the size of the X around 800 pt. (Remember, its always better to start large, then scale down when you are finished.) Set the color to the default black.

Gradient Overlay Layer Style

Gradient Overlay

Next, apply a layer style effect to the ‘X’. To access the layer style palette, with the X layer selected, go to the menu under Layer >> Layer Style >> Gradient Overlay. Set the opacity to 9% and the angle to -90 degrees.

Bevel Edge

Right click the ‘T’ corresponding to the text layer and choose “Select Layer Transparency”. Create a new layer above the X and fill in the selection with the color #4c4c4c. After that, go to Select >> Modify >> Contract… Contracting the selection will reduce the size of the selection similar to how a image transform would. Depending on how large you’re, you’ll want to change the contraction size, but the particular size I made the ‘X’, I’ll choose 3 pixels. Now with that new layer still select, hit delete so that the new layer trims around the ‘X’.

Trim

A small subtle trim will give the effect of depth.

Dodge & Burn Tools
Its time to take out the dodge and burn tools. These tools are very good for a situation like this because they won’t add any new pixels and the tools won’t harm layers other than the one that is selection. With both of these tools, make sure you use a brush hardness of 0%. This will stop any harsh lines created. It takes a while to get the setting right for the situation, but I’ve found the dodge tool works great at a Range of Shadows and Exposure at 21% (changes these in the options palette). For the burn tool, a Range of Shadows and Exposure set to 6% (yes that 6%, these tools need little exposure have an effect on the image). Add highlights and shadows to the trim layer just like you were painting on it.

Dodge & Burn
The dodge and burn tools should add perspective and proper lighting to the ‘X’.

Use the Selection Tool As A Mask
A great way to create an edge is to take the square marquee selection tool, and create along the crease of the ‘X’. Take the dodge tool and brush inside the selection, then go to Select >> Inverse and burn the other side.

Selection
Using the rectangle marquee tool is a great way to create edges at joints in the ‘X’ when using the dodge and burn tools.

Gloss

Last but not least is the large gloss reflection that will come across the X. Create a new layer and select the pen tool. With the paths option chosen from options palette, create a swoosh across the ‘X’ and close the pen path outside & around the ‘X’. Take the Path Selection Tool (the point just above the pen tool) and right click on the path and pick “Fill Path…”. Fill the path with white. Again using the “Select Layer Transparency” from the X text layer, create the selection and go to Select >> Inverse and delete the white outside the X.
Change the opacity of the gloss layer to around 40%. Create a layer mask for the gloss layer. Take a white to black gradient set to radial, and drag a gradient from the left side of the X where the reflection appears on the X to about 200 pixels past where the reflection leaves on other side of the X. With a large black brush set to 0% hardness (we don’t want any edges) brush along top left of ‘X’ to fade out some reflection.

Final Result
Final Result

Download PSD

Credits To

tutorialdog.com

Metal Text Effect

August 29, 2009
1: We’re going to try to get a really metallic chrome effect on our text, using curves and other features in Photoshop. Start off with a large canvas, the larger the better – I’m using 800×800. Make some text and have it a light-medium grey, in the example I’ll use #B3B3B3.

Start off by using a nice big bevel and emboss with settings similar to these. As usual, the size should be suitable for the size of the image; try to make it look like the example.

2: Now we need to rasterize our layer. Create a new layer by pressing ctrl/cmd + shift + N, then link the new layer with the text layer, and press ctrl/cmd + E to merge it. This will rasterize our text layer.

Now we need to adjust the image using curves – press ctrl/cmd + M to open the curves menu, then enter a nice even zig zag, as shown here.

3: Go Image || Adjustments || Variations, set the slider at the top to one notch from the bottom, and then click once on the ‘Current Pick’ box, once on the ‘More Blue’ box, and then once on the ‘More Green’ box – now click OK. Press ctrl/cmd + M again to open up the curves menu, and enter a slightly different curve like this.

Now add a drop shadow using the default settings by going Layer || Layer Style || Drop Shadow and clicking OK.

4: Now use the layer styles again (Layer || Layer Styles) to add an inner glow using these settings. Go to layer styles again and this time add a second bevel and emboss, with these settings.

For the next stage, we need to create a selection – hold ctrl/cmd and click on the main layer in the layers palette. This will select the letter/text – now go Select || Modify || Contract and enter a value of 3. Now go Select || Feather (ctrl/cmd + shift + D) and enter 3 again.

5: At the bottom of the layers palette, click the ‘Create New Fill or Adjustment Layer’ button – a circle half black and half white – and click ‘Gradient Map’. Click the arrow at the side of the dialogue box that appears (see thisimage), and load the file ‘Metals’. Apply the gradient in the bottom left (black > white > black – “Steel Bar”), then set this layer’s blending mode as ‘overlay’.

This should give a similar effect to that seen opposite. If not, try the tutorial a few times – there are several variables such as the curves input that can make quite a difference, and it takes some practise!

Credits To Psgallery.co.uk

Create a Spectacular Grass Text Effect in Photoshop

August 29, 2009

The End Effect

I like to begin tutorials by showing where we’re going. So without further ado, here is the final grass-text image click to see the full 1920px x 1200px size.

Part 1—The Background

This tutorial is made up of three parts—the background, the text itself, and some final extra effects. So first of all we’re going to make a background. To do this we create a new document in Photoshop. I made mine 1920 x 1200 because I want this image to sit on my laptop background.

We start by drawing a Radial Gradient with the Gradient Tool (G) going from a light yellow-green (#adbf41) to a mid-range green (#328a26). I wonder if I’ve ever written a tutorial that doesn’t start with a radial gradient.:-)

Step 2

Now for this image we want to create a really textured background, faintly resembling paper. So the first thing we need is … a paper texture!

Happily you can grab some really awesome grungy paper textures from Bittbox and they are nice and large too, which is good because this is a huge canvas.

So I can’t remember which texture I used first, but grab one, desaturate it (Ctrl+Shift+U) and stretch it over the top to fit the canvas.

Step 3

Now we set the layer to Overlay and 70% Opacity to blend the texture with our nice green background.

Step 4

Now to get a really distressed look, I then copied this layer, spun it around 180′ and set it to 20%. Then I brought in a few more layers of paper texture (using different textures, mostly from Bittbox) and set them all to faint overlays, one on top of the other.

This was partly for the extra distress, but also because I realised that the textures looked a bit grainy and not small and sharp. So by combining extra textures and then fading it all back, I can get a nicer, sharper overall look.

Anyhow as you can see in the screenshot there are six layers here. Don’t forget if you are a Plus member you can download the PSD file for this tutorial and take a look in there yourself!

Step 5

Now I duplicated the original background gradient, placed the duplicate layer above all the textures and set it to 40% Opacity—this tones back the texture so it’s not quite so grungy!

Step 6

Now we create a new layer over the top and using a large, soft, black brush, add some black to the edges. It’s worth toning back the opacity to about 30% and Overlay. You can then duplicate the layer and run a heavy Gaussian Blur over it (set to about 32px). That way the edges really soften out.

Step 7

OK, we now have a nice background!

Part 2—Grass Text!

OK, we are now ready to make some grass text. To do that, we’re going to need some nice pretty grass to cut. After a lot of searching, I finally found this lovely photo on Flickr of grass.

So download the image at full-size and copy it on to your canvas.

Step 9

Next we need some type. So select a font you want to cut out with. I chose Swiss 924BT, which is fat and condensed type. I thought it looked nice and grand. And I’ve written the text “EARTH”. That’s because I’m making five of these wallpapers—earth, water, fire, air, spirit … it’s like that cartoon I used to watch as a kid, Captain Planet!

Anyways, so just set your text out in white and set it to Overlay and like 50% Opacity. This layer won’t actually show in the end, it’s just a guide layer.

Step 10

OK, so here’s the text on top of the grass we got earlier.

Now a bit of planning! To make text out of grass, it’s not going to be enough just to stencil out the grass. Rather we need it to look all rough, with bits of grass sticking out the edges. To do that, we’re going to use the letter shapes as a rough guide and then trace roughly around them and periodically jut out to trace around blades of grass.

I’ll warn you now, it’s very tiresome!

Step 11

OK, so here we are tracing. You should use the Pen Tool (P) and frankly, if you’re not handy with it before you start, you will be by the end!

Notice how in the parts where my path juts out, it sort of follows individual blades of grass. That way when you have the final cut-out they will look like pieces of grass sticking out.

Step 12

When you’ve finished your path, it’s best to save it in the Paths Palette. You can do this by switching to that palette and then clicking the little down arrow and choosing Save Path. That way if you need the path again later, you can grab it.

Anyhow, double-click the path to get the selection and go back to your grass layer. Duplicate the grass layer so you still have more grass for the other letters, then invert your selection (Ctrl+Shift+I) and cut away the excess grass. In the screenshot I’ve faded back the duplicate grass layer so you can see the cut out “E” part.

Step 13

OK, so here we have our “E” on the final bakcground. As you can see, it looks only slightly better than if we’d just used the letter to stencil out the grass without bothering to trace. But that’s OK, what it needs is a bit more depth. After all, if that letter was really sitting there, we should see some shadow and sides to it.

Step 14

First of all though, we’ll add some layer styling to give it a bit more of a three dimensional look. The styles are shown below.

Layer Style

Here’s the first set of layer styles…

Step 15

Now duplicate that layer, then clear the layer style off the duplicate, so we can add some more styles. This time add the styles shown below…

Layer Style

Here’s the second set of layer styles… (Note that it’s 51% Opacity so it’ll blend in with the previous layer)

Step 16

So this was all just experimental, and it kinda looks OK, but obviously has a long way to go. Now we’ll add some shadow. For that we’ll use a technique that I demonstrated in a previous tutorial, Using Light and Shade to Bring Text to Life

The idea is to make a three dimensional look. So Ctrl-click the grass layer and then in a new layer below, fill it with black. Then press the down arrow once and the right arrow once and fill it again, then repeat over and over until you get an effect like that shown. I think that was about 15 steps of filling.

Step 17

Now we run a Filter > Blur > Motion Blur on our shadow with a 45′ angle and a distance of about 30. Then set the text to a low opacity of about 50%. You should have something that looks like the screenshot below.

Step 18

Now move the shadow layer down and to the right and magic happens! All of a sudden it looks like the letter is casting a shadow. Pretty neat!

Step 19

Now I duplicated this layer three times. Each time I erased a bit of it away so that as the shadow is closer to the text it gets darker. I set these layers to Multiply.

Step 20

So this text is looking pretty cool, but for that extra bit of depth we should add some bits of grass in the background/shadow area. Rather than cutting out more grass, we can just use this current letter transformed about so that it’s not obvious that we’re hacking it together.

So as you can see below I created a few pieces of grass. They are just cut up bits of our main letter.

Step 21

Now by moving those pieces into the shadow areas, we can make it look like there is grass sticking out and it’s a real 3D object made from grass!

Because these new grass bits are in shadow, you might want to use the Burn Tool (O) to darken them appropriately.

Step 22

So yay, one letter down … four to go! Good thing we didn’t choose a long word like erm I don’t know … laborious!

Step 23

Using the exact same technique … here is the A;

Step 24

and the R and T … you get the picture.

Step 25

And finally, the whole word! The only extra thing I did here was to move the letters apart a little. Each letter is in its own Layer Group which makes moving it around much easier.

Part 3—The Finish!

Now nice as it’s looking, our text is a little lonely and monotonous. So in this last section we’ll add a few more elements to the design. Note we don’t want to overdo it, though, because I want this to be a desktop background, so space it is important (for all my icons!).

So first up, let’s add some extra text. Here I’ve placed a nice quote about the earth and unity taken from the Baha’i faith (that’s my religion!). I love quotes, because it means we get three parts to decorate—the quote, the quotation marks and the source.

The text is in a variation of Swiss which is thinner, but still condensed. Using multiple fonts from the same family (heavy, light, etc) is a good, safe bet for keeping your type looking coherent.

So here I’ve set the quote to Overlay and 50%, then duplicated the text and set it to Screen and 50%. Then I’ve added quotation marks in the same Swiss font, but made them extra large and a bright shade of green. Finally, the source of the quote is in teeny letters and centered vertically. And, of course, the whole quote has been measured out so it’s exactly the length of the main “EARTH” text.

Step 27

Next we’ll add a bit of a highlight to the scene. To do this, create a new layer above all the rest, and using the Gradient Tool (G), draw a gradient of white -> transparent towards the top left. Then set this layer to Soft Light and 50%. This will turn it into a nice subtle bit of lighting.

Step 28

Now we’ll add two eye-catching elements to offset all the green. These will be a brilliant blue butterfly and a little red ladybug. I used the excellent everystockphoto Web site that searches a ton of free stock Web sites for you to find two awesome images to use: Ladybug | Butterfly

Step 29

Placing the images is pretty easy. First the butterfly. We just open up the image in Photoshop, use the Magic Wand Tool(W) to select all the white area, then go to Select > Modify > Expand and expand the selection by 1px to make sure we’ve got it all. Then press Ctrl+Shift+I to invert the selection and copy the butterfly over to our main canvas.

The ladybug I selected needs to be cut out of it’s image. To do that I used the Pen Tool (P) and traced around the little guy and then just cut him out that way.

Step 30

So here are our two extras. As you can see, the lady bug looks a bit weird actually because I did a quick’n’dirty job of cutting him out. But that’s OK because he’s going to be tiny so you won’t be able to see the details anyway.

So paste them in and then shrink them down and place them appropriately. It’s best if they aren’t close together, because that way they’ll balance each other.

I added a drop shadow to each. With the ladybug it’s a very close shadow because he’s small and walking on the grass. With the butterfly, I set the distance to about 10px because he’s hovering in the air and therefore the shadow lands a little ways away.

Finished!

And there we have it, one neat little composition featuring text made out of grass! (Click for the full-size version)

Credits to PSD.com

40+ Greatest Web Interface Design Photoshop Tutorials

August 28, 2009

Whether you kick off a web interface design by sketching on papers or blank Photoshop canvas, it’s good to get some guides and inspirations. Here we’ve compiled some of the nicest Photoshop tutorial that guides you, step by step, building up a web interface all the way from scratch.

Full list after jump.

  1. Beer/bar restaurant website layout

  2. Design a Web 2.0 tab with Photoshop

  3. How To Create a Stunning Vista Inspired Menu

    How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

  4. Creating A Cool 3D Web Design Effect

    Produce nice subtle 3D effects in our web designs.

  5. Hero Header I, II

  6. Create a Nature Inspired Painted Background in Photoshop

  7. Make the Viget Inspire Background

    An overview of how Viget Inspire background is put together.

  8. How to Create a Simple & Sleek Web 2.0 Site Footer

    How to produce a sleek looking site footer in Photoshop.

  9. Create a Sleek, High-End Web Design from Scratch

    High-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout.

  10. Tutzor web 2.0 style design

  11. Slick Blue Navigation

  12. Vista Style Nav Bar

    Create a navigation bar with a unique Vista Style

  13. Business Web Page

    How to create a web layout for your business.

  14. Create Chopper Layout

  15. Website Design Studio

    Learn how to create a professional website design studio. A step by step guide to creating a professional web layout.

  16. Create Real Estate template

    How to make nice looking web template for Real Estate site.

  17. Web 2.0 clean layout

    How to make a clean style layout with some basic tools with Photoshop.

  18. The Most Advance Game Layout

  19. Black stylish layout

    How to create a stylish layout.

  20. Sound System Studio Web Layout

    Create a nice looking sound system studio web layout.

  21. Royal Interface

  22. Professional Web Template

    Design a nice and professional web template in Photoshop

  23. Professional Modern Web Layout

    How to create a modern web portfolio layout.

  24. Professional header design for your website

    How to make a nice-looking and professional header for your website easily.

  25. Professional Design Studio Web Template

    Guide to design a professional web layout for Web Design Studio.

  26. Portfolio Web Layout Tutorial

    How to create a modern portfolio layout.

  27. Professional Blog Template Design

    A professional blog template design created in Photoshop

  28. Create Flickr Thumbnail Box

    Learn how to use the tools in Photoshop to draw a Flickr thumbnail box.

  29. Cool Photography Layout

    How to design a simple blue layout with Photoshop by combining shapes and layer styles.

  30. Personal Site Layout

    How to create a web layout for persoanl site.

  31. Modernistic Navigation Module

    How simple shapes and gradients can create elegant designs.

  32. Modern Portfolio Layout

  33. Interior Design Layout

  34. Graphic Design Studio Web Layout

    A simple and professional design studio layout.

  35. Glossy-Style Carbon Fibre Navigation Buttons

    Glossy, carbon fiber navigation set.

  36. Design Watercolor Effect Menu

    How to design a watercolor effect menu in Photoshop

  37. Design Studio Website

    A step by step guide to creating a professional web layout with a dark theme for Web Design Studios.

  38. Creating a Professional Business Layout

    Create a unique business layout using Adobe Photoshop

  39. Create a Dark Themed Web Design from Scratch

    Learn how to create a colorful design set against a dark background.

  40. Clean black & green web design

  41. Sketch Web 2.0 interface

    Draw yourself some graphical user interface for a website

22 Best Photoshop Text Effect Tutorials

August 28, 2009

Typography means a lot in any medium kind of presentation. Whether it’s a logo, banner or just a title; being able to inject creativity into it not only help in delivering the message across, it also leaves solid impression on the viewer. Good typography design is not easy, or should I say getting the type match and speaks for the product is often a very challenging job.

Here are some of the best Photoshop text effects tutorials on the web, and as usual it’s the creativity that counts. Full content after jump.

  1. ‘Bee Movie’ Text Effect

  2. Metal Text Effect

    Really metallic chrome effect.

  3. Grass Text Effect

    Cool looking grass-text effect using a photo of grass, the pen tool and a bit of patience.

  4. Leopard ‘X’ Effect

  5. Exploding Text Effect

    9 Steps in creating an exploding text.

  6. Reflective Liquid Effect

    Realistic text made from water drops.

  7. Slow Shutter Text Effect

    Learn how to create this stunning slow shutter text effect using just Photoshop.

  8. Flaming Meteor Text Effect

    Take typography one step further by having text falling from the sky in a burning inferno.

  9. Smooth Glass Effect

    Nice looking translucent glass type that’ll work great on any background, made completely with layer styles.

  10. Soft Stylized 3D Type

    Basics of creating polished 3D type using Illustrator and Photoshop.

  11. Fire Burning Text Effect

    How to use a photograph of fire to set text to the match.

  12. Text Graffiti

  13. Bling Text Effect

    How to make a realistic bling bling gold and diamond text.

  14. Supernatural Text Effect

    Creating a smoky night effect on text to give it an eerie supernatural sort of feel.

  15. 3D Typographic Effects

    How to add the wow factor to 3D text using Photoshop’s art tools.

  16. Chain Text

  17. Smooth Chrome Text

  18. Starcraft Text

    How to create a nice StarCraft style wallpaper.

  19. Advance Glow Effect

  20. Old School Type

  21. Grunge Rubber Stamp

    Simple method to create grunge brushes, and to detail how these brushes can be used to reproduce realism in our rubber-stamped logos.

  22. Swirl Text

    Useful for creating a unique logo for your website.


var infolink_pid = 24649;

40+ Hand-picked Photoshop Icon Designs

August 28, 2009

We know we can always count on the internet for free quality icons, but that being said, free icons sometimes might have it’s limitation too. Here’s few we can quickly think of:

  • Copyright. Most free icons restricts usage on non-commercial product/website only.
  • Size. Don’t you just hate it when you found your favorite icon but it’s only a 32×32 and you wish they have a bigger version?
  • Colors. You found the exact icon you want, but the color is just not right.
  • Transparency. Some author did not distribute their free icon in .PNG or original source. That makes it hard to implement their icons on our design.

Creating your own icon not only overcome above mentioned problem, at the same time you gain and brush up your photoshop skills. Nothing beats the satisfaction of creating things on your own. We’ve crawled the net, searching from sites to sites and here’s a 40+ hand-picked Photoshop tutorials that guide you through icon designing. Have fun.

You might also be interested in these following Photoshop articles we’ve previously published.

Full content after jump.

Adobe Photoshop CS3 Icon

How to quickly make a slightly altered looking Adobe CS3 Icon.

Angry Emoticon

Learn about special effects while converting an ordinary orb into a fantasy art piece.

Create a Glossy Home Icon

Learn how to design your very own glossy home icon in Photoshop

Perfect Shine Button or Icon

How to create a cool looking button or an icon to suit your need.

Create a High-Gloss Graduation Hat Icon Design

How to make a professional , shiny, clean graduation hat icon.

Create a Jaguar Style Folder Icon

How to cover an object in a Jaguar style fur texture.

Create A Mockingly Smiley

Simple way to create a glossy mockingly smiley in Photoshop.

Create a Shiny Lock Icon Design

Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use!

Create Icons tutorial

Create a glossy looking icons.

Creating a Cool Yellow Helmet Icon

Create a helcom icon from photograph.

Creating an XP Style Monitor Icon

Create a simple monitor icon in that style.

Design a Glossy Download Icon

You want the graphic to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. This tutorial will teach you how to create a graphic that does just that.

iTunes Icon in iPhone

This tutorial will show you how to effectively create the iTunes icon found on all iPhones and iPod Touches.

Draw magnifying glass

Learn how to create magnifying glass, which you can use it as button or as icon

Vista Aero Thumbnail Icon

Create the glossy border around most of Vista’s icons.

World Icon Tutorial

Create world icon in Photoshop.

Glossy RSS icon

In this tutorial we are going to create a colorful RSS icon for your blog.

Glowing Orb With Dial

Experimenting with layers and styles to create a cool glowing orb and dial effect.

Home Icon

In this tutorial, you will learn to create a home icon.

How to Make a Folder Icon

Learn how to create a nice folder for your desktop or a website.

Illustrate a Traffic Cone Icon in Photoshop

Drawing a traffic cone, another handy icon for “under construction”

iTunes Icon

The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon.

Mac Os X Mail Icon Style

Learn how to make the Mac OS X Mail’s icon in a easy way.

Making a Photoshop Shield!

Use the Path Tools in Photoshop to draw a shield-like shape.

Designing a Safety Icon

Design safety icon in Photoshop.

Pyramid Icon Design

How to use your pen tool to create a simple and easy triangular icon design that can be used as your logo or a bulletin.

Custom RSS Feed Icons

Two ways to make your Feed Icons custom.

Photoshop Video Game Mario Icon

How to Create Photoshop Video Game Mario Icon.

Recreate the Famous Yahoo! Smiley

How to recreate the famous Yahoo! smiley face.

Skype Buddy Icon

Learn to draw skype buddy icon with this tutorial.

Skype Logo

Learn how to create in easy steps logo for Skype.

Stylish Search Icon

Learn how to design a professional stylish search icon.

QuickTime Icon

Design Quicktime Icon in Photoshop.

Clock Icon

Create simple clock icon.

Mac Sphere icon

Create Mac Sphere icon.

The Making of an Icon

Insights into the process of making icons.

Creating a clock icon

Yet another clock icon tutorial in Photoshop.

TV Icon

In this tutorial, you will learn to create a tv icon.

Vista Error Icon

How to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients.

Vista Firewal Icon

Design a Vista Firewall Icon

XP Style Woman Icon

Learn to draw a xp style woman icon.

Follow

Get every new post delivered to your Inbox.