General
Designing
Web Graphics
Interactivity

Navigation Buttons

Flash Export

Animation

Dreamweaver

Hexidecimal RGB

Image Slicing

Image Maps

Exporting

Optimizing

Link Stretching

XARA X has a host of new features especially for web designers. It means that you can use Xara X as a one-stop web graphics solution, enjoying the scalability and versatility of a vector package, combined with the functionality of the new web features.

Navigation buttons
BUTTONS and navigation bars are an essential part of most web sites, but making them can be a time-consuming and frustrating experience. The Xara X Button and NavBar Tool allows you to create standalone buttons or fully functional navigation bars within minutes. You can also create rollover buttons which change as you interact with them (like the buttons used on this web site) - and Xara X will write all the HTML and JavaScript for you. The tool works by taking your design for a button and creating as many copies as you wish, either vertically or horizontally. Each button can then be edited - by changing the color, text, adding bevels, shadows and so on. When making rollovers, you can edit each button and each of its states.

Flash export
FLASH by Macromedia has fast become the standard for vector graphic animations on the web. But, as web multimedia designers know, it's not the best tool for actually creating graphics. Now any image you make in Xara X can be exported in .swf format, which can then be imported into a Flash movie and animated. Because the graphic is in the Flash format, it remains scalable, so you can resize it and manipulate it within Flash without losing any quality. Using Xara X to create images for use in Flash adds a new level to the quality of animations you will be able to produce.

Animation
ANIMATED gifs are still the most common form of animation used on the web. Used for banner advertisements, spinning buttons and character animation, animated gifs will be around for a long time yet. The Xara X Frame Gallery allows you to create animations one frame at a time. It gives you complete control over every aspect of the animation from pauses between frames to the transparency of objects. When exporting, Xara X is able to fully optimize animated gifs so they have as small a file size as possible, meaning you can create eye-catching animations without hindering the performance of your site.

Dreamweaver integration
MACROMEDIA's Dreamweaver is one of the leading web design packages and is used by designers across the world to create stunning web pages. Xara X has a special option when exporting an image in a web format (gif, jpeg or png) which saves some extra information used by Dreamweaver, along with the graphic. Then, when you're making a web page in Dreamweaver, you can insert the graphic as normal, but if you want to edit it at any point, just click on the image and Xara X will automatically load up with the graphic open. Note: only works with Dreamweaver 3 or higher.

Hexadecimal RGB web color
BEING able to select colors based on their hexadecimal value is vital for web designers. That way you can match your graphics with colors from the standard web safe color palette, that you use on your web page. Often a designer will want to match a graphic color with the background color placed in a cell of a table for example. As HTML uses hexadecimal values (eg. #CCCCFF) to represent colors, it is extremely useful to be able to specify these colors within a drawing package. Especially for web designers, Xara X has a Hexadecimal RGB Web Color option which allows just this.

Image slicing
LARGE, complex graphics for web pages can produce large files, which take a long time to download over the Internet. However, often these large graphics contain areas of flat color or little detail. To reduce the amount of data to download you can 'slice' the image into sections, which can be download separately. The advantage is that areas of flat color/little detail can be saved at a lower quality (eg. as a 2-color GIF) than complex areas, which can be saved at a higher resolution. The 2-color GIF file takes less time to download, but it means you can still have high detail areas within your image. Xara X not only slices and saves the images for you, it also writes all the necessary HTML too, so you can just copy it into your web page.

Image maps
IMAGE maps are used in web pages to create clickable areas or hotspots on a graphic. For example, if you had a map of the United Kingdom - as shown in the example - you can use an image map with a hotspot over each country. Xara X allows you to assign a web address to any object in a document. You can then export the complete image along with the necessary HTML required to make the image map work. When assigning a web address to an object you have the option to make the hotspot fit the object exactly or roughly outline the area with a rectangle which can produce much less code than a complex shape. You also get the option to select where the link should point to - to a new window, the current frame, the parent frame and so on.

Exporting and optimizing
OPTIMIZATION of web graphics is an essential factor if you want to keep fast download times for your web pages. In order to make graphics have the smallest file size possible, yet still look good, it is often necessary to optimize them. Xara X has fantastic built-in optimization for web graphics, and also allows you to take complete control of color palettes yourself.

This means that you can choose the exact settings you want, including: color depth, dithering and transparency. You can also lock specific colors to make sure they are retained within the image. You can preview every change you make so you can see what the result will be before committing yourself and in the Export Dialog you can compare different export options so you know which one is best.

Linked stretching
LINKED stretching is the process of using named objects to stretch or extend other named objects. One of the most typical uses for Linked Stretching is when making a button with text on it. It means that when you change the text, the button automatically stretches so the text fits on it perfectly. This feature is particularly powerful when used in conjunction with the NavBar Tool. You can make one button with some text on, then produce a number of similar buttons to form a bar. The text on each button can then be edited and the individual buttons will stretch to accommodate the text.