spaceing

[Steve Hart]

I created an image in photoshop that contains a circle with
checkerboard around it. When I save it as a jpeg there is whitespace
where the checkerboard used to be. How do I get just the circle to be
the visible image?

~THANKS

[Duncan Kennedy]

Post by Steve Hart
I created an image in photoshop that contains a circle with
checkerboard around it. When I save it as a jpeg there is whitespace
where the checkerboard used to be. How do I get just the circle to be
the visible image?

Although I have used Photoshop for years I never enough to become an
expert. However, just a thought until somebody else comes along: Have
you tried flattening the layers before saving?

[Your Name]

Post by Steve Hart
I created an image in photoshop that contains a circle with
checkerboard around it. When I save it as a jpeg there is whitespace
where the checkerboard used to be. How do I get just the circle to be
the visible image?
~THANKS

The "checkerboard" area in Photoshop is used to indicate which parts of the
image are transparent / see through ... but JPEG image format doesn't have
the ability to store transparency, so when you save the image as a JPEG,
that transparent area becomes white (or any other colour depending on
settings).

If you do need the image to have transparent areas or areas that at least
appear transparent, then there are four main options:

Option 1.
You can colour the transparent areas in Photoshop to be the same colour as
the background the JPEG image will be displayed on. Obviously not much use
if the background is a complicated pattern or photo / logo.

Option 2.
Instead of using JPEG, save the image as a GIF image since the GIF format
does store transparency. There are two problems here. Firstly the GIF format
only stores for 256 colours, but that may not matter if the circle is really
white. More importantly, the second problem is that although GIF does allow
for transparency, it only uses one colour as being transparent, which means
Photoshop's antialiasing on a edges of the circle (or a diagonal line) won't
work and the result will probably look blocky and horrible.

Option 3.
Instead of using JPEG, save the image as a PNG image since that again does
store transparency, and I think works for antialiasing. The problem here is
relatively minor, but although PNG is now technically one of the standard
web image formats, it can still be a nuisance, especially on older computers
/ web browsers where they can be slow or won't display at all.

Option 4.
Create the circle as a Flash image (or the almost-established HTML5), but
many people turn off Flash because it is a nasty, resource hungry kludge
that is best avoided, especially if creating websites for use on Apple iOS
devices which, thankfully, do not have Flash support.


There are a few other formats similar to Flash which require users to have
extra plug-ins for their web browser, so aren't really worth even naming.

Helpful Harry :o)