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 https://doi.org/10.1007/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 [email protected], 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 [email protected], or visit http://www.apress.com/ 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 http://www.apress.com/bulk-sales. 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 http://www.apress.com/source-code. 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
Description: