Photoshop Tutorials

In this tutorial you will learn how to create a spatter paint header + navigation, as seen below:

Before we start with this tutorial, go ahead and grab the spatter brushes that we will use later in this tutorial. Install the spatter brushes before you start Photoshop, or else you will need to restart Photoshop in order to be able to use them.Spatter Brush #1
Spatter Brush #2

Step 1:
Create a new document 780×125 and fill with grey (626262). Next go to Add Layer Style > Gradient Overlay, and use these settings:

This will be our simple, subtle gradient background.

Step 2:
Next comes the text. Try to pick a font that isn’t flashy, decorative, elaborate, or anything eye catching. We want to use a simple font to keep with the flow of this banner. The font I used is called trebuchet MS. Place each link you need now. Keep each ‘link’ in their own layers.

Now that the navigational links are in place, next is the name of the site. One of the most simple, yet effective things you can do to text is to split it into two colors.

As you can see, using a dual colored text looks very professional. Generally I use a color that is dominant in the rest of my piece, and then either black or white depending on if the color is dark or light, or if the surrounding area is dark or light.
The ‘.com’ isn’t needed, and is probably better if it wasn’t in there, but I wanted to show another technique to use on text; less important text is smaller than the rest.
Now go to Layer Styles > Drop Shadow and use these settings:

Apply this drop shadow to all your text. To do this quickly, manually do it to one layer of text, then Right Click on the layer and select Copy Layer Style. Now Right Click on each text layer and do Paste Layer Style.Step 3:
Now is the time to whip out the spatter brushes that you should have got earlier. I would try to keep the color consistent between the text and the ‘paint’ that we will be splashing on soon. While you are brushing, don’t use the same brush twice, keep a variety. Also don’t go overboard with the brushes. Especially for this tutorial, you don’t want too much ‘paint’. The last thing to remember is to start heavy on the left side (or where its all empty) and work your way over to the other side decreasing the amount of paint.

It’s not very noticeable in my example, but its definitely not just all the same density of paint throughout. You want to retain a balance by having text on one side, and something else on the other, in this case, paint. The last thing to do to finish this off is to add a simple border. Create a new layer, press CTRL+A to select all. Then to go Edit > Stroke and use these settings:

Final Result: