Mrch Is Shrtct Mnth: Learning Web Design Shortcuts

Like Mindy before me, I pledged I would speed up my workflow this year using keyboard shortcuts. Web design is an interface-intensive profession: we use 3+ programs at once and navigate between dozens of folders on an average project. When designing a comp, I use over 50 distinct commands in Photoshop alone (not counting the web browsing, email, and Illustrator commands). This is is a huge amount of time spent moving the mouse, which could be easily reduced by a couple shortcuts.

The trouble with shortcuts? There's just too many of them. It's hard to find a place to start tackling a list of key commands, and once you begin learning, it's harder still to commit those shortcuts to memory.

One Day At A Time

But together we shall overcome: Download the printable Viget shortcut calendar for March, and learn (really, truly learn) a new shortcut every day. Programs covered: Photoshop, OS X/Windows, Illustrator, Textmate, CSSedit, and the shell.

Every day, try to learn at least one shortcut from the day's list using the exercises shown. If you already know a day's shortcut when it comes up, don't just skip that day! Think about a common task that you use the mouse for, find the shortcut for it using Google, and complete the same exercises with it.

Daily Exercises

The following exercises are really good ways to get commands committed to memory:

1. Do the shortcut 20 times in a row. Seriously, just do it 20 times really fast.
2. Mix it in with two other tasks. For example, select-[shortcut]-move an object. Do this five times.
3. Start using it regularly. If you forget and complete the task normally, undo and use the shortcut.

Download the printable calendar (PDF)

(For PC users, most of the Cmd key commands use Ctrl instead, and Alt instead of Option)

Week 1: OS Basics.

2nd - Stop clicking on folders and apps!
Cmd-Spc - Find and launch files and applications with Spotlight.
Ctrl-Spc - Even better, do it with Quicksilver, or for Windows, Colibri.

3rd - Browsing in Finder
Cmd-Up/Down - Use this when opening files or moving around in Finder to jump down/up a folder. (In Windows, try Backspace and Enter)
Cmd-O - Open a file or application in Finder
Just type - Jump to a folder or file in a Finder list
(Mac OS tip: Browsing in column mode speeds things up even more, because you can use right and left arrows to jump into folders)

4th - The Menu Bar
Once you get fast with the keyboard, browsing the menu bar this way will be as easy as using the mouse.
Ctrl-F2 - Jump you to the menu in OSX, and Alt will in Windows.

5th - Multi-Tasking
Cmd-Tab - Switch between open programs superfast (Alt-Tab on Windows)
Cmd-` - (Below the tilde)-  Switch between windows in a single program

6th - Quittin' Time
Cmd-W - Close a window or tab
Cmd-Q - Quit the program (Alt-F4 in Windows)
Cmd-H - Hide the current window

Week 2: Photoshop

9th - Colors
X - switch foregound/background colors
D - Reset foreground/background to black and white
These go great together: A quick D-X is the easiest way to set white as a foreground color
Opt-Del - Fill with foreground color

10th - Cuttin' and Pastin'
Shft-Cmd-C - Copy merged (copy a fully-flattened section of the image to the clipboard)
Shft-Cmd-C cut-paste to a new layer

11th - New Things
Cmd-N - New Document
Shft-Cmd-N - New Layer (asks you for the name)
Shft-Opt-Cmd-N - Immediate new layer

12th - Layers
Cmd-E - Merge with the layer below
Shft-Cmd-E  Merge all layers
Cmd-G - Group layers

13th - Masking
Q - Switch to quick-mask. Hit Q again after you've painted some black to create a selection
Alt-Click the mask icon - Start with a black mask instead of a white one
Cmd-Click the mask itself - Set the mask area as your selection

Week 3: Other Programs

16th - Textmate
Ctrl-Shft-W - Wrap the selection with a tag (begin typing to specify the type of tag)
Ctrl-W - Select word
Shft-Ctrl-Cmd-L - Automatically Google the selected text and make a link to it
Shft-Opt-Drag - Select text using the crosshairs instead of a text tool

17th - Illustrator
Cmd-F - Paste an object in the exact same place
Cmd-U - Toggle Smart Guides on and off
Cmd-7 - Make a clipping mask using the top object

18th - CSSEdit
Cmd-/ - Comment out (This works in lots of editors)
Cmd-[ and ] - Shift a block of code left or right

19th - OS X
F9 - Quickly view all open windows
Ctrl-Cmd-Shft-4 - Grab a piece of the screen, load it into your clipboard
Ctrl-Opt-Cmd-8 really fast - Mac OS Lightswitch Rave

20th - Terminal
Tab - Complete a file or folder name
Cmd-T - New shell tab
Cmd-{ or } - Previous/next tab
Up arrow - Recall previous commands

Week 4: More Photoshop

23rd - The Brush
B - Brush tool
[ and ] - Change size of the brush
Shift + [ and ] - Change the softness of a brush
1-10 - Change the opacity of a brush

24th - Fast Fixin'
Cmd-T - Free Transform an object
Cmd-L - Levels
Cmd-U - Hue/Saturation

25th - Saving Down
Cmd-S - Save (Seriously, some people don't use this)
Cmd-Shft-S - Save As
Cmd-Opt-Shft-S - Save for Web

26th - Undo/Redo
Cmd-Z - Undo/Redo
Cmd-Opt-Z - Undo repeatedly (for jumping back 3 or 4 steps)
Cmd-Shft-Z - Redo repeatedly

27th - Image Properties
Opt-Cmd-I - Image Size
Opt-Cmd-C - Canvas Size

Week 4: Bonus Week!

30th - Browsing
Opt-Cmd-left/right - Switch Tabs (Firefox)
Opt-Cmd-[ or ] - Switch tabs (Safari
Ctrl-Tab - Next tab (Firefox and IE7)
Cmd-L - Jump to the URL bar

31st - Traversing Text
Cmd-arrow - Jump to the beginning/end of a line/text area.
Opt-arrow - Jump the next/previous word or paragraph
Shft-Cmd-arrow - Select to the beginning/end of the text
Opt-arrow - Select the next/previous word or paragraph

Download the printable calendar