I’ve created an image for a background gradient in Illustrator (5px wide 850 high), but when I bring it into FW and preview in browser the gradient doesn’t look smooth.
If I bring an Illustrator file into FW as a background image, what type of image does it make?
What can I do to make the gradient look smoother?
Thanks.
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
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!
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 4 Jan 2010, at 15:42, Robert B wrote:
(5px wide 850 high), but when I bring it into FW and preview in
browser the gradient doesn’t look smooth.
Well without seeing the image itself,
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 only.
Omar
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So, if I make a JPEG through PS and use it as a bg image in FW, will FW JPEG it again?
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well, if I import a GIF or JPEG, FW doesn’t tile it?
Any idea why that would happen?
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 4 Jan 2010, at 16:23, Robert B wrote:
if I import a GIF or JPEG, FW doesn’t tile it?
tiling you do in the inspector (vertical or horizontal),
this is irrelevant of the image being gif or jpg.
Omar
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yeah, I screwed something up on that last one.
Still working on smoothing it out.
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
if I import a GIF or JPEG, FW doesn’t tile it?
Either you imported it as a regular graphic instead of a background
image - or the background image settings were for it not to tile.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
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
only.
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
significant degree.
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
repeating marks.
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
site-specific colours.)
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the info, Keith.
I’ll make it 30 px. Yes, lots of back and forth to check the gradient!
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
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
browser.
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.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the heads up. I do publish each time to check my work.
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
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.
Wise. 
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.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi
Xcuse me chiming in here.
You talk about JPEG as bg image. What’s your opinion about using PNG 24?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
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.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks. Just wondered, because I see here and there PNG gradients around as background tiled images. And thanks for the tip to add some noise to improve things. Never thought of that.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
8-bit PNGs are particularly good with gradients, so unless you have some other info in the image (from a photo for instance), or transparency, then they could be a good way to go too.
See here for more info:
Joe
On 4 Jan 2010, at 21:50, atelier wrote:
Thanks. Just wondered, because I see here and there PNG gradients around as background tiled images. And thanks for the tip to add some noise to improve things. Never thought of that.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Nifty info! Thanks. There are a few wrinkles involved when you look
more closely, but it is well worth trying.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options