Week 5 – Layers

Overview

This week we are going to focus on the concept of Layers in Photoshop. So far, we have been working mostly with Adjustment Layers which are special filter layers which help add an effect or modify the image without committing it to the actual background image layer. Now we are going to address the concept of layers specifically and how to control them including creating layers, deleting layers, and re-ordering layers.  

Videos to Watch at Lynda.com

  • Photoshop CS5 for Photographers, with Chris Orwig
    Chapter 8. Layers
    Chapter 9. Selections

Videos at YouTube.com/DansCourses

Week 5 Assignment 1: Create an Image with Multiple Layers and Layer Effects Including Layer Styles, Opacity, and Blend Modes

Follow my video tutorials (see links above) that walk you through the process of working with a multi-layered image with text, layer styles, layer opacity, and layer blend modes (see my example image below) and the main steps that you will be covering.

Turning it in:
Due Date: End of Week 6

Your finished photoshopped image will need the following elements:

  1. a floating second image that was lasso’d, copy and pasted, on a secondary layer above the background image layer
  2. the floating second image (person, animal or object) should be erased neatly around the edges of its form/shape
  3. a descriptive text layer (with layer style: outer glow, drop shadow, etc.)
  4. a transparent color layer (transparency created using layer opacity)
  5. the floating second image should be altered with a Layer Blend Mode (example: overlay blend mode)
  6. an image border (created by erasing to transparency or with a blend mode and creative brush effect)
  7. Save your file as a Photoshop .psd file so you can save your layers and also do a file “Save As” and save a JPG version that you will post to your online Web Album. Post a link to your finished creation in Blackboard.
This image shows the final project with layer descriptions and the layer settings areas.
This image shows your starting background layer
This image shows the second copy/pasted image floating above the background image. Notice the layer’s blend mode has been set to “Overlay.”

Extra Credit!

Do you want extra credit on your week 5 assignment? If so…

Create a perspective shadow underneath your floated object. An example of this would be creating a shadow of the legs and body underneath the Buffalo above. Click here to watch my tutorial on how to do this.

Week 5 – Keyframe Animation

{loadposition adposition4}

Overview

Flash is primarily an animation tool, so it is important to know how to animate your graphical objects and text. Flash offers a number of ways to animate an object and make it fly across the stage. You can manually control the animation by Keyframing and inserting all the keyframes and frames yourself, or you can have Flash help you animate, by first setting the keyframes and then having flash handle all of the in-between frames. This is called Motion Tweening or Classic Tweening. {loadposition adposition5}There are tons of visual characteristics that you can animate, you can make an object fade in or out, speed up or slow down, follow a curve, or rotate and spin. You can also move objects in 3d space, blend colors, and morph shapes. Even though Flash offers amazing new tools to animate with, good animation still requires precise timing, control, and pause.

Flash Animation Methods

  1. Keyframing – frame-by-frame animation, edit each keyframe one by one
  2. Classic Tween – Flash executed frame motion, spanning between two keyframes, involving symbols, and grouped objects
  3. Motion Tween –  Flash executed frame motion, spanning between two keyframes, also includes a motion path
  4. Shape Tween – Flash executed frame motion, spanning between two keyframes, involving shapes
  5. Scripted motion – Flash executed motion, defined by actionscript programming

 

Lynda.com Tutorials

  •  Flash Professional CS5 Essential Training

    The following tutorials will help you learn how to animate objects sprites and images with Flash
    Chapter 8 Creating Frame-by-Frame Animations
    Chapter 9 Creating Shape Tweens
    Chapter 10 Working with Motion Tweens and the Motion Editor

{loadposition adposition9}

Week 5 Assignment – Creating Keyframing Animations

Use the following examples and video tutorials to create animations by creating and editing multiple keyframes on the Flash timeline.

Timeline
Due date: End of Week 6
The project is complete once you have sent me your .fla Flash editing files and .swf published flash movie files (please try and save your .fla file in the CS5 or older format)

Project 1: Keyframing a Cartoon Bomb

In this assignment you will use the timeline, keyframes, and Flash’s built-in vector drawing tools to create an animated cartoon bomb sequence. How will you do it? You will draw a cartoon bomb with a long fuse. Light the fuse with your vector paintbrush, and using keyframes have the fuse slowly expire until it goes off. What happens in the end? Add your own creative ending: flying text: "The end"? A cloud of smoke? A cartoon KA-BOOM? Confetti? A cartoon character appearing? It is whatever you can dream up, and it does not have to make sense.

Project 2: Keyframing a Bouncing Ball

A bouncing ball is a seemingly easy beginning animation project, yet it takes a lot of observation and skill to do it right! Using Keyframing, make a ball fall to the ground, bounce at least twice, and then roll and come to a stop. At the end of the roll make something fantastic happen. It is your choice for an ending. Some ideas for an ending might be: roll some credits, animate a "The End", make the ball morph into something else, it is up to your imagination.

 

{loadposition adposition8}

 

 

{loadposition adposition10}

 

Mystery Hunt & Click Game – Actionscript 2.0

{loadposition adposition4}

Flash Mystery Hunt & Click Game

This type of Flash web game involves players having to navigate their way through a story, usually scene by scene, by hunting and clicking with the mouse, trying to uncover hidden clues. To create this type of game you first need a narrative structure or plot for your game and then most of the game development will involve creating graphics, animations, and sound effects. {loadposition adposition5}The scripting for the game will mostly involve creating interactivity through hidden buttons, drag and drop, and conditional logic that tracks which objects and clues were found. Additional game challenges can be added by scripting interactivity that involves solving riddles, puzzles, and evaluating clues to unlock additional game areas. 

In the tutorials below, I use Flash to show how to create simple narrative timeline based interactivity. This includes invisible buttons, event functions, jumping and starting and stopping the timeline playhead, creating simple movieclip animations, and creating game variables to track game states.

 

Video Tutorials

In this video, I show how to create an invisible button which activates a zoom-in and fade-to-black scene transition

 

The video tutorials below were done with an older version of Flash but can be easily modified to work with CS6. The

 

Week 4 – Traditional Photographic Techniques

Overview

This week you will learn how Photoshop can be used to simulate creative photographic techniques that were traditionally done in the darkroom. 1) How Photoshop can simulate the use of photo filters on a lens; 2) How to create a sepia toned digital image and you don’t have to use super toxic toning chemicals; and 3) How to mask a portion of an image or paint in the color.

Week 4 Assignment 1: Improve a Landscape with Warming Photo Filters

Using one of your own digital landscape photographs, follow along with Chris Orwig and customize a landscape photograph with warming photo filters. For this assignment you will need to watch the following Lynda.com video tutorials:

Photoshop CS3 Creative Photographic Techniques, with Chris Orwig
Chapter 2. Creative Color
2.4 Warming photo filters

Turning it in:
Due date: End of week4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Week 4 Assignment 2: Create a Sepia Toned Photograph

With a separate digital photograph that you have shot yourself, follow along with Chris and create a digitally sepia toned photograph. For this assignment you will need to watch the following Lynda.com video tutorials:

Photoshop CS3 Creative Photographic Techniques, with Chris Orwig
Chapter 2. Creative Color
2.6 Sepia tone

In the video tutorial Chris starts with a black & white photograph, so I recommend that you do the same. To turn your photograph into a black and white image, open the image in Photoshop, from the pull down menu go to Image > Adjustments > Desaturate. Note: this technique is not an Adjustment Layer, this is a permanent change to the starting image, so to safeguard your original image, first do a File > Save As and save the image with an alternate file name. You should now have a black and white grayscale image, and you are now ready to follow along with Chris and create a sepia toned image.

Turning it in:
Due date: End of week 4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Week 4 Assignment 3: Create a Partially Colored Black and White Photograph Using Layer Masks

For this assignment, I want you to create an image, that you will manipulate in Photoshop, where only the subject of the image is in color. Think of a wedding portrait where everything is black and white except for the bride and groom, or a flower where only the petals and the stem are in color. Your photograph should have a discernible subject, which you will keep in color, the rest will be black and white.

Watch my tutorial video on how to use a Layer Masks in conjunction with an Adjustment Layer here: How to Paint Color Back to a B&W image with Layer Masks

Turning it in:
Due date: End of Week 4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Older Examples  

These Photoshop tutorials are older, but they are still worth watching:

Week 4

{loadposition adposition}

Overview

This week we are going to cover the benefits of nested movieclips and timelines in creating animated characters and objects in Flash.

Week 4 Assignment 1 – Animate a Character with Blinking Eyes in Flash

I have step by step video tutorials, you can see them here: Animate a Character with Blinking Eyes in Flash 

Turning it in:
Due Date: End of Week 6

The assignment is finished when you have sent me your finished Flash file as an email attachment.


Week 4 Assignment 2 – Create an Animated Glowing Lantern in Flash

I have step by step video tutorials, you can see them here: Create a Glowing Lantern in Flash

Turning it in:
Due Date: End of Week 6

The assignment is finished when you have sent me your finished Flash file as an email attachment.


Basic Switch Configuration and Port Security

Switch Security Overview

In the video tutorials below, I show how to use Packet Tracer to build a small LAN with a Cisco 2960 Switch, three PC clients, and two PC servers, one of the servers is placed on a separate VLAN for management purposes. Excellent review and study for the Cisco CCNA exam. The networking tasks that are accomplished in the videos are:

• Changing the management VLAN on the switch,
• Configuring the switch with an IP address,
• Configuring the switchports as access ports and assigning them to VLANs,
• Remotely connecting to the switch with telnet,
• Configuring passwords for console and virtual terminal ports,
• Configure privileged user mode with an md5 encrypted password,
• Configuring the hostname on the switch,
• Testing LAN connections with the Ping utility,
• Backing up the switch configuration file and IOS image file to a TFTP server using the copy command,
• Using the show mac-address-table command,
• Configuring switchport port-security and sticky mac address

Video Tutorials

Create a Flash Mr. Potato Head – Actionscript 2.0

{loadposition adposition4}

{loadposition adposition5}Overview

This tutorial will continue to introduce you to the basics of creating interactive Flash animations. The basic Flash scripting tools that you will learn, are the building blocks for future scripted Flash game development.

Mr. Potato Head is a popular child’s toy because of its interchangeable or interactive body parts. In this project, you will create a potato head movieclip, with separate movieclips for the body, eyes, nose, mouth, hat and shoes. You will also create Flash button symbols, that when pressed, will switch between multiple hats, noses, eyes and mouths.

I have created video tutorials that demonstrate how to execute this project. Watch the videos and create the project.

Video Tutorials 

• Potato Head 1

• Potato Head 2

• Potato Head 3

• Potato Head 4

• Potato Head 5

• Potato Head 6

• Potato Head 7