Creating a Web 2.0 Logo
By Michael in TutorialsI hear more and more people trying to create or attempt to recreate various of Web 2.0 Logos. Today we are going to use the basics of photoshop and our tools and attempt to create our selves a Web 2.0 logo.
So start with the basics by creating a background with a color-map.
You can just copy mine onto your photoshop to makes things easier.
Look over to your tool bar and grab the Elliptic Marquee Tool and create a nice dark circle using the first color out of the two boxes in the color map.
Now that we have the circle lets add some more parts to our logo. Grab your Custom Shape Tool and select the Rounded Rectangle and extended from the left side of the circle to the right. Make sure your Rounded Rectangle is underneath the layer of the Circle.
Now its time to put our rectangle into shape. Go to Edit > Transform > Select Skew. Once selected, skew the rectangle to the left until it comes to be something like this:
Now we are going to get to the fun part. You basically are looking at the blueprint of our logo so our job is to start detailing now every piece of it. We will begin with the circle. I will apply certain layer properties that you will copy directly. Please see below:
Now that are all settings are set, you get your results!
Okay the base of our Circle is complete and now its time to work on the “right wing” which is our rounded rectangle. Grab your Burn Tool, set it to size 15 air brush. Now the Range should be Mid tones and the Exposure should be set to 100%. Stroke through the bottom half of the wing once using merely the tip of the Air Brush and afterwards the top with the same style.
Now we are getting closer to home. Time to start filling in some text and do some touch ups!
Project complete! Hope you enjoyed reading this tutorial as much as i enjoyed making it. If you have any questions, feel free to drop a comment. I am always looking forward to help people achieve their goals.
Visit the forums today to request, ask, and talk about design!
Sajid Iqbal
Posted on November 19th, 2007
Very nice tutorial. I will try to implement this logo in my upcoming project.
Root
Posted on November 19th, 2007
Very nice and simple to perform! Well done!
Kez6
Posted on November 28th, 2007
It’s very nice 2.0web logo.
Thanks for tips.
Dude
Posted on November 28th, 2007
It’s nice, but what makes this a web2.0 button? I see these things everywhere.
Free Icons
Posted on November 30th, 2007
It’s web 2.0 as it’s simple, stylish and modern.
Great Tut - thanks for sharing
DM
Photoshop Effect
Posted on November 30th, 2007
Very nice tutorial ! I am sure going to use it sometime
Michael
Posted on December 2nd, 2007
Bart and NK, next time use constructive criticism, please!
Mr who
Posted on January 2nd, 2008
I would like to know what touch ups are and how to do them because I have no idea how to make logo symbols.
Mr who
Posted on January 2nd, 2008
and rate my base out of 10!!
[url=http://fileupper.net/uploads/1466fc0e32.psd[url/]
Mr who
Posted on January 2nd, 2008
oh no (im new to coding)
http://fileupper.net/uploads/1466fc0e32.psd
Michael
Posted on January 2nd, 2008
Mr. Who,
I would make the stroke a little more bigger say by 3-4px. Otherwise, looks great!
Aditya
Posted on May 11th, 2008
Hatsoff to all who write tutorials…you guys just don’t realise how MANY millions of developer and designer lives you save everyday with your lovely little power boxes of tutorials.
!!THANK YOU SO MUCH!!
Nhan T. D. N.
Posted on August 5th, 2008
thank you very much, it’s nice!