iPhone 13 Pro is a big shift in iPhone photography. Not only are the cameras all upgraded in significant ways, but Apple’s adaptive, clever computational smarts have never been so powerful. Touching every aspect of the photographic experience, you might be surprised to at times become aware of its power and limitations alike.

The article is an interesting read with many example photos, from someone with an insight into photography that most people don’t have.

As the makers of a camera app, we tend to take a longer look at these upgrades. Where other reviews might come out immediately and offer a quick impression, we spend a lot of time testing it before coming to our verdict.

iPhone 13 Pro compared to iPhone 11 Pro (and iPhone 6)

I’m currently using an iPhone 11 Pro, but I helped my parents upgrade their old iPhone 6 to an iPhone 13 Pro. They are not power users by any means, but because they keep their phone for so long, they wanted the better camera (with 3 zoom levels), so it was worth spending the extra money on the higher-end phone.

As I was setting up their phones, I wanted to test out the new camera, thinking it would probably be a bit better than my iPhone 11 Pro. The thing that most amazed me immediately was the new Macro mode. Wow does it get close and show an amazing amount of detail! You can be a fraction of an inch from someone and take a photo that’s in focus. It was catching paper texture and fibers in cloth. I was amazed.

Noticeably Better FaceTime

The first time I FaceTimed my mother’s new iPhone 13 Pro, I could immediately notice the vast improvement in quality. I know it’s comparing an iPhone 6 to a 13 Pro, but wow was it a shocking improvement.

I point this out because one year’s improvements may seem small, but the cumulative yearly improvements can add up to a major improvement for those who skip several generations of phones.

Go Read The Article

I hope you enjoy reading “iPhone 13 Pro: The Edge of Intelligent Photography”.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Until July 17, 2020 you can save up to 25% off the Creative Cloud in the US, Canada, and Mexico. You can save on:

• Creative Cloud for Individuals - All Apps
• Creative Cloud for Teams - All Apps or Single App

Which Creative Cloud Plan is Right For You?

Not all plans are currently discounted, but here are some options to choose from:

• Full Creative Cloud: You get access to essentially all of Adobe’s creative apps: InDesign, Illustrator, Photoshop, Lightroom, Acrobat, XD, After Effects, Premiere, and many more.
• Photography Plan: (Also good for web designers who only want Photoshop). You get Photoshop and Lightroom for a lower monthly cost.
• Single App: You can get apps individually. Prices vary depending on the app.

Disclosure: If you make a purchase using these links, I may earn a commission. I use and teach these Adobe apps, and would recommend them regardless of any earnings.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

There are new (hidden) ways to enlarge your window without going full-screen (which I honestly don’t like). They work in macOS Sierra and later.

Window Enlargement Tricks

• Hold Option and click the green plus button at the top left of any window to make it fill the screen.
• Hold Option and double-click to the edge of any window to make it fill the screen.
  • Doing this on the left or side will expand it horizontally
  • Doing this to the top or bottom side will expand it vertically.
  • Doing this to a corner will expand it both horizontally and vertically.
• Double-click any side of a window (left, right, top, or bottom) to make the window grow to the edge of the screen in that direction.
• Hold Option, hover over the green plus button, wait a moment and you’ll see a menu pop up with the option to move the window to the left or right side of the screen. (This is new in macOS Catalina.)
  

Assigning a Keystroke to Make a Window Fill the Screen

Spectacle is a free app that I love. It lets you assign keystrokes to size and position windows. Here are the keystrokes I use set:

• Fullscreen: Control–Up Arrow
• Left Half: Control–Left Arrow (Hit this keystroke 1, 2, or 3 times to fill the left half, two-thirds, or one-third of the screen.)
• Right Half: Control–Right Arrow (Hit this keystroke 1, 2, or 3 times to fill the right half, two-thirds, or one-third of the screen.)

Let Me Show You How in This Video

Subscribe to my YouTube Channel

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

• InDesign CS6 is 32-bit so it will not work on macOS Catalina.
• Illustrator CS6 is 64-bit, but I’ve read that it has 32-bit dependencies so I’m not sure if it work on macOS Catalina (I have not tested it myself).
• Photoshop CS6 is 64-bit and should work on macOS Catalina.

Adobe’s Creative Suite was retired years ago and is not supported. If you want to continue using Adobe’s creative apps (InDesign, Illustrator, Photoshop, etc.) you must join the Creative Cloud or remain on an older version of macOS (Mojave or prior).

Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).

Time to Move On

If you’re still using InDesign CS6 or Illustrator CS6 you have to make a change. You have two options:

1. Join the Creative Cloud. You get access to the same apps you’re used to (but newer versions). Apps are installed locally on your computer and your access files the same way you did in CS6.
2. Stop using Adobe apps and switch to something else. While this may be an option for casual users, it won’t be so easy for professional users that have to exchange files with other workers/clients and are used to the extensive feature set typically found in Adobe apps.

Other Options?

If you’re looking for alternatives to Adobe apps, here are some to check out:

• Affinity Publisher (Mac and PC): Page layout app (similar to Adobe InDesign) for designing print layouts such as books, magazines, etc.
• Affinity Designer (Mac, PC, and iPad): Vector design app (similar to Adobe Illustrator) for designing websites, apps, UI/UX, etc.
• Affinity Photo (Mac, PC, and iPad): Photo editor (similar to Photoshop).

Which Creative Cloud Plan is Right For You?

Adobe has a free 7-day Creative Cloud trial. Yes you read that right, only 7 days. After that you must decide what apps you want:

• Full Creative Cloud: You get access to essentially all of Adobe’s creative apps: InDesign, Illustrator, Photoshop, Lightroom, Acrobat, XD, After Effects, Premiere, and many more.
• Photography Plan: (Also good for web designers who only want Photoshop). You get Photoshop and Lightroom for a lower monthly cost.
• Single App: You can get apps individually. Prices vary depending on the app.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Here’s a video showing you how:

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

I couldn’t find a good clean Bootstrap grid for Adobe XD that uses XD’s layout grid feature with guides to mark the midpoint of column gutters. So I made this grid template and I hope you like it!

Download XD File

Free for commercial or personal use. Please tell others about this template, but send them to this webpage to get it. (Do not redistribute this template on any other website.)

What’s Included

The template contains artboards for the various device sizes in Bootstrap 4:

• Extra Small Devices <576px (I used an iPhone SE size. There are layouts with 1 and 2 columns.)
• Small Devices ≥576px
• Medium Devices ≥768px
• Large Devices ≥992px
• Extra Large Devices ≥1200px

Tips for Using the File

• To show or hide the column shading, hit Cmd–Shift–' (Mac) or Ctrl–Shift–'(Windows) for View > Show/Hide Layout Grid.
• To show or hide the gutter divider guides, hit Cmd–; (Mac) or Ctrl–; (Windows) for View > Guides > Show/Hide All Guides.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

I like the new dark mode in macOS Mojave, but sometimes I need to switch back to light mode. I wanted a faster way than having to go into System Preferences. While looking for an answer, I came across a simple AppleScript that I want to share with everyone. Don’t worry if you’ve never even used and AppleScript before, this is easy to use and you don’t have to understand anything about AppleScript!

The Dark & Light Mode Switcher AppleScript

In case you don’t know, an AppleScript is a file that uses AppleScript code to automate something on our mac. Each time you run this AppleScript, it toggles between Light and Dark modes. Here’s the code if your interested, otherwise, continue with the instructions below.

tell application "System Events"
    tell appearance preferences
        set dark mode to not dark mode
    end tell
end tell

Get The Script & Unzip it

Download the AppleScript

Installation

1. Launch the Script Editor app (found in Applications > Utilities).
2. In the Script Editor app go into the Script Editor menu and choose Preferences.
3. In the General section check on Show Script menu in menu bar.
4. Quit the Script Editor app.
5. In the menu bar, click the script icon and choose Open Scripts Folder > Open User Scripts Folder.
6. Drag the script you downloaded (Dark & Light Mode Switcher.scpt) into the Scripts folder that opened.

Using the AppleScript

In the menu bar, click the script icon and choose Dark & Light Mode Switcher.

Video Demo

Subscribe to my YouTube Channel

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Select the Mask via a Keystroke in Sketch

1. Select the masked object by either double-clicking on the mask group, or selecting the mask group and hitting Return.
2. Press Tab to select the mask itself!

Additional Masking Keystrokes for Sketch

• Once you’ve selected the masked object or its mask, hit Tab to switch back and forth between the masked object and its mask.

• Hit the Esc key to reselect the mask group.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

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 XD is clearly inspired by Sketch (to put it mildly). It’s been out of beta for a while now, 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.

Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).

Current Limitations of Adobe XD

Based on the most current Mac version 7.0.12.9, released April 3, 2018.

1. There are no paragraph styles (only character styles).
2. There are no graphic/object styles.
3. There are no guides.
4. Compared to Sketch, symbols are basic. There are no flexible resizing options like those found in Sketch (which are extremely useful).

5. Type styling is basic:

   • There’s no space above and below paragraphs.
   • All text in a box must have the same line height. Like Sketch, a lot of text formatting is applied to everything in a box. Instead of putting headings, paragraphs, etc. all in one box, it’s best to make them separate text boxes. This is disappointing, because it’s one of the things I don’t like about Sketch.

6. There’s only basic prototyping:

   • No fixed headers or footers.
   • No modal pop-ups.
   • No scrollable areas. (The whole page scrolls.)
   • No conditional logic or complex animations that are possible in apps such as Facebook’s free prototyping tool Origami Studio.
7. Batch export is really disappointing. You can’t specify the file type for each asset. So you must mark all photos and export as JPEG. Then you have to unmark everything, mark all the vector graphics, and export them as SVG. This is vastly inferior to every other design app.
8. PNG export has no options, so you can’t choose between PNG-8 or PNG-24. You can’t decide whether you want transparency or not (they are always transparent).

9. You can’t have different JPEG quality settings for 1x and 2x. While Sketch can’t do this either (I really wish it could), Photoshop’s Generate Image Assets feature (called Adobe Generator) can do this.

   If you didn’t know this already, 2x JPEGs should be more highly compressed than 1x (otherwise they are a larger filesize than necessary).

10. You can’t choose to export only 1x or 2x web graphics, you must always export both sizes. (Sometimes I don’t need 1x.)

11. I’d like more control over how SVGs are coded (like we have in Adobe Illustrator):

    • Minifying removes IDs. Those can be useful when animating so I’d like to have an option to keep them.
    • Being able to use presentation attributes instead of CSS for styling would also be nice (this option is in Adobe Illustrator).
    • SVG files do not have a width and height coded into them. This can lead to display issues in Microsoft Edge or Internet Explorer. Adobe Illustrator at least has a preference (uncheck the Responsive option), but for SVG files exported from XD you’ll need to manually code the width and height.
12. You can scale point type (a single line), but you can’t scale area type (multiple lines). With area type, the text frame changes width/height but the type inside remains the same size.

13. You can’t add drop shadows to groups:

    • That means masked photos can’t have shadows because they are a group.
    • If you copy and paste a logo from Adobe Illustrator it comes in as a group. You can’t add a shadow unless you ungroup and pathfinder merge it.

14. The file format of imported graphics inconsistently affect their initial size in an XD layout:

    • JPEG files import scaled down, as though they are 2x (so they appear smaller).
    • Other file formats (such as PNG) don’t get scaled down (so they appear larger).

    This is a weird inconsistency and to make matters worse, there’s no way to see the current resolution or see the percentage of scaling. That means there’s no reliably accurate way to know the quality of an image other than trusting your visual judgment.

15. You can’t darken or lighten a photo as an effect (as you can in Sketch or Adobe Photoshop). In XD you could create a transparent rectangle over top, but then you have two objects to move/resize.
16. You can’t hide the inspector on the right (to free up screen space).

Is XD Ready for You?

XD has come a long way since its first beta release. Some of the limitations I wrote about in the 2017 edition of this article have been fixed and I know some of the things listed above are planned for future versions.

While XD might not ready for production work for everyone, it might be good enough for some. New features are being released pretty quickly and Adobe has previewed some cool looking new features. I wanted this article to give you a better idea of whether XD is right for you as it stands today. If it’s not, I do think it will continue to improve and will likely be ready in the future. I think it’s more a matter of when, not if. Check back later for updates as it develops!

Want to try out Adobe XD for yourself? Download XD now.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

1. In the iOS Simulator, make sure Automatically Sync Pasteboard is turned on.

   

2. Open the .html file in a web browser on your Mac (Safari, Chrome, etc.).
3. Copy the URL (file:///Users…)

4. In the Simulator, click into the URL bar, and then click Paste.

   

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

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!

Download Sketch File

Free for commercial or personal use. Please tell others about this template, but send them to this webpage to get it. (Do not redistribute this template on any other website.)

What’s Included

The template contains artboards for the various device sizes in Bootstrap 4:

• Extra Small Devices <576px (I used an iPhone SE size. There are layouts with 1 and 2 columns.)
• Small Devices ≥576px
• Medium Devices ≥768px
• Large Devices ≥992px
• Extra Large Devices ≥1200px

Tips for Using the File

• To hide or show the column shading, hit Ctrl–L for Show Layout.
• To hide or show the column and gutter guides, hit Ctrl–R for Show Rulers.

Video Demo

Subscribe to my YouTube Channel

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Download Photoshop .PSD File

Free for commercial or personal use. Please tell others about this template, but send them to this webpage to get it. (Do not redistribute this template on any other website.)

What’s Included

The template contains artboards for the various device sizes in Bootstrap 4:

• Phone: Extra Small Devices <768px. I used an iPhone SE (or iPhone 5) size.
• Tablet: Small Devices ≥768px
• Desktop - Medium: Medium Devices ≥992px
• Desktop - Large: Large Devices ≥1200px

Includes 1x & 2x (Retina) Versions

I’ve included 1x and 2x versions of the template so you’re free to choose whichever you want. While many designers work at 1x, I think a more modern workflow is to work at 2x (Retina) size. Working at either size has drawbacks, but I recommend 2x. To learn why, read my article Designing Retina Web Graphics in Photoshop: Should You Work at 1x or 2x?

Tips for Using the File

• You can change the column shading color by double-clicking on the columns layer thumbnail.
• To hide or show the column and gutter guides, hit Cmd–; (Mac) or Ctrl–; (Windows) or choose View > Show > Guides.

Video Demo

Subscribe to my YouTube Channel

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).

Ways to Create SVG in Adobe Illustrator

1. File > Export > Export As (and Export for Screens):

   • This newer export produces more optimized, smaller files with cleaner code than File > Save As.
   • Ignores the artboard size and automatically trims to the size of the graphics.

2. File > Save As:

   • This older export produces less efficient, larger files that are not as cleanly coded as File > Export.
   • Uses the artboard to define the size of the SVG. To fit the artboard to your graphics, choose Object > Artboards > Fit to Artwork Bounds.

3. Asset Export panel:

   • Lets you export multiple SVG files from specific graphics within a single Illustrator file.
   • Codes SVG files the same way as File > Export.

4. Copy and Paste:

   • Instead of exporting an SVG file, you can copy graphics in Illustrator and paste into a code editor to get the SVG code.
   • Codes SVG the same way as File > Save As (which is not as good as the other methods).

SVG Export Options

In the SVG export dialog you should pay attention to the settings (don’t just accept the defaults).

1. The Responsive option: I recommend unchecking Responsive because of the following:

   • When Responsive is checked, Illustrator will not code in a width and height, which can cause problems in Microsoft Edge and Internet Explorer. Additionally, without a width and height the SVG will automatically scale up or down to fill the container, forcing you to always code it to the size you want it.
   • When Responsive is not checked, Illustrator will code in a width and height. When the SVG is put into a webpage, it will appear at the size you designed it (rather than automatically scaling up/down to fill the container). This is nice because you don’t have to code the width/height every time you want to use the SVG. If you need to override the size in the SVG, you still can.
2. The Minify option: Check this on to reduce the file size, which is good for websites!

3. The Font option:

   • Convert to Outlines will turn the text into vector art so you don’t need to worry about fonts. Because it’s no longer text, it cannot be selected, copied, and isn’t as good for accessibility and SEO.
   • SVG will keep the text editable, but the webpage will need to load any non-standard fonts used in the SVG. This creates cleaner code, with text that can be selected and copied. It’s also good for accessibility and SEO.

4. The Styling option affects multiple things, such as file size, ease of editing, and ease of overriding the styling with CSS:

   • Inline Style codes a style attribute on each element. These are the hardest to override with CSS.
   • Internal CSS codes class rules into an embedded style tag. These are easier to override with CSS than inline styling and may be more efficient (smaller files) for some graphics.
   • Presentation Attributes codes various attributes (fill, stroke, etc.) on each element. These are the easiest to override with CSS.
5. To view/change the SVG Export Options for the Asset Export panel, go into the panel menu at the top right of the Asset Export panel and choose Format Settings. Then on the left, select the SVG category.
6. To view/change the SVG Export Options for the Export As Screens dialog, click on the Gear icon on the right. Then on the left, select the SVG category.

Other Tips

1. Layer and group names are coded as IDs in the SVG. Give them unique names if you’ll be overriding the CSS, or animating elements with JavaScript (GSAP is especially amazing for this). Group elements that you want to animate together (and name them appropriately).
2. Work at 1x size. Don’t know what I mean by 1x? Read my article Retina Web Graphics Explained: 1x versus 2x.

Conclusion

I hope you found these helpful. If you aren’t already using SVG instead of PNG for your vector graphics you should be!

If you have any tips that I missed, feel free to share them with me on social media.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Hit Command–Shift–Period(.) to toggle invisible files on or off. Hit it once to show them, and again to hide them. (For some languages it may be a comma instead of a period.)

For more Mac keystrokes, be sure to check out my Mac keyboard shortcuts page.

Let Me Show You in This Video

Subscribe to my YouTube Channel

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

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.

2x Versus 1x Showdown

Now onto the topics! I’ll look at one issue at a time, declaring a winner for each issue.

Display Quality

If your Mac or PC doesn’t have a 2x (Retina) display yet, it will eventually. Just like no one uses black and white monitors anymore, eventually all displays will become 2x. Eventually we may not even create low-res 1x graphics anymore, so why keep designing at a size that is eventually going to be irrelevant?

• 2x Photoshop files look great on a 2x Retina display.
• 1x Photoshop files look pixelated on a 2x Retina display (because you must zoom in to 200%). This means you can’t see their full potential quality.
• 2x Photoshop files look fine on a 1x display (although you must zoom out to 50%). You won’t be able to see the benefit of 2x on your 1x screen, because you’re limited by the display.

Once I got used to designing 2x graphics on a 2x Retina display, it’s hard to go back to viewing pixelated 1x designs. I think all designers should get a 2x display as soon as possible. There’s simply no other way to see how some people are viewing your designs.

Winner: 2x

Previewing on Mobile Devices

The Adobe Preview CC mobile app lets you preview your phone and tablet designs on an iPhone or iPad live as you work. If you’re not already using it, you’re missing out! It’s a great app, and it assumes you’re working in 2x files:

• If you work in 2x files, you can see the full quality (because the iPhone and iPad have 2x screens) and your designs will be properly sized in the preview app.
• If you work in 1x files, your designs will start out too small (half the size they should be). You’ll need to double-tap to zoom in to 200% (which is annoying to do every time you preview), and it means your previews will be pixelated.

Adobe seems to have built this app assuming you’re designing in 2x files, so that’s further support for my recommendation to design at 2x.

NOTE: I am currently running Adobe Preview on an iPhone 6s (which is a 2x device). I have not tested how Adobe Preview works on an iPhone Plus which is a 3x device.

Winner: 2x

Using Adobe Generator to Generate 2x and 1x Assets

• Using Adobe Generator, you can export 2x assets (the current size) as well as 1x assets (by scaling them down 50%). The quality will always be good because you never have to worry about scaling images down.

• When using Adobe Generator to export 2x assets from a 1x design, Photoshop must scale up the graphic. For this to work properly you must use Smart Objects that have enough resolution so they can be doubled in size. This means you can’t trust your output by simply looking at your Photoshop file. You could double-check the scale of every Smart Object, or double the size of the Photoshop file and visually check it, but these are just more things to do and more things you could forget. As long as you’re careful this works most of the time, except when you encounter a bug I found in Photoshop.

  If the file you placed as a Smart Object was originally a JPEG (which stock photography typically is), the exported 2x asset will be low quality and blurry even if the Smart Object has enough resolution. This means you have to convert all JPEGs to PSD or TIFF before placing into Photoshop, so that the enlargement to 2x will work properly. Clearly this shouldn’t happen, which is why it’s a bug! Working at 2x avoids this bug.

Winner: 2x

Zoom Level

• When working on 2x designs on a 2x display, you work at 100% zoom. There’s a keystroke to zoom to 100%.
• When working on 1x designs on a 2x display, you work at 200% zoom. There’s no default keystroke to zoom to 200%, although you can define one.
• When working on 2x designs on a 1x display, you work at 50% zoom. There’s no default keystroke to zoom to 50%, and no way to define a single keystroke. You’ll need to zoom to 100% and then zoom out. (Maybe someone wrote a script that you can assign a keystroke to.)

Assuming we all have (or will get) a 2x display, being able to quickly zoom to 100% with a keystroke looks like the winner to me.

Winner: 2x

Photoshop File Size

• 1x Photoshop files are smaller.
• 2x Photoshop files are larger.

Winner: 1x

Element Sizing & Math

When working at 2x you must double type sizes, stroke weights, etc.

Here are some examples:

• 20px type in CSS must be 40px in a Photoshop 2x file. (It would be 20px in a 1x file.)
• A 1px stroke in CSS must be 2px in a Photoshop 2x file. (It would be 1px in a 1x file.)

As long as you make all sizes even (2, 4, 6, 8, etc.) in your 2x files you’ll be fine (because they can be cut in half for developers).

Giving specs to developers requires an extra step when working in 2x files. Because all sizes are doubled, you have to divide them in half to get the amount for coding into CSS. You could reduce the image size to 50% and Photoshop will do all the math for you, but this is the biggest thing to dislike about working in 2x files. It’s manageable, but everyone (designers and developers) must understand what’s going on.

Winner: 1x

Conclusion

Designing at 2x wins by a score of 4 to 2. Both workflows have their pros and cons, but I hope I’ve shown you that the benefits of designing at 2x outweigh the few downsides.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

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!

Detailed Explanation

We can best understand this topic by looking back at how web graphics started. Years ago (before hi-res screens were ever invented) we designed websites for displays that gradually grew bigger over the years. Early displays were 640 by 480 pixels, later growing to 800 by 600, 1024 by 768, and so on.

More pixels typically meant physically larger displays so you can see more stuff. This also meant the effective resolution of displays remained mostly the same.

The First Retina Display

The displays of the iPhone 3 and iPhone 4 were both physically the same size, but the iPhone 3 was 320 pixels wide and the iPhone 4 was 640 pixels wide. The iPhone 4 had twice as many pixels (widthwise), so we call it a 2x display. Apple calls them Retina displays because the human eye can’t see anything higher resolution than these displays. The old concept of more pixels equals a bigger screen no longer applied! Now the additional pixels were being used to show more detail, rather than more stuff (as you’d see on a bigger screen).

When I first heard about this, I wasn’t sure how it would work. If I had designed a webpage to be 320 pixels wide (which used to be the full width of an iPhone 3) would it now only be half the width of the iPhone 4 screen? That wouldn’t be good, because the content would be too small at half the size! Luckily that wasn’t the case, because the 320 pixels that are coded into HTML/CSS no longer have a one-to-one relationship with all displays:

• On 1x displays: 1 pixel width in HTML/CSS = 1 pixel wide on screen
• On 2x displays: 1 pixel width in HTML/CSS = 2 pixels wide on screen

The browser knows the resolution of the display, and translates HTML/CSS pixels into hardware pixels.

So Not All Pixels Are the Same Size!

2x graphics are twice the pixel width of 1x graphics, but don’t think of them as bigger. They must occupy the same physical space, so the 2x pixels end up being smaller.

In the animation below, when the 2x image is twice the width of the 1x, both images have the same size pixels. This is not how we’re supposed to compare them! When the 2x image is scaled down so it’s the same physical size as the 1x, the pixels are smaller which creates a higher resolution image. This is the size the 2x image is supposed to be!

The Fluid Nature of Resolution on the Web

One last concept to keep in mind, is that resolution on the web is not always fixed. For example, an image’s resolution will change as it is scaled down to fit smaller devices. The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers because the size of the image in the webpage determines its resolution. The size is determined by HTML/CSS code, so:

• A 1200px wide image, coded 1200px wide is 1x (low-res).
• A 2400px wide image, coded 1200px wide is 2x (hi-res).
• A 1200px wide image coded to be 100% of a browser window will be low or hi-res depending on the size of the window. It’s a fluid resolution!

To further illustrate this, I made a demo page with different sized images. You’ll need to view it on a desktop monitor (ideally 1200px or wider).

View Interactive Demo

Should You Make Both 1x and 2x Graphics?

Most (if not all) of today’s mobile phones and tablets have 2x or higher resolution screens, so you may not need to create 1x graphics for mobile.

Some laptops and desktops have 2x screens, but most are still 1x. Therefore it’s best to create both 1x and 2x for desktops.

Should You Make 3x Graphics?

There are even higher resolution 3x displays, but they don’t look better than 2x because of the limitations of your eye. Some people with lower vision can’t even tell the difference between 1x and 2x! For web graphics, 2x is the highest resolution you need. Anything greater than 2x will increase the filesize (and download time) without a noticeable improvement in visual quality.

Conclusion

I hope this clarified (pun intended) how resolution works for web graphics, so you can be confident in making your graphics the correct size and resolution.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).

Time to Move On

If you’re still using CS6, at some point it’s going to stop working and you’ll have to make a change. You have two options:

1. Join the Creative Cloud. You get access to the same apps you’re used to (but newer versions). Apps are installed locally on your computer and your access files the same way you did in CS6.
2. Stop using Adobe apps and switch to something else. While this may be an option for casual users, it won’t be so easy for professional users that have to exchange files with other workers/clients and are used to the extensive feature set typically found in Adobe apps.

Other Options?

If you’re looking for alternatives to Adobe apps, here are some to check out:

• Sketch: Mac app for designing websites, apps, UI/UX, etc.
• Affinity Photo: Mac and PC photo editor (similar to Photoshop).
• Affinity Designer: Mac and PC vector design app (similar to Adobe Illustrator) for designing websites, apps, UI/UX, etc.
• Affinity Publisher: The first beta will be released in 2017, but it will be a Mac and PC page layout app (similar to Adobe InDesign) for designing print layouts such as books, magazines, etc.

Which Creative Cloud Plan is Right For You?

Adobe has a free 7-day Creative Cloud trial. Yes you read that right, only 7 days. After that you must decide what apps you want:

• Full Creative Cloud: You get access to essentially all of Adobe’s creative apps: Photoshop, Illustrator, InDesign, Lightroom, Acrobat, Experience Design (XD), After Effects, Premiere, and many more.
• Photography Plan: (Also good for web designers who only want Photoshop). You get Photoshop and Lightroom for a lower monthly cost.
• Single App: You can get apps individually. Prices vary depending on the app.

The End of a Era. Goodbye Creative Suite!

It’s only fitting that I take a moment to reflect. Creative Suite changed how we buy Adobe apps. Before that we’d buy them individually, and they had staggered release schedules. With Creative Suite, Adobe concentrated on updating all their apps at the same time, and bundling them so they were more affordable. Everyone who used Photoshop and Illustrator bought the Creative Suite, so they also got InDesign. QuarkXPress was the industry standard, but it was buggy and Quark took years to add new features. InDesign was far superior, and because people were getting it in Creative Suite, they could try it out (and often started using it because they liked it better). As they say, the rest is history. Creative Cloud is the next chapter for Adobe and creative professionals. It will be interesting to see where it takes us.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

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.

Disclosure: If you make a purchase using my links to Adobe’s website, I may earn a commission (which helps support me).

Current Limitations of Adobe Experience Design (XD)

Based on the most current Mac beta version 0.6.12.17, released in Jan 2017.

1. There are no text or graphic styles.
2. There are no guides or web grids. To design on a 12-column grid (such as Bootstrap) I have to draw transparent boxes to use in place of guides (which I hide and show as needed).
3. There is no JPEG export.
4. PNG export has no options, so you can’t choose between PNG-8 or PNG-24. You can’t decide whether you want transparency or not (they are always transparent).
5. You can’t create radial gradients in XD (only linear gradients). You can copy and paste a radial gradient from Adobe Illustrator and it remains a radial gradient in XD. You can even change the colors, but you can’t change the size or position the radial gradient.

6. There’s only basic prototyping:

   • No fixed headers or footers.
   • No modal pop-ups.
   • No scrollable areas. (The whole page scrolls.)
   • No conditional logic or complex animations that are possible in apps such as Facebook’s free prototyping tool Origami Studio.
7. You can’t convert point type (a single line) to area type (multiple lines). NOTE: Point type is a single line of type made via a click. Area type is multi-line text made via a drag.
8. You can scale point type (a single line), but you can’t scale area type (multiple lines). With area type, the text frame changes width/height but the type inside remains the same size.

9. You can’t add drop shadows to groups:

   • That means masked photos can’t have shadows because they are a group.
   • If you copy and paste a logo from Adobe Illustrator it comes in as a group. You can’t add a shadow unless you ungroup and pathfinder merge it.

10. Type styling is basic and buggy:

    • There’s no space above and below paragraphs.
    • All text in a box must have the same line height. Like Sketch, a lot of text formatting is applied to everything in a box. Instead of putting headings, paragraphs, etc. all in one box, it’s best to make them separate text boxes. This is disappointing, because it’s one of the things I don’t like about Sketch.
    • Buggy: Creating new text or copying/pasting sometimes lost the text styling. With no way to create styles (or copy/paste text styling) I had to manually format text over and over again.

11. The file format of imported graphics inconsistently affect their initial size in an XD layout:

    • JPEG files import scaled down, as though they are 2x (so they appear smaller).
    • Other file formats (such as PNG) don’t get scaled down (so they appear larger).

    This is a weird inconsistency and to make matters worse, there’s no way to see the current resolution or see the percentage of scaling. That means there’s no reliably accurate way to know the quality of an image other than trusting your visual judgment.

12. You can’t darken or lighten a photo as an effect (as you can in Sketch or Adobe Photoshop). In XD you could create a transparent rectangle over top, but then you have two objects to move/resize.
13. Compared to Sketch, symbols are basic. There are no content overrides and no flexible resizing options like those found in Sketch (which are extremely useful).
14. SVG files do not have a width and height coded into them. This can lead to display issues in Microsoft Edge or Internet Explorer. Adobe Illustrator at least has a preference (uncheck the Responsive option), but for SVG files exported from XD you’ll need to manually code the width and height.

15. You can’t have different JPEG quality settings for 1x and 2x. While Sketch can’t do this either (I really wish it could), Photoshop’s Generate Image Assets feature (called Adobe Generator) can do this.

    If you didn’t know this already, 2x JPEGs should be more highly compressed than 1x (otherwise they are a larger filesize than necessary).

16. You can’t choose to export only 1x or 2x web graphics, you must always export both sizes. (Sometimes I don’t need 1x.)
17. You can’t hide the inspector on the right (to free up screen space).

Am I Mistaken?

If I’m wrong about anything of the points above, please let me know. I did my best to research each point before including it, but XD is a new app so there could be something I missed.

Is XD Ready for You?

XD is clearly not ready for production work for everyone, but it might be good enough for some. Adobe is releasing new features quickly, and I know some of the things listed above are planned for future versions. Adobe has also previewed some really cool looking new features, and they have done a lot of nice things with XD so far. I wanted this article to give you a better idea of whether XD is right for you as it stands today. If it’s not, I do think it will continue to improve and will likely be ready in the future. I think it’s more a matter of when, not if. Check back later for updates as it develops!

Want to try out Adobe Experience Design for yourself? Download XD now.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

1. Search for a color value (like the examples below) to see the color picker.

   • Hex values: #00cfc8
   • RGB values: rgb(253, 88, 150)

2. Click Show Color Values to get other conversions (such as RGB, HEX, etc.)

Here’s a screenshot of what it looks like. Happy Googling!

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.

If your image has a transparent background, and you’ve chosen a format that supports transparency (such as SVG, PNG, or GIF), clicking that icon will toggle the background color between light and dark. It’s only for previewing, so it has no effect on the final exported image.

While I eventually figured out what it does, it would have been nice if Adobe would have added a tooltip to explain the button.

This article was originally posted on Dan Rodney's Blog. If you enjoyed this post, be sure to follow Dan on Twitter or Facebook. Visit DanRodney.com for more.