Ben Bleikamp

My Photoshop workflow for the web

A completely ridiculous way to use Photoshop to prototype things more quickly.

At GitHub I use Photoshop every day to play with design ideas. It’s the fastest way [for me] to move boxes around and lets me try a lot of ideas in a short period of time. It’s also the worst way to replicate buttons, tables, or other repeating patterns that designers use everywhere on the web.

I hate doing tedious work. Like recreating a button that we use on GitHub using Photoshop’s layer styles. No thanks.

Instead, I use the web inspector and the GitHub’s Styleguide to grab things like buttons or navigation elements really quickly. That way I get to spend my time thinking about important things.

I tried about ten times to explain the process concisely. Then I remembered it’s 2012 and we have incredible technology. Like screencasting:

ProTip™ You can use the Power of CSS3 to do this with iOS, Android, and native UI elements, too.

The music in the video is by Dauwd.