Photoshop Tutorial: How to Make a Web 2.0-Style Logo

This is the first of a series of Adobe Photoshop tutorials I’m going to offer on how to create a logo in “Web 2.0” style.

What do I mean by Web 2.0-Style Logo? If you follow Web 2.0 closely, you’ll see similarities in the way logos are designed: Simple, glossed, gradient, bright-colored and often came with a slight reflection and a beta sign just like this:

web2logo2

Pretty ain’t it? Here’s a quick 6-minute video tutorial I prepared:

Some notes:
1. In Adobe Photoshop CS, I started with a new 800×600, 72 pixel/inch document with white background.

2. The font I used for the ALLEBA text is Trebuchet MS, 80 point and hexadecimal color 3399CC. You may use similar fonts such as Arial, Tahoma or Helvetica. I used the same color to replace black for the gradient effect. I set the opacity of the reflection to 50% and that of the white gloss to 30%.

3. For the starburst (where BETA is written), you need to open Character Map (Windows only) via Start > Programs > Accessories > System Tools > Character Map. Switch to the Wingdings font where you can find the starburst that I used for this tutorial. Copy the starburst then return to Photoshop. Pick the text tool, click on the workspace and paste. You will initially see the “®” character. Highlight “®” then choose the Wingdings font from the toolbar. Set the size to 60 pt and hex color FFCC00. The two colors I used for the gradient are FFCC00 and FFFF66 at a 135 degree angle. I set the drop shadow to 30% opacity.

4. I created this tutorial for those who are already familiar with the common tools and functions of Adobe Photoshop CS. This is my first attempt in creating a video tutorial that took me 2 hours to come up with a decent version! If you have any questions or are looking for additional Photoshop training, I’d be glad to answer them here.

Update: Here’s the link to a higher resolution video of this tutorial.
Happy logo making!

103 comments

  5. Can you link us to a high resolution video to this? If you don’t have the b/w I can host it. It seems like a cool video but watching it from youtube isn’t the best way 😉

  8. An even better way to get the starburst in there is to use the built-in polygon shape tool… you can set the number of sides, size of the ‘spikes’, and even round the corners.

  10. Yet and even better way to get the starburst is to use Photoshop’s custom shapes. Click on the rectangle box to select Custom Shapes, then find the starburst in the toolbar at the top of the program. Very simple.

  11. Logo’s like that should be made in a vector drawing program. That way it’s resolution independant. I worked in the prepress and i had lot’s of work in redrawing 72dpi logo’s.

  12. nice work
    look up a program called macromedia (now adobe) Captivate.

    makes flash based video tutorials – very good – can be edited afterwards with full control, i noticed you said u had issues getting a nice video.

    my two cents

  14. I can’t believe this crap made it to digg
    You’re a hack amateur if you think for a second that decent logos are made in Photoshop. You are dead on about all of the principles of this style of logotypes, but any decent design would be made in a vector based program, and not a raster based program.
    News Flash: Photoshop is for Photos!

  16. @andy: Thanks for your suggestion. I’ll look that up!

    @Brandon: Hey, thanks. You will see more, no doubt.

    @Scott: It’s unfortunate (in a hack amateur way) that you think Photoshop is just for photos. News Flash. It’s NOT. A vast majority of web designers, digital artists and desktop publishers use Photoshop for their work. It’s just a matter of choice. I am aware that logos are better made in Illustrator if you want something scalable. To come up with something decent is another story — that takes talent. But if one wants to create a logo quick and easy, Photoshop is the way to go, and that is why I made this tutorial.

  22. Thanks for this generous effort to help us move our logo creation skills up a notch. I like the look of the tutorial… just can’t hear the sound. Is there any?
    Thanks. JNM

  23. So I have a question. What exactly does Photoshop have to do with Web 2.0? Web 2.0 is the whole idea of using JavaScript and similar technologies to make applications that run from your browser, nothing to do with designing at all.

  24. I think the Web 2.0 is a vague concept at best. In this situation it refers to the trendy “reflection”.

    And with the whole vector argument, anything done with text or shapes in Photoshop scales vector as long as you save your PSD.

  25. dude,
    thanks.
    this helped me for a quick logo i needed.

    but what the heck is being done in the last 10 seconds of the video? you use the rectangle select tool and then i have no idea.

  26. Uh, “web 2.0 logo”? WTF man. Web 2.0 is about technology, not graphics!! It’s about developing applications delivered via the web. Using things like AJAX. What are you SMOKING man?

  27. To ALL the Web 2.0 cynics … It’s just a freakin logo! JEEZ. I didn’t say “How to make a Web 2.0 app with Photoshop” right? Did I?? And RB, Web 2.0 is also about graphics, not just technology, dummy. If it wasn’t, then tell every single Web 2.0 startup to stop hiring designers. I’ll bet you a million they won’t listen to people like you.

  30. Wow – so many negative comments shows such insecurity and jealousy. Thanks for sharing. I wish more people shared their ideas and talents.

  32. Designer Scott is right. A real logo must be scalable, when your company grows you might want to put a big banner on a building 😛
    But there are many reasons to do the concept of a logo in a vector based software

  33. Thank you sooo much — I’ve been looking for a tutorial like this for a long time.

    And while I agree that any decent logo must be scalable, this is good for one-time use things, like making a wallpaper.

  35. hahaha! A web 2.0 logo! This is the funniest shit! Are you serious? Please people, develop your own design ideas.. There is no reason to follow the trend, its just going to change anyhow. A good logo comes from a strong brand and a strong brand exists before the logo. Take a mooment, evaluate what you are actually doing and then create a logo unique to you and your business. My 2 cents.

  36. Thanx dude,
    nice work…atleast you put some courage to help others and all the crap sayers are not like you… 🙂
    I am .NET developer and currently developing a independent project on the WEB 2.0 specifics and need some graphics lessons. Can you suggest some links where I can learn more on grapics design.

  37. all those peeps saying illustrator is best for logos…ok this is true but by using shapes instead of filled selections etc this logo is fully scalable and vector based, photoshop has come on leaps and bound as far as vector support goes, and yes i do work in print 😀

  38. To all you people who complained don’t be so f**n rude. This guy made the effort to try and share some knowledge (more than most can be bothered to do). If you dont like it move on…

    The web is a big place…

  39. Hey, thanx for useful tips 🙂 will try to apply it to some sort of work :))

    Im a fan of Adobe and devote much time to it…

  40. There are many uses for the Web 2.0 look beyond logos – I’m a secretary creating images to accompany a paper on JAK2 structure and mutation sites that is being submitted for publication in a hematopathology journal. It’s my belief that this look is best suited for illustrating exactly what my boss is doing, which is finding cures for cancer. I just knew that the “Web 2.0 Look” was what I needed to use. It ain’t just for web designs anymore!

    So thanks for the help!

  41. For all you retards that are stating “web 2.0 is all about the applications, not design”, you are showing your ignorance. Web 2.0 is not just about applications but a shift from old Web 1.0 methodologies into a much nice technologies and methodogies and with that comes a new look and correct me if im wrong but don’t you ‘design’ a look? So how bout you shut your douche kitty mouths and do some research before you open your shit stained mouths.

    Thanks

  42. Hey, it’s only about the logo and its style. You can call it any thing you want.
    Most businesss and websites claiming to use Web 2.0 uses logo design which is like candy, glass, 3d-look, etc. Like this one. This is why you can call it Web 2.0-style.
    It’s just a matter of naming.

  43. Thanxs heaps for the tip, I used it and by boss loved the style that it brought to our site. Saved us $500 bucks and took me 5min.

    Keep it coming

  44. MARK…

    Its just a logo. Im sure there are more important things in your life to deal with than how one persons perception of web 2.0 is different than yours.

    This logo tut. is fantastic and I have applied it to my newest site. Thanks Andrew!

  46. Nice tutorial, the only problem I had was that the wingdings star has really jaggedy edges, especially on large font sizes…is there any workaround to this?

  49. I was wondering why people design logo’s in Photoshop? The best method is create Illustrator logos, then convert then into PS bitmap formats for the web. This way, you always have a vector-based logo copy t use for print, web – and at any size.

Leave a comment

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