June 08, 2009 from fabiano's blog
This last saturday we saw the release of the awesome new phone Palm Pre. A lot of people already bought their gadget, but if you want one, at least a icon one, we made that for you. This tutorial will show you how to create in Fireworks the icon for the Palm Pre frame.
Step 1
First of all, create a rounded rectangle with a dark gray gradient. Now we need to edit the path, so ungroup it and edit the points with the "Subselection Tool" tool (A) until you get a great shape. After that, apply a Inner Bevel with the values like the image.
Step 2
Now, duplicate the first rectangle, make a little bit small and apply the color #000. Duplicate this last one and do the same, turn it smaller on the height and width and apply a very dark gradient and 2 Inner Shadows like the image.
Step 3
Now we will create the phone part. On this step we draw 4 elipses, each one with a diferent style, size and position. Look the image and set all the values for each one like I did.
Step 4
To create the button, we need 2 elements: one elipse and one circle. The circle will be the mask for the elipse. So first draw the circle, apply a Linear Gradient like the image 2, also it must have a border with 2px. After that draw the elipse with a dark Linear Gradient. To do the mask, cut the elipse (CTRL or Cmd + X) and paste inside the circle (select the circle and CTRL or Cms + V).
Step 5
Almost done, take a look on the image to see the other elements we should create to reach the details like the gadget. The PNG file have all the elements already drawn for you.
Final Result
Here's the result. The process is simple, but we should have attention on every detail, because that makes the difference on this kind of project. To get even more real, we place the Palm's interface over the icon. And stay tunned, this interface will be the next tutorial I will make!
