Welcome to Xara Online Designer

Welcome to Xara Online Designer

Photos and images

You can replace and add photos and images to your documents in a number of ways: Drag and drop a photo from your local drive onto your document or an existing image to replace it. Click the + (Add) button on the top bar and then the Image icon, now you can select a file from… o Your local drive o A cloud drive o An image from a website - just paste in the image URL o The Stock photo picker Tap an image and then tap Replace to open the Replace image menu, again this will allow you to choose a replacement image from the same list of options. Check out this tutorial for more info    Select an image and it will appear with a context menu allowing you to copy, duplicate, delete and replace.                                         The image will also appear with adjustment handles (the little blobs!)  which allow you to edit the image in a number of ways. If you mouse-over or tap the handles the status line at the top of the Online Designer window will give you brief description of each handle’s function. You can… Resize and crop the the frame Rotate the frame Push the photo within the frame Rotate and scale the photo within the frame Round the corners of the frame As you drag the handles to adjust an image, a faint copy of the full uncropped image is shown behind. This makes it easier to make adjustments because you can see parts of the image that fall outside the crop area as you drag the handles. Check out this movie for more info...    

Repelling text around images

You can place images inline with your text or they can be floating - that is to say they ‘float’ on top of the text. Inline images will move with the text and you can control whether the text  wraps to the left or right side of the image. To place an image inline with your text , position the text cursor where you want the image, and either paste it from the clipboard (Ctrl+V) or select  the + menu option, or drag and drop an image from your file system onto the text. To wrap text to the left or right side, click the image, and in the Properties panel on the right side select the Repel, Wrap option, which shows three wrap options, as shown left. This image is an  example of text wrapped to the right. The alternative to an inline image is a floating one that can be placed anywhere on the page. If you do not have a text cursor placed, then inserting an image, or dragging one onto the page will add it on top of everything else - you can now resize it and move it around the page. You can easily convert an inline image to a floating one by selecting the Float option from the context menu that appears when you select an inline image.                               With a floating image you can also repel text around the image. Again use the Repel, Wrap  option as above and choose Repel text. Now you can drag the image anywhere on your page and the text will repel around it. Choose the Stop repelling option to return the image to a floating state again. Tip: The easiest way to remove the text cursor from the text is to click on the background or press the Esc key. More info here…  

Photo Grids

A really cool way to display your photos is to use one of the Photo Grids. These are aesthetically pleasing arrays of photos in a fixed arrangement.                                To find the grids, tap on the + (Add) button then the Photo Grids icon. Now select a grid from one of the folders and tap to add it to your doc. The grids are available in a number of configurations - so 16:9, 4:3 and then a range of other variations - just explore the folders to find one you like. Replace the placeholder photos in the grids by dragging and dropping an image from your file explorer, or, select the photo and tap the Replace option - then choose from one of the options on the Replace image menu as above.

Stock photos

The Stock photo picker allows you fully integrated access to a free library of nearly 1 million high quality royalty-free stock photos from Pixabay. The photos are available under a Creative Commons CC01 licence which means they can even be used for commercial purposes without payment. To find the photos click on the + (Add) button then Image > Stock Photo. You can then use the search box to quickly locate a photo of your choice. You can enter a simple search term e.g. ‘cat’, or qualify it with something more specific like a color e.g. ‘green eye cat’. Search results will appear in the panel - scroll down to see them all. Tap on your chosen photo to add it to your document. If you have an image already selected it will be replaced. Alternatively - tap on an existing image in your document and choose the Replace option to pull up the menu. The photos will appear with the usual adjustment handles allowing you to resize and crop the photo.


More on the stock photos here…   Useful to know… When uploading an image from your local computer the image is resized before being uploaded, to be HD resolution (which is usually more than enough for any website). This speeds up the upload process. For example uploading a full res original 8 Mbyte photo file might take 4 minutes with a typical home ADSL internet connection, but only 30 seconds using this system. If your photos are stored in Google or Dropbox it’s recommended to select the From cloud drive option - this will take a second or two only, even for full res images. (Because the image is transferred directly from Google or Dropbox servers to our servers, which is a very fast operation).

Photo Effects

Use the photo effects feature to add photo effect presets or tweak the levels of your photos and images.  Just select a photo and then choose Photo Effects from the properties panel.   Select a preset from the Preset Effects tab. Notice how your photo appears with each preset thumbnail and how the effect morphs over the main photo on mouseover for a perfect preview. If you don’t fancy any of the presets then you can just apply your own using the settings on the Adjustments tab. Or use one of the presets as a base and tweak that.  A tap on the little pencil icon will switch you into the adjustments setting for your selected preset. Your adjusted version appears next to the original back in the presets panel as a Custom preset. You’ll see a lot of different parameters for you to adjust - from the ones that are instantly familiar - like Brightness and Contrast to more sophisticated ones like Saturation, which alters the color intensity. Temperature which makes an image ‘warm’ or ‘cool’ and X-Process which you can use to alter the color channels for some dramatic contrast and saturation effects. Select Tint hue to tint the photo and adjust using Tint strength. Use the sliders to experiment or enter numerical values if you wish. Use the Compare button to toggle between your original and current settings. There is an Effect code at the bottom of the Adjustments panel - if you copy the code (Ctrl + C)  you can paste the current settings on to another photo. Select the photo or photos and paste the new code settings into the box. Alternatively copy the photo and use the Paste style option from the Paste menu on the properties panel to paste the settings onto another photo.

Changing the color of a photo

The Preset Effects panel has a number of contone and duotone effects - Black and White being the most obvious example.  You can customize the presets - change the brightness and contrast within the Adjustments panel.  Change the light and dark colors of the contone either with a tap on the pencil icon - to take you to the Photo Colors panel.                                     Or select the Colored photo option in the Adjustments panel. If you un-check the box the contone is removed. On the Photo Colors panel tap a color to change and then choose a color to contone your photo from the Theme colors - or create your own by tapping on the + button to open the color editor. When coloring photos there are two colors you can set to contone the image - so just as a black & white image shows a continuous tone range from black to white, so you can select any Dark and Light color for the image. This is often called Contoning for the case where the start and end colors are the same hue (e.g. black and white, or sepia) or Duotone  where the start and end colors are different (e.g. an image goes from light yellow to darker purple as in the example here). A single tap on a chosen color patch will apply the color to the photo as the Light contone with the Dark contone remaining black. This is probably the most common scenario - so if you wanted a photo to be black and white for example then just tap the white color patch. Once you have contoned a photo the color patch shown in the properties panel is diagonally split, like the group colors, with the 2 halves representing the light and dark contone values. There’s also a Reset button to restore the original image.