Index

The Outsider's Featured Tutorials are selected from a variety of sources including the best tutorials from the impressive archive on The Xara Xone (created by Gary Priester), Guest Tutorials submitted by Xara enthusiasts and new material created by Xara.

Tutorial: Stretching web buttons and rounded rectangles

If you're creating a simple rounded button graphic like this, you'd imagine it was the easiest thing in the world. And for a simple button like this it is.

In the text tool type the button text and select the font, size etc.
In the rectangle tool draw a rectangle over your text. Select the rounded corner button on the Infobar. Adjust the roundedness by dragging on the corners
Change the color of the rectangle and / or its outline. Put rectangle to back (Ctrl+Shift+B) so it's under the text

But what happens now if you want to make the wording longer. The simple answer is that you just stretch the rounded rectangle using the Selector tool. This is what you get:

It's stretched, but it's ugly because the rounded ends have also become stretched. Their original aspect ratio has been distorted. So what we need is a way of stretching the button, but not the rounded ends. This is pretty simple also.

Right click on the rounded rectangle and select 'Convert to Editable Shapes'. (This makes the rounded rectangle an editable path instead of a rectangle object)
In the Shape Editor tool, drag select around the 4 control points at one end, like this
Using the arrow keys, nudge the selected part of the shape (use Shift+Arrow to move by larger amounts)

And this results in a correctly extended button. This is pretty simple and takes just a few seconds.

The same technique can be used for more complex buttons like this one.

This button drawing is much more complicated and consists of 2 groups. In order to be able to select all the shapes inside the graphic first select it all and then ungroup. In the Shape Editor you can now drag select around the right side of the button, as before, like this:

Which will select all the control points on the right side. Now you can use the arrow keys to nudge to selected end to extend the button to take longer text.

Because everything remains sharp vector graphics in Xara you can enlarge the button and it still looks great. When enlarged you can see the text has a subtle shadow which improved the readability of the text.

The file with all these graphics is available for download here.

And this button design uses linked colors, so if you edit the master color you can get any color gel button you like. (drag and drop 'Button color 2' from the color line to the color editor and then edit the Hue).

To save this as a web graphic, in the Selector tool drag around it to select the whole thing, and select File -> Export and select to save as a JPG or PNG.

Tip: If you're going to use this button on a web page that is not white, then it's necessary to alter the page background in Xara to match that of your web page. This is because the shadow is semi-transparent on a white background.

So if you web page is gray, and you save it with a white background it will look the example on the left when placed on your website. In order to make it look right, like the example on the right, change the Xara page background color before you export. One way to do this is to drag a color from the color line over the page and hold Ctrl before you drop. If you now edit that color (drag the same color to the color editor) you can change your page background to be any color you like.

�2006 Xara Group Ltd.