Printable View
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
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.
That would be these shadow tools;)
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
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}
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
There's a fix for this.Quote:
Originally Posted by Newbietoo
http://homepage.ntlworld.com/bobosola/index.htm
Thanks Paul and Sledger...
I'll give that a try
Patrick
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
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
Thanks Sledger,
...but that's not working for me. Also, according to the Xtreme Pro Manual, the Image A and B boxes are mutually exclusive...they're provided so you can toggle between them to compare different export settings, however it then only saves the "active" one.
I'm still getting an opaque image like the one on right, or if I select True Color + Alpha like the one on the left I get a totally transparent image i.e. can't see it.
Thanks,
Patrick
Truly, this forum must be ones of the best out there in terms of helping others.
Thank everyone, the PNG trick in IE7 was new to me.
I'm not using 3.2 so can't compare, but it appears you are missing a number of tabs on that export dialogue.Quote:
Originally Posted by Newbietoo
Are you using a white background 'object' for your image slices?
There should be no background objects.
Can you upload your file so people here can have a look and see what might be the reason for what you're experiencing?.
I've attached my test .xar file and a screengrab.
The rectangle is on one layer and my named slices are on the guide layer. I have selected the rectangle and used convert to editable shapes(I found that if I didn't do that it wouldn't slice the shadow). As has been stated elsewhere, you must shoose trueclour+alpha for the png options.
When exporting select the rectangle, shadow and slicing shapes.
I made the background green, but as you can see from the screengrab in the file thumbnails there is no green so the alpha is working.
Hope this helps.
Paul
(BTW there's no need to have invisible rectangles - put them on a guide layer
edit: Almost forgot - you can just export the named slices individually by using the name gallery arrow to the right of the file type)
Thanks Paul,
I've just tried your drawing; I exported all the images OK but everyone is totally transparent, i.e. can't see anything. Are you using 3.2? I wonder if I have a problem here
Patrick
OOPS!...scratch that last comment; I now have images...all I need to do now is figure out how you did it!
Thanks
Patrick
In layer1:Quote:
Originally Posted by Newbietoo
Create box
Add Shadow
Select box and "Convert to editable shapes"
Add Guide layer
In Guide Layer (select the layer):
Create slice rectangles and name them (all you will see are the red dotted outlines).
In the name gallery choose PNG with transparency+alpha for each slice rectangle.
Either export the slices individually from the name gallery, or..
Select rectangle, shadow and slices.
Then do "File->Export image in slices" with PNG and transparency+alpha options.
Paul
So now I have it working...the scary thing is, I have no reason why!
I was able to make your drawing work and then I reproduced it exactly and it wouldn't work. I played around for hours and then all of a sudden it (the one I reproduced) did work. Through all of this I kept going back to the one you had done and it continued to work, so it was effectively my benchmark. Having got the reproduction to work, I then created a new drawing and started from scratch and that too worked.
Shut down Xara, started from scratch again and flew straight through it doing what I had always done and that worked too. I an unaware that I have done anything different to what I originally did following the advice in your initial post. In fact I have gone to some trouble now to reproduce whatever the problem may have been and cannot for the life of me get it to NOT work!
So I am none the wiser; I have no idea why for hours it didn't work, but now it does.
I suspect it's to do with the PNG export, not the Guides and Layers etc
it now just works. One for the X-Files I think
Thanks for all your help Paul, I really appreciate it
Patrick
In trying to get it to NOT work, I tried it without editable shapes, without grouping the Objects, turning on/off various layers, selecting different layers prior to export, turning background on and off etc...I now just cannot get it to NOT work. I suspect actually that it must just have been the way I was holding my mouth!
Aha! we forgot to mention that bit.. ;-)Quote:
Originally Posted by Newbietoo
Me Again!...
I'm now starting to do slicing in anger (literally as it turns out) and have discovered that the sizes of the exported images are different to the Guide boxes with the net result the edges don't align (see attached image).
Paul (hope you're still there) I note that the same thing happens with your "slicetest" For example, the bottom right hand GIF is sized at 22.4px X 21.1px in Xara, but the exported GIF is 24 X23
In other threads I note a general level of dissatisfaction with Xara's slicing functionality. It's appallingly documented in the Help and seems to have a whole host of traps lurking for the unaware. Is this as good as it gets i.e. should I use some other package; or am I still doing something wrong?
Patrick
Patrick,
I'd say your missing out something for your sliced image to be that badly out, but that said I've always had problems with Xtremes slicing.
Perhaps you and a few others could test this xar out for me?
Hi Patrick & Egg,
Patrick: My quick slice example should have had pixel perfect dimensions, so some anomlies can be expected in sizes.
Egg: I also get the extra pixel and I really can't see why. Your dimensions and positions are pixel perfect and there are no lines involved. Preview looks great in ie and firefox.
Perhaps someone from Xara can explain?
(In practice, I tend to do mostly corners and don't fuss too much about pixel perfect. I fix up any one pixel problems using paintshop pro and also use that to crop thin slices.)
Paul
All you can do is to forget Xara Xtreme for such slicing tasks.
Instead, I would recommend the following steps:
- Select your irregular shape and export it as PNG with transparency.
- Open your Bitmap editor (Photoshop or the Freeware Photoshop-Clone Artweaver) and slice the image with the better slicing functionality of your bitmap editor (see the hardcopy from Artweaver).
Remi
Unsurprisingly fireworks is also rather good at this and is probably more intuitive in some ways (slice, then name the slices).
Paul
And not to forget Adobe Illustrator or Adobe Flash. But the slicing functionality in our beloved Xara Xtreme is old-fashioned - unfortunately. :(
Remi
Just thought I'd add that Real Draw has a kick-ass image slicer, that is even capable of creating a few different types of rollover effects automatically. I haven't tried Fireworks, Adobe, or other packages to compare it to, but the RD slicer blew me away. I thought it was almost worth the cost of Real Draw by itself. (For professional graphics, Xara wins hands-down, although it doesn't have some of RD's neat brush/bitmap abilities.)
Cheers all. I must admit I agree with Remi and the rest of you regarding the slicing. Fortunately it's a thing I never require but there's a definite bug in there somewhere.
Guys,
Thanks for all your help on this; I am now pretty convinced we are contending with a bug here. However, just to make sure I wonder if you could test my drawing to see if you get the same results I do. I've attached both the source drawing and the resultant images I get. I'm now pursuing this issue in the context of confirming whether in fact we have identified a bug and need to let Xara know.
If it is a bug, then it's a critical one given Xara positions itself squarely in the web graphics space. Resizable boxes et al (for which slicing is an essential technique) are becoming a ubiqutous technique in the world of Web 2.0 and the dramatic increase in the use of things like Ajax for "popup" data for example. In this case we're not talking re-sizing images in the traditional sense e.g. photo-images; not Xara's strong suite anyway, but drawings and what I suggest will be an ever increasing need to do that,
Now to my example...
When the HTML is viewed everything is OK, but that's not what counts in this case as you need to use eight individual PNG's to enable automatically re-sizing boxes. For example, the "centre" images are 1px wide in the drawing, but when exported end up at 3px; that's a 300% variation! While the centre images are less critical in this exercise it does dramatically illustrate the problem. The corner images are also wrong and they need to be pixel perfect.
So, I'd really appreciate it Egg and Paul if you could check to see if you get the same results I do (NB: I'm exporting PNG's)
Thanks,
Patrick
Hi Patrick,
The problem that you're experiencing is not a bug.
It's because whilst your guides are in whole pixels width and height wise, they are misplaced in the x and y co-ordinate spacing. This is why you're getting the very large errors.
See the attached xar file.
Hmm, I thought I could smell a bug. But there are two issues. One I suspect is related to how you drew the shapes with snapping features - which I'm covering in a new tutorial soon. But there's something definitely also wrong with Xara here in addition. The error is either or both due to placement with grid snapping on, or to do with snapping when objects are being drawn (if theres even a distinction). There is an inaccuracy somewhere that is causing misalignment in certain situations, leaving gaps on slicing.Quote:
Originally Posted by Egg Bramhill
Seems to me that Eggs example is bullet-proof. All his shapes are on whole pixel boundaries and the dimensions are in whole pixels, in addition his shapes don't have any outlines, so no line width issues to consider.
Given Eggs excellent example I don't see how snapping would be an issue.
Time and time again, people (myself included) come a cropper in using Xara for web work and using (OK, it's our own fault in some ways) fractional pixel values.
Wouldn't it be great if there was an option that said "Force whole pixel values" so that positions would always be on whole pixels and dimensions would always be whole pixel units?
Paul
Hi,
Put in Utilities
grid to 100pix
subdivisions to 100
when you create a rectangle say 300x300pix
move it across canvas with grid enabled,you'll see it always snaps to whole pixels
Hans
Thanks Egg for going to that trouble...that's really clarified it for me. Said like that it's obvious (but before that it wasn't!). I have learned to be sensitive to X and Y in getting fonts pixel perfect, however when experimenting with images, it's never made a discernable difference (I'm talking 0.1-0.2 pixels here)...in anything I was doing anyway. For these images I was snapping to as line, but not fine enough obviously
Clearly that has just caught up with me.
If I'd been out by fractions of pixels I might have sussed it, but 2 or 3, nuh! the 1 pixel width BTW is at the instance of my Web App developer..I'm just the navvie who owns the company and he is a "gun" as we say in Oz (a euphemism for very good), so I do what I'm told. He has a reason for the 1px, but I can't recall right now what it was; it had sounded pretty anal to me too. Emboldened by your comments in the drawing I might take it up with him again!
Thanks too, Xhris, Paul and Haakoo!
Patrick
1 pixel wide (or high) images are commonly used as background repeating images. They just need to be one pixel wide and are repeated as many times as needed to fill the container they are in. At one pixel they will have the smallest possible file size.
Paul
Yes that's the reason! Thanks Paul, although for my current exercise it may not be that critical, but I recall now that the original slicing I did, over a year ago now and not using the "export slices" option, was for Tabs that were much smaller
Anyway Egg, seems I spoke to soon, I did as you suggested and still get oversized images. I also tried your example and your 20 X 20 images end up 21 X 20 when exported
Yes newbietoo theres a defenite bug in the Xtreme Slicing. To avoid this just export each portion as a gif one at a time. Xtreme wont mess up the size in the odd way it does if you use image slicing.
It doesn't always mess up though. It all depends on how you draw your shapes. I wouldn't give up immediately; keep moving the shapes around with grid snapping on; drag from the left to the right, and vice versa, same for top to bottom until there are no slicing errors. If that doesn't work, re-jig the size and back. I'm sure the bug will be addressed at some point.Quote:
Originally Posted by Egg Bramhill
I'm afraid I've run the white flag up on this one. I downloaded and tried slicing in Inkscape and it works like a charm. Makes you realise just how hard Xara has made it.
Thanks Again Guys
Patrick