logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Fireworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-17-2005, 06:27 AM   #1
Andromeda
Andromeda's Avatar
 
Join Date: Sep 2005
Location: I reside in the Gamma Quadrant but take regular trips home to feed my cat who lives in New Zealand.
Posts: 400
Default

I'm trying to create a semi transparent rectangle. By that I mean a rectangle which is coloured but see-through.

I've got a canvas with a transparent background, created a rectangle, chosen a fill colour and set the transparency to 20%. Other settings include, alpha transparency, gif, matte-transparent. When I preview it in Fireworks it looks fine. But once I've exported it and placed it in Dreamweaver there is no transparency and it looks like a solid rectangle.

An example can be viewed at http://www.newday.co.nz/test.html

Is anyone able to tell me if there's something I'm doing wrong????
__________________
I am responsible for my attitude. My attitude determines my actions.
Andromeda is offline   Reply With Quote
Old 12-17-2005, 07:49 AM   #2
Creative Insanity
Banned
Creative Insanity's Avatar
 
Join Date: Oct 2005
Location: KiwiLand (stalk that far dj LOL)
Posts: 1,967
Default

Ok not hard and yes you are doing it right. I have no clue about fireworks since I use photoshop but the steps should be the same.

The sample attached was done in this manner.

Select image (I used a simple gradiant.)
Create a new layer.
Create shape.
Lower opacity to 30%
Used PS's save for the web feature as a gif with a matt colour of #FF0000. The save mode should not matter as in PS that just removes some unneeded colours and script crap from the image.

Rest is history.. and yo kiwi!
Creative Insanity is offline   Reply With Quote
Old 12-17-2005, 10:57 AM   #3
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

i didnt think you could have semi-transparency

i know you can set the background of an image using the alpha channel. You can also set layers above that with transparency values so the layer below shows through.
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 12-17-2005, 06:37 PM   #4
Creative Insanity
Banned
Creative Insanity's Avatar
 
Join Date: Oct 2005
Location: KiwiLand (stalk that far dj LOL)
Posts: 1,967
Default

In theory dj you are correct, but in practise with cunning tricks like opacity and fill percentages you can give the 'apperance'.
Creative Insanity is offline   Reply With Quote
Old 12-17-2005, 11:48 PM   #5
Andromeda
Andromeda's Avatar
 
Join Date: Sep 2005
Location: I reside in the Gamma Quadrant but take regular trips home to feed my cat who lives in New Zealand.
Posts: 400
Default

CI, the image you created looks like you have the jigsaw piece semi transparent with a coloured background behind it. Can you create the same sort of thing but having the background behind it transparent so that when it's placed on a web page you can see the web page background.

DJ, apparently someone has seen a semi transparent background and wants me to create one like it but I won'ty be able to ask him what site it was until after the weekend. It sounds as though it can be done but I'm completely baffled as to what to do. My image even previews in Fireworks ok, it's just when I put it on the web site! :angry:

Thanks heaps to both of you for taking the time to reply.
__________________
I am responsible for my attitude. My attitude determines my actions.
Andromeda is offline   Reply With Quote
Old 12-18-2005, 12:15 AM   #6
Creative Insanity
Banned
Creative Insanity's Avatar
 
Join Date: Oct 2005
Location: KiwiLand (stalk that far dj LOL)
Posts: 1,967
Default

Ahh so that is what dj is refering to. You cannot have a transparant layer as such.. you need to have a colour of some sorts for it to be some degree of opacity or there is no image there at all.

This what you are talking about then?

Creative Insanity is offline   Reply With Quote
Old 12-18-2005, 04:39 AM   #7
Andromeda
Andromeda's Avatar
 
Join Date: Sep 2005
Location: I reside in the Gamma Quadrant but take regular trips home to feed my cat who lives in New Zealand.
Posts: 400
Default

What I'm trying to achieve is a dropdown menu with a semi transparent background.

If you look at http://www.newday.co.nz/test.html you'll see that I've created a dropdown menu where the background is transparent and all you can see are the words but you can't read the words too well so that's why I want semi transparent rather than all transparent.

Does that help?

__________________
I am responsible for my attitude. My attitude determines my actions.
Andromeda is offline   Reply With Quote
Old 12-18-2005, 07:22 AM   #8
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

http://dreamlettes.net/whims/transMenu.html
ranjan is offline   Reply With Quote
Old 12-18-2005, 08:27 PM   #9
Andromeda
Andromeda's Avatar
 
Join Date: Sep 2005
Location: I reside in the Gamma Quadrant but take regular trips home to feed my cat who lives in New Zealand.
Posts: 400
Default

Yes ranjan, that's the sort of thing I'm meaning. Now I just need to know why my images aren't appearing semi transparent when they should be!!
__________________
I am responsible for my attitude. My attitude determines my actions.
Andromeda is offline   Reply With Quote
Old 12-18-2005, 11:33 PM   #10
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

The technique uses PNG as the graphics format. Please read about this format if you are not aware of what its advantages are over gif images.

For purposes of this translucent menu it would however suffice to know that PNGs support alpha transparency, or in other words PNGs can be translucent, while gifs can only be transparent.

That being said the most popular browser IE6 does not have native support for the PNG format. IE7 (due to be released soon) will support PNGs.

With that as a background if you view source of the example I posted, you will see that the background used for all browsers other than IE 6 is a PNG file.

For IE 6 and below we use some CSS hacks as coded below:

Code:
<!--[if lt IE 7]>
<style>
#subMenu {
	background: none;
}
#subMenu ul {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transBG.png', sizingMethod='scale');	
}
#subMenu ul a {
	position: relative;
	z-index:1;
}
</style>
<![endif]-->
The above code uses IE conditional comments (<!--[if lt IE 7]>) to hide this piece of code in all bowsers except IE6 and below

It also uses Alpha Image Loader filter of IE to use the translucent PNG as background.

A link bug exists when PNGs are used as background, to get rid of this we use relative links with a z index of 1

ranjan is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:10 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com