Scott Lassiter Design

I create all of my mock ups for websites in Photoshop. Basically I lay everything out the way I want, work with my clients to get everything approved and then move on to development. One of the things that I have thought has been very helpful in this process is the ability to create cool backgrounds. I will show you how I created the background for this website and how I applied it.

1. Create a New file in Photoshop that is 20 x 20 pixels wide, RGB.

2. Next, I used the fill tool and fill it with a dark background color.

3.Use the line tool and make a few lines and such. patterns can be tricky, when they repeat you might not get what you expect. You can also create a grid. Make sure the lines are not too contrasting, otherwise the background may look a little busy. This is an easy way to learn how it works with random lines.

4. Once you have finished your pattern, select Edit > Define Pattern

You will be asked to name your pattern.

5. Once you have defined your pattern, all you have to do is apply it to any background. I usually create a back ground for my webpage, however try it with a new file. Create a new file that is 200 x 200 px. For the background layer, make sure to define it as a layer. You can do this by double clicking on it and renaming it. After it is renamed, you need create a layer affect. Do this by selecting Layer > Layer Style > Pattern Overlay.

After selecting Pattern Overlay, you will be prompted to a layer dialog box. Choose the arrow by the pattern and then you will see your pattern in the selectable squares. Select it.

After doing this, your page will have a tile of the pattern you created. This works on any size layer or shape, like a rectangle. Experimenting with patterns is a lot of fun!

As you can see the tiles just repeats itself over an over. There is definitely a science.

Below are 2 few example of cool pattern from Kaliber10000

Tags: Managing files in PhotoShop, patterns, Photoshop, Photoshop CS3, PhotoShop CS4, photoshop layer styles, PhotoShop New Features, photoshop patterns, web design, web page background, working with layers

This entry was posted on Wednesday, November 4th, 2009 at 8:32 pm and is filed under Photoshop, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.