Design your iPhone Widgets

Design

10 of 10
back next
back
7Shadows

7Shadows 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

    May 23rd, 2007 - 11,216 views - - Comment

    • DeathChronx Cool! I had no idea you'd be able to customize that much on iPhone! Very interesting!

      Jun 20th, 2007

    • Graffo Good Tutorial

      Jul 4th, 2007

    • 7Shadows Nice tutorial! I'm definately using this!
      Thank you friend!

      Oct 23rd, 2008