Lets start with a 350×200 blank document. I filled it in with white. To start getting the shape of the widget, lets go ahead and make 2 circles that are identical in size.
Next, using the rectangular marquee tool, fill in a rectangle to connect the two circles.
Add in the following layer styles. Note that in the gradient overlay, it fades to an extremely light gray, not white.
Duplicate the shape that you have now created and resize it using Transform (Cmd+T) so that it looks like the following image.
Add the following layer styles. Note that I am not giving the hexadecimal codes. This is because I want people to try and replicate this with different colors. If you are trying the green, just eye-ball the gradient – it doesn’t need to be precise.
Hopefully you now have something that looks like this:
Select the green zone by Cmd+Left-Clicking the thumbnail image in your layers palette.
With the rectangular marquee selected, hold down the ‘Alt’ key and drag the selection over the bottom half of the green zone. This will remove the bottom half of the selection, like so:
On a new layer, fill the selection in with white and drop the opacity down to about 40%.
Next, using the elliptical marquee, hold down ‘Shift’ and drag out until you get a circle that fits into the widget’s base. Fill this circle with any color.
Add the following layer styles. Take note that in the gradient overlay, make the colors the same as the base to your widget. This make it blend in.
Your circle should now look like this:
Duplicate your circle layer and transform it so that looks like this:
Next, make a small circle in between the two rings. Fill it with any color.
Add in the following layer styles to the small circle.
Next, using the elliptical marquee, make a circle that fits inside the inner ring so that you can barely see the ring. Fill it with any color. Mine looked like this:
Add in the following layer styles.
My iTunes widget now looks like this:
Now make a smaller circle in the center of your rings. Fill it with any color.
Apply these layer styles. Note that in the gradient overlay, the colors do change. It goes from a slightly darker gray to a slightly lighter gray. Sorry if it is hard to see on your screen.
Next I used my custom shape tool (U) and chose this arrow shape:
Using the rectangular marquee, I removed the back half of the arrow.
Then I added the following gradient overlay. Again, take note that the gradient goes from a slightly darker gray to a slightly lighter gray. I apologize if it is hard to tell on your screen.
My widget now looks like this:
Next, I duplicated my arrow layer twice and transformed them into much smaller arrows. I then placed them together to create the “fast-forward” button.
I duplicated my fast-forward arrows and flipped them horizontally to get my rewind button.
In the green zone, using the rectangular marquee, I created a small bar and filled it with the color code “aacc34″ to get me this:
I then added a small circle on top of that bar using the elliptical marquee. I filled it in with black.
I then added these layer styles:
To finish things off, I put in some black text for an artist, a song, and time. I lowered the opacity of the text to about 54%.
Here is the same widget with a slightly “shinier” widget base and a lighter “button” area. If you like this better, just make the gradient for the base fade into a very light gray and make the circle containing the play, fast-forward, and rewind buttons a white color.
Well there you go. If you followed the steps carefully, you should now have something that looks darn near identical to the iTunes widget that is found in the Dashboard for all Mac users. I hope this tutorial showed you some neat tricks that you can use later on down the road and hopefully gave you some creative inspiration.
.
I would be interested in seeing everyone’s variations on this tutorial. If you create this widget, see what spins you can take on the design and then comment here with a link to your creation. I’ll be giving the best modification a little bit of link love in my next “Saturday’s Sources” post.Enjoy!
For more Photoshop tutorials check out the new tutorial site, The Tutorialist.
Gary R. Hess
January 4, 2008 at 2:04 pm
Nice tutorial. I’m sure someone will find a very good use for it.
Brian
January 4, 2008 at 3:04 pm
Thanks a bunch Gary. I hope so
Helpfull Hand
January 5, 2008 at 7:13 am
Very nice result.
My compliments on using .png images, now i was able to get the correct colors from te pictures because there is no compression. But would you plz type the colors next time? Thats easier.
Brian
January 5, 2008 at 11:14 am
Thanks Helpfull Hand – I’ll include the colors next time.
thepinkmeow
January 5, 2008 at 5:16 pm
Far out! I’m a total n00b to illustrations, and I was able to replicate it without any problems. Well done.
drdcha
January 9, 2008 at 5:25 pm
good work
eXanock
January 10, 2008 at 4:16 am
Hi, thanks for this great tutorial. Keep up the good work
Web Design Stoke
January 14, 2008 at 10:59 am
Nice job!
Looks great.
Perhaps add a bevel to the outsite of teh overall image…?
mohimen
January 17, 2008 at 4:53 pm
thanks
joe
January 22, 2008 at 7:47 pm
thanx for the tut dude. and take a look at this.
http://img104.imageshack.us/img104/6908/64606527ha9.png
Brian
January 22, 2008 at 7:50 pm
Lookin good Joe, I am loving the black and yellow – great job.
Not trying to be to picky but the play button should probably have a slightly lower opacity.
Other than that, looks great!
website design
August 19, 2008 at 12:39 pm
very nice tutorial. Clean and elegant. I will try to make some variation if I have time and will post the link here.
weirdo
August 8, 2009 at 8:36 am
isn it faster to apple shift 4 and then crop?