(Above: Pete’s shirt button– I think one day I’m going to make an interface where this is a button you must press. Where it goes, I cannot yet say.)

Tim showed the class how to do stuff in Photoshop to make our interfaces more professional, but truly this stuff comes with years of practice and exploration.

Using Photoshop: How to make a depressed icon

Step one: bring in vector icon from illustrator.

Step two: make white.

Step three: outer glow, make a dark one.

Step four: set glow to normal or multiply.

Step five inner shadow

Step six one-two pixels.

How to make a button bar:

Create vector bar at the bottom of canvas.

2. Create subtle gradient (not black to white but black to grey.)

3. Use line tool- dark line then duplicate it and shift over a pixel to create an indent

4. Make one of the lines white and then change the opacity to 60%

5. Group layers so you can move and duplicate them with ease!

6. Use alignment tools to get organized!

How to Depress

Now that you have your button, what’ a depressed button look like?

1. Rounded rectangle (6 pixel radius)

And make sure snap to pixels is on to prevent anti-aliasing. (Don’t let your vector straddle pixels that=blurry)

2. Apply reverse gradient.

3. If desired add a really strong and crisp highlight (sharper divisions mean shiner button

4. Add 1 pixel stroke inside box—dark but not black

5. Inner shadow.

The key to all this stuff is subtlety. They probably used Photoshop to design Photoshop. Be your own pixel surgeon. Zoom in on a screen grab and see what the pixels are doing. You can make any effect that you can see.