Submit yours
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: 68% [?]
Find this cool? 
Bookmark Tutorials 2.0
January 25th, 2007 at 10:36 am
[…] tutorial per Photoshop è molto semplice e può essere seguito senza particolari difficoltà da qualsiasi […]
January 28th, 2007 at 7:15 pm
Thanks.
January 29th, 2007 at 9:13 am
[…] Gennaio 29th, 2007 Se le icone in stile Web2 del nuovo cellulare iPhone vi sono piaciute, su Tutorials2.0 potete seguire un tutorial per photoshop e crearle direttamente a vostro piacimento in pochissimi […]
February 4th, 2007 at 2:11 pm
[…] help, it’s the same Web 2.0 look that has been sweeping the Web design community. Visit the iPhone Widget Tutorial via the link […]
February 6th, 2007 at 8:21 pm
[…] follow this link to read how it’s done (including the dotted Apple-esque […]
February 7th, 2007 at 1:55 pm
[…] 2.0 ofrece una guía paso a paso para que hagas tus propios iconos con estilo iPhone, bueno más bien al estilo Dashboard, que es lo […]
February 7th, 2007 at 2:09 pm
Very good, it will be usefull for me.
February 9th, 2007 at 5:57 pm
Absolutely fabolous!
February 10th, 2007 at 2:25 am
awesome.
February 10th, 2007 at 11:16 am
Thanks! It’s great :)!!
February 18th, 2007 at 3:05 pm
[…] u ook van die mooie icoontjes maken zoals op de iPhone? Lees dan deze tutorial en u maakt in korte tijd net zo’n icoontje zoals […]
April 10th, 2007 at 1:52 pm
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
May 11th, 2007 at 2:32 am
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
June 20th, 2007 at 8:19 am
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/
July 5th, 2007 at 4:31 am
Muito Bom. Very Nice
Simples, objetivo e direto.
Perfeito
July 5th, 2007 at 6:56 am
iPhone for web designers…
Inspired by all this buzz about iPhone, we’ve played in illustrator a little and made this design:
In case you could use that vector graphic in your project, please feel free to download it from here:
iPhone vector
The archive contains AI, EPS a…
July 14th, 2007 at 10:30 am
[…] Wow! A tutorial about how to Design Custom Widgets for the iPhone! […]
July 14th, 2007 at 12:54 pm
[…] Wow! A tutorial about how to Design Custom Widgets for the iPhone! […]
July 16th, 2007 at 6:27 am
I just found a nice widget photoshop template: http://gridgets.com/backpages/create.html.
July 16th, 2007 at 6:54 pm
[…] 2.0 ofrece una guía paso a paso para que hagas tus propios iconos con estilo iPhone, bueno más bien al estilo Dashboard, que es lo […]
July 17th, 2007 at 6:03 pm
[…] They have ico, psd, and eps graphics of the iPhone. Also list is a link on how to design your iPhone widgets. Uploaded with […]
August 11th, 2007 at 7:11 am
Find Any Phone Number with Name and Address Worldwide!…
Find Any Phone Number with Name and Address Worldwide!…
August 11th, 2007 at 1:59 pm
100% Free Lifetime Webcams Live Sex…
100% Free Lifetime Webcams Live Sex…
August 12th, 2007 at 4:32 pm
Tax Tips…
Cool information thanks!…
August 15th, 2007 at 1:41 pm
Slot bonus codes…
Slot bonus codes…
October 19th, 2007 at 5:34 pm
hey they look soo nice
October 19th, 2007 at 5:35 pm
I just love this totorial
October 22nd, 2007 at 4:13 am
big thanks. nice tutor.
November 5th, 2007 at 11:22 pm
Searching for the Answer…
Searching for the Answer…
November 6th, 2007 at 10:30 pm
great tutorial… used this technique on my website redesign… if your interested you can see it here: http://www.webstop.com
Thanks!
G
November 30th, 2007 at 4:47 pm
ultimate Paris Hilton sex tape download resource rest…
Paris Exposed - Paris Hilton Sex Tape…
December 13th, 2007 at 9:49 pm
Facts and Information…
Facts Information and reviews…
January 7th, 2008 at 2:20 am
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
January 17th, 2008 at 4:00 pm
yCTcHJ hi nice site thx http://peace.com
January 19th, 2008 at 10:53 am
how to pick up women correctly…
how to pick up women the right way…
February 20th, 2008 at 11:23 am
vHMykB hi good site thx http://peace.com
March 3rd, 2008 at 12:59 am
jimsotonna…
jimsotonna dropped by…
March 13th, 2008 at 8:05 pm
The iPhoner…
The iPhoner…
April 1st, 2008 at 11:25 pm
[…] http://tutorials20.com/design/design-your-iphone-widgets/ […]
April 14th, 2008 at 8:50 am
[…] Click here to see the rest of the tutorial Files under iPhone Tips, iPhone Tutorial […]
April 19th, 2008 at 6:27 am
13 Erotik Filme runterladen online…
wo kann man gratis filme runterladen?…
June 8th, 2008 at 2:28 pm
[…] http://tutorials20.com/design/design-your-iphone-widgets/ […]
July 1st, 2008 at 7:00 am
coole bruce willis filme downloaden…
Wo kann ich filme downloaden?…
October 31st, 2008 at 12:06 pm
[…] in queste applicazioni basta che scrivete tutorial + quello che volete ottenere per trovare tutto: icone per iphone, effetti di luce, disegnare Eve di wall-e in vettoriale, creare delle icone superfiche per il […]
November 19th, 2008 at 3:21 am
[…] Design Your iPhone Widgets […]
January 1st, 2009 at 8:34 pm
[…] Design Your iPhone Widgets - Tutorials 2.0 - […]