Was wondering if someone could give me some advice on the best way of transferring this photoshop design to html. I’m not very good at this to be honest - this is only my second site
I was thinking a static design would be best, although I don’t really think I truely grasp the practical outcomes of a dynamic page. I was going to cut the top banner out (minus the logo to make it clickable), the footer, the left nav and then the content, creating each as a div (with the relevant background). Does that sound about right?
Also, any help with how to ‘place’ the page (ie how it sits in the browser window). At the moment it will look a bit strange with the nav bar just stopping on either side.
That’s kind of a ‘yester year’ consideration, as few screens are that small now. These days the average is well over 1000px, I believe.
I just pulled 960px out of my (you know what). A better approach is to make the page fluid and/or elastic, meaning the width changes depending on browser width. But that won’t suit the design you have at this point. At a quick glance, your page looked about 960 to me, which is a width I like for fixed-width designs.
Perhaps I’m overstating it, but I’m wary when people rely too much on one big image for a site. For me, image components are best created individually, rather than cut from one big image, but I guess in the end there’s little if any difference. But a web page is made of of a lot of separate elements that have to get along together, and thinking of a page initially as one big fixed image seems to me to miss the point of that and to raise expectations that everything will just look right without consideration of how best to structure the content.
Anyway, I feel like I’m rambling. Your content border doesn’t look like it wraps all the way around the content, so that’s not too bad. But I’ve seen people do that with Ps, and it’s totally unworkable, as people can re-size a web page, in which case the text will be cut off or overflow the border image. That’s kind of what I mean by not thinking enough in terms of a web page’s nature.
Other people create an image for a form, and then have clear form element sitting on top of that, which is totally unrealistic, for the same reason as above. In various situations the form elements will not sit right over the background image, making the page look abominable.
Thanks for your help. Yeah, this is only my second design, so I’ve not really considered how it will actually fit in the browser. I’m just happy it looks relatively good - I dont’ have great photoshop or design skills, so anything that looks even half professional is good for me.
I’ll get on it now and see if I can get something made by the end of the day!
Just out of interest, why is it bad design to slice up the page? Surely there is no way of replicating the content border (for example) without cutting it and placing it as the background image for the content div?
To me, Ps mockups are just a way to visualize the page I want to create. After that, my advice is to throw it away and start coding from scratch. I know a lot of people slice up PSD images and paste them into the HTML, but it’s bad design, IMHO.
Start with basics, like deciding if the page will be centered or left aligned. Will you have header spanning the page or just spanning wrapper div? (That would be closest to the image you have now).
Your PSD design looks to me like you are thinking as a print designer than as a web designer. (That’s not intended as a criticism at all, but I do receive designs from graphic designers that have no plan for what will happen “at the edges”, whereas this is always in my mind from the start when I am planning a web interface.)
It looks to me like the design you’ve created is best suited to being contained in a centered wrapper about 960px wide:
#wrapper {
width: 960px;
margin: 0 auto; /* this centers the page */
}
From there, create a header section for the logo, a nav section made of an unordered list and the black background image… etc. etc.
Have a start at that, then post a link to what you’ve done and we can suggest the next steps.
