• Steam recently changed the default privacy settings for all users. This may impact tracking. Ensure your profile has the correct settings by following the guide on our forums.

How do I convert a PSD web layout into a fully fledged HTML/CSS site?

V

Vee

New Member
Hey guys, i didnt want to continue crashing ilyace's thread, so i thought i'd stary my own.

I'm trying to get into webdevelopment. I've seen tons of tutorials where people they teach you how to make a web layout in Photoshop. But they never explain how that eventually becomes a fully fledged website. I understand it has something to do with slicing the images, and saving them one by one, then repeating the background and placing the images. But i have no idea how most of that is done.

I've already created the layout:

layout32.png

PSD Download.


Could anyone help? Would really be appreciated. :(
 
Chathurga

Chathurga

Active Member
I was going to help... but... I don't know how to break this to you gently... you are so, so very bad at design.

If you can't design and you can't code, there's nothing left for you in web dev :/
 
Hardrive

Hardrive

Contributor
I'm going to disagree with you on this one Chat. I think that the design has some good elements, and I think that with a little more work, it could be a decent website. What's so bad about it?

I'm not the best coder, but normally, I would agree to slap something together for you. I just don't have the time right now, with final exams and the end of my school year a month away.
 
Chathurga

Chathurga

Active Member
Are we looking at the same navbar here? And what about the (lack of a) color scheme, I have to say Vee this better than the last one but don't throw something together and ask people to code it. You're not even finished yet.
 
Hardrive

Hardrive

Contributor
Yeah, I guess it does need a little more color. However, I really like the vector graphics of those guys' heads on the right side of the page. With a little more color like that thrown throughout the site, I think it could shape up to look pretty good.
 
V

Vee

New Member
Chathurga said:
Are we looking at the same navbar here? And what about the (lack of a) color scheme, I have to say Vee this better than the last one but don't throw something together and ask people to code it. You're not even finished yet.
Click to expand...

I haven't been putting much effort into the layouts. I just want to see how you'd make it into a site, then i can go back and make it look better because i'm still unsure how i'm supposed to make it, without knowing how its going to be coded.

Thanks for the words HardDrive. So you guys think i should go through and add some more colour? I'll get working on that straight away.

Thanks for the critisism anyway. Do you guys think you can point me in the direction of a tutorial that shows how to develop a PSD into a HTML/CSS code?
 
R

RoBz

sucker
You need to get the design at least nearly complete before you go and begin to have someone code it. Otherwise, as you change the design, obviously you'll need to change the code. There's no simple PSD to HTML converter like...
 
M

McNizzle

GRAWR
Open your picture in Photoshop and select the slice tool (6th one down)

Use the slice tool to make boxes around around all the buttons and the pieces you want to make separate Images.... when your down with that and think that your slice will suffice... go to File > Save for Web and Device and a new widow will come up.

Make sure to change the Preset Image Format below save cancel and done to PNG-24
Then click save and make sure to save as HTML and Images .... click save

Then go to the folder you saved it in and you will see your Slices in a new folder and an HTML document... click on it and it will bring up your browser and your images will be in there as the were in the PSD


I hope this is what you wanted : )
 
Hardrive

Hardrive

Contributor
McNizzle said:
Open your picture in Photoshop and select the slice tool (6th one down)

Use the slice tool to make boxes around around all the buttons and the pieces you want to make separate Images.... when your down with that and think that your slice will suffice... go to File > Save for Web and Device and a new widow will come up.

Make sure to change the Preset Image Format below save cancel and done to PNG-24
Then click save and make sure to save as HTML and Images .... click save

Then go to the folder you saved it in and you will see your Slices in a new folder and an HTML document... click on it and it will bring up your browser and your images will be in there as the were in the PSD


I hope this is what you wanted : )
Click to expand...

Unfortunately, this solution is not perfect. For one, last I checked, it produces the entire page with hard-coded html and tables. Secondly, if you wanted to add content later, you couldn't just edit the html, but you'd have to edit the PSD, which is a pain.
 
M

McNizzle

GRAWR
Hardrive said:
Unfortunately, this solution is not perfect. For one, last I checked, it produces the entire page with hard-coded html and tables. Secondly, if you wanted to add content later, you couldn't just edit the html, but you'd have to edit the PSD, which is a pain.
Click to expand...

Why can't you just change the picture in html?



Attached is a VERY rough concept... I would redo all the table and the slices... since I messed them up a little in a rush...

All of the graphics are saved and are linkable...

Make sure you delete the background on the psd if you actually use this method and make the bg separate... or use the one I made...

Hope this helps yah.
 
V

Vee

New Member
McNizzle said:
Why can't you just change the picture in html?



Attached is a VERY rough concept... I would redo all the table and the slices... since I messed them up a little in a rush...

All of the graphics are saved and are linkable...

Make sure you delete the background on the psd if you actually use this method and make the bg separate... or use the one I made...

Hope this helps yah.
Click to expand...

Dude you fucking rock!

Okay i downloaded the zip file and i can see what its made. Though the html file isnt doesnt have any hyperlinks on the buttons. Should i go through add those myself?


Thanks again, that rocks. I'll be using that for now.
 
M

McNizzle

GRAWR
Vee said:
Dude you fucking rock!

Okay i downloaded the zip file and i can see what its made. Though the html file isnt doesnt have any hyperlinks on the buttons. Should i go through add those myself?


Thanks again, that rocks. I'll be using that for now.
Click to expand...

Yeah... I would go through the tutorial and re slice the image because I did it pretty sloppily.

Yeah just add the links and stuff in the html code :)

Edit---

Maybe I'll just redo it when I get home in like 30min - an hour.
:p
 
Serideth

Serideth

Active Member
Last time I checked photoshop turned it into tables and didn't use any CSS which is less than acceptable by todays standards, in my opinion anyway.
 
V

Vee

New Member
Yeah. This isnt how i'm going to create my site. I'll have to learn how to convert it into HTML and CSS. But this will do for now i guess.
 
Hardrive

Hardrive

Contributor
I personally think that you will be better off learning the skills yourself. You never know, but you might wind up needing them in the future anyway. It's also good for bragging rights ;) I'm skeptical that a program as a good of a job that a talented coder could do. But hey, that's just me.
 
V

Vee

New Member
Hardrive said:
I personally think that you will be better off learning the skills yourself. You never know, but you might wind up needing them in the future anyway. It's also good for bragging rights ;) I'm skeptical that a program as a good of a job that a talented coder could do. But hey, that's just me.
Click to expand...

Yeah. I'm sure it adds alot of unneccesery code and clogs up page. Anyway, i checked to see if i could get it and realised that its pretty much un-crackable and is ridiculously expensive to buy. The free trial works but it leaves watermarks on everysingle 50x50px square of your site. So thats just awful.


Ah well. Guess i'm going to have to learn the hard way!
 
Hardrive

Hardrive

Contributor
Vee said:
Yeah. I'm sure it adds alot of unneccesery code and clogs up page. Anyway, i checked to see if i could get it and realised that its pretty much un-crackable and is ridiculously expensive to buy. The free trial works but it leaves watermarks on everysingle 50x50px square of your site. So thats just awful.


Ah well. Guess i'm going to have to learn the hard way!
Click to expand...

Guess I was right to be skeptical :)

Good luck on your quest. I would advise learning the ropes of HTML first, then introducing a bit of CSS as it goes on. Once you are comfortable with CSS, do not use ANY style commands in HTML, instead, style your whole site with CSS. You'll thank me later.
 
V

Vee

New Member
Hardrive said:
Guess I was right to be skeptical :)

Good luck on your quest. I would advise learning the ropes of HTML first, then introducing a bit of CSS as it goes on. Once you are comfortable with CSS, do not use ANY style commands in HTML, instead, style your whole site with CSS. You'll thank me later.
Click to expand...

Okay, thanks mate!
 
You must log in or register to reply here.
Top