When saving SVG (scalable vector graphics) in Adobe Illustrator, there are some things you should know that will affect the quality of the SVG files you produce.
To show hidden files/folders in the Mac Finder or Open/Save dialogs you don’t have to use Terminal commands, all you need is one keystroke!
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.
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.
Did you know Google has a color picker you can use to mix up new colors, or convert color values between HEX, RGB, HSL, and more? Here’s how to use it!
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 could not find a Bootstrap grid for Photoshop that uses artboards, so I made one. I hope you like it! Artboards require Photoshop CC, so this won’t work in CS6 or older.
macOS Sierra brings picture-in-picture videos. In Safari, Right–click (or Control–click) the video and choose Enter Picture-in-Picture. The video will change to a small floating window that you can position in any corner of the screen.
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.
While Apple’s full-size keyboards have dedicated Home, End, Page Up, & Page Down keys, their compact keyboards (such as those found on laptops) do not. Instead, they double-up the function of some keys. Apple does not label the second function of all the keys, so not everyone realizes their full potential!
Last month Smashing Magazine published an interesting article asking “Is The Internet Killing Creativity?” Here are some of my thoughts on the subject.
In Mac OS El Capitan, when you shake the cursor to locate it, the cursor gets bigger. This does make it easier to find, but I work so quickly I find it happens accidentally. I find it a bit distracting, so here’s how to disable it.
If you can’t find the Google AdSense reports a Google Analytics, don’t worry. They are still there, but have been renamed.
It’s possible to take a screenshot on the Apple TV (4th-generation) or even record a video, but it requires a Mac and a cable to plug into the USB-C port on the Apple TV. Here’s how…
Here are a few interesting articles I’ve found recently. Happy reading.
I’ve updated my Mac keyboard shortcuts page for El Capitan. Not much changed really. While I was updating things though, I added a new keystroke. It’s not new in El Capitan, but was surprised I didn’t already have it listed.
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…
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!
Did you know that InDesign can quickly print the page (or pages) you have selected in the Pages panel? It’s easy to miss this nice little feature Adobe added to InDesign CC 2014.
We often need to switch between the content (text or photo) and the frame it’s in (the box). Here are some tips to quickly switch back and forth between the content and its container.
Did you know in Apple’s Mobile Safari browser you can reopen a tab that you recently closed? It’s pretty well hidden, so many people would never know. It remembers the last 5 tabs you closed, and here’s how to find it.
“Becoming Steve Jobs” is a book co-written by Brent Schlender and Rick Tetzeli that has received some great reviews. Back in March of this year they came to the Apple Store in SoHo, NY (just a couple blocks from where I work) to talk about their book.
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!
Most people never think about it, but there’s a reason behind the design of the Mac’s Command icon. Check out Jared Sinclair’s blog post Origin of the CMD Symbol to learn more.
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.
In Mac OS X Yosemite, you can preview links in Safari with a 3-finger tap. Hover over a link in Safari, and tap your trackpad with 3-fingers to see a preview.
Did you know there are a few hidden settings in Instagram’s Hyperlapse app? They let you choose the video’s resolution, frame rate, and speed.
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.
Have you ever Googled something and found old, outdated results? Especially when searching for tech related news, wouldn’t it be nice to get only recent results? You can! Here’s how.
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.
Shutting down Windows 8 was harder than you’d think, so I made a video showing how it works. The 8.1 update made things easier, so thankfully shutting down Windows 8.1 is easier.