Photoshop Tutorials - HV-Designs.co.uk

Posted On December 1st, 2008 In PSD Sitebuilds

Portfolio Layout 4: The Code

16 Votes, Rating: 4.19

Loading ...

Hello there, in this tutorial il show you the code behind my portfolio layout #4. You can also download the CSS template for free.

Firstly your going to have to re-create the layout using this tutorial here, or just download the PSD. Once you have it design in photoshop we need to slice it up but 1st lets create our directory structure. Create a new folder on your desktop called “portfolio layout” then inside that folder create two more folders one called “css” and another called “images”.

Now we have our directory structure we can begin to slice it up, we dont need all the elements in the layout, believe it or not we will only be using chunks of the design. To create precise selections select the rectangular marquee tool and change to fixed width.

The first slice we need to make is for our background, if you PSD is the same as mine the lines pattern will be on a seperate layer, we need to merge these togther as one, so merge the lines pattern layer with your background layer. Select the rectangular marquee tool enter the values 8 pixels in width and 800 pixels in height.

Copy and paste the selection to a document of its own. save the file as “bg.png” in the “images folder”. The next slice we need to make is the logo on the side. Enter the values 128 pixels x 800 pixels.

Hide all the layers in the PSD (including background layer) apart from the logo elements, Merge all the logo elements toegther into one layer. Copy and paste to a document of its own with a transparent background save as “logo.png” in the “images folder”. The next slice is going to be the navigation, HIDE all layers apart from the navigation elements, you can hide the text on the navigation also as this wont be needed. Create a selection 666 pixels x 64 pixels on the navigation.

Copy and paste to a document of its own with a transparent background save as “nav.png” in the “images folder”. The next part will be our content box, we only need to make one set of images as the 3 content boxes will re-use the images. For the content boxes we need to make 4 images top, side, bottom and the middle area. Remember to always copy and paste to a new document with a transparent background.

With all your images saved you should have something like this.

Now for the coding, Open a blank text file using notepad then save it as “layout.css” in the “css folder”. Start a new blank HTML file in dreamweaver, also open up your blank CSS file. In your HTML document link your style sheet.

<link rel="stylesheet" type="text/css" href="css/layout.css" />

Under the BODY tag lets map out our divs/class which we will refer to the stylesheet later. Please refer to comment code for notes.

<body>

<!-- MAIN CONTAINER -->
<div id="content">
<!-- MAIN CONTAINER END -->

<!-- BIG LOGO/HEADER ON THE LEFT -->
<div id="logo">
<img src="images/logo.png" boder="0" />
</div>
<!-- BIG LOGO/HEADER ON THE LEFT END -->

<!-- ALL THE CONTENT ON THE RIGHT -->
<div id="rightcontent">
<!-- ALL THE CONTENT ON THE RIGHT END -->

<!-- NAVIGATION -->
<div id="nav">
<ul class="menu">
<li>>>.<a href="#">Web designs</a></li>
<li>>>.<a href="#">virtual cars</a></li>
<li>>>.<a href="#">3D Images </a></li>
<li>>>.<a href="#">2d images </a></li>
<li>>>.<a href="#">wallpapers</a></li>
<li>>>.<a href="#">contact</a></li>
</ul>
</div>
<!-- NAVIGATION END -->

<!-- 1ST CONTENT BOX -->
<div id="textheader"></div>
<div id="texttop">
<div id="textcontent">
<h1>&amp;amp;amp;amp;amp;nbsp;</h1>
</div>
<div class="clear"></div></div>
<div id="textfooter"></div>
<!-- 1ST CONTENT BOX END -->

<div class="clear"></div>

<!-- 2ND CONTENT BOX -->
<div id="textheader"></div>
<div id="texttop">
<div id="textcontent">
<h1>&amp;amp;amp;amp;amp;nbsp;</h1>
</div>
<div class="clear"></div></div>
<div id="textfooter"></div>
<!-- 2ND CONTENT BOX END -->

<div class="clear"></div>

<!-- 3RD CONTENT BOX -->
<div id="textheader"></div>
<div id="texttop">
<div id="textcontent">
<h1>&amp;amp;amp;amp;amp;nbsp;</h1>
</div>
<div class="clear"></div></div>
<div id="textfooter"></div>
<!-- 3RD CONTENT BOX END -->

<div class="clear"></div>

</div>

<div class="clear"></div>

</div>

</body>
</html>

Now that we have our layout mapped out. Lets start with the CSS. Lets set the whole document to have 0 padding and 0 margin this will ensure that the side header/logo will start and finish at the very top of our browser.

*{
	padding:0;
	margin:0;
}

Now lets set the styles for the body of the document.

body{
	background:url(../images/bg.png) repeat-x #000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: white;
}

Were going to want to add some styles for our headers.

h1, h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #ABABAB;
	text-transform: uppercase;
}
h1 {
	font-size: 18px;
	letter-spacing: 0px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #98cd01;
}
h2 {
	font-size: 14px;
	letter-spacing: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	font-weight: normal;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #98cd01;
}

The styles for our logo background and the main container.

#content{
	width:900px;
	padding:0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#logo{
	width:180px;
	background:url(../images/logobg.png) repeat-y;
	position:fixed;
	top:0;
	bottom:0;
	float:left;
	padding:0;
	margin:0;
}

The div for all our content which is on the right (navigation and content boxes.)

#rightcontent{
	padding:0;
	margin:0;
	width:650px;
	float:right;
}

Our navigation styles.

#nav{
	background:url(../images/nav.png) no-repeat;
	padding:28px 0 0 0;
	margin:0;
	width:666px;
	height:36px;
	clear:both;
	text-align:center;
	font-size:10px;
	text-transform:uppercase;
	color:#98cd01;
	font-weight:bold;
}

Our content box styles.

#textheader{
	background:url(../images/textheader.png) no-repeat;
	padding:0;
	margin:0;
	width:666px;
	height:22px;
	clear:both;
}

#texttop{
	background:url(../images/textcontenttop.png) repeat-y top;
	padding:0;
	margin:0;
	width:666px;
	clear:both;
}

#textcontent{
	background:url(../images/textcontent.png) no-repeat bottom;
	padding:0 15px 0 15px;
	margin:0;
	width:636px;
	clear:both;
	min-height:172px;
}

#textfooter{
	background:url(../images/textfooter.png) no-repeat;
	padding:0;
	margin:0;
	width:666px;
	height:30px;
	clear:both;
}

The styling for text within our content box and also our clears.

.menu ul{
	padding:0;
	margin:0;
}

.menu li{
	padding:0 5px;
	margin:0;
	display:inline;
}

.menu li a{
	padding:0;
	margin:0;
	color:white;
	text-decoration:none;
}

.menu li a:hover{
	padding:0;
	margin:0;
	color:#FF066D;
	text-decoration:none;
}

p{
	margin:0;
	z-index:200000;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}

/* Clears */

.clear{
	clear:both;
}

Stay Connected...

Subscribe Via RSS

Subscribe Via Twitter

Subscribe Via E-Mail

35 Responses to “Portfolio Layout 4: The Code”

AraxNisanu Says:

Finally! I can easily follow a tutorial on coding. Thanks again Richard :D
ADMIN Says:

good luck ;)

there will be more soon
mihpro Says:

+1 nice!!!
ksxxx Says:

May I ask why you used this technique instead of the slices option? Great tut btw!
ADMIN Says:

slices option??
Swen Says:

I think he means using the slice tool and then export for web and devices. That’s what I used to do, it works pretty good but it’s hard to get your site expand to the sizes of your textboxes etc.
Elliot Says:

Thank you for taking up my request, much appreciated. I need way more tuts on the css part of the website, and less on the PSD :)
But thanks, this is a great tut 10/10.
ksxxx Says:

Thanx for explainin, Swen. I’m not that good with English. On the subject, I used to use the technique that was so perfectly explained here untill I discover the Slice Tool (thanx hehe). In relation to the expanding, I think it’s just a matter of planning before hand. There are lots of techniques for making expandible text boxes, nav. bar, etc. (or tables and divs - depends how you look at them). Again, I wish I’d have found this tut. a few years back lol I think that this technique, if applied correctly (as explained here) will render flawless results. The Slice Tool is for lazy ppl like me (Click Save and BOOM! I got slices, roll overs, tables, coding lol)
zoolo BOY Says:

Good to see you are helping noobs!

Thanx for a greate site!
jeroen Says:

quite ugly :| in code and design..
michael hernandez Says:

very nice tutorial. I thought I was the only one to slice/ copy/ paste with the rectangular marquee tool… I never use the slice tool… because I don’t use tag I used so it’s more convenient to use the “rectangular marquee tool” if you’re coding in divs and CSS! I only use (tabular databasing) when I make things like calendars… or if i’m lazy and I wanna make a gallery full of rows and columns i’ll use tag… but then again I use and float them all left so I can place the divs side by side.
sandfighter Says:

Hehe, very good one :) Well, the slice tool is a good thing and it’s not only for lazy people :). I am using it all the time, but only for images, cause the code that PS makes is crap (tables instead of DIV’s etc.). If you want something to look exactly like your PSD file you need to bend the space and time to make it work (usually some JavaScript helps a lot), thats why we use HAND-CODED CSS guyz!

I like your tuts, Richard, good job, and keep it up!
yasiru Says:

tromendous tutooo

thnks
Aeonz Says:

I don’t understand the difference between the “textcontenttop” image and the “textcontent” image. What is the purpose of the textcontenttop? Also, what does the “clear” class do?
ADMIN Says:

@AEONZ

haha do you no what, i dont understand why i did that either :( the clear class basically means you dont want any items either side of the div.
xMedia Says:

such a great tuts..
thanks a lot for sharing this stuff..
Houdini Says:

Very nice
zer0 Says:

…i have a question…how will you change the content of the content box whenever you click one of the navigations?and are they spanable?

they are all messed up whenever i type something on the of the content area…x_X

thank you very much..
ADMIN Says:

id double check your code, if the content boxes are messing up.

if you want to create more pages just duplicate the html file, but change the content… or using the some of the styles/code in the tutorial make your own page.
ejazkhan Says:

awesome!! thnx very very much for such nice share! u rock man!!
heoluoi.info Says:

Thank u very much!
Kay Says:

When i save the slices as png the result will end with 0 kb and i can’t open anything, does anyone knows what the problem is?

Kay
Elmo Says:

CSS download is broken
ADMIN Says:

thx for the heads up, link works now ;)
Business Cards Says:

A simple, quick and easy tutorial on coding. This is really nice and helpful, thanks for posting this. Keep up the excellent work!
NoOne Says:

hi
that’s what we call a great and clean job
cssah Says:

amazing,thanks so much

Portfolio Layout 4: The Code

Stay Connected...

35 Responses to “Portfolio Layout 4: The Code”

AraxNisanu Says:

ADMIN Says:

mihpro Says:

ksxxx Says:

ADMIN Says:

Swen Says:

Elliot Says:

ksxxx Says:

zoolo BOY Says:

jeroen Says:

michael hernandez Says:

sandfighter Says:

yasiru Says:

Aeonz Says:

ADMIN Says:

xMedia Says:

Houdini Says:

zer0 Says:

ADMIN Says:

ejazkhan Says:

heoluoi.info Says:

Kay Says:

Elmo Says:

ADMIN Says:

Business Cards Says:

NoOne Says:

cssah Says:

Leave a Reply

Trackbacks

search

write for us

Recent Comments

copyright

usage

friends online