TC 310 Day 5

1
TC 310 Day 5

• Housekeeping Grading, Class Structure
• Part 1 Debrief from PowerPoint Assignment
• Part 2 Moving on to Graphics
• Discussion of Assignment
• Photoshop Tutorial 1

2
Class Debriefing Asgn 2

• Group Formation
• Form a group with all other students who designed
  for the same audience.
• Group Activity
• Discuss the solutions of each group member
• Select two solutions to share with the class
• Reminder
• The discussion is an opportunity to a) See other
  potential solutions, b) Learn technology tricks,
  c) Hear about design strategies, d) Gain feedback
  from peers, e) Identify features of quality
  solutions, f) Get to know your colleagues.

3
Foreshadowing Next Asgn

• What is a storyboard?
• A series of images suggesting/illustrating how an
  interactive experience will transpire.
• Where are storyboards used?
• Marketing
• Interface design

4
Assignment 3 - Graphics

• Each student
• Creates a two page storyboard, showing how a
  profile feature could be added to the
  organizations website.
• Within teams
• Storyboards share text
• Storyboards differ dramatically in other respects

5
Graphics and Photoshop

• Tutorial 2 (Thursday)
• More thorough overview of Photoshop
• Discussion of graphics concepts
• Additional resources

6
Tutorial 1

• Assignment-specific use of Photoshop
• Explore the following in Adobe Photoshop
• Interface
• Layers
• Selecting / Copying / Cutting / Moving Items
• Creating Text
• These activities have the following goals
• Provide you with ideas for next assignment
• Raise your awareness of possibilities
• Engender questions that will promote broader,
  deeper, and richer learning
• Increase your effectiveness with using the help
  system

7
Tutorial 1 A Challenge

• The university has asked you to help them
  visualize the impact of a couple of change to
  their website (a) modifications to the
  background for all pages and (b) adding a label
  to the utility links area. One way to explore
  changes to a website is by copying website images
  into Photoshop and then using Photoshop
  selection, layers, text, and graphic features to
  implement the changes. In this exercise, we will
  use Photoshop to create a storyboard illustrating
  such a modified site.

8
Tutorial 1 Explore End Product

• Open the photoshop file UW-Storyboard.psd
• Explore the file
• Quick orientation to Layers
• Experiment with turning the layers off and on
• Discuss
• How does this file constitute a storyboard?
• Why is it useful to have the utility links and
  background on separate layers?

9
Tutorial 1 - Demo

• Getting started
• One layer per page
• Background layer modifications
• Utility link modifications
• Exploring final storyboard

10
Tutorial 1 Your turn

• Create the revised UW storyboard
• Use Photoshop
• Follow the tutorial instructions
• Suggestions
• Work with a partner
• Explore
• Help others
• Identify questions