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

Posted by kristinpruter
kristinpruter
8,048 Points

Slicing PSD and retina-ready images

Hi, I've been researching information about how to get retina-ready images on sites. I understand that you really need 2x size images (so if you want to set the image to be 100px x 100px you really need a 200px x 200px image) and how there are ways to serve a 2x image only to retina screens. Where I get confused is how to deal with this in a PSD design that I receive and need to slice and code. If a designer gives me a layout that I need to slice how do I slice images that are twice as big as I need them? Do they need to set up their PSD to be twice the size that they want it to be so I can slice it at that larger size (from something I read this may affect the quality of the image as it scales down)? Or do they put in images that are at 150dpi (instead of 72) so when I slice I get a higher resolution image that I can then make larger (although this doesn't seem to work - seems like I can't control the dpi on slicing, I still end up with a 72dpi image)? Or is the only option to have them handle the final images separately, either in their own individual Photoshop files that I can change size and resolution on or that they prepare and provide me with as the properly sized file. I'm especially thinking about when they want to add filters and effects to images and not just use an original file. Any tips or clarifications appreciated, I feel like I'm missing something obvious here!

6 Answers

Chris Wise
Chris Wise
1,501 Points

I always get my designs made at 2X. I can keep it at 100% for retina swaps or when I save for web move it to 50% for normal devices.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

If you are referring to using the slice tool in PhotoShop then coding it with DreamWeaver then this is a massive no no. I mean literally never, this is an old technique. Sites should now be recreated with HTML, CSS then you can add images and serve up higher res ones for Retina devices

kristinpruter
kristinpruter
8,048 Points
kristinpruter
kristinpruter
8,048 Points

No, I don't use Dreamweaver, I'm coding everything myself and using Sublime Text, but I'm working on something where the designer gave me a PSD file for the design including photos so the only way to get the photo/image assets is to slice them out of the PSD to use (they did not give me originals and they have applied filters/effects within photoshop). This is how they normally work so I'm wondering how to instruct them in the future to set up their designs so I can ultimately get image assets that will work well on Retina.

kristinpruter
kristinpruter
8,048 Points
kristinpruter
kristinpruter
8,048 Points

And thanks, Chris, doing that was one of my first thoughts I just didn't know if it was the right way. I came across this article when trying to find information: http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs They mention that working at the larger size and scaling down can affect the quality of the image at the lower scale, but maybe that's only noticeable on small things like icons (which I'd handle in a different way anyway like SVG, CSS, icon fonts, etc). Mostly I'm worried about photographs and more complicated graphics that won't work with SVG, which usually are bigger so maybe the issue he mentions isn't much of a problem.

Chris Wise
Chris Wise
1,501 Points
Chris Wise
Chris Wise
1,501 Points

I code email so i cant do everything in CSS like most normal people, but taking 2x down to 1 has always produced clear and precise images for me.

kristinpruter
kristinpruter
8,048 Points
kristinpruter
kristinpruter
8,048 Points

Thanks, funny a "fuzzy" image in an email I coded is what started this whole conversation! Email coding is challenging to say the least!

Chris Wise
Chris Wise
1,501 Points

Here is the code I use to swap them out.

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-650@2x.png) !important;
        background-size: 325px 115px;
        width: 325px !important;
        height: 115px !important;
        }
    td[class="headercell"] img { 
        display: none; 
        }
    }
}