Creating an amazing Palm Pre icon on FireworksListThumbs

Creating an amazing Palm Pre icon on Fireworks

June 08, 2009

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:

More content from:

Help us to share this!

11 Comments

sandeep kothiyal06/08/2009

it is nice......
i try work to photoshop

you can see:- http://www.flickr.com/photos/28900704@N06/3607377262/

Raylan06/08/2009

Seria mais interessante fazer isso no Illustrator ou no Photoshop, só uso Fireworks pra fazer design de banners em flash... muito limitado...

Tim06/08/2009

Yesss, more Fireworks please! Well done!

Yopladas06/08/2009

Great tutorial! I'm not sure many here see the awesomeness in this phone... I'd prefer it over an iPhone... :) thanks!

Thefatgod06/09/2009

So does that mean that you guys are ganna have a section to get backgrounds fit for a pre?

chandrika06/09/2009

i was work try......................better:

http://www.flickr.com/photos/eggchandrika/3609125977/

image masking 06/09/2009

Informative tutorial. Thanks.

Eoghlear06/09/2009

Awesome and more fireworks tutz!

MidnightOne06/09/2009

Great tut!

PS: Could you please upload or give a link to this nice stone background?

pI3r06/10/2009

Great tutorial, hope to see more of them in the future ( especialy about fireworks). Thanks

Sarthak Singhal07/01/2009

Great work in Fireworks. Keep it up!

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?