A lot of the times, when I’m designing a website I’m not sure of what the final product will look like. It’s hard to pre-make images for the design, when I’m unsure of how it’s all coming together. There are two definite images I know I have to make in the beginning though. The site banner and a background pattern if there’s going to be one.

So, in this case I’ll start with the background pattern. I really enjoyed to background used on the pre-made TNG template that I used on the iLeeny Beta Site. Sorry, I just love saying that, it makes me feel all nerdy.

click for full size image

To recreate that background but in different colors. I opened a new image file that was 10 pixels by 10 pixels. Then I used the pencil tool to color in my pattern. However, I want to test this pattern to make sure it looks how I want it to look.

There is a simple way to do this in PhotoShop. I go to the Edit Menu and select Define Pattern. A dialog box will come up to confirm. I select OK.

click for full size image

It would do no good to test on a 10 pixel by 10 pixel image, so I open a new file, without closing the old one. This one is big enough that I can tell if my pattern is to my liking. So I head back to the Edit Menu, except this time I select Fill. Another dialog comes up. I make sure the Contents box says Pattern, and I select the pattern I just made from the other image. Then I hit OK.

click for full size image

This pattern isn’t what I was looking for, so I go back and make a few more changes.

click for full size image

This is closer to what I wanted. This time I used a seven by seven image, and I lightened the blue a bit so it wouldn’t be as bright. Now it’s time to mess with the harder image, the banner. Except that’s going to take a little bit more talking, so I’m going to go ahead and split these posts up.