Digg

Discover and share the best of the web!
Learn more about Digg by taking the tour.

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

alleba.com — This is the first of a series of Adobe Photoshop tutorials on how to create a logo in “Web 2.0″ style. 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. Here’s a quick 6-minute video tutorial and some notes.

Bury

ZaNkY 1 year 336 days ago, made popular 1 year 335 days ago

1668 diggs
digg it

Tixer, on 11/08/2007, -1/+45You could just use the Web 2.0 Logo Generator....

http://msig.info/web2.php

Cool though anyways
- Ninjab3ar, on 10/12/2007, -1/+11@ Tixer
  
  Your way is much easier.
- Haroldx, on 10/12/2007, -8/+5http://www.youtube.com/watch?v=-pOkaC4eHsE
  ^ Video from the site.
- ZaNkY, on 10/12/2007, -6/+12@Haroldx
  I posted the actual blog post however because there are vital notes there.
  
  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, I’d be glad to answer them here.
  
  --------------
  
  Tixer's method is much easier, but learning to do it in Photoshop is a useful skill that I'm trying to learn. Doing it in Photoshop gives you more control over the end result (So your logo doesn't look entirely like a clone of a clone of a clone...). Besides, if you look at the FAQ of the web 2.0 logo generator, it was meant as a joke! (a good one though)
- teknotant, on 11/08/2007, -1/+151) put on blindfold
  2) randomly paint on the canvas
  3) make it look glossy with overlays of white and emboss
  4) add a reflection
  
  done
- ecwpa, on 10/12/2007, -4/+3lol when i try http://msig.info/web2.php the first thing I type was "google" and when I see "Add BETA tag?" obviously cheek YES!
- parkerault, on 10/12/2007, -0/+5Web 2.0 is becoming a parody of itself. If I wanted my small business to be taken seriously, I would avoid these cliches at all cost. Abandon ship!
- mynamewontfitin, on 10/12/2007, -4/+1I made a similar tutorial a few months ago:
  http://pxlgfx.com/tutorials/Polished_Text/
  
  While it would be pretty lame to actually use this text effect alone as a logo, it's still good practice for Photoshop beginners.
- joelhardi, on 10/12/2007, -5/+4This *has* to be a joke. His logo is just way too identical to the Web 2.0 Logo Generator for it not to be. And the laugh is on all the people who'll now use Photoshop to create more of these me-too, hackneyed "logos." Enjoy wasting your time, copycats.
  
  How much more evidence do we need that Web 2.0 has jumped the shark?
iFrank, on 10/12/2007, -13/+10Thank God someone posted another Web 2.0 Howto. The 325982352398 posted on a daily basis is just barely enough for me.
- neoform, on 10/12/2007, -9/+5I can't wait till we can stop using all these retarded internet buzzwords that marketting people LOVE to use. Then again, they'll just come up with some new ones.
  
  ps. "web 2.0" is probably the stupidest concept ever.
- teknotant, on 10/12/2007, -8/+2@neoform
  
  You have a point but a lot of the Internet is built on buzz words.
- neoform, on 10/12/2007, -7/+2The internet was not built on buzzwords. Buzzwords are the creation or marketters.
MSTK, on 11/08/2007, -0/+18I have to admit, I chuckled when they stated that the Beta signs are a standard feature of Web-2.0 logos.
williamw, on 10/12/2007, -3/+4http://duggmirror.com
kbeeveer46, on 10/12/2007, -6/+150 diggs and it's down???
skryingbreath, on 10/12/2007, -3/+1Incredible.
ReadMeTXT, on 10/12/2007, -1/+10Stupid trend
- skoles, on 10/12/2007, -2/+9Seriously. Am I missing something special here? All these "Web 2.0 logos" are just text with a reflection and gloss on them.
haxorjoe, on 10/12/2007, -7/+2http://www.youtube.com/watch?v=-pOkaC4eHsE&eurl=
nopenope, on 10/12/2007, -3/+1i sound like a complete design snob/grandma/luddite but this is *****.
krazytom, on 10/12/2007, -0/+1can someone give me some sites that actually have logos like this? or is it blogs mainly? I've been to the web 2.0 logo generator (and it does exactly what this guy did), but I don't know of any major websites that have a logo like this
- burke, on 10/12/2007, -1/+2flickr? sort of...
sheemwaza, on 10/12/2007, -0/+2Try http://screamyguy.net/web20/web20.htm -- Page includes an automatic standard mirror generator and an improved version with a more realistic algorithm.
greymarketbrain, on 10/12/2007, -7/+4Stop masturbating to the term web 2.0 and these stupid glossy reflection logos. Take that time and spare hand and do some real cutting edge design instead of some pantie waste "2.0" ***** that looks exactly like everyone else's lifeless washed out craptacular Politically Correct waste of pixels.
- xeno439, on 10/12/2007, -3/+1amen to that. That this ***** made the front page raises my suspicions about gaming the system again.
- somebitches, on 10/12/2007, -1/+2Web 2.0 logos are fast becoming the cliche-filled crap they once replaced.
stockjones, on 10/12/2007, -4/+0Wait guys Web 3.0 is coming Web 2.0 is so old school.

Seriously, Im really tired of tech terms like web 2.0 and ajax.
- MeatBiProduct, on 10/12/2007, -2/+1web 2.0 is a term. Ajax is an acronym for "Ascynchronus Java and XML"
  
  oh yah web 2.0 is weaksauce.
- stockjones, on 10/12/2007, -3/+2I know, I just get tired of all the damn tech hype slogans, Remember terms like "push technology" and how it would change the way we use the web. Even words like Blog. For gods sake a blog is really just a personal web page where you post an opinion article etc and get response. Thats been around before the term blog even popped up.
- TriggReaver, on 10/12/2007, -1/+0The guy that came up with the term "Ajax" swears that Ajax is not an acronym for anything; just a term to refer to the technique. Although Asynchronous java-script and XML" does work.
unpossibly, on 10/12/2007, -0/+3I'm not sure, but maybe logo's should be designed to fit a company, not a web style. Hire a designer so you get a real logo, then tweak it for the web. But if you use this tutorial, you're probably too cheap to hire a designer anyways, never mind
kasted, on 10/12/2007, -2/+2just did the same thing in 1:29
http://www.youtube.com/watch?v=MymMvsCurFc
SpiraStudios, on 10/12/2007, -0/+3While there are certain design elements that are widespread among the "Web 2.0" community, the graphics and logos in general have little to do with defining that particular buzz word. Web 2.0 is much more about the sophisticated use of XHTML, AJAX and Databases and often has some focus on a community-driven content model.

While I object to your labeling of a logo design tutorial as "Web 2.0", I do appreciate and congratulate you for contributing a concise tutorial to those who might be interested in such things.
rovertly, on 10/12/2007, -1/+1no, it ain't pretty; it's stupid--just like you!
Eleo, on 10/12/2007, -0/+2Well it seems like this trend has officially been overused almost to the point of caricature. Time for a new visual fad, am I right?
Yodacola, on 10/12/2007, -0/+1I don't think logos should be derivative. I think logos should have more personality than a couple of gradients, a few reflections, and some text.
mutz, on 10/12/2007, -0/+1We'll you make your logo on 72 dpi... sigh... if you ever want that to be printed? Logo's that can be made in vectors should be created in illustrator/freehand/... and not in a bitmap program. But most people don't like the steep larning curve of illustrator.
- DOGPARTY, on 10/12/2007, -0/+1logos shouldnt have gradients full stop
msjacoby, on 10/12/2007, -0/+1Yes! Digging this story hastens the burial of the trend! VROOM!
abstraxion, on 10/12/2007, -0/+2Hey guys, want to drive up traffic to your website? Just add a "Beta" tag to your logo! Beta outdone you say? What about "Omicron"? Who cares about having a stable, full-release product or website when it's cool to leave ***** buggy and unfinished?
plagiats, on 10/12/2007, -0/+1Inkscape is sure more appropriate to create a logo. Just consider aligning the "beta" label and its sticker. Here the man do that by hand, in Inkscape it's automatic. Futhermore, Photoshop will produce a PNG that is not sized at its best.
xeno439, on 10/12/2007, -0/+1AJAX is not a marketing trend. It's not going to be buried like the word "extreme".
mrRB, on 10/12/2007, -0/+1He could have saved himself a lot of time by using adjustment layers, but most PS newbies would've been confused.
synoxis, on 10/12/2007, -0/+0Should submit this to http://darkscaler.com
JohnboiWaltune, on 10/12/2007, -0/+2You're a loser if you still use Web 2.0. I'm using Web 3.1 already. The icons are a little flashier but it's pretty much the same as 2.0, except it orders pizza automatically.
- andyatkinson, on 10/12/2007, -0/+1I'm using Web Core 2.0 Duo. It has hyperthreading and 2.0 MB of L2 Cache for each of the 2.0 processors. It makes AJAX JSON Java webapps fly, especially when they use JSP, JAX-RPC, REST, SOAP, Amazon ECS, EC2, and S3.
  
  Some people like me enjoy creating drawerings in photoshop just for the fun of it, like doodling really. Don't harsh the mellow man.
theadvinci, on 07/03/2008, -0/+1FINALLY... Now I know!

sarcasm
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

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

Login or register to add a comment