Xara Webster - Creating a Simple Image

This looks a relatively complicated drawing but actually contains only seven objects.

This page is in the form of a tutorial which you can do in stages if you wish. If you want to stop, just complete the stage and then save the document to disc. You can load the document up again later and continue at the next stage.

Stage 1: open a new document

Choose New from the File menu.

Stage 2: create the background

The picture uses a colored rectangle so the first step is to import the rectangle:

1. Open the Clipart Gallery. (Choose Clipart Gallery from the Utilities menu.)
2. Scroll down the Gallery until you reach the Simple Shapes - Colored section.
3. Click on the folder icon to the left of the name to open this section of the Gallery.
4. Scroll down until you see rectangle.web.
5. Drag rectangle.web from the Gallery onto the page. This is called drag-and-drop and is a useful way of importing items from the Galleries.
   
   (You can also import items from Galleries by clicking the Import button. The drawback is that you have less control over where the item appears on the page.)
6. If you wish you can now close the Clipart Gallery. This lets you see more of the Webster work area (the white background).

The rectangle is too small for the finished picture but we can resize it later.

Now we need to change its color:

1. Open the Color Editor. (Choose Color Editor from the Utilities menu.)
2. First we'll change the basic color of the center to orange. (Webster calls this the "fill color".) Towards the bottom of the Color Editor is a color strip that runs from red to red. Click on orange on this strip.
3. To make the color darker drag the white cross on the main color panel downwards. As you drag the value in V changes. Our drawing uses about 40% V.
   
4. Next we'll change the line color. Click on the line button at the top of the gallery.
5. Drag the white cross to the bottom right hand corner of the color panel. This selects black.
   
6. If you wish you can now close the Color Gallery.

We want the background fading out which we can do using transparency. Transparency makes objects semitransparent so you can partly see what is under them. In this case, the white background shows through making the object lighter.

1. The rectangle should have eight black squares (Selection Handles) around to show it's selected. If not, click on the rectangle to select it.
2. Choose the Transparency Tool from the Toolbar.
3. Move the mouse pointer over the bottom of the rectangle.
4. Drag the mouse pointer upwards. As you drag an arrow shows you the direction you are moving.
5. Stop dragging when you reach the top of the rectangle. Releasing the mouse button creates a linear transparency and the color graduates from dark brown at the bottom to white at the top.
   

That's it - you've created the basic background

Stage 3: next we create the bottom line of text

This example uses Times Roman font. If you don't have this font, use an alternative but remember you may need to change the suggested values to make the text fit.

1. Choose the Text Tool from the Toolbar.
2. Click towards the bottom left of the rectangle. This positions the text cursor.
3. Type in
   Textures & Transparency - transform your graphic design
   The text is too large so we will make it smaller.
4. Press ESC. This selects the entire line of text.
5. Click on the arrow to the right of 16pt at the top of the window. This opens a drop down list of font sizes.
6. Choose 8pt.
   

The text is still too wide for the finished drawing . We will correct that when we align everything later.

Next we want to make the text white.

1. Open the Color Editor by choosing Color Editor from the Utilities menu. You may need to move the Color Editor to the side so you can see the text.
2. Make sure the line button at the top of the Color Editor is not selected.
3. Click in the top right hand corner of the Color Editor color panel. This selects white. The S text box at the bottom of the Color Editor should show 0% and V 100%. If not, drag the cross in the color panel until you get the correct values.
   

1. The Text Tool should still be selected. If not, click on it.
2. Click above the first line of text and level with its left hand edge.
3. Type
   Xara
4. Xara needs to be bigger so press ESC and set the text size to 72pt.
   

First the bottom line of text needs to be made the same width as the Xara.

1. Click on the text to select. Note that you have to click on one of the letters (not the background) to select the text.
2. Drag the center right selection handle to the left. This makes the text narrower but leaves the height unchanged. As you drag the handle, the Infobar shows you the current scaling. We used 80%.
   

Now to align everything vertically.

1. Select everything by choosing Select All on the Edit menu.
2. Open the Alignment dialog box by choosing Alignment on the Arrange menu.
3. From the drop-down list choose Align Centrally for Horizontal Positions. The preview window shows you the effect of selecting this option.
4. Leave Vertical Positions set to No Change.
5. Click Apply.
6. Click Close.
   

First we want a white highlight.

1. The Selector Tool should already be selected. If not, click on it.
2. Click on 'Xara' to select it.
3. Clone it using Clone on the Edit menu.
4. Change the color to white.
5. CTRL-SHIFT-nudge it twice up and to the left.
   

Then we want to create the blue text in front.

1. Clone the white 'Xara'.
2. Change the color of the copy to mid-blue using the Color Editor. Click on blue in the red-red color bar in the Color Editor. This gives the basic color.
3. Drag the cross on the color panel to give the required shade.
4. Web graphics look best if they use the 216-color Netscape and Internet Explorer palette. To snap to the nearest color in the palette click Browser Palette.
5. CTRL-SHIFT-nudge the blue Xara down and to the right.
   

Lastly we require the shadow.

1. Clone the blue 'Xara'.
2. Change its color to black.
   
3. Click on the black 'Xara'. The selection handles change to arrow shapes - these will be used later.
4. Apply a linear transparency. Start dragging level from the bottom of the rectangle to the top of the rectangle. This means that the shadow is partially transparent.
   
5. Drag the top middle selection handle to reduce the height to about 70%. (The top of the gray 'X' is level with the blue 'ara'.)
   
6. You now need to move it behind the other letters. Choose Move backwards on the Arrange menu. Do this three times until the shadow is behind the other copies of Xara.
   
7. Lastly we want to skew the shadow. Drag the top center selection handle to the right to skew. As you drag, the Infobar shows the current skew. We used 60%.
   

The shadow now runs off the edge of the background rectangle. It looks better is we make the background wider.

1. The Selector Tool should already be selected. If not, click on it.
2. Click on the background rectangle.
3. Drag the right hand center handle to stretch the rectangle. As you stretch, the Infobar shows the current width. We made our rectangle 280 pixels wide but you may prefer a slightly different value.