A beginner needs advice, please help?

[alextash]

Hi guys, please help me. Here’s my problem:
I’m beginner, but I’ve read many books and articles, tips, tricks…… about html and css (I know the theory quite well). However, when it comes to converting PSD mockup into HTML AND CSS, I dont know what to do and where to start. Can you please give a some advice to overcome this problem, what should I do with that? Or may be from you personal experience? Thanks.

[tobeeornot]

Why not look at Chris’ screencasts on converting a Photoshop mock-up:

https://css-tricks.com/video-screencasts-2/

[alextash]

fordinary: why do you think that converting is old fashioned?
tobeeornot: yes I did watch two of his tutorials, but still it not enough for me, bacause each web site has different design and require different techniques.

[Senff]

“Converting” is more like the process of having it automated (by Photoshop, for example), but this usually requires a lot of cleaning up and fixing, cause the output is usually very generic. That’s why I think @fordinary mentioned it was old fashioned.

To do it yourself is not something we can explain to you right away. Like you said, each design is different and requires different techniques, but it’s something you’ll have to get skilled at.

Myself, I just print the PSD on paper and then I start with a blank HTML file. I create some basic blocks on the page (header, main block, sidebar, footer, whatever other major areas a site has) and start styling them. Then I fill in details.

Sure that sounds super generic but that’s really what it is….and Chris’ screencast explains it a thousand times better.

If you have issues with anything specific, feel free to ask for help. But to be honest, a question like “how do you make a web site from a design” is a little bit too generic, if you know what I mean.

[tobeeornot]

@alextash – Without seeing your photoshop comp it is hard to tell. But essentially you need to line up your comp next to your text editor and code by going down the page for your markup. Do that first before tackling the css.

[tobeeornot]

@Senff -It would be great if you could help me with a css issue?

[Senff]

@tobeeornot That’s what this forum is for, so just post your question in a new thread. :)

[tobeeornot]

@Senff – I did. It is here :)
https://css-tricks.com/forums/discussion/18179/css-lining-up-icons-issue#Item_1

[Paulie_D]

This one’s not bad either: http://net.tutsplus.com/sessions/photoshop-to-html/

[alextash]

Thank you very much guys. I really appreciate your help. Senff, I really like your advice: ” I create some basic blocks on the page (header, main block, sidebar, footer, whatever other major areas a site has) and start styling them. Then I fill in details.” This makes sense too me. Styling first main blocks and then their details is helping me very much. Thanks

[smedz28]

I think what you mean is to apply the styles and images to the html via your css files, such as background images header logos etc. Is that correct? of course you need to layout all your html in the correct way, but it’s the .css file that will apply all the styles and images. Do a general search on psd to html tutorials and you should find some useful tuts easily. I myself am in a similar position and although tutorials are good to help understand the concepts, applying them to your own designs is a little trickier

[Author]

Posts