Thursday, July 17, 2008

cool iPhone buttons

The last few days I have been working on designing a widget for my company along with an information acritect. It's going pretty well. My inital design looked like an iPhone, and then we moded it form there until we came up with a simple yet cool design (something like 10 mock ups later, lol). My buttons look like iPhone buttons, which I love (I wish I actually had an iPhone, but they're too expensive to own in Canada). On the over state I increased the brightness by 30, suble but nice, and on the down they look depressed.

Here's a sample for fun. :)
iPhone Button

The awesome tutorial to do the buttons I found here - http://blog.jotlet.net/2007/07/05/iphone-style-icon-tutorial/ .

To do the over and down effects I came up with all you need to do is the following:


The "down style" layer is just a copy of the color layer with an inner shadow:

I also nudged the icon down 1px and right 1px.

The "over style" is just an adjustment brightness/contrast layer with the brightness +30.

No comments: