PSD to HTML/CSS

[DreadStarX]

So, I'm having a major issue here. I have a PSD, and I've designed what I want my website to be, but I haven't the slightest idea on where to start.


I've always sliced it up, and exported it as html, but when you have something super intricate, its hard to slice it properly. You end up with 10,000 images.




This to be exact. I have to do some modifications to it. I made a bet with a friend, that I wouldn't pass a certification exam a few years ago, and I won the bet. So, he'd made me this. Rough cost to make, $500 :)


- Thomas


Just wanting pointers, and suggestions. I have the original PSD. If I find this being used, or any variation used by anyone else, I will find you, I will ensure its taken down. :)

 

[Laxer]

Photoshop makes such messy code...

You are better off slicing/cropping the image yourself and writing the html from there...

Last time I remember PS uses all nasty tables which makes editing a PIA.

 

[AceInfinity]

Just write the HTML on your own. Don't slice images up, use CSS.... Honestly, there's nothing fancy about this design, and the tabs will be the most difficult part of it, but it's still relatively easy to create your own tab view on a webpage utilizing javascript. Style it after you've got a very basic rectangular and functional tab "control" working.

 

[DreadStarX]

The problem is, I don't know how to code it. Lmao. I'm far more efficient with designing things than coding. Plus, I don't have an instructor or knowledgable person that I can hit up on the fly when I'm working on things.

I get bored, and work on a project. I'm working on 3 different projects right now, and I've had to put them on hold because of graduation


Project 1: Converting a 2D Game to 3D.
Project 2: An industrial website for EVE Online
Project 3: A Portfolio website

 

[Laxer]

If you can deal with editing the junk PS puts out you can code this! :lolg:

Start with slicing up the images and saving them how they make the most logical sense to you...

Post them here and we can go from there. (assuming you are OK with this)

If not create a new PSD with just colors or something and we can go over it.

 

[DreadStarX]

If you can deal with editing the junk PS puts out you can code this! :lolg:

Start with slicing up the images and saving them how they make the most logical sense to you...

Post them here and we can go from there. (assuming you are OK with this)

If not create a new PSD with just colors or something and we can go over it.

Let me design one thats a bit more simplistic, and then we'll go over it. I'm at work for another 3 hours, and then go back to school. I'll be in all day tomorrow, which is my last day of my internship ( ), and next Friday, I'll be at home and I can focus more on this while I study.

 

[AceInfinity]

I've got about 5 large projects on the go as well with short deadlines, but you just have to prioritize and avoid procrastinating to get things done. :)

Right now, my workload looks like this, without exaggeration:
- 3 websites (2 of which have a later deadline), 1 I just finished, the other 2 are about 60% done, and a 3rd one coming my way because of the first one I did (through recognition via my boss).
- An IOS game (one of my bosses bought me a Mac Mini, so I feel obligated to help him out with this, we'll each get a portion of the profit made from it)
- An app for job/timesheet management
- (Very large project with a fairly unreasonable deadline) -> A scheduled video server and client system with user and admin control, featuring transcoding, multi video format and streaming protocols, advertising feeds, live streaming, video playlist looping, and logo/text embedding
- Any other smaller projects that I have started but am not hard pressed to complete at this point (AutoBlue, etc...)

Seems everybody just wants to use my skillset at this point in time. I've designed logos, labels, business cards (graphic design), set up VPN's and routers at my office, created music and videos for advertising/marketing.

I'm a do-everything kind of guy at this point lol. I'm sure there is more that I'm just forgetting here.

 

[Laxer]

You seem busy Ace.

Did you enjoy your internship Thomas? I start mine up at the end of the month.

 

[AoN]

I normally try to keep my posts short and to-the-point, while offering details should they be desired. I'm afraid this isn't one of those times. So, here's my little 2 cents on the topic, and I hope it helps. ^^

A VERY simple approach to web design is to break-down the website as much as possible. In most template designs, there are five primary sections (four if you are not using a fixed-width): outer wrapper, header, navigation, body, and footer. Here's a "visual" of what I mean, as applied to your provided design:

┌─────────────────────┐
│┌───────────────────┐│
││    NAVIGATION     ││
│└───────────────────┘│
│┌───────────────────┐│
││                   ││
││      HEADER       ││
││                   ││
│└───────────────────┘│
│┌───────────────────┐│
││                   ││
││                   ││
││                   ││
││       BODY        ││
││                   ││
││                   ││
││                   ││
│└───────────────────┘│
│┌───────────────────┐│
││      FOOTER       ││
│└───────────────────┘│
└─────────────────────┘

Anything on the page that would appear ONLY on that page, would be coded into the "body" of the page. Everything else is the actual template that would appear on EVERY page you have on the website. In the old days of coding, it wasn't uncommon to see tables used for templates, I still prefer it, but it is a significantly more flexible option to use division tags. Here is a basic structure for the same example displayed above:

<html>
 <head>
  <title>My Title</title>
 </head>

 <body>
  <div id="wrapper">
   <div id="navbar"></div>
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
  </div>
 </body>
</html>

By applying CSS to this basic structure, you can set-up a website to take numerous designs without ever changing the actual code.

Something else to keep in mind is backwards compatibility. It is true that most users have modern browsers and won't have trouble displaying new or old websites. There are always exceptions. Do you want to make the website display and function completely with these out-dated browsers? If so, do you want identical functionality between new and old browsers, and improved functionality for the newer browsers? The level of code you have to use, and the complexity of it, will vary greatly upon what you wish in terms of the browser functionality for users.

 

[DreadStarX]

You seem busy Ace.

Did you enjoy your internship Thomas? I start mine up at the end of the month.

I love it here, Laxer. The teachers are amazing, my co-workers are awesome. The environment is so "noob" friendly. Not to mention, there are some super hot teachers. :)

I normally try to keep my posts short and to-the-point, while offering details should they be desired. I'm afraid this isn't one of those times. So, here's my little 2 cents on the topic, and I hope it helps. ^^

A VERY simple approach to web design is to break-down the website as much as possible. In most template designs, there are five primary sections (four if you are not using a fixed-width): outer wrapper, header, navigation, body, and footer. Here's a "visual" of what I mean, as applied to your provided design:

┌─────────────────────┐
│┌───────────────────┐│
││    NAVIGATION     ││
│└───────────────────┘│
│┌───────────────────┐│
││                   ││
││      HEADER       ││
││                   ││
│└───────────────────┘│
│┌───────────────────┐│
││                   ││
││                   ││
││                   ││
││       BODY        ││
││                   ││
││                   ││
││                   ││
│└───────────────────┘│
│┌───────────────────┐│
││      FOOTER       ││
│└───────────────────┘│
└─────────────────────┘

Anything on the page that would appear ONLY on that page, would be coded into the "body" of the page. Everything else is the actual template that would appear on EVERY page you have on the website. In the old days of coding, it wasn't uncommon to see tables used for templates, I still prefer it, but it is a significantly more flexible option to use division tags. Here is a basic structure for the same example displayed above:

<html>
 <head>
  <title>My Title</title>
 </head>

 <body>
  <div id="wrapper">
   <div id="navbar"></div>
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
  </div>
 </body>
</html>

By applying CSS to this basic structure, you can set-up a website to take numerous designs without ever changing the actual code.

Something else to keep in mind is backwards compatibility. It is true that most users have modern browsers and won't have trouble displaying new or old websites. There are always exceptions. Do you want to make the website display and function completely with these out-dated browsers? If so, do you want identical functionality between new and old browsers, and improved functionality for the newer browsers? The level of code you have to use, and the complexity of it, will vary greatly upon what you wish in terms of the browser functionality for users.

Thanks! This greatly helped me. I'll look into it further, and see what else I can learn. I'm trying to gather more skills that'll make me a more valuable employee.