If you have ever seen a website that uses diagonal lines for a background image and you we were wondering how to do it this is your tutorial! I have looked at it a few times before in the past and when it didn’t work the first time decided to go with something different ha! Well now I have it figured out. It was never a problem to create the background I wanted. The problem was getting the lines to repeat in a straight line and not all jagged.
First we are going to open up Photoshop and create new file with a width of 10 pixels and a height of 10 pixels. Make sure your background is transparent. Now lets zoom in so we can see what we are doing (ctrl +)I zoom into 3200%.
Okay now that we have that created select your line tool. Select the color that you would like your lines to be. I usually go with black diagonal lines and then fade them out a little bit. Now we are going to draw our line from corner to corner. If you hold down shift while you draw your line it will create a nice straight diagonal line for you. Okay so now we have our line.
Now the secret here is now we have to create two 1 pixel dots in the top left corner and the bottom right. This will give it the start of our new lines.
In this example I placed a white background behind the line so you could better see the 1 pixel dots that I created in the corner.
Okay now we have our diagonal line. Now lets apply the line as a pattern so we can put it into a background. Select edit--> Define Pattern.
Now give your pattern a name and click okay.
Okay so we have our pattern created. Lets open up a new file and create our background. Select File -->New. I created mine as 22 pixels wide and 934 pixels high with a white background.
First lets create a new layer and title it bg. I am going to apply a blue gradient to my layer called bg.
Now that we have a background created we are now going to apply a new layer and call it lines. Fill the lines layer with a white background. Double click your lines layer to get into your layer style properties. Your now going click on the Pattern Overlay option (make sure you check the box). Now select your pattern you just created called lines. Click Okay
Now you should have something that looks like this.
Now lets let that blue background shine through. Lower the opacity on your lines layer to about 22%. We should now have a background that looks like this.
Now lets apply this to our html page and see how it looks. Save your file as newBG.gif. Your html code should look something like this.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> <!--
body {
background-image: url(
http://nicole.cfwebtools.com/bgNew.gif);
}
-->
</style></head> <body> </body> </html>
At this point if you were insert your image into your background you would get something that looked like this.
This is not at all what we want! So lets open that newBG.gif up and fix the image! What happened here is our line does not start at the right top corner of the image. The easiest way to fix this is to just narrow your image up a little bit by cropping the image. As long as your lines start in that top right corner they will flow in the diagonal direction.
That’s it! You now have a nice flowing diagonal background.
You can view a live example
here
