To avoid blurry images always use snap to pixel (Mac cmd-k – Windows ctrl-k). Active, inactive and pressed states of an asset need to align perfectly and have exactly the same size, otherwise it will look like the button is moving when you touch it. Slicing assets needs to be done very accurately. Always use a transparent background when exporting your slices with transparency (PNG 24 / 32). Place similar assets (like icons, backgrounds etc) close together on a page, so you have an clear overview of all assets. This will also help if more than one person works on the project. Copy the assets from the original file and paste them in the new one. This way you always know where to find the assets of a specific file. So, get all your assets in a single document like this: Create a new file for your assets with the same name as the source file, add “_assets” to the filename. If it is not this release, it will be next year when your client decides to redesign their corporate identity. The chance you have to change an asset is 99%.
Collect them all!Īssets should not be scattered around in folders, emails, libraries or different source files. This is especially important with scalable assets like backgrounds and interactive elements like buttons.īecause you have to deliver (at least) four different assets for just one image, it will be a waste of time if the developer is expecting a different set. Developers have different ways of implementing the design. Talk with the developer of the app before you start. If you are not familiar with the basics of Fireworks and slicing, check one of these videos.) 1.
(note: This is not a hands-on tutorial about how to create and export slices with Fireworks. You don’t want your button to look great on the iPhone 4s and blurry on the iPhone 3, right? Here are 10 tips we gathered along the way to help you slice and export assets for mobile apps. We use our favorite program Adobe Fireworks CS6 for designing, slicing and exporting.
If you are designing an app that should run on Android and iOS devices, things get complex. You can export the assets in just one size or use stylesheets to adapt to different resolutions. If you are still in the prototype phase, please check out our popular prototype-tool: TAP for Fireworks.įor the web this is pretty much a straight-forward task. If you design digital products, you will be confronted with slicing and exporting your visual assets so a developer can implement your design.