Creating non-square graphic for web page that uses a background pattern
t...@infi.net
I want to create a small graphic (ellipse) that appears as an ellipse
that's on top of the background of the webpage. Using PSP all I seem
to be able to make is one that's in a white, squared-off background
that obviously doesn't fit in with the background.
I've tried exporting it as a JPG, GIF, and PNG (my preference).
Is what I'm trying to do impossible??
thanks for any help,
sam
Kris Zaklika
No. It's discussed in the FAQ:
http://campratty.com/1faq/faqpages/1.html
> thanks for any help,
>
> sam
--
----------------------------------------------------------------------
Kris Zaklika Jasc Software, Inc. The
Product Ideas: id...@jasc.com Power
Customer Service: customer...@jasc.com To
Technical Support: tec...@jasc.com Create
----------------------------------------------------------------------
Leslie
>I've got a web page (frontpage) that uses a background pattern.
>
>I want to create a small graphic (ellipse) that appears as an ellipse
>that's on top of the background of the webpage. Using PSP all I seem
>to be able to make is one that's in a white, squared-off background
>that obviously doesn't fit in with the background.
Open a new image large enough to hold your ellipse. Select a
background color very close to the dominant color in your page's
background pattern.
After you've created your ellipse use the crop tool to bring the edges
of your rectangle down to as close as you can get to the ellipse. Now
save your graphic as a transparent .gif.
When added to your web page all that should be visible is the ellipse.
Does this help?
Leslie
Leslie's Audio Trivia
http://www.bessiebee.com/Trivia/
t...@infi.net
Actually, the corners still show pretty clearly the difference. The
background pattern of the page is sort of a blue thread and the
difference can't really be hidden by trying to make PSP's background a
single color.
I would've thought this was something pretty common, but I guess not.
I guess I'm not sure what "transparent" means to PSP, but the
resulting ellipse's "container" is anything but transparent on my
webpage.
thanks,
_sam
t...@infi.net
Unless I'm completely misreading the FAQ to which you referred me.
thanks,
sam
On Sat, 30 Mar 2002 14:45:20 -0600, Kris Zaklika <kzak...@jasc.com>
wrote:
Kris Zaklika
>
> Thanks, Leslie.
>
> Actually, the corners still show pretty clearly the difference. The
> background pattern of the page is sort of a blue thread and the
> difference can't really be hidden by trying to make PSP's background a
> single color.
>
> I would've thought this was something pretty common, but I guess not.
It is common but it takes some understanding of the limitations
of file formats.
> I guess I'm not sure what "transparent" means to PSP, but the
> resulting ellipse's "container" is anything but transparent on my
> webpage.
You may want to read this link. It explains the difference
between "real" transparency like that in PSP or PS and GIF
transparency.
http://groups.google.com/groups?selm=3C110448.703B3E05%40jasc.com
> thanks,
> _sam
>
> On Sat, 30 Mar 2002 22:13:51 GMT, crtr...@mchsi.com (Leslie) wrote:
>
> >On Sat, 30 Mar 2002 20:34:43 GMT, t...@infi.net wrote:
> >
> >>I've got a web page (frontpage) that uses a background pattern.
> >>
> >>I want to create a small graphic (ellipse) that appears as an ellipse
> >>that's on top of the background of the webpage. Using PSP all I seem
> >>to be able to make is one that's in a white, squared-off background
> >>that obviously doesn't fit in with the background.
> >
> >Open a new image large enough to hold your ellipse. Select a
> >background color very close to the dominant color in your page's
> >background pattern.
> >
> >After you've created your ellipse use the crop tool to bring the edges
> >of your rectangle down to as close as you can get to the ellipse. Now
> >save your graphic as a transparent .gif.
> >
> >When added to your web page all that should be visible is the ellipse.
> >
> >Does this help?
> >
> >Leslie
> >Leslie's Audio Trivia
> >http://www.bessiebee.com/Trivia/
--
Kris Zaklika
--
t...@infi.net
But my webpage's background is not a solid color, it's a pattern.
And, although reading about PSP's technical definition of transparent
is interesting (thanks for the reference), I needed to know if I can
make a GIF, JPG, or PNG ellipse transparent to the human eye on a page
with a background pattern that's not a solid color.
If I can't, fine; I'll just consider using a solid color for the
background. It just seemed to me it would be a common need.
And if PSP7 can't do it, can any other graphics program do it, or is
it a fundamental limitation of graphics (or the known universe ;-) ).
thanks again,
sam
On Sat, 30 Mar 2002 17:02:07 -0600, Kris Zaklika <kzak...@jasc.com>
wrote:
>t...@infi.net wrote:
Kris Zaklika
>
> Thanks,
>
> But my webpage's background is not a solid color, it's a pattern.
This is something that is confusing you but is not really
relevant to turning part of your image transparent as I
will try to explain later.
> And, although reading about PSP's technical definition of transparent
> is interesting (thanks for the reference), I needed to know if I can
> make a GIF, JPG, or PNG ellipse transparent to the human eye on a page
> with a background pattern that's not a solid color.
I'll answer in reverse order. You can make a PNG transparent
but many browsers don't support PNG transparency properly.
You can't make a JPEG transparent at all. You can make a
GIF transparent - at least you can label one color in a GIF
transparent. Whether the background of your page is a solid
color or a pattern is irrelevant to making transparency.
Because the GIF background color will be labeled transparent
it could be any color at all, including a color not anywhere
on your web page. You really don't care what it is because
you can't see it since it's transparent. Instead, through
this transparent color you will see your web page background
pattern. However, there is a reason to use a color close to
your web page background and it is the following. If you
place an object in your image and antialias the edges, these
edges will have a gradual transition from background to object
color. But, since only the actual background color can be made
transparent, this can leave you with a halo of color similar
(but not identical) to the background surrounding your object.
The halo is not noticeable when the image background that was
turned transparent was originally exactly the same color as
the page background. When you have a patterned background
there is, of course, no one color that matches the page
background. You then have two choices: (1) do not use
antialiasing on your object, or (2) make a copy of your
page background and apply very heavy blurring to it (e.g.
Effects > Blur > Gaussian Blur) until the pattern turns into
a uniform color. In case (2) you would use this blurred
uniform color as the background for your image. Place your
object on this background. Merge image layers if your object
is on a separate layer from the background (as it would be
if you use a vector object). Then do File > Export > GIF
Optimizer. Use the Wizard and, in the first dialog, when you
are asked for the color to make transparent, click on the
background of your image. (As you move the cursor off the
Wizard dialog it will turn into an eyedropper.) When asked
for the color of your web page, select the same color. Next,
choose "best colors" and leave image quality at maximum.
Preview the result (where the transparent regions of your
image will be shown as the transparency checkerboard) and
go ahead and save.
> If I can't, fine; I'll just consider using a solid color for the
> background. It just seemed to me it would be a common need.
It's so common PSP has a Wizard for doing it :)
> And if PSP7 can't do it, can any other graphics program do it, or is
> it a fundamental limitation of graphics (or the known universe ;-) ).
PSP can do it and so can other graphics programs but you
already have PSP. However, as I hope I have explained in
this and previous posts there are limitations to the file
formats supported by browsers. I also hope I have explained
why your concern about your web page having a pattern is
misplaced and does not apply to changing some single image
color to one labeled as transparent.
--
Sally Beacham
<t...@infi.net> wrote in message
news:t4gcaucv4poi2smf8...@4ax.com...
> Thanks, Leslie.
>
> Actually, the corners still show pretty clearly the difference. The
> background pattern of the page is sort of a blue thread and the
> difference can't really be hidden by trying to make PSP's background a
> single color.
>
> I would've thought this was something pretty common, but I guess not.
>
> I guess I'm not sure what "transparent" means to PSP, but the
> resulting ellipse's "container" is anything but transparent on my
> webpage.
>
>
Did you remember to turn "borders" off around your image in FrontPage?
--
Sally Beacham / www.dizteq.com
www.lvsonline.com / Filter Frenzy, Xara X
FilterMunky / www.psppower.com
Ronald Vick
>Thanks,
>
>But my webpage's background is not a solid color, it's a pattern.
>
>And, although reading about PSP's technical definition of transparent
>is interesting (thanks for the reference), I needed to know if I can
>make a GIF, JPG, or PNG ellipse transparent to the human eye on a page
>with a background pattern that's not a solid color.
>
>If I can't, fine; I'll just consider using a solid color for the
>background. It just seemed to me it would be a common need.
>
>And if PSP7 can't do it, can any other graphics program do it, or is
>it a fundamental limitation of graphics (or the known universe ;-) ).
>
>thanks again,
>sam
You mis-understand the reason for the solid color background. When
you do a File>Export>GIF Optimizer, you will set the background color
to transparent. This will allow the area outside the ellipse to be
fully transparent and show the pattern. However, there is a fringe
created around the ellipse due to such things as Anti-alias and
feathering (which makes the edge look better than a pixel stepping).
The edge created by a near match to the overall color of your pattern
merely allows that edge to blend in better to your image.
Ron
t...@infi.net
mis-stating what I want or misusing terms I don't understand.
It's becoming abundantly clear to me that I "mis-understand..." etc,
because what I see is a rectangle around my elliptical button that is
close but not exact to my page's background pattern.
What I would LOVE PSP7 to do would be to let me use my page's
background pattern as the background for the image I'm creating.
That would solve any "transparency" issues for me since even after a
long and literate explanation by Kris Zaklika, I STILL don't
understand if I can do what I want, or if Kris understands what I want
to do.
Once more - I have a somewhat complicated background for my webpage of
many shades of blue/gray threads. I want to plant an elliptical oval
graphic (GIF, so there's no confusion) onto this background and show
absolutely NO RECTANGLE around it of a different color or pattern.
Just like I physically cut out a paper ellipse and physically pasted
it onto my background; no blurring, no rectangle, just an ellipse.
If I make my gradient ellipse using the shapes tool, put some text on
it using the text tool, and am getting ready to go into the export
step, what do I do next to accomplish this???
On Sun, 31 Mar 2002 13:33:33 GMT, Ronald Vick <Ron...@cfl.rr.corn>
wrote:
Kris Zaklika
>
> I'm sorry to all who've replied but I just don't get it, or else I'm
> mis-stating what I want or misusing terms I don't understand.
>
> It's becoming abundantly clear to me that I "mis-understand..." etc,
> because what I see is a rectangle around my elliptical button that is
> close but not exact to my page's background pattern.
>
> What I would LOVE PSP7 to do would be to let me use my page's
> background pattern as the background for the image I'm creating.
> That would solve any "transparency" issues for me since even after a
> long and literate explanation by Kris Zaklika, I STILL don't
> understand if I can do what I want, or if Kris understands what I want
> to do.
>
> Once more - I have a somewhat complicated background for my webpage of
> many shades of blue/gray threads. I want to plant an elliptical oval
> graphic (GIF, so there's no confusion) onto this background and show
> absolutely NO RECTANGLE around it of a different color or pattern.
> Just like I physically cut out a paper ellipse and physically pasted
> it onto my background; no blurring, no rectangle, just an ellipse.
Forget all about your web page background. Create a new
image with a black background using File > New. Place a
red ellipse on it for example with the Vector Shape Tool.
Make sure to uncheck Antialias when you place the ellipse.
Select it and set the Stroke to red and the Fill to red
by right-clicking and selecting Properties. Do Layers >
Merge All. You should have a uniform red ellipse on a
uniform black background (the latter being important). Now
do File > Export > GIF Optimizer. In the Wizard choose
the black color as your transparent color and continue
to save the file. Load it into your browser. You should
see a red ellipse only - no black background. If you
have set a page background then you will see this around
your ellipse. If you can't master this there is no point
worrying about the next paragraph. If you receive a red
ellipse with no back background when you load the image
into your browser then you know what to do with the item
in the next paragraph.
--
Jackie Laderoute
>What I would LOVE PSP7 to do would be to let me use my page's
>background pattern as the background for the image I'm creating.
>That would solve any "transparency" issues for me since even after a
>long and literate explanation by Kris Zaklika, I STILL don't
>understand if I can do what I want, or if Kris understands what I want
>to do.
We understand what you want to do; you're just having trouble
understanding what the limitations are - and they are limitations not
of PSP, but of the file format.
>Once more - I have a somewhat complicated background for my webpage of
>many shades of blue/gray threads. I want to plant an elliptical oval
>graphic (GIF, so there's no confusion) onto this background and show
>absolutely NO RECTANGLE around it of a different color or pattern.
>Just like I physically cut out a paper ellipse and physically pasted
>it onto my background; no blurring, no rectangle, just an ellipse.
>
>If I make my gradient ellipse using the shapes tool, put some text on
>it using the text tool, and am getting ready to go into the export
>step, what do I do next to accomplish this???
Make your ellipse on a transparent background. Make your buttons, then
use the Gif Optimizer to export it using "existing" transparency.
Make sure before you start the Gif Optimizer that the background
colour box (that's the right-most of the two boxes at the top of your
colour palette) is set to a medium-grey or a dominant colour from your
background.
That will do it.
Here's some good reference pages:
http://campratty.com/1faq/faqpages/1.html
http://www.frontiernet.net/~willshak/transparency/
http://pixelswebworks.com/psp-tuts/transparent/
http://www.disdatdesigns.com/tutorials/transparent.html
http://www.psphelp.com/P21.html
http://loriweb.pair.com/tgif.html
http://www.heronwing.com/Graphics/tutorial2.html
There's many more, but reading through these should make the concept
clear. Don't worry, this is a very common question - once you've
wrapped your brain around it, you'll be fine. ;-)
Jackie
--
< o \"/ Don't play cat and mouse with me! (
---@ ) ()-()
< o /"\ Jackie Laderoute jflad...@shaw.ca (o o)
*****************************************************************/\o/\
Cliff
[...]
> What I would LOVE PSP7 to do would be to let me use my page's
> background pattern as the background for the image I'm creating.
> That would solve any "transparency" issues for me since even after a
> long and literate explanation by Kris Zaklika, I STILL don't
> understand if I can do what I want, or if Kris understands what I want
> to do.
[...]
Assuming that PSP7 could do what you wanted, how would you be able to align
the image on the page so the patterns match flawlessly (the background of
your image and the background of your page)?
You need either to come to grips with "transparency" or revamp your web
design.
--
Cliff
baseb...@hotmail.com
Ronald Vick
>I'm sorry to all who've replied but I just don't get it, or else I'm
>mis-stating what I want or misusing terms I don't understand.
>
>It's becoming abundantly clear to me that I "mis-understand..." etc,
>because what I see is a rectangle around my elliptical button that is
>close but not exact to my page's background pattern.
>
>What I would LOVE PSP7 to do would be to let me use my page's
>background pattern as the background for the image I'm creating.
>That would solve any "transparency" issues for me since even after a
>long and literate explanation by Kris Zaklika, I STILL don't
>understand if I can do what I want, or if Kris understands what I want
>to do.
>
>Once more - I have a somewhat complicated background for my webpage of
>many shades of blue/gray threads. I want to plant an elliptical oval
>graphic (GIF, so there's no confusion) onto this background and show
>absolutely NO RECTANGLE around it of a different color or pattern.
>Just like I physically cut out a paper ellipse and physically pasted
>it onto my background; no blurring, no rectangle, just an ellipse.
>
>If I make my gradient ellipse using the shapes tool, put some text on
>it using the text tool, and am getting ready to go into the export
>step, what do I do next to accomplish this???
>
First, don't feel bad. This is the first big stumbling block that
people new to web graphics run into.
Now, I'm not sure if you've been creating your image in 16.7 million
color, or 256. (it does make a difference.)
I'm going to walk you through the steps to obtain a transparent GIF,
let you try it, then ask more questions later to clean it up.
To start with, I'll need to assume some things.
1. your image is created upon a colored background, rather than native
transparent.
2. you have PSP 6 or higher.
3. you have the image you want, created.
To begin;
1. File>Export>GIF Optimizer
(A statement like this means to click upon the name 'File' in the
toolbar, then select 'Export' from the drop-down list. Then select
'GIF Optimizer' from the box of selections.
A new box opens that allows you to create the transparent GIF as well
as control the GIF palette and method of display in the GIF format.
The first question you're asked is under the 'Transparency' Tab.
"What areas of the image would you like to be transparent?"
There are five buttons that allow you to select the transparent color.
None - there will be no transparency.
Existing- If you created an image using either native or palette
transference, keep the existing transparency.
Outside the selection.
Inside the selection.
Areas that match this color.
Click on the last one, then move the cursor to your image and click
once upon the color of the background.
Now look at the preview displays. On the left is the original. On
the right, the output. The color that you selected above should be
replaced by the transparency checkerboard. (This checkerboard is an
indication to you that there is full transparency in an area, and we
don't know what it's going to be.)
You can click and drag in a display window to move it around, or zoom
in and out.
2. The next tab, "Partial Transparency" lets you define what is to be
done with any pixels in your image that are partially transparent.
(GIF does NOT allow partial transparency of any sort.)
I like to start with "Use full transparency with pixels below" and set
to 20%. Depending upon the exact results I want, I may change this
and try again. (keep an eye on the before & after!)
I also click the "Blend with background color" and then set the color
swatch beside it to a color that matches the image I'm placing it on.
(This part is really subjective. You'll just have to play with it for
a while to get a feel for it and when to use it and when not.)
3. Colors- This the area you define the color mode and how many
colors are allowed in your image.
There are 3 modes:
Web Safe, Optimized Median Cut, and Optimized Octree.
Web Safe is an old method of only using colors that were in all of the
popular web browsers. (Netscape could only display about 244 colors
at one time!) Today, this setting can be ignored and very few people
will notice.
In Optimized Median Cut, you can have an active selection in your
image and then tell the program that when the palette is created, you
want the colors inside the selection to have preference over other
colors.
Optimized Octree allows the program to create a palette upon the
preponderance of colors in the image.
For now, just click Optimized Octree.
Now go back to the Number of colors. You can have as many as 256 or
as few as 17. The lower the number, the smaller your file will be
(and the cruder your color image will show.) Slide the number up and
down while watching the in/out preview.
Dithering is a value that selects colors by mixing values already in
the palette to create new colors. 100% will allow the most mixing of
colors, but again, this increases the size of your output file. Try
25% as an initial value.
4. Format tab.
You have a choice of two file types, Interlaced or Non-Interlaced.
The animated display shows how they look as people receive them. Some
web browsers don't support the display of interlace, so stick with
Non-interlaced on your first try.
5. Download times. This shows how fast a person can download the
image. Interesting, but we can't do much with it.
Click OK, and you go into a normal Save As routine. Give it a name
and location.
Now, when you plop that image on a web page that has a background
pattern, you'll see the pattern.
OK?
Ron
Sally Beacham
what's going on. ;-))))
--
Sally Beacham / www.dizteq.com
www.lvsonline.com / Filter Frenzy, Xara X
FilterMunky / www.psppower.com
<t...@infi.net> wrote in message
news:r4ceaugb9goo2kguf...@4ax.com...
t...@infi.net
Except for a bit of the "jaggies" on the edges of the ellipse, the
background shows through just fine. I then tried it with the colors I
was trying originally and that looks great too.
Very sorry I made you say the same thing 3 times. Pretty hard head,
you know?
thanks again and regards,
Sam
On Sun, 31 Mar 2002 10:38:46 -0600, Kris Zaklika <kzak...@jasc.com>
wrote:
>t...@infi.net wrote:
t...@infi.net
Thanks too to all on the NG who've patiently restrained themselves
from flaming me as a blithering idiot. In this case, you'd have been
right.
regards,
Sam
Kris Zaklika
>
> THANK YOU for your patience and perseverance. It worked just fine.
> Except for a bit of the "jaggies" on the edges of the ellipse, the
> background shows through just fine. I then tried it with the colors I
> was trying originally and that looks great too.
>
> Very sorry I made you say the same thing 3 times. Pretty hard head,
> you know?
Don't worry about it. It's just a question of gearing the
explanation to your frame of reference. With various skill
levels among posters it is sometimes difficult to anticipate
which element of the problem is hard to understand. I'm glad
it's working for you now.
--
Porter
<t...@infi.net> wrote in message
news:frieau8lgi4tuq80j...@4ax.com...
> Thanks so much. I've finally got it.
>
> Thanks too to all on the NG who've patiently restrained themselves
> from flaming me as a blithering idiot. In this case, you'd have been
> right.
Hardly Sam. Many of us have read and participated in over a hundred
thousand threads right here in this very group. Which by now, well exceeds
a million postings. That's a whole lotta ongoing discussions and
interactions, all centered around questions and answers about using PSP.
Every person who responded to your thread, is a longtime and very productive
contributor to this forum. Fortunately, most of us have learned how to
differentiate between the genuine "card carrying idiots" and simply confused
& frustrated normal people. So far, you are looking pretty darned normal.
:) Welcome to the group, we like normal. :)
Regards,
Porter
Sally Beacham
>
> Thanks too to all on the NG who've patiently restrained themselves
> from flaming me as a blithering idiot. In this case, you'd have been
> right.
>
> regards,
> Sam
Sam,
Glad you got it. Don't worry, we save our ire for real blithering
idiots. You're just fine. ;-)))
Uni
Porter wrote:
>
> <t...@infi.net> wrote in message
> news:frieau8lgi4tuq80j...@4ax.com...
> > Thanks so much. I've finally got it.
> >
> > Thanks too to all on the NG who've patiently restrained themselves
> > from flaming me as a blithering idiot. In this case, you'd have been
> > right.
>
> Hardly Sam. Many of us have read and participated in over a hundred
> thousand threads right here in this very group. Which by now, well exceeds
> a million postings. That's a whole lotta ongoing discussions and
> interactions, all centered around questions and answers about using PSP.
> Every person who responded to your thread, is a longtime and very productive
> contributor to this forum. Fortunately, most of us have learned how to
> differentiate between the genuine "card carrying idiots" and simply confused
> & frustrated normal people.
Hello Ms. Porter,
Are you referring to those regulars that make reference to "blow-up"
items, when they're in their attack mode? Are you referring to those
regulars that enjoy empowering individuals, when someone forgets a silly
"OT" in their subject line? Are you referring to those regulars who like
to egg people on, just because it makes them feel good?
Nice people gain my respect, bad ones don't.
John (AKA Uni)
Sally Beacham
"Uni" <plg...@usa.net> wrote in message news:3CA763BC...@usa.net...
>>
> Nice people gain my respect, bad ones don't.
>
That's amazing, for once we so totally agree on a statement. I think I'll go
crack a bottle of wine and celebrate!