Updates

Below is a history of recent updates for Xara Online Designer.

March 9

th

2017

Multiple Selection Multiple Selection in now available! Easily create pictograms, photo collages or move many objects at once. Extend your selection by using Shift + click, then choose group. By selecting a single object within a group, you can for example directly replace a photo or edit single SmartShapes. To select a group click on the frame of the group (it will turn blue). Then you can use the ungroup option on the context menu to ungroup. Snapping Improvements Some SmartShapes (for example rectangles) now show snapping lines during resize – more coming soon. Also you can now see snap lines for an object without moving the object, by selecting it, then holding down the mouse button. Transparency Select any object (SmartShapes, photos, charts, etc.), and you’ll now see a Transparency control in the Properties panel on the right hand side. With the transparency slider or keystrokes, you can adjust the transparency level as you wish.    

February 20

th

 2017

Today we have some major improvements for you! With our over 60 fixes, we are steadily increasing our reliability and the functionality of Xara Online Designer. Improved Object Handling We’ve incrementally improved our object handling: So creating awesome figures with our SmartShapes is now super easy!   Guides were first introduced in May 31 th  2016, but we’ve now enhanced the guide functionality. Now you can easily and quickly adjust all objects. Different guides will automatically appear while you’re moving your object: Green guides: Shows you the center of each object and each page (horizontally and vertically) Blue guides: Shows you guides, set up in Xara Designer Pro X, like the frame of the page. Red guides: Shows you how you align one object to another. If occasionally you don’t want to see any guides just press the Ctrl key and they will disappear. Our Guides are even better for SmartPictures. As you resize your picture, it will snap to page guides or objects (coming soon for SmartShapes too).   After you placed your object, our new rotation tool tip will help you find the right angle: 1. Select your object 2. Select the yellow button on the top right side of the object and hold the mouse button 3. By moving your mouse our tool tip will automatically appear, giving you information about the angle of your object. 4. For better ease of use, it will automatically snap for common angles like 45°, 90°, etc. Editing Access for Everybody There is a major improvement for sharing documents with non-Xara customers, and clients of designers using Web Designer or Designer Pro X to create websites for their clients.   Now when you share a document using Share editing… (see Aug 29th below) you simply enter the email of the recipient you want to share with. The big news is that they no longer have to be a registered Xara customer.   When the recipient receives an invite to share, they follow a link in the email, and click any of the sign-in options Google, Dropbox, OneDrive. They will be authenticated through one of those systems (to verify their email address is the one you sent to), and then they are taken directly to the document and can start editing.   If they are new customers (not owners of Xara Designer Pro X or Web Designer Premium) they will get limited editing rights - they can change the text and re-publish the website. More editing functionality, like changing pictures, will be coming soon. Beware: when they Save, they are saving a version back to your drive - because you’re sharing your file - it’s not a copy they are editing.  

January 30

th

2017

Today’s update is all about inner beauty. A very large number of internal fixes and improvements, but relatively few new features. With one exception: Share is about 10x faster than before! So choosing the Share option, top right  you’ll now get a URL to share your document with your friends, colleagues, or the world, in just a few seconds.

November 10

th

2016

A new version of desktop Designer Pro X (12.4) was released today also (available to all Pro users under the 365 day Update Service.) This version of Online Designer is compatible with the new 12.4 features, such as vertical alignment options. New Shapes Library Selecting the Insert menu (+ icon) there’s an updated library of shapes to pick from. These are all ‘SmartShapes’ in that you just click them to show edit handles. New Arrows Library A new selection of arrow SmartShapes is available from the insert menu (+ icon). Arrows are imported to match any Theme Color 1 you have defined (so they will match the color of your document). Shapes are imported gray always - but you can easily change the color of either by selecting the item and clicking the color patch on the Properties panel. Vector rendering of simple shapes Shapes, arrows and any un-grouped simple shape in your .xar file that are flat color filled (not graduated) are now displayed as resolution independent vector files in Xara Online editor. This means you can scale them or zoom into them (all the way to an amazing 25,000% zoom) and they will not be pixelated. Paste Photo Replace If you have an image on the system clipboard , you can now replace a selected image by simply doing a Paste (Ctrl+V) operation. This will retain the dimensions of the existing image, but you can use the photo edit controls to resize and crop as required. Text Item Selection We have improved selection and handling of text objects. Now when you place the text cursor, the outer edge of the text item is shown with a dashed line and a soft blue outline. The bounds of the text item are shown with a dashed line and blue highlight. This is a text column because it has only side handles to adjust the column width. If it was a text box (frame) it would also show resize handles top and bottom. The top status area also shows you what type of text object is selected. You can also perform operations on the whole text object, by tapping on the blue edge. In this case the outer edge becomes a larger blue highlight to indicate the whole thing is now selected. Click on the text edge to select the whole text object. A context menu is shown. Once you have selected the whole text item, you can perform operations on the whole thing, for example: To position a text item: Drag on the blue edge of the text frame. To change the column width: Drag either of the blue handles at the side To Copy, Duplicate or Delete the whole text item: Click the edge of the text, it becomes darker blue, and a context menu will appear with these options. To change the style of all the text: You can select all the text in the frame or column in the usual way (Ctrl+A), or you can select the whole text object by clicking the edge. Now any Text Properties applied from the right panel will be applied to the whole object.

October 17

th

 2016

New way of adding pages At the bottom of the page thumbnails there’s a new + icon that is a more direct way of adding pages to multi-page documents.  For templates that have multiple page designs (very few have at this stage) this will open the corresponding folder of page designs for this template. Save history On the bottom right of the properties panel (select anything to show this, or click the Properties icon  to show the panel). This shows you when the last edit occurred, and in the case of multiple users, shows who made the last edit. If you click the icon  you get a list of the save history of this document. Text Cursor Improvement: Using the arrow keys you can now navigate across flowing text frames. (It’s still not possible to select text across flowing frames - that will be coming later.) Repeating objects Repeating items appear on the same place on all pages of your document. You can now make any item a repeating item, and selectively delete repeating items from any one, or all pages. When you edit a repeating item, all copies are updated. Repeating items are great for headings, logos, footer text etc, that you want to appear at the same place on all pages, and that you can easily update across your document. To make any item repeating simply select it, and then under the Duplicate option in the right-side Properties Panel, select the ‘Repeat on all pages’ option. When you delete a repeating item, you’ll get prompted to delete all copies, or just the one. Removed .xar filename extension In the file picker we have hidden the .xar file extension from document names as it’s un- important for most users. All documents created and saved from Online Designer are stored in the native .xar format, that can be opened by any version of desktop version of Designer.

September 19

th

 2016

Clipboard improvements There are significant improvements to clipboard handling, in particular copy / pasting from desktop apps into Online Designer. Most browsers do not support clipboard operations from using a context menu, but do support the direct key short-cuts for the same operations, the usual Ctrl+ X, C, V for cut, copy, paste. When you paste text, it comes in using the same text Style at the text cursor. You can copy text from other apps, or other browser tabs and paste this in. Also copying images including from the system clipboard should work. This includes screen grabs so, for example, on Windows you can press the Print Screen key (often abbreviated to PrntScr), and then paste (Ctrl+V) this directly into Online Designer (either inline into the text or as a floating image). Image Properties There are significant enhancements to image handling: You can place images inline with your text or they can be floating. 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 (like the examples in this column), 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. Floating   images :      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. Tip:   The   easiest   way   to   remove   the   text   cursor   from   the   text   is   to   click   on   the   background or press the Esc key. Float   menu   option :   A   quick   way   to   convert   an   inline   image   to   be   a   floating   image,   is   to select the new Float context menu that appears when you click on an inline image. Repel text around images Floating    images    have    the    ability    to    repel    text    around    the outside   of   the   image,   such   as   this   ‘hair   girl’   image.   If   the   image has   transparent   areas   (it   has   to   be   a   PNG   format   because   JPG images   do   not   support   transparency)   then   the   text   will   be repelled   around   the   outside,   as   you   can   see   here.   To   repel text,   select   the   image   and   use   the   same   Repel,   Wrap    option as   above,   but   for   floating   images   there’s   now   a   ‘Repel   text’ menu option. Tip:   Erasing   backgrounds,   such   as   this   ‘hair’   case   is   usually an   advanced   and   complex   process.   This   example   took   a   few seconds    using    the    automatic    background    erase    feature    of Designer Pro X. Note images can only repel text if the image is on top of the text. If you put the image under text (e.g. after a ‘Put to back’) then the repel has no effect. Improved zoom UI When you tap the magnifier icon, bottom left of the screen, or just hover the mouse over it, a zoom slider pop-up is shown that lets you interactively adjust the zoom level from 30% to 1000%. Pressing the + icon will also smoothly increase the zoom level while pressed (and will go beyind 1000%). For advanced users a much more direct way to zoom is to use the mouse scroll wheel in conjunction with the Shift or Ctrl key, which allows fast zoom all the way to 25,000%. This also has the advantage that it zooms into the mouse pointer location. Zoom to area: Tap the magnifier icon, now drag across the area you want to zoom into. Previous Zoom Toggle: Tap the   on the left end of the Zoom slider, to toggle to the previous zoom level. This works great with the zoom to area, as it allows you to quickly toggle between the zoomed in and zoomed out views with a single tap. Zoom to 100%: Tap on the vertical blip on the zoom slider. Or press Ctrl+0 Zoom in the File Picker The File Picker (what you see when you select to open a document), also now has a magnifier control bottom left. This controls the size of the file thumbnails. The left end toggle controls can be a quick way to toggle between maximum sized icons and your preferred thumbnail size.   New First-time Introduction document After sign-in you are now presented with an Introduction document that gives basic instructions on how to use Xara Online Designer. It also serves as an experimental test document you can edit and mess with, to see how easy it is to edit, perhaps save as a PDF. To open a document, whether a new one based on a template, a blank page, or an existing document, select the Documents > Open menu option, top left of the screen. New Letter and Resume designs There are some new A4 Letter template designs in a Letter Designs folder. Also a new Resume (CV) folder with a small selection of designs.

August 29

th

 2016

Email sharing: There are two ways of sharing documents; 1. Read Only sharing - this is an HTML version of your document that you can share with anyone you give the URL to. 2. Shared editing - and we’ve made this much, much easier with this update. Previously you’ve had to share the master file in your cloud store, using the ‘Share file’ feature of your cloud drive. We have now enabled a more direct way to share the editing of your document with anyone else. Just select the new ‘Share editing…’ option under the share icon, to see this: Enter the email address of anyone you want to share the editing of this document with. You can enter multiple email addresses comma separated.  They will receive an email inviting them to share editing of your document. Note: Currently only Xara customers, owners of Designer Pro X and Web Designer Premium get access to Online Designer, so recipients must be registered Xara users. Secondly the recipients email address you send to must be associated with that user. So this can be any email they have associated with the Xara Online account, which could be the one they use for Xara, Google, Dropbox or OneDrive if they have the latter connected to their account. Share web address (URL): When you share a read-only version of your document (using the Share… menu), there’s now an easy way to copy the web address of the shared document - just click the Copy option shown below which places it on the system clipboard, or click the link to open it in a new browser tab. If you have previously shared the document, then any updates you’ve done since are private until you click the Update button in this dialog. If you have shared editing, as described above, then sharees see the changes as you make them (and you see their edits also in real-time) Document pathnames: Sometimes it’s useful to find out exactly where a document you’re editing is saved. Now you can hold the mouse-pointer over the filename, shown on the top bar status area. (In order to show the filename, make sure there’s no selection, so click on the background, or press Esc - then the filename will show). Page Rename: When you click on a page thumbnail in the left-side bar, it will select that page (and de- select everything else), and now the right side panel shows Page Properties. This includes a Name field which you can edit.  For web documents the first page should always be called ‘index’.

August 16

th

 2016

Further updates to the color editor: The color editor now shows before & after colors at the top. So here I’m editing Theme Color 1, and I’ve picked a green color, but you can easily see or compare it against the previous blue color. This is great when making subtle color changes to compare against the previous color. Secondly you can now edit color names, just tap on the name field and edit. Also you can copy and edit the hex RGB value from the field below the color picker. For advanced users, you can now also enter numeric values when creating shades. So here I’m editing a shade which I’ve called ‘Paler T1’. The X marks the original parent color, so I’m creating a paler version by dragging to the left.  The two shade X and Y fields allow you to enter precise numeric shade values (all relative to the parent position). If you want to create a pure tint of a color - that is a mix to white - then just make sure both the X and Y values are the same. Below the color picker are shown any other shades of this color that have already been created.  You can click these to set the values to match that color. The point of linked Shades of colors, is that when the hue of the parent color changes, then all linked shades change in sync. Improved draggability: Is that a word!?  When you select items on the page, the mouse- pointer changes to a 4-way arrow to indicate that you can simply drag the items to where you want on the page. To move a text object, drag on the edge of the item. Document Scrolling: If there’s a selected item, such as an image or shape, then the arrow keys on your keyboard will move the object. However when there’s no selection then the arrow keys will scroll the document. Using Shift key will accelerate the scroll.

August 1

st

 2016

Bar, column and pie segment charts. There a new category of SmartShape called Charts, that appears under the Insert + menu. A selection of some of the available charts. These are super-cool interactive charts that you manipulate directly on the page by dragging the various control handles. Here’s what the various handles do. Hold the mouse pointer over any handle to see a tool-tip prompt. The charts are all based on Theme Color 1, (they are not alway blue) so when placed in your document they will match whatever your Theme Color 1 is. You can change Theme Color 1 as described below. Share menu improvement: The Share menu now shows if you have already shared a document, and will show the URL, along with a Copy button to copy the URL to the system clipboard. Click here for older updates
Rotate whole SmartShape Adjust width of chart Drag to add or remove bars Drag to adjust height of the chart Adjusts the rounded corner of all the bars  Or you can drag this handle to adjust the height of each column, and thus the value.  Using the Text Tool, edit the labels Adjust the width or the gap between all the bars Use the Text Tool to edit the bar values. The bar height will adjust accordingly.  Drag this handle left or right to re-order the bars.