#protip: Slice & Dice Photoshop Shortcuts

A lot of what a front end developer does consists of slicing and dicing.  There are a couple of preferred methods, one being to use the built in Slice tool in Photoshop.  For whatever reason though, I feel like Spielberg using iMovie when I try to use Slices.

My setup consists of 3 actions.  Crop, Save for Web and Transform Selection.  So I’ve set these up as keyboard shortcuts in Photoshop.

I prefer to use the F1, F2, and F3 keys for my shortcuts.  (I should note that doing so on the new Apple keyboards means you have to disable the predefined Apple actions for the Function keys.  Unfortunately I still like to use some of them, and so I’ve setup a great app called Spark that allows me to customize the entire Function key lineup.)

So my workflow is as follows:

Using the Selection tool, select an area I want to slice up.

(If I need to fine tune the selection, hit F3 to transform the selection)

Once I’m set, I hit F1 to crop the selection, then I hit F2 to Save for Web.  That’s it.  You wouldn’t imagine how much time this has saved me over the years.