Lesson 13 – Advanced Techniques: Intro to Moving Images

CIOS F255 - University of Alaska Fairbanks


In the world of design, it’s no longer enough to know how to make static graphics, as moving images are key to digital communications. Like in film, each video frame can be considered it’s own digital graphic that changes slightly from the previous frame.    Understanding a little bit about how this works in terms of combining elements on a timeline is key for learning about how to create your own video.

This week, we’ll be checking out Photoshop’s video capabilities. Although Photoshop is is not the industry standard software for creating or editing video (standards are: Adobe Premier, After Effects, Final Cut Pro – for professionals;   Adobe Rush, iMovie, and MovieMaker  – for hobbyists), there has been some interest over the years in integrating at least some video functionality in Photoshop. In the Adobe universe, if you are using software like After Effects or Adobe Premier, you may want to  create an effect that only a Photoshop filter can handle, for example. It’s easy to go back and forth between these programs, as Adobe has lately focused on streamlining the way they work together.


  1. Read/watch the tutorial Video Editing Basics –  https://helpx.adobe.com/photoshop/how-to/video-editing.html
  2. Skim  over the Adobe Video Editing Help document:  https://helpx.adobe.com/photoshop/using/video-animation-overview.html


The Timeline

The first concept that is different when working with video (in any application) is the notion of a timeline.  Timelines are necessary of course because you are demonstrating in a series of images (frames) that display over time.  Timelines are generally depicted through a horizontal bar with time measurement at the top and layers of information (which can be video, still images, animations, audio tracks) on the left.

The first thing you always want to do when working with video is to switch from the Essentials Workspace to the Motion Workspace. Do this by going to the Top Menu -> Window -> Workspace -> Motion. You will see that you now will have a ‘Timeline’ area at the bottom of the interface:

Screen Shot 2015-11-25 at 2.12.17 PM

File Size

Video file size can rapidly become huge, so make sure you are keeping this in mind as you look for movies to download this week. File size is based on video length and resolution. HD (High Definition) video files are much larger than standard definition.


We will be uploading  our videos to YouTube this week. You can use your UA Google account ID and password for doing this. When you go to Youtube.com, just log in using ‘yourUAID@alaska.edu’ and upload your video via the ‘Upload’ link. Copy the web address of your YouTube video once it’s uploaded and paste it into your blog post.

A Note on Editing Audio

You can edit the audio on video clips but access to the audio editing interface  depends on how you import your video clip.   If you use File->Open a video, it will open in your timeline with a blue colored layer in the timeline — this layer has the audio edit controls on the dropdown menu or when you right-click. If you drag/drop the video clip from your desktop into the timeline, it will create a purple colored layer in the timeline because it is linked to the original file. Even if you convert that linked file into a smart object, you still don’t get the audio controls.   So, use Open rather than drag/drop and you can edit the audio features.

Of course you can also import a separate mp3 audio layer if you want to have background sound.


Edit Video in Photoshop – Basics

Screen Shot 2015-11-25 at 1.59.42 PM

More Basics of Editing Video



Assignment 13a

Objective – Combine one or two  short video clips along with  a static image you have fixed up in Photoshop and use  transitions on the video timeline to create  a short video that is less than 3  minutes long.  The point of this exercise is not to create an amazing video, but rather, to play with the interface and learn a few things about how video works.

First, create a new document with the size 640px by 360px, 72dpi (which is 12:9 ratio, which is standard now for YouTube and HD)

Find some video to use  – your own or look on these sites (or others) for free video clips. You may need to trim these once they are on the timeline.

  1. Video in Public Domain:  https://archive.org/details/movies
  2. Free video clips:  https://www.freemediabank.com/

Find a static image to use from one of the sources we’ve used in the past, feel free to use your own.

Save your video

Upload your finished video to Youtube.  You can use your UA Google account ID and password for doing this. When you go to Youtube.com, just log in using ‘yourUAID@alaska.edu’ and upload your video via the ‘Upload’ link. Copy the web address of your YouTube video once it’s uploaded and paste it into your blog post (it can be either ‘public’ or ‘unlisted’).

Create a post on our site titled ‘Assignment 13-yourname’ and paste the web address of your video in it. Include any notes or questions you had during the creation of your video.

If you run into trouble during this exercise, please contact me – jlmoss+cios255@alaska.edu or 907-455-2081.

ALTERNATIVE Assignment –
create an Animated GIF with Photoshop

Alternately, you can create an animated GIF. I’d like you to use Photoshop for this so take a few screenshots of your process and post them along with the final. Follow the tutorial here from Adobe  to create an animated GIF from a short video or series of images. Or you can follow my tutorial below for creating a simple drawing that animates:



Comments on each other’s posts is encouraged.