Animated Portrait Assignment

Program: Adobe Illustrator, Adobe Photoshop

Discipline: Compositing, Animation, Self-Marketing

Course: TGJ4M

Background

In this assignment, you will create a straightforward animated self-portrait, which will serve as a means to showcase your identity as a designer. This focused portrait can be included in your portfolio and shared with potential employers or used for program applications (example shown below). The animated portraits should be kept subtle and simple, so they don't overshadow the rest of your portfolio, but still catch your viewers attention when they arrive. A touch of motion can capture your audience's attention and demonstrate your talents, overall aesthetic, and technical skills. You may also want to borrow some skills from Illustrator to create custom vector graphics for use in your animation.

To achieve this, you can utilize Photoshop's basic method of animating frames, generating .gif (Graphic Interchange Format) files that loop their animation when displayed on a webpage. Your work can also be exported in video formats such as .webm and .mp4.

An exemplar created by Mr. Mills

Getting Started

Decide what motifs and symbols you’d like to include in this portrait. Consider what symbols, colours, and imagery best define your identify as a designer. Find or take a photo (you may use the classroom DSLR) of you, or something that represents you. Anthropomorphic (human-shaped) subjects make for the best portraits, as they give your audience a better sense of you as a person, rather than an abstraction.

Option #1

Create timeline animations

Timeline animations are a new addition to Photoshop, and mimic how more modern animation software (like Adobe Animate and Premiere Pro) utilize keyframes to produce movement. The result is a much more fluid and smooth animation.

In Photoshop, set up a new document with a square aspect ratio, and at least 500px wide. When you’ve loaded into your new document, change the workspace to include the Timeline panel, which is how you will animate keyframes. Select “Create Video Timeline” in this new panel.

You can animate different layer properties, such as Position, Opacity, and Style. Each change can occur independently of, or simultaneously with, other changes. Here are some examples of how you can animate layer properties:

You can animate position by adding a keyframe to the Position property, then moving the current time indicator and dragging the layer in the document window.
You can animate a layer’s opacity by adding a keyframe to the Opacity property, then moving the current time indicator and changing the layer’s opacity in the Layers panel.
You can animate 3D properties, such as object and camera position.

Full Tutorial

Vector Animation Tutorial

Option #2

Create frame animations

The legacy (old) way to create animations is still supported in Photoshop, because it is sometimes the better option to use for certain styles of animations. Frames are individually animated and timed using a timeline. Tweens and smooth motion are possible, but it's advised that you use a timeline animation for this effect instead. Frame animation is best for choppy, pixelated, stocatic or low fidelity animations.

Import your images as Smart Objects (Right click on a selected Layer > Convert to Smart Object). In the Timeline panel, you'll see one frame representing your current image. Click on the duplicate frame icon (a small page with a folded corner) at the bottom to create a duplicate frame. With the new frame selected, make slight changes to your self-portrait. This could include moving an arm, blinking eyes, or changing facial expressions. Use the available tools like the Move tool, Brush tool, or Eraser tool to make these adjustments. Select each frame and adjust the frame delay time (the duration each frame will be displayed) by specifying the time in the bottom of each frame box. This controls the speed of your animation.

Once you are happy with your animation, go to "File" > "Export" > "Save for Web (Legacy)." In the dialog box that appears, choose "GIF" from the preset options. Adjust settings like looping options and colors as needed, and then click "Save." You can also export your animation as a .webm or .mp4 using the Render function.

When submitting your project, include a short designers statement that comments on the motifs and symbols you’ve included. Explain the reason for including (or not including) each component of your portrait. Review previous assignments to incorporate appropriate course vocabulary. This statement can also be shared with your teacher in the form of a verbal conversation.

Advanced Techniques

Note: these techniques are not specific animation techniques, but can be applied to the tutorials above once you've figured out a simple effect to recreate.

Success Criteria

Identity

Portrait accurately communicates the subject's personality, brand identity, and/or personal style using symbolism, graphical motifs and thoughtful design.

Composition

Portrait applies the principles of balance, proportion, contrast and flow to create a well-rounded piece that isn't overly complicated or too minimal.

Designer's Statement

A supplementary statement (approx. 250 words) describes the use of each element as it relates to expressing the author's identity as a designer. Statement describes how this would be useful on their portfolio.

Technique

Portrait demonstrates technical proficiency in the basics (smart objects, keyframes, use of layers, etc.) and a learned technique through explored web resources (some examples: parallax, tweening, 3D, cinemagraph, vector)

File Submission

The final export must be an animated or video file format, either a .gif, .webm or .mp4. Please upload to the virtual classroom space before the indicated deadline.The submission includes three files (.psd, the format of your choice from above and the required designer's statement in a written text document) and all files are named appropriately according to the following naming convention: First Name - Portrait

Exemplars

Page updated

Report abuse