1. Begin with a new file, 400x125 pixels in size, having 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. Now it 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 you're done with the design part. Now take the Slice Tool and slice your header like the image below.
Once you have sliced the header, go to File>Save for Web. Click Save. Then under File format, 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="/img_articles/4433/images/index_01.gif" width="380" height="125" alt=""></td> <td> <img src="/img_articles/4433/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="/img_articles/4433/images/index_01.gif" width="380" height="125" alt=""></td> <td width="100%"> <img src="/img_articles/4433/images/index_02.gif" width="100%" height="125" alt=""></td> |
And that's it - you're done!
And here can you look at the final result
Reply