Design your iPhone Widgets by 7Shadows
7Shadows

Design your iPhone Widgets

by 7Shadows in Tutorials

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 500x120 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 3x3 pixels circle, and do a Fill -- User color: #000000.
Go to the "Layer Style" of "Tile", check "Drop Shadow":
th_picture3.png
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 10x10 pixels from where it starts and Define Pattern (Edit/Define Pattern). Name it "Tile".
th_picture4.png
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".
th_picture5.png
Voila, your background is done!

Here's a preview of what you should have by now:
picture6.png

Here's what you should have in your Layers window:
th_picture7.png
Now, the Widget part.

Create a new layer: "Widget BG".
Do "Rounded Rectangular Tool" (U), create a 70x70 pixel selection and right-click/Fill Path -- Use color: #BF0000.
Do Layer style on "Widget BG":
th_picture1.png
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:
picture2-1.png
Again, Select "Horizontal Type Tool", type in "2.0" and use these settings:
picture3-1.png
Place the fonts well so it should look like this:
picture4-1.png
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.
th_picture9.png
On your gradient, you will find 4 settings, set Top left: 50% opacity, Top right: 0% opacity, Bottom left: #FFFFFF, Bottom right: #FFFFFF.
picture8.png
With your gradient tool, click and hold from the top of the selection to the bottom and release.
picture10.png
Deselect, use Elliptical Marquee and do a circle so it looks like this:
picture14.png
Right-click/Select Inverse and hit your keyboard button "Delete". Your Widget should finally look like this:
picture16.png
And your layers should look like this:
th_picture17.png
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:
picture19.png


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.

tutorial_iphone.png

  • Copy Link:
  • SN Code:
  • Short URL: