Designer News
Where the design community meets.
↵
Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?(danrodney.com)
over 6 years ago from Dan Rodney, instructor, web developer, designer
Dan Rodney, over 6 years ago
I guess you didn't read the article, where I explain why it's best to work @2x.
Darrell Hanley, over 6 years ago
Actually, you'd be better off designing @3x if you really went down the raster path. Many of the phones released over the past 3 or so years are at 3x resolution, a notable example being the plus line of iPhones. Your 2x resolution assets will not upscale without quality loss. I would argue that ultimately, you'd be better off designing in a vector program like Sketch of Illustrator and exporting your assets as svgs wherever possible if designing for the web.
Also by designing at 2x resolution, you're liable to make errors in your design like making odd sized assets or grid layouts.
If you're designing for an app, then 2x is a non-starter anyway since you'll need 3x assets for iOS anyway, and would be strongly encouraged to create 1.5x and 3x assets for Android.
I'd never design at 3x for web (my article was solely focused on web design). It doesn't match retina screens we design on and there's no need for 3x on the web.
There absolutely is a need for 3x on the web because the phones are still at 3x resolution regardless of whether they're viewing a website or an app. Again, this is why it would be easier, and more accurate, to design at 1x resolution and export for your various target resolutions, or more conveniently design and export svgs.
I disagree 100%. I've looked at 2x and 3x phones and the graphic quality looks the same (and I have good eyesight). I think anything beyond 2x is a waste of people's time having to download uselessly large graphics (for no noticeable improvement). The web is about balancing performance and benefit. I see no real benefit above 2x that's worth the performance hit. I respect people's time and data plans too much to give anyone a 3x graphic.
Which is why they should be SVGs to begin with, in which case you might as well design in 1x.
SVG is great for vector graphics, but you still need pixels for photos (and thus need to decide on 1x, 2x, 3x). Once everyone has 2x devices and we don't bother creating 1x anymore, what will be the point in designing at 1x? I'm suggesting (what I consider) a more modern workflow that's looking past 1x. Its days are numbered. Mobile and tablet are already all 2x. We're still waiting for desktops to complete the move to 2x (although that will likely take years). Photoshop is not a great tool for SVG design (which is why I do prefer Sketch, and maybe some day Adobe XD), but for now some people are stuck using Photoshop and they have to make the best of it. When using Photoshop they'd typically use Illustrator to export most of the SVGs.
Andy Stone, over 6 years ago
"I disagree 100%. I've looked at 2x and 3x phones and the graphic quality looks the same"
Why even scale up to 2x at this point? There is a 50% difference in quality between 2x and 3x—and it is definitely possible to tell with detailed illustrations/photography on an iPhone Plus or G Pixel.
If you don't want people downloading uselessly large graphics, keep it at 1x for photos that don't matter. Dirty secret: we do that for some photos that lack detail and don't really benefit compared to the MB tradeoff.
Ninja Edit: thanks for putting the time into writing the article, but you will hit a lot of resistance (especially on this site) pushing for Photoshop in web graphics. I wish you luck.
I can't see a difference between iPhone (2x) or iPhone Plus (3x) at normal viewing (and I have good eyesight). Surely there's more resolution there, but normally I can't see it.
You bring up a good point about keeping some things at 1x. Especially with photos you can't always see much of a difference so you don't always need 2x. Sometimes 1x is enough, or you can do something between 1 and 2x. If you really compress your 2x photos though, you can often end up with the extra resolution but the filesize isn't too much bigger than the 1x.
I knew people here aren't fans of Photoshop... but I also know some people have to use it. I never meant this to seem like an endorsement of using Photoshop (but maybe even submitting it here seemed to imply that). I thought it would get people talking, and I think discussions like this are great. Thank you for a thoughtful and polite response :)
And I didn't want to debate what program you should use (I also like Sketch). That's an entirely different topic. Some people use Photoshop and I wanted to address this to those people.
Andu Potorac, over 6 years ago
Dan, design @1x always. It's common sense and there's no reason to do otherwise.
1x is what you get for 2x and 3x too, with a bit of variation in pixel sizes. What Apple does with the assets (images or fonts), it does it in the same container, the same placeholder. So you don't have to account for that, it's automatic.
http://iosres.com/ - see here the logical resolution. That's what you design for - and those sizes are 1x.
These variations are addressed in design and code using constraints and size classes. The rule is this:
- You design at 1x and export at 2x and 3x for the ASSETS.
- You use AutoLayout (in Sketch) to implement constraints and show them at the right sizes, for the SCREENS. Note I said for the right sizes, so you won't do 2x and 3x from the 1x because you don't get the right screen size (assuming you start at 375x667).
Instead you generate all screen sizes with AutoLayout and make sure the constraints show developers how they should do it too.
Offtopic - Stop using Photoshop for this stuff. There's Sketch and Figma and Adobe XD. Just stop it!
My article has one very specific topic, designing web graphics in Photoshop. I said it clearly at the start of it. I never said it's what you "should" design in. It's just a fact that some people do design in it and I wanted to talk about it. Yes you can argue that you should use another app (and I'd agree), but that's off topic, as is talking designing apps. While you might think it's common sense to design @1x, my whole article focuses on why I think you should design @2x. I'm beginning to think people just read the title and insert their own opinion without reading what I said.
I said it's offtopic. :)
Regarding the second part of your comment, that is true when the title reveals the content of the article. There's a way to write, and this is not it.
Make the title an invitation for people to read the article.
As an instructor, I want people to know what they will be reading, and the answer is not included in the title. What would you suggest as a better title?
Nic Trent, over 6 years ago
I avoid designing at 2x, because I've had multiple issues of things moving around or getting fuzzy when downsizing to 1x for the developer... Is it just me?
I don't mind the pixelation so much, so I go for @1x with vector assets, shapes & smart objects.
Interesting point. I haven't found that to be a big problem in my experience, although sometimes I've noticed minor differences when scaling up or down. As time goes on I'm producing fewer and fewer 1x graphics though, as mobile and tablet are essentially all 2x at this point.
Yeah, but with vectors, photoshop shapes, and smart objects... the developer has everything they need to dev for retina. Absolutely no need to design in a 2x document... except for personal preference.
No need? I made numerous points in my article why you should design in a 2x file (so I won't repeat them here again).
I read it, but I don't use the same workflow as you, the only relevant argument in my case is a higher quality preview.
More than one way to skin a cat. I mean hell, Area 17 uses Illustrator to design all their websites... https://guides.area17.com/design-techniques/#why-illustrator
Robin Raszka, over 6 years ago
Nope, it's crap.
Jan Semler, over 6 years ago
No discussion about that. You shouldn't design interfaces or websites in photoshop at all. Still wondering why people or companies do that and still discussing the @1x vs. @2x thing.
Always start @1x.