Welcome to TalkGraphics.com
Page 1 of 4 123 ... LastLast
Results 1 to 10 of 39
  1. #1
    Join Date
    Oct 2005
    Location
    Brisbane, Australia
    Posts
    39

    Default 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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	text box.gif 
Views:	699 
Size:	3.5 KB 
ID:	39288  

  2. #2
    Join Date
    Oct 2005
    Location
    New Zealand
    Posts
    414

    Default 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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	textbox png.png 
Views:	605 
Size:	6.8 KB 
ID:	39289  

  3. #3
    Join Date
    Oct 2006
    Location
    Tampa Bay, Florida
    Posts
    1,341

    Default Re: Text boxes with transparent shadow edges

    That would be these shadow tools
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	shadow.jpg 
Views:	518 
Size:	10.0 KB 
ID:	39290  

  4. #4
    Join Date
    Oct 2005
    Location
    Brisbane, Australia
    Posts
    39

    Default 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
    Attached Images Attached Images  
    Last edited by Newbietoo; 27 June 2007 at 07:38 AM.

  5. #5
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,659

    Default 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}

  6. #6
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,659

    Default 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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	slicing.jpg 
Views:	509 
Size:	48.3 KB 
ID:	39298  
    Last edited by pauland; 27 June 2007 at 09:00 AM.

  7. #7

    Default Re: Text boxes with transparent shadow edges

    Quote Originally Posted by Newbietoo View Post


    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

  8. #8
    Join Date
    Oct 2005
    Location
    Brisbane, Australia
    Posts
    39

    Default Re: Text boxes with transparent shadow edges

    Thanks Paul and Sledger...

    I'll give that a try

    Patrick

  9. #9
    Join Date
    Oct 2005
    Location
    Brisbane, Australia
    Posts
    39

    Default 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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	slice.gif 
Views:	443 
Size:	3.4 KB 
ID:	39319  
    Last edited by Newbietoo; 28 June 2007 at 07:13 AM.

  10. #10

    Default 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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	pngexport.png 
Views:	436 
Size:	53.1 KB 
ID:	39320  

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •