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.
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.
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!
Adobe’s Creative Suite has been officially retired. If you want to purchase Adobe’s creative apps (Photoshop, Illustrator, InDesign, etc.) you must join the Creative Cloud. With no fanfare, Adobe updated their CS6 page to say “As of January 9, 2017 Creative Suite is no longer available for purchase.”
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.
At the bottom of Photoshop’s Export As dialog (found in File > Export) there is an icon to the left of the zoom that has no tooltip when you mouse over it. Depending on the image you might not see any effect if you click it. It’s a pretty cryptic icon, so what does it do?
In CC 2017, Adobe completely redesigned Photoshop’s File > New dialog, but it’s slow to open and not as nice to use. The useless thumbnails are large, while the written specs (which are the most important thing) are smaller and harder to scan.
Luckily there’s a way to get the previous dialog back! (This also works in Adobe Illustrator.)
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.