Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

PSD convert to HTML and CSS

Hi All,

I've been converting PSD files using HTML AND CSS responsively.

I am able to create them, however, a lot of the widths,line-height, and font-sizes are completely different. They're all on my opinion. When I then change them to the "correct" size, it is completely out!

I am looking to do some work converting PSD files for experience, so I just want to know, how much exactly do you need to use for pixel "perfect", as the page is responsive I understand the amount of text per page will alter, however should the widths,heights, line-heights all match? Even doing this completely by what the pixels, it still is too big and all over the place!... Is this a common problem i'm doing something wrong?!

Thanks Lee

2 Answers

Austin Whipple
Austin Whipple
29,847 Points
Austin Whipple
Austin Whipple
29,847 Points

Hi Lee,

A lot depends on how the PSD is set up along with the preferences of the designer and the client you're working with.

First, pay close attention to the use of pt vs px in the PSD. They may appear similar in some design programs, but they can be VASTLY different when implemented in CSS. If there's a questionable definition in a PSD, best to send it back to the designer with questions.

Secondly, your preferences may not match up with the designer's intent, so if you're looking to be faithful to the design I find it is best to recreate the PSDs as closely as possible and then raise any issues with the designer now that you have an example. This goes double for how the designs change responsively. It's difficult to design for every possible screen height/width (especially the in-between sizes), so it's helpful to build close to mockups and then review with your designer.

Lastly, the client probably deserves to make the final call on all decisions. Definitely make a case for what you believe is right, but ultimately the client deserves to feel like they're getting what they paid for.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Thank you for your response.

So creating a "Pixel perfect" website from a mock up, isn't really a case of its either right or wrong? Font sizes etc would be done on my opinion of the page?

Im using all responsive units, and can near enough create a page well, however "pixel perfect" everything is different to what i see on photoshop, which you have explained reasons why.

So advice going forward, creating psd, try to stick to the margins/widths /font sizes as much as I can, if they seem wrong, size this all on my opinion?

I believe the only way I'm now going to advance on css is creating webpages from PSD, so I just wanted to clarify exactly how "pixel perfect" it must be.

Thank you for your help.

Austin Whipple
Austin Whipple
29,847 Points

Essentially. Try to stick with what the designer intended whenever possible and consult with them if you see a need to divert drastically from mockups. You can get things perfect on one screen size, but that may not be the best for all.