Exporting simple JPG buttons - res/size change

[marywithani]

OK - I'm new to Freehand (OK - I used it in college 10 years ago when it wasn't
even Macromedia and came on 13 floppies, but I suppose that doesn't count).
Anyway, I just want to make some simple JPGs, buttons for my website - just
text in this crazy font, GoodDog Plain. When I export as a JPG, I'm selecting
72dpi, anti-aliasing set at 2, and 100% image quality (I'm not sure what
Progressive JPGs are, so I'm leaving that one unchecked). When I plunk my
buttons into Dreamweaver, the text doesn't look very crisp - just kind of hazy.
So, I decided to try saving them at 144dpi. Back in DW (or even when I look
at the images in something like PhotoEditor), the images saved at 144 have
doubled in size. Why is this happening? I called a designer friend of mine
who uses Freehand all the time and she indicated the file would be larger, but
the image itself should stay the same dimensions.

Can someone help?

[maciekk]

While I'm quite new to FH, I'm not new to web buttons ;) --see if that helps:

1. Creating buttons as JPEG is a big no-no. You'll never get it as crisp as
you want, without sacrificing the speed of your page.
2. Export as GIF. Experiment with the resolution you need (actually, on a
webpage it's only a matter of pixel size, resolution is determined by you
visitor's display)--that will depend on your initial size of the object you
want to export. As a result, shouldn't exceed some 150-250px width, as many
screens are still 800px wide.
3. Make sure you visit the "More" section, where you generally want to choose
the smallest quantity of colors for you buttons, but without compromising
quality and readability of your text. If letters appear too jaggy--increase the
amount of colors. If you make it within 32 colors--great, if you make it within
8 colors--you are the best! :)
4. last but not least--drop on FH for making webpage interfaces! go for
Fireworks instead! you have the full control over your web images there!

(why do you people do web content in FH?? I still don't get it...)

Best regards,

[marywithani]

Thanks for the info...

No problem with the width thing - I've already got my template done (except
for the navbar, which I had done but wasn't happy with) and have limited it to
740 wide.

My buttons were originally done by my organization's graphic designer (in
Illustrator, I think) and saved as GIFs, but they were fuzzy then, so I decided
to experiment with JPEGs in FH, which I bought because I have a graphic
designer friend who uses it for everything (though, granted, doesn't do
anything for web). I'm trying to get this website going on my own; fumbling a
bit here, but I'm getting it...

As for color, my organization has two colors it always uses and which I am
also to be using, a violet-navy (pms2756) and a green (pms576). I tried using
RGB, but the blue was not right, so I experimented with the various Pantone
palettes, and found the closest was Solid Matte. Is there any problem with
using these? (am I going overboard?)

And, regardless of whether I use them, I still don't understand why my images
doubled in dimensions when I increased the dpi. ???

[Outta Sight]

On Mon, 26 Jul 2004 19:50:21 +0000 (UTC), "marywithani"
<webforumsuser@macromedia.com> wrote:

>OK - I'm new to Freehand (OK - I used it in college 10 years ago when it wasn't
>even Macromedia and came on 13 floppies, but I suppose that doesn't count).
>Anyway, I just want to make some simple JPGs, buttons for my website - just
>text in this crazy font, GoodDog Plain. When I export as a JPG, I'm selecting
>72dpi, anti-aliasing set at 2, and 100% image quality (I'm not sure what
>Progressive JPGs are, so I'm leaving that one unchecked). When I plunk my
>buttons into Dreamweaver, the text doesn't look very crisp - just kind of hazy.
> So, I decided to try saving them at 144dpi. Back in DW (or even when I look
>at the images in something like PhotoEditor), the images saved at 144 have
>doubled in size. Why is this happening? I called a designer friend of mine
>who uses Freehand all the time and she indicated the file would be larger, but
>the image itself should stay the same dimensions.
>
> Can someone help?

Macromedia Fireworks is much better than Freehand for creating buttons
for web use. Fireworks is also easier to use to create button states
(mouse over, mouse down) that can be exported for use in Dreamweaver.

[maciekk]

ok...

as for the DPI:
1. usually, when you print, increasing DPI will give you more detail, so if
you increase DPI from 150 to 300 DPI on the paper, you theoretically double the
detail level of your picture or text, maintaining THE SAME dimensions.
2. but when you consider a computer screen to be your media, you have to
remember that you cannot force a monitor (set to a certain resolution) to
increase the amount of detail--the grid of your CRT or the amount of pixels in
a TFT matrix will stay the same--pixels cannot be smaller. BUT, if you double
resolution, you double the amount of "detail" or "pixels" in a line, so,
because pixels on screen cannot shrink, the picture becomes twice as big to
compensate that.

as for the color:
1. you would have to convert to RGB anyway--RGB is the default color space for
web (screen). it can be defined by name or hexadecimally, but must be RGB.
2. The spot colors you are talking should convert smoothly to RGB, while RGB
color space is pretty capable (it's a different subject, though), but you might
want to know, that the colors will not be consistent from one monitor to
another, and the only way you can do is to sit back and relax, because no
matter how hard you try, you will never get consistent results on screen, and
users will not calibrate their screens to view these colors as the designers do
(see monitor gamma, for example...)--so just keep the color consistent all
through your website.

I hope that helped a bit. For more details, search Google on RGB CMYK, color
spaces, resolution, gamma and so on.

regards,

[Tom Unger]

Outta Sight;
There is nothing inherently wrong with using freehand for screen
graphics. I often begin more complex graphics for screen in freehand (it has
a more extensive vector toolset than fireworks), then import the freehand
file into fireworks as editable vector for additional work and to export as
image. Optionally you might rasterize a freehand eps export in the image
editor of your choice. -Tom Unger

[marywithani]

Thanks everyone... this has been very helpful... though I still think Freehand
is a great tool, I'm beginning to wish I'd bought Fireworks instead... live and
learn. I'm still annoyed that my funky text buttons seem to be fuzzy no matter
what I do... I will play around with it more tomorrow... Maybe download the
trial vs of Fireworks.

[David Plank]

You should know

Gif files can only have 256 colors. They are good for graphic
elements because they easily display flat even colors. Be sure
when you export from FH that you check the Setup and use exact
palette. Also, you can use dithering to take out some of the
fuzziness but the files will be bigger.

JPEG files have a lossy compression scheme. They are good for
photographs and busy graphics with a lot of blends. Be sure when
you export from FH that you check the Setup and set the
compression to high. The file size will be higher but the image
will be less blurry.

You can also export as eps and open in Photoshop. It has display
to show what the image looks like with different options.

dp

marywithani wrote:

> Thanks everyone... this has been very helpful... though I still think Freehand
> is a great tool, I'm beginning to wish I'd bought Fireworks instead... live and
> learn. I'm still annoyed that my funky text buttons seem to be fuzzy no matter
> what I do... I will play around with it more tomorrow... Maybe download the
> trial vs of Fireworks.
>