As a front-end developer, I get sent PSD's in all kinds of formats (even at 300dpi a couple of times), and it makes life really difficult when using Fireworks (my preferred weapon of choice) to slice mockups that have been designed in Photoshop, or even worse, Illustrator.
So why not use Photoshop I hear you ask? Because Fireworks is much more geared towards helping you slice mockups and present web design layouts.
Photoshop is a powerful image manipulation tool… Fireworks is for designing web layouts.
A lot of people feel they have to choose between Fireworks OR Photoshop, but they are not the same type of programme. Photoshop is a powerful image manipulation tool (clue is in the title!), and Fireworks is for designing web layouts. Photoshop and Illustrator should be used to enhance design elements of a web layout, and use Fireworks for its intended purpose.
Here’s a sample of some of the delightful tools that Fireworks has to offer to make your life as a web designer easier:
You can design multiple pages in one document without the need for hundreds of confusing layers. You simply flick between them – easy peasy!
If you have specific areas that you want to duplicate across all pages, such as headers and footers, then you simply drag your master page (Page 1 in this case) into the ‘New page’ icon at the bottom, and it will duplicate whatever is on that page. So set up your base areas first and you’ll be away!
2. Awesome PNG support and image compression
It’s all there ready for you to use, all you need to do is go to File > Image Preview and you’ve got everything you need to compress images and create transparent PNG 32 files, which unlike GIF’s, PNG8 and PNG24 have full alpha transparency (great photo quality with perfect transparency on things like drop shadows). This isn’t supported by IE6 – but check out this article by Drew McLellan. This should sort you out with everything you need for IE6 PNG32 support.
Photoshop does also support this but Fireworks just does it better, it’s quicker to export stuff, no where near as much beach balling and it also compresses files creating drastically smaller files. Given a particular image Fireworks exported a PNG24 @ 704kb, Photoshop only managed 804kb with the same settings.
3. Easy layer selection & rounded corners
Click on the image / text you want on the canvas, and it’s instantly selected. I understand if your roots are in Photoshop you find it easy to hold CMD then click, but why the need for the extra button pushing? In Fireworks you can easily change text by double clicking on the text, and easily manipulate shapes and images just by clicking on them.
Not only that, but Photoshop users will be delighted to know you can easily select and create boxes with rounded corners, and very easily change the radius of those corners.
The colours in Fireworks are already set up for web. I’ve often had PSD’s sent to me to slice up, and it’s not until the CSS / HTML is in place it’s noticed that the colours are slightly off. This is because of different colour presets in Photoshop that are set up for print or other mediums. Fireworks only has 1 colour preset so you know the colours you’ve chosen will be on the final website.
5. Slice tool
Although this feature is also available in Photoshop, the slice tool in Fireworks is another feature which makes it great for slicing PSD/PNG’s.
To use it, select the Slice tool, highlight the image you want to export, click and drag the mouse over. Once you’ve made your selection, you can then name the slice in the Properties panel. Right click on the slice and go to export selected slice and you can save it to your desired location.
You can also select one, or multiple elements (by holding down shift and clicking on each element), and right click to ‘Insert Polygon/Rectangular Slice’ which will draw a slice around each element individually, or as a group, saving you the bother of getting it pixel perfect.
6. User interfaced mockups
This is a series of tools used to help you demonstrate website specifics to a client – such as certain usability aspects; mouseovers, search functions, forms, etc, without the need to do any HTML. By using Pages (point 1) with a combination of features like Symbols, Common Library and Assets you can create all the elements you need to demonstrate to a client exactly how these states will work. It takes only a few minutes and saves you having to explain every detail with multiple mockups.
For a great tutorial which explores some of these features check out Adobe’s own Creating user interface mockups with Fireworks.
7. Vector based design
Unlike Photoshop which is bitmap based, Fireworks does not only handle bitmaps but it’s also a vector based image programme, meaning it’s perfect for drawing lines and shapes – just what you need when mocking up a website!
I would love to see more web mockups designed in Fireworks and sent to me in layered PNG format, it would make the job of slicing mockups a lot easier and there will be no questions about formats or colours.
A lot of people class themselves firmly in the school of either Photoshop or Fireworks, but I say why choose?
A lot of people class themselves firmly in the school of either Photoshop or Fireworks, but I say why choose? These tools are designed to work together and to be used in unison to make designing websites as painless as possible.
We’d love for you to tell us your reasons for choosing Fireworks over Photoshop or vice versa! Use the comments form below :)