Expanding Header
Tutorial Description:
In this tutorial you will learn how to create a 100% expandable header.
1. Begin with a new file, 400×125 and with a transparent background. Now take the Gradient Tool and make a gradient like the image below shows.
2. Now draw the gradient from top to bottom.
3. Create a new layer, then take Polygonal Lasso Tool and make a shape similar to the one below, fill the shape with #FFFFFF.
4. Now right click on layer 2 and choose Blending Options and then apply these settings.
Click OK and now should it look something like this.
5. Create a new layer, then take the Rectangular Marquee Tool and make a shape similar to the one below, fill the shape with #FFFFFF. Then repeat step 4.
Then add some text to the header and your done with the design part. Now take the Slice Tool and slice your header like the image below.
Now when you have sliced the header go to File>Save for Web, click Save, and under Filformat choose HTML and Images. Then open your .html file the code should look something like this.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="400" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.gif"" width="380" height="125" alt=""></td>
<td>
<img src="images/index_02.gif"" width="20" height="125" alt=""></td>
</tr>
</table>
</body>
</html> And this is the code to make it expand.
<table width="100%" height="125" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.gif"" width="380" height="125" alt=""></td>
<td width="100%">
<img src="images/index_02.gif"" width="100%" height="125" alt=""></td> And that’s it your done! And here can you look at the final result!