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

Joe Consterdine
Joe Consterdine
13,965 Points
Posted by Joe Consterdine
Joe Consterdine
13,965 Points

How do you convert photoshop images to responsive design?

Hey,

I've been learning Photoshop recently and have just finished the foundation course.

I often look at inspiring websites and often see cool responsive sites using interesting design/images. I assume a lot of them have designed in PS.

I understand you would use a max-width of 100% so it stays 100% of it's parent but sometimes that looks bad.

For e.g say you have a longish image within a wide container and give it a max-width of 100% then it's going to look pretty bad when you resize the window.

With that been said, would you only use smallish images so they don't look out of place in a smaller window size?

Also say you have a grid system and you have 4 columns all sized at 25%. How would you determine the image size for that column?

Thanks Joe :)

1 Answer

Christophe Rudyj
seal-mask
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points
Christophe Rudyj
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points

Here's how i do it mostly I do the entire mockup in Ps then i look at what can be done in CSS first then the assests that can't be replicated in CSS/SASS i add .png32 on the layer name or i try to see iff i cant make this assest in Illustrator to make a svg out of it

when i have long images but i know some part of it will need to be replicated over and over i make a copy of the part that will be repeated over and over and in the SASS/CSS i do background: url(image1.png) no-repeat, url(image2.png) repeat-x/y;