1 Attachment(s)
Text boxes with transparent shadow edges
Can anyone tell me (or point me to a tutorial) how to create the edge and corner gifs for a text box that has a transparent shadow edges? Like the one shown below.
The principal problem I'm having is the shadow layer, where I need GIF's with a couple of blurred sides and "hard" edges on the other two sides where they abut the other GIF's (if you get my drift)
Thanks
1 Attachment(s)
Re: Text boxes with transparent shadow edges
Not sure if I am getting your drift correctly but I would be making a box, adding required shadow, drawing a 50% Black colored rectangle larger than the speech box, which is then put to back.
Select your speech box only and export as .png with transparent background.
1 Attachment(s)
Re: Text boxes with transparent shadow edges
That would be these shadow tools;)
1 Attachment(s)
Re: Text boxes with transparent shadow edges
Sorry, I mustn't have made myself clear (I'm well beyond that aridzone!)....
The boxes will be used in webpages and will dyamically size, thus I need to create a single box and then slice it into 8 separate GIFS, one for each corner and each side. For example, the sides need only be a couple of pixels as they'll extend to suit the enclosed text
When you do that using Xara's line and shadow functions you end up with a GIF like the top one. I need something that will turn out like the lower image, which for this exercise is made up of three images. You'll note however that that does not have the shadow gradient i.e it's the same transparency all over. Slicing images with gradients won't work as you cannot but them together cleanly as the gradient goes to the (new) abutted edges, creating an obvious join.
This is a painstaking and error-prone method as the slightest variation in size in one of the GIF's creates a noticeable flaw in the box e.g striping. I have been attempting to do it that way and haven't succeeded so far, so I was hoping there might be some magical feature in Xara Xtreme Pro I haven't come across (I am now on 3.2). I've been using Xara for a few years, starting with X and all upgrades since then; I'm pretty competent, but it's not my day job!
I also need to use GIF's as IE6 doesn't support transparency in PNG images and unfortunately IE6 is still the most popular browser out there
Thanks
Re: Text boxes with transparent shadow edges
Check out the section 'image slicing' in the program help. You basically need to draw rectangles for your slices in a guide layer and name the rectangles. You can control how each slice is exported via the export option in the name gallery. Then export the image in slices. Job done!
Paul
{PS: use the alternative slicing method}
1 Attachment(s)
Re: Text boxes with transparent shadow edges
Here's my example:
The dotted lines are named rectangles drawn on a guide layer. Xara slices the whole thing, but you can see the bitmaps named after my objects in the guide layer. One is a jpg, the other a gif.
Paul
Re: Text boxes with transparent shadow edges
Quote:
Originally Posted by
Newbietoo
I also need to use GIF's as IE6 doesn't support transparency in PNG images and unfortunately IE6 is still the most popular browser out there
Thanks
There's a fix for this.
http://homepage.ntlworld.com/bobosola/index.htm
Re: Text boxes with transparent shadow edges
Thanks Paul and Sledger...
I'll give that a try
Patrick
1 Attachment(s)
Re: Text boxes with transparent shadow edges
Hi Paul,
OK, so now I have slices working; I didn't have any luck doing it with the Guide Layer...I got the red boxes OK but couldn't figure how to get a slice from that. I overlaid a regular rectangle (maybe that was what I was supposed to do?) made it transparent and exported that as a PNG and got the slice OK, however it isn't transparent. You can see the selected (Transparent) slice and then the image that resulted
When I export with Alpha the whole slice is transparent i.e. can't see a thing. BTW, it was on a white background when I did this; I've moved it to a grey background so you can see it
What am I doing wrong?
Thanks
Patrick
1 Attachment(s)
Re: Text boxes with transparent shadow edges
Make certain that in the Export dialogue that you select each window and have chosen True color + Alpha, otherise you'll end up without transparency