9
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
75 comments
Robin Raszka, over 6 years ago
Always start @1x.
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
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.
Ben Patterson, over 6 years ago Designing Retina Web Graphics in Photoshop: Should You?
No.
Diego Lafuente, over 6 years ago
I won't waste too much time arguing why 1x is better. I just let you read the entire thing in this article https://bjango.com/articles/appdesignworkflow/
Rhys Merritt, over 6 years ago
Something tells me that there is nothing that will change this guys mind..
Sounds like cognitive biases acted on him, yes, like the religious people.
Another person who didn't read the article :(
Matt Rintoul, over 6 years ago
It is possible to read the article and still disagree. Do what works best for your situation.
Of course it's OK to disagree, but just making a statement with nothing to back it up isn't constructive and doesn't add anything to the discussion.
Joe Roberto, over 6 years ago Honestly... your first problem is that your using photoshop. ALWAYS design in vector.
Chris Keith, over 6 years ago
Hey Dan, I read your article. You didn't have to spend the time to write an article and share your thoughts with the world, but you did, so thanks for that. Below are the four arguments you make for designing at 2x in PS that I'd like to give my thoughts on:
..
1. Display Quality – "Stuff looks pixelated @200% zoom."
Honestly, who cares? Yeah, it kind of sucks not being able to see your creation coming to life in all of its amazing native resolution glory, but it's a welcome tradeoff to the never-ending nightmare of multiplying by 2 (or dividing by 2) in your head every other second. Font sizes, strokes, padding, margins... (shudders)
2. Previewing on Mobile Devices – "Adobe Preview CC likes 2x stuff better."
It's been a couple years since I've used Preview CC, but the fact that it doesn't automatically scale to the device you're using it with pretty much qualifies it as a piece of streaming garbage in my opinion. That aside, if you're designing in PS and using Preview, just zoom it to fill the screen.
3. Using Adobe Generator to Generate 2x and 1x Assets – "Some assets might get upscaled on export!"
I understand your line of thinking here... "But what if one of the Smart Objects I'm using is really 1.3x resolution? Or 1.93x?" I get that laying out assets on a 2x canvas gives you that assurance of resolution without having to dig a layer deep, but honestly how often is this really as issue? The vast majority of the time you (should) be dealing with source assets that are wayyyy beyond 2x (stock photography, etc). And even if something sub-2x made it's way into one of your Smart Objects, would you even notice the degradation of quality after generating assets? Would your clients? Visitors to your site?
4. Zoom Level – "But there's no keyboard command for... or wait."
How did even award this one to 2x? As you said, if you're on a 2x display you can define a shortcut to zoom to 200%. If you're on a 1x display, that actually makes designing at 2x even more of a ridiculous idea!
..
The reasons above just don't hold up under any sort of scrutiny. All four seem to range somewhere between irrelevant and trivial. You're right, a lot of people still use the best photo manipulation tool on the planet to design websites, but even Adobe is trying to tell them to just "f-ing stop it" while wildly pointing their fingers toward XD.
Chris Keith, thank you for such a thoughtful and well thought out response. You didn't have to spend time writing such a detailed and well formatted response, but you did and I thank you as well. This is the type of discussion I was hoping for!
I can see where you're coming from and you make some good points. I do believe that designers should be working on a 2x display now (or will be at some point), so that influences my judgment of these topics. I see 2x as becoming the standard and 1x becoming irrelevant (it's just a matter of when). Phones/tablets are all 2x, but desktops will lag behind with 1x displays for years.
1. Display Quality I personally think it's important to see the full quality when judging graphics, type, etc. so for me this a big one. I can understand how some people might not think so, but I can't stand designing at 1x on a 2x display because I know I'm not seeing an accurate display. I'm creating fewer and fewer 1x graphics as time goes on, so I'd rather see what I'm really creating (2x graphics) rather than being limited to 1x. To me it's about looking to the future.
The math thing is clearly the biggest argument against designing at 2x. I totally get that and understand that bothers many people. I don't mind working in even amounts (I don't see it as a hassle), but I can understand how some people would. In the end, to give specs to developers you don't have to do the math to divide by 2 if you reduce the Photoshop file by 50%. Photoshop will do all the math for you. But you do have to work in even amounts to make sure the math will work out properly.
2. Previewing on Mobile Devices Again it's a preview quality thing, not really a zoom thing (which isn't a big deal). But if the pixelated display on your Mac/PC doesn't bother you, then I can see how this wouldn't either. I want to see exactly what I'm creating, not just a low-res preview of it.
3. Using Adobe Generator to Generate 2x and 1x Assets I again think about how I'm creating fewer and fewer 1x graphics. I'd rather see and ensure my 2x graphics look good so I know they'll export properly. If 2x is mostly what I'm exporting, why would I want to look at my file in a lower resolution? And I don't always have the luxury of source assets that are way beyond 2x. Sometimes, but not always. Maybe your clients get you better assets :)
4. Zoom Level This is the least important of all the issues. I believe that we will all have 2x displays at some point (if we don't already have one). So I judged this issue based on what is ideal for designing on a 2x display. Working on a 2x display in a 2x file you just hit the keystroke for 100%, which is why I chose that as the winner. Yes a 2x file on a 1x display is the worst for a zooming keystroke, but that will just make you want to get a 2x display faster :)
I hope that further explains my approach. Thank you for sharing yours, I really do appreciate it. And I agree that Adobe is totally moving towards Adobe XD. It's just going to take awhile for that to be ready for production work. I very much look forward to when it is!
Art Vandelay, over 6 years ago
When you design something @2x and it's width is 95px what does it become?
Let me explain: 95 / 2 = fuck your designs.
Just do @1x. Only thing that actually needs to be exported @2x is images assets that can't be SVGs. Just zoom the fuck in when building crap in PSD.
Or, make your life easier, design in a vector based tool!
@2x is a pain in the ass for developers because not all values can be evenly divided by 2 so don't do it.
There isn't ever a reason to design at 3x. Who cares what screen you're designing for, if its written in code, it'll scale.
Simple, use even amounts when designing (they can all be divided by 2). It's really not hard. And once again, this topic doesn't need swearing. You'll be more convincing if you're nice. :)
"Simple, use even amounts when designing"
Seriously.. You are just making things difficult for the sake of having an argument.
Sorry, but I don't see that as difficult. And I'm not arguing for the sake of arguing. I'm just not seeing compelling reasons to be convinced to work at 1x. You're free to have a different opinion though :)
Option 1: Be conscious of whether you are using an even or an odd number for every single thing you create
Option 2: Don't worry about it, because you're designing @1x
If you can't understand how you're being difficult, then it's sort of pointless having a conversation about it. You're free to stay in the dark ages of design :)
Im not being anymore "difficult" than everyone here who clearly seemed to have made up their mind, despite what I see as reasons to design at 2x. But your comment is funny to me, because I see 1x design as being the old school approach. :)
This is starting to reek of /r/iamverysmart
Whether you see designing @1x as being the old school approach is kind of irrelevant, since you are just not coming off as someone who has any authority to say so.
And I never said that designing at 2x doesn't have issues (in fact I point some out in my article), but designing at 1x has issues too. You can work at either resolution as long as you know what the issues are. Both have pros and cons.
Ask your developers who implement how they feel about @2x. That is the only reason you need.
I am a developer too. There's no problem implementing my designs.
Well then aren't you something! You should write a book about this topic since you're so positive it's the best way to do it!
PRRRRRROOOOOFIFFFFFITTT
You'd be more convincing if you weren't condescending and assumed your way was the right or only way :)
So trying to support my opinion is being condescending? What about all of you who disagree? Are you all condescending? I'll change my opinion when I see a convincing argument against it.
Your inability to hold someone else's opinion as a possibility while immediately refuting it is the condescension, dude.
The fact that you've hit every comment with "nope not this way" or "nope done that already this is the best" makes you the biggest dick in this thread (even bigger than me calling you one).
Here's something you should say aloud daily (or at least the amount of times you refute someone else's thought)
It is the mark of an educated mind to be able to entertain a thought without accepting it. - Aristotle
Bruno Barros, over 6 years ago
You're using Photoshop to design a website? That brings me back memories from 2009.
I'm not saying I use it when I have a choice (I use Sketch whenever possible), but yes many people still do.
M I, over 6 years ago
What if, but what if you're using Windows?! I know, here anyone has a shiny Macbook Pro, but in the real world not anyone has it or there are multi-cross platform team that use both Mac and Windows. At one of my previous jobs the company computer was a PC, I had a Mac Mini home and Windows at work, at another job I was using a Mac and another designer colleague used Windows, how would you suggest working along? I've seen this complain over Photoshop a lot here, but it's just a tool eventually, like Sketch or Figma, or Gimp. Maybe my comment about Photoshop is kind of passive-aggressive, but regarding the article I see just only one valid reason for working @2x, previewing on mobile as you work in Ps.
And that is why I wrote this article... for all the people that have to use Photoshop. It's not as bad as people here make it out to be. I like Sketch, but it's not perfect either (such as not being cross platform so some companies can't use it). I can design in either app as needed. As Adobe XD develops, I think it will become a good option for cross platform environments.
Figma.
Where is Marc Edwards? Maybe he got two cents on this topic.
Alex Chan, over 6 years ago
I wouldn't really consider 1x to win out objectively with the points that you listed as some people weight certain criteria differently depending on their workflow.
I personally design at 1x, but I use Sketch and haven't used Photoshop to design a website in quite a while. I have developed based off of assets delivered by other designers at 2x and it's super annoying to have to redo math.
In Sketch I wouldn't design at 2x. There's no need in that app. If you design in Photoshop at 2x, you can export the assets from the 2x file, then reduce the image size in half before handing off to the developer so no math is involved.
Tom Mayes, over 6 years ago Your article title is a question - not a statement - hence why so many people are weighing in with their opinion. Don't chew their heads off with a mistake you have made.
I think the main point this post addresses is the shortcomings of Photoshop in the digital design space. Every 'problem' you have compared is non-existent in Sketch. And because you have mentioned in some of your reply comments that you "use Sketch whenever possible", it begs the question of why you would waste your time writing this article in the first place?
For better or for worse, tons of people use Photoshop to design websites. I wrote this article to help them out. If you use Sketch or something else that's great, this article isn't for you. That's OK. I wasn't trying to create a discussion about what is the best app to design in. I was just trying to give some helpful advice for people that design websites in Photoshop.
I didn't mean to chew anyone's head off, but I will defend a viewpoint that I'm passionate about and believe in. I'm sorry if my rebuttals came off the wrong way. I didn't mean any offense. But when someone simply states their differing opinion with nothing to explain why, I don't think that adds anything constructive to the discussion, nor is it a convincing argument for their viewpoint. When someone presents clear reasons for one side of a topic, you can't just say, "well I disagree" and be surprised when they ask why. If they had valid counterpoints to back up that opinion, I wanted to hear them.
Being passionate about designing @2x is probably the biggest waste of "passion".
Also - go ask people who implement your designs what they want before standing on a soap box spouting some shit.
Seriously, calm down dude. I'm a coder too and can implement any of my designs. I can work with any other developer and they'd have no problem within with me. And there's no need to swear and insult.
Jesse Head, over 6 years ago
"The quality will always be good because you never have to worry about scaling images down." Huh?
Scaling down from 2x to 1x is never a problem. Scaling up from 1x from 2x could be a problem if you do it wrong.
"Scaling down from 2x to 1x is never a problem"
Unless your asset is an odd number of pixels wide. It's like you are purposely being difficult just to prove some sort of odd point.
I'm not being difficult, I'm just explaining why I believe what I wrote. Let's say you have an odd sized 2x asset, how horrible would the scaling down be? Not that bad. In many cases I'm not even creating 1x anymore. Mobile and tablet are already all 2x. It's just a matter of time until we don't care about making 1x graphics. I won't predict when that happens, but it will happen some day.
"Not that bad" - seems pretty half assed. It's concerning that you're an instructor.
In a situation that can be avoided... and again, becomes less and less of a problem as we move away from 1x. I'm skating to where the puck will be, not where it was.
Says the person using Photoshop! This couldn't possibly get any more ridiculous
I never said Photoshop was the ideal web design app. I used to use Macromedia Fireworks. I use Sketch. I use whatever design tool I need to. Sometimes I get to choose, sometimes I have to fit into a workflow with a client or company and it's not up to me. In the professional world I still encounter many people (and studios) that use Photoshop for web design. And if you have to use it, you have to decide how to design. Talking about Photoshop doesn't mean I'm endorsing it.
Ryan Johnson, over 6 years ago
To prevent doubling your text size you can set the PPI to 144
That doesn't work if you're using pixels for type, but does work if you use points. :)
Jonas Goth, over 6 years ago
Working primarily from a retina display, i feel im bounded to work in 2x nonetheless. Though in regards to designing a mobile app, you should always go 1x.
Alex Talmon, over 6 years ago
Design in 1x, but make sure all your assets can be exported in vector or retina images.
In case of images (in Photoshop): - use images that are large enough for @2x / @3x - past them in full resolution in design and turn them into smart objects
When design is finished, export all your assets in @1x, @2x and @3x.
Done.
Cody Gallner, over 6 years ago Could you share a 2x .psd layout template that you made?
I have a Bootstrap Grid Template (that contains both 1x and 2x versions) on my blog https://www.danrodney.com/blog/photoshop-bootstrap-grid/
I also a Sketch version of the Bootstrap Grid template for those that are interested https://www.danrodney.com/blog/sketch-bootstrap-grid/
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now