Veerle's blog

Today I will bring you the next step of our tutorial about designing a CSS based template page. This part is about choosing the right color scheme and creating a nice background pattern for our webpage. Here is part 1 for those who missed it and want to catch up.

As you all know, my initial idea was to give you a small tutorial on how to create glassy buttons in an easy way. That’s why it might look a bit odd to you that we will think about color-schemes in the 2nd part of our tutorial. This should actually be our first step, then the creation of the buttons, the background etc.

Choose your color-scheme

Anyhow you might have a head start on today's subject. To choose the right colors for your weblog is a matter of personal choice, it reflects who you are, what you like etc.

Actually explaining to you what you should choose is probably impossible although there are a few tips that I always try to follow:

• use at least 1 contrasting or highlighted color and use that to give accents to your page. Use that color for your text links, this way they will be very visible.
• make sure you use not too many different colors, otherwise you'll end up with an unattractive chaotic layout. I mostly take 3 colors, 2 subtle ones and 1 to highlight.
• from these 2 subtile colors I use darker and lighter variations, I'll stick within the same range of those 2 colors. If you use less then 3 it might end up in a rather boring look, although if you use enough variations you can get interesting results too. This could work if you're looking for minimalism.

Use the Hue/Saturation (control+u for Win / command+u for Mac) to play arround and see variations of your colors. Actually all those examples above are created this way, starting from the first example and using this technique to achieve the other 3. To come up with my first matching colors I used my own post as a guideline. In this post you'll find several color wheels.

RECOMMENDED! If you still haven't a clue which direction you should start looking, then maybe this movie might help you out. Actually this is really worthwhile watching for everyone it's awesomely inspirational. (link seen on Angie McKaig's Assorted Sweets).

Time to draw some patterns

It's pixel drawing time now! Start with a document of 30x30 pixels, RGB, background color of your choice. Draw some pixel dots using the Pencil tool in Photoshop. Here are some examples that might get you started:

Most of the time you'll spend in creating these, is by experimenting in various ways. Personally I don't know of any tricks on how to come up with ideas. What I mostly do is start with a background, choose a color that is very close to the background and start drawing dots. If I create a background with lines, I duplicate that layer, move it a bit up, down, left or right... and start playing with the layer mode, opacity etc.

These enlarged versions are the actual patterns, cropped at the right place to achieve a seamless repetition. The hard part is sometimes figuring out the right place to crop. The way I do it is using the rectangle Selection tool, and draw a square (hold down the shift key to get a square selection) from the top left corner to the bottom right corner of the pattern. To define these 2 corners you have to think about the top left starting point of the pattern and go down in a diagonal way and stop right before the exact same pixel as your starting point. Keep in mind that for patterns where you use lines on 45° (like the blue pattern in my example) or my blogs pattern that you have to watch all corners to get a perfect match.

Once you have your square where you think it should be go to the Image menu and choose Crop. Select your pattern and choose Define Pattern... from the Edit menu and give your pattern a name. Now you need to test your pattern. Create a new document of 300x300 pixels, Select All (control+a for Win / command+a for Mac), choose Fill... from the Edit menu and select Pattern from the dropdown menu and select your pattern from the 2nd dropdown, click OK and check the result.

The next part will be about the actual framework and layout. The focus then will be about how to create an attractive header and title, including title ornaments. Hope you enjoyed this part and if you have any insights on the creation of backgrounds, please do share thanks ;-)

Download the pattern examples in Photoshop format.

Go to the next part of this tutorial.