September 26th, 2006
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:
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!
Posted in Graphic Design, Tip of the Week, Tutorials
98 Comments
Miles Evans said...
You got skillz Andrew.
/me hits subscribe.
Sep 29, 2006
Martin said...
Excellent graphics tutorial Andrew, really excellent. Please do some more.
Nov 4, 2006
eviL3 said...
Very nice job! Awesome tutorial
Nov 5, 2006
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
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
Schoolie said...
Very nice. Please do more. Easy to follow.
Nov 11, 2006
kingofsf said...
Cool now do a Gimp version.
Nov 11, 2006
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
Kyle said...
Wow, a terrible tutorial with a horrible end result. NICE.
Nov 11, 2006
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
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
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
Brandon said...
Don’t listen to assholes like Kyle.
It’s good stuff, and I too would like to see more.
Nov 12, 2006
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
WishBoNe said...
Thanks! I’ve been wondering how to do such things
Nov 12, 2006
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
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
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
phat2 said...
what’s happen friends ….
Nov 12, 2006
Realcho said...
Мисли,Поговорки
Nov 12, 2006
alw said...
Very nice tutorial.
Dec 1, 2006
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
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
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
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
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
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
qianblogger said...
Thanks!! just what I need!
much better than the free logo maker online
Feb 27, 2007
sudhanshu said...
great Thanks a lot
Feb 28, 2007
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
b.art said...
Great Tutorial. This has certainly helped. Keep up the good work here.
Mar 19, 2007
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
But there are many reasons to do the concept of a logo in a vector based software
Mar 27, 2007
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
Respiro the logo design guy said...
This tutorial can be useful for a newbie…
May 19, 2007
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
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
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
May 22, 2007
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
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
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
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
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
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
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
SLOPJEPIT said...
nice
this style is just one of many style in web 2.0 design style
hehehe
Sep 17, 2007
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
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
Custom Icons said...
Mark is correct.
Web 2.0 is about useability – that includes design and the looks of teh application
Nov 4, 2007
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
kral oyunu said...
I loved it, it is pefect
Nov 12, 2007
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
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
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
ravi said...
Thansk a lot…….
it is exactly what I was searching for. Awesome tut. thanks for sharing.
Apr 21, 2008
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
Rajita - Logo Design said...
Superb Tutorial
Aug 1, 2008
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
kriszha said...
…..you have done a good job sharing knowledge about web 2.0.i really appreciate it…..
Aug 7, 2008
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
Soum said...
Superb Tutorial mate..
Loved it really..
Sep 27, 2008
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
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
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
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
Ditmar said...
good job
Feb 11, 2009
paul ryazanov said...
great tutorial.
Mar 12, 2009
Photoshop Tutorial said...
Nice tutorial! Hopefully it will help me at work!
Slumberg (aka Turtles Slumberg)
May 28, 2009
psdlovers said...
nice tut…thanks for the tutorial buddy.
Jun 28, 2009
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
pao said...
thank you for sharing!
Jul 29, 2009
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. 
Jul 29, 2009
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
Clippingimages said...
Great Post. It would be a great help for the beginners. Thanks for the post
Oct 7, 2009
legostarwars said...
Nice tutorial!
Thanks a lot.
Nov 4, 2009
Arif@photoshopclippingpath.us said...
Good tutorial for a web 2.0 logo.
Mar 9, 2010
ludy said...
Thanks for teaching.Nice work.
Jun 20, 2010
류보람 said...
Tank U!
강좌 잘~보고가요 ^_^
대성하세요 !
Aug 27, 2010