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

Design

Do any of the tracks show you or help you figure out how to take a PSD file and turn into a website?

Is there anything on treehouse that either directly shows you how to take a PSD and turn it into html/css/js or at least teach you enough so you can easily do it?

5 Answers

Nicklas Wiborg
Nicklas Wiborg
12,692 Points

I would recommend the track web design which starts with the foundations of making a website. When you've completed the track you will know how to interpret an image to code.

Rose Hurst
Rose Hurst
5,658 Points

In the Web Design track there is no specific section of converting a .psd to .html. Doing so would defeat the purpose of building better pages, that are responsive and can be viewed across multiple platforms. There is a section of the track that does focus on slicing in Photoshop. Technically, you could output an .html file with those slices, however in doing so you would have much more work in modifying that layout to meet current standards and expectations of a site. It doesn't separate content from layout, and at least in CS5 is still using tables. Additionally, there are many unnecessary elements of the design added to the code. Eg. if you did a mock of buttons in the design. Those buttons could be designed using CSS instead.

It would be far easier taking only the necessary images, and building your own html/css files, rather than attempting to fix files that were broken to begin with.

Basilio Gonzalez
Basilio Gonzalez
11,583 Points

Not that I have seen, there is a course on Lynda that goes through the process of going from photoshop (with some illustrator) to web.

Does it use tables for layout and stuff? Can you post a link to it here please?

The best thing the PSD is good for these days is for high fidelity mockups. You don't really want to try to convert your psd to html. The Photoshop course teaches you how to slice images like logos and pictures while you should be using html and css for things like text, buttons, etc. The How to Make a Website course will teach you how to mark it up through html and css using the Smells Like Bacon project as an example. That course is not part of the Web Design track anymore but it is still a helpful course for beginners.