Mar
4
2010

Making WordPress Logo

I was in a store the other day and walked by a sign with a logo that had an amazing shiny/metallic look to it. So, I whipped out my cellphone and took a picture of it. I spent a while trying to recreate the look but came up with something a little different. I applied that look to a WordPress Logo. This is how I did it…

For the best tutorials, Follow netglos @twitter and netglos.com

Step 1

Step  1: Draw a Circle

Before I start pretty much any Photoshop project, I drop a couple of guides on the canvas. A quick way to add two guides centered vertically and horizontally is to: create a new layer, fill it with a [alt+backspace], enter into Free mode [ctrl+T], then drag the guides to the center and they will snap into place. I then usually discard the layer.

Create a new layer and name it something like ‘Circle’.With the ellipse tool [U], draw a circle. Start at the center and drag outwards while holding [shift] and [alt] to make a perfect circle. The one I made happens to have a 560 pixel diameter.

With the ‘Circle’ layer and the ellipse tool still selected, choose ’ from the shape layer’ or [-]. Again, drag outwards from the center while holding [shift] and [alt] and make another circle with a smaller diameter to look like the example above.

Step 2

Step  2: Make the Circle Shine

Double click on the ‘Circle’ layer to add a overlay.

Step 2a: Gradient Settings

There is nothing scientific here. Just alternate between a very light grey to a dark grey. I used #333333 and #DADADA. You can play around with these settings to get the look you want. You may even want to come back to this step after the logo is finished to tweak the look a little.

Step 3

Step  3: Add Another Circle

Create a new layer and name it ‘Circle Top’. On this layer, use the same method that I described in step 1 and make another circle that is slightly smaller than the first one. This second circle should cover most of the one below.

Step 3a: Gradient Settings

Give this circle a gradient. I used a lighter grey, #686868, that fades into a darker grey, #181818, then back to the lighter grey. Use the settings in the example above. Again, this is nothing that needs to be exact. You can play around with the settings to come up with the look you like.

Step 4

Step  4: Add shine to second circle

Now to give this layer a bit of shine. Control click the ‘Circle Top’ to add a marquee around the circle. Create a new layer and call it ‘Circle Top Shine’. Select the elliptical marquee tool [M] then choose the ‘Subtract from Selection option. Then, remove part of the marquee selection so it looks like the example above.

Make sure you have the ‘Circle Top Shine’ layer selected and grab the gradient tool [G]. Modify the gradient so that is fades from white to transparent. Fill the selection with the gradient so that it looks like the example above.

Step 5

Step  5: create background circle

Create a new layer underneath the ‘Circle’ Layer and call it ‘ Circle’. Draw a circle with the elliptical tool [u]. Give it a gradient overlay that starts with a shade of blue and fades down to a darker shade of blue. I used the colors #394f78 and #0a0f14. I then gave the circle an inner glow. I changed the inner glow color to black and the blend mode from ‘Screen’ to ‘Normal’. Adjust the settings until you like how it looks.

Create a new layer above the ‘Background Circle’ layer and name it ‘Background Circle Highlight’. With the marquee tool [M], select a circle with the same technique you used to make the first two circles. While holding [alt] and [shift] drag from the center to create the first circle. Using ‘Subtract from selection’ cut out the center to leave a thin selection.

Using the gradient tool [G], choose white fading into transparency. Drag down on the top half of the selection, then drag up from the bottom half of the selection. It should look like the example above. The deselect [ctrl + D] the circle and give it a Gaussian blur of about 4.5 pixels.

Step 6

Step  6: Add shine to background circle

This is an easy step. Create a new layer above the ‘Background Circle Highlight’ layer. Name it ‘Background Circle Shine’. Using the elliptical marquee tool [M] draw an oval shape towards the top the the background circle. Use the gradient tool [G] with a white fading to transparency to fill in the circle. Change the layer’s mode to ‘Soft Light’.

Step 7

Step  7: Add the W

Finding the ‘W’ for the logo was a tough one. I ended up tracing it from an existing WordPress logo. You can get a vector version of the logo here. After tracing out the ‘W’, put it on a layer above the ‘Background Circle Shine’ and name it ‘The W’. Size it and place it so that the edges are just barely behind the circle layer above it.

Right click on the very first layer you made, ‘Circle’, and select ‘Copy layer style’. Then right click on the ‘The W’ layer and select ‘Paste layer style’. It should now have the same gradient as the first circle layer.

[ctrl] click the icon on the ‘The W’ layer to add a marquee around the W. Go to Select -> Modify -> Contract. Choose 3 pixels. The marquee will then shrink by 3 pixels.

With the ‘The W’ layer still selected and with the shrunken marquee selection, click [ctrl + J]. This will copy the marquee selection and make a new layer out of it. name this new layer ‘The W Top’.

Double click on the ‘The W Top’ layer to open up the layer effects dialog. Give it a gradient the fades from a light grey at the top down to a darker grey. I used #FFFFFF and #000000 and moved the scale slider up to 150%. Feel free to use your own method to create this look.

Step 8

Step  8: Add shine to the W

Ok, for the last step. We are going to repeat the same technique we used in step 4 to add a shine to the W. Create a new layer above the ‘The W Top’ layer and name it ‘The W Top Shine’. Now, [ctrl] click the icon on the ‘The W Top’ layer add a marquee selection. Use the elliptical marquee tool [M] to deselect the bottom half. Then, fill the selection with a white to transparent gradient.

Final Result

Badass WordPress Logo: Final Result

As a final touch I added a drop shadow to the ‘Circle’ layer.

You are done.

Sit back, relax and bask in your awesomeness.


  • Anon

    I can not see the pics. I only see f*cking elephants!!

  • http://Website 英文SEO

    Thank you for useful info. :-)

  • http://Website Christian Louboutin

    wonderful share, great article, very usefull for me…thanks

  • http://Website Wholesale polo shirts

    Nice content. Thank you for your information.

  • http://Website Police Sunglasses

    i have enjoyed reading thank for sharing your story Greeting.

  • http://Website sunglass armani

    great share, great article, very usefull for me…thank

    you

  • http://Website armani sunglasses

    Nice content. Thank you for your information.

  • http://Website louis vuitton bag

    Really nice and impressive blog i found today.

  • http://Website Gucci Sunglasses

    nice share, good

    article, very usefull for me…thank you

  • http://Website Burberry Sunglass

    This is an interesting article. Thanks for sharing.

  • http://Website Cartier Sunglasses

    Was an interesting article, thank you..

  • http://Website Chanel Sunglasses

    Good

  • http://Website Dior Sunglasses

    Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader.

  • http://Website Discount sunglasses

    Thanks for sharing this.

  • http://Website keylogger download

    Thank you very much for the information great post, found it on Yahoo.

  • http://Website sunglasses shop

    great experience, dude! thanks for this great

    Articles wow… it’s very wonderful report.

  • http://Website JassiMostru

    Hi
    Very nice and intrestingss tutorial.

  • http://Website electronic cig

    i really do agree with you

  • http://Website Christian Louboutin

    Thans

    for the nice post.

  • http://Website Christian Louboutin

    Thank you for useful info. :-)

  • http://Website wholesale sunglasses

    Nice article. Thank you for this info

  • http://Website WP Themes

    Amiable post and this post helped me alot in my college assignement. Say thank you you on your information.

Popular Posts