↵

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

  • Chris KeithChris 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.

    2 points
    • Dan RodneyDan Rodney, over 6 years ago

      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!

      1 point