Join Richard Harrington for an in-depth discussion in this video Combining After Effects and Photoshop to create a GIF file, part of Pictures that Move: Creating Cinemagraphs with Photoshop, After Effects, Flixel, and Cliplets.
- View Offline
- Exercise Files
- Once you have an image sequence…or a movie from After Effects,…you can bring that into Photoshop to generate the gif.…In Photoshop, remember,…opening a movie is pretty straightforward, File, Open.…You can now navigate to your Exports folder and simply grab…one of the high-quality movies that you made.…Now keep in mind, this is a 4K video file.…So if you want to target web output,…feel free to select the Crop tool,…and then enter a width and height resolution.…
For example, maybe I want to turn this into a banner.…Let's do 1200 pixels by 500 pixels,…and now as I crop,…you'll notice that it constrains the aspect ratio.…This is a size banner that might work…on many WordPress designs.…When I click Return, it's gonna tell me…that it's gonna make this video layer…a smart object, which is fine.…I'll let it convert, but now it's at the correct size.…Don't worry if it looks tiny.…You can always choose View, Fit on Screen.…
Now, File, Save for Web.…This will hand the file off in the Save for Web dialogue.…It may take a moment to load if it's high-res.…
- Planning a cinemagraph shot
- Shooting video and time lapses for cinemagraphs
- Combining stills
- Developing a cinemagraph
- Loading image sequences and video
- Creating and refining masks
- Correcting color
- Saving and optimizing GIF images and video
Skill Level Advanced
Design the Web: Animated Loading GIFswith Chris Converse26m 10s Beginner
Photoshop CC Essential Training (2013)with Julieanne Kost14h 58m Beginner
Photoshop Masking and Compositing: Fundamentalswith Deke McClelland11h 36m Intermediate
After Effects CC Essential Trainingwith Ian Robinson14h 52m Appropriate for all
Using the exercise files1m 20s
1. What Are Cinemagraphs?
2. Essential Shooting Techniques
3. Developing a Cinemagraph
Bandwidth considerations5m 41s
4. Creating Cinemagraphs with Photoshop
5. Creating Cinemagraphs with Flixel
6. Creating Cinemagraphs with After Effects
7. Creating Cinemagraphs with Cliplets
8. Optimizing the Images
Next steps1m 30s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.