[Request] PSD to CSS/HTML

**~~cXm0d~~** · 02-02-2009

I've been doing webdesign and graphic design for a while now, but there is one thing that I've always had moderate difficulty with.

On some sites it's easier, but only when I have a distinct header, background, content box, ect. The portfolio I'm building for a friend of mine however isn't as simple.
This is a link to what I have so far http://i71.photobucket.com/albums/i1...ysitewroll.png

Can anybody help me as to where to start in coding this, so it's as clean as possible?

**Dragonshadow** · 02-02-2009

You want it so when you hover over the button it highlights green? You need separate pics for each button, highlighted and non-highlighted.

**~~cXm0d~~** · 02-02-2009

I know, and I have prepared that. That was merely a example of how I want it to look.
I have all the images separately saved, as well as a few saved with all of them together.
I'm just not too sure where to start into making it a page, that's not just a bunch of tables with images.

**Traz** · 02-03-2009

Dreamweaver is great for when you have everything sliced up.
Search some guides on it and before you know it you're making 'proffesional' looking websites.
Now on to PHP and Perl!

**suicidity** · 02-03-2009

Fail guys are fail!

Think outside the box. This is how I would personally do it because I'm a web-standards kind of guy and I do things thinking minimalistic;

Have 3 backgrounds; Defining your Primary, which would be the brown stuff you got there, then for your menu you have a Blank(Black) and Mouseover(Green).

Define your own menu / bg in CSS something like..

Code:

* {
margin:0px;
padding:0px;
}

html {
background:#000; <--- insert your primary color, just what I do for loading
height:100%;
}

body{
background:#000 url('../images/background.png') no-repeat; <--- background stuffs and primary color
}

.main
{
<-- main container stuffs, maybe a margin:0 px; to center your page -->
}

.menu
{
height:35px;
width:auto;
background:url('../images/blackmenu.png') repeat-y;
}

.menu a
{
color:#fff;
font:16px Georgia;
text-transform:uppercase;
line-height:35px;
margin / padding-right:10px;
margin / padding-left:10px;
}

.menu a:hover{
background:url('../images/greenmenu.png') repeat-x;
}

Then your html would be something along the lines of..

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Portfolio stuff of weird guy</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if lt IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" /> 
    <![endif]--> 
</head>
<body>
    <div id="main">
        <div class="menu">
            <p>
                home
                <a href="#about" title="About">about</a>
                <a href="#gallery" title="Gallery">gallery</a>
                <a href="#portfolio" title="Portfolio">portfolio</a>
                <a href="#contact" title="Contact">contact</a>
            </p>
        </div>
    </div>
</body>
</html>

Off the top of my head, but that's how I would do it; It's nice, simple very clean and web-standards.

EDIT: Also never use dreamweaver or anything; It blows and slicing / table templates are broken. Don't use tables for templates and don't lose yourself in DIVs.
Keep it clean, and I suggest reading up on a site regularly like http://cssglobe.com ; Just good practice and stuff.

**~~cXm0d~~** · 02-05-2009

Thanks suicidity!

However, I spent a few hours of my time, and figured it out. xP But it's good to know I did the right thing.

Dreamweaver is great for when you have everything sliced up.
Search some guides on it and before you know it you're making 'proffesional' looking websites.
Now on to PHP and Perl!

I just needed help with my particular template, I didn't need instruction on how to use dreamweaver, or rather how to "learn how" to use DW.
And PHP and Perl already came pretty easy to me, try to stay on the specific topic of this template.

**suicidity** · 02-05-2009

Yeah, having 8 images; 4 primary and 4 rollovers is silly and only used in what.. 1998? When CSS wasn't exactly available to do those things?

**freakyflow** · 02-06-2009

learn to CSS!

hand write everything!

Use one of these editors 35 Useful Source Code Editors Reviewed | Developer's Toolbox | Smashing Magazine

Follow the proper web standards for the love of baby jesus.
http://www.maxdesign.com.au/presentation/checklist.htm
and
http://www.456bereastreet.com/lab/de...web_standards/

I work with and consult on some pretty large web projects, one look at a designers code is all it takes to see if he's up to spec or a total flake, and if you don't keep current you might as well go back to making animated gifs for your grandmother.

ps. I meant this as advice and not directed at you , I didn't even see your image.

**suicidity** · 02-10-2009

The best editor you'll probably get for Windows is Notepad++; Loved it since I first got it.

It works great and proves worthy.

**~~cXm0d~~** · 02-10-2009

ps. I meant this as advice and not directed at you , I didn't even see your image.

Then don't comment. Not to be an ass, but I said specifically that I needed help with that particular PSD, not Webdesign as a hole. The problem was solved, thanks.

**freakyflow** · 02-10-2009

Then don't comment. Not to be an ass, but I said specifically that I needed help with that particular PSD, not Webdesign as a hole. The problem was solved, thanks.

Not to be an ass=you are an ass.

The best editor you'll probably get for Windows is Notepad++;

Ya notepad++ is really great, I also use crimson editor for years now I just love it ( very basic and free old school) and webuilder 2008 for more advanced stuff.

Shout-Out

User Tag List

Thread: [Request] PSD to CSS/HTML

Thread Tools

Search Thread