New to design Need help

I made a layout(template in photoshop) But im struggling getting the layout to work for all monitor sizes, I really need help. Please offer suggestions or anything I could do. I really need to finish this site up.

 

What you make in Photoshop is NOT a template, it's a goofy picture that has little if anything to do with web design which is why you are struggling to make a real website out of it. ANYONE telling you that Photoshop or any other paint program/wysiwyg is a web design tool doesn't know enough on the subject to be flapping their gums. Sadly, that's over half the industry right now.

What's your content? Did you take the content or reasonable facsimile of the content and organize it in a logical document structure BEFORE you even thought about HTML? Did you then mark it up semantically saying what things ARE and NOT what you are going to look like BEFORE you even THOUGHT about layout? Did you build your layoutS (yes, plural) using CSS to bend that markup to your will using elastic, semi-fluid and responsive design?

Done "properly" you shouldn't even have a paint program like Photoshop involved until AFTER all that is done... and thanks to CSS3 you might not even need it then. Content or placeholder of possible future content, organized logically as if HTML didn't even exist, marked up semantically, then enhanced with CSS to make your visual layoutS. It's called progressive enhancement and it's how you build an accessible website that has graceful degradation!

This whole nonsense of dicking around drawing goofy pictures and calling it web design is such absolute back-assward rubbish, it's no wonder you're having problems. Whoever told you that's how it is done needs a good swift kick in the crotch. It is entirely likely that your picture is filled with design elements and concepts that have ZERO business on a website since websites are NOT a fixed size, and content elements need to auto-adjust to fit and unless you are willing to sit there drawing hundreds of different pictures at different sizes it's unlikely you'll be able to even come CLOSE to pulling that off!

Now, that said, if we could see what it is you started with, what it is you are trying to do, and what you've done so far in terms of code MAYBE we could actually help you get back on track. Without that we're left guessing wildly.

 

As a web designer myself, I partially agree with deathshadow.

@MimicTheTruth, what you designed in Photoshop is just a "preview" picture of the final product, has very, very little to do with the coding part (it just offers you a visual representation of what the website should look like in the end) and should be done only when you have a clearly structured idea and some good html/css skills. The 'template' that you did in photoshop is nothing more than a picture with fixed sizes - just like any other picture.

+1 to that.

 

Thanks for everyones "Help" I appreciate all who have offered there opinion. I will use google to further my endeavors, thanks again.

 

Don't be arrogant . With the amount of details you provided pretty much nobody can help.

 

Basically, what you should take away from this thread is "don't rely on a layout made in photoshop for what the website should look like" - as others have stated, it's a nice guideline for showing different bits of the page, but you'll never be able to get a distinctive photoshop-design to look the same across all screen-sizes and all browsers - that is thinking that is at least 10 years old, if not more. Today, you concentrate on certain key aspects - colors, identity, a logo - those things can be used across different designs and looks and content-alignment to show that the user is actually using your page - create the brand, not the look.
You take a look at "semantic html" and then a second look at "@media-queries in CSS" and go from there. You don't really need anything else, except an understanding that Photoshop is mostly useless in all things web-related.

 

If you are good in Photoshop then you need to learn something about grid-system go to 960.gs and download the PSD of their grid that they have already created. Hope its help you a lot after learning the grid-system you get a lot of ideas to create the layout for all sizes. And bootstrap is one of the best CSS framework for creating responsive websites. You can learn bootstrap from their own site

 

You know what I'm always saying about people who don't know enough about what a website is and probably have no business building them?

Yeah, that... Laundry list of how NOT to build a website and chock full of ignorant halfwit mouth-breathing nonsense. If you actually believe that ANY of that crap serves a legitimate purpose, you don't know enough about HTML, CSS, accessibility or design to be flapping your gums on the topic.

Grids, PSD's, frameworks like bootcrap -- you might as well take a dump in a bucket and call it a website! Seriously, WHAT THE HELL IS IN THE KOOL-AID!?!

 

convert your psd into responsive html page. you can achieve this by using bootstrap framework. if you need technical help you can ping me. we provide professional psd to html conversion service. Skype - nshntsngh