Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

PSD to HTML help!

Hello, I am interviewing for a front-end developer position at an agency that uses PSD mockups. Part of the job would include creating wireframes and converting PSD to HTML. However, I don't really have the skills to convert design from PSD to HTML because I usually just go from wireframe to code. Does anyone know of any tutorials that I could use to get up to speed on this?

P.S. I am aware that a lot of people think this technique is outdated and wrong. I agree, but this is the job description. Also, I have very basic Photoshop knowledge such as creating layers and navigating the program. Any assistance would help! Guil Hernandez would probably be my ideal person to answer this for me, since he taught me everything I know about CSS.

Courtney Mohr
Courtney Mohr
1,096 Points

Hi there Josh, I've worked in both environments and have found that with psds to html, my personal method involves Creative Cloud's Generate Image Assets. Back in the day, we'd have to slice things up and this just saves you so many steps in gathering your images, icons, etc.

http://helpx.adobe.com/photoshop/using/generate-assets-layers.html

You can also control the file format, sizes and some other cool stuff. It hasn't quite perfected outputting images within layer masks yet, so bare in mind, it's not 100% perfect.

1 Answer