September 26th, 2006

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

written by Andrew

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!

Bookmark at: StumbleUpon | Digg | Del.icio.us | Twitter | Facebook

Posted in Graphic Design, Tip of the Week, Tutorials


  1. 97 Comments

  2. Miles Evans said...

    You got skillz Andrew.

    /me hits subscribe.

    Sep 29, 2006

  3. Martin said...

    Excellent graphics tutorial Andrew, really excellent. Please do some more.

    Nov 4, 2006

  4. eviL3 said...

    Very nice job! Awesome tutorial :)

    Nov 5, 2006

  5. Michael Müller said...

    Hi! I have written a tutorial for Fireworks myself at: http://www.mmcdesign.com/blog/2006/10/30/crea-tu-propio-logo-web-20/ in spanish though.

    Nov 11, 2006

  6. Rub3X said...

    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 ;)

    Nov 11, 2006

  7. Schoolie said...

    Very nice. Please do more. Easy to follow.

    Nov 11, 2006

  8. kingofsf said...

    Cool now do a Gimp version.

    Nov 11, 2006

  9. Jon said...

    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.

    Nov 11, 2006

  10. Kyle said...

    Wow, a terrible tutorial with a horrible end result. NICE.

    Nov 11, 2006

  11. Michael said...

    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.

    Nov 11, 2006

  12. mutz said...

    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.

    Nov 11, 2006

  13. andy said...

    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

    Nov 11, 2006

  14. Brandon said...

    Don’t listen to assholes like Kyle.

    It’s good stuff, and I too would like to see more.

    Nov 12, 2006

  15. Designer Scott said...

    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!

    Nov 12, 2006

  16. WishBoNe said...

    Thanks! I’ve been wondering how to do such things :)

    Nov 12, 2006

  17. Andrew said...

    @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.

    Nov 12, 2006

  18. Charles said...

    Your reflection is too much visible, it should be only 10%. It’s supposed to be like a window reflection, not like a mirror!

    Nov 12, 2006

  19. Developer Bri said...

    I love the use of the beta sysmbol. It wouldn’t be a Web 2.0 logo without it. :)

    Nov 12, 2006

  20. phat2 said...

    what’s happen friends ….

    Nov 12, 2006

  21. Realcho said...

    Мисли,Поговорки

    Nov 12, 2006

  22. alw said...

    Very nice tutorial.

    Dec 1, 2006

  23. JNM4 said...

    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

    Dec 5, 2006

  24. dmsuperman said...

    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.

    Dec 20, 2006

  25. ImageMan said...

    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.

    Dec 29, 2006

  26. abhi said...

    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.

    Feb 4, 2007

  27. RB said...

    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?

    Feb 19, 2007

  28. Andrew said...

    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.

    Feb 19, 2007

  29. qianblogger said...

    Thanks!! just what I need!
    much better than the free logo maker online

    Feb 27, 2007

  30. sudhanshu said...

    great Thanks a lot

    Feb 28, 2007

  31. Dan said...

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

    Mar 5, 2007

  32. b.art said...

    Great Tutorial. This has certainly helped. Keep up the good work here.

    Mar 19, 2007

  33. Eddie said...

    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 :P
    But there are many reasons to do the concept of a logo in a vector based software

    Mar 27, 2007

  34. Stephen Paul said...

    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.

    Apr 22, 2007

  35. Respiro the logo design guy said...

    This tutorial can be useful for a newbie… :)

    May 19, 2007

  36. drastic said...

    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.

    May 21, 2007

  37. dotnetcocoon said...

    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.

    May 21, 2007

  38. macman said...

    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 :D

    May 22, 2007

  39. Richard said...

    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…

    Jul 13, 2007

  40. Iksanika said...

    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…

    Jul 16, 2007

  41. Susan Carley Oliver said...

    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!

    Aug 20, 2007

  42. Mark said...

    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

    Aug 22, 2007

  43. AGOSTO said...

    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.

    Aug 24, 2007

  44. Islander said...

    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

    Sep 10, 2007

  45. Ryan said...

    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!

    Sep 14, 2007

  46. SLOPJEPIT said...

    nice

    this style is just one of many style in web 2.0 design style

    hehehe :)

    Sep 17, 2007

  47. Adriaan said...

    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?

    Sep 22, 2007

  48. Justin Wong said...

    Nice job putting together the video tutorial. We need things like this to make the internet keep up with itself. By the way, there’s a Fireworks version of this tutorial here:

    http://firetuts.com/index.php/2007/10/22/create-web20-logos-with-fireworks/

    Keep up the good work!

    Oct 22, 2007

  49. Custom Icons said...

    Mark is correct.
    Web 2.0 is about useability – that includes design and the looks of teh application

    Nov 4, 2007

  50. Andrew Kelsall said...

    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.

    Nov 5, 2007

  51. kral oyunu said...

    I loved it, it is pefect

    Nov 12, 2007

  52. lance said...

    Nice tutorial for a web 2.0 logo. Photoshop is really a great tool to create amazing web 2.0 logos….

    RJ lancecorner.com – tutorial blog

    Nov 18, 2007

  53. Simon said...

    I created my first Web 2.0 logo following your tutorial and it was a breeze.

    I am mentioning your blog and video in my blog so that more people can know about this.

    Thank you so much.

    Mar 10, 2008

  54. Ray said...

    Thank you so much for making the effort to create a most useful video tutorial. I am trying to discover the best settings for publication to YouTube so that I can create a series of tutorials myself. Can you tell me which video capture application you used and your settings please. Thank you again for your work.

    Ray

    England

    Apr 13, 2008

  55. ravi said...

    Thansk a lot…….
    it is exactly what I was searching for. Awesome tut. thanks for sharing.

    Apr 21, 2008

  56. Dubai Web Design, Development said...

    Thanks for Such a nice tutorial. I will use this one for my web portfolio website. You gave a very nice shadow effect.

    Jun 17, 2008

  57. Rajita - Logo Design said...

    Superb Tutorial

    Aug 1, 2008

  58. Smart Pad said...

    Thanks for sharing your knowledge. This is a great resource for those who want to design Web 2.0 web applications.

    Aug 4, 2008

  59. kriszha said...

    …..you have done a good job sharing knowledge about web 2.0.i really appreciate it…..

    Aug 7, 2008

  60. Mena said...

    Hi all,

    Could you pls help me in coming up with a logo for my catery. The idea I have is to have it with a persian cat in the background and then either around or ? have the catery name which is The Big 5. I know it’s asking a lot but can u come up with some ideas please!
    Thanks so much

    Sep 13, 2008

  61. Soum said...

    Superb Tutorial mate..
    Loved it really..

    Sep 27, 2008

  62. unicw said...

    This tutorial is good, however most logos are done in a vector program. Photoshop will import smart objects, but exporting is always raster. Have you considered trying this in Illustrator or Flash?

    Oct 2, 2008

  63. cristina said...

    umh, gud day…can u pls. help me to make a logo for our feasibility study..?? our hotel name is Ai shy hotel.. the word “Ai” came from the Chinese word love!!
    Thank a lot..

    Oct 15, 2008

  64. roren001 said...

    Not bad. Next time, save yourself some time and copy layer style then paste the layer style on to the other layer.
    Better yet, just do one type layer, then do your layer styles. Duplicate that layer, reflect. Done

    Oct 21, 2008

  65. Web Buckets said...

    Not that bad i think, it makes sense to me actually… but it would be nicer if you do more screen capture than just writing… but all in all nice post…

    Nov 4, 2008

  66. Ditmar said...

    good job

    Feb 11, 2009

  67. paul ryazanov said...

    great tutorial.

    Mar 12, 2009

  68. Photoshop Tutorial said...

    Nice tutorial! Hopefully it will help me at work!

    Slumberg (aka Turtles Slumberg)

    May 28, 2009

  69. psdlovers said...

    nice tut…thanks for the tutorial buddy.

    Jun 28, 2009

  70. Sandy Saini said...

    Really inspirational galleries gave me a few ideas for web 2.0-Style Logo and tutorials :) job well done

    Jul 8, 2009

  71. pao said...

    thank you for sharing!

    Jul 29, 2009

  72. pao said...

    it’s my first time to try this and it looks pretty nifty. thanks for the easy to follow tutorial. :) linked this entry in my blog. :D

    Jul 29, 2009

  73. Ashely Adams : Sticker Printing said...

    I was actually looking for a good tutorial for a web 2.0 logo. And your video tutorial is great. Thanks for sharing it.

    Sep 18, 2009

  74. Clippingimages said...

    Great Post. It would be a great help for the beginners. Thanks for the post :)

    Oct 7, 2009

  75. legostarwars said...

    Nice tutorial!
    Thanks a lot.

    Nov 4, 2009

  76. Arif@photoshopclippingpath.us said...

    Good tutorial for a web 2.0 logo.

    Mar 9, 2010

  77. ludy said...

    Thanks for teaching.Nice work.

    Jun 20, 2010


  1. 21 Trackbacks

  2. Top 50 Logo Design Tutorials » .: towerlight2002(dot)org :.

    Jan 29, 2008

  3. Web 2.0 in SEA » Design your own Web 2.0 logo

    Mar 11, 2008

  4. Come realizzare loghi in web 2.0 | QuickTips

    Mar 16, 2008

  5. 105+ Logo Design Tuts And Resources

    Jun 3, 2008

  6. Logo Design Tutorials And Resources | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması

    Jun 7, 2008

  7. The Best Web 2.0 Tutorials For Photoshop | Webmasters by Design

    Jun 26, 2008

  8. Belos sites… « ATer criacao de sites (11) 2527-3032

    Aug 4, 2008

  9. Liens utiles au developpement

    Sep 29, 2008

  10. Logo Design: 10 Links to Help You Design a Better Logo | Design Vitality

    Oct 16, 2008

  11. Best Tutorials If You Want To Design Your Own Logo | skyje.com

    Nov 17, 2008

  12. Professional Logo Design(How to reach to it through Tutorials ) | Skyje

    Nov 18, 2008

  13. Web 2.0 Tutorials -Episode 02: Logos, Logotypes | Greep It

    Dec 7, 2008

  14. 26 Logo Design Tutorials

    Dec 9, 2008

  15. Bookmarks for Enero 14th from 08:06 to 08:29 | FACIL TUTORIALES

    Jan 14, 2009

  16. Web 2.0 Guide and 2000+ Resources | CrazyLeaf Design Blog

    Apr 27, 2009

  17. DesignersWork // design resources

    Jun 8, 2009

  18. Easy way to create your website's favicon | Pinoy Balitaktakan

    Jun 18, 2009

  19. Web 2.0 Logo made with Photoshop! | fuckpeace.net

    Jan 2, 2010

  20. 50 Web 2.0 goodies. | Web Templates, SEO, Web Design Tutorials, Tips, Guides - DT Blog

    Jan 4, 2010

  21. 26 Logo Design Tutorials | Wise Startup Blog

    Jan 4, 2010

  22. Creando cosillas tipo Web 2.0 | Photoshopia

    Jun 16, 2010

Post a Comment