Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Personal Blog Header

Personal Blog Header


1. Open Photoshop and create a new image, 800x60 with background of #131422

2. Create a new layer and fill the top half of the canvas with #FFFFFF. Set the opacity to 20%.

image 1

3. Create a new layer and place it below the white bar layer.

image 2

4. Fill this layer with a pattern. I am using this pattern.

image 3

To create a new pattern of your own create a new image with a transparent background. Create your pattern then go to Edit » Define Pattern. Give it a name and press OK.

5. Select the rectangular marquee tool and make a selection from left to right taking about 75% of the width, 100% of the height. Then go to Select » Feather and set to 50px then press OK. With Layer 2 selected in the layers panel press Delete 3 times.

6. Ctrl + Click Layer 2 and fill with #FFFFFF by pressing D then X then Alt + Backspace.

7. Now set the opacity of Layer 2 to 20%.

8. Insert a shape or logo on to the right hand side of the canvas above Layer 2. I am using some custom rings that I made and set the opacity to 20%.

image 4

9. Add your text to the left and save.

image 5
Click to enlarge

10. To make the header work with width set to 100%. Slice the image in to 4 parts. You have the 1st section of the text followed by a small 1/2px slice, then a large area with stopping where our custom pattern starts then the 4th is the shape. To make the page load quicker you can remove the custom pattern and make slice #3 larger and #4 smaller.

Personal Blog Header
Click to enlarge

11. Then create a table with 2 columns 1 row. In the first column set the background to the 2nd image and insert the 1st image in column 1. Do the same with column 2 but use the 4th image in the 2nd column. Slice 3 can be deleted as it's not used.



Author's URL: Skeletorscorpse
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Personal Blog Header"

Captcha