Learn to create your own Web2.0 Logo 2006 09 19This is a simple tutorial on how to create Web2.0 logos. I use Adobe Photoshop CS2 for this tutorial. Enjoy! Step 1: Step 2: Step 3:
Step 4:
Next select the text object layer, then go to and click OK in the options window. Use the shortcut key CTR+SHT+I to inverse the selection. Select the layer "Bottom Text Gradient" and press the backspace key to delete the selection. Select the layer "Top Text Gradient" and do the same to delete the selection. De-select. Step 5: Step 6: Step 7:
Step 8: Step 9: Step 10: Final Product: Tags for this articleCommentsTeddy 2007 10 11 I just shot a load of cum in Lance's bum. settenx 2007 10 08 eyv. bilader saolas?n cokk makbull gecti. thanx bilo on 2007 09 15 nice tut.. Thank u very much .. Kalhua 2007 09 05 Thank you for this realy helpfull tutorial. I have finally managed to make a quite good logo. Check my post there is a link to the PSD file (CS2) : http://blog.jouardet.com/?p=12 aasdf 2007 09 04 ............................ dfgzdf 2007 09 03 fuck you Childiren 2007 08 11 ölümüne kankay?z jajajaj kanka saol çok güzel ^^ thanx.. 2007 08 10 2007 08 10 . upiter 2007 07 27 viagara cheap [url=http://viagra.beta-google.com/viagara-cheap.html]viagara cheap[/url] vigra side effects [url=http://viagra.beta-google.com/vigra-side-effects.html]vigra side effects[/url] viaga alternative [url=http://viagra.beta-google.com/viaga-alternative.html]viaga alternative[/url] viagrax is sildenafil citrate [url=http://viagra.beta-google.com/viagrax-is-sildenafil-citrate.html]viagrax is sildenafil citrate[/url] zenegra vigara [url=http://viagra.beta-google.com/zenegra-vigara.html]zenegra vigara[/url] viagara usage [url=http://viagra.beta-google.com/viagara-usage.html]viagara usage[/url] viagara internet sales [url=http://viagra.beta-google.com/viagara-internet-sales.html]viagara internet sales[/url] viagera drink [url=http://viagra.beta-google.com/viagera-drink.html]viagera drink[/url] zenegra voagra [url=http://viagra.beta-google.com/zenegra-voagra.html]zenegra voagra[/url] viagraa low price usa overnight delivery [url=http://viagra.beta-google.com/viagraa-low-price-usa-overnight-delivery.html]viagraa low price usa overnight delivery[/url] Ahmed Elmasry 2007 07 26 I love you! Awesome muxi 2007 07 09 THANK YOU! THIS WAY IS GREAT. I STUDY IS! Adriana 2007 06 22 Got a bit stuck on the gradient thing. But good tutorial! Even though I didn't step-by-step your tutorial, I changed some stuff and came up with my own! aksel 2007 05 30 this is great!thank you. Funny 2007 05 28 lydia 2007 05 07 hiya evey1 Sagheer 2007 04 30 Very Nice.....! Also Have a look... http://www.ewebcraft.com you can fine more tips over here. de jori 2007 04 25 lul Braulio 2007 04 23 Great tip and easy to follow. Thanks for clearing my doubts! [email protected] 2007 04 16 [email protected] 2007 04 16 [email protected] 2007 04 16 [email protected] 2007 04 16 PlaTnum 2007 04 13 I dont know what the others are talkin'bout but this Tutorial was great!!! It really shows you step by step,and its a great outcome. Thanks a lot!! -PL- friandise 2007 04 11 Please give us the .psd !!! Thanks a lot Annah 2007 04 03 CA MARCHE PAS! ?????? 2007 03 29 ????? ????... Ratzz 2007 03 01 Poor tutorial ... no imagination ... rezedent 2007 02 27 Awesome! Although I couldn't exactly follow your step-by-step, I think I got the same effect just seeing the image sequence... http://home.comcast.net/~boogersnotz/images/logo-2.0.jpg milka 2007 02 26 TRES MAL EXPLIQUER LE TUTOS serieux.. meme pas de source qui est fourni pour apprendre mieux .... nan perso tres mal expliqué. meme en etant anglais ou francais Evgeniy 2007 02 21 Cant reach step 5. I got this - http://img216.imageshack.us/img216/5222/untitled1wa9.jpg Rishi 2007 02 03 This is a really cool tutorial-but I had one question: I am using Photoshop 7.0 and I was having trouble merging all layers except for the background. Does anyone know how to select multiple layers to do step 8? Thanks in advance. francois 2007 01 30 and the psd example ?? where ??? me jy arrive pas ! Joseph DeVore 2006 12 04 Wow, people are crazy. Good tutorial Joe. Mr. Nicora 2006 12 01 I would hope that most people visiting this article realise this is a parody. For Chris Murphy, guy, settle down, it's a joke. Chris Murphy 2006 11 30 You have to be kidding me. This ranks right up there with the folks who collected a bunch of brand colors from popular sites and slapped a "Web 2.0" label on it. So I guess all I have to do to make a "Web 2.0" logo is treat up a bit of text with aqua effects; apply some reflections; and slap a goofy looking emblem with similar effects on it? Where's the thought behind that? Where's the concept? Where's the artistry? There is no such thing as a Web 2.0 logo - it's another cheap marketing buzzword that's doing mroe hard than good for the industry. Your techniques are solid, and there is quite a bit that people can learn from it, but to brand it as an easy way to create a logo (Web 2.0 or otherwise) is completely irresponsible. You're contributing to the clutter. jack 2006 11 30 I recently found a very interesting website: http://alreadylinked.com/ There you can purchase ad space for your Blog etc. Scott 2006 11 30 Originality surrenders! hapeap 2006 10 06 its cool! you give me an idea. Iggy 2006 10 04 Pretty cool tute! I like the star part. The lettering could do with a more subtle gradient though. Rosano Coutinho 2006 09 20 Hey I saw your comment on my blog. I like to see these types of tutorials but I think you over did it a little bit. You don't need all those drop shadows; just a reflection is more suited to today's style. I like the gloss though and thanks for pointing it out to me. BTW your anti-spam code is so friggin long man! It's not that readable either. Cut it down to about 4-5 letters max. \\End rant photoshopit 2006 09 20 Looks good to me, I have a similar one up here: http://www.photoshopit.wordporess.com (-; What is even funnier is that earlier today I just clicked on your link from DIGG.com - (i think it was digg) either way - "I digg it" Lance 2006 09 20 THANK YOU!!!! Leave a comment< Back |
Select the type tool and chose your font. For a real Web2.0 feel it would be wise to select either Trebuchet MS or something like Arial or Helvetica Rounded. Next select your text color, use something bright, I'll be using #0042ff. Type your Web2.0 logo text and set the size to 160pt, then center the text. 
Next we need a logo mark, I'll do something really simple, but as you'll soon see any simple mark will work. Select the Custom Shape Tool, then select the "flower 5" default shape. 
Using the shift key to constrain proportions, make a shape about the same size in relation to the image example I have. Select the Path Selection Tool, then right click in the shape and select "Make Selection". Set the feather radius to 0 and check anti-aliased. Next go to 
Arrange the two objects so they look similar to what I have shown in the image provided. The next step is to add the plastic wrap. 
Select the text object from the layer palette and go to 
Use the Gradient Tool to create a mask similar to the image provided, when content, de-select. 
Create a new layer and label it "Top Text Gradient". Select the Ellipse Marquee Tool, then create an ellipse over the text like in the example image. Once that is done, select the Gradient Tool and match your mask to the one in the example image. De-select the ellipse 
Repeat step 4 on the Logo Mark and try to get the same effect as shown in the example image. You may need to use a different ellipse shape depending on your Marks shape. 
Select the text object layer, right click and select Blending options from the context menu. Select Drop Shadow and change the settings to match the example image. 
Next select stroke and change the setting to match that of the example image. When finished, right click the text object layer and select Copy Layer Style. Select the Logo Mark layer, right click and select Paste Layer Style. You will need to go into this layer Blending Options and change the stroke color to match the Logo Mark. 
At this point you should have something loosely resembling the example image. Next we put on the finishing touches. 
Move all your objects into place, because the next step is to combine everything we have save the background into one layer. To do this, select all layers except for the background then use the shortcut CTL+E to combine the layers. Next, create a copy of the layer. You can do this by dragging the layer to the New Layer icon at the bottom of the layer palette Select the original layer and go to 
Select the copied layer, then the Move Tool and again use the shortcut CTL+T to bring up the transform tool. Right click then select Flip Vertical, hit enter. Holding down the shift key, use the Move tool to move the copied layer down to look like the example image. Next, move the Shadow layer to the first layer, just above the background layer and just before the original layer. Change the copied layers layer opacity to 40%. 
Create a new layer above the copied layer and then select the Gradient Tool. Use the Gradient Tool to create an effect to the finished image. Once this logo is placed on it's shiny table, you are done. 
Put a few more final touches on and you are really smokin' now! 
Blog