For web professionals, using keyboard shortcuts is a great way to increase speed and efficiency in your workflow. In fact, I’d say they are an essential for true mastery in web design, development, or any computer-intensive trade.
In every program I use, from Mac OSX to Photoshop to Panic Coda and Tweetie, I’m constantly striving to reduce the number of mouse clicks and adopt as many keyboard shortcuts as possible. You can say it’s an obsession of sorts 
Learning Keyboard Shortcuts
When learning to use a new program, I highly recommend learning the keyboard shortcuts right from the start. That way you don’t develop habits with excessive mouse clicks.
Some programs, like Photoshop, will display the keyboard shortcut when you mouse over the feature. Others display then in the program menus. And others even allow you to customize your own keyboard shortcuts, which makes it really easy to work into your personal workflow.
The process of learning keyboard shortcuts usually goes like this:
- Determine the most common and repetitive actions you perform in the program.
- Learn the keyboard shortcuts for those actions or define your own.
- For an entire day, consciously utilize the shortcut. If you can, keep your hand completely away from the mouse. For the first day, your workflow will likely be a bit slower than usual.
- After that first day, the shortcut should now be ingrained in your workflow. Now you can unconsciously use the keyboard shortcut every time, vastly improving your speed.
Useful Keyboard Shortcuts for Web Designers
Here are a few shortcuts I use on a daily basis and find particular useful for web design/development. I’ll spare you the obvious ones like Save (command + S) and Undo (command + Z). Hopefully you’re already using those. Of course, there are many more to find and use so I’ve added links to other articles with more exhaustive lists.
System-wide Shortcuts
Screenshots (mac) - Command + Shift + 3 takes a screenshot of the entire monitor. Command + Shift + 4 lets you choose which window to shoot.
Screenshots (windows) – Control + Print Screen will save the current screen to the clip board. You can then paste it in photoshop or another imaging application.
Duplicate file – Command + D
Save As – Shift + Command + S
Close active window – Command + W (mac) / Control + W (windows)
Here’s an extensive list of system-wide keyboard shortcuts.
Web Browsing Shortcuts
Open a new tab – Command + T (mac) / Control + T (windows)
Reload the page – Command + R (mac) / Control + R (windows)
Reload the page with a refreshed cache (useful when updating images) – Command + Shift + R (mac) / Control + Shift + R (windows)
Zoom in / Zoom out – Command + / Command -
Find text on page – Command + F (mac) / Control + F (windows)
Activate Firebug – Command + Shift + C (mac) / Control + Shift + C (windows)
Here’s a complete list of Mozilla Firefox shortcuts.
Photoshop Shortcuts
Copy Flattened Selection – Command + Shift + C (mac) / Control + Shift + C (windows)
Group selected layers – Command + G (mac) / Control + G (windows)
Show/Hide Guides – Command + ; (mac) / Control + ; (windows)
Flip the foreground and background color – X
Here’s a list of Photoshop “Secret” shortcuts
Share your favorate shortcuts
Which shortcuts could you not live without? Which have had the biggest impact on your workflow? Share your secrets in the comments!
