- This topic is empty.
June 20, 2012 at 3:13 am #38584
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.June 20, 2012 at 5:54 am #104648
Why not look at Chris’ screencasts on converting a Photoshop mock-up:June 20, 2012 at 7:30 am #104650
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.June 20, 2012 at 7:48 am #104652SenffParticipant
“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.June 20, 2012 at 7:49 am #104653
@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.June 20, 2012 at 7:51 am #104654June 20, 2012 at 7:54 am #104655SenffParticipant
@tobeeornot That’s what this forum is for, so just post your question in a new thread. :)June 20, 2012 at 7:55 am #104656
@Senff – I did. It is here :)
https://css-tricks.com/forums/discussion/18179/css-lining-up-icons-issue#Item_1June 20, 2012 at 8:07 am #104657Paulie_DMember
This one’s not bad either: http://net.tutsplus.com/sessions/photoshop-to-html/June 21, 2012 at 9:22 am #104702
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. ThanksJune 25, 2012 at 4:45 pm #104855smedz28Participant
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
- The forum ‘CSS’ is closed to new topics and replies.