One of my favorite ways to create nice looking header is to use abstract brushing techniques. I am going to try and get you on the right track with an easy to understand tutorial.

Step 1

Go to www.deviantart.com and do a search for Photoshop brushes. You should get lots of nice looking brushes in the results to choose from. Find a brush you like the look of and download it. Once it is downloaded you will need to make it available to Photoshop. Copy the brush from where you saved it and go to where Photoshop is installed on your computer. Once you find your adobe folder go to photoshop-presets-brushes and paste your brush in this folder. On my computer, the path to install the brush to is C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Brushes.

Step 2

Now open up Photoshop and create a new document with a white background, 700px wide and 100 high. Now look over to the top right of the window and there should be a tab that says brushes (if not you can access it by going to ‘window’ and clicking on ‘brushes’). Click on this tab and a window will drop down. There will also be a small arrow next to the text that says brushes. Click on this arrow and then go to ‘load brushes’. Find the brush you placed in the brushes folder and select it.

Step 3

You now have your brush available and we can start brushing. Press ‘D’ on the keyboard to reset the colors to the default (black and white) and create a new layer in the layers palette. Now the select the brush tool and find your brush set. Select a brush you want to use first and move the brush somewhere over the canvas and do a single click of the mouse. Do this a few more times around the canvas until some kind of pattern is forming.

This is what I have so far. Obviously yours could look vastly different but the principles are the same:

Step 4

Create a new layer and begin brushing with a different brush, this time in white. Remember to do single clicks. After 2 or 3 clicks, create a new layer, select a new brush and select black for the color. Keep repeating this process until you have something you think looks interesting.

Step 5

Now its time to add some color. Create a new layer above your brush layers. Then click on ‘create new fill or adjustment layer’ at the bottom of the layers palette. Then select hue/saturation from the menu. tick the colorize box and move the sliders until you find a color you like. You may be able to stop here or if you like you can add a color balance from the ‘create new fill or adjustment layer’ menu. Once again, experiment with the settings until you find something you like.

This is what my image looks like:

Now you know the steps required to make an abstract header. However, you don’t need to stop here. You can create more layers, use a combination of brush sets, add images etc. It may take a little practice and trial and error but you will be able to come up with some nice looking images using these techniques.

One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

• Static
• Relative
• Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.

I’m glad to report that Real Design Network’s traffic has increased significantly recently, partly due to the new tutorials section. I will be posting more tutorials in the near future on a range of topics including web site promotion and CSS. Hopefully, these new tutorials will help others and also draw more people to the site so that they can learn more about web standards and find some top quality web designers.