Welcome to TalkGraphics.com
Page 1 of 6 123 ... LastLast
Results 1 to 10 of 55
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Lightbulb 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:

    1. Create a vector design. Colouring at this stage with a rainbow if needed.
    2. Convert it with Create Bitmap Copy. Scaling as required.
    3. Set as pasteboard background.
    4. 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.
    5. Design your Page background.
    6. 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:


    1. Create a vector design. Colouring at this stage with a rainbow if needed.
    2. Convert it with Create Bitmap Copy. Scaling as required.
    3. Set as pasteboard background.
    4. 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.
    1. Only Xara numbered bitmaps, no Named JPEGs, PNGs or WebPs.
    2. Still no scaling though.


    VECTOR BACKDROPS
    In a nutshell:
    1. Create a vector design.
    2. Save as SVG file.
    3. Create a Placeholder > Replace with graphic file: <Step_2_filename>.svg.
    4. 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.
    1. Named SVGs. Small sized and no bloat and can be put off-page or even deleted as they now exist in a linked folder.
    2. Many ways to scale. These are technically friezes. You can create true wallpaper coverings if you have the skill.


    SVG - Backgrounds.xar

    I hope you find the sampler interesting or even inspiring.
    Do tell.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,796

    Default 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.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Better Tiling Backgrounds

    Quote Originally Posted by gwpriester View Post
    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:
    Click image for larger version. 

Name:	Screenshot 2021-07-05 204758.png 
Views:	19 
Size:	24.2 KB 
ID:	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: SVG - Packed Coloured Cube Background.xar

    Click image for larger version. 

Name:	Screenshot 2021-07-05 211833.png 
Views:	19 
Size:	19.0 KB 
ID:	129998

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #4
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,796

    Default 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
    Attached Images Attached Images  
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,756

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,796

    Default 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.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Lightbulb Re: Better Tiling Backgrounds

    Quote Originally Posted by gwpriester View Post
    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: SVG - gwp Backdrop.xar
    Here is its SVG: gwp.svg

    Your bitmap as a backdrop:
    Click image for larger version. 

Name:	Screenshot 2021-07-05 232631.png 
Views:	28 
Size:	44.2 KB 
ID:	130005
    My SVG one:
    Click image for larger version. 

Name:	Screenshot 2021-07-05 232744.png 
Views:	25 
Size:	20.6 KB 
ID:	130006

    Acorn
    Last edited by Acorn; 12 July 2021 at 05:05 PM. Reason: typo
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  8. #8
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,796

    Default Re: Better Tiling Backgrounds

    I'm getting this:
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screenshot 2021-07-05 at 16-52-18 g-logo repeating.png 
Views:	28 
Size:	62.1 KB 
ID:	130007  
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  9. #9
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,796

    Default 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?
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	some files.png 
Views:	31 
Size:	21.0 KB 
ID:	130011  
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Better Tiling Backgrounds

    Quote Originally Posted by gwpriester View Post
    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: SVG - Improved gwp Backdrop.xar

    The SVGs to link are:
    cheese.svg
    gees.svg
    that are 3kB size in total.

    Everything linked and ready to run: gwp.zip

    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •