If you notice, the iPhone “home” UI design is very similar to, if not the same as, the OS X Dashboard design. This tutorial will teach you how to create your own widgets, and you’ll be able to use those icons for your Websites or Avatars.
- Let’s start by creating the background interface where the Widgets appear. (Colours are optional, you can leave it white). Since shortcut keys are different on Mac and PC, I won’t be making references to them. Instead I will be referring to Photoshop’s top menu and submenus, but I do highly recommend learning the keys once you become comfortable.
- Start a new document (File/New) of 500×120 pixels.
- Create a new layer (Layer/New/Layer), call it “Interface”.
- In your Layers window, select it and do a Fill (Edit/Fill) — Use: color: #a3acb7.
- Double click on your “Interface” layer, you will get to the “Layer Style”.
- Check “Inner Shadow”, set Opacity: 50%, Angle: 90, Size: 7.
- Create a new layer, call it “Tile”.
- Select “Elliptical Marquee”, hold Shift, create a 3×3 pixels circle, and do a Fill — User color: #000000.
- Go to the “Layer Style” of “Tile”, check “Drop Shadow”:
- Now, select that circle you just’ve drawn, do a duplicate and move it 5 pixels to the right, and 5 pixels to the bottom. (Hold Alt + Ctrl and use your arrows)
- Select an area of 10×10 pixels from where it starts and Define Pattern (Edit/Define Pattern). Name it “Tile”.
- Now that you got your pattern, delete the “Tile” layer and select the “Interface” layer. We’ll try to apply that pattern all over the background space.
- Do a Select/All, move down 10 pixels, then Edit/Fill — Use: Pattern, Custom Pattern: “Tile”.
- Voila, your background is done!
Here’s a preview of what you should have by now:
Here’s what you should have in your Layers window:
- Now, the Widget part.
- Create a new layer: “Widget BG”.
- Do “Rounded Rectangular Tool” (U), create a 70×70 pixel selection and right-click/Fill Path — Use color: #BF0000.
- Do Layer style on “Widget BG”:
- Here’s the where the fun begins. You can drag in your own logo and/or add text. For now, we’ll create a Tutorials 2.0 widget.
- Select “Horizontal Type Tool”, type in “Tutorials” and use these settings:
- Again, Select “Horizontal Type Tool”, type in “2.0″ and use these settings:
- Place the fonts well so it should look like this:
- Ok, we’ll work on getting that glossy Apple-like look.
- Select your “Widget BG” layer and do Select/Load Select, press OK.
- Once you got the selection, do Select/Modify/Contract — By 3px.
- Create a new layer called “Glossy”.
- Now, go to “Gradient Tool” (G), customize your gradient by clicking on the gradient bar on the top left.
- On your gradient, you will find 4 settings, set Top left: 50% opacity, Top right: 0% opacity, Bottom left: #FFFFFF, Bottom right: #FFFFFF.
- With your gradient tool, click and hold from the top of the selection to the bottom and release.
- Deselect, use Elliptical Marquee and do a circle so it looks like this:
- Right-click/Select Inverse and hit your keyboard button “Delete”. Your Widget should finally look like this:
And your layers should look like this:
- Instead of having flat colour on the text, as an extra step let’s add shadows the “2.0″ text and make the “Widget BG” as a gradient from #BF0000 to #FF0000:
- You’re done! You can repeat Step 2 with different colors and with your own widget designs. Should Apple ask you to create your own iPhone widgets 6 months from now, you’ll be ready for it.
Popularity: 100%
Thanks.
Very good, it will be usefull for me.
Absolutely fabolous!
awesome.
Thanks! It’s great
!!
Hi,
Truly great tut, easy to follow and well explained, I have used this technique in the new site I am working on at the mo, thanks for taking the time to put this out ther, really appreciated.
Mark
Thank you so much for this. It’s always fun to see how another person goes about creating something. You really have a deft knowledge of photoshop. Very very cool. I would have fumbled around and probably did it in a much more difficult way, so thank you. You’ve really made light, quick steps on creating these icons and what a joy to follow your tutorial! You have a style about you that is polished and very keen. Very cool.
Billy Martin
Sweet, glorious specs of the 11.6 millimeter device (that’s frickin’ thin, by the way) include a 3.5-inch 480 x 320 touchscreen display with multi-touch support and a proximity sensor to turn off the screen when it’s close to your face
http://www.dvdtoiphoneconverter.org/
Muito Bom. Very Nice
Simples, objetivo e direto.
Perfeito
I just found a nice widget photoshop template: http://gridgets.com/backpages/create.html.
hey they look soo nice
I just love this totorial
big thanks. nice tutor.
great tutorial… used this technique on my website redesign… if your interested you can see it here: http://www.webstop.com
Thanks!
G
Hi there,
Thanks for the tutorial on creating icons on iphone,
Can you also help me in creating shortcuts on the iphone desktop with the icons just created viz movie or photo,etc …???
Thanks in Advance
\fr1end
Hi I sumbled upon this site by mistake, I was surfing around the net for New Fashion Designers when I came upon your webpage, I must say your site is really interesting I truely think the content, its amazing!. I don’t have the time in this instance to completely browse your site but I have bookmarked it and also signed up for your RSS feeds. I will be back in a day or two. Bravo for a great webpage.
Hi !
I have a little question : how do you manage to make iphone webclips with true transparency ?
Indeed, I tried to do my own webclip for my website.
My icon have some complete transparency (it is not a square but a circle)
I have the following problem : when I add my website as a favorite through Safari from the iPhone, my icon adds on the screen, bit the transparency has been modified to “black a little transparent” !
This means that on a black springbord : OK
But on the dock at the bottom of the screen, mi icon is inside the usual square with rounded corners, with the background black (a little transparent)
It seems that iPhone Safari modifies my icon.
I use the “precomposed” option in order to desactivate the addition of the “gloss” effect.
How can I force Safari to make NO MODIFICATIONS on my icon ?!?
Thank you for your answers !!
Excellent read! I enjoy your site very much.