Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Workflow Optimization Design Cutting Edge iOS Apps With Adobe Fireworks

Since the release of iPhone 4 and the iPad 3 (known as “The new iPad”), Apple has doubled the resolution of the displays, which are now 640 x 960 pixels (iPhone 4 and 4s), 1536 x 2048 pixels (iPad 3), and 640 x 1136 pixels (iPhone 5). To keep a good-looking user interface for both the old as well as the “Retina” resolution, Apple decided not to resize all graphics or make use of scalable image formats (such as SVG1), but instead it now requires two sets of graphics for each device.

When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in — the capability to create sharp vector elements which scale up and down without any quality loss (including all effects and filters).

Further Reading on SmashingMag: Link

This article describes how to design an iOS app with Adobe Fireworks for the iPhone and shows a few techniques which allow you to design faster, achieving the best possible results.

High Resolution First, Scale Down Later Link

When creating your new document, choose the @2x-resolution (2x) as your canvas size (for example, this means 640 x 960 px for iPhone 4/4s in portrait orientation) and keep the PPI at the default of 72. iOS ignores the PPI setting stored in PNG files — the only thing we need to care about is to double the resolution (in pixels) of our images when working on Retina display designs.

New Document in Adobe Fireworks
Creating a new document for designing an iPhone 4/4s app in Retina resolution (portrait orientation).

Starting with the higher resolution is my preferred way to design apps for Apple devices, as it allows me to set the appearance of each single pixel, and add details which won‘t be visible on the scaled-down version. In the worst case, if you have to use bitmap textures for some reason, the scaled-down version will look a lot better than a scaled-up one (which will have blurry textures).

When designing in 2x resolution, you have to think a bit more about what you’re doing. For example, you have to avoid sizes like 3 or 5 pixels for border widths, and the same applies to effects like drop shadows — a scaled-down blur ratio of 5 pixels would result in 2 or 3 px blur, and neither would be the result you want to achieve when aiming for real perfection.

I have seen other designers doing it the other way: starting with the normal size, and scaling the whole design up when it is done. Either way is absolutely fine — I think it always depends on the designer’s personal preference. However, in this article I will only describe the way to start with the 2x resolution graphics first.

Vectors Whenever Possible Link

When creating elements for your app, always use vector shapes, and never rasterize them (since Fireworks has very powerful vector editing abilities, it is advice that’s easy to follow). It’s also a good idea not to use any Photoshop live effects unless you absolutely have to. Why?

Use Fireworks Live Filters (They Scale Better) Link

The reason why you should only use Fireworks live filters is because Photoshop live effects will not scale as they keep their attributes (unless you change the size of the whole image or the separate shape). On the other hand, Fireworks will scale any attributes of your live filters (except in intensity-based filters, like the amount of noise), and this is something you should keep in mind when you are working a lot with drop shadows or glows.

Useful tip: Fireworks is very flexible. If you don’t want to scale effects or strokes when changing your document size, you can turn this option “off” in Preferences (Menu Edit → Preferences → General → Scale Strokes and Effects). Turning it back “on” is just as easy.

Turn Scaling for Strokes and Effects On or Off
The Preferences dialog in Fireworks, when you can turn on or off the scaling of strokes and effects (live filters).

In the few very rare cases when the result of a scaled-down (or scaled-up) live filter does not really fit your needs, you can easily fine-tune the filter attributes manually after scaling.

Here’s a quick example of this feature — two buttons were resized, one had live filters applied to it, and the other Ps live effects.

Buttons Built with Different Techniques, Demonstrating the Advantages of Fireworks Filters
Both buttons are looking the same when rendered in the resolution that they have been created in (Retina). Once we resize the image, though, you will clearly notice that only the effects of the button that uses Fireworks live filters were resized correctly.

Note: Fireworks will scale attributes of your live filters, applied to both vector and bitmap objects. However, there is one exception to this rule: Fireworks will not scale live filters applied to text objects. For example, a Drop Shadow live filter (applied to a vector object), will scale along with the object. But a Drop Shadow applied to a text object will not — the text block will get smaller (or larger, depending on the direction of scaling) while the drop Shadow will retain its original attributes (Distance, Softness). This behavior of Fireworks is designed as such, and is something to keep in mind when text objects and live filters are involved.

Use Divisible Values for the Height/Width of Your Shapes Link

Be sure to always use divisible values (that is, able to be divided into a whole number) for the height and width of your shapes. Sizes that do not divide evenly will result in half-transparent pixels when scaled down, which often looks blurry and imprecise.

Resized 3px border
A 3px border will result in a blurry 2px border when resized. Since a width of 1.5 pixels is impossible, Fireworks is trying to achieve the logical result by adding half-transparent pixels — unfortunately the result doesn’t look so good.

When you are drawing icons, always keep them vectorized so you can scale them down later without the blurring that occurs from bitmap resizing (we will also cover icon resizing later in this article).

Dealing With Bitmaps (When You Have To) Link

When using bitmap textures, there are a few possibilities for how to get the most out of them:

Repeatable Patterns Link

You can build a repeatable pattern from nearly any texture — this means a bit of extra work, but is often worth it. When you are looking for textures, it’s often hard to find seamless, repeatable textures for your app. But in most cases, you just need to do a few color corrections for a “regular” texture before you can use it as a repeatable pattern.

Building Repeatable Patterns
This is an example when a non-repeatable detailed leather texture can be transformed into a repeatable one, by just applying a few color corrections. I usually switch to Photoshop for this type of work, then import the pattern into Fireworks. You can also make the color corrections within Fireworks (if you prefer).

Useful tip: Download and try the Modify Commands6 pack, by Aaron Beall7. It includes “Seamless Tile” — a very useful command for seamless textures. It does not work equally well for all types of textures, but for the most types it can help you create a seamless pattern in Fireworks really easy. The command creates seamless textures from selected objects on the canvas, by blending their edges automatically (based on a specified percentage).

When you’ve built a repeatable pattern, you can apply it as background for any vector shape. To do this, just save your pattern as a normal PNG32 file somewhere (personally I prefer to have a “Materials” folder in my project folder, where I store any patterns I’ve used during a specific project). Then select the shape you want to apply the pattern to and set the fill mode to “Pattern Fill”. Fireworks has a few basic patterns pre-installed, but if you want to use your own pattern, just select Pattern → Other…, and then choose the pattern you have saved on your computer first.

Applying a Pattern in Adobe Fireworks
By setting the shape’s fill mode to “Pattern Fill”, you can easily apply either a pre-installed or a custom pattern.

When it comes to iOS design in Adobe Fireworks, the important thing is: patterns do not scale while their shapes do. This means the pattern will look the same on both resolutions. This can be very handy when you are using a few textures in your design — for example, a leather texture for the title bar. If you want to keep all the details of the texture in both resolutions, use a repeatable background pattern.

Useful tip: If you are looking for seamless repeatable patterns, take a look at Subtle Patterns8. As of today, it offers 305 excellent free patterns… and counting!

Masked High-Resolution Bitmaps Link

When you want to scale down textures or other bitmap graphics, I suggest you use high-resolution graphics masked with sharp vector masks (for the 2x-resolution images).

A Vector Mask in Fireworks9
A vector mask in Fireworks.

When scaled down, the vector masks ensure that the masked graphics will keep their edges sharp while the graphic itself will be scaled down to its half-size. The normal version will look like an exact (yet smaller) version of the 2x image.

If you are using a bitmap graphic with small or fine details, you might want to use a masked graphic that has not been scaled down for the the normal version. In this case, you will need to manually replace the masked bitmap after the 2x version has been scaled down. Here’s how I’d recommend proceeding:

  1. Create the 2x-resolution image first and scale it down to half-size.
  2. Select the masked bitmap and ungroup it (Ctrl/Cmd + Shift + G), then delete the scaled-down bitmap.
  3. Add or import a new copy of the original, unscaled graphic, then create a new masked image with the scaled-down vector mask and the original graphic.

Masked Bitmaps in Adobe Fireworks10
A simple vector mask in Fireworks, used to create a rounded rectangle filled with a wooden texture: while the first shape masks the @2x-texture (1), you can see how to modify the result for the scaled-down masks by using the scaled-down texture (2), or the texture re-applied to the scaled-down mask (3).

In general, bitmaps are your enemy when designing iOS apps. So instead, try to work more with vector shapes and live filters. The above mentioned techniques can be used in the cases where you can’t proceed without bitmaps.

Scaling Down Link

When you are ready with the 2x-resolution design for your app, it’s time to scale down everything. I suggest that you start by copying all pages into a new Fireworks document.

Note: Alternatively, you could also select all pages, right-click in the Pages panel, and choose the option “Duplicate Page” — pages will be duplicated, the duplicates will be placed immediately after the originals and each will have “Copy” appended at the end of its name. By using this method, you’ll be able to manage all of your 2x and 1x graphics inside the same document. The drawback is that once you’ve duplicated the original pages, you’ll need to scale down each 1x copy individually, since the Fw PNG document will now contain both the 2x and the 1x designs. Hence, I recommend going with the other approach and moving all page copies into a separate document, and then scaling the whole document down to 1x resolution.

Manage Different Resolutions in Different Documents11
This is how you can manage both resolutions in separate Fireworks PNG documents: copy all 2x pages (left) into a new Fireworks document (right), then scale the new document down to 1x resolution.

Once you copied all your pages into a new document, you can scale it down by changing the image size (use menu Modify → Canvas → Image size). If you started with 640 x 960 px Retina design (iPhone 4 or iPhone 4s, portrait orientation), scale down to 320 x 480 pixels. Be sure to choose bicubic interpolation for resizing and uncheck “Current page only” (but keep “Resample image” checked). Fireworks will now scale down every page in your document and automatically redraw any contained vector shapes.

Scaling Down your Design12
Scaling down the current page using these options will optimize all included elements for normal resolution.

Fix Blurry Pixels Link

Since Fireworks is primarily a screen design tool, it almost always snaps objects (both vectors and bitmaps) to a precise pixel grid. But sometimes after scaling down your pages, even if you used only even values for the sizes of your vector shapes, Fireworks might render a few pixels as half-transparent. This is because after the transformation, it is possible that some of them might have fallen between whole pixels (and rendered blurry). The good news is that you can easily fix this by selecting all layers (all objects) with blurry edges and apply Snap to Pixel (use menu Modify → Snap to Pixel, or press Ctrl/Cmd + K). This Snap to Pixel command will realign all objects to the pixel grid, restoring their sharpness.

Using Snap to Pixel to Sharpen Blurry Pixels in Fireworks
By using “Snap to Pixel” you can easily fix blurry pixels in scaled-down designs. You can also apply “Snap to Pixel” to multiple elements by selecting all of them first.

Useful tip: Note that “Snap to Pixel” is available in Fireworks CS5 and later. However, if you still didn’t upgrade to CS5 or CS6, you can use the Transform panel13 by Trevor McCauley, Custom Nudge14 extension by John Dunning, or Super Nudge extension by Linus Lim. All of these can help you fix any blurry pixels by manually adjusting vector paths (using sub-pixel values).

Fine-Tune Rendering of Icons Link

Some icons (especially when they are very small) might look too “bold” after resizing. Applying the Snap to Pixel command won’t change this if these icons are built from either circles or rounded bordered shapes. In addition, I can’t recommend using Snap to Pixel for icons since this command often moves pixels in the wrong direction and may destroy the icon’s proportions.

Instead, my suggestion is to use the legacy vector rendering option in Fireworks (it can be found in Commands → Selection → Use Legacy Vector Rendering). In this way, Fireworks makes use of an older rendering algorithm for the selected objects. In most cases, both the “Improved” and the “Legacy” vector renderings produce equal visual results. But when it comes to very detailed and small vector objects like icons, the old vector rendering algorithm renders them a lot sharper than the new one.

Using Legacy Vector Rendering to sharpen icons in Fireworks
The “Legacy Vector Rendering” option allows to sharpen really small icons with a lot of details.

You can switch between the two rendering modes, depending on the task at hand.

Different Vector Rendering Options in Fireworks
You can easily apply the “Legacy Vector Rendering” to any vector objects (or switch back to the default “Improved Vector Rendering”).

Fix Border Radii Link

When your design is scaled down, even the radius of rounded borders will be reduced in half. Some shapes in your design might have a very small border radius (under 4 px in the 2x-resolution), and these shapes may look like a square after they have been scaled-down. To fix this little issue, manually increase the vector radius by just one or two pixels.

Scaled Border Radii
Even if it might not be mathematically correct, it sometimes makes sense to increase the border radius for scaled-down elements. As you can see in this example, a scaled-down version on a 4 px border radius is so small that we wouldn’t be able to recognize it.

Export Process Link

When it comes to the graphics export stage, I suggest that you use Fireworks’s slice tool. It can be used to quickly create intertactive prototypes15 (together with the Hotspot tool), but we can also make use of it for exporting graphics in a more efficient way.

Limitations of the Slice Tool Link

Unfortunately, we can’t directly use the Slice tool in our Fireworks document because the slices to be exported won’t have a transparent background if any other graphics are positioned in the background of the slice. For example, if you want to export a button which is arranged in front of a bitmap background and you don’t isolate the button graphic on a transparent background first, the exported slice will include both graphics — the button, and parts of the bitmap background behind it. Also, it’s important not to create overlapping slices — each slice should be isolated and cover only the graphics you wish to export.

Comparison Between Exporting of Slices with Background and Without Background
In this example, you can see the difference between exporting slices with a non-transparent background, and isolated slices without a background.

Useful tip: Before I speak about my exporting method of preference in more detail, I’d like to briefly mention a very useful extension by John Dunning16Export Selection17. This extension allows you to select an object (or group of objects) on the canvas and then export it without any backgrounds that may appear behind it. This method may come handy in scenarios when you need to quickly export one or two objects with a transparent background and you don’t want to first copy and paste them into a new document for this specific purpose.

Using the Slice Tool (in a Separate Document) Link

To overcome all of these limitations, I’ve developed my own preferred exporting method:

First, create a new document with a really big size, let’s say 2000 x 4000 pixels (maybe you will have to increase the size of this document later if your app includes a lot of custom graphics). Next, create an export preset (this can be done inside the Optimize panel) with PNG32 as the selected file format and with a transparent background. When done, save the preset and name it however you want.

Optimize Panel
Create an export preset in the Optimize panel — I’ve called mine “iOS PNG32” (note that the preset you have created will be available anywhere in Fireworks where there is an optimization choice available: Optimize panel, Export Image Preview window, etc).

After these little preparations, it’s time to copy all the graphics you want to export from your original document to the newly created document. Arrange all of the graphics on a simple grid, keeping in mind that they should not overlap. Then set your document’s background color temporarily to grey to make sure you can see if any live filters (such as a subtle glow) are overlapping with others. Now you can use the Slice tool to create all the slices you want to export.

Useful tip: When you need to create a lot of slices, creating them manually can become a time-intensive process. To generate all slices in a single pass, select all elements in your design, right-click and use the “Insert Rectangular Slice” option — Fireworks will ask you if you want to create a single slice or multiple slices for the selected elements. Just select “Multiple” and enjoy the time you are saving!

Make use of your created export preset for each slice and name your slices properly, since these will be the file names after export is completed. You can rename each of your slices in the Layers panel or in the Property Inspector panel. After you’ve prepared your 2x document, save it. You should also scale it down using the techniques as described above, and save it as a normal resolution (1x) document.

Export time! For both image files (2x and 1x), go to File → Export, and choose “Images Only” here. Because we only want to export all of the created slices, select “Export Slices” and uncheck both of the other options (“Selected Slices Only” and “Include Areas without Slices”).

Exporting in Adobe Fireworks
Export all your slices with one click!

These steps describing how to resize your designs should be applied to your new (down-scaled) document as well. In the end, you should have two separate image files: one with all 2x slices (included) and one with the normal resolution slices (1x).

Export All Graphics at Once by Using Slices
This document will export all included slices into a folder. (Hint: name your slices if you want specific filenames for the exported images.)

A Few Words About File Types and Image Compression Link

Apple recommends that you use the PNG file format for any images used in iOS applications. PNGs are lossless, and I would recommend them for nearly any implementation into apps (or websites). However, when you’re going to display huge images (such as high-resolution photos) it might be a good idea to use JPG files instead.

When working on website designs, it’s really important to reduce the file size of your exported images. In general, designers use tools such as ImageOptim18 or Web services like punypng19 to radically reduce the size of images. However, in the case of iOS Apps, image compression is not important since Xcode will modify PNGs (by swapping the red, green and blue bytes) and will undo any previous compression applied.

Examples of iOS Designs Made with Adobe Fireworks Link

Finally, I would like to share a few examples of iOS designs, made with Fireworks. Some are mine, and some are by other designers who use Fireworks extensively. I hope that they can inspire you!

Bränslesmart iOS App by Ivo Mynttinen20
Bränslesmart iPhone App21 by Ivo Mynttinen

Graph design22
Graph design23 by David Perel

Huh 224
Huh 225 by Pete Lacey

iPhone Button Polish
iPhone Button Polish by Anthony Lagoon

iOS Trend Chart26
iOS Trend Chart27 by Anthony Lagoon

UI Touch CDJ Pro28
UI Touch CDJ Pro29 by Gianluca Divisi

Nikon iOS icon by Gianluca Divisi30
Nikon iOS icon31 by Gianluca Divisi

Conclusion Link

Hopefully my personal experience with designing iOS apps with Adobe Fireworks (as well as the tips and tricks that I shared) may help you with future projects, as well.

If you have any more useful hints about how to improve the iOS design workflow, please let me know in the comments!

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38

↑ Back to top Tweet itShare on Facebook

  1. 1

    Nice read Ivo,
    I’m always amazed about the usefulness of Fireworks in certain design situations you show. Still, to lighten up the picture a little, there are some ways how you can achieve similar results in Photoshop:

    1. SCALING
    When you want to scale down your finished retina design in Photoshop go over “Image > Image size” and you can see the checkbox “Scale Styles” in the bottom part of the dialog box with which you can easily scale all effects pixel perfect – as long as you use even numbers. Assumed you use vector shapes, this also works great for rounded corners.

    Sometimes PS doesnt really gets the position of the elements right on the pixel grid while scaling – thats why you should always enable “Align Edges” in the options bar for all your vector shapes.

    You can even scale your layer styles manually via “Layer > Layer Styles > Scale Effects” if you want so.

    Since Adobe improved the vector tools in PS CS6, you can now snap all vector shapes globally to the pixel grid. Even better, this option is actionable and you can set up shortcuts to switch between the modes. Further reading ->

    Here comes something adding a huge benefit to you iOS workflow in Photoshop: With Slicy ( exporting assets out of your PSDs is painless. Besides filetypes and the automatic creation of non-retina assets just through the layer name you can also create slices and assets with transparent backgrounds without placing everything in an entire new canvas. This tool really saved me days – unfortunately it doesnt support Fireworks.

    I hope this will help the one or the other to save some time. :)

  2. 2

    Im think this article is misleading. Photoshop does indeed have a scale filter effects .

    When you go to Image Size….. just check the box for Scale Effects.

    Am I missing something?

  3. 3

    I keep on getting amazed with the fantastic tools that are hidden within Fireworks.
    It is indeed, an application, that have the most development and design-friendly way to create layouts and design comps for basically anything with a UI.

    I might consider switching to Fireworks some time soon, it seems like a much better tool than Photoshop.
    But some may argue against me.

  4. 4

    Really nice article. I was unaware that so many designers used Fireworks for app and UI design.

    Might give it a try soon. :)

  5. 5

    Great article! We use FW for all our UX work, and there are definitely some helpful pointers here to improve our mobile design workflow.

  6. 6

    Laura Fischer

    December 3, 2012 9:03 am

    Yes! This is such a great, useful article. I keep going back to Photoshop because I’m more comfortable there but it really is time to commit to Fireworks for UX design.

    • 7

      I’m in the same boat- I love all the features of Fireworks, but I can work so quickly in PS!
      I’ve decided to give myself a challenge, and pick a website I could easily copy with PS but try to do the same in FW. Good luck to you if you switch!

  7. 8

    I use Illustrator for web/app layouts. Always have done. I’ve never understood the obsession with using Photoshop. I can’t be the only one surely!

    • 9

      You’re a vector man in a bitmap world.

      • 10

        “Image file stored in the Portable Network Graphic (PNG) format; contains a bitmap of indexed colors and uses lossless compression, similar to a .GIF file”

        So no matter what you will do with your vectors – its all be rasterized.
        AI is still better for vectors in Adobe’s soft
        Yes, PS 6 is almost identical to AI for its vector capacity.
        I don’t see anything special to turn to FW other then price(?). They just trying to push FW as a one more market niche, instead of killing it long time ago after buying it from Macromedia. I don’t even recall any good reason why Macromedia developed Fireworks when they used to have “all-in-one” mighty FreeHand.
        Btw, you can do much better job with Inkscape as far as vectors and SVG.
        Much more precision on handling objects. And their XML file structure translation and editing for SVG is superior.

        Don’t forget GIMP.( I know, I know, we all accustomed to the long life of Adobe’s interfaces).

        Have you ever worked with Corel? Much better choices for ANYTHING artistic then of Adobe. Remember Fractal Design’s “Painter”? Its Corel’s now. There are quite a few options that you will be able to do in Corel.

        • 11

          Michel Bozgounov

          January 26, 2013 1:51 am

          Your comment is way off-topic. And incorrect. And it looks like you never used Fireworks — how can you explain things you never used?

          Fireworks stores metadata (vectors, layers, pages, bitmap objects, live filters, etc.) in its native Fw PNG file format, in a similar way to which Photoshop can store metadata in Ps PSD file format. Fireworks vectors are standard vectors, they are never rasterized unless you export to a bitmap file format, like PNG or GIF or JPG.

          You can copy vector objects from Fireworks to, for example, Illustrator (or vice versa), and have complete vector editability.

          And this article is not about how awesome Photoshop or Illustrator are, but how to optimize your workflow in Fireworks.

    • 12

      Photoshop it’s ok for photo retouching that’s it!

  8. 13

    Personnally, I find FW wayyy more userfriendly than PS to design web interfaces. These tricks really help hesitant people to go to FW. Thanks for the article!

    Legacy vector rendering is a revelation!

  9. 14

    Andre Reinegger

    December 3, 2012 11:28 am

    Thanks man,
    that is an awesome article!

    After 13 years of experience with Fireworks, I never thought to learn something new, but this article show me some new interesting facts!

    Thanks a lot

  10. 15

    Marcello Damasceno

    December 3, 2012 2:34 pm

    Thanks for the article. Although knowing fireworks users swear by it, but I’ve been much happier by using Adobe Illustrator instead.

  11. 16

    I recently tried to work on my design with Fireworks rather than Photoshop which I’m used to.
    It’s had been quite painful and I’m still sticking to Photoshop, but reading this article makes me want to give it another try.
    I you want to make some special effects, shapes … I think Photoshop is needed but should certainly be used as an external tool rendering parts of the design and imports those parts in the fireworks document (correct me if I’m wrong).
    Anyway great article, I’ll definitely try using Fireworks on my next projects!

  12. 17

    Interesting article with a few good generic tips whatever your software preference.

    Personally I’m in the Illustrator camp, with potatoshop for slicing. Have been using this process professionally for years for both websites and mobile UI / mobile games.

    Someone is always gonna suggest Fireworks every few years though ;) Maybe one of these days I’ll bite.

  13. 18

    It’s funny really, I’ve been using Fireworks for over 10 years now, I can’t work with Photoshop at all. Great to hear that FW is being promoted for UX design and mobile design.

    • 19

      I agree! I started using FW for Web Design during my studies, when everyone else used PS in the class. Now I find mocking up wireframes and UI designs so much easier and more efficient. Creating icons in Ai and copying straight into Fw!

      I could never use PS (very well) but love Ai so I stuck to my guns and learnt how to be great in FW. I guess its a personal challenge. Learning something new, not practicing/using it everyday will alway be uncomfortable for anyone. I have worked and met many designers who have switch from PS to FW, when they were in love with PS, and couldn’t see themselves using a so called “downgraded FW tool”. Now they will not go back to PS except for clear cutting and photo touchup. Just depends on how much you are willing to step out of your comfort zone and discover something new.

      If you spend 40-60 hours a week using a tool, you sure will get better at it right?

      These tips are awesome and I myself learnt a few new things after 4 years of using FW. Many thanks for sharing and hopefully one day people will not frown on designers when they use FW! =)

      Looking forward to more FW articles and tutorials!


    • 20

      I get so angry when I’m given a photoshop file layout for a website…

  14. 21

    Melvin Thambi

    December 4, 2012 1:11 am

    Good Article!..But is there anyway to do this exactly in photoshop cs6? Because I feel more comfortable working in Photoshop rather than fireworks.

    • 22

      Ivo Mynttinen

      December 4, 2012 1:28 am

      I’m pretty sure you can achieve the same results with Photoshop, Illustrator or Sketch. The workflow might be kinda different in each app but I think when you are feeling familiar with the app you are using you won’t have any problems to achieve similar results.

    • 23

      There might be… and everytime more cause they are turning PS into a do-it-all thing instead of specialicing software. But in the same conditions, knowing both PS and FW, the time you invest with the later is always less. So yes, working around you may find a way, but that is it, work arounds and time investing.

  15. 24

    Now Photoshop CS6 have a new option called “align edges”. This option can be used on shape layers even after scaled down with single click. I Love this option. And more often this is more useful for who stick to the Photoshop only.

  16. 25

    Ivo Mynttinen

    December 4, 2012 1:19 am

    Hey guys, I just wanted to explain the section about scaling effect a little more since it seems like not everyone understood this.

    I say that Photoshop live effects does not scale, which is true but might be pretty confusing for Photoshop users. The point is that I’m not talking about Photoshop in this article – I’m talking about Photoshop live effects which are a part of Fireworks (in general they are the same as Layer Styles you know from Photoshop, but don’t have any advanced functionality). Fireworks gives you the option to use Fireworks Filters, Photoshop Live Effects, or both. In Fireworks, Photoshop live effects does not scale, in Photoshop they do.

    This article was not meant as another “Why you should Fireworks instead of xyz” article but more as a general workflow optimization when you are using Fireworks. I’m pretty sure Photoshop or other apps can do a great job as well when you’re designing iOS apps :)

    • 26

      Hi , Ivo Mynttinen,

      Your workflow post is so good and sounds too understandable. I am happy to say it’s very great explanation about each screen by screen. I am new to mobile apps but had good experience on Responsive & Web application UI. I would also like to see if any posts by you related IOS/Android apps UI screen making step by step. And tips & trick for making ldpi to xhdpi screens.

      Appreciate for the great effort!!!!!!!!!!!!


  17. 27

    Maybe this is a bit off-topic but I often find myself in a situation where the web-layout prototypes that I did in FW need to be presented (and then handed over) to the client in a more widespread file-format like a PDF. Unfortunately to my experience FW is not very good at exporting to PDF and what bothers most clients is the low resolution. A 72dpi PDF doesn’t look very smooth in a presentation. Therefore I wish I could – for exporting purposes – like double the resolution.

    • 28

      Ivo Mynttinen

      December 4, 2012 1:41 am

      You could try to double the resolution of all pages with the mentioned techniques in this article and export your document as a PDF after you’ve done this. However, in case you are using some bitmap graphics in your designs (which is common in webdesign) these sections might still look kinda blurry when exported.

  18. 29

    Very good article Ivo, even for people not doing iOS design!

  19. 30

    Joakim Bording

    December 4, 2012 11:48 am

    Great article! Recently used the slicing tool in Illustrator to export iOS designs to png in two resolutions. Discovered a decent process, but your experience in the use of Fireworks shead light on many important aspects I did not consider. Will try to find the comparable tools in Illustrator. Thanks!

  20. 31

    You can fix Xcode by disabling its built-in poor (de)compression and let it you use ImageOptim instead:

    it makes images load faster on iOS.

  21. 32

    ‘Snap to pixel’ – three little words (and a feature I wasn’t aware of) that have made me very happy indeed :)

  22. 33

    Great article. I often thought about switching to Fireworks for UI design, but after discovering Slicy by MacRabbit, I can’t imagine a better way of exporting assets (especially for iOS designs) and it works only with Photoshop, from what I know.

  23. 34

    Another helpful trick for avoiding odd sized elements and spacing when designing @2x in FW is to make the grid 2px by 2px and turn on “Snap to Grid.” That way, anytime you draw or move a shape, it will always be @1x safe. Effects still need to be manually adjusted and you may need to toggle it off occasionally to fine tune some shapes, but not having to constantly think about keeping everything even is great when you’re just trying to let the creativity flow.

  24. 35

    For those who prefer to stick with Photoshop, here’s a collection of 30+ tips to improve your iOS design workflow (in Photoshop)

  25. 36

    There are some really big advantages in FW compared to PS, that you didn’t mentioned.

    1: Open lines – PS only allow closed shapes.
    2: The Path Panel – Where you can do some of the vector tricks available in Illustrator

    For me, that was the reason I switched to FW for UI designs.

  26. 37

    really, i was looking for such a nice function in fireworks in which you can create sharp small icon.



  27. 38

    Great article!

    I was converted to Fireworks about 10 months ago when i started working at an app company called zeebox. Have to say I was a little reluctant to start with as I was a huge Photoshop fan, however I now love it. It makes designing apps so easy and we use it for all of our work.

    Hopefully this article will show others its benefits and convert a few more : )

    Many thanks

  28. 39

    Another awesome plugin for Fireworks is:

    This tool can save so much time in specking you designs for developers and this alone is a really good reason to convert.

  29. 41

    Nice article! I’m a longtime PS/Illustrator user with only a few project using FW. I like the hybrid functionality with Fireworks and now will give it a shot for my prototyping. Thanks!

  30. 42

    I always used Photoshop for digital work, but started using Fireworks over 5 years ago and haven’t looked back. It’s so much easier and quicker for UX and web work.

    It’s just my preference – people use what that are used to – there’s no right or wrong. I urge to people to give it a go though.

    (BTW, the point of ‘FIX BORDER RADII’ and the increasing of pixel radii to compensate, you can change the value to percentages instead of pixels so should scale better)

  31. 43

    I’m stick with FW do my all kinds of digital works. When Im doing something involve image touch up I switch to Photoshop and then bring Bitmap to FW.

  32. 44

    Lembit Kivisik

    January 4, 2013 7:35 pm

    Ivo, thank you. Especially for (1) suggesting “Export Selection” command by John Dunning (I wasn’t aware of this little gem among his uncountable FW goodies) and (2) explaining the pros/cons of the legacy/improved vector rendering options.

  33. 45

    I really do prefer working in FW, but there’s one thing that I really hate about it: The font rendering is awful compared to Ai or PS. It seems there’s no available fix for this problem yet. When Adobe finally manages to fix this issue, FW will be the perfect tool for UI Design.

  34. 46

    You can export items with transparent backgrounds without doing the extensive process you described. First, make sure your canvas has a transparent bg. Next, draw a rectangle, place it directly under the item you are slicing and give the rectangle a blend mode of “erase”. The erase blend mode will make a transparent portal all the way to the canvas. Since the canvas is transparent too, you get a clean transparent bg for your sliced object.

    • 47

      Michel Bozgounov

      January 16, 2013 12:49 am

      It’s true that Fireworks has an “erase” blend mode, that’s a cool tip you’re giving! :-)

  35. 48

    Great tutorial. One thing to consider is that when designing a ui. You take into consideration the status bar. While you have the correct dimensions of the screens, you need to subtract 20px for non retina and 40px for retina from the height.

    Also, an addition that could take you from design to actual code is a tool called JUMPSTART. It takes your layered Fireworks PNG and converts it into an xcode solution with all your layers and views properly placed. If you have several views, it creates your view controllers and segue code for you.

  36. 49


    I’m designing my first app UI, and I’d like to clear up how many I need to design.

    Is it 3 designs, and 3 scaled down versions? One for older iphone and ipod, one for iphone and ipod 5, and one for ipad?

    Or can one design lend itself to all of these and the resolution just needs to be adjusted?

    Thank you for a helpful tutorial, I will be working in Fireworks.

  37. 50

    As a Fireworks user I always have to laugh when Photoshop users had to manually shift vector points back to whole numbers while I just hit cmd+K

  38. 51

    I understand the need to create assets at 2x the dimensions, but what about resolution???

    Your article mentions to have the iOS assets at resolution of 72ppi. In another article ( it mentions using 163ppi for non-retina and 326ppi for retina assets.

    I have been trying to find the official answer for creating iOS assets for mobile app. What is the correct resolution to use for iOS ? There is always this conflict and I can never find the correct answer.



↑ Back to top