Table of Contents for
Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape by Jennifer Harder Published by Apress, 2018
  1. Navigation
  2. Cover
  3. Front Matter
  4. Part I. Welcome to the Adobe Creative Cloud. Where Should You Begin?
  5. 1. Entering the Software Maze or Labyrinth
  6. Part II. Working with Photoshop to Create Web Graphics and Animations
  7. 2. Getting Started
  8. 3. Color Choices: CMYK, RGB, Grayscale, and Index
  9. 4. Saving or Exporting Your Files for the Web
  10. 5. Actions to Speed up File Conversion and Slicing Tools
  11. 6. Tools for Animation
  12. 7. Tools for Video
  13. 8. Other Miscellaneous Items in Photoshop That You Can Use for Web Design
  14. 9. Putting It into Practice with Photoshop CC
  15. Part III. Working with Illustrator to Create Web Graphics
  16. 10. Getting Started with Illustrator CC
  17. 11. Color Choices: CMYK, RGB, and Grayscale
  18. 12. Saving or Exporting Your Files for the Web
  19. 13. Actions to Speed up File Conversion and Slicing Tools
  20. 14. Tools for Animation and Video
  21. 15. Other Miscellaneous Items in Illustrator That You Can Use for Web Design
  22. 16. Putting It into Practice with Illustrator CC
  23. Part IV. Working with Animate to Create Animations, Movies, and HTML5 Canvas
  24. 17. Getting Started with Animate CC
  25. 18. Color Choices: RGB
  26. 19. Importing Your Artwork
  27. 20. Import Your Audio and Video
  28. 21. Working with the Timeline Panel
  29. 22. Exporting Your Files to the Web
  30. 23. Other Miscellaneous Items in Animate that You Can Use for Web Design
  31. 24. Putting It into Practice with Animate CC
  32. Part V. Working with Media Encoder to Create Audio and Video Files
  33. 25. Getting Started with Media Encoder
  34. 26. Working with Your RAW Video Files (AVI and MOV)
  35. 27. Working with Your RAW Video Files and Converting Them to Audio
  36. 28. Working with Your RAW Video Files and Converting Them to an Image Sequence
  37. 29. Putting It into Practice with Media Encoder CC
  38. Part VI. Working with Dreamweaver: Adding Images, Animations, and Multimedia to HTML5 Pages
  39. 30. Getting Started with Dreamweaver CC
  40. 31. Working with Images and Tags
  41. 32. Working with CSS
  42. 33. Working with Images for Mobile Web Design
  43. 34. What Is JavaScript?
  44. 35. Working with Bootstrap, Templates, Library Items, and the Assets Panel
  45. 36. Working with Video, Audio, and Animations
  46. 37. Additional Options to Apply Images in Dreamweaver
  47. 38. Final Testing, Getting Ready to Upload Your Site
  48. 39. Putting It into Practice with Dreamweaver CC
  49. Part VII. Further Dreamweaver Integration with Other Adobe Products for Websites
  50. 40. What Other Programs That Are Part of Adobe Creative Cloud Can I Use to Display My Graphics or Multimedia Online?
  51. Back Matter
© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_28

28. Working with Your RAW Video Files and Converting Them to an Image Sequence

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you look at how to extract image sequences from your video file (.avi or .mov) for your projects in the bitmap, JPEG, PNG, and GIF (static and animated) formats.

Note

This chapter does not have any actual projects; however, you can use the files in the Chapter 28 folder to practice opening and viewing for this lesson. They are at https://github.com/Apress/graphics-multimedia-web-adobe-creative-cloud .

Convert to Other Web Formats (Image Sequence)

If you are just looking to export your video as an image sequence or animated GIF, Media Encoder allows you to do this as well. You can find them in the Preset Browser panel under System Presets ➤ Image Sequence, or in the Queue panel under the Format name. Let’s look at the following options for the web. Refer to Figure 28-1.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig1_HTML.jpg
Figure 28-1

Image sequence choices in the Preset Browser panel

Remember that an image sequence can result in a lot of still images, depending on the number of frames per second the image is running. So unless you want a lot of stills, make sure to narrow or trim down your video to which images or frames (hours: minutes: seconds: frames) in the sequence you require. To work efficiently, only export a portion of your frames using the Export Settings dialog box’s setpoint triangles and playhead. Also, doing the work on an external hard drive and saving the sequence on that drive ensures that your computer does not crash. Refer to Figure 28-2.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig2_HTML.jpg
Figure 28-2

Use your Export Settings dialog box preview area to narrow down the images that you want from a video

The files are numbered, starting with 0; for example, file0.bmp, file1.bmp, and so on. Also, an XMP file that contains a log of the converted files is created.

Note

Although Media Encoder cannot export certain file format settings, such as PDFs, it can open Illustrator EPS and AI files. Likewise, if your client gives you any older FLV files that were created in an older Adobe Flash program these can be opened and converted to an MP4 (H.264) video format or an image sequence.

As with MP4, you also have access in the Export Settings dialog box with the Source and Output tabs, which allow you to crop your images group. Use the Source Scaling or Cropping options so that you can refine the new dimensions of the files in the sequence that you want to want to output. Refer to Figure 28-3 and Chapter 26 for how to crop a section of video.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig3_HTML.jpg
Figure 28-3

Export Settings dialog crop images within a video sequence

Bitmap Sequence Export settings

For the bitmap format in the Export Settings dialog box, notice that audio export is not available—only video; this is true for all image sequences. Bitmap only has one preset and its summary is like MP4. Refer to Figure 28-4.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig4_HTML.jpg
Figure 28-4

Export and Summary settings for a BMP Sequence

Effects Tab

These options are the same as the ones for MP4 files. Refer to the Effects tab in Chapter 26 for more information. Refer to Figure 28-5.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig5_HTML.jpg
Figure 28-5

Export and Summary settings for a BMP Sequence

Lumetri Look and SDR Conform are a fast way to give your images an overall color effect. You may have used this setting for other video files and want to keep the look of these images in the sequence consistent with the video if you plan to use them in the same project. Also, the Image Overlay and Name Overlay options can quickly watermark your images in the sequence.

Video Tab

In Basic Settings, you can match the source or set your own width and height for the image sequence; the Export As Sequence option ensures that a sequence of still files is written for each video frame. Refer to Figure 28-6.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig6_HTML.jpg
Figure 28-6

Video tab for Basic Settings

The settings on the right allow you to alter the frame rate, field order, and aspect ratio.

Render at Maximum depth may improve the image quality, but the rendering may be longer than expected and increase the file size.

Captions Tab

If the video contains close captions, they would be included; if not this area is left unavailable. It may also be unavailable because you are only exporting a sequence and not an actual video. Refer to Figure 28-7.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig7_HTML.jpg
Figure 28-7

Captions tab, the settings are not available

Publish Tab

As with the audio files (MP3 and WAV), your options are to publish on your hard drive, external drive, to Adobe Creative Cloud, or directly to your website via FTP. You cannot publish directly to social media sites like Facebook, Twitter, or YouTube. This is because you are publishing a sequence of images and not a video. Refer to Figure 28-8.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig8_HTML.jpg
Figure 28-8

Publish tab for Creative Cloud and FTP

Image sequences should be stored in a folder and then uploaded to a site for use in a gallery. If you plan to use them for another project they can be further edited using Photoshop or Animate for another MP4 video that will be used on your site or a social media site.

Render Time Code and Alpha Channel Settings

In the lower right of the Export Settings, you have access to the render quality, Set Start Timecode, Render Alpha Channel Only, Time Interpolation, and Metadata. Refer to Figure 28-9.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig9_HTML.jpg
Figure 28-9

Final options for setting your render and metadata

At this point, you can either click OK to confirm your changes, or click Cancel to return to the Queue panel.

JPEG Sequence Export Settings

Not to be confused with JPEG 2000 MXF PO1a, which is not for our website, JPEG only has one preset for sequence; otherwise, Export Settings and Summary Settings are identical to the BMP. Refer to Figure 28-10.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig10_HTML.jpg
Figure 28-10

Export and Summary setting for JPEG image

The Effects, Caption, and Publish tabs are the same as BMP.

Video Tab

The only area of difference is the Video tab, where you can match the source or adjust your own quality. Refer to Figure 28-11.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig11_HTML.jpg
Figure 28-11

Video tab for Basic Settings

As with BMP, you can set the width and height, as well as check Export As Sequence to match the frame rate, aspect ratio, and render at maximum bit depth. You can alter the frame rate and choose an aspect from the drop-down menus when you uncheck them.

PNG Sequence Export Settings

PNG Sequence is set up like BMP; however, it has two presets: one with alpha or transparency and one without. Refer to Figure 28-12.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig12_HTML.jpg
Figure 28-12

Preset, Export, and Summary settings for a PNG file

The Effects, Captions, and Publish tabs are the same as the BMP image sequence.

Video Tab

The main difference is in the Export Settings Video tab, where you can match the source settings or set your own for width and height. Check Export as a sequence to match the frame rate and aspect ratio, and you can choose to render at maximum bit depth. Refer to Figure 28-13.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig13_HTML.jpg
Figure 28-13

Video tab for Basic Settings for a PNG sequence

Enabling or disabling Include Alpha Channel alters the preset and determines whether the alpha channel or transparency is included or not.

GIF (Static) Image Sequence Export Settings

The GIF image sequence is the basically identical in Export Settings as the BMP file, and you cannot render any of the images transparent as you can in Photoshop CC. Refer to Figure 28-14.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig14_HTML.jpg
Figure 28-14

Export Settings for GIF sequence

Remember GIF images are best for logos or graphics with very little color like an animation. For full-color photos for the web, it is best to use a JPEG or PNG sequence. PNGs generally have a lower file size, but can retain their image quality.

Animated GIF

As a single animation file (not a sequence), this must be chosen from the Format option as Animated GIF. Refer to Figure 28-15.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig15_HTML.jpg
Figure 28-15

Export Settings and Summary for GIF animation

The Export Settings, Summary, Effects, and Captions and lower render settings tabs are the same as a BMP file. However, the Video and Publish tabs do have some slightly different settings.

Video Tab

The Video tab in Basic Settings allows you to either match source or adjust the quality, width, and height, frame rate, field order, aspect ratio, and render at maximum bit depth. Refer to Figure 28-16.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig16_HTML.jpg
Figure 28-16

Video tab in Basic Video settings

Publish Tab

The Publish tab allows one extra option: you can upload your animation to Facebook. You can also publish on your hard drive, external drive, to Adobe Creative Cloud, or directly to your website via FTP, as seen in Figure 28-17.
../images/466782_1_En_28_Chapter/466782_1_En_28_Fig17_HTML.jpg
Figure 28-17

Publish tab for Adobe Creative Cloud, Facebook, and FTP

You cannot publish directly to other social media sites, like Twitter or YouTube. This is because you are publishing GIF animations and not actual video.

Note

If you are planning using any of your images in your sequence for print or high-quality documents, TIFF Image Sequence is a good option to output the images. You can always place these in your InDesign CC file in the document layout and then export as a PDF file in Adobe Acrobat. Media Encoder cannot create PDF files, so this is a way to add images from your video to a document.

Summary

In this chapter, you looked at how to convert frames in your video into image sequences for other projects. You also saw that like Photoshop and Animate, you can use Media Encoder to create an animated GIF.

In the last chapter of Part 5, you put your knowledge into practice and work with some video and audio files to export media for the Hot Glass Tango site.