Photoshop UI Elements Workshop

Photoshop UI Elements Workshop 3/1

This week, Grace Kwan (2014) gave a great workshop on Photoshop UI elements, mostly centered around creating knobs, dials, and progress bars. As a CS major, she started out by talking about UI elements on the web, and recommended looking at uiparade.com as a source of inspiration for the types of things Photoshop and other design software can create. For the rest of the workshop, we worked through on creating a knob and a progress bar, two important pieces of UI found in many applications. While we were working on the knob, Grace pointed out that one of the differences between Photoshop and Illustrator was that the resolution in Photoshop is more important Photoshop operates on pixels, while Illustrator is vectorized and can thus maintain resolution while resizing. She also talked about layers as a way to separate the different parts of a picture and introduced the ruler tool as a way to create helpful guidelines. As we dove into coloring our knobs with gray radial gradients to mimic the stainless steel quality of an actual knob, Grace also introduced us to the bevel and emboss tool, and in particular the “chisel hard” setting, as a way to give dimension to an element and make it pop out from the screen. We went over glow tools (inner and outer glow), and even used the pen tool to help create a clipping mask that we later rasterized. After working on the knob for a bit, we moved on to creating a progress bar. Here, Grace showed us some tricks on using color overlay and the dropper tool to maintain the same shade of a color throughout a picture. We also had some fun with our progress bars by making their insides patterned, courtesy of stripegenerator.com :) All in all, thanks Grace for wrapping up our design workshops this quarter!

 

Be sure to keep an eye out for our spring quarter workshops! As always, If you’re interested in Stanford Design Initiative’s workshop – follow us ourĀ designkids mailing list or on Facebook.