Fireworks, Skinning and Pixel Precision
While browsing the internets I came across some greta tutorials on creating skins for Flex. Currently, there seems to be many options for getting UI designs into Flex and having them look pixel perfect. So, if you’re new to skinning or want look into honing your skills, here’s a couple articles that might help.
Designing a Media Player in Fireworks
Fireworks is my tool of choice for creating Flex-based interfaces and it’s pretty often that people get surprised when I tell them that. If you’ve ever wondered about using Fireworks for designing Flex applications you might want to check this out.
Nikola Borisov has an article up on the Adobe Developer Center about “Designing a Media Player in Fireworks” to create something that looks like this:
This article does a good job of introducing Fireworks as a tool for designing UIs. Seeing some of the features I’ve seen in Fireworks CS4 reenforces why I love using Fireworks.
Also, there’s a great article on using rich symbols in Fireworks, which is a huge timesaver.
Creating Skins with Bitmaps, a SWF or Programmatically
Over on a site called Ntt.cc, there’s a tutorial on how to create the same skin three different ways: using bitmaps, a SWF or programmatically. The final skin created is called “Kingnare Style”, which mimics the styling of Photoshop Express.
The article is great for getting up to speed with using each of these three techniques, but if you’re not interested in that it’s worth checking out just to get the custom skin.
Pixel-perfect Precision
On a side note, Dan Florio of PolyGeek filled me in on an AIR application he created called pixDIF. The app offers features, like guides and increments, for verifying that your design matches pixel-perfectly to the way it’s implemented in Flex or any other technology. Check it out