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 trialbymlzdyxco
516 PointsDo 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
12,692 PointsI 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
5,658 PointsIn 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
11,583 PointsNot that I have seen, there is a course on Lynda that goes through the process of going from photoshop (with some illustrator) to web.
bymlzdyxco
516 PointsDoes it use tables for layout and stuff? Can you post a link to it here please?
Veronica Rivera
32,599 PointsThe 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.