1 Reply Latest reply on Aug 13, 2010 6:35 PM by pixlor

    Diagonal background - help

    DarkSteam

      Wondering how can I create a simple custom diagonal background
      I know I can use the style inside Fireworks but that restricts me on color editing
      I would like to create my own diagonals like in image example below

      40921-black-and-yellow-warning-background.jpg

      thanks for all that help me or at least pointing me in the right direction

        • 1. Re: Diagonal background - help
          pixlor Level 4

          Here's what I tried. Adjust sizes and colors as you like.

           

          First, I made a square image (200x200). I set the canvas to white. I added a large greenish square (300x300), rotated the square 45 degrees, and positioned it to cross at the corners. FW doc:

          square.fw.png

           

          A little thought will show you that this won't tile, but maybe something bigger will. I exported a bitmap of this FW file to use as a base. I made a new FW doc that was twice as big in both directions (400x400). I added four copies of the exported 200-pixel square (well, one add and three duplications) and rotated the upper right and lower left squares by 180 degrees. Use the rotate function under Modify>Transform>Numeric Transform menu to get ti exact. FW doc:

          diagonal.fw.png

           

          This image tiles as a background. So, not too difficult to do.

           

          I think the only restriction is that the initial image needs to have height and width that are even numbers so you can get the colors to split at the corners. If you want a stripe that isn't 45 degrees, you'll have to work out what the angle is for different height to width ratios. (It's Friday evening, I'm not up to trigonometry right now!) Or maybe just eyeball it.