Learn to create your own Web2.0 Logo 2006 09 19

Check out my latest project, Fuisti! Do more with Flickr!

This is a simple tutorial on how to create Web2.0 logos. I use Adobe Photoshop CS2 for this tutorial. Enjoy!!

Step 1:
Create a new Image document by going to File > New. From the options window select the dimensions 1000 x 1000 72 resolution and white background.

Step 2:

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.

Step 3:

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 Select > Modify > Expand. In the options window, expand by 8 pixels. Create a new layer and select a fill color. Again, choose a nice bright color. I'll be using #ff00ae. Fill the select, you can use the shortcut key CTL+Backspace. Use CTL+D to de-select. Label this layer "Logo Mark".

Step 4:

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 Select > Load Selection and click OK from the options window. Create a new layer and label it "Bottom Text Gradient". Then select the Gradient Tool. In the Gradient Tool options window, select white to transparent like in the image provided.

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

Next select the text object layer, then go to Select > Load Selection 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:

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.

Step 6:

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.

Step 7:

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.

Step 8:

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 > Load Selection. Create a new layer and label it "Shadow". Select the Shadow layer and fill the selection with black, you can do this by using the shortcut CTL+Backspace. Select the Move Tool, then use the shortcut CTL+T to bring up the transform tool. Holding down the shift key, skew the transform box to match the example image, hit enter when done. Adjust the opacity on the Shadow layer to 15%.

Step 9:

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

Step 10:

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.

Final Product:

Put a few more final touches on and you are really smokin' now!

Tags for this article

web2.0 tutorial graphidesign

Comments

William2009 01 26Great tutorial, Could you please have a look at the logo on www.webtiful.com, and give me some feedback via the email. Very much appreciate it.Regards

Steve2009 01 10Hi there,Can anyone tell me what the following procedure in step 4 is for?Next select the text object layer, then go to Select > Load Selection 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.Any idea will be appreciated!

space2008 12 13s

thai2008 08 15thanks alot!

raj lath2008 07 21ITs a great tutorial simple and effective

elisee2008 07 11Thankx guys, U help young ambitious guys from Africa like us to learn, thank you so so much...

Eli Bencosme2008 06 30That?s very cool, exacly what i need.

boomer2008 05 20http://techlib.net.ua/coding/php/

Shiya2008 03 09Thanks dear!!Its so useful, got some new ideas from this tutorial, thanks a lot.

Ed2008 03 09For the reflection and other image processing steps, you can use the online tool The Effect Generator:http://effectgenerator.com/blog/?p=11

Easemenom2008 03 01 http://groups.google.com/group/paydayloansadv/web/payday-advance-loans - payday advance loans payday advance loans http://groups.google.com/group/paydayloansadv/web/cash-advance - cash advance cash advance http://groups.google.com/group/mygoodvi/web/free-porn-video - free porn video free porn video http://groups.google.com/group/mygoodvi/web/rape-sex-video - rape sex rape sex http://groups.google.com/group/mygoodvi/web/incest-videos-free - incest videos incest videos http://groups.google.com/group/paydayloansadv/web/no-fax-payday-loans - no fax payday loans no fax payday loans

Dmitriy2008 01 08rate my logo at http://software-guides.info

Teddy2007 10 11I just shot a load of cum in Lance's bum.

settenx2007 10 08eyv. bilader saolas?n cokk makbull gecti.thanx bilo

on2007 09 15nice tut..Thank u very much ..

Kalhua2007 09 05Thank 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

aasdf2007 09 04............................

dfgzdf2007 09 03fuck you

Childiren2007 08 11ölümüne kankay?z jajajaj kanka saol çok güzel ^^ thanx..

2007 08 10

2007 08 10.

upiter2007 07 27viagara 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 Elmasry2007 07 26I love you!Awesome

muxi2007 07 09THANK YOU!THIS WAY IS GREAT.I STUDY IS!

Adriana2007 06 22Got 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!

aksel2007 05 30this is great!thank you.

Funny2007 05 28

lydia2007 05 07hiya evey1

Sagheer2007 04 30Very Nice.....!Also Have a look... http://www.ewebcraft.com you can fine more tips over here.

de jori2007 04 25lul

Braulio2007 04 23Great tip and easy to follow. Thanks for clearing my doubts!

[email protected]2007 04 16

PlaTnum2007 04 13I 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-

friandise2007 04 11Please give us the .psd !!! Thanks a lot

Annah2007 04 03CA MARCHE PAS!

??????2007 03 29????? ????...

Ratzz2007 03 01Poor tutorial ... no imagination ...

rezedent2007 02 27Awesome! 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

milka2007 02 26TRES MAL EXPLIQUER LE TUTOSserieux.. meme pas de source qui est fourni pour apprendre mieux ....nan perso tres mal expliqué. meme en etant anglais ou francais

Evgeniy2007 02 21Cant reach step 5. I got this - http://img216.imageshack.us/img216/5222/untitled1wa9.jpg

Rishi2007 02 03This 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.

francois2007 01 30and the psd example ?? where ??? me jy arrive pas !

Joseph DeVore2006 12 04Wow, people are crazy. Good tutorial Joe.

Mr. Nicora2006 12 01I would hope that most people visiting this article realise this is a parody. For Chris Murphy, guy, settle down, it's a joke.

Chris Murphy2006 11 30You 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.

jack2006 11 30I recently found a very interesting website:http://alreadylinked.com/There you can purchase ad space for your Blog etc.

Scott2006 11 30Originality surrenders!

hapeap2006 10 06its cool!you give me an idea.

Iggy2006 10 04Pretty cool tute!I like the star part. The lettering could do with a more subtle gradient though.

Rosano Coutinho2006 09 20Hey 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

photoshopit2006 09 20Looks 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"

Lance2006 09 20THANK YOU!!!!

< Back

Learn to create your own Web2.0 Logo 2006 09 19

Tags for this article

Comments

Leave a comment

Last.FM Recently Played