This post was originally published on ProBlog Design. It is a complete WordPress design tutorials that are very useful for both wordpress designers and bloggers who are interested in tweaking WordPress theme. That is why I decided to share this on myblog as I did not see any of you in the comment list and guessed you have not read this yet.

Image credit: ProBlogDesign.com

This is a huge and selective collection for your reference:

Making the ‘Clean Grunge’ Blog Design

Create Dark WordPress Theme

Tutorial RocknRolla Blog Design

Create a Nature Inspired Painted Background in Photoshop

Dark WordPress Theme Design

How I Learned To Build WordPress Themes

GreenPress WordPress Theme Design

Designing for WordPress: Complete Series & Downloads

WordPress Theme Web Design

Watercolored Design Studio Blog Layout

The Ultimate Grunge Design Tutorial

How to Create a Sleek and Textured Web Layout in Photoshop

Premium WordPress Theme Design Part 1 – The Photoshop Mock Up

MyBlues WordPress Style Layout

Building Custom WordPress Theme

Premium WordPress Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

Create a WordPress Theme

Winter WordPress theme

Creating a WordPress Theme

Design a WordPress Mockup Theme

How To Create WordPress Themes From Scratch

Chocolate Pro WordPress Style Layout

WordPress Theme Design in Photoshop

How to Create a Grunge Web Design in Photoshop

How to Create a WordPress Theme from Scratch

I hope you like this re-posted collection too!

P/S: You can also refer to my friend Toan post which is focused on How to Design a Wordpress Blog Layout which is very basic but helpful for those who are interested in design his own wordpress theme.

Source article: ProBlog Design Blog

Related posts

• WordPress 2.8.6 Security Release (0)
• Why Should You Use Thesis for WordPress Blog? (1)
• Violet Glow – ElegantThemes Premium WordPress Theme (0)
• Using Post Slug feature to Increase your SERP (0)
• Simplified [FULL] for Wordpress (0)

This roundup was gathered through a combination of top notch Google-ing and What the Font?-ing. Midway through my travels across the internet, I stumbled upon a Web 2.0 logo font roundup, which is worth a look as well.

You’ve seen these fonts, now you get to learn their names:

Twitter – Pico Alphabet (Modified)

Digg – FFF Forward (Modified)

Cork’d – Triplex

Vimeo – Black Rose

Grooveshark – FF Nuvo

Envato – Agenda Italic

Tuts+ Network – Lubalin Graph

Last.fm – National (Modified)

Technorati – Neo Sans Medium

Flickr – Frutiger Black

Purevolume – Avenir Book

Youtube – Alternate Gothic No. 2

Basecamp – Whitney

Facebook – Klavika (Modified)

Engadget – Engadget Font (Close Match)

Google – Catull BQ

Yahoo – Yahoo Font

Hulu – Futura MDd BT (Modified)

Bebo – Neuropol (Modified)

TMZ – Amelia

The ONION – Eagle Bold

Mapquest – Cheap Motel

Linkedin – Myriad Pro Bold

Skype – Helvetica Rounded Bold

Revision 3 – VAG Rounded Black

Hunted, Tagged and Released Back Into the Wild

For those of you wishing to be font pioneers and create or identify logos for yourself, I would highly recommend checking out What the Font? as well as our previous article 25 Font-tastic Type Resources for Web Designers. I’ve done my best to be as accurate as possible and link to the free font downloads when I could, but please let me know if I missed anything. Also leave your thoughts and comments below, I appreciate them.

Related posts

• Social Networking for Business Guide (0)
• Christmas Contest: 5 One Theme V2.0 Giveaways with License for Life (4)
• Use Twitter for Social Media Marketing (0)
• Use Twitter as a best SEO Tips (3)
• Twitter Tool: Who Are Not Following You & Who You Are Not Following (0)

Creating Our Document

[Ghosts-it.com] – For the purpose of this tutorial im going to be using a smaller background than you might use. Il be using 600 x 350 pixels, id recommed a nice big canvas size depending on how big you want your mouse. Create your a new document using your recommended settings, fill your background with a nice subtle color, nothing in particular just not white.

Drafting Out The Mouse

Select the rounded rectangle tool with a radius of 35 pixels.

Drag out a rectanglular path as big as you want your mouse to be.

Once you’ve dragged out the path to your rectangle select the pen tool from the side menu, right-click inside the rectangular path and go to “make selection”. Select the gradient tool with a radial gradient, using the colors #262a2d and #090f0d drag out the radial gradient.

Were now going to customize our rectangle’s shape with the warp tool, go to “edit > transform > warp” (if your using a version of photoshop before CS2 then the warp tool wont be available)

Once you’ve selected the warp tool transform the shape into your mouse. Drag the corner anchor points inwards towards each other, then drag the middle lines out towards the edges of the canvas. Your aiming for a bloated version of the orginal rectangle.

You should have something like this.

Cutting The Buttons

Duplicate your mouse layer then hide the duplicated layer as we’ll be using it later to create the mouses shadow. Select the elliptical marquee tool and make a selection around the top half of the mouse.

Once you’ve made the selection go to “edit > cut” then “edit > paste”. The top half of the mouse should now have been detached, re-position the top half of the mouse back to where it was cut from then add a gradient overlay using the settings below.

You should have something that looks like this.

Adding Some Mouse Body Details

Were now going to add some minor details to the mouse body just to bring it to like abit. Firstly lets add abit of noise to the mouse body, select the mouse body layer whilst holding the ctrl key on the keyboard this should load the selection. Once the selection has been loaded go to “filter > noise > add noise”.

Once the noise has been added keep the selection active. Select the dodge tool with a brush size of around 45pixels, change the exposure to 25%.

Gently brush some highlights around the top edge of the body, along the middle and towards the bottom. Check the image below for my result.

Next add a inner shadow to the mouse body layer using the settings below.

Lastly were going to add a stroke to the top half of our mouse body, to do this we need to load a selection around the mouse body, then go to “edit > stroke”, us the color #3f434a for your stroke. Once you’ve applied the stroke remove the stroke from around the sides and edges of the mouse leaving the top part.

Duplicate the stroke which is left then move it up by 1 pixel, color the new stroke black by adding a black color overlay.

Adding The Mouse Buttons

Select the rectangular marquee tool on a new layer create 3 single lines, color the first one #f8f8f9, color the middle one black #000000 then color the last one white #888a94. Place all 3 lines in the middle of top part of the mouse.

Add a layer mask to the lines then drag a linear gradient from the top downwards. The look were going for is to have the line faded at the top then gradually have it come back to normal as it reaches the bottom part of the mouse buttons.

Adding The Mouse Wheel

Select the rounded rectangle tool with a radius of 35 pixels, drag out a rectangle over the lines we created in the previous step.

Select the gradient tool with a radial gradient, set your foreground color to #4a4e55 and background color to #0d0d12. Drag the radial gradient from the top towards the bottom of the rounded rectangle.

Now add these layer styles to your mouse wheel.

Finally were going to add a second stroke around the mouse wheel, load a selection around your mouse wheel then go to “edit > stroke” change the strokes color to #a3a5ad. You should have something like this.

Adding The Mouse L.E.D

Select the circle tool or elliptical marquee tool and create a circle just below the mouse buttons on the mouse body.

Fill the circle with any color then add these layer styles.

You should have something like this.

Were now going to add a little light sparkle. Select the paint brush tool, then click the little black arrow where you select your brush and size. Inside this window there is another black arrow, click it then go to “assorted brushes”.

Now select the crosshatch brush from with the brushes window.

With the color white and a brush size of around 25 add the crosshatch in the middle of the L.E.D.

Once you’ve added the crosshatch remove two of the lines using your prefered cutting tool then add a gradient overlay using the settings below.

You should have something like this.

Finishing Up

Finally add your mouse brand or logo on the body of the mouse, you can use the warp tool to make the text slightly rounded. Unhide your duplicated mouse layer which we tooked away earlier, make sure its underneath all the other layers then add a guassian blur, blur by about 1.5 – 2 pixels. Set the shadow layers opacity to about 50% then move it a couple of pixels towards the right.

Thats it all done, you should now have something like the image above, BUT dont leave it there why not add a little bit more. Maybe a wire here and there or even the USB connection or even a different colored mouse.

You can download PSD Source of this tutorial here
Hope you’ve enjoyed this tutorial. Il look forard to your comments.

Related posts

• Tutorial For Make Money Online – Step 2: Blinkweb (1)
• Tutorial For Make Money Online – Step 1 (3)
• How to save the PC: A petition to Microsoft and Apple (0)