I am trying to float a semi-transparent text box on top of another graphic (photo) so the photo shows through a bit. I have done the text box as a layer and set it a anywhere between 25-40% opacity, yet on page preview it shows up as a solid color.
Sometime around 1/7/09 (at 11:17 -0400) SkipII said:
I am trying to float a semi-transparent text box on top of another
graphic (photo) so the photo shows through a bit. I have done the
text box as a layer and set it a anywhere between 25-40% opacity,
yet on page preview it shows up as a solid color.
First of all, you’re talking about a graphi box used for text. It
simply isn’t possible to do this with a regular HTML text box - not
without jumping a couple of hoops, anyway, so we’ll skip that for now.
Right, what’s happening with that box is that it is being converted
on output to whatever graphic format it is set to become. It is most
likely being turned into a GIF, which allows for only an on/off
transparency, no translucency at all. It might be set to become a
JPEG, which allows for no kind of transparency at all, not even 1-bit
solid/transparent.
To produce this effect you have two options:
Option 1) UNlayer your graphics so that they are produced as a flat
layout. This means that the graphics are able to produce a merged
composite result. This will automatically be created to produce the
same visual effect that you set up in your layout.
Option 2) Instead, select your translucent-filled graphic text box
and then click the third icon in the Inspector palette (the Output
Settings panel). Change the Type to PNG and then set Colors to
Millions. This tells Freeway that you want it output as a PNG graphic
set to millions of colours, which will include a full 8-bit
transparency mask that recreates the precise translucent effect you
set up.
Freeway will then also output the necessary extras to help this work
in the thrice-damned Internet Explorer browser. Yuk. And hooray.
Is this the type of effect you are after? http://frontrangeweb.com/sample
Maybe I’m missing something, but this was pretty easy to do
SkipII are you using Pro?.
Maybe this has the same effect as Keith’s #2 option, but here is what I did,
Sketch an html box over your graphic, enter and style your text. Select the 2nd tab of the html inspector and on the “graphic effects” arrow select the first box “background”, then select the color and the degree of transparency.
Sometime around 1/7/09 (at 12:32 -0400) Rich Gannon said:
Sketch an html box over your graphic, enter and style your text.
Select the 2nd tab of the html inspector and on the “graphic
effects” arrow select the first box “background”, then select the
color and the degree of transparency.
Very good call - I keep forgetting about that option entirely. Thanks Rich!
Just for the record, this is a way to produce a translucent colour
fill for an HTML box. Which helps tremendously with search engine
optimisation and accessibility.
The method for doing this with a graphic box is the same, except
that the Background controls have their own permanent panel in the
Inspector rather than being a button with those other effects
buttons. Mildly confusing at this particular time but not anything to
worry about.
It would hep me a lot if i could just do it right one time rather
than diagnose.
I totally agree.
But diagnosing helps us to help you. I’m afraid that the only
sensible way to fix a problem is to understand it at least enough to
know how it came about and how to avoid it in the future.