Unit 5

Creative Use of Layers

New PSD files created according to specifications:
- File size: This will vary according to your design. As a reference point, most
  buttons are sized within the 225x125 range.
- RGB
- All layers labeled
- 72dpi
Create a navigation button for up state. Demonstrate use of text, bevel, emboss
as minimum attributes.
Create a navigation button for down state. Demonstrate use of text, bevel,
emboss as minimum attributes.

The nature of the assignment and what the rubric was asking for in terms of deliverables was a little difficult to translate into a working project, but hopefully my interpretation was correct. Part of the confusion about the assignment was exactly how many buttons were supposed to be created and at what point they are supposed to change. One part of the assignment says that there is an up state and a down state and that only two buttons are needed, but the actual grading rubric claims that the button should change at mouseover, which is a far different thing than a down state. To be sure that my bases were covered, I've rendered three buttons for each contingency.

In the reading for this week, I found a fantastic tutorial on how to make those really interesting looking icons for the Apple universe- the ones that resemble brushed aluminium:
[ Photo Guides- Photoshopping iCloud Style Aluminium Icons ].

The same website has a really nice tutorial about how to create the fantastic and iconic Obama Hope posters from the 2008 election (using layers!):
[ Photo Guides: Photoshopping Obama 'Hope' Posters ].

For this project, the brushed aluminium icon tutorial was the basis for my button backgrounds. Green was used to match this website and the font is "Serrific Grunge", same as the font used in Unit 4's banner. I then used a bevel and emboss effect and simply interchanged between bevel for the up state and emboss for the down state. This makes for a lovely button motion, I think. The link doesn't actually exist, and it's just a demonstration of what a button created in Photoshop, using layers, can be made to look like. To make the functionality work on the button, I had to use 'onmouseout', 'onmouseover', 'onmouseup' and 'onmousedown'. Thankfully, Dreamweaver inserts a tidy bit of code which pre-writes almost everything for you. The designer only need expand this pre-fab code to include the down state and the up state. This was a fun assignment and I enjoyed using grouped layers in this way.