Render Layout Tutorial vol. 2: Header Creation (part 1)

Step 1.

Create a new layer directly above the background, and name it "header background".

Step 2.

Next go back to the "blue shatter" render, press Ctrl + A (to highlight everything) and press Ctrl + C to copy it.

and minimize the image again.

Step 3.

Go back to our layout, highlight the "header background" layer, and press Ctrl + V to paste the entire render onto our canvas.

Step 4.

Press Ctrl + T. While holding shift grab one of the corner nodes (boxes on the corner) and drag your mouse inward towards the center. This will resize the image (make it smaller) while keeping the proportions the same. Get it about the same size as I have here. and press enter on your keyboard.

Step 5.

Press V to get out the move tool, and position the shatter like so.

Step 6.

Next get out the rectangular marquee tool, and make a selection all the way across the canvas such as I have here. (pic)

and press delete on your keyboard to remove this portion of the render and press Ctrl + D to deselect the area. Here's what you should end up with:

Step 7.

Now go to Layer->Add layer mask->Reveal all.

Step 8.

Get out the gradient tool . Set your foreground color to #000000 (black) and apply these settings to the gradient tool.

Step 9.

Press your mouse, and drag the marquee tool all 3/4's of the way through the render, and release. Such as I have here:

This should "fade out" the edge of the render. Next set the Opacity of this layer to 30 percent, and this is how it should look:

Step 10.

Next create a new layer, and name it "header background 2" right above the "header background" layer.

Step 11.

Press Ctrl + V to paste the entire "shatter" onto the canvas again.

Step 12.

Next go to Edit->Transform->Flip horizontally.

Step 13.

Here's what you should end up with:

Step 14.

Just like before, press Ctrl + T, grab a corner node and while holding Shift resize the render image and position it (this time) on near the right of the header and press Return.

I went with a little less busy section of the render - because I don't necessarily want to draw attention to the top right-hand corner of my webpage.

Step 15.

Now make the following selection with the rectangular marquee tool. (pic) and press Delete to get rid of the bottom portion. Press Ctrl + D to de-select the area.

Here's what I got.

Step 16.

Now go to Layer->Add layer mask->Reveal all. just like in step # 24.

Step 17.

Get out the gradient tool make the settings the same that they were in step #25.

Step 18.

Click on the left edge of the render and drag towards the right side of the canvas such as I have here.

Step 19.

Drop the opacity of this layer down to 35 percent and you should end up with something like this:

Step 20.

Create a new layer above both of our "header background 1 & 2" layers and name it "scan lines".

Step 21.

Press Ctrl + N to create a new document that is 1 pixel in width and 2 pixels in height, with a transparent background

Step 22.

Zoom in closely to the new document, set your foreground color to #000000 (black) and fill the top half of the canvas with black, using the pencil tool set to 1 pixel such as I have here.

Step 23.

Next go to Image->Define pattern and name the pattern "scan line".

Step 24.

Now go ahead and minimize this and return to our "layout" document. With the "scan lines" layer highlighted, while using the rectangular marquee tool, make a selection that spans the entire canvas' width such as I have here:

Step 25.

Next get out the paint bucket tool, change the fill type from "foreground color" to "pattern", and select the new "scan lines" pattern that we just made a moment ago.

Step 26.

And fill in the selection near the top. Set the opacity of this layer to around 10% and press Ctrl + D to deselect the area. You should have something similar to this:

Step 27.

Next I'm adding some text to the header. This is pretty self explanatory, but here are the text settings I've used:

The font is called "GunShip" and is available for free download here.

The I used is color is #D8D8D8. I positioned the text near the top right hand side of the header, leaving room for our logo (that we'll make later).

Step 28.

Next double click on the text layer, and apply these blending options:

Step 29.

Here's what you should end up with after that: