|
Site Header for liquid layouts |
|
Tuesday, 15 August 2006 |
|
Site Header This tutorial with guide you through how to this header that is designed to be used for a liquid layout: 
View Live Examples Here
| 1. | Open Photoshop and create a new image. I am using 500px x 150px. |
| 2. | Fill the background with the colour of your choice. |
| 3. | Create a bar around 20-30px high covering the whole width. Fill this with a colour that contrasts the background you chose on a new layer. |
| 4. | With the selection still active create a new layer, then go to Select » Modify » Contract and set to 1px. Fill this with any colour of your choice. You should have something like this: 
|
| 5. | Create a new selection 1/2 the height of the contracted selection, fill this with white on a new layer and set the opacity to 20%. 
|
| 6. | Add the text on for your site like this: 
|
| 7. | Create a new selection with a 45 degree angle on the side. Fill this with a gradient from grey to white. 
|
| 8. | You can now touch this up with more details, here some more that I made. 
The image can then be sliced to be used in a liquid layout. Here are some examples of the outcome of slicing. View Examples Here |
|
