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.