Seamless Tile with text for web background

JP
Posted By
Jonathan_Pears
Jan 30, 2009
Views
1686
Replies
3
Status
Closed
Hey Everyone

Does anyone have any tuts or work flows of making a web background that is all text?

Like this – <http://www.grindwater.com>

I have come across some that tech how to do it with an image, just not letters or text!

Thanks!

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

P
Phosphor
Jan 30, 2009
Hmmm…

I’ve done it before, but it’s a particularly tough nut to crack, for several reasons:

You want the text to be legible, obviously, but more importantly, you want a smooth, regular, text-like flow from every tile into the 4 other tiles that abut them. This means that the tile must be perfectly sized…no cut off letters and no excessive space where you don’t want it.

As it is with every repeating pattern, you can figure out the tile size by measuring horizontally and vertically until you meet up with a repeat. With an organic pattern, such as marble or clouds or grass or water ripples, you can work over the seams with the Clone Tool so that you can’t see them.

But with letterforms, you can’t do that, because even a small bit of fudging will be noticeable.

And it gets even more complicated when you rotate text. And if you want to use any rotational value other than ±45° or ±60°, you start to get into some complicated math and some excessively huge tiles that will repeat seamlessly.

Try this:
• Create a new document, 72 ppi, white BG, 16" square. • Using your Type Tool, drag out a paragraph text box that nearly fills the entire document area. • Set your Character to use a largish font size, maybe 36-40 pt. • Set the justification style in the Paragraph Palette to "Justify all" (the far right box in the row)
• Type a couple-three words using black for the text color. Then highlight one letter and change to a different color. This will make it easier to see repetitions. Select all the text, copy, and paste repeatedly until you fill the entire paragraph box completely.
• Before you commit the text, move your cursor over one of the corner anchors of the paragraph box. See how the cursor turns into a curved, double-headed arrow? This means you can rotate your paragraph text box. Hold the Shift key and drag the box until you see it snap into a constrained 45° angle.
• Hit your Enter key to commit the text.
• Now…look at the image I’ve inserted above. Zoom in tight near the center of your rotated pile of text, as I s’ve done for the screenshot.
• Pull out a horizontal and vertical guideline and place them so they intersect at an easily recognizable point, as I have done with the capital "S" character.
• OK…we know that to create a seamless tile, we look for the size of a box which will define the exact distance between one horizontal and one vertical repeat.
• What you want to do now with your document is to slowly scroll along the horizontal guideline until you see it fall across the same letter at exactly the same place on the character (Now you see why I colored just the one letter differently.)
• Then you need to do the same for the vertical guideline. • The problem with creating a rotated, seamless tile of legible text is in finding the repeat. There are several different factors at play here which will affect how the text fills the paragraph box:

font size

Is the font a monospaced font or not?

Tracking

Kerning

Leading

• You could spend ages tweaking the various character settings in order to find the repeat points while being able to define a tile small enough that it will be practical for use on the web. It’s of no help, really, if your tile has to be 1532px &times 986px in size. That defeats the main reason tiling.

If there’s an easier way to solve these problems, using any font, and for more than just a few words, I’ve never read about it.

It’s a fiddly exercise that will take trial and error until you get it to work.
AS
Ann_Shelbourne
Jan 30, 2009
Brilliant Post!

I have saved it to my Pack Rat’s Nest for future reference!

🙂
P
Phosphor
Feb 3, 2009
Hmmm…I came here to float this from the 2nd page to the first so the O.P. can find it a little easier, and at this time I’m not seeing the image I’ve inserted (it’s hosted on my Comcast space).

And looking at the source code brings up a peeve of mine about these forums, that is: Why does the WebX software pare the tilde character as "%7e"? I’ve run into situations about a year ago where that caused some massive problems…

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections