Sometime around 4/1/10 (at 09:42 -0500) Robert B said:
If I bring an Illustrator file into FW as a background image, what
type of image does it make?
For that, I think it makes a JPEG automatically, although I can’t
remember off the top of my head.
Anyway, you may get a slightly better result if you open the original
graphic in Photoshop and use Save for Web to make a
carefully-optimised GIF. Or a carefully-optimised JPEG. The real deal
is the care you take in getting the output settings just right.
Subtle gradients can sometimes need delicate work to look really good
with no posterising or faint colour banding in the final web-ready
graphic. Sometimes you can get dramatically cleaner results if you
add just a hint of noise before producing the web-optimised image!
Sometime around 4/1/10 (at 15:52 +0100) Omar KN said:
if there’s a gradient and it is repeated (tiled) that will reproduce
the gradient and give an incongruous impression, try have it 1 px
You’re absolutely right in noting that it is a tad difficult to be
truly confident about suggestions without seeing the page in question.
It is best to avoid using background images that require a large
number of tile repeats to fill the browser window. This puts a strain
on the browser’s memory handling and slows down the drawing and
redrawing of the page when it is rendered. A 1px-wide graphic set as
a tiling background image would be a real problem I’m afraid!
And actually Bob, even 5px is a bit on the narrow side. A good
general size for the width (or height, depending on the design) is in
the 30px region. That sort of size should allow for pretty small file
sizes yet not stress the browser or slow down page rendering to any
The trick is creating a really clean gradient that tiles seamlessly.
Make sure the gradient is precisely vertical (or horizontal, as
required) and that whatever tool is used to create the final
web-ready format doesn’t produce artifacts that cause visible
As mentioned previously, banding and colour artifacts in subtle
gradients can be a real problem. The slightly counter-intuitive step
of adding a subtle bit of noise can lead to a much smoother and
glitch-free final output.
I prefer to do critical gradient preparation in Photoshop and have
the noise on a separate layer so I can return to it and alter
settings as required. (Although sometimes I’ll make the original
gradient in Freeway and export it as PSD, so that I’m working with
Sometime around 4/1/10 (at 11:21 -0500) Robert B said:
lots of back and forth to check the gradient!
One last thing - the appearance in Freeway’s design view isn’t
necessarily exactly the same as the appearance when rendered by a
Check the Document tab of the Document Setup dialog; choose File >
Document Setup. The ‘Document graphics’ item there defaults (I
believe) to “Thousands” of colours (i.e. 16-bit rather than 24-bit),
which is absolutely fine for general work.
Note that this is just for the on-page cached images that you push
around in your layouts; Freeway will always generate the final
graphics from the original source files, so this doesn’t mean your
published work is based on 16-bit images.
(…UNLESS you lose your originals. In that case Freeway will have to
use the image data that’s cached in your document.)
Me, I set my Document graphics to Millions, and I suggest you do so
too. The Freeway files will be a little larger, but I’m covered a
little better in case I lose images. And the Freeway design view will
be a bit more precise, too.
Why have I gone on about this? Just that you might be trying to judge
the final appearance of a subtle gradient based on a ‘good enough’
16-bit render in the design view of Freeway. That’s normally fine,
but it isn’t quite as precise - and you might notice the difference
in this kind of case.
Sometime around 4/1/10 (at 11:57 -0500) Robert B said:
Thanks for the heads up. I do publish each time to check my work.
Freeway’s built-in preview uses the same WebKit engine as Safari, so
that’s a useful way to preview quickly and accurately. It only
requires the current page to be built, which is handy if you’re
working on a larger site with a lot of complex, slow-building pages.
Sometime around 4/1/10 (at 16:26 -0500) atelier said:
You talk about JPEG as bg image. What’s your opinion about using PNG 24?
PNG-24 (PNG at ‘millions’ of colours, or ‘millions+’ in some apps) is
only really useful when you’re dealing with images that need 8-bit
transparency. Otherwise the file size is generally rather high for
what you get. I think there are also some lingering issues with older
versions of Internet Explorer and PNG as background images, but I
don’t have details at my fingertips.
If you want high-quality images and you don’t need sophisticated
transparency I’d recommend using JPEG set to a high quality level.