Hi All,
I thought this would be quite a simple one, but I’ve googled and searched Sitepoint and couldn’t find anything that gave me what I wanted.
Basically I need to tile some large text diagonally for a website background. I realise this is much more complex than horizontal or vertical text, but I thought it would be possible.
I saw one tutorial (I can’t remember the source now though) that suggested this would only be possible using one large image and no tiling, however load times are particularly important to my client. Does anyone have any hints to guide me along the way?
Hm, what do you consider big? Tiles are always done in the same way: you make sure that all four sides line up properly, that is all. If you want this name to be large, then the file will be the dimension of the name.
To have a diagonal name is not all that complex really, you just have to work with a bunch of layers to achieve your goal.
I see what you mean by this, but wouldn’t that mean that the gap between each line of text would be very large? I’ve attached an example of what I think you mean (Left), and what I mean (Right).
In fact, looking at the example image, the right hand side would be very hard to tile, particularly due to the font size. I just found this tutorial which would work for small text, but given the size I need, I think the space needed for a repeated character is going to be obscene!
The image is not approved yet, so I do not see it.
Oh by the way, you are working on the web now, you should use pixels as dimensions, not points. Dimensions in points is for printing purposes
Yes, the tutorial is pointing out the tweeking, no doubt about that one.
I would start out with the name three times in a row with the space you need between them. Duplicate the layer 2x and move each line of text up or down to have 3 evenly spaced lines of text. Stagger the words by moving the text left and right. Now rotate all layers (link them together) to the angle of your choice—a low angle like 30º being wider in file size than a steep angle like 70º. I used 45º.
Set the marquee tool to a ratio of 1 to 1 (square) and select the text so all words are contained within it without cutting a word off. You can cut words for repeats but it gets very involved if you do. There would be lots of tweaking and trial and error. Can be done though, I have.
Now you just let the square tile repeat itself, you see the result in my mockup. The file size for this one square would be around 10k as a jpg. This is a quick one just to show you, so fine adjustments and clarity would have to be worked over.
