The result will be something like this:

PS: for plain lines you can visit stripegenerator.com
You start with the creation of the image that you want to be titled, in my example I created a 400 px by 120 px image.
I want to have to colors of text, so I am going to use a source image.
When you got the image you wanted, simply flatten the image.

1. Choose Layer > Flatten Image, or choose Flatten Image from the Layers palette menu.

Now make a new image, which I refer to as the basis image.

1. Choose File > New.
2. set the width and height to 400 by 240. (double height the source)

Now select the source image window again, and duplicate the layer to your basis image.

align the image to the top.

1. Layer Move tool Move tool to move the entire layer.

 

Optional: make variation

If you want to make a variation, go back to the source.
I choose to vary with two colors.

Go back to the source
undo the flatten image action (ctrl U or command U)
change color of the text.
Flatten image again

My goal was to vary the color variation not directly under the previously made layer in the basic image.

To make sure that I select the absolute middle of the image, I constrained my selection in photoshop to 200 by 120.

1 click selection in tools:

2. Set aspect ratio to half the image width:

3. Make the selection, start with either left or right side :-)

4. Copy image content, ctrl or apple C
5. paste to basic image, and move to go directly under the previous image.
6. repeat with other half of the modified source image.

/option

Rotate the image with 45 degrees:

1. Choose Edit > Transform > Rotate. A box appears that defines the boundaries of the layer (called a bounding box). e.g. 45 degrees.

Result looks like this:

Almost done! Now to put everything next to each other. Some prefer a small tile image, but with text this is a really difficult thing to do. I prefer to make a large image and repeating the image by hand.
This would make our tile not infedily repeatable, and this basically means that a high resolution will make your site’s background look ugly. I choose the highest resolution of Apple’s biggest cinema screen, which is 2650 by 1600.

Now make a new image, which I refer to as the destination image.

1. Choose File > New.
2. set the width and height to 2650 by 1600. (double height the source)

Duplicate the basis image into the destination image.
It will show up in the middle, we will start by making a line of our tile over the desination image. (feels like you are doing your bathroom again)

1. Select all (ctrl or apple-key A)
2. copy (ctrl or command C)
   3. paste (ctrl or command P)
   4. Merge visible layers (WIN: Control + Shft + E, MAC: Command + Shift + E)

Result will look something like this:

duplicate it baby!

Align, move the layer next to the previous layer, make sure you work precisely!

tip: use grids

if you want to make sure, go to preferences, and select “guides, grid and slices”.
Set the grid to percentages. I choose 20%.

Choose View > Show > Grid.

/tip

Continue untill you have a few lines and merge visible layers (WIN: Control + Shift + E, MAC: Command + Shift + E, or menubar “layer -> merge visible”)

select layer, and duplicate it once again!

repeat untill you filled up your screen like this:

Nice! you might notice that the image lacks a few copies.
Go back to the basic image, and duplicate it to the destination image.

fill the holes!

All done! suggestions and results are welcome!

 

Further reading: