A fairly simple tutorial to create a stylish yet simple template without the need for slicing.
See a preview of what you will be creating here.
Note: Ignore the bright blue lines in the screenshots, they are just Guides which I use for positioning.
First create a new document in Photoshop. Make thes size 200px wide by 75px tall. Check that it has a white background and is in RGB colour. First drag a guide to ten pixels down the image.
Quick Tip, dragging guides: Turn the rulers on if they aren't already (View->Rulers(Ctrl+R)). Click and drag on the top ruler and drag it down 10 pixels. Use the Info Panel (Windows->Info) to see how far down you are dragging it.
Then make a new layer. Use the rectangular marquee tool to drag out a rectangle like below.
Now fill it with the hex colour #EAEAEA. Deselect the selection (Ctrl+D). Right click the layer and select Blending Options.
Set an Inner Shadow with the following settings:
-Colour: #CACACA
-Opacity: 75%
-Angle: 90
-Distance: 2
-Choke: 0
-Size: 3
Set the Inner Glow with the following settings:
-Blend Mode: Normal
-Opacity: 75%
-Colour: #D9D9D9
-Choke: 0
-Size: 5
Press OK.
Make a circle a 115px wide and 115px tall and place it similar to the following:
Now press delete on your keyboard, you should have something like this.
Make your selection so it is positioned tight to the top of the grey box and tight to the right of the white semicircle.
Get the Rectangular Marquee tool and while holding down Shift make a few more selections until your selection looks like this:
Press Ctrl+Shift+I to invert the selection, then press delete. Then deselect the selection.
Choose the Single Column Marquee tool and make the following selection right on the end of the grey shape:
Now press Ctrl+T on the keyboard to enter Free Transform mode. Now stretch the selection all the way over to the left side of the document so it fills the whole left side. Save your file as a .psd. You should have something like this:
Put your logo on the white bit and save again. Now save the file as a .gif using Save For Web and name it logo.gif.
Now open up logo.gif (not the psd, it must be the .gif otherwise this excercise will be pointless, basically we want to get rid of the shadow and inner glow on the right) in Photoshop. Crop it so that it is only 190 pixels wide. You need to chop off the last 10 pixels on the right like below:
Once you have done that, save for web again and save it as logo.gif.
Now get the Single Column Marquee Tool and make a selection on the far right of the image. Then do Ctrl+C to Copy it. Then make a new document, 75px high and 1px wide. Paste the contents of the clipboard to it. Then Save For Web and save it as header_bg.gif.
Make a new document 1px wide by 1px high and fill it will the colour #F8F8F8. Save it as main_bg.gif.
HTML Time
Paste the following code into a new HTML file. This will only work correctly if all three images have the same names as the ones I have specified above and if you put all the images in a subfolder 'images'.
CODE
<html>
<head>
<title>Stylish Layout</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.main { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.header_big {font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; }
.header_medium {font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; }
.copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="75" background="images/header_bg.gif"><img src="images/logo.gif" width="190" height="75"></td>
<td width="784" background="images/header_bg.gif"> </td>
</tr>
<tr valign="top">
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="700" valign="top" background="images/main_bg.gif"><p class="header_big">Heading One </p>
<p class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut imperdiet interdum libero. Ut
venenatis. Praesent eu wisi. Fusce accumsan, odio non aliquam pharetra, quam nibh pharetra ligula, volutpat porttitor dui
quam non neque. Donec posuere euismod lacus. Phasellus arcu. Donec imperdiet, velit quis condimentum dignissim, orci urna
ullamcorper lacus, id volutpat nulla neque eu ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent a justo at
wisi sodales porta. Praesent elementum varius ipsum. Fusce ultricies tincidunt arcu. Suspendisse potenti. Quisque arcu.
Curabitur mattis. Maecenas at odio. Proin ac massa. Nullam ornare nulla eu mi porttitor interdum. </p>
<p class="main">Suspendisse ut enim at nunc tempus volutpat. Cras molestie libero eget mi. Vivamus ornare varius
ante. Nulla facilisi. Nunc laoreet, eros sit amet malesuada scelerisque, turpis mi varius orci, vel cursus dui nunc ac
libero. Suspendisse scelerisque dictum massa. Vestibulum cursus sagittis purus. Phasellus bibendum. Fusce urna sapien,
venenatis sit amet, congue iaculis, pharetra nec, diam. Pellentesque urna sem, porttitor non, hendrerit sit amet, pretium
ut, tellus. Suspendisse at augue vitae ante pretium commodo. Aenean est ligula, euismod nec, ultricies in, varius vel, dui.
</p>
<p class="header_medium">Heading Two </p>
<p class="main">Etiam ultrices odio vitae ipsum. Aliquam felis. Phasellus feugiat viverra nibh. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas accumsan nunc vitae elit. Sed
imperdiet, metus at euismod pretium, arcu enim lobortis lacus, in commodo justo risus vel velit. Proin commodo fringilla
mauris. In a ante eget augue feugiat consectetuer. Nulla facilisi. Suspendisse id est sit amet urna pharetra faucibus. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet justo a sem iaculis egestas. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p class="main">Ut turpis. Aenean pretium tempor erat. Proin ut est. In laoreet porta orci. Phasellus vulputate
wisi eget velit. Proin malesuada. Nullam non libero. Phasellus rhoncus. Aenean ut diam. Proin placerat erat. Integer
dignissim suscipit orci. Ut non sem id enim scelerisque hendrerit. Quisque mattis viverra ante. Donec feugiat lobortis erat.
Ut nonummy. Cras arcu. Cras pharetra, purus quis lobortis cursus, purus justo vulputate metus, vitae iaculis risus felis sit
amet odio. </p>
<p class="header_medium">Heading Three </p>
<p class="main">Etiam suscipit dui in augue. Suspendisse dignissim lectus sit amet odio. Ut dignissim tempus enim.
In metus. Donec eget lorem. Donec quam pede, varius non, iaculis non, elementum ac, odio. Aliquam ornare. Cras aliquet
dictum pede. Praesent neque quam, eleifend et, consectetuer a, posuere et, libero. In et ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. </p></td>
<td valign="top"> </td>
</tr>
</table>
<div align="center"> <span class="copyright"><br>
Copyright Adrian Trimble 2005 </span></div></td>
</tr>
</table>
</body>
</html>
<head>
<title>Stylish Layout</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.main { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.header_big {font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; }
.header_medium {font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; }
.copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="75" background="images/header_bg.gif"><img src="images/logo.gif" width="190" height="75"></td>
<td width="784" background="images/header_bg.gif"> </td>
</tr>
<tr valign="top">
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="700" valign="top" background="images/main_bg.gif"><p class="header_big">Heading One </p>
<p class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut imperdiet interdum libero. Ut
venenatis. Praesent eu wisi. Fusce accumsan, odio non aliquam pharetra, quam nibh pharetra ligula, volutpat porttitor dui
quam non neque. Donec posuere euismod lacus. Phasellus arcu. Donec imperdiet, velit quis condimentum dignissim, orci urna
ullamcorper lacus, id volutpat nulla neque eu ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent a justo at
wisi sodales porta. Praesent elementum varius ipsum. Fusce ultricies tincidunt arcu. Suspendisse potenti. Quisque arcu.
Curabitur mattis. Maecenas at odio. Proin ac massa. Nullam ornare nulla eu mi porttitor interdum. </p>
<p class="main">Suspendisse ut enim at nunc tempus volutpat. Cras molestie libero eget mi. Vivamus ornare varius
ante. Nulla facilisi. Nunc laoreet, eros sit amet malesuada scelerisque, turpis mi varius orci, vel cursus dui nunc ac
libero. Suspendisse scelerisque dictum massa. Vestibulum cursus sagittis purus. Phasellus bibendum. Fusce urna sapien,
venenatis sit amet, congue iaculis, pharetra nec, diam. Pellentesque urna sem, porttitor non, hendrerit sit amet, pretium
ut, tellus. Suspendisse at augue vitae ante pretium commodo. Aenean est ligula, euismod nec, ultricies in, varius vel, dui.
</p>
<p class="header_medium">Heading Two </p>
<p class="main">Etiam ultrices odio vitae ipsum. Aliquam felis. Phasellus feugiat viverra nibh. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas accumsan nunc vitae elit. Sed
imperdiet, metus at euismod pretium, arcu enim lobortis lacus, in commodo justo risus vel velit. Proin commodo fringilla
mauris. In a ante eget augue feugiat consectetuer. Nulla facilisi. Suspendisse id est sit amet urna pharetra faucibus. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet justo a sem iaculis egestas. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p class="main">Ut turpis. Aenean pretium tempor erat. Proin ut est. In laoreet porta orci. Phasellus vulputate
wisi eget velit. Proin malesuada. Nullam non libero. Phasellus rhoncus. Aenean ut diam. Proin placerat erat. Integer
dignissim suscipit orci. Ut non sem id enim scelerisque hendrerit. Quisque mattis viverra ante. Donec feugiat lobortis erat.
Ut nonummy. Cras arcu. Cras pharetra, purus quis lobortis cursus, purus justo vulputate metus, vitae iaculis risus felis sit
amet odio. </p>
<p class="header_medium">Heading Three </p>
<p class="main">Etiam suscipit dui in augue. Suspendisse dignissim lectus sit amet odio. Ut dignissim tempus enim.
In metus. Donec eget lorem. Donec quam pede, varius non, iaculis non, elementum ac, odio. Aliquam ornare. Cras aliquet
dictum pede. Praesent neque quam, eleifend et, consectetuer a, posuere et, libero. In et ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. </p></td>
<td valign="top"> </td>
</tr>
</table>
<div align="center"> <span class="copyright"><br>
Copyright Adrian Trimble 2005 </span></div></td>
</tr>
</table>
</body>
</html>
Hope you found this tutorial useful. You can find the finished files for download here.
-Adrian
Wow you wrote this pretty quick.
doh!
