PNG formats: 32-bit, 24-bit or 8-bit

I recently found myself scratching my head trying to figure out the different PNG formats found in Photoshop and Fireworks. Photoshop has two options: PNG-24 and PNG-8. Fireworks on the other hand appears to have these plus an additional option called PNG 32. So are Fireworks 32-bit PNG files higher quality then Photoshop? Actually they are not.

The Photoshop PNG-24 and the Fireworks PNG 32 are pretty much the same thing only labeled differently. It's confusing especially since both programs are Adobe products so you would think they would use the same naming conventions. In any case, the difference is in how they refer to the alpha channel which gives the file trancparency. The 8 extra bits in Fireworks PNG 32 fies represent the alpha channel so these files is really 24bit color with an 8bit alpha channel. This is why when you select PNG 24 in Fireworks there is no option to use trancparency. Photoshop on the other hand uses the PNG-24 label to refer to both transparent and non-tranparent PNGs and instead of calling the two different names, just has a checkbox to turn the alpha channel on or off. So in the end it's the same thing just two different ways of presenting it.

Where Fireworks has the upper hand is actually on the smaller PNG files refered to as PNG 8. Unlike Photoshop, Fireworks offers two types of tranceparency for PNG 8: Index Transparency and Alpha Transparency. Think of Index Transparency like the old tranparent Gif files that had the rough edges while the Alpha Transparency is more like what you would see in a higher quality PNG file. The real difference is that Alpha Trancparency supports semi tranparent objects and colors while Index Tranceparency shows pixels as either fully transparent or fully opaque. Unfortunately Photoshop does not offer this option so for 8-bit PNGs making Fireworks the obvious choise in this area.

One thing to note however is that not all graphics will look good compressed to 8-bit. In particular you want to be careful of large detailed photos and gradients (especially tranparent ones) which require more color information to display nicely. For icons and graphics with few colors, using 8-bit PNGs can greatly reduce the size of your web graphics so use it where you can but don't just compress all of your graphics and assume they will look perfect when rendered in the browser.

Fireworks Tip - Measure pixel width and height with guides

One of the great things about Adobe Fireworks is it's ability to quickly get accurate pixel measurements. Believe it or not, this can be a little bit of work in Photoshop but thankfully is a breeze in Fireworks. First of all it's worth noting that the pixel dimensions of any selected object (or layer) are always displayed in the Properties panel (see screen shot below).
This is great but sometimes life gets more complicated. For these instances it's nice to know that you can pull guides out from the rulers and measure the distance between them holding down your Shift key. You will need to have the Pointer Tool (Black Arrow) selected when you do this. Then simply hold down your Shift key and move your mouse between the guides you want to know the distance between. You will instantly see both the vertical and horizontal measurements (see screenshot below).
This is also handy to use when setting up Guides for mockups. If you know an area of your site mockup needs to be 300px across you can quickly drop a guide down to objects will snap to it. Holding down the Shift key while dragging a third guide in the middle will even show you the distance on either side of the new guide allowing you to find the middle point quickly. This an easy to use yet powerful and time saving feature. Once you get the hang of it, you'll wonder how you got anything done without it.

Creating PDFs that display mockups at actual size

Adobe Acrobat works great for sharing proofs for print projects but lets be honest. If you are creating mockups for a website or simply want to convert screen captures into a PDF, it can be quite frustrating. Doesn't matter if you use Photoshop, Fireworks or some other design program. Saving to, exporting or printing to a PDF is almost always sure to produce a blurry and noisy image. Also just as disturbing is the fact that Acrobat won't display the file at the same size as what you originally created it at but instead usually shows an enlarged version when you select 100% in Acrobat. Sure there are other ways to deliver mockups but the company I work for really prefers PDFs so I decided to figure out a reliable way to get a decent looking PDF of my site mockups. As I started researching for answers on the internet I was shocked at how little information there is on this. All I really wanted to do was have my PDF display muliple mockup images as pages at the same size and quality as if I exported them to PNGs...is that to much to ask?

The good news is it is possible and even better, it's not that difficult to do once you do some initial setup. In fact I'm shocked that Adobe hasn't addressed this themselves as their export to pdf option from Fireworks is pretty much worthless in my opinion. Enough of me venting though. Onto the solution.

First a summary of how this works. By default Adobe Acrobat has a Custom Resolution setting set at 110 pixels/inch (found under Edit>Preferences>Page Display). This needs to match the resolution of the files you create. Most designers that I know don't work at 110ppi but when working on something destined for the screen, the resolution really makes no difference (just the actual number of pixels). You could tell everyone who views your PDF to change their Acrobat Resolution setting to 72, 96 or whatever your ppi of choice is but the more obvious solution is to start working at the default 110 resolution to begin with. Trust me, it won't make your files larger or look any different as long as you don't change the actual number of pixels wide by tall. Very few people know or care that this setting exists in Acrobat so you can pretty much count on 110ppi being the setting on your clients system.

Alright now that you understand the resolution bit, let's move onto some settings in Adobe Acrobat. You will only have to set these up one time on your system. Open up Adobe Acrobat (of course you will need the full version...not just the viewer). Note that my directions and screen shots are for Adobe Acrobat 9 Pro but should be similar on other versions.

1. Select Edit then Preferences
2. Under Categories: click on Convert To PDF
3. Under Converting To PDF click on PNG
4. CLick the Edit Settings button
5. Under Compression use the drop down by Color to select JPEG (Quality : Maximum)
6. Click OK button to save and close Adobe PDF Settings
7. Click OK button to save and close Preferences

What this does is tells the program that any time you use Acrobat to convert or combine color PNG files, you want it to compress them very little keeping most of the quality. Of course this makes for bigger file sizes but I prefer that then having a client become distracted by jpg noise which becomes more obvious in screen captures then it would in a photograph.

So now that you have Acrobat all setup, you should create or save out your 110ppi mockups as individual PNG files. It's also helpful if you number them sequentially. I usually export them all to a new folder where I can then select all of my PNG files that I want to combine into a PDF. Then I right-click the files and select Combine supported files in Acrobat..... Note that it also works to combine them in Adobe Acrobat once the program is open but this way just seems easier to me.

A Combine Files window opens in which you can reorder your files if desired. Once you have them ordered, click the Large File Size button found at the bottom right of the window (just above the Cancel button). Then click the Combine Files button and wait a few seconds while Acrobat converts the files into a single PDF.

You are now basically finished but there is one more step that I always make sure I do. With the newly combined PDF open...

1. Select File then Properties
2. On the Initial View Tab use the Page layout: dropdown to select Single Page
3. Also on the Initial View Tab use the Magnification: dropdown to select 100% - or Actual Size (seems to be the same thing)
4. Click OK button
5. Be sure to save your file after you change these settings

This forces the file to open up scaled to 100% so you can be very confident that your client will open the file and see exactly what they should expect to see on the finished website. It really does impact a client's perspective of a design if they are viewing it at a reduced or enlarged size so you want to be as accurate with this as possible.

And there you have it. Your PDF mockups have never looked so wonderful and depending on the number of pages and there size, you can can now create them in a matter of seconds for you client in a matter of seconds.