There’s no avoiding the fact that the iPhone has revolutionised the mobile phone industry, becoming one of the most popular and talked about mobile device on the planet.

Now that the iPhone has become mass market, there is a huge market for personalisation, specifically with offering wallpapers designed for the iPhone’s resolution (currently present on Standby mode but soon to become part of the menu background screen in OS 4.0).

When I recently designed a promotional iPhone wallpaper for my Funky House Finesse show, I suddenly realised there was only a small area (320 × 267px) on the screen for getting a message across without being affected by surrounding text and functionality such as the time and unlock slider.

To make this process easier in the future, I created a standard template overlay which can be used to position graphical elements below before rendering.

Download the iPhone Wallpaper Template (32-bit semi-transparent PNG)

The above image can be used in most image composition tools like Photoshop or Fireworks and then hidden prior to exporting.

Hopefully, you’ll find this useful if you come to design your own iPhone wallpapers. If you do, be sure to post a link to your design in the comments.

The Apple OSX bevelled effect isn’t exactly original now but, nonetheless, there are times when the style suits your design needs, especially when wireframing OSX/iPhone applications.

I’ve found a neat little method of creating the bevel effect in Fireworks which you can reuse quite easily:

1. Select the object you want to apply the effect to. (Note it works best on darker objects).
2. Apply a drop shadow filter to the object (Filters > Shadow and Glow > Drop Shadow).
3. Set the Distance to 1, Opacity to 20%, Softness to 0, Angle to 270 and the Color as #FFFFFF.

That’s it! See the following example of how it looks.

For added convenience, why not set this as a favourite style?

1. Select the object you’ve just applied the filter to (it should be the only filter applied).
2. Click the + button next to Filters.
3. Select Options > Save As Style….
4. Name the style, something like “OSX Bevel“.
5. Now you can apply the bevelled effect to any object you select in Fireworks by clicking the + button and choosing “OSX Bevel“.

Hopefully some of the designers out there will find this little tip useful.

If you can think of a quicker or more convenient way of applying this effect in Fireworks or have an alternative approach for all the Photoshop users out there, leave a comment below.