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
Josh Hicks
14,146 PointsPSD 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.
1 Answer
James Barnett
39,199 PointsSlicing Tutorials
- http://zoerooney.com/blog/tutorials/slicing-psds-decision-points-techniques/
- http://www.hoolite.be/2014/04/07/slice-code-first-website/
- http://design.tutsplus.com/tutorials/how-to-work-with-slices-in-photoshop--psd-18611
Photoshop for the Web
- Treehouse: Photoshop Foundations course
- Tut+: Photoshop CS6 for Web Designers course
Once you've got all of that down check out slicy which helps with export layers from Photoshop on a Mac.
Courtney Mohr
1,096 PointsCourtney Mohr
1,096 PointsHi 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.