Creating an amazing Palm Pre icon on Fireworks

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.

Creating the Palm Pre icon on Fireworks

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.

Creating the Palm Pre icon on Fireworks

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.

Creating the Palm Pre icon on Fireworks

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).

Creating the Palm Pre icon on Fireworks

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.

Creating the Palm Pre icon on Fireworks

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!

Creating the Palm Pre icon on Fireworks

Download PNG file

About the author

User picture

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

Buy Abduzeedo T-shirts

Add your comment 1 Comments

Post your message and we'll contact you immediately.
Thank you for your desire to work with us.

Please, fill out the required fields!