Graphics and
Multimedia for the
Web with Adobe
Creative Cloud
Navigating the Adobe Software
Landscape
—
Jennifer Harder
Graphics and
Multimedia for the
Web with Adobe
Creative Cloud
Navigating the Adobe Software Landscape
Jennifer Harder
Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe
Software Landscape
Jennifer Harder
Delta, BC, Canada
ISBN-13 (pbk): 978-1-4842-3822-6
/>
ISBN-13 (electronic): 978-1-4842-3823-3
Library of Congress Control Number: 2018963115
Copyright © 2018 by Jennifer Harder
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage
and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or
hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material
contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Natalie Pao
Development Editor: James Markham
Coordinating Editor: Jessica Vakili
Cover image designed by Freepik
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
, or visit www.springeronline.com. Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail , or visit />rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions
and licenses are also available for most titles. For more information, reference our Print and eBook Bulk
Sales web page at />Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book’s product page, located at www.apress.com/978-1-4842-3822-6.
For more detailed information, please visit />Printed on acid-free paper
Contents
About the Author����������������������������������������������������������������������������������������������������xxi
About the Technical Reviewers����������������������������������������������������������������������������xxiii
Acknowledgments�������������������������������������������������������������������������������������������������xxv
■■Part I: Welcome to the Adobe Creative Cloud. Where Should
You Begin?������������������������������������������������������������������������������������������ 1
■Chapter
■
1: Entering the Software Maze or Labyrinth�������������������������������������������� 3
Where Should You Begin?������������������������������������������������������������������������������������������������ 3
How Will You Get to Your Destination?���������������������������������������������������������������������������������������������������� 5
A Visual Map of How the Creative Cloud Software Works���������������������������������������������������������������������� 6
Choosing the Smallest Number of Adobe Software Programs to Accomplish Your Goals���������������������� 6
Basic Web File Formats for Images and Multimedia������������������������������������������������������������������������������ 9
Summary������������������������������������������������������������������������������������������������������������������������ 11
■■Part II: Working with Photoshop to Create Web Graphics and
Animations��������������������������������������������������������������������������������������� 13
■Chapter
■
2: Getting Started����������������������������������������������������������������������������������� 15
Working with Your RAW and Layered Files��������������������������������������������������������������������� 17
Creating a New File�������������������������������������������������������������������������������������������������������� 23
Image Files from Other Adobe Programs����������������������������������������������������������������������� 28
Summary������������������������������������������������������������������������������������������������������������������������ 30
■Chapter
■
3: Color Choices: CMYK, RGB, Grayscale, and Index������������������������������ 31
Adjusting the Image Size and Resolution����������������������������������������������������������������������� 42
Summary������������������������������������������������������������������������������������������������������������������������ 46
iii
■ Contents
■Chapter
■
4: Saving or Exporting Your Files for the Web���������������������������������������� 47
Option 1: File ➤ Save As…�������������������������������������������������������������������������������������������� 48
Bitmap (BMP)���������������������������������������������������������������������������������������������������������������������������������������� 50
JPEG����������������������������������������������������������������������������������������������������������������������������������������������������� 52
PNG������������������������������������������������������������������������������������������������������������������������������������������������������� 55
CompuServe GIF����������������������������������������������������������������������������������������������������������������������������������� 55
Photoshop PDF������������������������������������������������������������������������������������������������������������������������������������� 61
Option 2: File ➤ Export ➤ Quick Export as PNG������������������������������������������������������������ 65
JPEG����������������������������������������������������������������������������������������������������������������������������������������������������� 66
GIF�������������������������������������������������������������������������������������������������������������������������������������������������������� 67
SVG������������������������������������������������������������������������������������������������������������������������������������������������������� 68
Options 3: File ➤ Export ➤ Export As…������������������������������������������������������������������������ 68
PNG������������������������������������������������������������������������������������������������������������������������������������������������������� 68
JPEG����������������������������������������������������������������������������������������������������������������������������������������������������� 71
GIF�������������������������������������������������������������������������������������������������������������������������������������������������������� 72
SVG������������������������������������������������������������������������������������������������������������������������������������������������������� 73
Option 4: File ➤ Export ➤ Save for Web (Legacy)��������������������������������������������������������� 74
GIF�������������������������������������������������������������������������������������������������������������������������������������������������������� 78
JPEG����������������������������������������������������������������������������������������������������������������������������������������������������� 82
PNG-8��������������������������������������������������������������������������������������������������������������������������������������������������� 83
PNG-24������������������������������������������������������������������������������������������������������������������������������������������������� 85
WMBP��������������������������������������������������������������������������������������������������������������������������������������������������� 86
Additional Options That You Can Use to Export Files for the Web����������������������������������� 88
Artboards���������������������������������������������������������������������������������������������������������������������������������������������� 88
Layer Comps����������������������������������������������������������������������������������������������������������������������������������������� 90
Layers��������������������������������������������������������������������������������������������������������������������������������������������������� 92
Summary������������������������������������������������������������������������������������������������������������������������ 93
iv
■ Contents
■Chapter
■
5: Actions to Speed up File Conversion and Slicing Tools���������������������� 95
Actions to Speed up the File Conversion Process���������������������������������������������������������� 95
Automate Batch Actions��������������������������������������������������������������������������������������������������������������������� 106
Automate Droplet Actions������������������������������������������������������������������������������������������������������������������� 107
Slicing Tools����������������������������������������������������������������������������������������������������������������� 110
Use the Slice and Slice Select Tool����������������������������������������������������������������������������������������������������� 110
Layer-based Slices����������������������������������������������������������������������������������������������������������������������������� 119
Exporting Slices���������������������������������������������������������������������������������������������������������������������������������� 120
Zoomify an Image��������������������������������������������������������������������������������������������������������� 124
Summary���������������������������������������������������������������������������������������������������������������������� 126
■Chapter
■
6: Tools for Animation�������������������������������������������������������������������������� 127
GIF (animated) (.gif)������������������������������������������������������������������������������������������������������ 129
The Timeline Panel������������������������������������������������������������������������������������������������������� 129
Adding a Frame���������������������������������������������������������������������������������������������������������������������������������� 131
Adding, Altering, and Removing Frames��������������������������������������������������������������������������������������������� 133
Add Layer Style Effects and Turn Them On or Off in the Frame Sequence����������������������������������������� 135
Tweening Layers in the Timeline�������������������������������������������������������������������������������������������������������� 140
Export Animated GIF��������������������������������������������������������������������������������������������������������������������������� 143
Summary���������������������������������������������������������������������������������������������������������������������� 143
■Chapter
■
7: Tools for Video��������������������������������������������������������������������������������� 145
Video Setup Tips����������������������������������������������������������������������������������������������������������� 146
Video Timeline�������������������������������������������������������������������������������������������������������������� 149
Layers in the Timeline������������������������������������������������������������������������������������������������������������������������� 151
Other Layer Properties������������������������������������������������������������������������������������������������������������������������ 155
Smart Object Layers��������������������������������������������������������������������������������������������������������������������������� 157
Adding Video Layers��������������������������������������������������������������������������������������������������������������������������� 158
Interpret Footage�������������������������������������������������������������������������������������������������������������������������������� 171
v
■ Contents
Playing and Previewing Video������������������������������������������������������������������������������������������������������������� 174
Working with the Timeline and Playhead������������������������������������������������������������������������������������������� 175
Adding Background Audio������������������������������������������������������������������������������������������������������������������ 184
Rendering the Video��������������������������������������������������������������������������������������������������������������������������� 186
Saving the Original File����������������������������������������������������������������������������������������������������������������������� 187
Summary���������������������������������������������������������������������������������������������������������������������� 187
■■Chapter 8: Other Miscellaneous Items in Photoshop That You Can
Use for Web Design�������������������������������������������������������������������������������������������� 189
Libraries CC������������������������������������������������������������������������������������������������������������������ 189
Extraction of Code from Layers������������������������������������������������������������������������������������ 190
Web Fonts and SVG Fonts�������������������������������������������������������������������������������������������� 191
Filter for Repeating Backgrounds��������������������������������������������������������������������������������� 192
New to Photoshop CC 2018 Paint Symmetry��������������������������������������������������������������� 194
Web Styles�������������������������������������������������������������������������������������������������������������������� 196
Color Blindness Proofs������������������������������������������������������������������������������������������������� 197
Summary���������������������������������������������������������������������������������������������������������������������� 200
■Chapter
■
9: Putting It into Practice with Photoshop CC�������������������������������������� 201
Exporting Images for a Gallery������������������������������������������������������������������������������������� 201
Exporting a GIF Animation�������������������������������������������������������������������������������������������� 206
Exporting a JPEG Poster Image for Your Movie for the Web����������������������������������������� 209
Rendering Your Movie�������������������������������������������������������������������������������������������������� 212
Summary���������������������������������������������������������������������������������������������������������������������� 219
■Part
■
III: Working with Illustrator to Create Web Graphics�������������� 221
■Chapter
■
10: Getting Started with Illustrator CC������������������������������������������������� 223
Working with RAW and Layered Files (AI, EPS, PDF)���������������������������������������������������� 225
Creating a New File���������������������������������������������������������������������������������������������������������������������������� 228
RAW File Types����������������������������������������������������������������������������������������������������������������������������������� 232
Summary���������������������������������������������������������������������������������������������������������������������� 237
vi
■ Contents
■Chapter
■
11: Color Choices: CMYK, RGB, and Grayscale������������������������������������� 239
Working with Color������������������������������������������������������������������������������������������������������� 239
Copying CMYK Graphics to an RGB Document����������������������������������������������������������������������������������� 242
Color Panel����������������������������������������������������������������������������������������������������������������������������������������� 243
Swatches Panel���������������������������������������������������������������������������������������������������������������������������������� 245
Other Panels for Working with Color���������������������������������������������������������������������������� 246
Color Guide Panel������������������������������������������������������������������������������������������������������������������������������� 247
Adobe Color Themes Panel����������������������������������������������������������������������������������������������������������������� 248
Gradient Panel������������������������������������������������������������������������������������������������������������������������������������ 248
Transparency Panel���������������������������������������������������������������������������������������������������������������������������� 249
Appearance Panel������������������������������������������������������������������������������������������������������������������������������� 250
Summary���������������������������������������������������������������������������������������������������������������������� 251
■Chapter
■
12: Saving or Exporting Your Files for the Web������������������������������������ 253
Option 1: File ➤ Save As or File ➤ Save a Copy���������������������������������������������������������� 254
Adobe PDF (.pdf)��������������������������������������������������������������������������������������������������������������������������������� 254
SVG (.svg) and SVG Compressed (.svgz)��������������������������������������������������������������������������������������������� 259
Option 2: File ➤ Export ➤ Export for Screens������������������������������������������������������������� 264
Artboards Tab�������������������������������������������������������������������������������������������������������������������������������������� 265
PNG����������������������������������������������������������������������������������������������������������������������������������������������������� 270
PNG 8�������������������������������������������������������������������������������������������������������������������������������������������������� 270
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 272
SVG����������������������������������������������������������������������������������������������������������������������������������������������������� 274
PDF����������������������������������������������������������������������������������������������������������������������������������������������������� 275
Assets Tab������������������������������������������������������������������������������������������������������������������������������������������� 276
Option 3: File ➤ Export ➤ Export As���������������������������������������������������������������������������� 283
Bitmap������������������������������������������������������������������������������������������������������������������������������������������������ 283
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 284
PNG����������������������������������������������������������������������������������������������������������������������������������������������������� 285
SVG����������������������������������������������������������������������������������������������������������������������������������������������������� 285
CSS����������������������������������������������������������������������������������������������������������������������������������������������������� 286
vii
■ Contents
Option 4: File ➤ Export ➤ Save for Web (Legacy)������������������������������������������������������� 290
GIF������������������������������������������������������������������������������������������������������������������������������������������������������ 292
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 293
PNG-8 and PNG-24����������������������������������������������������������������������������������������������������������������������������� 293
Summary���������������������������������������������������������������������������������������������������������������������� 295
■Chapter
■
13: Actions to Speed up File Conversion and Slicing Tools������������������ 297
Using Scripts���������������������������������������������������������������������������������������������������������������� 297
Actions to Speed up the File Conversion Process�������������������������������������������������������� 298
Actions Panel�������������������������������������������������������������������������������������������������������������������������������������� 298
Automate Batch Actions����������������������������������������������������������������������������������������������� 303
Slicing Tools����������������������������������������������������������������������������������������������������������������� 306
Use the Slice and Slice Select Tools��������������������������������������������������������������������������������������������������� 307
Object ➤ Slice Options����������������������������������������������������������������������������������������������������������������������� 310
Align Slices����������������������������������������������������������������������������������������������������������������������������������������� 311
Slice Options��������������������������������������������������������������������������������������������������������������������������������������� 312
Delete All Slices���������������������������������������������������������������������������������������������������������������������������������� 316
Lock Slices����������������������������������������������������������������������������������������������������������������������������������������� 316
Hide Slices������������������������������������������������������������������������������������������������������������������������������������������ 316
Save Your Slices for the Web�������������������������������������������������������������������������������������������������������������� 316
Creating Image Maps��������������������������������������������������������������������������������������������������� 319
Summary���������������������������������������������������������������������������������������������������������������������� 321
■Chapter
■
14: Tools for Animation and Video������������������������������������������������������� 323
Tools for Animation������������������������������������������������������������������������������������������������������� 323
SVG Interactivity Panel����������������������������������������������������������������������������������������������������������������������� 323
Copying Illustrations to Photoshop (Vector Smart Objects)������������������������������������������ 330
Rasterize Smart Objects��������������������������������������������������������������������������������������������������������������������� 332
Puppet Warp Tool�������������������������������������������������������������������������������������������������������������������������������� 333
Tools for Video�������������������������������������������������������������������������������������������������������������� 337
New Layout for Film and Video����������������������������������������������������������������������������������������������������������� 337
Adding 3D Images������������������������������������������������������������������������������������������������������������������������������ 338
Summary���������������������������������������������������������������������������������������������������������������������� 340
viii
■ Contents
■■Chapter 15: Other Miscellaneous Items in Illustrator That You Can Use
for Web Design�������������������������������������������������������������������������������������������������� 341
Library CC��������������������������������������������������������������������������������������������������������������������� 341
Web Fonts and SVG Fonts�������������������������������������������������������������������������������������������� 342
Creating Swatch Patterns��������������������������������������������������������������������������������������������� 344
Graphic Styles for Buttons and Rollovers��������������������������������������������������������������������� 356
Symbols Panel for Web Symbol Creation��������������������������������������������������������������������� 357
Color Blindness Proofs������������������������������������������������������������������������������������������������� 359
Summary���������������������������������������������������������������������������������������������������������������������� 360
■Chapter
■
16: Putting It into Practice with Illustrator CC������������������������������������� 361
Exporting Images for an Instructional Webpage����������������������������������������������������������� 361
Create a Custom Action���������������������������������������������������������������������������������������������������������������������� 363
Exporting an SVG File��������������������������������������������������������������������������������������������������� 368
Summary���������������������������������������������������������������������������������������������������������������������� 378
■■Part IV: Working with Animate to Create Animations,
Movies, and HTML5 Canvas������������������������������������������������������������ 379
■Chapter
■
17: Getting Started with Animate CC��������������������������������������������������� 381
Getting Started������������������������������������������������������������������������������������������������������������� 383
Differences and Similarities Between Animate and Character Animator CC�������������������������������������� 384
Setting up the Workspace������������������������������������������������������������������������������������������������������������������� 384
Create a New FLA Document�������������������������������������������������������������������������������������������������������������� 386
What Is HTML5 Canvas?����������������������������������������������������������������������������������������������� 390
HTML5 Canvas Can Draw Text������������������������������������������������������������������������������������������������������������ 390
HTML5 Canvas Can Draw Graphics���������������������������������������������������������������������������������������������������� 391
HTML5 Canvas Can Be Animated�������������������������������������������������������������������������������������������������������� 391
HTML5 Canvas Can Be Interactive������������������������������������������������������������������������������������������������������ 391
HTML5 Canvas Can Be Used in Games����������������������������������������������������������������������������������������������� 391
ix
■ Contents
Working with RAW Files����������������������������������������������������������������������������������������������� 391
Properties Panel��������������������������������������������������������������������������������������������������������������������������������� 392
Timeline Panel������������������������������������������������������������������������������������������������������������������������������������ 394
Library Panel�������������������������������������������������������������������������������������������������������������������������������������� 394
Tools Panel����������������������������������������������������������������������������������������������������������������������������������������� 395
FLA Conversions ActionScript to HTML5��������������������������������������������������������������������������������������������� 396
Summary���������������������������������������������������������������������������������������������������������������������� 398
■Chapter
■
18: Color Choices: RGB������������������������������������������������������������������������� 399
Adding Color to the Stage�������������������������������������������������������������������������������������������� 399
The Tools Panel Stroke and Fill������������������������������������������������������������������������������������ 400
Properties Panel����������������������������������������������������������������������������������������������������������� 401
Color Panel������������������������������������������������������������������������������������������������������������������� 402
Gradient Fills��������������������������������������������������������������������������������������������������������������������������������������� 403
Bitmap Fills����������������������������������������������������������������������������������������������������������������������������������������� 405
Swatches Panel������������������������������������������������������������������������������������������������������������ 406
Info Panel��������������������������������������������������������������������������������������������������������������������� 407
Summary���������������������������������������������������������������������������������������������������������������������� 407
■Chapter
■
19: Importing Your Artwork����������������������������������������������������������������� 409
Importing Files to the Stage or Library Panels������������������������������������������������������������� 409
Import an Image Sequence���������������������������������������������������������������������������������������������������������������� 410
Export Images from an External Library��������������������������������������������������������������������������������������������� 411
Importing Illustrator and Photoshop Files with Their Elements or Effects Intact�������������������������������� 411
Animate CC Effects����������������������������������������������������������������������������������������������������������������������������� 436
Import Other Graphic File Formats������������������������������������������������������������������������������� 456
Summary���������������������������������������������������������������������������������������������������������������������� 457
■Chapter
■
20: Import Your Audio and Video��������������������������������������������������������� 459
Import Audio����������������������������������������������������������������������������������������������������������������� 459
Sound Effect Settings������������������������������������������������������������������������������������������������������������������������� 462
Sync Setting��������������������������������������������������������������������������������������������������������������������������������������� 464
Repeat Sound������������������������������������������������������������������������������������������������������������������������������������� 466
x
■ Contents
Import Video����������������������������������������������������������������������������������������������������������������� 466
Components and Component Parameters������������������������������������������������������������������������������������������ 467
Summary���������������������������������������������������������������������������������������������������������������������� 472
■Chapter
■
21: Working with the Timeline Panel��������������������������������������������������� 473
Working with the Timeline Panel���������������������������������������������������������������������������������� 473
A Review of Layers����������������������������������������������������������������������������������������������������������������������������� 473
New Layers����������������������������������������������������������������������������������������������������������������������������������������� 475
Folders������������������������������������������������������������������������������������������������������������������������������������������������ 476
Hide and Show Layers and Folder������������������������������������������������������������������������������������������������������ 476
Lock Layers and Folders��������������������������������������������������������������������������������������������������������������������� 477
Layer Outlines������������������������������������������������������������������������������������������������������������������������������������� 477
Advanced Layer Settings�������������������������������������������������������������������������������������������������������������������� 479
Layer Depth Panel������������������������������������������������������������������������������������������������������������������������������ 480
Layer Types����������������������������������������������������������������������������������������������������������������������������������������� 485
The Parts of the Timeline��������������������������������������������������������������������������������������������� 488
Frames Types�������������������������������������������������������������������������������������������������������������������������������������� 491
Easing for Classic, Shape, and Motion Tweens������������������������������������������������������������� 500
Shape Tween Easing��������������������������������������������������������������������������������������������������������������������������� 500
Classic Tween Easing������������������������������������������������������������������������������������������������������������������������� 502
Motion and Camera Tween Easing����������������������������������������������������������������������������������������������������� 504
Camera Tool������������������������������������������������������������������������������������������������������������������ 508
Bone Tools�������������������������������������������������������������������������������������������������������������������� 511
Bone Tool and Armature Easing���������������������������������������������������������������������������������������������������������� 511
The Bind Tool�������������������������������������������������������������������������������������������������������������������������������������� 516
Frame Picker Panel������������������������������������������������������������������������������������������������������ 519
Scene Panel����������������������������������������������������������������������������������������������������������������� 520
Summary���������������������������������������������������������������������������������������������������������������������� 521
xi
■ Contents
■Chapter
■
22: Exporting Your Files to the Web����������������������������������������������������� 523
Saving or Exporting Your Files for the Web������������������������������������������������������������������ 523
Option 1: File ➤ Export ➤ Export Image��������������������������������������������������������������������� 525
GIF������������������������������������������������������������������������������������������������������������������������������������������������������ 528
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 530
PNG-8 and PNG-24����������������������������������������������������������������������������������������������������������������������������� 530
Option 2: File ➤ Export ➤ Export Image (Legacy)������������������������������������������������������� 531
SWF Movie (removed in CC 2019)������������������������������������������������������������������������������������������������������ 532
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 532
GIF������������������������������������������������������������������������������������������������������������������������������������������������������ 533
PNG����������������������������������������������������������������������������������������������������������������������������������������������������� 534
SVG����������������������������������������������������������������������������������������������������������������������������������������������������� 535
Option 3: File ➤ Export ➤ Export Movie���������������������������������������������������������������������� 537
SWF Movie������������������������������������������������������������������������������������������������������������������������������������������ 537
JPEG��������������������������������������������������������������������������������������������������������������������������������������������������� 537
GIF������������������������������������������������������������������������������������������������������������������������������������������������������ 538
PNG����������������������������������������������������������������������������������������������������������������������������������������������������� 538
Option 4: File ➤ Export ➤ Export Video����������������������������������������������������������������������� 539
Tips for Controlling the Audio in Video When Exporting to MOV��������������������������������������������������������� 540
Option 5: File ➤ Export ➤ Export Animated GIF���������������������������������������������������������� 541
Option 6: File ➤ Publish Settings HTML5 Canvas�������������������������������������������������������� 542
Publish Settings���������������������������������������������������������������������������������������������������������������������������������� 544
Dissecting the Canvas HTML5 File����������������������������������������������������������������������������������������������������� 558
Other Export Options from the Symbols in the Library Panel��������������������������������������� 558
Export PNG Sequence������������������������������������������������������������������������������������������������������������������������� 559
Generate Sprite Sheet������������������������������������������������������������������������������������������������������������������������ 559
Generate Texture Atlas������������������������������������������������������������������������������������������������������������������������ 562
Other Web Export Options�������������������������������������������������������������������������������������������� 563
AIR Options����������������������������������������������������������������������������������������������������������������������������������������� 563
Projector��������������������������������������������������������������������������������������������������������������������������������������������� 567
WebGL������������������������������������������������������������������������������������������������������������������������������������������������ 567
Summary���������������������������������������������������������������������������������������������������������������������� 569
xii
■ Contents
■■Chapter 23: Other Miscellaneous Items in Animate that You Can Use for
Web Design�������������������������������������������������������������������������������������������������������� 571
Edit ➤ Preferences������������������������������������������������������������������������������������������������������ 571
Actions, Code Snippets, and History Panels����������������������������������������������������������������� 573
Actions Panel�������������������������������������������������������������������������������������������������������������������������������������� 573
Code Snippets Panel��������������������������������������������������������������������������������������������������������������������������� 574
History Panel�������������������������������������������������������������������������������������������������������������������������������������� 578
CC Libraries������������������������������������������������������������������������������������������������������������������ 581
Patterns for Paint Brush and Pen Tools������������������������������������������������������������������������ 582
3D in Animations���������������������������������������������������������������������������������������������������������� 591
Web Fonts�������������������������������������������������������������������������������������������������������������������� 592
The Dangers of Flashing Graphics������������������������������������������������������������������������������� 595
Summary���������������������������������������������������������������������������������������������������������������������� 596
■Chapter
■
24: Putting It into Practice with Animate CC��������������������������������������� 597
Create an Animated GIF������������������������������������������������������������������������������������������������ 597
Export your GIF Animation������������������������������������������������������������������������������������������������������������������ 599
Create a Video (.mov) File��������������������������������������������������������������������������������������������� 603
Creating a Storyboard������������������������������������������������������������������������������������������������������������������������� 604
Pre-Plan Your Video Settings�������������������������������������������������������������������������������������������������������������� 606
Reviewing the Files���������������������������������������������������������������������������������������������������������������������������� 606
Exporting the Video����������������������������������������������������������������������������������������������������������������������������� 607
Opening in Adobe Media Encoder������������������������������������������������������������������������������������������������������� 608
Create an HTML5 Canvas Animation���������������������������������������������������������������������������� 608
Publish HTML5 Canvas and OAM File������������������������������������������������������������������������������������������������� 610
Summary���������������������������������������������������������������������������������������������������������������������� 612
xiii
■ Contents
■■Part V: Working with Media Encoder to Create Audio and
Video Files�������������������������������������������������������������������������������������� 613
■Chapter
■
25: Getting Started with Media Encoder���������������������������������������������� 615
Getting Started������������������������������������������������������������������������������������������������������������� 615
Looking at the Setup of Media Encoder CC and Queue������������������������������������������������ 620
Set up a Workspace���������������������������������������������������������������������������������������������������������������������������� 621
Media Browser Panel��������������������������������������������������������������������������������������������������� 626
Queue Panel����������������������������������������������������������������������������������������������������������������� 630
Format Options����������������������������������������������������������������������������������������������������������������������������������� 632
Preset Options������������������������������������������������������������������������������������������������������������������������������������ 633
Output File Options����������������������������������������������������������������������������������������������������������������������������� 634
Status Options������������������������������������������������������������������������������������������������������������������������������������ 634
Interpret Footage�������������������������������������������������������������������������������������������������������������������������������� 634
Watch Folders Panel����������������������������������������������������������������������������������������������������� 636
Encoding Panel������������������������������������������������������������������������������������������������������������� 636
Preset Browser Panel��������������������������������������������������������������������������������������������������� 636
Preset Menu Options�������������������������������������������������������������������������������������������������������������������������� 638
Summary���������������������������������������������������������������������������������������������������������������������� 640
■Chapter
■
26: Working with Your RAW Video Files (AVI and MOV)����������������������� 641
Working with Your RAW Files (AVI or MOV)������������������������������������������������������������������� 641
Audio Video Interleave������������������������������������������������������������������������������������������������������������������������ 642
QuickTime File Format������������������������������������������������������������������������������������������������������������������������ 642
Convert Video with Export Settings������������������������������������������������������������������������������ 642
Export Settings Dialog Box����������������������������������������������������������������������������������������������������������������� 644
Combine Video (Stitch Clips)��������������������������������������������������������������������������������������������������������������� 676
WebM and Ogg������������������������������������������������������������������������������������������������������������� 677
Summary���������������������������������������������������������������������������������������������������������������������� 678
xiv
■ Contents
■■Chapter 27: Working with Your RAW Video Files and Converting
Them to Audio��������������������������������������������������������������������������������������������������� 679
Convert Audio to (Export Settings)�������������������������������������������������������������������������������� 679
MP3���������������������������������������������������������������������������������������������������������������������������������������������������� 680
Waveform Audio (.wav)����������������������������������������������������������������������������������������������������������������������� 686
Theora Ogg (.ogg)������������������������������������������������������������������������������������������������������������������������������� 690
Working with Audio Files That Are Audio 3GA������������������������������������������������������������������������������������� 690
Summary���������������������������������������������������������������������������������������������������������������������� 690
■■Chapter 28: Working with Your RAW Video Files and Converting Them to
an Image Sequence������������������������������������������������������������������������������������������� 691
Convert to Other Web Formats (Image Sequence)������������������������������������������������������� 691
Bitmap Sequence Export settings������������������������������������������������������������������������������������������������������ 692
JPEG Sequence Export Settings��������������������������������������������������������������������������������������������������������� 696
PNG Sequence Export Settings����������������������������������������������������������������������������������������������������������� 697
GIF (Static) Image Sequence Export Settings������������������������������������������������������������������������������������� 699
Animated GIF�������������������������������������������������������������������������������������������������������������������������������������� 700
Summary���������������������������������������������������������������������������������������������������������������������� 703
■Chapter
■
29: Putting It into Practice with Media Encoder CC����������������������������� 705
Create a Video MP4 File����������������������������������������������������������������������������������������������� 705
Create an Audio MP3 File and a WAV File��������������������������������������������������������������������� 724
Summary���������������������������������������������������������������������������������������������������������������������� 729
■■Part VI: Working with Dreamweaver: Adding Images,
Animations, and Multimedia to HTML5 Pages�������������������������������� 731
■Chapter
■
30: Getting Started with Dreamweaver CC������������������������������������������� 733
Entering the Maze’s Center������������������������������������������������������������������������������������������ 733
Differences and Similarities Between Dreamweaver and Muse���������������������������������� 734
Setting up in Dreamweaver������������������������������������������������������������������������������������������ 736
Toolbar Overview�������������������������������������������������������������������������������������������������������������������������������� 740
xv
■ Contents
What is HTML5 (.html)?������������������������������������������������������������������������������������������������ 747
Import and Save Your File to Your Site������������������������������������������������������������������������� 752
Files Panel�������������������������������������������������������������������������������������������������������������������� 755
Fixing Errors����������������������������������������������������������������������������������������������������������������� 756
Summary���������������������������������������������������������������������������������������������������������������������� 756
■Chapter
■
31: Working with Images and Tags������������������������������������������������������ 757
Adding More Images to the Folder������������������������������������������������������������������������������� 760
Inserting Images on an HTML Page������������������������������������������������������������������������������ 762
Insert Panel����������������������������������������������������������������������������������������������������������������������������������������� 762
Working with SVG Images������������������������������������������������������������������������������������������������������������������ 768
Properties Panel��������������������������������������������������������������������������������������������������������������������������������� 769
Adding Images Inside Various Tags������������������������������������������������������������������������������ 775
A Bit of HTML History�������������������������������������������������������������������������������������������������������������������������� 776
<div> Tags������������������������������������������������������������������������������������������������������������������������������������������ 777
Sematic Elements������������������������������������������������������������������������������������������������������������������������������� 779
Are Tables Obsolete in Web Design?��������������������������������������������������������������������������������������������������� 790
Image Maps <area> and <map> Tags����������������������������������������������������������������������������������������������� 793
The