Archives for the 'Photoshop' Category

Web 2.0: How to make a badge! (in Photoshop CS2/CS3)

Whatever your reason may be, you have stumbled onto this page because you are interested in Web 2.0 badges. Before I begin, I must go over one thing: “What is Web 2.0″? To just put it out there, it is what came after web 1.0. It came after the first rush of internet technology came to pass, rose to the top, then declined because it was replaced with something better and bigger. It is how a few personal websites turned into blogging systems, or how some standalone advertisement was trumped by google adsense when they created their program. What does that mean when it comes to making a badge? Originally, web 2.0 did not mean much (if at all) until about 2004. In the ways of graphics, it means the ‘new look’ that people look for when creating websites. It is no longer static images or plain text. However, with this, there is also a sense of style and design that comes with it. There are examples

shown here of banners that were created for someone and how they were transformed into a web 2.0 image:

These are just a few examples of something you could easily do in minutes. It took me 3 minutes each to do that in CS2.

Ok. Onto the Good Stuff!

Step 1: Open up your photoshop program and create an image that is 150×150. Its time to make a badge. Ensure that that background is set to 100% transparent (however if not comfortable with this, set it to what you need to match the background of the site you are putting it on).

Step 2: Select the polygon tool on the side (Shown in Step 2a) and then ensure that you select the options that are shown in Step 2b (after clicking the down arrow to expand the options). (Note: The amount of sides and the % of indentation does not have to be as is, play around with these when you get a chance to)

Step 2a	Step 2b

Step 3: Select a color. Preferably a orange, yellow, green, or cyan-ish blue. then with the polygon tool selected, click (and hold) from the center of the image, outwards, until you complete and fill the space provided. At this point it should look somewhat plain looking. (Consider this web 1.0). Using this image, it would automatically create a new layer that is titled (Shape1 - or whichever shape you would be on at that point).

Step 4: Go to “Layer” at the top of the screen, then in the menu select “Layer Style”, a sub menu should appear and then click on “Blending Options” This is shown in the figure below:

Before	After

Step 6: Its time for the gradient. When you select the gradient, you should either play around with the Normal | Multiply |Overlay settings. For this part, I will do the easiest one. Normal. I will set a manual gradient color. By the time you do this, you can tell that it is looking a bit more ‘up to date’.

Settings	After

Step 7: Now its time to play around a bit with Dropshadows. There are various things you can do with this, with multiple approaches. I will show you mine. (again, I usually do badges within 1-2 minutes, and banners within 3-5). I am just showing you an easy way to do it ;).

Ok. The settings are below and the result is beside it! Looking good, eh?

Settings	After

We’re Done! You can do a few other things to tweak it here and there. You can add a glow to it (Shown Below) and of course, never forget the text. (The text usually is slightly rotated - you can do this by using the “free transform” tool found under EDIT at the top).

We went from:

Before	Example of a Completed Badge I did in 3 minutes:

We are Done!

Of course, that is a basic example, but if you ever wanted to know how to do them, then here you are. There are many methods and techniques to use while making Web 2.0 graphics. You have to test the waters. More tutorials on Photoshop to come! Stay Tuned!

9 December 2007 | Photoshop | 3 Comments

• Later Posts