Creating The Powell Blog's Header


I got an email quick a while ago about how I made my websites header. Its really simple and although it may take a long time to make (mine did) its built up of a couple of elements that can be copied and pasted over and over to get the effect you want. This can, of course, be used for nearly anything.

Step 1) The first step, which isn't that clear from the image below, is to mask off the areas that will be used by the content of your website or blog. I've used a blue box. On any website you want to line this an measure it up as much as possible. Lock the layer you have added the box on. Create a new layer underneath.

Step 2) Most of the shape was made with the pencil tool. To set up a good shape double click the pencil tool in the toolbar and change the options. The less pixels you have for the fidelity the more points that will be made. You want some smoothness but not 100% as you want some edges.

Step 4) I've built up the piece from the bottom up. I've gone for the scratchy look.

Step 5) One part of the design is the splattered look. This again is done with the pencil. To save some time you can copy and paste and transform the shapes. It saves some time rather than drawing each one.

Step 6) Arrange the splatter by again copying and pasting the splatter over the artboard.

Step 7) Create a new layer again and add in the coloured shape. You can use the eraser tool (Shift + E) to get the shape below.

Step 8) You can do this as many times as you want, it doesn't matter. You can keep adding in the colours.

Step 9) One of the features is the circles. This is very simple. Use the circle tool and set the stroke to different sizes.

Step 10) Apply the new circles (copy and paste) around the piece. Change the sizes.

Step 11) This is quite a difficult step and some time should be taken to make sure you get good quality shapes. Use a mixture of the pen and pencil tool to make you shapes. Although its not clear make small shapes and layer them up.

Step 12) Apply these to your work and you are done.

Here is the final header with the blue box turned white and the eraser tool to remove some of the excess.

Any questions or comments please leave one below.