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_40

40. What Other Programs That Are Part of Adobe Creative Cloud Can I Use to Display My Graphics or Multimedia Online?

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this last chapter, you look at some alternative multimedia programs that you can use instead of Dreamweaver. There is also a final quiz at the end to test your knowledge.

Note

This chapter does not have any projects.

Additional Creative Cloud Software for Your Projects

In Parts 2 through 6, you looked at the five core Adobe products (Photoshop CC, Illustrator CC, Animate CC, Media Encoder CC, and Dreamweaver CC). You can use these products to build a website with graphics, animations, video, and audio. Refer to Figure 40-1.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig1_HTML.jpg
Figure 40-1

The five core Adobe programs you reviewed

Other than a digital camera to capture video and images, and a microphone to capture sound or audio, you don’t need a lot of high-tech equipment to build your own website on a small budget. However, it’s great if the other members of your team have Adobe knowledge, such as

  • For sound: Audition CC

  • For additional video effects: Premiere Pro CC, After Effects CC, Prelude CC

  • For images: Lightroom CC

  • For 3D and animations: Character Animator, Dimension CC, and Fuse CC

All the resultant graphics or video that you export from these programs can be incorporated into a website that is designed using Dreamweaver CC.

Having said that, Adobe Creative Cloud has a few new programs for creating an image-driven website. Some of these may be useful to your company or clients, and you may want to research them further for your next project.

What Additional Adobe Creative Cloud Software Can You Use to Display Graphics or Multimedia Online?

Open your Creative Cloud console and scroll down the list to look at the following software icons.

Adobe InDesign CC

Adobe InDesign CC is mostly known for its page layout for print and PDFs. Refer to Figure 40-2.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig2_HTML.jpg
Figure 40-2

Adobe InDesign CC

However, did you know that besides exporting interactive PDFs (forms and transitions), you can also create EPUB documents? EPUBs are like mini-websites in digital book form that you can read on an e-reader like Adobe Digital Editions or any other e-reader application on your tablet or smartphone. Like a website, an EPUB can contain images, video, audio, animation in the form of an OAM file, or animations created within InDesign. EPUBs are another wonderful way to create a simple self-published magazine, book, or catalog for your clients to read on their mobile device. Apress has books on this topic if you want to learn more.

Adobe Experience Design

Adobe Experience Design is a new program for simple web/mobile apps and interactive click-through prototypes. Refer to Figure 40-3.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig3_HTML.jpg
Figure 40-3

Adobe Experience Design or XD CC

Afterward, you can export your files in the form of PNG, SVG, JPG, and interactive PDF, which could be viewed by a client before the images are added to Dreamweaver CC.

Remember that this program is for creating prototypes, not the final website. So, to finish the website, you need to take the information from the prototype and ultimately lay out the whole website. Hopefully, at some point there will be an integration where HTML pages from the prototypes are published to Portfolio or Dreamweaver so that designers and developers can interact with these HTML files after export.

Note

Adobe Acrobat Pro DC has the ability to export a file as HTML. This may be a feasible way to extract some further information (however limited) out of an interactive PDF for your website, but it’s certainly not a perfect solution.

Adobe Portfolio

Adobe Portfolio can work Lightroom CC or Photoshop CC along with RAW images to create graphics driven (galleries) with pre-created template-based layouts. Refer to Figure 40-4.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig4_HTML.jpg
Figure 40-4

Lightroom Classic and Portfolio

If you are an artist and plan to create a website that is mainly about your artwork (photos, illustrations, video, and audio) with very little text, rather than create a large complicated website, Portfolio might be all you need.

You can host on your own site or use your Creative Cloud Behance account along with Portfolio. Refer to Figure 40-5.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig5_HTML.jpg
Figure 40-5

The Behance account link

The important thing about Portfolio is the template is already mobile-friendly, and you can use all your knowledge from the Photoshop, Illustrator, Animate, and Media Encoder chapters of this book. The one main drawback is that you may feel limited by the amount of customization you can do. These are all things to consider when designing a project for a client when it concerns designing and then later who oversees the future maintenance and updating of the site.

Adobe Spark: Storytelling with Audio and Video

If you like to do storytelling with your graphics and on your mobile apps, Spark is an interesting new product. Refer to Figure 40-6.
../images/466782_1_En_40_Chapter/466782_1_En_40_Fig6_HTML.jpg
Figure 40-6

Spark for storytelling

It is made up of three features.

  • Spark Page: Text and photos for crafting web stories. Is good for travel stories, photo albums, and newsletters that require some movement.

  • Spark Post: Allows the adjustment of graphics with, text, layers, and filters. The process that would normally take place in Photoshop or InDesign has been simplified in Post for beginning users who tap buttons to control settings.

  • Spark Video : Allows you to work with audio to tell a story. As with After Effects or Animate, you can also add effects like panning and zooming. However, this is not the same as editing film content, more like an animation that you create in Animate CC. In this instance, text, images, icons, and themes are combined into a presentation. Afterward, you speak your voice audio over the story to create the video. Later, you can export as an MP4 (H.264) video file that you can add to your website or social media site. For more information, refer to https://spark.adobe.com .

Exporting to Phone GAP Build

Adobe Phone GAP Build enables software programmers to build applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. So, you could design the structure of an app in Dreamweaver and then use Phone GAP to complete the work.

You will not find it as part of the Creative Cloud; however, you can use this information from the following resources if you want to work with this product.

Test Your Knowledge Quiz

As a review, here are a few multiple-choice and true/false questions on topics that were covered in the book.
  1. 1.
    In Photoshop, which two panels are used to create a video?
    1. a.

      Properties and Channels

       
    2. b.

      Layers and Styles

       
    3. c.

      Layers and Timeline

       
     
  2. 2.
    To create a GIF animation in Photoshop, which export method must be used?
    1. a.

      Export As

       
    2. b.

      Save for Web (Legacy)

       
    3. c.

      Quick Export As

       
     
  3. 3.
    Which of the following file formats cannot contain transparency?
    1. a.

      GIF

       
    2. b.

      PNG

       
    3. c.

      JPEG

       
     
  4. 4.
    Which panel in Photoshop is useful for creating a set of steps that you can use many times?
    1. a.

      Layers

       
    2. b.

      Actions

       
    3. c.

      Styles

       
     
  5. 5.
    You can use Illustrator to export video and animations.
    1. a.

      True

       
    2. b.

      False

       
     
  6. 6.
    What coding language is used with the SVG Interactivity panel?
    1. a.

      JavaScript

       
    2. b.

      CSS

       
    3. c.

      HTML

       
     
  7. 7.
    Which color mode should you convert your files to before you export them for the web?
    1. a.

      CMYK

       
    2. b.

      RGB

       
     
  8. 8.
    Illustrator Objects are
    1. a.

      vector

       
    2. b.

      raster

       
     
  9. 9.
    In Animate, which format do you export a video as?
    1. a.

      MP4

       
    2. b.

      MOV

       
    3. c.

      AVI

       
     
  10. 10.
    Animate GIF animations can contain audio.
    1. a.

      True

       
    2. b.

      False

       
     
  11. 11.
    Which of the following tweens can you not create with a library symbol?
    1. a.

      Motion tween

       
    2. b.

      Classic tween

       
    3. c.

      Shape tween

       
     
  12. 12.
    By default, in which folder does HTML5 Canvas stores its audio files?
    1. a.

      Sounds

       
    2. b.

      Audio

       
    3. c.

      Music

       
     
  13. 13.
    Which two video formats for the web does Media Encoder not export?
    1. a.

      MP4

       
    2. b.

      WebM

       
    3. c.

      Ogg

       
     
  14. 14.
    Media Encoder allows you to export a WAV file.
    1. a.

      True

       
    2. b.

      False

       
     
  15. 15.
    If you want a range of frames from a video, which three formats can you export from Media Encoder to get an image sequence?
    1. a.

      PNG

       
    2. b.

      JPEG

       
    3. c.

      MP3

       
    4. d.

      GIF

       
     
  16. 16.
    In Media Encoder, which Export Setting allows you to colorize your entire video?
    1. a.

      Lumetri Look /LUT

       
    2. b.

      Image Overlay

       
    3. c.

      Time Tuner

       
     
  17. 17.
    In Dreamweaver, which tag should you use to keep your SVG files interactive?
    1. a.

      <img>

       
    2. b.

      <div>

       
    3. c.

      <object>

       
     
  18. 18.
    To insert your compressed HTML5 Canvas in a template-based webpage, which icon from the Insert panel would you choose?
    1. a.

      HTML5 Video

       
    2. b.

      Animated Composition

       
    3. c.

      Plugin

       
     
  19. 19.
    Which coding would you use to display your image in the background of a <div> tag?
    1. a.

      HTML

       
    2. b.

      CSS

       
    3. c.

      JavaScript

       
     
  20. 20.
    Which panel in Dreamweaver allows you to edit the attribute of your <video> and <audio> tags?
    1. a.

      CSS Designer

       
    2. b.

      Assets

       
    3. c.

      Properties

       
     
Answers:
  1. 1.

    c

     
  2. 2.

    b

     
  3. 3.

    c

     
  4. 4.

    b

     
  5. 5.

    b

     
  6. 6.

    a

     
  7. 7.

    b

     
  8. 8.

    a

     
  9. 9.

    b

     
  10. 10.

    b

     
  11. 11.

    c

     
  12. 12.

    a

     
  13. 13.

    b, c

     
  14. 14.

    a

     
  15. 15.

    a, b, d

     
  16. 16.

    a

     
  17. 17.

    c

     
  18. 18.

    b

     
  19. 19.

    b

     
  20. 20.

    c

     

Summary

In this chapter, you looked at a few other Adobe programs that are part of the Creative Cloud that you may want to use for your own projects. You also took a quiz to test your knowledge. I hope that you enjoyed this book, and that you are able to apply the knowledge that you acquired from building the Hot Glass Tango site for your future multimedia projects.