HV-Designs.co.uk

September 22nd, 2009 in Photoshop Tutorials by Richard Carpenter

PC Mouse Tutorial

• Share

Good evening everybody,…. today il be showing you how to create a PC mouse from scratch. Right lets get started!

You can download the PSD file for free.

Creating Our Document

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.

Hope you’ve enjoyed this tutorial, dont forget to re-tweet and digg. Il look forard to your comments.

• Share