Program: Adobe Illustrator, Adobe Photoshop
Discipline: Compositing, Animation, Self-Marketing
Course: TGJ4M
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.
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.
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.
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.
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 Frame Animation” in this new panel.
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.
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.