Start free
← Alleba Blog

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

Tutorials
Graphic Design
Tip of the Week
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 800x600, 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!

78 archived comments

Comments are preserved from the original blog and are now closed.

  • Miles Evans

    You got skillz Andrew. /me hits subscribe.

  • Martin

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

  • eviL3

    Very nice job! Awesome tutorial :)

  • Michael Müller

    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.

  • Rub3X

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

  • Schoolie

    Very nice. Please do more. Easy to follow.

  • kingofsf

    Cool now do a Gimp version.

  • Jon

    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.

  • Kyle

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

  • Michael

    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.

  • mutz

    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.

  • andy

    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

  • Brandon

    Don't listen to assholes like Kyle. It's good stuff, and I too would like to see more.

  • Designer Scott

    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!

  • WishBoNe

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

  • Andrew

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

  • Charles

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

  • Developer Bri

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

  • phat2

    what's happen friends ....

  • Realcho

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

  • alw

    Very nice tutorial.

  • JNM4

    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

  • dmsuperman

    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.

  • ImageMan

    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.

  • abhi

    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.

  • RB

    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?

  • Andrew

    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.

  • qianblogger

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

  • sudhanshu

    great Thanks a lot

  • Dan

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

  • b.art

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

  • Eddie

    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

  • Stephen Paul

    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.

  • Respiro the logo design guy

    This tutorial can be useful for a newbie... :)

  • drastic

    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.

  • dotnetcocoon

    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.

  • macman

    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

  • Richard

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

  • Iksanika

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

  • Susan Carley Oliver

    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!

  • Mark

    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

  • AGOSTO

    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.

  • Islander

    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

  • Ryan

    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!

  • SLOPJEPIT

    nice this style is just one of many style in web 2.0 design style hehehe :)

  • Adriaan

    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?

  • Justin Wong

    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!

  • Custom Icons

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

  • Andrew Kelsall

    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.

  • kral oyunu

    I loved it, it is pefect

  • lance

    Nice tutorial for a web 2.0 logo. Photoshop is really a great tool to create amazing web 2.0 logos.... RJ <a href="http://www.lancecorner.com" rel="nofollow"> lancecorner.com - tutorial blog </a>

  • Simon

    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.

  • Ray

    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

  • ravi

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

  • Dubai Web Design, Development

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

  • Rajita - Logo Design

    Superb Tutorial

  • Smart Pad

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

  • kriszha

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

  • Mena

    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

  • Soum

    Superb Tutorial mate.. Loved it really..

  • unicw

    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?

  • cristina

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

  • roren001

    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

  • Web Buckets

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

  • Ditmar

    good job

  • paul ryazanov

    great tutorial.

  • Photoshop Tutorial

    Nice tutorial! Hopefully it will help me at work! Slumberg (aka Turtles Slumberg)

  • psdlovers

    nice tut...thanks for the tutorial buddy.

  • Sandy Saini

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

  • pao

    thank you for sharing!

  • pao

    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

  • Ashely Adams : Sticker Printing

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

  • Clippingimages

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

  • legostarwars

    Nice tutorial! Thanks a lot.

  • Arif@photoshopclippingpath.us

    Good tutorial for a web 2.0 logo.

  • ludy

    Thanks for teaching.Nice work.

  • 류보람

    Tank U! 강좌 잘~보고가요 ^_^ 대성하세요 !

  • Ilya

    Goog tutorial, thanks!