Using Xara Colour Schemes and Palette from Photo

[Acorn]

With all my Xara products, I have over 21,000 XAR files that have the special phrase "themecolorscheme" in the filename.
Xara uses these with the Website Templates so that you can double-click a colour scheme in the Local Design gallery or in the On-line Content Catalogue and the Theme colours are changed to one stored in this special XAR file.
Back in the days, Xara designers would have hand-crafted these themes then Xara introduced the Palette from Photo and three Theme Colours, the first two T1 & T2 come with four additional shade. T3 is on it own. You also get Text, Contrasting Text and Page & Pasteboard Backdrops: 16 colours in all.

I have modified a default colour scheme file and thrown in a couple of extras:

• Four colours for a NavBar: Menu, MenuHover, MenuVisited & MenuBar.
  
  • I link these into my Website Link Colours.
  • The word NavBar is a presentation of the working Link.
  
  
• A thumbnail of the image used to derive the Palette.
  
  • It is a Bitmap Fill of the main image before I optimise it and delete the original from the Bitmap gallery.
  • I actually use the On-line Content Catalogue thumb.
  • The Pixabay image has its ID in the thumb so I search on Pixabay directly for the same image and add this Link to the link of the thumb in the design file so I have a solid reference.
  • I set the Image Filename to the search term I used.

I save the colour scheme file as Search_Term_themecolorscheme.xar.

Here is my Cherry_themecolorscheme.xar
You can open this to see its structure.

This is where the fun begins:

• You do not directly typically open Search_Term_themecolorscheme.xar
• You drag it onto your design page and your current theme colours are replaced.

DO NOT DO THIS IF YOU CANNOT REVERT TO YOUR HARD EARNED THEME COLOURS - USE CTRL+Z.

My main use is I gain a clutch of images from the client or prepare a set from Pixabay based on the brief.
I build the website or document portfolio.
I present the design and can drop fresh schemes directly allowing the client to pick a scheme or we modify one to best suit.

To create your own.
Open a fresh image onto the Cherry_themecolorscheme.xar design page and with the Photo Tool pick the Palette from Photo icon.
Note all the colour on the page, bar the Menu ones are updated.
Separately tweak the Menu colours.
Save the file to its new name after your add in the source detail I described.

Build your own collection.

Acorn

P.S. If you use this URL (https://cdn.pixabay.com/photo/2018/0...65_960_720.jpg) onto the pop-up of the Choose File button in https://www.xara.com/tools/color-palette-generator/, Xara almost provides the same colours.
I think this shows Xara Cloud has a lot of catching up to do.

[Egg Bramhill]

Cheers for that Acorn. Interesting work routine. Just to let you know your work is appreciated here's one I created.

[Egg Bramhill]

This also works very well for importing 'Colour-Scheme-Default' palettes from Xara's website online catolgues.

[Acorn]

Egg, thanks for having a go.
It works a treat.

Two small matters.
1. You linked to the Pixabay Thumb - use https://pixabay.com/photos/water-swi...-pool-1018808/
2. Your design still had the original image - if you delete it 1m131kB becomes 29kB.

water_themecolorscheme-Acorned.xar

Acorn

[Boy]

Interesting, Acorn. Thanks for sharing. I can see its use as you sketched and it works perfectly. I can see why the navbar colors have to be set manually.

Question: I can't figure out the workings of the squares at the bottom of your file, except for the one with the 'W' in it, so please elucidate.

[Acorn]

A refinement that I use and works for those with Xara Pro+ and XDPX.

When you search with the On-line Content Catalogue > Stock Photos > Search: cherries, a large number of Thumbnails are shown, all with a filename endin_150.

Now I use Everything so I can locate recent entries with C:\Users\xpa\AppData\Local\Microsoft\Windows\INetC ache\IE\*_150* search term.
I simply select all I want and drag into my Portfolio_themecolorscheme.xar file in a hidden Portfolio layer. This is the same format as Cherry_themecolorscheme.xar with the extra layer.
I then switch to the Bitmap gallery and curate the images.

All you need then do is drag one onto the image on the second page of the file and pick Palette from Photo.
I have used Customise key shortcuts to assign Shift+P to 'Palette from Photo'.

I have 200 images in my portfolio, giving a modest filesize of 1MB.

Yes, you could add images directly into your design file and Shift+P each until you are happy.
This works but bypasses the scheme structure that can become a tangible deliverable for a client.

For those without the 'Palette from Photo' feature, you still have full control over all the Theme colours through the Colour Editor so you can handroll your own.
The drop onto a design page is separate from the 'Palette from Photo' and all 20 of your crafted colours will be applied.
You should consider this colour scheme from the start across all your designs.

All we now need is Xara to design a Master Page mechanism that is as simple...

Acorn

[Acorn]

Interesting, Acorn. Thanks for sharing. I can see its use as you sketched and it works perfectly. I can see why the navbar colors have to be set manually.
Question: I can't figure out the workings of the squares at the bottom of your file, except for the one with the 'W' in it, so please elucidate.

Boy

• WB - Web Backdrop
• PB - Page Background
• T - Contrasting Text (colour behind is Text)
• H - Text (colour behind is Text Highlight)
• CT - Text (colour behind is Contrasting Text)
• W - unthemed White (colour behind is Theme Colour 1 (T1))

They are to check for sufficient contrast against Accessibility criteria.
Use as a tool to dissuade a client from going too naff.

The box with the three-point linear Fill allows you to spot-pick a a contrrained colour palette form T1.
Clearly you could set this up for all of T1, T2 &T3.

An alternative might be to use a 14-step Blend from T1/T2 Lighter to T1/T2 Darker.

I could have linked Shades or Tints of T1/T2/T3 to the NavBar colour but I found you were juggling too many objects at once.
The safer solution, I felt, was to make the NavBar radical against the rest of the website so it could not be overlooked.
Also NavBars are more for web and I wanted TGers to appreciate how such schemes applied to documents just as much.

Acorn

[Boy]

They are to check for sufficient contrast against Accessibility criteria.

.......

I could have linked Shades or Tints of T1/T2/T3 to the NavBar colour but I found you were juggling too many objects at once.
The safer solution, I felt, was to make the NavBar radical against the rest of the website so it could not be overlooked.
Also NavBars are more for web and I wanted TGers to appreciate how such schemes applied to documents just as much.

Thanks for the clarifications!