Tải bản đầy đủ (.pdf) (1,015 trang)

Graphics multimedia adobe creative cloud 1 pdf

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (41.34 MB, 1,015 trang )

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 and <source> Element����������������������������������������������������������������������������������������������� 796
The <details> and <summary> Elements����������������������������������������������������������������������������������������� 797
The <dialog> Element������������������������������������������������������������������������������������������������������������������������ 798
The <menu> and <menuitem> Elements������������������������������������������������������������������������������������������ 798

Inserting Images Favicons into Your Browser’s Tab����������������������������������������������������� 798
HTML5 and the Snippets Panel������������������������������������������������������������������������������������ 799

Summary���������������������������������������������������������������������������������������������������������������������� 800
■Chapter

32: Working with CSS�������������������������������������������������������������������������� 801
CSS Inline Internal or External Styles?������������������������������������������������������������������������� 801
Inline CSS������������������������������������������������������������������������������������������������������������������������������������������� 801
Internal CSS���������������������������������������������������������������������������������������������������������������������������������������� 804
External CSS��������������������������������������������������������������������������������������������������������������������������������������� 821

xvi


■ Contents

What Is CSS3?�������������������������������������������������������������������������������������������������������������� 827
Applying CSS to the <img> Tag���������������������������������������������������������������������������������������������������������� 828
Should You Add Background Images to Form Elements?������������������������������������������������������������������� 830
CSS3 Borders�������������������������������������������������������������������������������������������������������������������������������������� 830
Rounded CSS3 Borders���������������������������������������������������������������������������������������������������������������������� 831
Outline CSS2��������������������������������������������������������������������������������������������������������������������������������������� 833
CSS3 box-decoration-break��������������������������������������������������������������������������������������������������������������� 834
Adding CSS3 Filters and Shadows����������������������������������������������������������������������������������������������������� 834
Image Masking in CSS3?�������������������������������������������������������������������������������������������������������������������� 838
Adding Custom Images to Bullets������������������������������������������������������������������������������������������������������� 838

Creating CSS Animation Transitions and Transforms��������������������������������������������������� 840
CSS3 Animations�������������������������������������������������������������������������������������������������������������������������������� 841
CSS Transitions and Transitions Panel������������������������������������������������������������������������������������������������ 844

CSS Transforms 2D and 3D: It’s All About Perspective������������������������������������������������� 853

2D Transform�������������������������������������������������������������������������������������������������������������������������������������� 854
3D Transform�������������������������������������������������������������������������������������������������������������������������������������� 856

Summary���������������������������������������������������������������������������������������������������������������������� 859
■Chapter

33: Working with Images for Mobile Web Design�������������������������������� 861
CSS Floats�������������������������������������������������������������������������������������������������������������������� 861
z-index������������������������������������������������������������������������������������������������������������������������������������������������ 864
Clip����������������������������������������������������������������������������������������������������������������������������������������������������� 864

Responsive Media Queries and the View Port�������������������������������������������������������������� 865
Image Slices and Mobile Devices��������������������������������������������������������������������������������� 870
Media Queries (Mobile-First)���������������������������������������������������������������������������������������� 872
Scaling Images����������������������������������������������������������������������������������������������������������������������������������� 875
Scaling a div with a Background Image��������������������������������������������������������������������������������������������� 876
Loading a Different Image Based on Media Queries�������������������������������������������������������������������������� 877

Column Count��������������������������������������������������������������������������������������������������������������� 878
CSS for Print with CSS Designer Panel������������������������������������������������������������������������ 878
Summary���������������������������������������������������������������������������������������������������������������������� 879
xvii


■ Contents

■Chapter

34: What Is JavaScript?����������������������������������������������������������������������� 881
Creating a New JavaScript File������������������������������������������������������������������������������������ 883

Insert Rollover Images�������������������������������������������������������������������������������������������������� 885
Behaviors Panel������������������������������������������������������������������������������������������������������������ 888
Additional Behaviors��������������������������������������������������������������������������������������������������������������������������� 892

JavaScript and the Snippets Panel������������������������������������������������������������������������������� 894
Print Preview���������������������������������������������������������������������������������������������������������������� 897
Summary���������������������������������������������������������������������������������������������������������������������� 898
■■Chapter 35: Working with Bootstrap, Templates, Library Items,
and the Assets Panel����������������������������������������������������������������������������������������� 899
Bootstrap���������������������������������������������������������������������������������������������������������������������� 899
Working with Templates, Library Items, and the Assets Panel������������������������������������� 905
Templates������������������������������������������������������������������������������������������������������������������������������������������� 905
Library Items�������������������������������������������������������������������������������������������������������������������������������������� 917

Summary���������������������������������������������������������������������������������������������������������������������� 927
■Chapter

36: Working with Video, Audio, and Animations���������������������������������� 929
Inserting HTML5 Video������������������������������������������������������������������������������������������������� 930
Streaming and Embedded Video or Have The Video On Your Own Site?�������������������������������������������� 930
Setup and Testing������������������������������������������������������������������������������������������������������������������������������� 931
The Track Tag�������������������������������������������������������������������������������������������������������������������������������������� 935
Mobile and Video Scaling������������������������������������������������������������������������������������������������������������������� 936
Can You Insert Video into a Background Using CSS?�������������������������������������������������������������������������� 936

Inserting HTML5 Audio������������������������������������������������������������������������������������������������� 936
Setup and Testing������������������������������������������������������������������������������������������������������������������������������� 936
Can You Insert Audio into a Background Using CSS?������������������������������������������������������������������������� 940
Audio CSS Aural���������������������������������������������������������������������������������������������������������������������������������� 940


Insert a Canvas Element����������������������������������������������������������������������������������������������� 940
Importing Animate Canvas into Dreamweaver����������������������������������������������������������������������������������� 941
Canvas Element Created Without Animate����������������������������������������������������������������������������������������� 942

xviii


■ Contents

Insert Animated Composition or OAM��������������������������������������������������������������������������� 944
Inserting Flash SWF and Flash Video��������������������������������������������������������������������������� 947
Insert Plug-in���������������������������������������������������������������������������������������������������������������� 948
Summary���������������������������������������������������������������������������������������������������������������������� 948
■Chapter

37: Additional Options to Apply Images in Dreamweaver�������������������� 949
Target Attributes����������������������������������������������������������������������������������������������������������� 949
Graphs and Charts�������������������������������������������������������������������������������������������������������� 951
Web Fonts�������������������������������������������������������������������������������������������������������������������� 952
CC Libraries Panel�������������������������������������������������������������������������������������������������������� 958
Dreamweaver ➤ Extract PSD�������������������������������������������������������������������������������������� 958
Summary���������������������������������������������������������������������������������������������������������������������� 960
■Chapter

38: Final Testing, Getting Ready to Upload Your Site��������������������������� 961
Edit ➤ Preferences of Browsers���������������������������������������������������������������������������������� 961
Validation Options and Uploading Site������������������������������������������������������������������������� 963
Site Reports Panel������������������������������������������������������������������������������������������������������������������������������ 964
Link Checker Panel����������������������������������������������������������������������������������������������������������������������������� 964
Validation Panel���������������������������������������������������������������������������������������������������������������������������������� 965

Output Panel��������������������������������������������������������������������������������������������������������������������������������������� 967
Local and Remote Sites���������������������������������������������������������������������������������������������������������������������� 967
Manage Site���������������������������������������������������������������������������������������������������������������������������������������� 968

Check Advanced Settings…����������������������������������������������������������������������������������������� 972
Uploading Site to Remote Server��������������������������������������������������������������������������������� 972
Summary���������������������������������������������������������������������������������������������������������������������� 976
■Chapter

39: Putting It into Practice with Dreamweaver CC������������������������������� 977
Adding Images to Web Pages Review�������������������������������������������������������������������������� 977
Carousel Gallery (Bootstrap)����������������������������������������������������������������������������������������� 979
Video with Channel Changer���������������������������������������������������������������������������������������� 986
Summary���������������������������������������������������������������������������������������������������������������������� 989

xix


■ Contents

■■Part VII: Further Dreamweaver Integration with Other Adobe
Products for Websites�������������������������������������������������������������������� 991
■■Chapter 40: What Other Programs That Are Part of Adobe Creative Cloud
Can I Use to Display My Graphics or Multimedia Online?���������������������������������� 993
Additional Creative Cloud Software for Your Projects��������������������������������������������������� 993
What Additional Adobe Creative Cloud Software Can You Use to Display Graphics or
Multimedia Online?������������������������������������������������������������������������������������������������������ 994
Adobe InDesign CC����������������������������������������������������������������������������������������������������������������������������� 994
Adobe Experience Design������������������������������������������������������������������������������������������������������������������� 994
Adobe Portfolio����������������������������������������������������������������������������������������������������������������������������������� 995

Adobe Spark: Storytelling with Audio and Video��������������������������������������������������������������������������������� 996
Exporting to Phone GAP Build������������������������������������������������������������������������������������������������������������� 997

Test Your Knowledge Quiz�������������������������������������������������������������������������������������������� 997
Summary�������������������������������������������������������������������������������������������������������������������� 1000
Index������������������������������������������������������������������������������������������������������������������� 1001

xx


About the Author
Jennifer Harder has worked in the graphic design industry for over ten years. She has a degree in
graphic communications and is currently teaching Acrobat, InDesign, and Dreamweaver courses
at Langara College. As a freelancer, Jennifer frequently works with Adobe PDFs and checks them
before they go to print or are uploaded to the web. She enjoys talking about Adobe software and
her interests include writing, illustration, and working on her websites.

xxi


About the Technical Reviewers
Logan West is the Assistant Director of Marketing and Communications at Fordham University.
Logan joined Fordham after working with the University of Minnesota, Duluth, as their web
manager and multimedia designer. During his time in higher education, Logan has focused on
two university-wide redesigns, playing an active member as a designer and brand manager.
Logan holds two bachelor’s degrees in graphic design and German studies from the University of
Minnesota, Duluth, and is currently pursuing his master’s degree in media management at Fordham
University.

Breanna Craven is a visual problem solver and digital and web designer. She’s worked remotely

and in-house with industry-leading tech firms and consultant agencies on projects for webrelated design, defining brands and the user experience. Design and layout are central in my
career and what I do. I care deeply about creating useful and beautiful designs that help people
and businesses make a difference. I enjoy being involved in the full process and touch on many
aspects of web from sketching to design, and even front-end WordPress development. I am
currently based in Duluth, Minnesota, after four years leading the design and creative direction at
Faster Solutions Inc. Connect with her through LinkedIn.

xxiii


Acknowledgements
For their patience and advice, I would like to thank the following people; without them, I could never
have written this book. My parents for encouraging me to read large computer textbooks that would one
day inspire me to write my own books. My dad for talking the time to shoot video footage with me at the
Loafing Shed Glass Studio and Gallery in Surrey, British Columbia, Canada. Glass artist Robert Gary Parkes,
owner of the Loafing Shed, and his apprentice, Jay, for their permission to shoot video and their time and
demonstration of the beautiful art and history of glass blowing. My friend Osvaldo DeSouza; with his
musical composition talents, he created the background music for my video. My program coordinator at
Langara College, Raymond Chow, whose knowledge of video rendering and working in the movie industry
helped me to compile the video and understand the importance of preplanning the script so I could tell a
story. I am grateful for the time he took to proofread select chapters on video creation. My printing boss,
Eddie, at Pender Copy Ltd. for his inspiration and encouraging me to write this book.
At Apress, I would like to thank Natalie and Jessica for showing me how to layout a professional
textbook and pointing out even when you think you’ve written it all, there’s still more to write. Also thanks to
the technical reviewers Logan West and Breanna Craven for taking the time to review my chapters and their
encouraging comments. And the rest of the Apress team—thank you for printing this book and making my
dream a reality. I am truly grateful and blessed.

xxv



PART I

Welcome to the Adobe Creative
Cloud. Where Should You
Begin?


×