1650x2500px psd to HTML/CSS

HTML & CSS
1

I am back-end Web developer trying to learn front-end best practices and skills. I was wondering what is the best practices to layout on HTML/CSS when a designer sends an .psd/jpg splash of 1650x2500px.
Making some measures it looks that the content ( main info) is inside a 960px width but some images are big as the 100% width of the page (1600px). To me, the header and footer visual elements looks bigger that normal.

What I need to do? just slice from visual elements(logos,buttons,info-graphics) exactly as the size of original .psd?

Have you some tips or opinions?

Thanks so much!

2

Hi,

You can’t use 1600px wide images in the foreground of the page (i.e. in the html) as that will make the page much to wide. You can though apply large images as background images and just let as much of them be revealed as necessary. If you place a background image on a 100% wide element it will not incur a scrollbar and you will see us much of the image as there is space available.

You say the main page width is 960px so that should be your goal before a scrollbar appears.

It can often be tricky where the PSD designer is not web savvy and just because the designer can draw it doesn’t mean that it can be coded or whether it is suitable for the web.

When slicing a psd you need to break things down into components and start from the outside and work inwards and from the top downwards. Create the body backgrounds first and then work on the main centred part of the page.

You can often repeat smaller image slices to create larger images and thus reduce the image file overheads and to make elements fluid and responsive if needed.

There’s an art to slicing correctly and you need to make a lot of decisions along the way about what will work and what won’t work while all the time thinking about the overheads in terms of image size. Use css instead of images where you can (borders, background colours, border-radius, box-shadow etc) to reduce the overheads and the reliance of images. Of course you also have to take into account browser support and decide where you draw the line and allow graceful degradation.

For buttons you can usually get away with a tiny slice and then repeat the slice across the element and finish it off with border-radius. Or indeed you can use linear gradients instead of a slice but linear gradients are a little complicated and only supported in modern browsers.

If you could show us a picture of the psd you have to slice (you can obscure names and details so its unrecognised) then we could offer more specific advice for that task. Don’t get caught into trying to produce something that is not feasible for the web because part of your job is to point these things out :slight_smile:

3

Paul,
I appreciate your time and dedication.
Thanks for sharing your knowledge and advice, has been very helpful.

Regards.

4

Hi,

For the benefit of others following this thread I received a PM with a drawing of Verne’s PSD which shows a centred section (960px approx) of content but with images that stretch to the browser edge in certain sections.

Here is a simple demonstration of the techniques that will need to be utilised to create this effect.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
.wide {
	width:100%;
	overflow:hidden;
	background:blue;
	color:#fff;
}
.wide2 { background:red }
.content {
	width:960px;
	margin:auto;
}
.content2 { color:#000 }
</style>
</head>

<body>
<div class="wide">
		<div class="content">
				<h1>Example Heading</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum congue, tempus lorem eu, placerat odio. Quisque lectus nulla, egestas ac elit sed, commodo iaculis elit. Phasellus sed leo consectetur, mollis lorem sed, porta tortor. Nulla et tortor lacus. Vestibulum cursus, quam ut pulvinar accumsan, nulla lacus gravida elit, non elementum quam neque eu lectus. Curabitur fringilla libero et ultrices viverra. Praesent gravida dui sem, at malesuada massa laoreet nec. Phasellus imperdiet consectetur tincidunt. Fusce sit amet nunc sagittis, ullamcorper felis ut, feugiat felis. Proin aliquam vehicula tellus. Suspendisse rhoncus viverra augue, vitae aliquam mauris interdum in. Mauris tortor urna, gravida non scelerisque eget, facilisis id lacus. Cras sit amet bibendum elit, vel feugiat lectus. Ut dignissim laoreet luctus. </p>
		</div>
</div>
<div class="content content2">
		<h2>Example Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum congue, tempus lorem eu, placerat odio. Quisque lectus nulla, egestas ac elit sed, commodo iaculis elit. Phasellus sed leo consectetur, mollis lorem sed, porta tortor. Nulla et tortor lacus. Vestibulum cursus, quam ut pulvinar accumsan, nulla lacus gravida elit, non elementum quam neque eu lectus. Curabitur fringilla libero et ultrices viverra. Praesent gravida dui sem, at malesuada massa laoreet nec. Phasellus imperdiet consectetur tincidunt. Fusce sit amet nunc sagittis, ullamcorper felis ut, feugiat felis. Proin aliquam vehicula tellus. Suspendisse rhoncus viverra augue, vitae aliquam mauris interdum in. Mauris tortor urna, gravida non scelerisque eget, facilisis id lacus. Cras sit amet bibendum elit, vel feugiat lectus. Ut dignissim laoreet luctus. </p>
</div>
<div class="wide wide2">
		<div class="content">
				<h1>Example Heading</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum congue, tempus lorem eu, placerat odio. Quisque lectus nulla, egestas ac elit sed, commodo iaculis elit. Phasellus sed leo consectetur, mollis lorem sed, porta tortor. Nulla et tortor lacus. Vestibulum cursus, quam ut pulvinar accumsan, nulla lacus gravida elit, non elementum quam neque eu lectus. Curabitur fringilla libero et ultrices viverra. Praesent gravida dui sem, at malesuada massa laoreet nec. Phasellus imperdiet consectetur tincidunt. Fusce sit amet nunc sagittis, ullamcorper felis ut, feugiat felis. Proin aliquam vehicula tellus. Suspendisse rhoncus viverra augue, vitae aliquam mauris interdum in. Mauris tortor urna, gravida non scelerisque eget, facilisis id lacus. Cras sit amet bibendum elit, vel feugiat lectus. Ut dignissim laoreet luctus. </p>
		</div>
</div>
<div class="content content2">
		<h2>Example Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ipsum congue, tempus lorem eu, placerat odio. Quisque lectus nulla, egestas ac elit sed, commodo iaculis elit. Phasellus sed leo consectetur, mollis lorem sed, porta tortor. Nulla et tortor lacus. Vestibulum cursus, quam ut pulvinar accumsan, nulla lacus gravida elit, non elementum quam neque eu lectus. Curabitur fringilla libero et ultrices viverra. Praesent gravida dui sem, at malesuada massa laoreet nec. Phasellus imperdiet consectetur tincidunt. Fusce sit amet nunc sagittis, ullamcorper felis ut, feugiat felis. Proin aliquam vehicula tellus. Suspendisse rhoncus viverra augue, vitae aliquam mauris interdum in. Mauris tortor urna, gravida non scelerisque eget, facilisis id lacus. Cras sit amet bibendum elit, vel feugiat lectus. Ut dignissim laoreet luctus. </p>
</div>
</body>
</html>

I suppose the other question you need to ask your client is about whether the site should be responsive in some way as that will need to be built in from the ground up. In my demo above it would be a simple mater to change the width to max-width instead but of course the demo only contains simple fluid text.


.content {
	max-width:960px;
	margin:auto;
}
5

Paul,
This is a valuable asset and helps everyone to have a better understanding on how to layout using good practices.
Again, thanks so much for your help and time, I will put on practice your advice.

Verne.

6

You just use your original pixel image and set it in background with “background-size: 100% 100%” property of CSS. This will fix the image in background and now go ahead with your container width.