Image Slicing for Web Site design using Div tags

After several days of frustration trying to find a way to cleanly slice up the design I've done in Xara Pro X 8.1.4, I'm turning to the experts. I've done the usual searches on this forum, Google, Xara help files and still, I haven't solved the problem. I have been away from this for a few years, and have read that this is not done anymore, but I need it for what I am doing. Perhaps I am missing something and if I have, my apologies; I did my best to research.

I have done a web site design in Xara Pro and want to export the result into varying sizes of slices, depending on the image (buttons vs a large image right below it that will be sliced differently). I will be using an independent editor. When I use Export Image in Slices in Xara using named rectangles (draw rectangles over the buttons, name them in the name gallery, set the colour to none and export), I either get a message saying the slices are overlapping (no obvious at all on a high zoom), or they are exported but are 1 or so pixels off so that the transition between them is "off" producing a jogged line rather than nice smooth lined up buttons. I have zoomed the images to death and aligned them, but yet, I haven't been able to produce a smooth transition between the button bottoms. These lead into a larger image below the buttons and the result looks terrible! I have "scale line widths" turned on.

I followed this tutorial (http://www.youtube.com/watch?v=Ee5UtnYIZNc) hoping that the exported slices would use the guidelines as the slices (I think my Corel Draw 8 used to do this), but no, it added shims to make up the difference between my rectangles and the guidelines. AAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHH!!!!

So, is there a nice smooth way of getting image slices that are cut cleanly in Xara Pro? Or, do I need to look at a different program?

Anna

Hello Anna

What is the reason you want to export in slices?

This technique in the past ensured that images would load quickly in browsers with slow internet connections. But this is not a very big problem in today's internet.

What you can try is to create the slice shapes using vector rectangles. Make sure that each shape is in even pixels and that the starting location for each rectangle is in even pixel amounts.

Then Shift Click to select the image, then the rectangle, and Arrange > Combine Shapes > Slice Shapes (or Ctrl + 4). Repeat this step for all the other rectangular slice shapes.

The image on the attached .web file has been sliced into 6 rectangles. Preview the page and you will not see the seams.

Here is a link to the image on line http://gwpriester.com/slices/

Thanks Gary, it's been a while - since I last connected with you and in figuring out some of this graphic stuff! I used to do web sites back in 80s and 90s, but when we lost our daughter, I went back to school and did other things for a while. However, I need to update a realllllly out of date site. With that, I have set out revive my web skills and to do it right - getting rid of tables and going the div tag, CSS and 960 grid path. However, I've had trouble grasping the concepts all at once till I found Ben Jones' 17-video tutorial. Slicing and dicing was his way of setting up his div tags using the slices as containers to set things up. It's slick, or at least was understandable to me as someone who is getting back into this. I've been using what I have found, but nothing has worked. So, I will try this and see how I make out.

Thank you (!!!) for taking the time to do this for me and the advice; it's been kinda frustrating spinning my wheels and getting no where. :)

Glad I could help and I noticed from your site that you are doing a really brave thing. And something that can help others who have experienced the same heart breaking tragedy in their lives.

Good luck to you.

Thanks Gary for your help and kind comments. I went back and used rectangles making sure everything was even pixels - and sliced as you suggested using the slice shapes instead of Export in Slices. I had to do each individually for some reason, but it worked when put together in the HTM document. I wish the export in slices would have worked as this is so much more work, but at least I'll be able to accomplish what I want for now.

I have always appreciated the help you provide so freely to everyone; thank you again for helping me out.

Anna

My pleasure.