Create a Web 2.0 logo using Abobe Photoshop
May 11th, 2007
Here is an extensive tutorial on how you can create a great looking web 2.0 logo (like the one above that I created for the tutorial). Open Adobe Photoshop and create a new file (file>new): 4500×4000 pixels at 300dpi is a nice resolution to choose if you want your logo to be printable. It will be nice to choose this resolution also for this tutorial to have the same output with stroke points and other blending options that are affected by image size.
- Choose the type tool and type anything you want in uppercase (I typed Typpz as you see
). Duplicate the layer (right click on the type layer you created>duplicate layer). - Choose the new Type Copy layer (in my case Typpz Copy as I typed Typpz) and right click>blending options.
- Apply Drop Shadow, Inner Glow, Bevel and Emboss (with Contour), Gradient Overlay and Stroke with the setting you see in the screenshots below.
- Select the eliptical Marquee Tool and draw an eclipse like the one below. Create a new layer and fill the eclipse with white color (#ffffff) using the paint bucket tool. Set the opacity for the white filled eclipse layer to 30%.
- Choose the Type layer (not the copy one that you were working on in steps 2-3) and click edit>tranform>flip vertical.
- Using the move tool or your keybord bring the fliped layer exactly below the type copy layer, so letter ends are touching each other like in my logo and then right click on type layer>blending options and apply the setting for gradient overlay and stroke as you see them in the screenshots below. Set the layer opacity to 40%.
- Now lets create the beta drop. Choose the type tool and select the Windings font. Type shift+s and then right click on this layer (its name should be “S”)>blending options and apply drop shadow, gradient overlay and stroke as you see them below.
- Choose type tool and type beta (or anything you want) and place the layer inside the drop as in my logo. Change the text color to white (#ffffff).
- Select the Type layer (the typpz layer for my tutorial-not the copy one!) and select layer>arrange>bring to front.
Your logo is now ready. Here you can download the .psd source file (lower resolution than the one I used for the tutorial because the default file was huge) to see the result and help you build something similar. The colors I used for the logo are printed on the screenshots. Here is the second part of Web 2.0 logo creation tutorials.
UPDATE: Video guide for this tutorial is available.
Tags: design, logo, Photoshop, tutorial, Web 2.0, web designWeb 2.0 logo creation (video guide)
Create a Web 2.0 logo using Abobe Photoshop part 2
Create text logos using Adobe Photoshop
Digg effected!
Create a skype-like logo using Adobe Photoshop
May 11th, 2007 at 5:33 pm
Nice work, interesting workthrough – see you on iconbuffet
May 11th, 2007 at 8:36 pm
[...] About Create a Web 2.0 logo using Abobe Photoshop [...]
May 12th, 2007 at 8:41 pm
[...] days before, I wrote a tutorial on how you can build a web 2.0 logo with Adobe Photoshop. Here is another one for adding the reflection effect in a logo (like mine [...]
May 13th, 2007 at 9:02 pm
[...] the previous two days you may had noticed a slow down in our site. This was caused as the web 2.0 creation tutorial got dugg and stumbled. The huge blow was from stumble upon. We had 400 visits in one minute, which [...]
May 14th, 2007 at 3:15 am
[...] En este sitio nos muestran un tutorial para crear un logo al estilo Web 2.0, hecho con Photoshop: Create a Web 2.0 logo using Abobe Photoshop [...]
May 14th, 2007 at 12:22 pm
[...] El primero es un enlace a un tutorial para crear un logo al estilo Web 2.0, hecho con Photoshop: Create a Web 2.0 logo using Abobe Photoshop. [...]
June 3rd, 2007 at 8:57 pm
[...] is a second tutorial (here is the first one) for creating a Web 2.0 logo like the one above using Adobe Photoshop. Create a [...]
June 16th, 2007 at 5:02 am
Hey nice tut! Now if I didn’t have psp instead of ps I’d be a happy camera. Going to see if I can do the same though. Thanks for taking the time to create this!
June 16th, 2007 at 7:31 am
Awesome tutorial! Thanks for sharing!
June 16th, 2007 at 3:47 pm
[...] so kompetent, habe ich immer relativ schnell aufgegeben, wenn ich versucht habe, eines zu bauen. Dieses Tutorial bei typpz.com sieht aber ziemlich gut aus, das muss ich mir mal vornehmen, wenn ich Zeit [...]
July 3rd, 2007 at 8:21 pm
[...] Typpz.com: Sencillo, en pocos pasos obtienes un logo asi: [...]
August 13th, 2007 at 1:00 am
Great tutorial. But how do I save the image for use on the Web. 4000px is way too large, but I can’t figure out how to retain the same effect with a smaller pixel size suitable for a website logo.
August 21st, 2007 at 9:47 am
On Photoshop you click image>image size, put the image down to 500px for example and then click file>save for web and save to png or jpg file.
August 27th, 2007 at 10:01 pm
Are we free to use this logo on our websites?
August 28th, 2007 at 9:28 am
@grafix: As the CC License mentions, you are free to use the logo (by replacing Typpz text with your text) as long as you provide a link back here (attribution).
September 21st, 2007 at 12:18 am
Thats a really cool guide! Screenshots helped me a lot
Well done pals!
September 21st, 2007 at 12:19 am
[...] is a video edition of our Web 2.0 logo creation tutorial that you loved. Video is streamed via youtube as it is 8 mins long and would be hard for our [...]
September 22nd, 2007 at 6:05 pm
Really helpfull workflow. Helped me design my firsto logo (tried to design…
)
September 29th, 2007 at 11:20 pm
What Font do you use???
I tried the video tut but it wont load!!!!
Plz help.
Charlie.
September 30th, 2007 at 3:16 am
The font I used is a commercial one. You can find similar rounded fonts free for download here.
September 30th, 2007 at 8:06 pm
Thanks for the help,
I used a font called TANTOR and just stretched it upwards.
Charlie.
November 15th, 2007 at 2:55 am
Thats a great tutorial guys! Thanks a lot for sharing with us!
November 22nd, 2007 at 9:09 am
I couldn’t understand some parts of this article e a Web 2.0 logo using Abobe Photoshop, but I guess I just need to check some more resources regarding this, because it sounds interesting.
December 15th, 2007 at 2:24 pm
very interesting, but I don’t agree with you
Idetrorce
February 6th, 2008 at 4:44 am
These settings are way out if youre going to do a tutorial might as well give us the real settings !!!
February 6th, 2008 at 12:54 pm
@Jamie: Settings are exactly those that I used for the output you see
February 14th, 2008 at 9:17 am
[...] Create Web 2.0 Logotypes using Photoshop [...]
April 5th, 2008 at 12:49 pm
make more tutorials like this one please
April 11th, 2008 at 9:49 am
[...] Typpz Blog | Create a Web 2.0 logo using Abobe Photoshop [...]
April 21st, 2008 at 2:01 pm
Perfect tutorial!
May 1st, 2008 at 6:35 pm
Pretty simple.. Not a bad effect though… Although a layer mask on the highlight overlay might have made it a bit better looking.
May 3rd, 2008 at 7:49 pm
Nice tutorial thanks. What is the name of this commercial font? Please!
May 4th, 2008 at 1:12 pm
@Frank: Its called anja eliane and can be found for free (for non commercial use) on http://urbanfonts.com
June 4th, 2008 at 8:32 am
[...] Create A Web 2.0 Logo Using Adobe Photoshop – Another great Photoshop tutorial showing you how to create a generic Web 2.0 style logo. [...]
June 5th, 2008 at 8:42 pm
Excellent tutorial and just what I was looking for. I too am trying to save for the web, but have specific dimensions i.e. 360px by 55px, 55px by 55px – when I save, I lose the drop shadow and it gets incredibly pixely. Warning, I am new to all of this.
OK so new that why is everything now referred to as Web 2.0?
Cindy
June 7th, 2008 at 2:22 pm
@Cindy Before you save for web you should merge down all layers (all layers will become one layer) and you will not lose the shadow effect! This logos are modern and used in many web 2.0 sites, that’s why they are called web 2.0 logos!
July 10th, 2008 at 3:58 pm
can u let me known the easiest way to create the logo for a particular site . kindly provide us the softawre through which i can easily download the softawre and run accordng to it there task . kindly help me out to create the logo . once the logo is created how should i replace the original logon into the new logo.
August 23rd, 2008 at 7:14 am
[...] View the tutorial here… Care to share? [...]
August 31st, 2008 at 4:48 am
[...] Create a Web 2.0 logo using Abobe Photoshop [...]
November 4th, 2008 at 10:18 pm
[...] is an extensive tutorial on how you can create a great looking web 2.0 logo” typpz.com said best and they look the best [...]
December 9th, 2008 at 6:49 pm
[...] Create a Web 2.0 logo using Abobe Photoshop [...]
February 14th, 2009 at 12:37 am
Great tutorials. This is just what I’m looking for. I’d like to create a custom logo for my blog. Thanks.
March 19th, 2009 at 1:23 am
Nice logo, I will try to make this type of logo for my site. thanks.
October 12th, 2009 at 1:03 am
[...] Visit link: Create a Web 2.0 logo using Abobe Photoshop [...]
November 2nd, 2009 at 11:12 pm
[...] 9. Create a Web 2.0 logo using Abobe Photoshop [...]
November 3rd, 2009 at 8:31 pm
[...] 9. Create a Web 2.0 logo using Abobe Photoshop [...]
December 6th, 2009 at 12:46 pm
good work i wll use it at my site rhank you
December 11th, 2009 at 3:33 am
[...] 9. Create a Web 2.0 logo using Abobe Photoshop [...]
December 22nd, 2009 at 8:31 am
joss work
January 5th, 2010 at 1:57 am
[...] Create a Web 2.0 logo using Abobe Photoshop [...]