Photoshop vs. Fireworks: Which Is Best for Web Design?
Jun 04 2010
Photoshop and Fireworks are the two most popular applications used to design websites and pages, but often designers are familiar with only one and not the other - or, in the case of beginning designers, they don't know which application to use. Both Photoshop and Fireworks have strengths and weaknesses, and it’s important to know where each excels or falls short when deciding which is best for your web design projects. To help you make this decision, I’ve broken down the pros and cons of both. h2. Photoshop (PS) Photoshop was created by brothers Thomas and John Knoll. The first version (0.63) was released in 1988, and the 1.0 version was launched in 1990. The main purpose of the application has remained the same since its inception: to edit and manipulate images and photos. 
h3. Photoshop PROS: * Photoshop is the most popular software on the market for photo editing and design; it’s a market standard. * Layer styles make it easy to have several different effects in a single object or layer. * PS has a wide range of filters, which can be used to improve photos or bitmap areas. * PS’s sharp image processor allows for an excellent preview of your work and the ability to detect even the tiniest imperfection. * PS has great font management and font preview features, as well as adjustment layers, layer comps and blending effects, all of which can help you easily refine your design. * PS’s professional colour-management tools are second-to-none. * Smart Objects lets you duplicate an object and change its properties without affecting the original. h3. Photoshop CONS: * It's a heavy application for any basic computer. It takes up a ton of processing power and memory. * It was originally developed for photo/image manipulation, so it doesn’t always feel intuitive when using it for web design. * It can be difficult to manage different versions of the same file. You need to duplicate content in order to have more than one version of the file, which can be time-consuming. * Files get usually large in size, approximately 15MB for a single-page composition. * The Smart Object feature isn't so smart if you accidentally delete all the objects from the composition. There's no library or other back-up storage option for the Smart Objects. * The positioning of layers and objects can be imprecise and annoying. You can't handle graphics inside PS with a pixel-by-pixel approach. You end up with border artifacts, especially when using vector objects. * It can be difficult to save and export to the web with PS – the files are large and the process requires a steep learning curve. h2. Fireworks (FW) Fireworks is a software based on "xRes":http://en.wikipedia.org/wiki/XRes, which was an application built by Fauve Software and later acquired by "Macromedia":http://en.wikipedia.org/wiki/Macromedia.
Fireworks is a hybrid application, which means it can work with bitmap and vector graphics together. It can easily handle large files, even those larger than what can be stored in the memory. This leads to impressively lightweight and fast performance. In 2005, when Macromedia was acquired by "Adobe":www.adobe.com, FW was brought into the "Adobe Creative Suite 3":http://en.wikipedia.org/wiki/Adobe_Creative_Suite#Creative_Suite_3 as a web design and quick-prototyping tool. h3. Fireworks PROS * Fireworks is (and always has been) a tool developed to create and edit websites, not just edit photos. * FW is lightweight in memory usage and handles files very quickly. * FW has an excellent mix of both vector and bitmap tools. * It’s flexible – it can open and export PSD files. * The source file (.PNG) is very light and remains small, usually about 10MB. * FW makes slicing and exporting small parts of a composition simple. * You can be pixel-perfect when moving objects. You can also move objects by typing the distance. * It’s easier on your wallet! Fireworks’ pricetag is a third of Photoshop’s. * Fireworks has three great features for creating a website: ** Pages - Excellent for managing all the pages of a web project inside a single file. ** States - Also called "Frames" in older versions. Perfect for creating different versions of the same page. ** Symbols - Very handy for creating, saving and managing different symbols. h3. Fireworks CONS * The software is still not as popular or common as Photoshop. * FW has had problems with constant crashes and bugs. However, in "version CS5":http://www.adobe.com/devnet/logged_in/bbowman_fwcs5.html, Adobe says there are improvements to stability and file recovery. * Some layer effects can get missed or show unexpected results when exporting to layered PSD files. There’s no "pass through" option for layer folders. * The text rendering (font processing engine) on Fireworks is still not quite as powerful and sharp as in PS. * FW lacks tools and options to edit photos and add photo effects. * The preview sometimes has image artifacts on it, especially with sharp vector graphic corners. * Other apps can't open the same FW .png file with all the layers and additional info. You get a flattened file only. After considering all of these pros and cons, my vote would be for Fireworks as the best tool for web design. If you’ve used both, leave a note in the comments and tell us which you prefer and why.
Splashes from guidebookgallery.org
h3. Photoshop PROS: * Photoshop is the most popular software on the market for photo editing and design; it’s a market standard. * Layer styles make it easy to have several different effects in a single object or layer. * PS has a wide range of filters, which can be used to improve photos or bitmap areas. * PS’s sharp image processor allows for an excellent preview of your work and the ability to detect even the tiniest imperfection. * PS has great font management and font preview features, as well as adjustment layers, layer comps and blending effects, all of which can help you easily refine your design. * PS’s professional colour-management tools are second-to-none. * Smart Objects lets you duplicate an object and change its properties without affecting the original. h3. Photoshop CONS: * It's a heavy application for any basic computer. It takes up a ton of processing power and memory. * It was originally developed for photo/image manipulation, so it doesn’t always feel intuitive when using it for web design. * It can be difficult to manage different versions of the same file. You need to duplicate content in order to have more than one version of the file, which can be time-consuming. * Files get usually large in size, approximately 15MB for a single-page composition. * The Smart Object feature isn't so smart if you accidentally delete all the objects from the composition. There's no library or other back-up storage option for the Smart Objects. * The positioning of layers and objects can be imprecise and annoying. You can't handle graphics inside PS with a pixel-by-pixel approach. You end up with border artifacts, especially when using vector objects. * It can be difficult to save and export to the web with PS – the files are large and the process requires a steep learning curve. h2. Fireworks (FW) Fireworks is a software based on "xRes":http://en.wikipedia.org/wiki/XRes, which was an application built by Fauve Software and later acquired by "Macromedia":http://en.wikipedia.org/wiki/Macromedia.
Splashes from guidebookgallery.org
Fireworks is a hybrid application, which means it can work with bitmap and vector graphics together. It can easily handle large files, even those larger than what can be stored in the memory. This leads to impressively lightweight and fast performance. In 2005, when Macromedia was acquired by "Adobe":www.adobe.com, FW was brought into the "Adobe Creative Suite 3":http://en.wikipedia.org/wiki/Adobe_Creative_Suite#Creative_Suite_3 as a web design and quick-prototyping tool. h3. Fireworks PROS * Fireworks is (and always has been) a tool developed to create and edit websites, not just edit photos. * FW is lightweight in memory usage and handles files very quickly. * FW has an excellent mix of both vector and bitmap tools. * It’s flexible – it can open and export PSD files. * The source file (.PNG) is very light and remains small, usually about 10MB. * FW makes slicing and exporting small parts of a composition simple. * You can be pixel-perfect when moving objects. You can also move objects by typing the distance. * It’s easier on your wallet! Fireworks’ pricetag is a third of Photoshop’s. * Fireworks has three great features for creating a website: ** Pages - Excellent for managing all the pages of a web project inside a single file. ** States - Also called "Frames" in older versions. Perfect for creating different versions of the same page. ** Symbols - Very handy for creating, saving and managing different symbols. h3. Fireworks CONS * The software is still not as popular or common as Photoshop. * FW has had problems with constant crashes and bugs. However, in "version CS5":http://www.adobe.com/devnet/logged_in/bbowman_fwcs5.html, Adobe says there are improvements to stability and file recovery. * Some layer effects can get missed or show unexpected results when exporting to layered PSD files. There’s no "pass through" option for layer folders. * The text rendering (font processing engine) on Fireworks is still not quite as powerful and sharp as in PS. * FW lacks tools and options to edit photos and add photo effects. * The preview sometimes has image artifacts on it, especially with sharp vector graphic corners. * Other apps can't open the same FW .png file with all the layers and additional info. You get a flattened file only. After considering all of these pros and cons, my vote would be for Fireworks as the best tool for web design. If you’ve used both, leave a note in the comments and tell us which you prefer and why.
Learn from us
Sign up and receive our monthly insights directly in your inbox!
