Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?

Photoshop 2x versus 1x

I’ve seen many web designers who work at 1x and I’ve read articles that say it’s best to design at 1x. But I think a more modern workflow is to work at 2x (Retina) size. In this article I’ll explore the various issues affecting our workflow, so you can understand why I recommend designing at 2x.

Let me clarify something before getting started. I’ll only talking about designing web graphics in Photoshop. Other apps like Sketch, Adobe XD, or Illustrator work totally differently, so this article will only focus on Photoshop.

If your unsure of what I mean by 1x and 2x, please read my post: Retina Web Graphics Explained.

Read More Right Arrow

Retina Web Graphics Explained: 1x versus 2x (Low‑Res versus Hi‑Res)

Photoshop 1x versus 2x Explained

I find that many designers (especially those coming from print) don’t really understand how resolution works on the web, so I’d like to explain it. These concepts apply to whatever design app you use (Photoshop, Sketch, Adobe XD, Illustrator, etc.) and understanding this will help you create properly sized web graphics.

Quick Explanation

If an image will be coded into a space of 300 pixels, you have to make:

  • A 300 pixel wide image (for 1x displays).
  • A 600 pixel wide image (for 2x displays).

In a webpage, both images will be coded so they appear physically the same size, but the 2x image has more pixels squeezed into that space (so it appears sharper and more detailed).

NOTE: The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers and is therefore irrelavent. It does not matter what the resolution is set to (so just make it 72ppi). All that matters is the pixel width and height of your images!

Read More Right Arrow

Is Adobe Experience Design (XD) Ready for Production Work?

At Adobe MAX 2016, Adobe said “you really have everything you need to be successful doing production work inside of XD”.

I like designing with Sketch, and Adobe Experience Design (XD) is clearly inspired by Sketch (to put it mildly). I’ve started learning XD and it does show a lot of potential. It’s still in beta, so can you really do production work with it? That depends on your needs. To help you decide, I’ve compiled a list of its limitations.

Adobe XD screenshot

Read More Right Arrow

macOS Sierra: App Tabs in Apple Maps & More

macOS Sierra brings system-wide access to tabs for many Apple apps as well as third party apps. Apps may need to be updated to take advantage of them, but Apple has updated many of its own apps (such as Maps, Keynote, Numbers, etc.) to support tabs.

Tabs in Apple Maps

Read More Right Arrow

How to Enable 4K Video Recording on the iPhone 6s

One of the big new features of the iPhone 6s is 4k video recording. So when I first got my new iPhone 6s I tried recording a video. I thought it looked the same as my previous iPhone, but didn’t have much time for further testing. I later learned that it does not shoot 4K video by default, you must enable it! Here’s how…

Read More Right Arrow

The Best Sketch Bootstrap 3 Grid Template: Free Download

Updated : Version 2 removes some unnecessary guides, for less visual clutter.

I found that most of the Bootstrap grids for Sketch did not use Sketch’s Show Layout (Ctrl–L) or don’t mark the midpoint of column gutters, so that’s why I made this grid template. I hope you like it!

Read More Right Arrow

Force Pinch-to-Zoom on Websites

Ever tried to pinch-to-zoom on a website and been annoyed that you can’t? Sadly this is something the website disabled on purpose. There’s a line of code they added to the webpage to prevent zooming. As a web developer I don’t believe in doing this, because it’s a major hindrance to many readers. Luckily there’s a workaround. You can make a bookmarklet that will let you enabling zooming on any website!

Read More Right Arrow

Force iOS App Store to Refresh

Did you know that you can force the iOS App Store app on your iPhone or iPad to reload? It does not matter what tab/section you’re in: Featured, Top Charts, Updates, etc. You can force the entire store to update with this quick and easy tip.

Read More Right Arrow

Siri Now Makes Speakerphone Calls

One of the new features in iOS 8.3 (released on Apr 9, 2015) is that Siri can place calls using the speakerphone! This finally makes hands-free calling in your car easy, especially if you turn on “Hey Siri” feature.

Read More Right Arrow

Awesome Text Effects in Adobe Illustrator (Video)

I made my first YouTube video for Deke’s Techniques: The Challenge, back in 2012. The techniques still work (even in the latest versions of Illustrator), so I wanted to post it here now that I have a blog.

I won third place with this video. The contest had specific requirements for content and time, but I think you’ll learn some cool text effects in Illustrator.

Read More Right Arrow

Welcome to My Blog

Welcome! I’m excited to start my own blog. Where will it go and how will you/others react? I want this to be a place where you can find useful tips, tricks, and thoughts about technology and design. I’m interested in many things, so I’ll post on a variety of topics such as: Macs, web design, Apple, photography, and more.

Read More Right Arrow