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:
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!
Related Link: Adobe Photoshop Tutorials Thousands of free photoshop tutorials with new tutorials added daily
Bookmark at:StumbleUpon | Digg | Del.icio.us | Dzone | Newsvine | Spurl | Simpy | Furl | Reddit | Yahoo! MyWeb
November 18th, 2007 at 1:37 am
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
January 29th, 2008 at 2:53 pm
[...] Photoshop Tutorial: How to Make a Web 2.0-Style Logo»» [...]
March 10th, 2008 at 8:13 am
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.
March 11th, 2008 at 4:34 pm
[...] And this is the blog article with more detailed instructions http://www.alleba.com/blog/2006/09/26/photoshop-tutorial-how-to-make-a-web-20-style-logo/ [...]
March 16th, 2008 at 8:06 am
[...] consiglia un tutorial molto chiaro su Alleba.com con un video che illustra, passo dopo passo, ogni fase della realizzazione del logo, e anche un sito, FontShop, [...]
April 13th, 2008 at 2:04 am
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
April 21st, 2008 at 7:31 am
Thansk a lot…….
it is exactly what I was searching for. Awesome tut. thanks for sharing.
June 3rd, 2008 at 10:32 pm
[...] How To Make A Web 2.0 Style Logo – A simple yet effective Photoshop tutorial showing you how to turn your logo 2.0! [...]
June 7th, 2008 at 2:33 pm
[...] How To Make A Web 2.0 Style Logo – A simple yet effective Photoshop tutorial showing you how to turn your logo 2.0!. [...]
June 17th, 2008 at 6:24 am
Thanks for Such a nice tutorial. I will use this one for my web portfolio website. You gave a very nice shadow effect.
June 26th, 2008 at 10:09 am
[...] Alleba Blog (Video) [...]
August 1st, 2008 at 5:01 am
Superb Tutorial
August 4th, 2008 at 12:41 am
Thanks for sharing your knowledge. This is a great resource for those who want to design Web 2.0 web applications.
August 4th, 2008 at 3:42 pm
[...] Web 2.0 Logo Design Tutorial [...]
August 7th, 2008 at 6:12 am
…..you have done a good job sharing knowledge about web 2.0.i really appreciate it…..
September 13th, 2008 at 1:02 am
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
September 27th, 2008 at 9:04 pm
Superb Tutorial mate..
Loved it really..
September 29th, 2008 at 6:03 am
[...] Web 2.0 Logo Design Tutorial [...]
October 2nd, 2008 at 11:52 am
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?
October 15th, 2008 at 1:49 am
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..
October 16th, 2008 at 4:31 pm
[...] Alleba: How to Make a Web 2.0 Logo [...]
October 21st, 2008 at 6:31 pm
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
November 4th, 2008 at 8:50 pm
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…
November 17th, 2008 at 4:17 pm
[...] Photoshop Tutorial: How to Make a Web 2.0-Style Logo [...]
November 18th, 2008 at 2:44 pm
[...] 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. [...]
December 7th, 2008 at 9:58 am
[...] How to Make a Web 2.0-Style Logo [...]
December 9th, 2008 at 8:48 am
[...] Photoshop Tutorial: How to Make a Web 2.0-Style Logo [...]
January 14th, 2009 at 5:05 am
[...] YouTube – Photoshop Tutorial: How to Create a Web 2.0-Style Logo – [...]
February 11th, 2009 at 3:53 pm
good job
March 12th, 2009 at 2:57 pm
great tutorial.
April 27th, 2009 at 4:49 am
[...] How to Make a Web 2.0-Style Logo [...]
May 28th, 2009 at 9:14 pm
Nice tutorial! Hopefully it will help me at work!
Slumberg (aka Turtles Slumberg)
June 8th, 2009 at 1:25 pm
[...] Learn how to create a professional web design logo [...]
June 18th, 2009 at 8:09 pm
[...] Now, one thing I noticed in favicon.cc’s logo is that there is resemblance with a “How to create web 2.0 logo” tutorial I found months ago in the web. Well, if you are wondering how to do that visit Alleba’s tutorial on “How to make a web 2.0 style logo” [...]
June 28th, 2009 at 4:50 am
nice tut…thanks for the tutorial buddy.
July 8th, 2009 at 5:08 am
Really inspirational galleries gave me a few ideas for web 2.0-Style Logo and tutorials
job well done
July 29th, 2009 at 4:01 am
thank you for sharing!
July 29th, 2009 at 1:54 pm
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. 
September 18th, 2009 at 4:45 am
I was actually looking for a good tutorial for a web 2.0 logo. And your video tutorial is great. Thanks for sharing it.
October 7th, 2009 at 2:26 am
Great Post. It would be a great help for the beginners. Thanks for the post
November 4th, 2009 at 11:06 pm
Nice tutorial!
Thanks a lot.
January 2nd, 2010 at 3:52 pm
[...] a web 2.0 logo using Adobe Photoshop! Thanks a lot to Alleba for his great video guide! Visit this link and create your own web logo. It is much more easier than you can imagine! Below you can see [...]
January 4th, 2010 at 1:40 pm
[...] 13. How to Make a Web 2.0-Style Logo [...]
January 4th, 2010 at 4:56 pm
[...] Photoshop Tutorial: How to Make a Web 2.0-Style Logo [...]