4 Replies Latest reply on Oct 16, 2014 10:55 PM by Herbert2001

    How do you crop a diagonal pattern in a way that makes it tileable for web?

    lmorales123

      web-back-pattern1.jpg

       

      At the moment I have just given up and made one huge image and kept it at around 800kb for a web background. However, I realize this is not ideal. I can't figure out how to make this pattern tileable. I figure there's some crazy math I have to calculate to figure in the crop size so that the cut off for the images fit perfectly, but I have no idea how to do that. Has anyone run into this situation before and found a solution?

        • 1. Re: How do you crop a diagonal pattern in a way that makes it tileable for web?
          Mylenium Most Valuable Participant

          One would probably use a strip and repeat it in one direction only rather than a tile, but since your angle is so shallow, even that would be pretty large. Simple Pythagoras' theorem/ law of sines, actually, with the angled line being the hypotenuse, which by itself is a multiple of the perpendicular tile height. Now you only need to resolve the formula based on the known angles and one side length (overall width or height of one tilted tile) to calculate the missing side and then half the length is the tile offset. In your case probably would yield something like the strip needing to be 4000 pixels wide or 9000 pixels high or something like that and the other sides something like 500 pixels then. in the end you may not save anything in file size.

           

          Mylenium

          • 2. Re: How do you crop a diagonal pattern in a way that makes it tileable for web?
            Semaphoric Adobe Community Professional

            What I have done for this is drag horizontal and vertical guides that intersect at an identifiable landmark, like a specific corner, then follow them down or over to where they hit the same landmark. Put a second set of guides there, and drag a marquee to snap to them, and define the pattern.

             

            It's very likely you'll get a huge pattern this way, so try some slight rotating and/or skewing to get something more managable.

            • 3. Re: How do you crop a diagonal pattern in a way that makes it tileable for web?
              Level 7

              If it is exactly tileable, then there is a simple way to do it: select a large sample, and use Edit -> Define Pattern, and Photoshop will reduce the pattern to it's minimal tiling size.

              But if the pattern was rotated, then it may not be tileable as-is due to antialiasing and dithering/noise in the pixel values.

              • 4. Re: How do you crop a diagonal pattern in a way that makes it tileable for web?
                Herbert2001 Level 4

                You're doing it wrong! :-)

                 

                Use css to solve this problem. Although there is no css property to rotate a background image, you can apply a neat trick to create the same effect.

                 

                1) save your file as a regular rectangular pattern (17.6kb!) :

                bgrot.jpg

                2) save this in your images folder in your site root.

                3) to create a rotated background for your page, use this:

                 

                body {

                    position: relative;

                background: url('../img/bgrot.jpg') 0 0 repeat;

                }

                 

                body:before {

                    content: "";

                    position: fixed;

                    width: 200%;

                    height: 200%;

                    top: -50%;

                    left: -50%;

                    z-index: -1;

                    background: url('../img/bgrot.jpg') 0 0 repeat;

                    -webkit-transform: rotate(-20deg);

                    -moz-transform: rotate(-20deg);

                    -ms-transform: rotate(-20deg);

                    -o-transform: rotate(-20deg);

                    transform: rotate(-20deg);

                }

                 

                Done! Far easier, and more flexible. To see it work, check out the test I made at http://estructor.altervista.org/rotbg/test.html

                You can inspect the code in your browser.

                 

                 

                PS css transformations are unsupported in IE 8 - the background will still show, though (non-rotated). For IE8 you will might want to use a conditional comment in your html to create a conventional background pattern instead.

                 

                *update* I updated the example with a page wrapper element that uses the same background, but rotates it at a different angle. The trick here is to create a sufficiently large element that covers the entire box. Then you will have to set overflow:hidden; to hide the overflow so it contains the background pattern inside that box. It takes a bit of tinkering to get the working values for height and width, because it is slightly dependent on the actual content.