Graphic Design for Engineers

I have always wanted to pick up some basic image editing skills to pretty up my apps, but never managed to stare at the Photoshop interface long enough to achieve anything. I talked to a few of my engineer friends, and they have the same problem, so I decided to organize a workshop. After asking around for a while I convinced my friend Tara to teach the workshop, and announced it to the CodeChix community. Terri saw the announcement and volunteered to teach as well. Super!

Last night was the workshop. Color generously provided the space for the event, which was awesome.

Rupa and Crystie did an introduction on CodeChix, and handed it off to Tara and Terri.

Rupa

Crystie

Tara and Terri prepared a cheatsheet for us with a bonanza of information. We first went over the basic controls, which was very helpful. For instance, I could not find the fill bucket to change the color of my selection. Guess what, it's hiding under the gradient button!

Tara

Terri then taught us something super powerful: Custom Shape Tool. Photoshop has a library of vector graphics, so if you need a cat in your app, head right over to the Animals section and voilà, you have a cat. With that, Terri went on to teach us how to make a button:

1. Select the Rounded Rectangle Tool. Click, hold down the shift button, drag to make a square.
2. Select the Custom Shape Tool. Choose a shape. Click in the middle of the button, hold down the shift and alt buttons, drag to center the shape in the button.
3. To change the color, click on the color patch on the layer with the shape. If you want to choose a color from a selection, use Window → Swatches.
4. To change the size of the shape, press command-T. Holding the shift key, drag one of the corners. The shift key make sure that the shape maintains a fixed ratio. Otherwise you may get a very fat cat.
5. To make it look like a button, double click on the layer for the button background. Check "Bevel and Emboss" to enable it. Select the item (the background will be highlighted) to change the parameters.

We also went over some other tricks like constraining one shape to be within another, using Kuler to come up with a color scheme etc. Finally, we all used our newly-acquired skills to make a mock up for a mobile app.

Tara and Terri did a really good job in teaching us just the basics so we don't get overwhelmed, but also show us the tricks of the trade so we can put them to use right away. I walk away feeling very empowered. Thank you so much!