-
1 Attachment(s)
Better Tiling Backgrounds
The Online Content Catalogue > Backgrounds > Tiling Backgrounds offers 61 squares that can be picked as the Pasteboard background.
... > Gradient backgrounds, why, has all of three choices!
As such these are limited to two-tones (with a couple of tints, if you are lucky).
There is no sizing, other than remove Tiling and Fill browser window, where you can see how grainy the resolution is.
There are a couple of benefits in that the two-tone colours have their own Themed Colour Names: Website Backdrop & Website Backdrop 2 (WB & WB2). Making you wonder what happened to Website Backdrop 1?
These can be matched to your site theme quite easily
You can also adjust its Light & Dark Contones through Pasteboard background Edit Pasteboard colour.
EXTENDING THE XARA EXAMPLES
You can construct your own version:
- Create a vector design. Colouring at this stage with a rainbow if needed.
- Convert it with Create Bitmap Copy. Scaling as required.
- Set as pasteboard background.
- Include two shapes with Named Fills of Website Backdrop & Website Backdrop 2. If the colours are important create another pair but ensure the colours have separate Names for their colours. If not important, I usually add them into a Linear Fill of the Page background to maintain a running theme.
- Design your Page background.
- Save the file as xarabackground_<meaningful_description_here>.xar.
You can now drag this file onto your current design and the Pasteboard and Page backgrounds are replaced.
Press Accept to Match colours or you get duplicated Names colours.
Keep the two-tone colours if already set in your design or adjust the Name Colours, WB & WB2 to the values of the added other Named colours.
That's it. You have jumped from 61 tile patterns to as many as you like.
Do offer up your designs in this Thread; they will be appreciated.
Here are a number of approaches I use.
METHOD 1
Leaving aside the repeating pattern aspect, many will have realised you can roll your own:
- Create a vector design. Colouring at this stage with a rainbow if needed.
- Convert it with Create Bitmap Copy. Scaling as required.
- Set as pasteboard background.
- Adjust Contone.
Tweak a colour, transparency, feathering? Redo all the above steps.
METHOD 2
Gradient backgrounds are simpler to develop.
Unlock the Pasteboard background layer, (lose any Shadow) and simply apply a Linear of Radial Fill.
Throw in a couple of Stops, colours and change alignment.
Do check you have not generated an image in the process; usually by throwing in a transparent colour as one of the Stops.
You can create a range of images and as they are available in the Bitmap gallery, you can cycle through them all (Set pasteboard background).
Provided they are retained in your design. If they are not on the page, you lose them when the XDA is closed.
I cannot recall a setting to retain the Bitmap gallery contents and I would have it off anyhow to avoid bloat.
But hey!, we have bitmaps as backdrops in a vector program.
- Only Xara numbered bitmaps, no Named JPEGs, PNGs or WebPs.
- Still no scaling though.
VECTOR BACKDROPS
In a nutshell:
- Create a vector design.
- Save as SVG file.
- Create a Placeholder > Replace with graphic file: <Step_2_filename>.svg.
- Build up Website HTML Code (head) CSS for separate pages (.xr_bgb0, .xr_bgb1, etc); replace with html (or html, body or just body) for the entire website.
The example file has two pages with similar but slightly different coding to show how to pad (H or V), scale (fixed or browser width (px or vw units)) with a linear gradient thrown in.
- Named SVGs. Small sized and no bloat and can be put off-page or even deleted as they now exist in a linked folder.
- Many ways to scale. These are technically friezes. You can create true wallpaper coverings if you have the skill.
Attachment 129995
I hope you find the sampler interesting or even inspiring.
Do tell.
Acorn
-
Re: Better Tiling Backgrounds
FWIW. I created the tiling background patterns about 6-10 years ago. I am not sure why they had to be two colors.
-
3 Attachment(s)
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
FWIW. I created the tiling background patterns about 6-10 years ago. I am not sure why they had to be two colors.
Gary, AFAICT, Xara uses the two Named Colours and applies them as dark and Light Contones.
So you can get something like this quite easily:
Attachment 129996
Two colour with shades in-between and white as well.
Two colours and lores bitmaps.
I can hear the sniggering.
Here is a concept model for an SVG design: Attachment 129997
Attachment 129998
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
My background image (a little more subtle than yours) is 158 x 158px. What changes to your script do I need to make it repeat seamlessly. And on a white background which is ffffff
-
Re: Better Tiling Backgrounds
Okay Acorn, trying to hang onto your coat tails. Not 100% following you but I'm getting there slowly. An svg example:
LINK
-
Re: Better Tiling Backgrounds
Egg created a guest tutorial a million years ago on how to create a tiling background. Unfortunately my browser will not let me go there because the certificate has expired.
-
4 Attachment(s)
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
My background image (a little more subtle than yours) is 158 x 158px. What changes to your script do I need to make it repeat seamlessly. And on a white background which is ffffff
Gary, I was using primary colours for emphasis not subtlety to show it had 9 colours and was not using contones.
The code changes would be:
<style>
html {
background-color: #ffffff;
background-image:
url(index_htm_files/gwp.svg);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-blend-mode: normal;
background-size: 158px 158px;
}
</style>
where I have guessed your SVG to be named gwp.svg.
Here is a full design built from your bitmap: Attachment 130003
Here is its SVG: Attachment 130004
Your bitmap as a backdrop:
Attachment 130005
My SVG one:
Attachment 130006
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
-
1 Attachment(s)
Re: Better Tiling Backgrounds
I published the background test to a folder on my desktop. When I select the index.htm file after a few seconds it shows this message. What's this all about?
-
4 Attachment(s)
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
I'm getting this:
Pretty, but not anything I built or supplied. A typo somewhere.
Here is a better design as it separates shapes from glyphs: Attachment 130008
The SVGs to link are:
Attachment 130009
Attachment 130010
that are 3kB size in total.
Everything linked and ready to run: Attachment 130012
The new approach keeps the gs as text and there is only one cheese-holed shape to worry about.
Also you can change the background-colour in the CSS to anything and it shines through.
Acorn
-
Re: Better Tiling Backgrounds
Should this thread be in web design?
-
Re: Better Tiling Backgrounds
That update works. Now I have to figure out how to do it with my design.
And why do you need two svg images instead of one?
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Should this thread be in web design?
No, because while Pasteboards are not directly printed in a PDF, you can still Print a web page as a PDF and get the patterns rendering that way. Also the use of Placeholder > Replace with graphic file can be used as a output on a PDF page.
The main point is repeating patterns is a graphic design aspect that can be made on a design page and implemented in a web one so there is a bridge between both camps.
We need better repeating patterns and graphic designers can excel at this and web designers can showcase them.
Acorn
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
That update works. Now I have to figure out how to do it with my design.
And why do you need two svg images instead of one?
Gary, I said by keeping text as text, the image sizes reduce from 13kB to 3kB.
It was also easier to punch holes through to white rather than use blobs that could only be white until you re-export an updated SVG.
The gees.svg file can be text editor-changed in just two places from (g, g) to (g, p) or any other letter pairing, say, (t, g) or ($, £).
At a pinch, the font could be changed.
I makes it easier to blend in other SVG files, like chalk.svg with cheese.svg.
Very versitile.
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Not sure what I am doing wrong.
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Not sure what I am doing wrong.
Neither am I.
I can only guess, without nothing else, that you have set the spacing too large.
I take it you want all the shapes to touch?
You haven't picked up some transparent padding?
You are using px for the width and height of the shape and not some other value or dimension?
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Tile size 158 x 137. So what in your script determines the tile size? And this is a single image.
Might be easier if you see my files.
Also, there is no option for svg in the placeholder (Dear Xara?) and even through the svg file is in the html files folder Xara is also generating a .png version.
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Tile size 158 x 137. So what in your script determines the tile size? And this is a single image.
Gary, try, background-size: 158px 137px;
<style>
html {
background-color: #ffffff;
background-image:
url(index_htm_files/xyz.svg);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-blend-mode: normal;
background-size: 158px 137px;
}
</style>
where xyz is your chosen filename.
Acorn
-
Re: Better Tiling Backgrounds
if you want to paint in/with tiles, use Krita and press [w].
makes a lot of fun.
reinhard
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
rsrsrs
if you want to paint in/with tiles, use Krita and press [w]. makes a lot of fun. reinhard
rs3. it does. Thank you for the suggestion. It have useful mirror tools and the Multitool is useful too. As well as these, there is Vector Tool and the means to export SVG 1.1 to Inkscape.
I need to sit down with its manual and leverage it up into my XDA.
Acorn
-
Re: Better Tiling Backgrounds
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Here's one I'm working on. At present the fill is a bitmap but I'm trying to get it as an svg. Esher.
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
Egg Bramhill
Here's one I'm working on. At present the fill is a bitmap but I'm trying to get it as an svg. Esher.
Egg, when cookie cutting complex shapes, I find Convert Line to Shape is very powerful.
ACORN
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
3 Attachment(s)
Re: Better Tiling Backgrounds
@GaryP, I like how you've taken to these.
Here is my latest:
Acorn
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Happy to be proved wrong but I have developed an approach for handling hexagons and isometric cube faces that renders in integral pixel values.
It is an approximation to root 3 as a fraction: ~97/56.
In my design, a cube face is 97 x 112 px. [The 112 is double 56 and is part of the formula involving sin(30deg) = 0.5, which is used as part of the Rotate and Skew operations]
Three aligned cube faces present as a hexagon, 168 x 194 px.
You can integer scale up with any of these:
- Hexagon 168 x 194 px
- Hexagon 97 x 112 px
- Hexagon 84 x 97 px
Avoid trying to scale down as you get stuck with pixel fractions.
Useful in constructing hexagonal repeat tilings.
Attachment 130065
I have included a technique using Stepped Fills and Transparency as a method to "slice" a shape.
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
I just tried this with 168 x 195 and it works fine.
But nesting the hexagons together creates a pixelated amount.
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
I just tried this with 168 x 195 and it works fine.
But nesting the hexagons together creates a pixelated amount.
Gary, is that the Xara QuickShape Hexagons?
If it is my construction then I have tried with this: Attachment 130071
I did get some very faint lines appearing at some Zoom values across the cut Blue face so I simply added a blue background.
These will be browser and graphic card artefacts that usually only appear at scale so use a small background-size also sorts this.
Acorn
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Gary, take a risk and remove the light green backing. Make it transparent; SVGs can handle transparency.
Then add a background-color of #d3edff.
The current vertical white lines will be blended out.
Are your slicing with a 0px Line Width?
Attachment 130075
Acorn
-
1 Attachment(s)
Re: Better Tiling Backgrounds
Great posts going on here. I've persevered with the Esher type tiling lizards and finally created an svg version. Getting the repeating rectangle sizing was difficult.
My source for this was http://www.seanmichaelragan.com/html...ctor_art.shtml
Here's the final version:
LINK
-
Re: Better Tiling Backgrounds
Quote:
Gary, take a risk and remove the light green backing. Make it transparent; SVGs can handle transparency.
Where does the background color go in the script?
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Where does the background color go in the script?
This is how I've done it for my example:
<style>
html {
background-colour: #c1f9c1;
background-image:url(index_htm_files/box.svg);
background-attachment: fixed;
background-position: center top;
background-repeat: repeat;
background-blend-mode: normal;
background-size: 20px;
}
</style>
e.g. https://initiostar.co.uk/demo/svgBg/ -there is a linear transparent rectangle to the shape.
Gary
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
Where does the background color go in the script?
Gary, think of it as a layer cake, the plate (background-color) comes first.
If you add many SVGs, you separate with commas for each attribute and the first is at the bottom, building up.
Acorn
-
2 Attachment(s)
Re: Better Tiling Backgrounds
-
Re: Better Tiling Backgrounds
Quote:
Originally Posted by
gwpriester
'cos you went proper British English with 'background-colour' - you need to switch back to American English - use background-color.
Cleans up nice when applied!
Acorn
-
Re: Better Tiling Backgrounds