• selection (review using figure and background exercise)
• filters and adjustment layers (review)
• manipulating text / banner
• working with gradients and buttons
• creating page layout with photoshop
• explorations in design
• Photoshop Homework

1. Browse the web to find a picture with distinct figure and background to experiment with.
2. In class, we'll experiment with a variety of selection options such as:
• Magic wand & quick selection
• Select by color
• Invert a selection
• Grow, similar
• Adding and subtracting to a selection (shift = add / alt = subtract)
• Edit with mask

1. Browse the web to find a textured background to experiment with.
• Experiment with at least three different filters.
• Start over with a plain color. Experiment with creating texture.
• OPTIONAL: Explore Smashing Magazine article on Creating Custom Textures in Photoshop.

1. In-class exercise will illustrate how to create a banner.
2. BannerFans- Create a Banner (use JING or Snipping Tool to capture without creating account.)

1. In class exercise will illustrate how to use gradient.
2. We will also look at creating buttons.
3. And look at button builders on the web.
• Button Maker - Imagefu
• dabuttonfactory.com
• HTML/CSS button builder (no image)
• How to Make Buttons in Photoshop (youtube)

The following resources have been identified in previous explorations. Explore at least one and report to the class. Or find others we should add to the list, here.

1. Google Design
2. Website Layout in Photoshop Tutorials
3. A photoshop web design in 5 minutes (youtube)
4. The big web design trends of 2015

1. Start with a blank page large enough to represent a web page.
2. Layout a sample web page using layers.
3. Use Lorem Ipsum for any text required.
4. Include banner, content area, navigation and footer areas.
5. Recommend using separate layer for each element on the page.
6. OPTIONAL: Explore gomockingbird.com web page layout online tool.
7. OPTIONAL: Check out mockflow.com (note: requires login)
8. OPTIONAL: Youtube video on generating code from PSD file. Brackets: From Design Comp to Code.
9. OPTIONAL: Getting Started with a Code Editor: Brackets on youtube.com

Your homework for next week is to mock up the homepage for a website in Photoshop.

Place each of the items below on a separate layer. (Use two layers per item if you wish, but at least one layer per item below.

1. A featured image extracted from one background and placed on another one.
2. A banner with text.
3. Background layer created using filters on a solid color or repeated pattern.
4. A menu made of between four and six buttons.
5. Content organized using guides to align content accurately. (You may use Lorem Ipsum for the text.)

Upload two versions of your work to a folder named PSHW (for Photoshop Homework):

1. The PSD file with separate layers (800 x 600 pixels).
2. A "save for the web" version optimized for the smallest file size that is still attractive. (800 x 600 pixels)

Exercise is due before the start of the week three class.

Submit your work by sending an email to the instructor at the BCIT email address using "PS Homework" as the subject and sending the URL for your PSHW folder.