web-2-0-logo-design-photoshop-graphic-design-tutorial-4

Web 2.0 Logo Design – Photoshop Graphic Design Tutorial 4


In Category:
Intermediate Photoshop Tutorials


I hear more and more people trying to create or attempt to recreate various Web 2.0 Logos for their web design.  Today in this web design Photoshop tutorial, we are going to use the basics of Photoshop and our tools to attempt to create ourselves a Web 2.0 logo.

So start with the basics by creating a background with a color-map.

web-logo-photoshop-image-1

You can just copy mine onto your Photoshop to makes things easier.

Look over to your tool bar, and grab the Elliptic Marquee Tool.  Create a nice dark circle using the first color out of the two boxes in the color map.
web-logo-photoshop-image-2

Now that we have the circle, let’s add some more parts to our logo.  Grab your Custom Shape Tool, and select the Rounded Rectangle and extend it from the left side of the circle to the right.  Make sure that your Rounded Rectangle is underneath the layer of the Circle.

web-logo-photoshop-image-3

Now it’s 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:

web-logo-photoshop-image-4

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 can copy directly.  Please see below:

web-logo-photoshop-image-fifth1

web-logo-photoshop-image-fifth2
web-logo-photoshop-image-fifth3

Now that are all settings are set, you get your results!

web-logo-photoshop-image-5

Okay, the base of our Circle is complete, and now it’s 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.

web-logo-photoshop-image-6

Now we are getting closer to home.  Time to start filling in some text, and do some touch-ups!

web-logo-photoshop-image-final

Project complete! Hope that you enjoyed reading this tutorial as much as I enjoyed making it!


This Photoshop Tutor tutorial has been tagged with: , , , , , , , , , ,

Disclaimer | Privacy Policy