How to get a repeating text effect background on your website

The difficult part is cutting up your image so the repeating text works and you get seamless tiling. What you do first is write out the text, rotate it 45 degrees anti clockwise, and then work out how regularly you want it spaced and try and roughly space out your text the way you want it. Of course at this point if you want a wide gap between your lines just stop right now 🙂

Otherwise, it helps in photoshop to turn on your grid (ctrl + ‘) and create a square on an underlying layer. Basically wherever a letter exits the square you need to make sure on the opposite side of the square the remainder of that letter is entering the square.

For example, for the first diagonal line in the diagram below the ‘w’ in ‘workflow’ exits the square on the top line and is cut off at the first tip of the w, and on the opposite side of the square at the bottom line the ‘w’ enters the square with the tip cut off. Similarly on the left side of the square the ‘f’ tip is cut off, and on the right hand side the ‘f’ tip is the last thing in the square.

It helps to use guides to get things exact. Once you’ve got it you can select your layers of text, press ctrl+e to merge them into a layer, then press ‘w’ to select the magic wand, make sure you are on the underlying square layer, click anywhere in the square to select it, and then select the merged/rasterized text layer and copy the selection onto a new layer. hide the other layers, trim, save, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *