View Full Version : logo design how do i make a sharp image

09-16-2007, 09:59 PM
Hi ive been making my own logo's for some time i start of with 800-360 psd image then when finnished save as jpg but it never comes out like the original psd it's always faded and never as sharp, how do i make the images so when i place them on the page there nice and sharp like the original.

09-17-2007, 02:34 AM
jpgs compress the image--- good and bad.
It's smaller, so it loads faster and takes less space/bandwidth. It's also lower quality, so it doesn't look as nice.

There are two choices you can make:

1. Format.
2. Quality.

1. Format options:
jpg is generally used for all photo type images. It compresses the image and uses blocky artifacts that are usually not visible to the human eye (but can be found if you manipulate it later). This will generally keep the quality and detail very high while reducing the filesize a lot. It does lose some of the crisp look of the image, though, and that's just part of putting images on the web sometimes.
gif is generally used for graphics and simple images without a lot of color changes, fades, etc. It will be a fairly small size if your image is simple and lose no quality. However, this "no quality loss" is within the confines of the format which only allows 256 colors in the image. This is VERY limiting for anything from a photo, etc., which makes jpg the right choice. But gif is good for graphics with harsh lines and a limited number of colors.
Note also that gif is the only viable format for animated images on the web. It also allows transparently of a single color in the image to show through to the background beneath it. Both of these features are supported by all significant browsers.
png is a newer and just now becoming fully supported. It is sorta a mix between the two formats and also not great-- because it's not very compressed. Like gif, it is "lossless", but this is really the case, without limiting to 256 colors. (There is an 8 bit version of pngs, which will be similar to gifs in that sense, though, but this is rarely used from what I've seen.)
PNGs, then, are much larger files in most cases than jpg and gif, but they are full quality. It's a nice format because it does compress the data to a smaller filesize without losing any data. It's good for storage in that sense. But for the net, it generally is too big.
PNG also has some beta versions that include animation, though these are not supported in any browsers yet.
Full alpha transparency (varying levels, not just "yes or no" per pixel) is also supported. It was problematic in IE6 and needed a workaround, but now IE7 supports it fully.

2. Quality options:
After picking a format above, you can, within each, use a few options to determine the final size:

jpg quality is based on a scale from 0-100, with lower being more compressed-- worse looking and smaller size.
There is rarely ever a point in using anything above 80%, as that will be very close to full quality. 100% still looses some data and you likely won't be able to see the difference from 80%. Never use jpg to store any image. (Keep a .psd, .bmp, .tiff, .png, etc., as a backup for later editing. Reediting a jpg will cause artifacts.)
0% looks terrible for the most part.
For some thumbnails and basic images you can get away with 5-10%.
Usually, 30% is quite acceptable for images on a page.
However, for high quality, 60% can be better.
The quality needed can be depend on the image as well.
Also, the filesize is not a linear relationship with the quality. It's more exponential.
As an example, just approximate numbers:
0%: 15kb
20%: 25kb
60%: 60kb
80%: 120kb
100%: 270kb
With each, you would see a noticable difference in quality, though.
JPG also has a couple other options (available only in some programs, such as photoshop):
blur-- this will soften the image, but make the filesize much smaller. It can actually end up giving you higher quality/detail for a smaller size, if used correctly.
progressive-- this will load the image in parts, either line by link or chunk by chunk, or in passes, each making the image less and less pixelated. standard is 3 passes.

a gif image is basically as-is. The only option you have here is how many colors are allotted. With a very basic image, you can get away with just 2 colors, and that's GREAT for filesize. number of colors (1-256) is approximately a linear relationship with the filesize. Obviously you will lose quality-- color-- when lowering the number of options in the pallette.
You can counter this to some degree by specifying a particular, or even custom, pallette of any 256 colors. Some programs will do this automatically by finding the most common colors, though it might be a good idea to help as well, especially if a certain pixel needs to have a color and that isn't included.
The other options with gif include dithering, which is a method to approximate colors that don't exist in the palette, or "closest color" which would simply use the closest color, without trying to fade to it. Dithering will create a dotted look, but, from afar, simulate more colors.
Animated gifs also have a few options, like limiting repeated frames, etc.

No options here, except what type of transparency, which may change the filesize some, especially with full alpha transparency which would add another bit of data per pixel.
As I mentioned above, there is an 8bit mode with indexed color like gif, but I don't see the use.

Other formats:
bmp seems to be fairly supported in most browsers, but no point in that. Just use PNG if you want no quality loss.

If you want to post your specific image, I could try to give some input on how to best save it.