- Under: Tutorials,
iTunes Widget – Tutorial
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!
The following has been funded by Wet Paint
These new wikis are great widgets to empower your visitors to add to your site. Create free wikis today!
Want More Articles?
-
Elite By Design Gets A Shiny New Design
...
-
23 Most Incredible Photoshop Tutorials
Paired with yesterday's 24 Perfect Vectors, I wanted to list off some incredible Photoshop tutorials I've found on the web that will help you utilize those resources. I've done my ...
-
Getting Started With CSS: 20 Awesome Introductory Tuts
Do you want to make your own web pages but are too worried about falling short in the complex depths of CSS? Not too worry - all it takes is some patience, some practice, and a lit...
-
Flash Hijacked – Let Our Soundcard Go!
So let’s start off with a disclaimer: This article is not in anyway intended to diminish the numerous, dynamic advancements that Flash has introduced into the design and developm...
-
Freebie – Kaleidoscope Circles Photoshop Brush Pack
Download the Kaleidoscope Circles Brush Pack Please do not repackage, redistribute or direct link to the download. If you would like to share these textures please link to this ...
Share the love:
- Website: http://elitebydesign.com
- About: Brian is a blogger and web designer at Elite By Design. He has been blogging for over a year providing quality design-related articles for the community.
Nice tutorial. I’m sure someone will find a very good use for it.
Thanks a bunch Gary. I hope so
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.
Thanks Helpfull Hand – I’ll include the colors next time.
Far out! I’m a total n00b to illustrations, and I was able to replicate it without any problems. Well done.
good work
Hi, thanks for this great tutorial. Keep up the good work
Nice job!
Looks great.
Perhaps add a bevel to the outsite of teh overall image…?
thanks
thanx for the tut dude. and take a look at this.
http://img104.imageshack.us/img104/6908/64606527ha9.png
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!
very nice tutorial. Clean and elegant. I will try to make some variation if I have time and will post the link here.
[...] sure that all my subscribers and most of my readers have seen the 2 tutorials I have written over the course of the last week or so. 3 days ago I submitted my first tutorial to [...]
[...] das »iTunes Widget«-Tutorial nachvollziehen möchte, wird sich in Photoshop mit den Ebenenstilen beschäftigen [...]
[...] ??????: mimeto_87_b ???????? [...]
[...] that came to mind when I was thinking about places to get my tutorial featured. When I submitted my iTunes Widget Tutorial, I didn’t quite know what to expect. It wasn’t until after I had gotten approved that [...]