Practically every team in your company needs documents – sales & marketing, but also management, finance, support, etc.  They want great looking documents and in the company branding. But the chances are they don’t feel they have the skills to create them and, all too often, the design department is too busy to do them. Here’s where Xara Online Designer comes in, and you’ve got two great options; either your in-house designer creates a set of master documents for your teams to edit in Online Designer, or you can jump straight in and use Xara’s ready-made templates to customize with your own branding and content. It’s common to have two or more people work on a document, and this is usually done by passing the file amongst the contributors. But this ‘pass-the-parcel’ approach is time wasting and error prone. No one else can touch the document while someone else is working on it.  Google Docs allows multiple people to edit a document at the same time but it has very few graphical features and very limited page layout options. Some example documents from Xara Online Designer.

Shared Editing

Xara Online Designer offers one-click sharing of your documents. Colleagues can work on the same document at the same time, where edits can be seen live, as-they-happen, by everyone editing the document. With the comment feature, collaborators sharing the document can easily see which comment applies to which text. And it can create almost any layout style you can imagine.

Your Brand Colors

Xara Online Designer offers a unique re-coloring system where a single click can re-color the whole document. There’s a set of palettes or you can customize the colors to be your company brand. The same tri-fold brochure design, in different colour schemes. If this sounds like your situation read on, then sign in and give Xara Online Designer a go. Front page of flyer

The scenario

I want to create a double sided flyer for my ‘Chiltern Estates’ company. I’m going to do this by customizing a Xara template to be in my company branding, with my text and photos and other content. I would like to share the editing with a colleague and then save it as a pdf to print and distribute.  I will create the front page in my company branding, changing the theme colors, text and header photo. In the second part, I will share the editing with my colleague so we can work on the rear of the flyer together and I’ll show you how to add lots of different types of content to the document.

Getting started

Xara Online Designer is a cloud-based app - it works in your web browser, and its files are stored in your preferred cloud drive e.g. Dropbox (2GB free), Google Drive (15GB free) or Microsoft OneDrive (5GB free) (Note: OneDrive is pre- installed with Windows 8.1 and 10, but you will need to download it for Windows 7).  You need to be signed-up for one of these services. Each of these services gives you storage space in the cloud, and they also offer desktop utility that allows you to sync files across machines and devices. They are great for sharing files in your team - you probably use one of these already to share files. Above: shows part of my Windows File Explorer with Google Drive, Dropbox and OneDrive installed Now you can get started with Xara Online Designer. Go to cloud.ixara.com. If you have one of these cloud drive services, you can sign up (and later, sign in) by just clicking one of these labels. You’ll be asked to authenticate your credentials and (so it’s not necessary to create yet another online account). Note: Once you have been authenticated, the next time you access Xara Online Designer you will not need to re-enter your credentials, so the sign-in is a simple one-click. Once you’ve signed in for the first time,  Online Designer will ask you to pick a design from the selection of design categories (which is rapidly growing), or you can start with a blank template. First time users are asked to pick a design I selected the Print category and then in the Flyers subfolder, I selected the Stylo Flyer Portrait, which is a two page document for the front and back of the flyer. This opens in the Editor, and first time users are offered a guided tour. We will skip the guided tour (to see it later, you can find it in the Settings,  menu) The selected template is opened in the editor with a guided tour for first time users.

Changing the color scheme

The first step is to select your color scheme. Try it - click on a few of the color schemes to see the change. Most template designs have a primary and secondary color. On the color palette thumbnails the top color is the primary color, the second one is the secondary color. The ABC shows you the text color and page background, which is usually dark text on a white background. The color schemes outlined in black, have a dark page background, and pale text. As you change the color scheme notice that the top image of this document is in a tone of one of the theme colors (I will show you how to change individual theme colors later).

Navigating your document and understanding the work space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on  the page. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag to pan the document. You can even ‘throw’ the page for  rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the document. The flyer is a multi-page document so you will see the page thumbnails on the left; simply click a page to scroll to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can resize the thumbnail panel by dragging on the projecting ‘drag handle’. Tap this handle to hide or show the page thumbnails. The editor is remarkably simple to use. The key controls are in a bar at the top of the workspace. Xara Online Designer controls

Changing text styles

This template has a serif typeface for the body text but your company may prefer a sans-serif typeface. To change it, click or tap on some body text which places a text cursor and displays a slide-in panel of text controls. Click on the arrow alongside the text style, which will open a menu showing the text styles used in the document with the option to choose another text style scheme. (In a future release you will be able to set your own font and font size, for now you’re provided with preset text style combinations). Note: The text controls side panel shown on the right appears automatically on wide screens, when the text is selected. For narrow screens such as tablets, it’s necessary to click the properties control button  on the top bar to show or hide it.                         The text properties panel leads to the Text styles options

Editing your document

Editing the text and images in your document is very easy. Click an item to be able to edit it. Press Esc to clear any selection, or tap on the background.

Editing the text

The text controls include all the usual bold, italic, etc. or use the normal keyboard shortcut like Ctrl-B for bold.  A list of key shortcuts can be found in the Settings menu. The yellow Hi icon will add a background to your text to highlight it. There’s also alignment and list and indent controls. You can select text in the normal ways - click drag over the text, double click to select a word and triple click to select the whole line. See the short movie on Editing Text for a more detailed explanation of all the options in the text control panel.

Editing the Text Panel

Many of the template designs use Text Panels (and you can add your own of course) which are text boxes with a colored background. Whilst editing the text on your page, you may have noticed that the text ‘Clean and Simple Flyer’ is on a panel. If you have extended the text (I entered ‘Exceptional Service Guaranteed’) you will notice that it has run onto a second line, like mine, but don’t worry - this is a SmartShape Text Panel. Simply click on the outside edge of the panel to see the editing handles. Drag on the blue round handle in the center of the right side to widen the text panel and note that it automatically re-centers itself on the page. The SmartShape Text panel Text panel selected, showing the editing handles Drag the right hand handle to resize the Text panel to be wider

Replacing the header photo

Now, a look at the header image as I need to replace it. You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the  ‘Replace’ menu option  where you can either select an alternative photo from your local disc, or pick an image from your cloud drive, or select from the range of over a million completely free stock photos in Online Designer. To add a stock photo click the ‘Replace’ menu option. I searched for ‘House’ as I am preparing a flyer for a Real Estate Agent. With the Editor’s Choice selected the search will be filtered to display the best quality photos. Click on the desired photo and it will appear on the page in the theme color. When you have an image selected you get the edit handles and a context menu. You can see that this is a Smart photo as it has the edit handles on it. I want to move the photo up slightly so I select the ‘hand’ control in the bottom left of the photo and drag to reposition the photo. In addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you can see the size of the whole image. See our movies about adding photos, using stock photos,  and resizing and cropping, for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution. This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images.

Symbols and Icons

There are three social media symbols at the bottom of the page. I will replace the Instagram symbol with a YouTube one, and then increase the spacing between them. When I select one of the symbols I can see that they have been included inline with this column of text so I can use the usual text controls to adjust the alignment and spacing. just click on the space and use the space-bar on my computer, as you would with text.             Replacing the social media symbol with one symbol library of thousands of symbols
Tip: Because these symbols are inline with the text and behave like text characters you can change their size by selecting them and then
changing the font size. Currently, there is no font size control in the text property panel but there is a key shortcut that allows you to
increase and decrease the font size  - use Shift+Alt and the plus or minus key.. Many symbols in the templates are stand alone graphics that are sometimes grouped together and sometimes  just a simple symbol (like the star on the top left of this design) that can be moved, resized and re-colored as required. To replace the symbol, in either case, select it and select the  ‘Replace symbol’ menu - a side panel will open to show all the symbol options. There are thousands of symbols to choose from but you can use the search box to find exactly what you’re looking for. I searched for YouTube and selected one of those on offer.

Adding Links

As these symbols are inline in the text when I select a symbol, the text properties panel slides out and there you can see a link option.   Click on the link icon to see the options for linking the graphic. Linking objects or text

Editing Colors

Xara Online Designer uses an amazingly powerful color scheme system of Theme Colors. Assume that I want to change the theme color on the text to match my company branding. So I select some of the text, then tap the purple color patch in the properties panel on the right, to see a palette of all the colors in this document. The palette of colors available in this document. The selected color is called ‘Theme Color 1’. Select the ‘Change’ menu option to change this color throughout the document. The purple color of the selected text is highlighted, and you can see by the small color patch under it that it has some linked shades.  When you change the parent Theme Color, all linked shades will change also, as will all occurrences of this color throughout your document. If you want to create a completely new color click on the + symbol and you will see the color editor where you can choose your new color, or paste a RGB hex color value (e.g. you company color). See the movies about color editing and ready-made color schemes Tip: It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color.

Re-coloring Photos

The photo in this design is colored based on the Theme Colors used in this document. When you select the photo you get a variety of options in the right-side property panel. Here it shows the controls to set the photo colors, photo enhance (e.g. brightness, contrast etc) and photo transparency. If you select the Photo Colors option you can set both the light and dark tones of your photo (technically to make it a contone or duotone image). You can make these color be based on the Theme Color of your document, or any color you like. Select the Reset option to reset it to full color.

Saving your edits and connecting your cloud drive for the first time

When you’re satisfied with the design it’s time to save it. The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive. As a new user, you will not yet have linked your cloud drive so you will have the opportunity to do so when saving your first document. Left: A section of the Documents menu Click on Documents in the top left to open the documents menu., then select Save. Now select to Add cloud drive and you will see the options for Google Drive, Dropbox or Microsoft OneDrive. Select your cloud drive of choice. The first time you connect a new cloud drive you will be asked to give access permission to save files to this drive. Once you have connected a cloud drive, you can save the file, choose your folder then give the document a name and click Save. Note: You can even connect multiple accounts  on the same drive, for example, if you have a personal OneDrive account as well as a business account. If you have no cloud drive connected, you can Add a cloud drive, here.

Backups

An additional benefit of your file being saved to your cloud drive is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe and easy way of maintaining multiple versions of your document files.

Creating your company documents, Part 2

In Part 2 I cover how to share editing of your document, add and respond to comments from team members, manipulate and enhance photos, add and customize SmartShapes, create a PDF to print or distribute, and share a link with your customers.

Find out more about Xara Online Designer

You can find more details and a full list of our current tutorial movies on our Xara Online Designer page. The Xara Online Designer templates include social media headings, presentations, letter designs, CVs, print documents such as flyers, leaflets and brochures and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Or maybe you’d like to try the unique offline/online experience offered by Xara, whereby you can edit your documents either online or offline  - download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Xara Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
Practically every team in your company needs documents – sales & marketing, but also management, finance, support, etc.  They want great looking documents and in the company branding. But the chances are they don’t feel they have the skills to create them and, all too often, the design department is too busy to do them. Here’s where Xara Online Designer comes in, and you’ve got two great options; either your in-house designer creates a set of master documents for your teams to edit in Online Designer, or you can jump straight in and use Xara’s ready-made templates to customize with your own branding and content. It’s common to have two or more people work on a document, and this is usually done by passing the file amongst the contributors. But this ‘pass-the-parcel’ approach is time wasting and error prone. No one else can touch the document while someone else is working on it.  Google Docs allows multiple people to edit a document at the same time but it has very few graphical features and very limited page layout options. Some example documents from Xara Online Designer.

Shared Editing

Xara Online Designer offers one-click sharing of your documents. Colleagues can work on the same document at the same time, where edits can be seen live, as-they-happen, by everyone editing the document. With the comment feature, collaborators sharing the document can easily see which comment applies to which text. And it can create almost any layout style you can imagine.

Your Brand Colors

Xara Online Designer offers a unique re-coloring system where a single click can re-color the whole document. There’s a set of palettes or you can customize the colors to be your company brand. The same tri-fold brochure design, in different colour schemes. If this sounds like your situation read on, then sign in and give Xara Online Designer a go. Front page of flyer

The scenario

I want to create a double sided flyer for my ‘Chiltern Estates’ company. I’m going to do this by customizing a Xara template to be in my company branding, with my text and photos and other content. I would like to share the editing with a colleague and then save it as a pdf to print and distribute.  I will create the front page in my company branding, changing the theme colors, text and header photo. In the second part, I will share the editing with my colleague so we can work on the rear of the flyer together and I’ll show you how to add lots of different types of content to the document.

Getting started

Xara Online Designer is a cloud-based app - it works in your web browser, and its files are stored in your preferred cloud drive e.g. Dropbox (2GB free), Google Drive (15GB free) or Microsoft OneDrive (5GB free) (Note: OneDrive is pre-installed with Windows 8.1 and 10, but you will need to download it for Windows 7).  You need to be signed-up for one of these services. Each of these services gives you storage space in the cloud, and they also offer desktop utility that allows you to sync files across machines and devices. They are great for sharing files in your team - you probably use one of these already to share files. Above: shows part of my Windows File Explorer with Google Drive, Dropbox and OneDrive installed Now you can get started with Xara Online Designer. Go to cloud.ixara.com. If you have one of these cloud drive services, you can sign up (and later, sign in) by just clicking one of these labels. You’ll be asked to authenticate your credentials and (so it’s not necessary to create yet another online account). Note: Once you have been authenticated, the next time you access Xara Online Designer you will not need to re-enter your credentials, so the sign-in is a simple one-click. Once you’ve signed in for the first time,  Online Designer will ask you to pick a design from the selection of design categories (which is rapidly growing), or you can start with a blank template. First time users are asked to pick a design I selected the Print category and then in the Flyers subfolder, I selected the Stylo Flyer Portrait, which is a two page document for the front and back of the flyer. This opens in the Editor, and first time users are offered a guided tour. We will skip the guided tour (to see it later, you can find it in the Settings,  menu) The selected template is opened in the editor with a guided tour for first time users.

Changing the color scheme

The first step is to select your color scheme. Try it - click on a few of the color schemes to see the change. Most template designs have a primary and secondary color. On the color palette thumbnails the top color is the primary color, the second one is the secondary color. The ABC shows you the text color and page background, which is usually dark text on a white background. The color schemes outlined in black, have a dark page background, and pale text. As you change the color scheme notice that the top image of this document is in a tone of one of the theme colors (I will show you how to change individual theme colors later).

Navigating your document and understanding the work space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on  the page. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag to pan the document. You can even ‘throw’ the page for  rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the document. The flyer is a multi-page document so you will see the page thumbnails on the left; simply click a page to scroll to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can resize the thumbnail panel by dragging on the projecting ‘drag handle’. Tap this handle to hide or show the page thumbnails. The editor is remarkably simple to use. The key controls are in a bar at the top of the workspace. Xara Online Designer controls

Changing text styles

This template has a serif typeface for the body text but your company may prefer a sans-serif typeface. To change it, click or tap on some body text which places a text cursor and displays a slide-in panel of text controls. Click on the arrow alongside the text style, which will open a menu showing the text styles used in the document with the option to choose another text style scheme. (In a future release you will be able to set your own font and font size, for now you’re provided with preset text style combinations). Note: The text controls side panel shown on the right appears automatically on wide screens, when the text is selected. For narrow screens such as tablets, it’s necessary to click the properties control button  on the top bar to show or hide it.                         The text properties panel leads to the Text styles options

Editing your document

Editing the text and images in your document is very easy. Click an item to be able to edit it. Press Esc to clear any selection, or tap on the background.

Editing the text

The text controls include all the usual bold, italic, etc. or use the normal keyboard shortcut like Ctrl-B for bold.  A list of key shortcuts can be found in the Settings menu. The yellow Hi icon will add a background to your text to highlight it. There’s also alignment and list and indent controls. You can select text in the normal ways - click drag over the text, double click to select a word and triple click to select the whole line. See the short movie on Editing Text for a more detailed explanation of all the options in the text control panel.

Editing the Text Panel

Many of the template designs use Text Panels (and you can add your own of course) which are text boxes with a colored background. Whilst editing the text on your page, you may have noticed that the text ‘Clean and Simple Flyer’ is on a panel. If you have extended the text (I entered ‘Exceptional Service Guaranteed’) you will notice that it has run onto a second line, like mine, but don’t worry - this is a SmartShape Text Panel. Simply click on the outside edge of the panel to see the editing handles. Drag on the blue round handle in the center of the right side to widen the text panel and note that it automatically re-centers itself on the page. The SmartShape Text panel Text panel selected, showing the editing handles Drag the right hand handle to resize the Text panel to be wider

Replacing the header photo

Now, a look at the header image as I need to replace it. You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the  ‘Replace’ menu option  where you can either select an alternative photo from your local disc, or pick an image from your cloud drive, or select from the range of over a million completely free stock photos in Online Designer. To add a stock photo click the ‘Replace’ menu option. I searched for ‘House’ as I am preparing a flyer for a Real Estate Agent. With the Editor’s Choice selected the search will be filtered to display the best quality photos. Click on the desired photo and it will appear on the page in the theme color. When you have an image selected you get the edit handles and a context menu. You can see that this is a Smart photo as it has the edit handles on it. I want to move the photo up slightly so I select the ‘hand’ control in the bottom left of the photo and drag to reposition the photo. In addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you can see the size of the whole image. See our movies about adding photos, using stock photos,  and resizing and cropping, for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution. This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images.

Symbols and Icons

There are three social media symbols at the bottom of the page. I will replace the Instagram symbol with a YouTube one, and then increase the spacing between them. When I select one of the symbols I can see that they have been included inline with this column of text so I can use the usual text controls to adjust the alignment and spacing. just click on the space and use the space-bar on my computer, as you would with text.             Replacing the social media symbol with one symbol library of thousands of symbols
Tip: Because these symbols are inline with the text and behave like text characters you can change
their size by selecting them and then changing the font size. Currently, there is no font size control in
the text property panel but there is a key shortcut that allows you to increase and decrease the font
size  - use Shift+Alt and the plus or minus key.. Many symbols in the templates are stand alone graphics that are sometimes grouped together and sometimes  just a simple symbol (like the star on the top left of this design) that can be moved, resized and re-colored as required. To replace the symbol, in either case, select it and select the  ‘Replace symbol’ menu - a side panel will open to show all the symbol options. There are thousands of symbols to choose from but you can use the search box to find exactly what you’re looking for. I searched for YouTube and selected one of those on offer.

Adding Links

As these symbols are inline in the text when I select a symbol, the text properties panel slides out and there you can see a link option.  Click on the link icon to see the options for linking the graphic. Linking objects or text

Editing Colors

Xara Online Designer uses an amazingly powerful color scheme system of Theme Colors. Assume that I want to change the theme color on the text to match my company branding. So I select some of the text, then tap the purple color patch in the properties panel on the right, to see a palette of all the colors in this document. The palette of colors available in this document. The selected color is called ‘Theme Color 1’. Select the ‘Change’ menu option to change this color throughout the document. The purple color of the selected text is highlighted, and you can see by the small color patch under it that it has some linked shades.  When you change the parent Theme Color, all linked shades will change also, as will all occurrences of this color throughout your document. If you want to create a completely new color click on the + symbol and you will see the color editor where you can choose your new color, or paste a RGB hex color value (e.g. you company color). See the movies about color editing and ready-made color schemes Tip: It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color.

Re-coloring Photos

The photo in this design is colored based on the Theme Colors used in this document. When you select the photo you get a variety of options in the right-side property panel. Here it shows the controls to set the photo colors, photo enhance (e.g. brightness, contrast etc) and photo transparency. If you select the Photo Colors option you can set both the light and dark tones of your photo (technically to make it a contone or duotone image). You can make these color be based on the Theme Color of your document, or any color you like. Select the Reset option to reset it to full color.

Saving your edits and connecting your cloud drive for the first time

When you’re satisfied with the design it’s time to save it. The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive. As a new user, you will not yet have linked your cloud drive so you will have the opportunity to do so when saving your first document. Left: A section of the Documents menu Click on Documents in the top left to open the documents menu., then select Save. Now select to Add cloud drive and you will see the options for Google Drive, Dropbox or Microsoft OneDrive. Select your cloud drive of choice. The first time you connect a new cloud drive you will be asked to give access permission to save files to this drive. Once you have connected a cloud drive, you can save the file, choose your folder then give the document a name and click Save. Note: You can even connect multiple accounts  on the same drive, for example, if you have a personal OneDrive account as well as a business account. If you have no cloud drive connected, you can Add a cloud drive, here.

Backups

An additional benefit of your file being saved to your cloud drive is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe and easy way of maintaining multiple versions of your document files.

Creating your company documents, Part 2

In Part 2 I cover how to share editing of your document, add and respond to comments from team members, manipulate and enhance photos, add and customize SmartShapes, create a PDF to print or distribute, and share a link with your customers.

Find out more about Xara Online Designer

You can find more details and a full list of our current tutorial movies on our Xara Online Designer page. The Xara Online Designer templates include social media headings, presentations, letter designs, CVs, print documents such as flyers, leaflets and brochures and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Or maybe you’d like to try the unique offline/online experience offered by Xara, whereby you can edit your documents either online or offline  - download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Xara Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
Practically every team in your company needs documents – sales & marketing, but also management, finance, support, etc.  They want great looking documents and in the company branding. But the chances are they don’t feel they have the skills to create them and, all too often, the design department is too busy to do them. Here’s where Xara Online Designer comes in, and you’ve got two great options; either your in-house designer creates a set of master documents for your teams to edit in Online Designer, or you can jump straight in and use Xara’s ready-made templates to customize with your own branding and content. It’s common to have two or more people work on a document, and this is usually done by passing the file amongst the contributors. But this ‘pass-the-parcel’ approach is time wasting and error prone. No one else can touch the document while someone else is working on it.  Google Docs allows multiple people to edit a document at the same time but it has very few graphical features and very limited page layout options. Some example documents from Xara Online Designer.

Shared Editing

Xara Online Designer offers one-click sharing of your documents. Colleagues can work on the same document at the same time, where edits can be seen live, as-they-happen, by everyone editing the document. With the comment feature, collaborators sharing the document can easily see which comment applies to which text. And it can create almost any layout style you can imagine.

Your Brand Colors

Xara Online Designer offers a unique re-coloring system where a single click can re-color the whole document. There’s a set of palettes or you can customize the colors to be your company brand. The same tri-fold brochure design, in different colour schemes. If this sounds like your situation read on, then sign in and give Xara Online Designer a go. Front page of flyer

The scenario

I want to create a double sided flyer for my ‘Chiltern Estates’ company. I’m going to do this by customizing a Xara template to be in my company branding, with my text and photos and other content. I would like to share the editing with a colleague and then save it as a pdf to print and distribute.  I will create the front page in my company branding, changing the theme colors, text and header photo. In the second part, I will share the editing with my colleague so we can work on the rear of the flyer together and I’ll show you how to add lots of different types of content to the document.

Getting started

Xara Online Designer is a cloud-based app - it works in your web browser, and its files are stored in your preferred cloud drive e.g. Dropbox (2GB free), Google Drive (15GB free) or Microsoft OneDrive (5GB free) (Note: OneDrive is pre-installed with Windows 8.1 and 10, but you will need to download it for Windows 7).  You need to be signed-up for one of these services. Each of these services gives you storage space in the cloud, and they also offer desktop utility that allows you to sync files across machines and devices. They are great for sharing files in your team - you probably use one of these already to share files. Above: shows part of my Windows File Explorer with Google Drive, Dropbox and OneDrive installed Now you can get started with Xara Online Designer. Go to cloud.ixara.com. If you have one of these cloud drive services, you can sign up (and later, sign in) by just clicking one of these labels. You’ll be asked to authenticate your credentials and (so it’s not necessary to create yet another online account). Note: Once you have been authenticated, the next time you access Xara Online Designer you will not need to re-enter your credentials, so the sign-in is a simple one-click. Once you’ve signed in for the first time,  Online Designer will ask you to pick a design from the selection of design categories (which is rapidly growing), or you can start with a blank template. First time users are asked to pick a design I selected the Print category and then in the Flyers subfolder, I selected the Stylo Flyer Portrait, which is a two page document for the front and back of the flyer. This opens in the Editor, and first time users are offered a guided tour. We will skip the guided tour (to see it later, you can find it in the Settings,  menu) The selected template is opened in the editor with a guided tour for first time users.

Changing the color scheme

The first step is to select your color scheme. Try it - click on a few of the color schemes to see the change. Most template designs have a primary and secondary color. On the color palette thumbnails the top color is the primary color, the second one is the secondary color. The ABC shows you the text color and page background, which is usually dark text on a white background. The color schemes outlined in black, have a dark page background, and pale text. As you change the color scheme notice that the top image of this document is in a tone of one of the theme colors (I will show you how to change individual theme colors later).

Navigating your document and understanding

the work space

On both touch and mouse systems, you can push pages around (scroll) by simply dragging anywhere on  the page. When over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag to pan the document. You can even ‘throw’ the page for  rapid scrolling. There’s a shortcut of holding the Shift key and using the scroll wheel to zoom in and out. Try it on the document. The flyer is a multi-page document so you will see the page thumbnails on the left; simply click a page to scroll to that page. For longer documents, scroll the page thumbnail area using the mouse wheel or drag on the thumbnails. You can resize the thumbnail panel by dragging on the projecting ‘drag handle’. Tap this handle to hide or show the page thumbnails. The editor is remarkably simple to use. The key controls are in a bar at the top of the workspace. Xara Online Designer controls

Changing text styles

This template has a serif typeface for the body text but your company may prefer a sans-serif typeface. To change it, click or tap on some body text which places a text cursor and displays a slide-in panel of text controls. Click on the arrow alongside the text style, which will open a menu showing the text styles used in the document with the option to choose another text style scheme. (In a future release you will be able to set your own font and font size, for now you’re provided with preset text style combinations). Note: The text controls side panel shown on the right appears automatically on wide screens, when the text is selected. For narrow screens such as tablets, it’s necessary to click the properties control button  on the top bar to show or hide it.                         The text properties panel leads to the Text styles options

Editing your document

Editing the text and images in your document is very easy. Click an item to be able to edit it. Press Esc to clear any selection, or tap on the background.

Editing the text

The text controls include all the usual bold, italic, etc. or use the normal keyboard shortcut like Ctrl-B for bold.  A list of key shortcuts can be found in the Settings menu. The yellow Hi icon will add a background to your text to highlight it. There’s also alignment and list and indent controls. You can select text in the normal ways - click drag over the text, double click to select a word and triple click to select the whole line. See the short movie on Editing Text for a more detailed explanation of all the options in the text control panel.

Editing the Text Panel

Many of the template designs use Text Panels (and you can add your own of course) which are text boxes with a colored background. Whilst editing the text on your page, you may have noticed that the text ‘Clean and Simple Flyer’ is on a panel. If you have extended the text (I entered ‘Exceptional Service Guaranteed’) you will notice that it has run onto a second line, like mine, but don’t worry - this is a SmartShape Text Panel. Simply click on the outside edge of the panel to see the editing handles. Drag on the blue round handle in the center of the right side to widen the text panel and note that it automatically re-centers itself on the page. The SmartShape Text panel Text panel selected, showing the editing handles Drag the right hand handle to resize the Text panel to be wider

Replacing the header photo

Now, a look at the header image as I need to replace it. You can replace images in four ways: Drag and drop an image file from your File Explorer onto an image, or click the image and select the  ‘Replace’ menu option  where you can either select an alternative photo from your local disc, or pick an image from your cloud drive, or select from the range of over a million completely free stock photos in Online Designer. To add a stock photo click the ‘Replace’ menu option. I searched for ‘House’ as I am preparing a flyer for a Real Estate Agent. With the Editor’s Choice selected the search will be filtered to display the best quality photos. Click on the desired photo and it will appear on the page in the theme color. When you have an image selected you get the edit handles and a context menu. You can see that this is a Smart photo as it has the edit handles on it. I want to move the photo up slightly so I select the ‘hand’ control in the bottom left of the photo and drag to reposition the photo. In addition to the resize and crop handles on the sides, you get a ‘target’ like handle in the top right corner of the image. Dragging on this will resize and rotate the image within its frame. Drag diagonally outwards to resize or rotate - this clips the image, but while dragging you can see the size of the whole image. See our movies about adding photos, using stock photos,  and  resizing and cropping, for more information. Note - When uploading an image from your local computer the image is resized before upload to be HD resolution. This speeds up the upload process. If your photos are stored in Google Drive, Dropbox or OneDrive, you can select to import it from your cloud drive which will only take a second or two even for full resolution images.

Symbols and Icons

There are three social media symbols at the bottom of the page. I will replace the Instagram symbol with a YouTube one, and then increase the spacing between them. When I select one of the symbols I can see that they have been included inline with this column of text so I can use the usual text controls to adjust the alignment and spacing. just click on the space and use the space-bar on my computer, as you would with text.             Replacing the social media symbol with one symbol library of thousands of symbols
Tip: Because these symbols are inline with the text and behave
like text characters you can change their size by selecting
them and then changing the font size. Currently, there is no
font size control in the text property panel but there is a key
shortcut that allows you to increase and decrease the font size 
- use Shift+Alt and the plus or minus key.. Many symbols in the templates are stand alone graphics that are sometimes grouped together and sometimes  just a simple symbol (like the star on the top left of this design) that can be moved, resized and re-colored as required. To replace the symbol, in either case, select it and select the  Replace symbol’ menu - a side panel will open to show all the symbol options. There are thousands of symbols to choose from but you can use the search box to find exactly what you’re looking for. I searched for YouTube and selected one of those on offer.

Adding Links

As these symbols are inline in the text when I select a symbol, the text properties panel slides out and there you can see a link option.  Click on the link icon to see the options for linking the graphic. Linking objects or text

Editing Colors

Xara Online Designer uses an amazingly powerful color scheme system of Theme Colors. Assume that I want to change the theme color on the text to match my company branding. So I select some of the text, then tap the purple color patch in the properties panel on the right, to see a palette of all the colors in this document. The palette of colors available in this document. The selected color is called ‘Theme Color 1’. Select the ‘Change’ menu option to change this color throughout the document. The purple color of the selected text is highlighted, and you can see by the small color patch under it that it has some linked shades.  When you change the parent Theme Color, all linked shades will change also, as will all occurrences of this color throughout your document. If you want to create a completely new color click on the + symbol and you will see the color editor where you can choose your new color, or paste a RGB hex color value (e.g. you company color). See the movies about color editing and ready-made color schemes Tip: It’s generally regarded as good design to limit your color palette in a document, and to re-use colors or shades of the same color.

Re-coloring Photos

The photo in this design is colored based on the Theme Colors used in this document. When you select the photo you get a variety of options in the right-side property panel. Here it shows the controls to set the photo colors, photo enhance (e.g. brightness, contrast etc) and photo transparency. If you select the Photo Colors option you can set both the light and dark tones of your photo (technically to make it a contone or duotone image). You can make these color be based on the Theme Color of your document, or any color you like. Select the Reset option to reset it to full color.

Saving your edits and connecting your cloud

drive for the first time

When you’re satisfied with the design it’s time to save it. The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive. As a new user, you will not yet have linked your cloud drive so you will have the opportunity to do so when saving your first document. Left: A section of the Documents menu Click on Documents in the top left to open the documents menu., then select Save. Now select to Add cloud drive and you will see the options for Google Drive, Dropbox or Microsoft OneDrive. Select your cloud drive of choice. The first time you connect a new cloud drive you will be asked to give access permission to save files to this drive. Once you have connected a cloud drive, you can save the file, choose your folder then give the document a name and click Save. Note: You can even connect multiple accounts  on the same drive, for example, if you have a personal OneDrive account as well as a business account. If you have no cloud drive connected, you can Add a cloud drive, here.

Backups

An additional benefit of your file being saved to your cloud drive is that Dropbox and Google Drive maintain older versions of your files which provides an easy way of viewing and reverting back to earlier versions, so it’s a safe and easy way of maintaining multiple versions of your document files.

Creating your company documents, Part 2

In Part 2 I cover how to share editing of your document, add and respond to comments from team members, manipulate and enhance photos, add and customize SmartShapes, create a PDF to print or distribute, and share a link with your customers.

Find out more about Xara Online Designer

You can find more details and a full list of our current tutorial movies on our Xara Online Designer page. The Xara Online Designer templates include social media headings, presentations, letter designs, CVs, print documents such as flyers, leaflets and brochures and even a simple one page website. At the moment this is just a small selection, but in time it will grow to include a wide range of ready-made documents that you can load, edit and publish. Or maybe you’d like to try the unique offline/online experience offered by Xara, whereby you can edit your documents either online or offline  - download the free trial of Xara Web Designer or Photo & Graphic Designer or Xara Designer Pro X now!

Give us your feedback

We welcome all feedback on Xara Online Designer, any suggestions you have for improvements and what features you’d like to see next.
Copyright © 2017 Xara Group Limited.
Page created with Xara Designer Pro
CREATING YOUR COMPANY DOCUMENTS - PART 1
CREATING YOUR COMPANY DOCUMENTS - PART 1
CREATING YOUR COMPANY DOCUMENTS PART 1