Introduction I’m stoked to have a nice list of requests to work from this week. I’ve had several folks ask about how I created the header background seen in the previous site header, so today we’re going to explore the wonderful world of Pattern Overlays, Gradient Overlays, Noise and a few other nifty little tricks that you may find useful. This tutorial will cover creating the background and red bars of the header. A very special thanks to and Brian from.
Pretty Actions has been creating the industry's BEST Photoshop Actions for over 7 years. You can rely on our Actions to quickly and easily enhance your images. 325 Best Photo Overlays Free Brush Downloads from the Brusheezy community. Photo Overlays Free Brushes licensed under creative commons, open source, and more!
You boys know why. Step 1 Lets open a new document and get rolling. Because I’m working in this limited space I’m going to use a document width of 540px, but if you’re building an actual header, you’ll probably want to make your wider and 350px high will be plenty.
Click on the foreground swatch in your Tools bar and enter the RGB code #372819 in the field at the bottom of the Color Picker to change the color to a nice brown. Now simply hit Command-Delete (PC: Alt-Backspace) which is the keyboard shortcut to fill the stage (or a selection) with the foreground color. Step 2 Create a new layer by clicking the New Layer icon at the bottom of the Layers palette. If your layers palette isn’t visible, open it by choosing WindowLayers from the main menu. Double click on the layers name and rename it Header Background. When you create a new layer, it will automatically be selected as your working layer.
Press the M key to choose the Rectangular Marquee tool and drag a selection across the stage which will be used to create the background area of the header that contains all those pretty swirls. The height of my selection is 185px. (.note: If you choose WindowInfo from the main menu, the Info palette will open up and you can see exactly what size selection you are creating as you go.). Step 4 For this step you’re going to need to download a new Photoshop Pattern file.
I’ve included this file in the download at the end of the lesson or you can. Once you’ve downloaded the pattern, you’ll need to place it in the ApplicationsPhotoshopPresetsPatterns folder on Mac, and the PC path should be quite similar.
Now we are going to load and apply this style to our layer. Either double-click to the right of this layer’s name in the layers palette or Control-Click (PC: Right-Click) on the layer and choose Blending Options to bring up the Layer Styles dialog box.
Choose Pattern Overlay from the Styles list on the right. Click on the pattern swatch to open the Pattern Picker, then click the little circle with the arrow in the upper right hand corner. Now you can see all the options available for the Pattern Picker, choose Load Pattern. Now simply navigate to where you placed the pattern at the beginning of this step and click OK. This will load the pattern into your Pattern Picker (right at the end). Now just choose it and the Pattern Picker will close. Step 10 Next, open the Layer Styles dialog box just like we did in Step 4, choose Pattern Overlay.
Just like we did in our earlier step, we’re going to load a pattern set into the Pattern Picker. This time though, we’re going to use a stock pattern set called Texture Fill 2 which you’ll find in the drop down menu where we loaded our pattern in Step 4. You can either Append (put these patterns at the end of the pattern picker) or you can click OK to replace all the current patterns with the new one. Either is fine.
Find and select the pattern called Sparse Basic Noise by holding your mouse over each pattern until it’s name appears. And use the following settings. Then set a Gradient Overlay using the settings that follow. Step 13 Now lets add a shadow below the bottom Red Bar layer. Click on the Header Background layer and then add a new layer above it by clicking the Add New Layer icon at the bottom of the Layers palette. Rename the layer Red Bar Shadow. Switch to the Gradient tool by pressing the G key and make sure the foreground color is set to black by simply pressing the D key.
In the Gradient tool options that appear across the top of the screen, make sure that Foreground to Transparent is selected as well as Reflected Gradient. On the stage drag a short vertical line from the bottom of the Red Bar downward to create the gradient shadow. Step 17 Ok, now listen very carefully. We are going to create a layer mask on the Header Glow layer by loading the Header Background layer as a selection so follow along. To load the selection, hold down the Command (PC: Ctrl) key and click on the thumbnail for the Header Background layer.
Ok, now make sure that the Header Glow layer is your active layer (it will be highlighted). Then click the Add Layer Mask button at the bottom of the layers palette (it’s the one that looks like a circle inside a rectangle). Your selection will be converted to a layer mask and the layer mask icon will appear on the Header Glow layer.