Each of the articles referenced above share a common emphasis on a few points:

1. Clearly label each layer, remove cruft
2. Organize your layers into layer groups
3. Use layer groups to indicate different page states (home, about, etc.)
4. Include interaction layers (to show rollover states, for example)

All really good points, especially #4, but I think Layer Comps make layer organization less critical and leave layer groups in the dust as a way of navigating a file to see different page states. If you are not familiar with Layer Comps Adobe defines them as:

A handy way to save the appearance and visibility of the layers in Photoshop.

Layer Comps save a snapshot of a given layer state so that you can quickly return to it with one click. Instead of clicking layers/groups on and off repeatedly as you move between page states, you can navigate from state to state with a single click. Designers, this is extra useful because it gives you a crystal clear way of defining what each page state should look like. Developers, this becomes especially useful for rapidly switching to a different view of the PSD or to return to an original state if you’ve blinked off a bunch of random layers when slicing a particular element.

Messy, layer-driven organization:

Clean and quick, using Layer Comps:

An added side benefit of using Layer Comps is that there’s less need to meticulously organize and label layers/groups. When you’ve got a clearly labelled snapshot of each necessary page state, wrangling the layers into shape is just one click away. Another potential time-saver for designers is the ability to batch export all layer comps to files (File → Scripts → Layer Comps to Files). Rapidly create PDFs of every web page for review by your client!

And finally, related to point #4 above, Layer Comps make it really easy to blink on and off interaction layers. For example, instead of clicking several layers or groups on and off just to see a particular hover state you’d only need to click between two layer comps. It sounds like a small difference but it actually is faster and far less tedious.

Creating a Layer Comp is dead simple:

1. Get your layers/groups in a state that you want to save
2. Make sure the Layer Comps panel is visible (Window → Layer Comps)
3. Click to create a new Layer Comp and give it a name
4. Repeat steps 2-3 as needed to flesh out the various page states

Layer Comp Panel

Create New Layer Comp

If you’re referencing the linked file in a server-side include (like a head.php include, for example) this technique allows you to make one small edit and avoid renaming any files.

Just place a query string at the end of the link. Put anything you want in the string, but some suggestions would be a timestamp or a version number:

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

Then when you update the CSS file and want to make sure a visitor’s browser pulls down the latest changes just manually increment the querystring and you’re all set. In this example v1.0 changes to v1.1.

<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />

But first…there are several add-ons that are part of my ExpressionEngine base install, and there are two that I include for purely cosmetic reasons:

• NSM Morphine Theme
• Anti-Pink

Highly recommended!

But there were still some things irking me, so I decided to use Jacob Russel’s example of Anti-Pink and make some further CSS tweaks using an accessory (a cool new feature in EE2, they are easy to create). While there are loads of details I’d like to alter, the immediate need was for the following:

1. Clearer text inside of input and textarea fields in the control panel.
2. Appropriate value for the cursor property on clickable or draggable elements.
3. Restore the drag-handles on custom fields when using publish layouts (NSM Morphine removes them).

Number 1 was accomplished by darkening the text (it was too low-contrast!) and going with a monospace font which makes thing easier to read (important when typing settings or system names). I left the publish form input font as-is (Arial). Number 2 I’m a bit of a stickler for. If something is clickable the cursor should change when you hover it! Number 3 took a bit for me to realize, and even though you can still re-order custom fields without the visual cue of a drag-handle, I like having them back in.

If you want a quick, simple enhancement for the control panel, try out my Usability accessory for ExpressionEngine 2. You might find that it is a quick way to start adding your own tweaks to the control panel.

Before:

After:

Download the accessory here.

1Password

So well designed. So useful. 1Password is more than just a time-saver. All your passwords in sync across all your browsers and computers. Huge ammounts of effortless automation for many aspects of login credentials and login forms.

SizeUp

SizeUp provides really snappy window resizing and movement. Great for getting two windows side by side or for quickly resizing a window to predefined dimensions (or sending it to another monitor!). When I am without it I feel like my hands are tied.

Jumpcut

Jumpcut is a minimalistic clipboard buffer. It keeps a history of all the items copied or cut to the clipboard, allowing you quick visual access via a customizable keyboard shortcut. Indispensable. UPDATE: I now us Alfred (below) for this.

Alfred

Application launching, quick web searching, and a fast calculator are the parts of Alfred that I use most often. It has replaced Quicksilver in my book. The addition of a clipboard history has made this app even more indispensable.

TextExpander

TextExpander saves typing by providing text triggers that expand into full snippets of text. If there is something you type all the time (or don’t want to remember how to type) it is easy to create a reusable snippet.

QuickKeys

Many uses for this one. My favorite use for QuickKeys is assigning hotkeys to common applications and creating keyboard shortcuts for common action sequences involving multiple applications.

Name Mangler

Quickly batch rename files. Name Mangler detects selected files in Finder or Pathfinder and then systematically renames them with find and replace, add suffix or prefix, remove characters from end or beginning, numbering, etc.

PlainClip

Cleans up text for you. Just launch PlainClip and whatever is on your clipboard will be filtered according to your preferences.

If an action exists anywhere in the application menu it can be assigned a shortcut.

1. Just find the menu item and make a note of its exact name.
2. Go to System Preferences > Keyboard
3. Select the “Keyboard Shortcuts” tab
4. Click the “+”
5. Choose the application
6. Type the name of the menu item
7. Assign the shortcut

You’re all set!

ln -s ~/Dropbox/ApplicationName ~/Library/Application\ Support/ 

This will create a symlink to “ApplicationName” (where ApplicationName is the name of your app) in the user’s Application Support folder. Don’t forget to escape any spaces with a leading “\”. You could also accomplish the same thing via a GUI using Make Symlink.

You’ll need to do this on both machines. Once done, allow Dropbox to sync the files and you’re set. Any changes made on one machine will be synced to the other. My favorite uses are password syncing with 1Password, syncing a database of notes and snippets in Yojimbo, and keeping TextMate prefs and bundles in sync.

Here are some useful instructions for syncing those applications using Dropbox:

• 1Password
• Yojimbo
• Textmate

If you have a different application in mind, a Google search will reveal many other possibilites!

NOTE: Fluid is Mac only. Windows users check out Prism or Chrome app shortcuts

If you aren’t already using SSBs see this for an overview. One of the features that makes an SSB unique is the ability to restrict it to certain URLs. Any URL that doesn’t match the allowed pattern will be sent to your default browser. This is one of the ways Fluid acts more like a self-contained desktop application. But the reverse of this behavior, where certain links are always sent to the corresponding SSB, is (understandably) lacking and this detracts a bit from the usability.

To give an example, let’s say you create an SSB for Basecamp. It works great. But now let’s say you are reading a Basecamp notification in your email client. If you click the link, it will open the URL in your default browser. But this isn’t what you want because you’re using your Basecamp SSB for those pages! You could just drag the URL to your Basecamp SSB’s dock icon, but that is not ideal. What you really need is a way of always opening Basecamp URLs with the correct SSB. This is where Choosy, and specifically Choosy Fluid, come in to play.

Choosy allows you to set up rules about preferred browsers:

Forget the default browser, Choosy opens links in the right browser. When you click on a link Choosy will do the right thing, whether that’s something simple (like using whatever browser is already running) or something complex (like prompting you to pick a browser, but only when you hold down the shift key and click on a link to google.com).

And ChoosyFluid automatically creates the advanced Choosy rules for you based off of your Fluid SSB’s.

By installing these applications you’ll be able to route certain types of links to the preferred browser or preferred SSB automatically. Some of my favorite uses are for Basecamp and Google Docs. Click one of these links in your email client and it is automatically opened in the correct SSB.

1. Take your screenshot. ⌘⇧4 will capture a region, if you press the spacebar it will toggle to capture a chosen window instead. If you want the whole screen its ⌘⇧3. For a timed screenshot (to capture something that requires the mouse) use Grab.
2. Open the screenshot (it will be on your desktop as a .png file) with Preview.
3. Click the Annotation button in the toolbar. You can choose from circle, rectangle, arrow, and text. Add them in, resize and move as needed.In Snow Leopard go to Tools > Annotate or press ⌘⇧A

It works great and is very quick. My only beef is that the default text is huge and centered, but you can reformat it by pressing ⌘T (Tools > Show Fonts).

Keyboard shortcuts every Mac user ought to know

A few handy applications for managing windows

SizeUp allows you to very quickly size and position a window so that it exactly fills any half (or quandrant) of your screen. Quickly establish a side-by-side (or above and below) arrangement for any two windows using customizable keyobard shortcuts. You can also “snap back” to the previous window state, center it to a customizable dimension, send the application window to a different monitor, and a lot more. There is another application called Breeze which is similar, but its only advantage over SizeUp is that you can save multiple window-states per application. Or, if you want something free (and almost as good), try shiftit.

Afloat lets you force windows to always be on top, pin windows to the desktop, and adjust window transparency – again using just the keyboard. I’m still discovering new uses for these behaviors. The Snow Leopard version also has the ability to resize and move windows from anywhere in the window. It’s free!

Show Desktop is also free and can be pretty handy.

I’m not going to go into a long spiel about why, but I will highlight one of the subtler features that is one of the many little things that make it a pleasure to use: Textile

UPDATE: 37signals has added new text formatting to Basecamp since this post was written. It disables Textile by default! Fortunately you can still use Textile by clicking “switch to Textile/HTML.”

With Textile you can easily add some basic formatting with minimal effort. No HTML tags required. Some of the most easy to use and beneficial formatting includes bold, italic, lists, quoted text, headings, and links.

For example:

h2. Heading level two
 
* this 
* becomes
* a bulleted  list
 
h3. Heading level three
 
# this
# becomes 
# a numbered  list
 
You can easily make *bold text*  and _italic text_ like so.
 
bq. Quoted text is also easy.
 
Here is some "hyperlinked text":http://google.com/

Will become the following (screenshot from Basecamp):

NOTE: The “preview” button is a good way to check your formatting before you post.