Creating a Modern, Glossy Mouse Icon in Photoshop
Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
This tutorial is about creating the Apple Magic Mouse in Photoshop, though you could use these techniques to create other mouse icon design styles as well. The new design of this mouse just looks amazing. Creating it and using it as an icon makes it all that more fun and interesting. The glossy look and the simplicity, transforms this mouse into a really neat looking icon. This tutorial will challenge intermediate level Photoshop user, so let’s get started!
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.
Tutorial Details
- Program: Photoshop CS3
- Difficulty: Intermediate
- Estimated Completion Time: 1-2 hours
Introduction
To create this icon we will mostly use the Brush Tool (B), and for adding shadows and lights the same Brush Tool (B) and sometimes the Burn and Dodge Tools (O). For defining the curved shapes you will use the Pen Tool (P) that will give you the most precise shapes.
After you are done with the creation of this mouse, you will be taken through the steps of creating the ICNS file or ICO file.
Step 1
First of all start by creating a new document by pressing Command + N and chose a width and height of 1000 px. Because the mouse will be created using white and black colors you will need to give the background of the document a color that will help you work better – in this case red was chosen.
Step 2
Next we’ll start to create the two principal shapes. We’ll add details over them later on.
First, create the upper shape using the Pen Tool (P), then make sure you have created a new layer. Now transform the Pen Path into a selection by pressing Command + Return and fill the selection with white as shown.
Step 3
And now that the upper part of the mouse has been created, you need to create the lower part. First create a new layer and place it below the white shape you just created, as this shape will be the support of the white shape. Use the Pen Tool (P) again to create the shape and fill the selection with #141414.
The Opacity of the white shape has been decreased so you can see what is going on behind it.
Step 4
Now that the actual shape of the mouse had been defined you will have to start adding details (shadows and lights).
Start working on the lower part of the mouse. Use the Dodge Tool (O) first and add some light like as shown.
Step 5
Double-click the black shape layer to enter the Blending Options menu and add a soft black stroke as shown.
Step 6
Duplicate the layer, but without the stroke you just created in Step 5. Use the Burn Tool (O) this time and start making the shape darker in some areas.
Step 7
Use the Pen Tool (P) next and create a 1px black stroke like below. Erase the right edge of the stroke to make it fade out.
Step 8
You have now finished working on the lower part of the mouse. Now it is time to start working on the upper part.
First of all, create some shapes to help you know how to section the shape. Use the Pen Tool (P) and create a shape like below. Now create a new layer and fill the layer with #929292.
Step 9
Create another shape again using the Pen Tool (P). After you create the path, make sure you create a new layer and fill the selection with #6d6d6d.
Step 10
Next add a simple shadow below the mouse using the black brush set to soft.
Step 11
Start adding the details on the upper part of the mouse, starting from the bottom section. Use the Burn and Dodge Tools (O) to create the shadows and lights.
Step 12
The next step is to add some texture to the bottom part because this section is created using a different plastic material than the upper sections. First create a new layer and fill it with white. Now go to Filter > Noise > Add Noise and use the settings below.
Set the layer to Screen and 30% Opacity.
Make a selection around the shape you are applying the texture by holding the Command key and clicking on the layers thumbnail. Now invert the selection and erase the excess noise.
Create a mask, and using the black brush set to a low Opacity, erase parts of the noise to make it blend in.
Step 13
Use the Pen Tool (P) and create a new shape like below. Fill the shape with #373737.
Step 14
Next create a new layer above the layer in Step 13. Use the Pen Tool (P) to create a 1px white stroke as shown. Erase the edges and some areas using the Eraser Tool (E). Set the layer to 80% Opacity.
Step 15
Now it is time to create the middle section of the mouse. I call it the Glossy Strip.
This section is made out of a different material and you will use different techniques to create it. First of all the layer is too dark and you need to make it lighter gray. Do this using the Dodge Tool (O. For creating those two shadows on the sides use the Burn Tool (O).
Step 16
Create another white stroke just as you did in Step 14.
Step 17
Create two nice looking reflections on the shape by creating two strokes into a new layer using the Brush Tool (B). Then go to Filter > Distort > Wave, and play with the settings there until you obtain the same result as shown below. Do not use the same settings you see in the image below, as the result might not look the same. Instead, try to play with the settings and experiment.
Step 18
Now that you have created your reflection add a mask. Use the black brush inside the mask to hide the edges of the shape. Set the layer to 46% Opacity.
Duplicate the layer and set it to 20% Opacity and Multiply. The difference is not very obvious, but what this does is make the reflection a little more visible.
Step 19
Create another reflection. Follow the same steps or maybe just duplicate the layer and place it in the right position.
Step 20
Next create a glossy effect in front of the shape. Do this by creating a white shape like below using the Pen Tool (P).
Use the Eraser Tool (E) on the edges to make it blend in.
Step 21
Now that you are done with the sections below it is time to work on the last part of this tutorial. First use the Burn Tool (O) over the white part to add some shadow.
Step 22
Use the Pen Tool (P) and create a shape like below, then fill the layer with black.
Set the layer to Multiply and Opacity to 8%.
Step 23
Use the Pen Tool (P) again to create a 1px white stroke over the lower edges of the shape. Erase the edges of the stroke using the Eraser Tool (E).
Step 24
Create a dark gray stroke on the top of the shape, then use the Eraser Tool (E) again on the edges.
In the end add the Apple logo over mouse and you are finished.
Creating the Icon
If you have a Mac the best way to create your icons is using the Icon Composer that Apple is giving away for free over at the Developer Page on their website. You will also find this app in your developer folder in the OSX installation DVD.
First save your mouse as a transparent PNG file, then import it into Icon Composer. Then simply save it as an ICNS or ICO file. The great thing about Icon Composer is that you can also preview how the icon looks on your dock.
Conclusion
You can view the final image below or view a larger version here.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Constantin Potorac
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Justo Resto Las Lomitas - Tipografia 3D - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Vaoww great detail tut. Very nice thanks.
Wow, nice icon. I really like the glossy look you achieved. THX!
http://resourcehive.com
really super and sleek , just love it
nice tut
cool>>>
That’s a very nice looking mouse!
nice icon but i really dont see they hype of creating these.
This is a wonderful, informative, and easy-to-follow tutorial, but I’m surprised that you didn’t keep your vector shapes and use layer masks, clipping masks, etc. to add the textures and highlights.
I do see the use for the Dodge & Burn tools, though, and I’m not sure how you’d achieve the same effect in vector, but it was just a thought!
Regardless, the final product is BEAUTIFUL and highly detailed! Thanks for sharing!
Amazing and really cute.
Nicely done
what a cool idea..
nice looking, although lil bit flat to me
The large version link was broken, but nice tut ^^
The magic mouse is an awful idea. Is Apple trying to get rid of all tactile button-press feedback from everything?
I have to agree. Although this comment deviates from the tut, Apple has never been able to create a usable mouse. The mighty mouse was a disaster, the old iMac round mice were only useful in the trash among others. Looks good from a design standpoint, but scores a 0 for usability.
I do not agree with you guys.
I think the new mouse is an innovation and not only that but it is better then the old ones we had. As you know they are trying to create the products better and better each time they even start thinking of a new design. I think this one is a lot better and do not forget the mouse still has the click button available.
I am happy you like it guys
personally i like the Microsoft’s mouses better than apples mouse by far
by the way the work probably buy by the way they look apple products are unstoppable
If you’d used the Magic Muse you’d know that it does still have a tactile click, it’s only the scrolling that’s touch-based.
Great Tutorial. Nicely Done
http://www.SmashingWebs.com
I’m of the almost religious belief, that this kind of composition should be done in vector, but nevertheless, this is an extremely good tutorial, with an amazing result.
Thanks for rocking my beliefs
Why not do this in vector?
I have found that so many designers don’t use the right tools for the right jobs. I bet most people don’t even know that you can do great textures in Illustrator.
my opinion is photoshop when you need raster work, then place raster work into illustrator or in-design. Workflow is vital. Using the whole creative suite has a lot more benefits then just having all the programs.
(sorry your tutorial got my rant, I just see this too often not to say something about it.)
maybe someone can reply to this and let me know a good reason to use photoshop for this kind of thing (vector illustrations, including 90% of all website graphics.)
(great looking illustration anyway)
you should relax with this type of fascist-like attitude. there is no one right “workflow”. i know illustrators and designers of great talent that work very differently and still efficiently. from using a tablet to using a mouse to photoshop to illustrator to fireworks, it doesnt matter. results do.
Wow, finally the good tutorials are back.
It looks awesome! Thumbs up for the AUTHOR! =]
sreertw
Looks incredible Constantin, great work as always friend!
Great Tutorial
constantin this is fantastic! very good!
amazing….. this is sooo detailed!
Very interesting and amusing subject. I read with great pleasure.
The thing I like the most about this tutorial is the little explanation at the end on how to actually turn it into an icon. The other tutorials teach you how to make the image whereas this one does that as well as teaching you how to make the image an icon.
Great work Constantin.
Brilliant….!!!
Super Frate
very cool tutorial. thanks.
http://www.cromoart.de
Nice detailed icon , thanks for the tutorial.
Very nice
Cool Icon! Very complex and detail! Great job
Mario Xiao
http://minisitebolt.com
Great details!
Cool
Fantastic
Great result, I’d like to see a vector tut
nice light effect
This is very nice. The mouse is simple but the rendering is very detailed. Good job.
For those who asked why this wasn’t done in Illustrator: this is a Photoshop website. Between Psdtuts+ and Vectortuts+ we can find all possible workflows for a lot of different designs. Let’s look at this as a great opportunity to cross workflows between applications: it helps us focus more on the actual design and less on the tools.
Thanks Constantin for yet another brilliant article.
Very nice outcome. Keep it up.
nice details and well explain it, i like the illustration tutorials, good mouse
http://www.mushtools.com
Thanks a bunch for the magnificent tutorial.
lets do it! i got apple magic mouse for christmas. Love it. Any questions, you got me at norm@aol.com.
hiiii
i love your icon. i have this mouse and it`s the best. regards
That is one sleek design, love what you have.
Very interesting!!!
is it possible to do using a mouse or do you need a tablet to achieve these precise and smooth shapes with the pen tool?
sorry about the newb question
This tutorial can also be created using the Mouse.
Awesome tutorials collection
your website is one of the Best tutorialswebsite on internet
Keep up good work
Good icon!
After played with PS for several years, it just kinda give me a feel that in the creation world there are only 3 things are the matter, they are 1 shadow, 2 black+white color 3 your original perception. This tut is the case. Great!!!
Sweeet! Nice tutorial, will be helpful to a lot of people. For anyone serious about photoshop check this out (USA only) http://bit.ly/psoffer