chơi xổ số keno trực tuyến

{"appState":{"pageLoadApiCallsStatus":true},"authorState":{"author":{"headers":{"timestamp":"2025-03-04T08:49:16+00:00"},"authorId":9574,"data":{"name":"David Karlins","slug":"david-karlins","description":" David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of Social Media Marketing All-in-One For Dummies and author of Digital Landscape &amp; Nature Photography For Dummies.","photo":{"src":null,"width":0,"height":0}}},"authorLoadedStatus":"success"},"listState":{"list":{"count":10,"total":24,"items":[{"headers":{"creationTime":"2020-03-03T20:50:01+00:00","modifiedTime":"2024-12-03T19:14:45+00:00","timestamp":"2024-12-03T21:01:09+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Analytics","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33621"},"slug":"analytics","categoryId":33621}],"title":"Adobe Analytics For Dummies Cheat Sheet","strippedTitle":"adobe analytics for dummies cheat sheet","slug":"adobe-analytics-for-dummies-cheat-sheet","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"The Adobe Analysis Workspace is intuitive, but there are a lot of features you need to know about to optimize your consumer data analysis.","noIndex":0,"noFollow":0},"content":"Adobe Analytics is the most powerful tool available for analyzing digital consumer data, but it’s easier to grasp if you know where to start. Master the most basic and widely applicable features in the easiest way. Get details on two standard calculated metrics in the analytics industry that focus on analyzing engagement on your site, app, or other digital property. Discover several tips to improve your productivity in Analysis Workspace.","description":"Adobe Analytics is the most powerful tool available for analyzing digital consumer data, but it’s easier to grasp if you know where to start. Master the most basic and widely applicable features in the easiest way. Get details on two standard calculated metrics in the analytics industry that focus on analyzing engagement on your site, app, or other digital property. Discover several tips to improve your productivity in Analysis Workspace.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33621,"title":"Analytics","slug":"analytics","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33621"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[],"relatedArticles":{"fromBook":[{"articleId":263444,"title":"Adobe Analytics vs. Google Analytics","slug":"adobe-analytics-vs-google-analytics","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263444"}},{"articleId":263429,"title":"8 Adobe Analytics Custom Segments","slug":"8-adobe-analytics-custom-segments","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263429"}},{"articleId":263415,"title":"How to Use Adobe Analytics to Narrow in on Your Market Segment: Identifying Purchasers","slug":"how-to-use-adobe-analytics-to-narrow-in-on-your-market-segment-identifying-purchasers","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263415"}},{"articleId":263392,"title":"Adobe Analytics and Search Engine Data","slug":"adobe-analytics-and-search-engine-data","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263392"}},{"articleId":263385,"title":"How to Use Adobe Analytics to Analyze the Success of Your Marketing Channels","slug":"how-to-use-adobe-analytics-to-analyze-the-success-of-your-marketing-channels","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263385"}}],"fromCategory":[{"articleId":263444,"title":"Adobe Analytics vs. Google Analytics","slug":"adobe-analytics-vs-google-analytics","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263444"}},{"articleId":263429,"title":"8 Adobe Analytics Custom Segments","slug":"8-adobe-analytics-custom-segments","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263429"}},{"articleId":263415,"title":"How to Use Adobe Analytics to Narrow in on Your Market Segment: Identifying Purchasers","slug":"how-to-use-adobe-analytics-to-narrow-in-on-your-market-segment-identifying-purchasers","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263415"}},{"articleId":263392,"title":"Adobe Analytics and Search Engine Data","slug":"adobe-analytics-and-search-engine-data","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263392"}},{"articleId":263385,"title":"How to Use Adobe Analytics to Analyze the Success of Your Marketing Channels","slug":"how-to-use-adobe-analytics-to-analyze-the-success-of-your-marketing-channels","categoryList":["technology","software","adobe-products","analytics"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/263385"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281619,"slug":"adobe-analytics-for-dummies","isbn":"9781119446088","categoryList":["technology","software","adobe-products","analytics"],"amazon":{"default":"//www.amazon.com/gp/product/1119446082/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119446082/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119446082-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119446082/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119446082/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-analytics-for-dummies-cover-9781119446088-203x255.jpg","width":203,"height":255},"title":"Adobe Analytics For Dummies","testBankPinActivationLink":"","bookOutOfPrint":false,"authorsInfo":"<p><b data-author-id=\"34434\">Eric Matisoff</b> is Adobe's global evangelist for their Analytics solution. He appears regularly at tech and industry events to speak about Adobe products and their potential. <b data-author-id=\"9574\">David Karlins</b> has written 40 books on digital communications and design, including <i>HTML 5 &amp; CSS 3 For Dummies.</i> </p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}},{"authorId":34434,"name":"Eric Matisoff","slug":"eric-matisoff","description":" <p><b>Eric Matisoff</b> is Adobe&#39;s global evangelist for their Analytics solution. He appears regularly at tech and industry events to speak about Adobe products and their potential. <b>David Karlins</b> has written 40 books on digital communications and design, including <i>HTML 5 &#38; CSS 3 For Dummies.</i> ","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/34434"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;analytics&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119446088&quot;]}]\" id=\"du-slot-656cec95543b7\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;analytics&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119446088&quot;]}]\" id=\"du-slot-656cec9555f7c\"></div></div>"},"articleType":{"articleType":"Cheat Sheet","articleList":[{"articleId":260415,"title":"The Most Used Features in Adobe Analytic's Analysis Workspace","slug":"","categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/260415"}},{"articleId":260418,"title":"Engagement Metrics You Need for Adobe Analytics","slug":"","categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/260418"}},{"articleId":260423,"title":"Adobe Analytics Analysis Workspace Productivity Hacks","slug":"","categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/260423"}}],"content":[{"title":"The Most Used Features in Adobe Analytic's Analysis Workspace","thumb":null,"image":null,"content":"<p>Adobe’s Analysis Workspace is where you perform the bulk of your data analysis. The interface is intuitive, but there’s a lot to it. The following tips will guide you through the easiest ways to access the most widely used features:</p>\n<ul>\n<li>Log in to the <a href=\"//experiencecloud.adobe.com/\">Adobe Experience Cloud</a>. You need your Adobe ID and password, which your administrator set up. After you’ve logged in, click the Solution Selector icon in the top-right corner (it looks like three rows of three dots each), and choose Analytics from the drop-down menu.</li>\n<li>To make sure you’re in Analysis Workspace, look at the top-left of your screen and confirm that the word <em>Workspace</em> is highlighted. If Reports is highlighted instead, click Workspace to switch to Adobe’s most powerful browser-based analytics tool.</li>\n<li>Create a new project by clicking the blue Create New Project button and then choosing a blank template or one of Adobe’s preconfigured templates.</li>\n<li>Define a timeframe for your project by clicking anywhere in the date that appears in the top-right corner of Analysis Workspace. You can manually enter dates in the two boxes (Start and Finish), or click in the calendar to set start and finish dates for your project’s timeframe. You can also click the drop-down menu above the blue Apply button to find an abundance of prebuilt time ranges, including Last 7 Days and Last Month.</li>\n<li>Create a panel for tables or visualizations by clicking the Add Blank Panel link in the large section of Analysis Workspace to the right of your screen. You can choose from a set of table and visualization options.</li>\n<li>Toggle between displaying and hiding the left rail by hovering your cursor over (or off) the left edge of the Analysis Workspace screen.</li>\n<li>Quickly access panels, visualizations, and components by clicking one of the three icons at the top of the left rail.</li>\n<li>Add a freeform table by clicking the Visualizations icon in the left rail, and then dragging and dropping the top item, Freeform Tables, into your blank panel on the right.</li>\n<li>Add a dimension, metric, segment, or timeframe to a panel by clicking Components in the left rail and then dragging the element to your freeform table.</li>\n<li>Quickly find components by entering a string of numbers, letters, and symbols in the Search box at the top of the left rail.</li>\n<li>When in doubt, right-click. Many of the most widely used features in Analysis Workspace appear in context menus.</li>\n</ul>\n"},{"title":"Engagement Metrics You Need for Adobe Analytics","thumb":null,"image":null,"content":"<p>Take advantage of the advanced features in Adobe Analytics by building and applying <em>calculated metrics,</em> the data points created in Adobe Analytics after data has been processed and is accessible in the Adobe interface. Interestingly, calculated metrics don’t have to contain a calculation, but they usually do. A calculated metric in Adobe Analytics could be a metric with a different attribution method, segment, or calculation applied to it. Following are several simple calculated metrics that you should find useful as you begin your Adobe Analytics journey.</p>\n<h2>Page views per visit metric</h2>\n<p>Companies care about the amount of visitor engagement on their website and mobile app. A common metric that dissects engagement uses this calculation: page views divided by visits. The thinking behind this metric is simple:</p>\n<ul>\n<li><strong>Page views: </strong>Focuses on quantity, showing the amount of content viewed</li>\n<li><strong>Visits: </strong>Focuses on quality and is used as the denominator to ensure that the analysis is focusing on visits in which a lot of content is viewed at once</li>\n</ul>\n<p>The page views per visit metric has been used by digital analysts for decades and provides a useful lens into the quality of the visits that are being driven by your marketing channels, device types, or geographies. The following figure shows how the metric is built in Adobe’s interface.</p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-260420\" src=\"//coursofppt.com/wp-content/uploads/analytics-metric.jpg\" alt=\"analytics-metric\" width=\"535\" height=\"266\" /></p>\n<p>When you apply the page views per visit metric (or any calculated metric), also include in your analysis a metric that isn’t calculated. This non-calculated metric will help provide context to your analysis. For example, suppose you’re analyzing mobile devices that access your site and notice that a specific device, the Microsoft Kin, has the highest page views per visit by far. Before you call your team to let them know that your site has to be rebuilt with the dimensions of this device from 2010 in mind, it would be smart to add the visits and unique visitors metrics to your analysis. This additional context will help you realize that page views per visit was high for the Kin because only one visitor came to your site with that device. The additional context of your non-calculated metrics provided a valuable lesson: Don’t be fooled by high calculations without context.</p>\n<h2>Content velocity</h2>\n<p>Unfortunately, page views per visit has other faults besides a potential lack of context. When page views per visit is applied to the page dimension, it shows only the number of times each page is revisited, on average, within a visit. A more interesting question is, “What pages help drive additional page views on other pages?” The answer will provide you with the pages that are most likely to encourage your visitors to be engaged on your site. This additional metric is easy to build. The metrics are the same as page views per visit, with page views in the numerator and visits in the denominator. The only change has to do with the attribution model applied to the numerator. Use the Calculated Metric Builder in Adobe to apply a non-default attribution model set to Participation, as shown in the following figure.</p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-260419\" src=\"//coursofppt.com/wp-content/uploads/analytics-calculated-metric.jpg\" alt=\"analytics-calculated-metric\" width=\"535\" height=\"269\" /></p>\n<p>Thanks to the magic of participation, every subsequent page view is included in the count of page views when you apply participation. After you create the content velocity metric, you can apply it to the page dimension to discover the pages that are not only being viewed often per visit but are also convincing your visitors to continue reading other pages on your site, too.</p>\n"},{"title":"Adobe Analytics Analysis Workspace Productivity Hacks","thumb":null,"image":null,"content":"<p>Face it: You’re busy at work. Whether you’re a marketer, an analyst, or a data scientist, your time is limited and your calendar is full of meetings. To make the most of the time that you spend in Adobe’s Analysis Workspace tool, use the following list of our favorite productivity hacks to make the most of every second that you spend in the Adobe interface:</p>\n<ul>\n<li>When working in a freeform table, you may want to select multiple rows of data at the same time. Shift-click (Mac and PC) to select multiple contiguous rows of data. Or Command-click (Mac) or Control-click (PC) to select multiple noncontiguous rows of data.</li>\n<li>Our most-used keyboard shortcut is Command+S (Mac) or Control+S (PC) to save the current project. We’re compulsive savers because we know there’s always a chance that the browser or computer will crash, and we’d hate to lose our analysis work. Add Shift to this keyboard combination (Command+ Shift +S on a Mac or Control+Shift +S on a PC) to Save As so you can duplicate and rename the project.</li>\n<li>Another useful keyboard shortcut is Command+C (Mac) or Control+C (PC) to copy data from a freeform table to the clipboard. We like to use this to more easily extract data out of Analysis Workspace into other analysis tools such as Excel or even into an email message.</li>\n<li>If we were to analyze the keyboard shortcuts that we use the most, Command+Z (Mac) or Control+Z (PC) would be high on this list. This keyboard shortcut for undo is useful when analyzing because you often begin exploring your data in one path, realize there isn’t much of interest there, and then want to undo your work step by step. If you ever undo too far, you can always press Command+Shift+Z (Mac) or Control+Shift+Z (PC) to redo a step.</li>\n<li>We love creating calculated metrics on-the-fly. This task is necessary when you have two metrics in a freeform table to which you want to apply a simple calculation: divide, subtract, add, or multiply. First, highlight the column headers of two metrics (by clicking to highlight one metric, then Shift-click or Command-click or Control-click a second metric). Second, right-click one of the highlighted column headers. Third, click Create Metric from Selection and choose the math operator to apply. If you want to apply a function to just a single calculated metric, apply Mean, Median, Column Max, Column Min, or Column Sum to any single metric. One final timesaver is to open a single metric in Calculated Metric Builder, as shown at the end of the following figure.</li>\n</ul>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-260424\" src=\"//coursofppt.com/wp-content/uploads/analytics-single-metric.jpg\" alt=\"analytics-single-metric\" width=\"535\" height=\"362\" /></p>\n<p>Each of these productivity hacks will help speed your analysis and increase your skill. We hope you enjoy all the free time you now have to continue learning about Analysis Workspace!</p>\n"}],"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":"Six months","lifeExpectancySetFrom":"2024-12-03T00:00:00+00:00","dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":260427},{"headers":{"creationTime":"2017-03-27T16:51:46+00:00","modifiedTime":"2024-11-13T14:37:39+00:00","timestamp":"2024-11-13T15:01:10+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Programming & Web Design","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33592"},"slug":"programming-web-design","categoryId":33592},{"name":"General Programming & Web Design","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33610"},"slug":"general-programming-web-design","categoryId":33610}],"title":"Building Websites All-in-One For Dummies Cheat Sheet","strippedTitle":"building websites all-in-one for dummies cheat sheet","slug":"building-websites-all-in-one-for-dummies-cheat-sheet","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Note: The following cheat sheet is from Building Websites All-in-One For Dummies which published in 2012; therefore, this content may be outdated. For more curr","noIndex":1,"noFollow":0},"content":"Note: The following cheat sheet is from <em>Building Websites All-in-One For Dummies</em> which published in 2012; therefore, this content may be outdated. For more current information on website building, please see <a href=\"//coursofppt.com/book/technology/programming-web-design/general-programming-web-design/html-css-javascript-all-in-one-for-dummies-299520/\">HTML, CSS, & JavaScript All-in-One For Dummies</a>.\r\n\r\nWhether complex or simple, websites require that you make decisions — such as color, theme, and tone — and that you juggle many pieces of the project — like code, style sheets, and graphics. Knowing which resources to turn to for help implementing HTML5, and a few key points about incorporating graphics and video, can help you.","description":"Note: The following cheat sheet is from <em>Building Websites All-in-One For Dummies</em> which published in 2012; therefore, this content may be outdated. For more current information on website building, please see <a href=\"//coursofppt.com/book/technology/programming-web-design/general-programming-web-design/html-css-javascript-all-in-one-for-dummies-299520/\">HTML, CSS, & JavaScript All-in-One For Dummies</a>.\r\n\r\nWhether complex or simple, websites require that you make decisions — such as color, theme, and tone — and that you juggle many pieces of the project — like code, style sheets, and graphics. Knowing which resources to turn to for help implementing HTML5, and a few key points about incorporating graphics and video, can help you.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}},{"authorId":9229,"name":"Doug Sahlin","slug":"doug-sahlin","description":" <p><b>Joe Hutsko</b> has been writing about computers, gadgets, and video games for over 20 years. <b>Barbara Boyd</b> is coauthor with Joe of three editions of <i>iPhone All&#45;in&#45;One For Dummies</i>. <b>Jesse Feiler</b> writes apps and books about building and using apps. <b>Doug Sahlin</b> is the author of more than 20 how&#45;to books, many of them bestsellers. ","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9229"}}],"primaryCategoryTaxonomy":{"categoryId":33610,"title":"General Programming & Web Design","slug":"general-programming-web-design","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33610"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[],"relatedArticles":{"fromBook":[],"fromCategory":[{"articleId":299575,"title":"HTML, CSS, & JavaScript All-in-One For Dummies Cheat Sheet","slug":"html-css-javascript-all-in-one-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","general-programming-web-design"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/299575"}},{"articleId":265680,"title":"Using DevOps To Improve Engineering","slug":"tips-for-improving-engineering-performance-with-devops","categoryList":["technology","programming-web-design","general-programming-web-design"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/265680"}},{"articleId":265675,"title":"How To Automate DevOps in the Cloud","slug":"make-more-of-your-cloud-tools-automating-devops-in-the-cloud","categoryList":["technology","programming-web-design","general-programming-web-design"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/265675"}},{"articleId":265672,"title":"How To Choose a Cloud Service Provider for DevOps","slug":"choosing-the-best-cloud-service-provider-features-and-tools-for-devops","categoryList":["technology","programming-web-design","general-programming-web-design"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/265672"}},{"articleId":265664,"title":"How to Form DevOps Teams in Your Organization","slug":"how-to-form-devops-teams-in-your-organization","categoryList":["technology","programming-web-design","general-programming-web-design"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/265664"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":292544,"slug":"building-websites-all-in-one-for-dummies","isbn":"9781118270035","categoryList":["technology","programming-web-design","general-programming-web-design"],"amazon":{"default":"//www.amazon.com/gp/product/1118270037/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1118270037/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1118270037-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1118270037/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1118270037/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/building-websites-all-in-one-for-dummies-book-cover-9781118270035-202x255.jpg","width":202,"height":255},"title":"Building Websites All-in-One For Dummies","testBankPinActivationLink":"","bookOutOfPrint":false,"authorsInfo":"<p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}},{"authorId":9229,"name":"Doug Sahlin","slug":"doug-sahlin","description":" <p><b>Joe Hutsko</b> has been writing about computers, gadgets, and video games for over 20 years. <b>Barbara Boyd</b> is coauthor with Joe of three editions of <i>iPhone All&#45;in&#45;One For Dummies</i>. <b>Jesse Feiler</b> writes apps and books about building and using apps. <b>Doug Sahlin</b> is the author of more than 20 how&#45;to books, many of them bestsellers. ","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9229"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;programming-web-design&quot;,&quot;general-programming-web-design&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781118270035&quot;]}]\" id=\"du-slot-65523a3778476\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;programming-web-design&quot;,&quot;general-programming-web-design&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781118270035&quot;]}]\" id=\"du-slot-65523a377a165\"></div></div>"},"articleType":{"articleType":"Cheat Sheet","articleList":[{"articleId":174684,"title":"Online Resources for Building Websites","slug":"online-resources-for-building-websites","categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/174684"}},{"articleId":174683,"title":"Reminders for Preparing Web Graphics and Video","slug":"reminders-for-preparing-web-graphics-and-video","categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/174683"}}],"content":[{"title":"Online Resources for Building Websites","thumb":null,"image":null,"content":"<p>Amidst all the clutter on the web lie valuable free online resources for building essential elements of an inviting and accessible website. So that you don’t have to sift through the clutter, here are some of the best.</p>\n<p><a href=\"//www.w3schools.com/\">W3schools.com</a> provides the most extensive online library of code resources, but that library can be overwhelming. The following links take you to some useful landing points to get started:</p>\n<ul class=\"level-one\">\n<li>\n<p class=\"first-para\">Instructions on <a href=\"//www.w3schools.com/html/\">creating a basic HTML page</a></p>\n</li>\n<li>\n<p class=\"first-para\">Tutorials on building <a href=\"//www.w3schools.com/html/html_css.asp\">inline, internal, and external CSS</a></p>\n</li>\n<li>\n<p class=\"first-para\">Basic <a href=\"//www.w3schools.com/css/css_howto.asp\">CSS parameters, syntax, and instructions</a> for adding CSS to web pages</p>\n</li>\n</ul>\n"},{"title":"Reminders for Preparing Web Graphics and Video","thumb":null,"image":null,"content":"<p>Websites without graphics are almost non-existent these days. When you create graphics, optimize images, or prepare video for a website, the results have to be sharp, detailed, and fast loading. Three popular forms of graphics you use on a website are photo-realistic images, images such as logos with large areas of solid color, and images that are a combination of images and text. Here are some friendly reminders for creating and optimizing graphics for websites:</p>\n<ul class=\"level-one\">\n<li>\n<p class=\"first-para\"><b></b>Optimize photo-realistic images using the JPEG format.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>Optimize images with large areas of solid color using the GIF format.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>When optimizing graphics that have text overlaid on a photorealistic image, create separate slices for the areas of the image that are photorealistic, and create additional slices for the areas of the image that contain text. Export the areas containing text using the GIF format, and export the photo-realistic areas of the image using the JPEG format.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>For high quality JPEG images, use a quality setting of 70 when exporting. For smaller JPEG images, you can get by with a quality setting of 50.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>If you’re creating a photo gallery for a product, or for a photographer, export the images in the JPEG format with a quality setting of 80.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>When compressing images using the JPEG format, pay careful attention to the edges of objects in the image. When you begin to see pixels, or the edges lack definition, you’ve compressed the image too far.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>When exporting images using the GIF file format, use the least number of colors that yields a crisp image and you’ll have a fast loading image.</p>\n</li>\n<li>\n<p class=\"first-para\"><b></b>When you resample images for websites, the maximum resolution you need is 72 pixels per inch.</p>\n</li>\n</ul>\n<p>Websites with no video are becoming rarer. Video is everywhere on the Internet: for entertainment, in ads, to promote rock stars and other artists. When video is well done, it’s a thing of beauty. However there are some things you need to consider when adding video to a web page:</p>\n<ul class=\"level-one\">\n<li>\n<p class=\"first-para\"><b>Video takes up lots of bandwith. </b>If the bandwidth for a website is exceeded, the charge can be rather costly. Instead of hosting video on a website, upload it to YouTube, and then embed the video in a webpage or blog.</p>\n</li>\n<li>\n<p class=\"first-para\"><b>Don’t violate copyright laws. </b>Don’t copy video from other websites, or other people’s YouTube videos and use them on your website.</p>\n</li>\n<li>\n<p class=\"first-para\"><b>Check the license: </b>If you do use a video from a supplier or manufacturer on a commercial website, make sure you are covered by the supplier or manufacturer’s license.</p>\n</li>\n<li>\n<p class=\"first-para\"><b>Use a high quality camcorder to record video: </b>No, an iPhone is not a high quality camcorder. If you encode poor quality video for the web, you get poor quality video. Remember the old axiom: Garbage in, garbage out.</p>\n</li>\n<li>\n<p class=\"first-para\"><b>Make sure the website viewers have the necessary plug-ins to view the video. </b></p>\n</li>\n<li>\n<p class=\"first-para\"><b>If you create HTML5 pages with video, make sure the intended audience for the site uses HTML5-compliant browsers.</b></p>\n</li>\n<li>\n<p class=\"first-para\"><b>Don’t use transitions when you edit multiple video clips to create a video for the web.</b> Video transitions look great on HD video, but don’t look good when you encode a video for the web.</p>\n</li>\n</ul>\n"}],"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":"Six months","lifeExpectancySetFrom":"2024-11-08T00:00:00+00:00","dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":208262},{"headers":{"creationTime":"2021-02-14T03:29:19+00:00","modifiedTime":"2023-02-23T19:59:56+00:00","timestamp":"2023-09-14T18:19:12+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"Adobe Illustrator CC For Dummies Cheat Sheet","strippedTitle":"adobe illustrator cc for dummies cheat sheet","slug":"adobe-illustrator-cc-for-dummies-cheat-sheet","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Explore tips on how to find and add SVG filters as well as resources for creating your own SVG filters. Also explore how to hand off SVG code.","noIndex":0,"noFollow":0},"content":"Many of the most dramatic changes in how <a href=\"//coursofppt.com/software/adobe/illustrator/new-features-for-placing-images-in-illustrator-cc/\" target=\"_blank\" rel=\"noopener\">Illustrator is being used</a> are taking place in the realm of translating vector images to the web, and the underrated SVG format is the key link in that process. SVG files maintain the treasured scalability features of vector artwork and are supported nearly universally in websites and web development environments. When you prepare vector artwork for the web, it’s important to avoid Illustrator’s standard effects and, instead, use SVG filters.\r\n\r\nIllustrator comes with a decent (but minimalist) set of SVG filters, but here are some tips on how to find and add SVG filters as well as resources for creating your own SVG filters. For those who work with web and app developers, make their lives easier and more productive by checking out the cheat sheet for handing off SVG code.","description":"Many of the most dramatic changes in how <a href=\"//coursofppt.com/software/adobe/illustrator/new-features-for-placing-images-in-illustrator-cc/\" target=\"_blank\" rel=\"noopener\">Illustrator is being used</a> are taking place in the realm of translating vector images to the web, and the underrated SVG format is the key link in that process. SVG files maintain the treasured scalability features of vector artwork and are supported nearly universally in websites and web development environments. When you prepare vector artwork for the web, it’s important to avoid Illustrator’s standard effects and, instead, use SVG filters.\r\n\r\nIllustrator comes with a decent (but minimalist) set of SVG filters, but here are some tips on how to find and add SVG filters as well as resources for creating your own SVG filters. For those who work with web and app developers, make their lives easier and more productive by checking out the cheat sheet for handing off SVG code.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221b206bab6\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221b206c469\"></div></div>"},"articleType":{"articleType":"Cheat Sheet","articleList":[{"articleId":0,"title":"","slug":null,"categoryList":[],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/"}}],"content":[{"title":"How to apply SVG filters in Illustrator","thumb":null,"image":null,"content":"<p>When you create SVG files for screens in Illustrator and you want to apply effects (like drop-shadows), you should apply those as SVG filters. That way, your SVG files retain infinite scalability without distortion.</p>\n<p>The following steps walk you through applying an SVG filter to graphics in Illustrator:</p>\n<ol>\n<li>Select the object(s) to which you are applying the filter.</li>\n<li>Choose Effect→SVG Filters.</li>\n<li>Select a filter from the list that appears.<br />\nMost filters have descriptive names. For example, the ones with <em>shadow</em> in the name are drop-shadows, the ones with <em>gaussian</em> in the name are gaussian blurs. The workflow is a bit odd and roundabout, but you need to first select a filter to access all the options available for applying one.</li>\n<li>To change the selected filter:\n<ul>\n<li>Keep the object to which the filter was applied selected, and open the Appearance panel by choosing Window→Appearance.</li>\n<li>In the Appearance panel, click the SVG filter that appears in the Fill section of the panel. The Apply SVG Filter panel opens.</li>\n<li>In the Apply SVG Filter panel, change the applied filter.</li>\n<li>To see how the filter will look, select the Preview check box, as shown in the figure.<br />\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-268253\" src=\"//coursofppt.com/wp-content/uploads/illustrator-preview-filter.jpg\" alt=\"preview the SVG filter\" width=\"434\" height=\"400\" /></li>\n</ul>\n</li>\n<li>After you settle on a filter, click OK in the Apply SVG Filter panel.</li>\n</ol>\n"},{"title":"How to add SVG filters to Illustrator","thumb":null,"image":null,"content":"<p>Illustrator’s set of SVG filters is minimalist, but you can enhance it by designing your own filters or downloading prepackaged sets of SVG filters from online sources. Designing filters involves coding, but it is doable if you&#8217;re comfortable with HTML. I recommend the tutorial at <a href=\"//www.w3schools.com/graphics/svg_filters_intro.asp\">w3Schools</a> for creating SVG filters. Or you can purchase sets of filters online, and even find some nice sets of free SVG filters at <a href=\"//www.creatingo.com/import-and-use-svg-filters-in-adobe-illustrator.html\">Creatingo</a>.</p>\n<p>After you purchase or create your own SVG filters, here’s how you install them in Illustrator:</p>\n<ol>\n<li>Choose Effect→SVG Filters→Import SVG Filter.</li>\n<li>In the dialog that opens, navigate to and double-click the SVG filters file you created or downloaded free.<br />\nThe file you&#8217;re looking for should be an SVG file (multiple filters are bundled in a single SVG file).<br />\nYour new filters are now available in the SVG Filters submenu.</li>\n<li>Choose Effect→SVG Filters to apply your new filters to selected objects.</li>\n</ol>\n"},{"title":"How to hand off SVG code from Illustrator to a developer","thumb":null,"image":null,"content":"<p>Often the SVG graphics you create in Illustrator are handed off to game designers, animators, infographics, or other output, where developers will work with the code behind the SVG graphic. As an illustrator, you don’t need to know how to create that code, but you may need to know how to get it and turn it over to a developer. Here’s how.</p>\n<p>The pathway to exporting your SVG graphics as code runs through Illustrator’s Save functions. The Save menu has options (not easy to find) that export your file as SVG code. You will likely want to be in real-time communication with your screen developer as you generate that code because several options are determined by how that code will be used:</p>\n<ol>\n<li>Choose File→Save (or Save As if you&#8217;re resaving a file).</li>\n<li>In the dialog that opens, select SVG from the Format menu.<br />\nIgnore the SVGZ file option, which is for a compressed file that does not display in browsers.</li>\n<li>Click Save to open the SVG Options dialog.</li>\n<li>Always choose SVG 1.1 in the SVG Profiles drop-down. Other versions are obsolete.</li>\n<li>If you have embedded or linked images in your SVG file, choose Embed from the Image Locations drop-down. However, consult with your web developer about this choice first.</li>\n<li>Select Preserve Illustrator Editing Capabilities to make the file editable in Illustrator.<br />\nThis choice increases file size but allows you to work with a single SVG file that you can edit, update, and share with web developers.</li>\n<li>If the More Options button is displayed, click it to access advanced options. and make your selections.<br />\nEssentially, the different options generate CSS with your file that defines properties in the following ways. Consult with your web developer teammate on how to define these CSS properties:</p>\n<ul>\n<li><strong>Presentation Attributes </strong>embeds styling in SVG code. This option is the simplest and the default. Use this if you&#8217;re not collaborating with a web or app developer.</li>\n<li>The two <strong>Style Attributes </strong>options rely on CSS to manage styling where possible.</li>\n<li><strong>Style Elements </strong>generates class style selectors for styling.</li>\n<li>The <strong>Include Unused Styles </strong>option generates code that likely increases the SVG file size without adding functional value.</li>\n</ul>\n</li>\n<li>Deselect the five check boxes at the bottom of the SVG Options dialog, unless your developer-partner requests that you select them.<br />\nThese options are for highly specialized applications.</li>\n<li>To generate SVG Code based on the selections you make in the SVG Option dialog, click the <strong>SVG Code </strong>button.<br />\nThe generated SVG code is displayed in your operating system’s text editor. You can save that code as a text file using your operating system’s text editor, and hand off the file to a developer.</li>\n<li>After you’ve generated code, click OK to save your file.<br />\nYou can re-open and edit this file in Illustrator.</li>\n</ol>\n"}],"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Explore","lifeExpectancy":"One year","lifeExpectancySetFrom":"2023-02-23T00:00:00+00:00","dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":268252},{"headers":{"creationTime":"2021-03-15T02:18:01+00:00","modifiedTime":"2021-06-01T17:36:27+00:00","timestamp":"2023-09-14T18:17:43+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Create SVGs with Scalable, Searchable Type","strippedTitle":"how to create svgs with scalable, searchable type","slug":"how-to-create-svgs-with-scalable-searchable-type","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Learn how to create SVGs with scalable, searchable type in Adobe Illustrator. Learn how to exploit type and optimize type functionality.","noIndex":0,"noFollow":0},"content":"SVG type provides the same valuable features found in all aspects of SVG graphics created in <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a>: scalability, editability in Illustrator, and native support in all browsers. Those features in and of themselves argue for exporting your graphic content that contains type in SVG format when it's targeted for digital development.\r\n\r\nEven beyond the advantages you incur when you use SVG for graphics in general, some special features are available when you have type in those graphics.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691261\"></a>Exploit the value of scalable, searchable type</h2>\r\nAs you might have noted, I’m excited about the fact that SVG type, when opened in a browser window, is searchable with the browser. Normally those browser search tools work with only HTML type.\r\n\r\nAnd SVG type is not only searchable; users can find text on a page, copy and paste, and look up content. For example, if a visitor to a juice bar is interested in whether or not the kale shakes have lemon juice, he can search the SVG file for that text, as shown here.\r\n\r\n[caption id=\"attachment_269158\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269158\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-graphic.jpg\" alt=\"SVG graphic text\" width=\"556\" height=\"383\" /> Searching an SVG graphic for text in Chrome.[/caption]\r\n\r\nOr for that matter, if a user isn’t sure what the heck kale is, he can select the text and search for a definition, as shown.\r\n\r\n[caption id=\"attachment_269161\" align=\"alignnone\" width=\"444\"]<img class=\"size-full wp-image-269161\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-type-selection.jpg\" alt=\"type in SVG graphic\" width=\"444\" height=\"600\" /> Selecting type in an SVG graphic in a browser[/caption]\r\n\r\nTo dial back a bit, you <em>can </em>export Illustrator graphics that include type for screens as PNGs, GIFs, or JPEGs. But they won’t be scalable, and they won’t retain the kind of type functionality demonstrated in the previous two figures.\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691262\"></a>Optimize type functionality by saving SVGs</h2>\r\nI’ll return shortly to when and how to save SVG files and export to SVG. But while we’re on the topic of SVG type, you need to know that to make the SVG type behave in the way demonstrated, you must <em>save </em>your graphic as an SVG. And you must use specific settings so that the type acts the way it is supposed to when the SVG image is viewed in a browser.\r\n\r\nTo save type within an image as SVG type, follow these steps:\r\n\r\n<strong> 1. With your graphic ready to hand off to a web developer, choose File→Save As. Navigate to the folder where you want to save the file and enter a filename.</strong>\r\n<p style=\"padding-left: 40px;\">Keep filenames web compatible, which means use lowercase letters and numbers, do not use special characters (except the dash and underscore), and definitely do not use spaces.</p>\r\n<p style=\"padding-left: 40px;\">If you're resaving a file you’ve already saved to another format, you can keep your filename and location, and move on to Step 2.</p>\r\n<strong> 2. In the format drop-down in the Save dialog, choose SVG and click Save. </strong>\r\n<p style=\"padding-left: 40px;\">The SVG Options dialog opens.</p>\r\n<strong> 3. Leave the SVG Profiles set to SVG 1.1 (the current version, supported by all browsers. </strong>\r\n<p style=\"padding-left: 40px;\">The other options are not critical to what we are doing here, but briefly they are as follows:</p>\r\n\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li><em>Subsetting option:</em> Leave Subsetting set to None. The other options aren’t operative for SVG type for web.</li>\r\n \t<li><em>Image Location options:</em> These options are applicable only if you have embedded or linked (or both) artwork in your Illustrator file.</li>\r\n \t<li><em>CSS Properties options:</em> I describe the CSS Properties options later in this chapter, but the short explanation is that they are determined by the needs of the developer to whom you are handing off the files. When you're saving type as SVG, you can use any of the CSS Properties options.</li>\r\n</ul>\r\n</li>\r\n</ul>\r\n<strong> 4. In the lower section of the Advanced Options dialog, <em>deselect </em>the Output Fewer <tspan> Elements and Use <textPath> Element for Text on Path.</strong>\r\n<p style=\"padding-left: 40px;\">Note that these options are <em>selected </em>by default. This section of your SVG Options dialog should look like the following figure.</p>\r\n\r\n\r\n[caption id=\"attachment_269166\" align=\"alignnone\" width=\"444\"]<img class=\"size-full wp-image-269166\" src=\"//coursofppt.com/wp-content/uploads/illustrator-type-features.jpg\" alt=\"Illustrator type features\" width=\"444\" height=\"600\" /> Saving an SVG graphic to preserve special type features.[/caption]\r\n<p style=\"padding-left: 40px;\">Deselecting these options might increase your file size slightly, but by deselecting them, you preserve how text looks and the properties I’ve been bragging about in this section (searchability, copy-and-paste, look up in browser, and other features, depending on the browsing environment).</p>\r\n<p style=\"padding-left: 40px;\">The Responsive check box is selected by default. This setting is not critical to preserving the special attributes of SVG type. Here, as with most options, your choice depends on the needs of your web developer. When in doubt, leaving the Responsive option selected is a widely applicable output option.</p>\r\n<strong> 5. Click OK in the SVG Options dialog to save the file as an embeddable SVG.</strong>\r\n\r\nA few notes on SVG type:\r\n<ul>\r\n \t<li>As of this writing, support for all features of SVG type is a work in progress. The basic features I’ve walked through here work in any browser, but support for different fonts might require some tweaking of code by your web developer partner.</li>\r\n \t<li>Are you wondering whether those cool select, edit, and search features of SVG text apply to text on a curve? The answer is revealed in the following figure. Spoiler: Yes!</li>\r\n</ul>\r\n[caption id=\"attachment_269167\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269167\" src=\"//coursofppt.com/wp-content/uploads/illustrator-type-path.jpg\" alt=\"Illustrator type path\" width=\"556\" height=\"324\" /> Selecting text on a path in an SVG file in Safari browser[/caption]\r\n<h2 id=\"tab3\" ><a name=\"_Toc11691263\"></a>Add code snippets to SVG graphics</h2>\r\nIllustrator will never be anyone’s top-rated code editor, but it does include a cool little feature for associating code with elements of an SVG file. Let’s take a quick look at how to add a snippet of code when you want to add a link to part of an SVG graphic. The steps below walk through assigning JavaScript to an object that will make that object function like a link.\r\n\r\n<strong> 1. With an object selected, view the SVG Interactivity panel.</strong>\r\n<p style=\"padding-left: 40px;\">You can display this panel if it is not active by choosing Window→SVG Interactivity.</p>\r\n<strong> 2. Leave the Event set to the default, Onclick. </strong>\r\n<p style=\"padding-left: 40px;\">This JavaScript command performs a function (make something happen) when a user clicks the selected object in a web page.</p>\r\n<strong> 3. In the JavaScript box, use this syntax to define a link target: </strong>\r\n<p style=\"padding-left: 40px;\"><code>window.open(\"[URL]\");</code></p>\r\n<p style=\"padding-left: 40px;\">So, for example, if you were linking to the Wikipedia page on kale, the full line of code would be what I have in the figure:</p>\r\n<p style=\"padding-left: 40px;\"><code>window.open(\"//en.wikipedia.org/wiki/Kale\");</code></p>\r\n<strong> 4. Save the Illustrator file as an SVG file. </strong>\r\n\r\n[caption id=\"attachment_269107\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269107\" src=\"//coursofppt.com/wp-content/uploads/illustrator-clickable-link.jpg\" alt=\"clickable link\" width=\"556\" height=\"217\" /> Attaching a snippet of JavaScript to an SVG file to create a clickable link in the graphic.[/caption]\r\n\r\nThe file is ready to turn over to your web developer. (Or if that’s your other role, you can change hats and pick up the file in your favorite code editor to integrate it into a web project).\r\n\r\nAlternatively, you can simply embed the saved SVG file in a web page. The link won’t be elegant (until a web designer tweaks the generated CSS, it won’t include a typical link icon when hovered over, for example). But it will work, and it will definitely be serviceable for prototyping and testing before the web page is finalized.\r\n\r\nDon’t try using Illustrator’s slice technique for saving SVG files. The technology behind slices is raster-based and doesn’t mesh with vector-based output.","description":"SVG type provides the same valuable features found in all aspects of SVG graphics created in <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a>: scalability, editability in Illustrator, and native support in all browsers. Those features in and of themselves argue for exporting your graphic content that contains type in SVG format when it's targeted for digital development.\r\n\r\nEven beyond the advantages you incur when you use SVG for graphics in general, some special features are available when you have type in those graphics.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691261\"></a>Exploit the value of scalable, searchable type</h2>\r\nAs you might have noted, I’m excited about the fact that SVG type, when opened in a browser window, is searchable with the browser. Normally those browser search tools work with only HTML type.\r\n\r\nAnd SVG type is not only searchable; users can find text on a page, copy and paste, and look up content. For example, if a visitor to a juice bar is interested in whether or not the kale shakes have lemon juice, he can search the SVG file for that text, as shown here.\r\n\r\n[caption id=\"attachment_269158\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269158\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-graphic.jpg\" alt=\"SVG graphic text\" width=\"556\" height=\"383\" /> Searching an SVG graphic for text in Chrome.[/caption]\r\n\r\nOr for that matter, if a user isn’t sure what the heck kale is, he can select the text and search for a definition, as shown.\r\n\r\n[caption id=\"attachment_269161\" align=\"alignnone\" width=\"444\"]<img class=\"size-full wp-image-269161\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-type-selection.jpg\" alt=\"type in SVG graphic\" width=\"444\" height=\"600\" /> Selecting type in an SVG graphic in a browser[/caption]\r\n\r\nTo dial back a bit, you <em>can </em>export Illustrator graphics that include type for screens as PNGs, GIFs, or JPEGs. But they won’t be scalable, and they won’t retain the kind of type functionality demonstrated in the previous two figures.\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691262\"></a>Optimize type functionality by saving SVGs</h2>\r\nI’ll return shortly to when and how to save SVG files and export to SVG. But while we’re on the topic of SVG type, you need to know that to make the SVG type behave in the way demonstrated, you must <em>save </em>your graphic as an SVG. And you must use specific settings so that the type acts the way it is supposed to when the SVG image is viewed in a browser.\r\n\r\nTo save type within an image as SVG type, follow these steps:\r\n\r\n<strong> 1. With your graphic ready to hand off to a web developer, choose File→Save As. Navigate to the folder where you want to save the file and enter a filename.</strong>\r\n<p style=\"padding-left: 40px;\">Keep filenames web compatible, which means use lowercase letters and numbers, do not use special characters (except the dash and underscore), and definitely do not use spaces.</p>\r\n<p style=\"padding-left: 40px;\">If you're resaving a file you’ve already saved to another format, you can keep your filename and location, and move on to Step 2.</p>\r\n<strong> 2. In the format drop-down in the Save dialog, choose SVG and click Save. </strong>\r\n<p style=\"padding-left: 40px;\">The SVG Options dialog opens.</p>\r\n<strong> 3. Leave the SVG Profiles set to SVG 1.1 (the current version, supported by all browsers. </strong>\r\n<p style=\"padding-left: 40px;\">The other options are not critical to what we are doing here, but briefly they are as follows:</p>\r\n\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li><em>Subsetting option:</em> Leave Subsetting set to None. The other options aren’t operative for SVG type for web.</li>\r\n \t<li><em>Image Location options:</em> These options are applicable only if you have embedded or linked (or both) artwork in your Illustrator file.</li>\r\n \t<li><em>CSS Properties options:</em> I describe the CSS Properties options later in this chapter, but the short explanation is that they are determined by the needs of the developer to whom you are handing off the files. When you're saving type as SVG, you can use any of the CSS Properties options.</li>\r\n</ul>\r\n</li>\r\n</ul>\r\n<strong> 4. In the lower section of the Advanced Options dialog, <em>deselect </em>the Output Fewer <tspan> Elements and Use <textPath> Element for Text on Path.</strong>\r\n<p style=\"padding-left: 40px;\">Note that these options are <em>selected </em>by default. This section of your SVG Options dialog should look like the following figure.</p>\r\n\r\n\r\n[caption id=\"attachment_269166\" align=\"alignnone\" width=\"444\"]<img class=\"size-full wp-image-269166\" src=\"//coursofppt.com/wp-content/uploads/illustrator-type-features.jpg\" alt=\"Illustrator type features\" width=\"444\" height=\"600\" /> Saving an SVG graphic to preserve special type features.[/caption]\r\n<p style=\"padding-left: 40px;\">Deselecting these options might increase your file size slightly, but by deselecting them, you preserve how text looks and the properties I’ve been bragging about in this section (searchability, copy-and-paste, look up in browser, and other features, depending on the browsing environment).</p>\r\n<p style=\"padding-left: 40px;\">The Responsive check box is selected by default. This setting is not critical to preserving the special attributes of SVG type. Here, as with most options, your choice depends on the needs of your web developer. When in doubt, leaving the Responsive option selected is a widely applicable output option.</p>\r\n<strong> 5. Click OK in the SVG Options dialog to save the file as an embeddable SVG.</strong>\r\n\r\nA few notes on SVG type:\r\n<ul>\r\n \t<li>As of this writing, support for all features of SVG type is a work in progress. The basic features I’ve walked through here work in any browser, but support for different fonts might require some tweaking of code by your web developer partner.</li>\r\n \t<li>Are you wondering whether those cool select, edit, and search features of SVG text apply to text on a curve? The answer is revealed in the following figure. Spoiler: Yes!</li>\r\n</ul>\r\n[caption id=\"attachment_269167\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269167\" src=\"//coursofppt.com/wp-content/uploads/illustrator-type-path.jpg\" alt=\"Illustrator type path\" width=\"556\" height=\"324\" /> Selecting text on a path in an SVG file in Safari browser[/caption]\r\n<h2 id=\"tab3\" ><a name=\"_Toc11691263\"></a>Add code snippets to SVG graphics</h2>\r\nIllustrator will never be anyone’s top-rated code editor, but it does include a cool little feature for associating code with elements of an SVG file. Let’s take a quick look at how to add a snippet of code when you want to add a link to part of an SVG graphic. The steps below walk through assigning JavaScript to an object that will make that object function like a link.\r\n\r\n<strong> 1. With an object selected, view the SVG Interactivity panel.</strong>\r\n<p style=\"padding-left: 40px;\">You can display this panel if it is not active by choosing Window→SVG Interactivity.</p>\r\n<strong> 2. Leave the Event set to the default, Onclick. </strong>\r\n<p style=\"padding-left: 40px;\">This JavaScript command performs a function (make something happen) when a user clicks the selected object in a web page.</p>\r\n<strong> 3. In the JavaScript box, use this syntax to define a link target: </strong>\r\n<p style=\"padding-left: 40px;\"><code>window.open(\"[URL]\");</code></p>\r\n<p style=\"padding-left: 40px;\">So, for example, if you were linking to the Wikipedia page on kale, the full line of code would be what I have in the figure:</p>\r\n<p style=\"padding-left: 40px;\"><code>window.open(\"//en.wikipedia.org/wiki/Kale\");</code></p>\r\n<strong> 4. Save the Illustrator file as an SVG file. </strong>\r\n\r\n[caption id=\"attachment_269107\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269107\" src=\"//coursofppt.com/wp-content/uploads/illustrator-clickable-link.jpg\" alt=\"clickable link\" width=\"556\" height=\"217\" /> Attaching a snippet of JavaScript to an SVG file to create a clickable link in the graphic.[/caption]\r\n\r\nThe file is ready to turn over to your web developer. (Or if that’s your other role, you can change hats and pick up the file in your favorite code editor to integrate it into a web project).\r\n\r\nAlternatively, you can simply embed the saved SVG file in a web page. The link won’t be elegant (until a web designer tweaks the generated CSS, it won’t include a typical link icon when hovered over, for example). But it will work, and it will definitely be serviceable for prototyping and testing before the web page is finalized.\r\n\r\nDon’t try using Illustrator’s slice technique for saving SVG files. The technology behind slices is raster-based and doesn’t mesh with vector-based output.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"Exploit the value of scalable, searchable type","target":"#tab1"},{"label":"Optimize type functionality by saving SVGs","target":"#tab2"},{"label":"Add code snippets to SVG graphics","target":"#tab3"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac7c1a9e\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac7c2319\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269196},{"headers":{"creationTime":"2021-03-15T02:37:36+00:00","modifiedTime":"2021-03-15T02:37:37+00:00","timestamp":"2023-09-14T18:17:36+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Place and Crop Artwork in Adobe Illustrator","strippedTitle":"how to place and crop artwork in adobe illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Before you learn how to crop images in Adobe Illustrator, you need to first place images. Explore how to embed and link files and place text in a path.","noIndex":0,"noFollow":0},"content":"In Illustrator, <em>place</em> refers to bringing files into an existing document. Placed files can be embedded in a document or linked from an external source and included in an <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a> document. Before you learn how to crop in Illustrator, you need to first place images.\r\n\r\nWhen files are linked, changes to the original file are reflected in the Illustrator document. When files are embedded in an Illustrator document, the umbilical cord, so to speak, is cut, and changes made to the original file are not reflected in the Illustrator document.\r\n<h2 id=\"tab1\" >Embed and link files</h2>\r\nTo embed or link a file in an open Illustrator document, follow these steps:\r\n\r\n<strong> 1. Choose File→Place, navigate to the file in the dialog that opens, and click the file, as shown. </strong>\r\n<p style=\"padding-left: 40px;\">By default, the Link option is selected. If you know you want to embed the file, not link it, deselect the Link option. If you’re not sure, leave Link selected (because it’s easier to change a linked object to an embedded one than vice versa).</p>\r\n<strong> 2. Select or deselect Link. </strong>\r\n\r\n[caption id=\"attachment_269151\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269151\" src=\"//coursofppt.com/wp-content/uploads/illustrator-selecting-object.jpg\" alt=\"Selecting an object to place.\" width=\"556\" height=\"236\" /> Selecting an object to place.[/caption]\r\n\r\n<strong> 3. To place the object in your document full size, simply click with the icon that appears. Or click and drag to size the placed object as shown.</strong>\r\n\r\n[caption id=\"attachment_269156\" align=\"alignnone\" width=\"330\"]<img class=\"size-full wp-image-269156\" src=\"//coursofppt.com/wp-content/uploads/illustrator-sizing-object.jpg\" alt=\"sizing an object\" width=\"330\" height=\"473\" /> Locating and sizing a placed object.[/caption]\r\n<h3>Managing linked files</h3>\r\nWhen a linked file is selected, it appears with a big X on the Illustrator canvas. The file can be transformed, moved, or sized like any object, but as long as it is linked, it can’t be edited.\r\n\r\nYou manage the status of linked files in the Links panel. A number of options for managing the status of a linked file are available, but the most important and widely applicable is updating the connection when a linked file has been changed so that the latest version of the file appears in your Illustrator document.\r\n\r\nWhen a linked file has been updated outside Illustrator (for example, when a photo is touched up in Photoshop, or replaced with a different photo using the same filename), a warning icon appears next to the file in the Links panel. To update the placed content, click the Update Link icon in the Links panel (to refresh the link), as shown.\r\n\r\n[caption id=\"attachment_269143\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269143\" src=\"//coursofppt.com/wp-content/uploads/illustrator-place-object.jpg\" alt=\"placed object in Illustrator\" width=\"556\" height=\"457\" /> Updating a placed object.[/caption]\r\n<h3>Embedding linked files</h3>\r\nIf you placed a file as a linked file but decide you want to edit it in your Illustrator document, you can easily convert the file from linked to embedded.\r\n<p class=\"article-tips remember\">After you break a link and embed a placed file, any changes to the original file will not be reflected in the Illustrator document.</p>\r\nTo change a placed object from linked to embedded, select it and choose Embed from the Links panel menu, as shown.\r\n\r\n[caption id=\"attachment_269111\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269111\" src=\"//coursofppt.com/wp-content/uploads/illustrator-converting-object.jpg\" alt=\"converting placed object\" width=\"556\" height=\"336\" /> Converting a placed object from linked to embedded.[/caption]\r\n<h2 id=\"tab2\" >Place text in a shape or path</h2>\r\nYou can place text files (in TXT or RTF format) from a word processor. The placed text will be embedded, not linked. But it will automatically pour into the selected shape. The following steps place text in a selected shape.\r\n\r\n<strong> 1. Select the shape into which you are placing text.</strong>\r\n\r\n<strong> 2. Choose File→Place and navigate to the text file.</strong>\r\n<p class=\"article-tips tip\">When you choose File→Place and select a text file, the Show Import Options check box becomes active. Ignore it. Whether or not you select that check box, the next dialog that will open is the Microsoft Word Options dialog.</p>\r\n<strong> 3. Click Place.</strong>\r\n<p style=\"padding-left: 40px;\">The Microsoft Word Options dialog opens. Use the options in this dialog if you want to include a table of contents or an index, not import a table of contents or an index, and include (or not include) formatting. Available options depend on the source of the text file.</p>\r\n<strong> 4. Click OK to approve your import options.</strong>\r\n\r\n<strong> 5. Click the edge of the shape to insert the placed text inside the shape, as shown.</strong>\r\n\r\n[caption id=\"attachment_269162\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269162\" src=\"//coursofppt.com/wp-content/uploads/illustrator-text-octagon.jpg\" alt=\"Placing text in an octagon.\" width=\"556\" height=\"571\" /> Placing text in an octagon.[/caption]\r\n<h2 id=\"tab3\" >How to crop rasters in Illustrator</h2>\r\nYou can crop placed raster artwork in Illustrator. Cropping a linked raster image breaks the linkage to the original file, so before you can crop a raster image you need to change a linked image to an embedded image. You can so on the fly with the following steps.\r\n\r\n<strong> 1. Select the image, right-click, and choose Crop Image from the menu that appears, as shown.</strong>\r\n\r\n[caption id=\"attachment_269142\" align=\"alignnone\" width=\"550\"]<img class=\"size-full wp-image-269142\" src=\"//coursofppt.com/wp-content/uploads/illustrator-place-image.jpg\" alt=\"Selecting a placed image to crop.\" width=\"550\" height=\"557\" /> Selecting a placed image to crop.[/caption]\r\n\r\n<strong> 2. If a dialog appears, reminding you that cropping the image changes the link status to embedded, click OK.</strong>\r\n\r\n<strong> 3. Use the side and corner cropping handles to crop the image, as shown.</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Hold down the Shift key to maintain the original height-to-width ratio while you crop.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Hold down the Alt key (Windows) or Option key (Mac) to maintain the original center point as you crop.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Click and drag on the center point to move the crop area</em>. The area to be cropped appears dimmed.</p>\r\n<strong> 4. Press Enter (or Return) to crop to the area you defined in the preceding step.</strong>\r\n\r\n[caption id=\"attachment_269113\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269113\" src=\"//coursofppt.com/wp-content/uploads/illustrator-cropping-linked-image.jpg\" alt=\"Cropping a linked image.\" width=\"556\" height=\"570\" /> Cropping a linked image.[/caption]\r\n<h2 id=\"tab4\" >How to use clipping masks in Illustrator</h2>\r\nWhat if you need to crop a placed image or define an irregular shape that determines what part of the image shows through but also maintain the text file’s linked status? One solution is to draw and apply a clipping mask.\r\n\r\n<em>Clipping masks</em> hide sections of an image without cropping the image. To create and apply a clipping mask, follow these steps:\r\n\r\n<strong> 1. Draw a shape or path over the image demarcating a crop area, as shown.</strong>\r\n<p style=\"padding-left: 40px;\">Normally, this shape will be a rectangle, like the one shown, but it can be any shape or path.</p>\r\n\r\n\r\n[caption id=\"attachment_269120\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269120\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drawing-clipping-mask.jpg\" alt=\"Drawing a clipping mask.\" width=\"556\" height=\"369\" /> Drawing a clipping mask.[/caption]\r\n\r\n<strong> 2. Select both the rectangle and the placed image by using Shift-click or any other selection technique, and then choose Object→Clipping Mask→Make.</strong>\r\n<p style=\"padding-left: 40px;\">The result looks like a crop, but the placed (and linked) image only appears to be cropped. The entire placed image is still in the Illustrator document.</p>\r\n<p style=\"padding-left: 40px;\">If you want to display the entire image in your illustration, you can release the clipping mask by selecting the placed image and choosing Object→Clipping Mask→Release.</p>\r\n<strong> 3. To change the location of the clipped image, choose Object→Clipping Mask→Edit, and select and move the mask, as shown.</strong>\r\n\r\n[caption id=\"attachment_269124\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269124\" src=\"//coursofppt.com/wp-content/uploads/illustrator-editing-clipping-mask.jpg\" alt=\"Editing a clipping mask.\" width=\"556\" height=\"370\" /> Editing a clipping mask.[/caption]\r\n<p class=\"article-tips tip\">To edit an existing clipping mask for a selected object, choose Edit→Clipping Mark→Edit Contents.</p>","description":"In Illustrator, <em>place</em> refers to bringing files into an existing document. Placed files can be embedded in a document or linked from an external source and included in an <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a> document. Before you learn how to crop in Illustrator, you need to first place images.\r\n\r\nWhen files are linked, changes to the original file are reflected in the Illustrator document. When files are embedded in an Illustrator document, the umbilical cord, so to speak, is cut, and changes made to the original file are not reflected in the Illustrator document.\r\n<h2 id=\"tab1\" >Embed and link files</h2>\r\nTo embed or link a file in an open Illustrator document, follow these steps:\r\n\r\n<strong> 1. Choose File→Place, navigate to the file in the dialog that opens, and click the file, as shown. </strong>\r\n<p style=\"padding-left: 40px;\">By default, the Link option is selected. If you know you want to embed the file, not link it, deselect the Link option. If you’re not sure, leave Link selected (because it’s easier to change a linked object to an embedded one than vice versa).</p>\r\n<strong> 2. Select or deselect Link. </strong>\r\n\r\n[caption id=\"attachment_269151\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269151\" src=\"//coursofppt.com/wp-content/uploads/illustrator-selecting-object.jpg\" alt=\"Selecting an object to place.\" width=\"556\" height=\"236\" /> Selecting an object to place.[/caption]\r\n\r\n<strong> 3. To place the object in your document full size, simply click with the icon that appears. Or click and drag to size the placed object as shown.</strong>\r\n\r\n[caption id=\"attachment_269156\" align=\"alignnone\" width=\"330\"]<img class=\"size-full wp-image-269156\" src=\"//coursofppt.com/wp-content/uploads/illustrator-sizing-object.jpg\" alt=\"sizing an object\" width=\"330\" height=\"473\" /> Locating and sizing a placed object.[/caption]\r\n<h3>Managing linked files</h3>\r\nWhen a linked file is selected, it appears with a big X on the Illustrator canvas. The file can be transformed, moved, or sized like any object, but as long as it is linked, it can’t be edited.\r\n\r\nYou manage the status of linked files in the Links panel. A number of options for managing the status of a linked file are available, but the most important and widely applicable is updating the connection when a linked file has been changed so that the latest version of the file appears in your Illustrator document.\r\n\r\nWhen a linked file has been updated outside Illustrator (for example, when a photo is touched up in Photoshop, or replaced with a different photo using the same filename), a warning icon appears next to the file in the Links panel. To update the placed content, click the Update Link icon in the Links panel (to refresh the link), as shown.\r\n\r\n[caption id=\"attachment_269143\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269143\" src=\"//coursofppt.com/wp-content/uploads/illustrator-place-object.jpg\" alt=\"placed object in Illustrator\" width=\"556\" height=\"457\" /> Updating a placed object.[/caption]\r\n<h3>Embedding linked files</h3>\r\nIf you placed a file as a linked file but decide you want to edit it in your Illustrator document, you can easily convert the file from linked to embedded.\r\n<p class=\"article-tips remember\">After you break a link and embed a placed file, any changes to the original file will not be reflected in the Illustrator document.</p>\r\nTo change a placed object from linked to embedded, select it and choose Embed from the Links panel menu, as shown.\r\n\r\n[caption id=\"attachment_269111\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269111\" src=\"//coursofppt.com/wp-content/uploads/illustrator-converting-object.jpg\" alt=\"converting placed object\" width=\"556\" height=\"336\" /> Converting a placed object from linked to embedded.[/caption]\r\n<h2 id=\"tab2\" >Place text in a shape or path</h2>\r\nYou can place text files (in TXT or RTF format) from a word processor. The placed text will be embedded, not linked. But it will automatically pour into the selected shape. The following steps place text in a selected shape.\r\n\r\n<strong> 1. Select the shape into which you are placing text.</strong>\r\n\r\n<strong> 2. Choose File→Place and navigate to the text file.</strong>\r\n<p class=\"article-tips tip\">When you choose File→Place and select a text file, the Show Import Options check box becomes active. Ignore it. Whether or not you select that check box, the next dialog that will open is the Microsoft Word Options dialog.</p>\r\n<strong> 3. Click Place.</strong>\r\n<p style=\"padding-left: 40px;\">The Microsoft Word Options dialog opens. Use the options in this dialog if you want to include a table of contents or an index, not import a table of contents or an index, and include (or not include) formatting. Available options depend on the source of the text file.</p>\r\n<strong> 4. Click OK to approve your import options.</strong>\r\n\r\n<strong> 5. Click the edge of the shape to insert the placed text inside the shape, as shown.</strong>\r\n\r\n[caption id=\"attachment_269162\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269162\" src=\"//coursofppt.com/wp-content/uploads/illustrator-text-octagon.jpg\" alt=\"Placing text in an octagon.\" width=\"556\" height=\"571\" /> Placing text in an octagon.[/caption]\r\n<h2 id=\"tab3\" >How to crop rasters in Illustrator</h2>\r\nYou can crop placed raster artwork in Illustrator. Cropping a linked raster image breaks the linkage to the original file, so before you can crop a raster image you need to change a linked image to an embedded image. You can so on the fly with the following steps.\r\n\r\n<strong> 1. Select the image, right-click, and choose Crop Image from the menu that appears, as shown.</strong>\r\n\r\n[caption id=\"attachment_269142\" align=\"alignnone\" width=\"550\"]<img class=\"size-full wp-image-269142\" src=\"//coursofppt.com/wp-content/uploads/illustrator-place-image.jpg\" alt=\"Selecting a placed image to crop.\" width=\"550\" height=\"557\" /> Selecting a placed image to crop.[/caption]\r\n\r\n<strong> 2. If a dialog appears, reminding you that cropping the image changes the link status to embedded, click OK.</strong>\r\n\r\n<strong> 3. Use the side and corner cropping handles to crop the image, as shown.</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Hold down the Shift key to maintain the original height-to-width ratio while you crop.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Hold down the Alt key (Windows) or Option key (Mac) to maintain the original center point as you crop.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Click and drag on the center point to move the crop area</em>. The area to be cropped appears dimmed.</p>\r\n<strong> 4. Press Enter (or Return) to crop to the area you defined in the preceding step.</strong>\r\n\r\n[caption id=\"attachment_269113\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269113\" src=\"//coursofppt.com/wp-content/uploads/illustrator-cropping-linked-image.jpg\" alt=\"Cropping a linked image.\" width=\"556\" height=\"570\" /> Cropping a linked image.[/caption]\r\n<h2 id=\"tab4\" >How to use clipping masks in Illustrator</h2>\r\nWhat if you need to crop a placed image or define an irregular shape that determines what part of the image shows through but also maintain the text file’s linked status? One solution is to draw and apply a clipping mask.\r\n\r\n<em>Clipping masks</em> hide sections of an image without cropping the image. To create and apply a clipping mask, follow these steps:\r\n\r\n<strong> 1. Draw a shape or path over the image demarcating a crop area, as shown.</strong>\r\n<p style=\"padding-left: 40px;\">Normally, this shape will be a rectangle, like the one shown, but it can be any shape or path.</p>\r\n\r\n\r\n[caption id=\"attachment_269120\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269120\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drawing-clipping-mask.jpg\" alt=\"Drawing a clipping mask.\" width=\"556\" height=\"369\" /> Drawing a clipping mask.[/caption]\r\n\r\n<strong> 2. Select both the rectangle and the placed image by using Shift-click or any other selection technique, and then choose Object→Clipping Mask→Make.</strong>\r\n<p style=\"padding-left: 40px;\">The result looks like a crop, but the placed (and linked) image only appears to be cropped. The entire placed image is still in the Illustrator document.</p>\r\n<p style=\"padding-left: 40px;\">If you want to display the entire image in your illustration, you can release the clipping mask by selecting the placed image and choosing Object→Clipping Mask→Release.</p>\r\n<strong> 3. To change the location of the clipped image, choose Object→Clipping Mask→Edit, and select and move the mask, as shown.</strong>\r\n\r\n[caption id=\"attachment_269124\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269124\" src=\"//coursofppt.com/wp-content/uploads/illustrator-editing-clipping-mask.jpg\" alt=\"Editing a clipping mask.\" width=\"556\" height=\"370\" /> Editing a clipping mask.[/caption]\r\n<p class=\"article-tips tip\">To edit an existing clipping mask for a selected object, choose Edit→Clipping Mark→Edit Contents.</p>","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"Embed and link files","target":"#tab1"},{"label":"Place text in a shape or path","target":"#tab2"},{"label":"How to crop rasters in Illustrator","target":"#tab3"},{"label":"How to use clipping masks in Illustrator","target":"#tab4"}],"relatedArticles":{"fromBook":[{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}],"fromCategory":[{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac01aa97\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac01b378\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269199},{"headers":{"creationTime":"2021-03-15T02:05:23+00:00","modifiedTime":"2021-03-15T02:05:23+00:00","timestamp":"2023-09-14T18:17:36+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Apply SVG Filters in Illustrator CC","strippedTitle":"how to apply svg filters in illustrator cc","slug":"how-to-apply-svg-filters-in-illustrator-cc","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Explore the Adobe Illustrator Effect menu options for SVG filters and learn how to apply and import those filters—from coursofppt.com.","noIndex":0,"noFollow":0},"content":"Effects, like the ubiquitous drop shadow, are an essential element in every designer’s toolkit. You may have noticed that <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a>’s Effect menu includes a substantial submenu for SVG filters. The available set of filters is expanding as Illustrator evolves to provide more support for SVG.\r\n\r\nBy the way, if you’ve used Illustrator for years, you might remember that the Effect menu used to list effects and filters. Filters were like effects, except they couldn’t be easily edited after being applied. But SVG filters are not a revival of those types of filters; SVG filters are called <em>filters </em>because they operate through the SVG filter element in coding web pages.\r\n\r\nHere's another cool thing about SVG filters: As you discover shortly, you can import and even create your own SVG filters.\r\n\r\nWhen you apply an SVG filter, it may look similar to an non-SVG effect. For example, this figure shows two identical squares, but the one the left has a raster drop shadow <em>effect</em> applied and the one on the right has a vector (SVG) drop shadow <em>filter</em> applied.\r\n\r\n[caption id=\"attachment_269121\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269121\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drop-shadow-effect.jpg\" alt=\"drop shadow effect\" width=\"556\" height=\"152\" /> A drop shadow effect (left) and SVG filter (right).[/caption]\r\n\r\nWhen I select the rectangle with the SVG filter, that filter appears in the Appearance panel, as shown.\r\n\r\n[caption id=\"attachment_269122\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269122\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drop-shadow-filter.jpg\" alt=\"drop shadow filter\" width=\"556\" height=\"152\" /> illustrator-drop-shadow-filter[/caption]\r\n<p class=\"article-tips remember\">The different ways that effects and SVG filters change the path of an object have subtle but real implications. Some of those implications are relevant to only web and app developers, but from your end of the workflow, the important thing to keep in mind is to <em>avoid mixing SVG filters and raster</em> effects in projects because they affect objects differently.</p>\r\nBy the way, I can’t help sharing here that the square with the raster drop shadow in these figures is almost seven times larger than the one with the SVG filter. Just a brief public service announcement from the SVG industry on how you can lose (file) weight with SVGs.\r\n\r\nAnd as you may have surmised by now, raster effects are not programmable. When you turn them over to an animator or an HTML coder, your developer teammate is not going to have the same kind of freedom to control how raster effects work in an animation or a transition.\r\n\r\nFinally, when you apply SVG filters instead of raster effects to SVG artwork, you don’t have to worry about those filters degrading when the artwork is rescaled in a browser.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691258\"></a>How to apply SVG filters</h2>\r\nI’ve made the case for applying SVG filters whenever possible in SVG artwork. Let’s walk through how that happens:\r\n<ol>\r\n \t<li><strong> Select the object(s) to which you are applying the filter.</strong></li>\r\n \t<li><strong> Choose Effect→SVG Filters and select a filter.\r\n</strong>The SVG Filters submenu has a list of filters with names that at best are only semi-intuitive (such as AI_Shadow_1, which is a drop shadow) and more often just cryptic (such as AI_Dilate_6). You’ll have to experiment until you get a feel for how these filters work.</li>\r\n \t<li><strong> With the object to which you applied the filter still selected, view the Appearance panel (choose Window→Appearance). </strong></li>\r\n \t<li><strong> Hover your cursor over the applied filter and click it to reveal the Apply SVG Filter box, shown here.</strong>\r\n\r\n[caption id=\"attachment_269125\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269125\" src=\"//coursofppt.com/wp-content/uploads/illustrator-editing-svg-filters.jpg\" alt=\"Editing SVG filters.\" width=\"556\" height=\"286\" /> Editing SVG filters.[/caption]\r\n\r\nHere you can change the applied filter, and use the Preview check box to see how the filter will look. You can also select and delete an SVG filter in the Appearance panel, as shown.</li>\r\n</ol>\r\n[caption id=\"attachment_269116\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269116\" src=\"//coursofppt.com/wp-content/uploads/illustrator-deleting-svg-filters.jpg\" alt=\"Deleting an SVG filter.\" width=\"556\" height=\"259\" /> Deleting an SVG filter.[/caption]\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691259\"></a>How to import SVG filters</h2>\r\nIllustrator’s set of filters is useful but hardly pushes the limits of what you can do with SVG filters. If you code in HTML, you’ll find an accessible tutorial for creating your own SVG filters at <a href=\"//www.w3schools.com/graphics/svg_filters_intro.asp\">w3schools</a>.\r\n\r\nYou also can purchase additional sets of filters online, and even find some nice sets of SVG <a href=\"//www.creatingo.com/import-and-use-svg-filters-in-adobe-illustrator.html\">free SVG filters</a>. To install this set of filters or other filters, follow these steps:\r\n<ol>\r\n \t<li><strong> Choose Effect→SVG Filters→Import SVG Filter.</strong></li>\r\n \t<li><strong> In the dialog that opens, navigate to and double-click the SVG filters file you downloaded.\r\nThe file will probably be an SVG file.\r\n</strong></li>\r\n \t<li><strong> Choose Effect-->SVG Filters to apply new filters to selected objects.\r\nAfter you import new filters, they appear on the SVG Filters submenu.\r\n</strong></li>\r\n</ol>","description":"Effects, like the ubiquitous drop shadow, are an essential element in every designer’s toolkit. You may have noticed that <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a>’s Effect menu includes a substantial submenu for SVG filters. The available set of filters is expanding as Illustrator evolves to provide more support for SVG.\r\n\r\nBy the way, if you’ve used Illustrator for years, you might remember that the Effect menu used to list effects and filters. Filters were like effects, except they couldn’t be easily edited after being applied. But SVG filters are not a revival of those types of filters; SVG filters are called <em>filters </em>because they operate through the SVG filter element in coding web pages.\r\n\r\nHere's another cool thing about SVG filters: As you discover shortly, you can import and even create your own SVG filters.\r\n\r\nWhen you apply an SVG filter, it may look similar to an non-SVG effect. For example, this figure shows two identical squares, but the one the left has a raster drop shadow <em>effect</em> applied and the one on the right has a vector (SVG) drop shadow <em>filter</em> applied.\r\n\r\n[caption id=\"attachment_269121\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269121\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drop-shadow-effect.jpg\" alt=\"drop shadow effect\" width=\"556\" height=\"152\" /> A drop shadow effect (left) and SVG filter (right).[/caption]\r\n\r\nWhen I select the rectangle with the SVG filter, that filter appears in the Appearance panel, as shown.\r\n\r\n[caption id=\"attachment_269122\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269122\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drop-shadow-filter.jpg\" alt=\"drop shadow filter\" width=\"556\" height=\"152\" /> illustrator-drop-shadow-filter[/caption]\r\n<p class=\"article-tips remember\">The different ways that effects and SVG filters change the path of an object have subtle but real implications. Some of those implications are relevant to only web and app developers, but from your end of the workflow, the important thing to keep in mind is to <em>avoid mixing SVG filters and raster</em> effects in projects because they affect objects differently.</p>\r\nBy the way, I can’t help sharing here that the square with the raster drop shadow in these figures is almost seven times larger than the one with the SVG filter. Just a brief public service announcement from the SVG industry on how you can lose (file) weight with SVGs.\r\n\r\nAnd as you may have surmised by now, raster effects are not programmable. When you turn them over to an animator or an HTML coder, your developer teammate is not going to have the same kind of freedom to control how raster effects work in an animation or a transition.\r\n\r\nFinally, when you apply SVG filters instead of raster effects to SVG artwork, you don’t have to worry about those filters degrading when the artwork is rescaled in a browser.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691258\"></a>How to apply SVG filters</h2>\r\nI’ve made the case for applying SVG filters whenever possible in SVG artwork. Let’s walk through how that happens:\r\n<ol>\r\n \t<li><strong> Select the object(s) to which you are applying the filter.</strong></li>\r\n \t<li><strong> Choose Effect→SVG Filters and select a filter.\r\n</strong>The SVG Filters submenu has a list of filters with names that at best are only semi-intuitive (such as AI_Shadow_1, which is a drop shadow) and more often just cryptic (such as AI_Dilate_6). You’ll have to experiment until you get a feel for how these filters work.</li>\r\n \t<li><strong> With the object to which you applied the filter still selected, view the Appearance panel (choose Window→Appearance). </strong></li>\r\n \t<li><strong> Hover your cursor over the applied filter and click it to reveal the Apply SVG Filter box, shown here.</strong>\r\n\r\n[caption id=\"attachment_269125\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269125\" src=\"//coursofppt.com/wp-content/uploads/illustrator-editing-svg-filters.jpg\" alt=\"Editing SVG filters.\" width=\"556\" height=\"286\" /> Editing SVG filters.[/caption]\r\n\r\nHere you can change the applied filter, and use the Preview check box to see how the filter will look. You can also select and delete an SVG filter in the Appearance panel, as shown.</li>\r\n</ol>\r\n[caption id=\"attachment_269116\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269116\" src=\"//coursofppt.com/wp-content/uploads/illustrator-deleting-svg-filters.jpg\" alt=\"Deleting an SVG filter.\" width=\"556\" height=\"259\" /> Deleting an SVG filter.[/caption]\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691259\"></a>How to import SVG filters</h2>\r\nIllustrator’s set of filters is useful but hardly pushes the limits of what you can do with SVG filters. If you code in HTML, you’ll find an accessible tutorial for creating your own SVG filters at <a href=\"//www.w3schools.com/graphics/svg_filters_intro.asp\">w3schools</a>.\r\n\r\nYou also can purchase additional sets of filters online, and even find some nice sets of SVG <a href=\"//www.creatingo.com/import-and-use-svg-filters-in-adobe-illustrator.html\">free SVG filters</a>. To install this set of filters or other filters, follow these steps:\r\n<ol>\r\n \t<li><strong> Choose Effect→SVG Filters→Import SVG Filter.</strong></li>\r\n \t<li><strong> In the dialog that opens, navigate to and double-click the SVG filters file you downloaded.\r\nThe file will probably be an SVG file.\r\n</strong></li>\r\n \t<li><strong> Choose Effect-->SVG Filters to apply new filters to selected objects.\r\nAfter you import new filters, they appear on the SVG Filters submenu.\r\n</strong></li>\r\n</ol>","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"How to apply SVG filters","target":"#tab1"},{"label":"How to import SVG filters","target":"#tab2"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac012098\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac012aea\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269193},{"headers":{"creationTime":"2021-03-15T01:46:44+00:00","modifiedTime":"2021-03-15T01:46:44+00:00","timestamp":"2023-09-14T18:17:36+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Apply Transparency to SVGs","strippedTitle":"how to apply transparency to svgs","slug":"how-to-apply-transparency-to-svgs","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Learn how to apply transparency to SVG graphics in Illustrator. Explore how to output SVGs with transparent backgrounds and apply transparency effects.","noIndex":0,"noFollow":0},"content":"SVG graphics from <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a> are rarely handed off to digital designers with backgrounds. Normally the graphics float above whatever background exists in the website, app, animation, or interactive context.\r\n\r\nBefore discussing what’s involved in knocking out the background behind SVG artwork, focus on applying transparency to SVG graphics. You need to defining the opacity of artwork using the Transparency panel. For example, 50 percent transparency has been applied to the yellow shape in the figure, and you can see the transparency in effect. And yes, that image <em>is </em>an SVG file, with all the lightweight, fast-loading, and infinitely scalable features built into SVG.\r\n\r\n[caption id=\"attachment_269152\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269152\" src=\"//coursofppt.com/wp-content/uploads/illustrator-semi-opaque-svg.jpg\" alt=\"semi-opaque shape\" width=\"556\" height=\"586\" /> A semi-opaque SVG shape on top of a colored background.[/caption]\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691254\"></a>How to output SVGs with transparent backgrounds</h2>\r\nDesigners are used to thinking in terms of backgrounds that are either made transparent or remain visible. We think about knocking out a background. PNG images and GIF images work like that—you either create with a background or you choose a transparent background in a program such as Illustrator or Photoshop to knock out that background.\r\n\r\nWith GIFs and PNGs, you can have one transparent color that allows the background colors or images to show through in web pages. But the logic of knocking out the background is different in an SVG file than with PNGs and GIFs. Essentially, there is no such thing as an SVG graphic that has a non-transparent background because there is no background. In other words: <em>by default </em>SVG graphics save and export without a background.\r\n\r\nSo, what’s the problem? Well, it’s easy to accidentally end up with a transparent background when saving or exporting SVG files! The following figure might have a white background, or it might have a transparent background. You can't tell just by looking at the Illustrator screen; you have to choose View→Show Transparency Grid.\r\n\r\n[caption id=\"attachment_269164\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269164\" src=\"//coursofppt.com/wp-content/uploads/illustrator-transparency-grid.jpg\" alt=\"transparency grid in Illustrator\" width=\"556\" height=\"464\" /> This graphic might have a white background or it might have no background.[/caption]\r\n\r\nWith Transparency Grid enabled, as shown, you can see that the bird has a white rectangle behind it, and that white background will “go with” the graphic if you save the file as an SVG or export it as an SVG.\r\n\r\n[caption id=\"attachment_269165\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269165\" src=\"//coursofppt.com/wp-content/uploads/illustrator-transparency-grid-rectangle.jpg\" alt=\"transparency grid rectangle\" width=\"556\" height=\"464\" /> Viewing the transparency grid reveals a white rectangle behind the graphic.[/caption]\r\n\r\nLet me emphasize and shine a light on this from another angle. When I go to export this image as an SVG, the Export for Screens dialog, shown, does not have an option for selecting a transparency color.\r\n\r\n[caption id=\"attachment_269131\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269131\" src=\"//coursofppt.com/wp-content/uploads/illustrator-export-screens.jpg\" alt=\"no background color\" width=\"556\" height=\"359\" /> You can't choose a transparency color in SVG because there is no background color.[/caption]\r\n\r\nI often encounter designers who insist on putting a background rectangle behind their SVG-destined artwork so they can see how the graphic will look when backgrounded by a color in the target medium (such as a web page or app). That’s okay, I caution them, as long as you remember to remove that background rectangle when you save or export the SVG. And in today’s high-pressure, high-productivity, fast turnaround world, who needs one more thing to remember?\r\n\r\nA better solution is to define a transparency “grid” with a single color that matches the environment into which the graphic will be placed. Why do I put <em>grid</em> in quotes? Because this technique cheats: With it, you define both grid colors as the same color, effectively simulating a web page or an app background color.\r\n\r\nTo use that technique to create a custom background while you develop SVG artwork, follow these steps:\r\n<ol>\r\n \t<li><strong> Choose File→Document Setup.</strong></li>\r\n \t<li><strong> In the General tab, find the Transparency and Overprint Options section.\r\n</strong>The changes you want are controlled in this section of the dialog.\r\nDon’t worry about defining the grid size because you're effectively dispensing with the grid.</li>\r\n \t<li><strong> In the Transparency Grid section of the dialog, click the first of the two grid color panels and choose a background color by using one of the various color palettes in the Colors pop-up shown in the following figure.\r\n</strong>None of these color palettes is particularly digital friendly, by the way. There is no palette for RGBA, hexadecimal, or other standard web color formats, but the color picker eyedropper can help you get the background color you are aiming to match.\r\n\r\n[caption id=\"attachment_269148\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269148\" src=\"//coursofppt.com/wp-content/uploads/illustrator-preview-background.jpg\" alt=\"preview background\" width=\"556\" height=\"493\" /> Defining a preview background color with a Transparency Grid.[/caption]</li>\r\n \t<li><strong> Select the second of the two grid color panels, and assign the same color to it.\r\n</strong>Remember, you can use the color picker eyedropper to grab that color.</li>\r\n \t<li><strong> Click OK in the Document Setup dialog. </strong></li>\r\n</ol>\r\n<p class=\"article-tips warning\">All I’ve done in the previous set of steps was define how the Transparency Grid displays <em>when it is enabled</em>. So, if your Transparency Grid is not enabled, choose View→Transparency Grid.</p>\r\nIn this figure, I selected the artboard with the graphic, and I am previewing the project against a simulated background color.\r\n\r\n[caption id=\"attachment_269115\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269115\" src=\"//coursofppt.com/wp-content/uploads/illustrator-custom-transparency-grid.jpg\" alt=\"custom transparency grid\" width=\"556\" height=\"448\" /> Previewing the output background color with a custom Transparency Grid.[/caption]\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691255\"></a>Apply transparency effects to SVG</h2>\r\nWhen transparency (such as 50 percent opacity) or transparency effects such as color burn, darken, or multiply are applied to SVG graphics, those effects <em>retain the scalability of SVG. </em>\r\n\r\nThis figure shows the same graphic—three semitransparent orange rectangles—exported as a PNG file (top) and an SVG. You can see how the PNG file degrades in quality when I zoom in on it in a browser. What you can’t see is that the PNG file is almost twice as large as the SVG.\r\n\r\n[caption id=\"attachment_269146\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269146\" src=\"//coursofppt.com/wp-content/uploads/illustrator-png-vs-svg.jpg\" alt=\"PNG vs SVG\" width=\"556\" height=\"317\" /> Comparing PNG output (top) with SVG when transparency is applied[/caption]\r\n\r\nHere’s a summary of the advantages to using SVG for transparency effects:\r\n<ul>\r\n \t<li>The file size is qualitatively smaller.</li>\r\n \t<li>A web or app developer can tweak or edit the transparency values and assign interactivity.</li>\r\n \t<li>The image and the transparency will not degrade no matter how much the file is zoomed in on.</li>\r\n</ul>\r\nBy the way, if you’re curious about what the generated SVG code for this set of rectangles looks like, and how easy it is for a web or app developer to work with it, here’s the code for the first of the three SVG boxes, with 60 percent opacity applied:\r\n\r\n<code>&lt;svg id=\"orange-squares\"</code>\r\n\r\n<code>&lt;style&gt;.cls-1{fill:#f7931e;}.cls-1{opacity:0.6</code>\r\n\r\n<code>&lt;/style</code>\r\n\r\n<code>&lt;title&gt;orange-bars&lt;/title&gt;</code>\r\n\r\n<code>&lt;rect class=\"cls-1\" y=\"0.13\" width=\"74\" height=\"66.85\"/&gt;</code>\r\n\r\n<code>&lt;/svg&gt;</code>\r\n\r\nIf your HTML and CSS skills allow, you can paste the <code>&lt;style&gt;</code>; element into the <code>&lt;head&gt;</code>; element of a web page, and the rest of the HTML into your <code>&lt;body&gt;</code>; element, and you’ll have replicated the code I created in Illustrator.\r\n\r\nLet’s walk through the process of applying transparency and transparency effects to SVG artwork step-by-step:\r\n<ol>\r\n \t<li><strong> Select the View menu and be sure that Hide Transparency Grid appears on the menu.\r\n</strong>This check ensures that you're viewing the Transparency Grid. If the Transparency Grid display isn't turned on, you can’t accurately see the effect of the opacity settings you apply.</li>\r\n \t<li><strong> Select objects to apply transparency to, and choose an opacity value from the Opacity slider in the Control panel, as shown.\r\n</strong>I'm using the default transparency grid for the screenshot to clearly illustrate the transparent background.\r\n\r\n[caption id=\"attachment_269103\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269103\" src=\"//coursofppt.com/wp-content/uploads/illustrator-assigning-transparency.jpg\" alt=\"Assigning transparency for SVG output.\" width=\"556\" height=\"377\" /> Assigning transparency for SVG output.[/caption]</li>\r\n \t<li><strong> Choose Window→Appearance and, in the Appearance panel, verify, edit, or hide (and show) the transparency </strong></li>\r\n</ol>\r\n<p class=\"article-tips warning\">Do <em>not</em> apply transparency to objects intended for SVG output by using the Layers panel. Doing that applies <em>raster</em> transparency, which degrades when SVG objects are enlarged.</p>\r\nYou can also apply Transparency effects such as color burn, darken, or multiply to SVG-destined artwork.","description":"SVG graphics from <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Adobe Illustrator CC</a> are rarely handed off to digital designers with backgrounds. Normally the graphics float above whatever background exists in the website, app, animation, or interactive context.\r\n\r\nBefore discussing what’s involved in knocking out the background behind SVG artwork, focus on applying transparency to SVG graphics. You need to defining the opacity of artwork using the Transparency panel. For example, 50 percent transparency has been applied to the yellow shape in the figure, and you can see the transparency in effect. And yes, that image <em>is </em>an SVG file, with all the lightweight, fast-loading, and infinitely scalable features built into SVG.\r\n\r\n[caption id=\"attachment_269152\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269152\" src=\"//coursofppt.com/wp-content/uploads/illustrator-semi-opaque-svg.jpg\" alt=\"semi-opaque shape\" width=\"556\" height=\"586\" /> A semi-opaque SVG shape on top of a colored background.[/caption]\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691254\"></a>How to output SVGs with transparent backgrounds</h2>\r\nDesigners are used to thinking in terms of backgrounds that are either made transparent or remain visible. We think about knocking out a background. PNG images and GIF images work like that—you either create with a background or you choose a transparent background in a program such as Illustrator or Photoshop to knock out that background.\r\n\r\nWith GIFs and PNGs, you can have one transparent color that allows the background colors or images to show through in web pages. But the logic of knocking out the background is different in an SVG file than with PNGs and GIFs. Essentially, there is no such thing as an SVG graphic that has a non-transparent background because there is no background. In other words: <em>by default </em>SVG graphics save and export without a background.\r\n\r\nSo, what’s the problem? Well, it’s easy to accidentally end up with a transparent background when saving or exporting SVG files! The following figure might have a white background, or it might have a transparent background. You can't tell just by looking at the Illustrator screen; you have to choose View→Show Transparency Grid.\r\n\r\n[caption id=\"attachment_269164\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269164\" src=\"//coursofppt.com/wp-content/uploads/illustrator-transparency-grid.jpg\" alt=\"transparency grid in Illustrator\" width=\"556\" height=\"464\" /> This graphic might have a white background or it might have no background.[/caption]\r\n\r\nWith Transparency Grid enabled, as shown, you can see that the bird has a white rectangle behind it, and that white background will “go with” the graphic if you save the file as an SVG or export it as an SVG.\r\n\r\n[caption id=\"attachment_269165\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269165\" src=\"//coursofppt.com/wp-content/uploads/illustrator-transparency-grid-rectangle.jpg\" alt=\"transparency grid rectangle\" width=\"556\" height=\"464\" /> Viewing the transparency grid reveals a white rectangle behind the graphic.[/caption]\r\n\r\nLet me emphasize and shine a light on this from another angle. When I go to export this image as an SVG, the Export for Screens dialog, shown, does not have an option for selecting a transparency color.\r\n\r\n[caption id=\"attachment_269131\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269131\" src=\"//coursofppt.com/wp-content/uploads/illustrator-export-screens.jpg\" alt=\"no background color\" width=\"556\" height=\"359\" /> You can't choose a transparency color in SVG because there is no background color.[/caption]\r\n\r\nI often encounter designers who insist on putting a background rectangle behind their SVG-destined artwork so they can see how the graphic will look when backgrounded by a color in the target medium (such as a web page or app). That’s okay, I caution them, as long as you remember to remove that background rectangle when you save or export the SVG. And in today’s high-pressure, high-productivity, fast turnaround world, who needs one more thing to remember?\r\n\r\nA better solution is to define a transparency “grid” with a single color that matches the environment into which the graphic will be placed. Why do I put <em>grid</em> in quotes? Because this technique cheats: With it, you define both grid colors as the same color, effectively simulating a web page or an app background color.\r\n\r\nTo use that technique to create a custom background while you develop SVG artwork, follow these steps:\r\n<ol>\r\n \t<li><strong> Choose File→Document Setup.</strong></li>\r\n \t<li><strong> In the General tab, find the Transparency and Overprint Options section.\r\n</strong>The changes you want are controlled in this section of the dialog.\r\nDon’t worry about defining the grid size because you're effectively dispensing with the grid.</li>\r\n \t<li><strong> In the Transparency Grid section of the dialog, click the first of the two grid color panels and choose a background color by using one of the various color palettes in the Colors pop-up shown in the following figure.\r\n</strong>None of these color palettes is particularly digital friendly, by the way. There is no palette for RGBA, hexadecimal, or other standard web color formats, but the color picker eyedropper can help you get the background color you are aiming to match.\r\n\r\n[caption id=\"attachment_269148\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269148\" src=\"//coursofppt.com/wp-content/uploads/illustrator-preview-background.jpg\" alt=\"preview background\" width=\"556\" height=\"493\" /> Defining a preview background color with a Transparency Grid.[/caption]</li>\r\n \t<li><strong> Select the second of the two grid color panels, and assign the same color to it.\r\n</strong>Remember, you can use the color picker eyedropper to grab that color.</li>\r\n \t<li><strong> Click OK in the Document Setup dialog. </strong></li>\r\n</ol>\r\n<p class=\"article-tips warning\">All I’ve done in the previous set of steps was define how the Transparency Grid displays <em>when it is enabled</em>. So, if your Transparency Grid is not enabled, choose View→Transparency Grid.</p>\r\nIn this figure, I selected the artboard with the graphic, and I am previewing the project against a simulated background color.\r\n\r\n[caption id=\"attachment_269115\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269115\" src=\"//coursofppt.com/wp-content/uploads/illustrator-custom-transparency-grid.jpg\" alt=\"custom transparency grid\" width=\"556\" height=\"448\" /> Previewing the output background color with a custom Transparency Grid.[/caption]\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691255\"></a>Apply transparency effects to SVG</h2>\r\nWhen transparency (such as 50 percent opacity) or transparency effects such as color burn, darken, or multiply are applied to SVG graphics, those effects <em>retain the scalability of SVG. </em>\r\n\r\nThis figure shows the same graphic—three semitransparent orange rectangles—exported as a PNG file (top) and an SVG. You can see how the PNG file degrades in quality when I zoom in on it in a browser. What you can’t see is that the PNG file is almost twice as large as the SVG.\r\n\r\n[caption id=\"attachment_269146\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269146\" src=\"//coursofppt.com/wp-content/uploads/illustrator-png-vs-svg.jpg\" alt=\"PNG vs SVG\" width=\"556\" height=\"317\" /> Comparing PNG output (top) with SVG when transparency is applied[/caption]\r\n\r\nHere’s a summary of the advantages to using SVG for transparency effects:\r\n<ul>\r\n \t<li>The file size is qualitatively smaller.</li>\r\n \t<li>A web or app developer can tweak or edit the transparency values and assign interactivity.</li>\r\n \t<li>The image and the transparency will not degrade no matter how much the file is zoomed in on.</li>\r\n</ul>\r\nBy the way, if you’re curious about what the generated SVG code for this set of rectangles looks like, and how easy it is for a web or app developer to work with it, here’s the code for the first of the three SVG boxes, with 60 percent opacity applied:\r\n\r\n<code>&lt;svg id=\"orange-squares\"</code>\r\n\r\n<code>&lt;style&gt;.cls-1{fill:#f7931e;}.cls-1{opacity:0.6</code>\r\n\r\n<code>&lt;/style</code>\r\n\r\n<code>&lt;title&gt;orange-bars&lt;/title&gt;</code>\r\n\r\n<code>&lt;rect class=\"cls-1\" y=\"0.13\" width=\"74\" height=\"66.85\"/&gt;</code>\r\n\r\n<code>&lt;/svg&gt;</code>\r\n\r\nIf your HTML and CSS skills allow, you can paste the <code>&lt;style&gt;</code>; element into the <code>&lt;head&gt;</code>; element of a web page, and the rest of the HTML into your <code>&lt;body&gt;</code>; element, and you’ll have replicated the code I created in Illustrator.\r\n\r\nLet’s walk through the process of applying transparency and transparency effects to SVG artwork step-by-step:\r\n<ol>\r\n \t<li><strong> Select the View menu and be sure that Hide Transparency Grid appears on the menu.\r\n</strong>This check ensures that you're viewing the Transparency Grid. If the Transparency Grid display isn't turned on, you can’t accurately see the effect of the opacity settings you apply.</li>\r\n \t<li><strong> Select objects to apply transparency to, and choose an opacity value from the Opacity slider in the Control panel, as shown.\r\n</strong>I'm using the default transparency grid for the screenshot to clearly illustrate the transparent background.\r\n\r\n[caption id=\"attachment_269103\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269103\" src=\"//coursofppt.com/wp-content/uploads/illustrator-assigning-transparency.jpg\" alt=\"Assigning transparency for SVG output.\" width=\"556\" height=\"377\" /> Assigning transparency for SVG output.[/caption]</li>\r\n \t<li><strong> Choose Window→Appearance and, in the Appearance panel, verify, edit, or hide (and show) the transparency </strong></li>\r\n</ol>\r\n<p class=\"article-tips warning\">Do <em>not</em> apply transparency to objects intended for SVG output by using the Layers panel. Doing that applies <em>raster</em> transparency, which degrades when SVG objects are enlarged.</p>\r\nYou can also apply Transparency effects such as color burn, darken, or multiply to SVG-destined artwork.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"How to output SVGs with transparent backgrounds","target":"#tab1"},{"label":"Apply transparency effects to SVG","target":"#tab2"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac00a3ae\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac00ac7e\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269190},{"headers":{"creationTime":"2021-03-15T01:31:15+00:00","modifiedTime":"2021-03-15T01:31:15+00:00","timestamp":"2023-09-14T18:17:35+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Prepare Artwork for SVG Output","strippedTitle":"how to prepare artwork for svg output","slug":"how-to-prepare-artwork-for-svg-output","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Learn how to prepare your Adobe Illustrator CC files for SVG output by reducing anchors, using symbols, and minimizing the use of raster images.","noIndex":0,"noFollow":0},"content":"Ideally, <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator CC</a> graphics intended for SVG output will have been created with a minimum of anchors and effects and with a minimum of raster objects. As you develop your own Illustrator-to-SVG workflow and habits, you’ll begin to internalize some of the demands of SVG files, and integrate those requirements more seamlessly into the design process.\r\n\r\nBut the creative process for illustrators doesn’t always work that way. A traced sketch is going to have extra anchors. So, too, is artwork created with the Pencil tool.\r\n\r\nSo whether you are dealing with artwork created with a minimalist approach to adding paths, or you inherit a project with anchor bloat, you will want to work at reducing file size by reducing anchors (and paths), using symbols wherever possible, and minimizing the use of raster images.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691251\"></a>Simplify paths for screen output</h2>\r\nThe best way to see how much you can simplify paths is through trial-and-error. You do that by selecting artwork and choosing Object→Path→Simplify to display the Simplify dialog. Here you can experiment with different Curve Precision and Angle Threshold settings to see how many anchor points can be safely deleted from your artwork.\r\n\r\nThe frog in the following figure, for example, was created reasonably efficiently but with some extraneous anchor points.\r\n\r\n[caption id=\"attachment_269098\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269098\" src=\"//coursofppt.com/wp-content/uploads/illustrator-anchor-points.jpg\" alt=\"anchor points in Illustrator\" width=\"556\" height=\"266\" /> Simplifying artwork to reduce anchor points (and the file size).[/caption]\r\n\r\nBy using the Preview check box to see the effect of reducing points, I can assess whether or not I can sacrifice some anchor points to reduce the file size. I can also use the Show Original check box to compare the original and simplified paths. Usually, though, that clutters the screen, and I prefer to judge “before and after” simplifying by toggling the Preview option on and off.\r\n\r\nLess Curve Precision reduces the file size less but retains the integrity of shapes more. In the example in the preceding figure, I set Curve Precision to a point where I reduced the file size to one third the original, but can still live with the accuracy. If this illustration had angles, I could have experimented with different Angle Threshold settings to see how much that would have reduced the file size without degrading the graphic.\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691252\"></a>Reducing the file size with symbols</h2>\r\nSymbols also reduce SVG file size. For example, the file size of the graphic in this figure is 25 percent smaller when the graphic is saved as an SVG file with the candles as symbols, compared to each candle being a discrete object.\r\n\r\n[caption id=\"attachment_269160\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269160\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-reduced.jpg\" alt=\"symbols reduce svg size\" width=\"556\" height=\"316\" /> Saving this graphic as an SVG with symbols reduces the file size by 25 percent.[/caption]\r\n\r\nI’ve seen and achieved even more radical reductions in file size when maximizing the use of symbols in architectural renderings (which might have dozens of trees, for example, that can be “symbolized.”).","description":"Ideally, <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator CC</a> graphics intended for SVG output will have been created with a minimum of anchors and effects and with a minimum of raster objects. As you develop your own Illustrator-to-SVG workflow and habits, you’ll begin to internalize some of the demands of SVG files, and integrate those requirements more seamlessly into the design process.\r\n\r\nBut the creative process for illustrators doesn’t always work that way. A traced sketch is going to have extra anchors. So, too, is artwork created with the Pencil tool.\r\n\r\nSo whether you are dealing with artwork created with a minimalist approach to adding paths, or you inherit a project with anchor bloat, you will want to work at reducing file size by reducing anchors (and paths), using symbols wherever possible, and minimizing the use of raster images.\r\n<h2 id=\"tab1\" ><a name=\"_Toc11691251\"></a>Simplify paths for screen output</h2>\r\nThe best way to see how much you can simplify paths is through trial-and-error. You do that by selecting artwork and choosing Object→Path→Simplify to display the Simplify dialog. Here you can experiment with different Curve Precision and Angle Threshold settings to see how many anchor points can be safely deleted from your artwork.\r\n\r\nThe frog in the following figure, for example, was created reasonably efficiently but with some extraneous anchor points.\r\n\r\n[caption id=\"attachment_269098\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269098\" src=\"//coursofppt.com/wp-content/uploads/illustrator-anchor-points.jpg\" alt=\"anchor points in Illustrator\" width=\"556\" height=\"266\" /> Simplifying artwork to reduce anchor points (and the file size).[/caption]\r\n\r\nBy using the Preview check box to see the effect of reducing points, I can assess whether or not I can sacrifice some anchor points to reduce the file size. I can also use the Show Original check box to compare the original and simplified paths. Usually, though, that clutters the screen, and I prefer to judge “before and after” simplifying by toggling the Preview option on and off.\r\n\r\nLess Curve Precision reduces the file size less but retains the integrity of shapes more. In the example in the preceding figure, I set Curve Precision to a point where I reduced the file size to one third the original, but can still live with the accuracy. If this illustration had angles, I could have experimented with different Angle Threshold settings to see how much that would have reduced the file size without degrading the graphic.\r\n<h2 id=\"tab2\" ><a name=\"_Toc11691252\"></a>Reducing the file size with symbols</h2>\r\nSymbols also reduce SVG file size. For example, the file size of the graphic in this figure is 25 percent smaller when the graphic is saved as an SVG file with the candles as symbols, compared to each candle being a discrete object.\r\n\r\n[caption id=\"attachment_269160\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269160\" src=\"//coursofppt.com/wp-content/uploads/illustrator-svg-reduced.jpg\" alt=\"symbols reduce svg size\" width=\"556\" height=\"316\" /> Saving this graphic as an SVG with symbols reduces the file size by 25 percent.[/caption]\r\n\r\nI’ve seen and achieved even more radical reductions in file size when maximizing the use of symbols in architectural renderings (which might have dozens of trees, for example, that can be “symbolized.”).","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"Simplify paths for screen output","target":"#tab1"},{"label":"Reducing the file size with symbols","target":"#tab2"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269184,"title":"Exporting, Saving, and Printing from Adobe Illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269184"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac002790\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221ac0030b5\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269187},{"headers":{"creationTime":"2021-03-15T01:23:14+00:00","modifiedTime":"2021-03-15T01:23:14+00:00","timestamp":"2023-09-14T18:17:35+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"Exporting, Saving, and Printing from Adobe Illustrator","strippedTitle":"exporting, saving, and printing from adobe illustrator","slug":"exporting-saving-and-printing-from-adobe-illustrator","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Learn how to export, save, and print several kinds of objects in Illustrator CC: entire documents, artboards, selected objects, and assets.","noIndex":0,"noFollow":0},"content":"You can export, save, and print several kinds of objects in Adobe Illustrator CC: an entire document; one, some, or all artboards in a document; selected objects; and assets. You share <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator</a> files for a wide range of print and screen output options by <em>exporting </em>them to one of a long list of file formats. Exported files can't be edited in Illustrator.\r\n\r\nYou <em>save </em>Illustrator files when you need to edit them in the future.\r\n\r\nSometimes you export files for print or web output, and then save them. Sometimes you can save Illustrator files in formats that you can hand off to print or web designers <em>and </em>edit them.\r\n<h2 id=\"tab1\" ><a name=\"_Toc14528274\"></a>How to save Illustrator files</h2>\r\nYou can save Illustrator files in any of these formats:\r\n<ul>\r\n \t<li><strong>AI,</strong> Illustrator’s native format and AIT (Illustrator templates).</li>\r\n \t<li><strong>EPS,</strong> a widely supported vector format used for sharing files with other vector-editing apps and printers.</li>\r\n \t<li><strong>Adobe PDF, </strong>a portable vector format accessible to anyone with Acrobat Reader.</li>\r\n \t<li><strong>SVG or SVG (Compressed)</strong> files for screen output.</li>\r\n</ul>\r\nSaving projects as EPS, PDF or SVG files gives you the option of retaining the ability to edit the files in Illustrator.\r\n\r\nEach of the options for saving Illustrator files has distinct options. If you are handing off a file in any of them, check with the team you are handing off to, to find out if there are specific settings they require.\r\n\r\nThe following steps apply to saving files as AI, EPS, and PDF formats:\r\n<ol>\r\n \t<li><strong> Choose File→Save, File→Save As (to save an existing file with a new name), or File→Save a Copy (to create a duplicate copy of a file).</strong></li>\r\n \t<li><strong> Navigate to a location for the file and enter a filename.</strong></li>\r\n \t<li><strong> In the Format drop-down, choose one of the available formats (AI, EPS, or PDF). </strong>\r\n<p class=\"article-tips tip\">If the file format you want to use (such as PNG or TIFF) is not available in the Format drop-down, the format is available for export but not saving.</p>\r\n</li>\r\n \t<li><strong> Click Save to open the Options dialog for the file format you selected. The options will differ depending on the format but the following choices are widely available and useful:</strong></li>\r\n</ol>\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li>If you're saving to AI or EPS format, the Version drop-down defines the version of Illustrator with which you want your file to be compatible. If you are saving to PDF, the Compatibility drop-down defines what versions of PDF will be able to open the file. Legacy formats don’t support all features.</li>\r\n \t<li>Font embedding options allow you to embed fonts for users who will receive the file but may not have the required fonts.</li>\r\n \t<li>The Create PDF Compatible File option for saving AI files allows the file to be opened with Adobe Reader as well as apps that support importing Illustrator documents.</li>\r\n \t<li>The Include Linked Files option embeds any linked files in your illustration.</li>\r\n \t<li>The Embed ICC Profiles option is used by some print shops to ensure color integrity. Consult with your print shop on whether and how to use this option.</li>\r\n \t<li>The Use Compression option reduces file size.</li>\r\n \t<li>The Save Each Artboard to a Separate File option is available in Illustrator files with multiple artboards. Along with the resulting set of artboard-based files, a master file is created with all artboards.</li>\r\n</ul>\r\n</li>\r\n</ul>\r\nIf you're simply saving an Illustrator project to access it, to edit it, or to share it with someone who has Illustrator, save the file as an Illustrator file.\r\n<h2 id=\"tab2\" ><a name=\"_Toc14528275\"></a>How to export files from Illustrator</h2>\r\nIllustrator files (as well as artboards, assets, and selections) can be exported to a variety of print- and web-compatible file formats. These files can't be edited in Illustrator, so you will almost always want to save as well as export projects as Illustrator files.\r\n\r\nWeb designers may ask you for SVG files, which retain Illustrator editing capability. More likely, web designers will ask you for web-compatible PNG or JPG files.\r\n\r\nPrint designers may be able to work with your Illustrator files. Or they might require TIF or other print-only raster images. In those instances, get the specs for the exported files from your print partner.\r\n\r\nYou export files by choosing File→Export→Export for Screens or File→Export→Export for As (for print). Options vary depending on the output format. And, again, I’ll repeat a mantra that runs through this chapter and any discussion of output in this book: Ask the person to whom you are handing off the file what options he or she prefer.\r\n<h2 id=\"tab3\" ><a name=\"_Toc14528276\"></a>How to use artboards and assets for Illustrator output</h2>\r\nWhen you save or export Illustrator documents with multiple artboards, you can choose to export or save any set of artboards.\r\n\r\nFor example, if you're exporting a document to PNG output for screens, the Use Artboards check box allows you to define which artboards to export.\r\n\r\n[caption id=\"attachment_269128\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269128\" src=\"//coursofppt.com/wp-content/uploads/illustrator-exporting-artboards.jpg\" alt=\"exporting artboards in Illustrator\" width=\"556\" height=\"127\" /> Exporting selected artboards.[/caption]\r\n<h2 id=\"tab4\" ><a name=\"_Toc14528277\"></a>Communicating with your printer</h2>\r\nToday, print shops can turn Illustrator artwork into anything, from a poster to a coffee mug, a t-shirt to a message printed on glass. Each project has its own requirements, and the trick is to communicate effectively with your printer from the beginning.\r\n\r\nI asked Lydia Ochavo from UpPrinting.com, a widely used online print service, to share advice applicable to just about any print project in Illustrator. Here are some of her tips. Refer to the beginning of this chapter for notes on how to define documents to meet these specs:\r\n<ul>\r\n \t<li>Print shops provide templates for frequently used output. Download and use them before you begin your project. <a href=\"//www.uprinting.com/print-templates\">UpPrinting has templates</a>.</li>\r\n \t<li>Although Illustrator vector files are scalable, it’s safest to submit files to the printer sized to the actual output size.</li>\r\n \t<li>Most printers require a 1/8\" bleed around your artwork. Make sure that all printable content is inside the bleed.</li>\r\n \t<li>Set raster resolution to at least 300dpi.</li>\r\n \t<li>Use CMYK color mode because professional print shops print only in CMYK.</li>\r\n \t<li>Many print shops prefer PDF format to Illustrator AI files.</li>\r\n \t<li>When you need an exact color match and your printer supports the use of Pantone color, use Pantone colors. Pantone colors are available from Swatch panels in Illustrator. You can use a Pantone color books to preview how a color will print. Those color books are available from your printer.</li>\r\n</ul>","description":"You can export, save, and print several kinds of objects in Adobe Illustrator CC: an entire document; one, some, or all artboards in a document; selected objects; and assets. You share <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator</a> files for a wide range of print and screen output options by <em>exporting </em>them to one of a long list of file formats. Exported files can't be edited in Illustrator.\r\n\r\nYou <em>save </em>Illustrator files when you need to edit them in the future.\r\n\r\nSometimes you export files for print or web output, and then save them. Sometimes you can save Illustrator files in formats that you can hand off to print or web designers <em>and </em>edit them.\r\n<h2 id=\"tab1\" ><a name=\"_Toc14528274\"></a>How to save Illustrator files</h2>\r\nYou can save Illustrator files in any of these formats:\r\n<ul>\r\n \t<li><strong>AI,</strong> Illustrator’s native format and AIT (Illustrator templates).</li>\r\n \t<li><strong>EPS,</strong> a widely supported vector format used for sharing files with other vector-editing apps and printers.</li>\r\n \t<li><strong>Adobe PDF, </strong>a portable vector format accessible to anyone with Acrobat Reader.</li>\r\n \t<li><strong>SVG or SVG (Compressed)</strong> files for screen output.</li>\r\n</ul>\r\nSaving projects as EPS, PDF or SVG files gives you the option of retaining the ability to edit the files in Illustrator.\r\n\r\nEach of the options for saving Illustrator files has distinct options. If you are handing off a file in any of them, check with the team you are handing off to, to find out if there are specific settings they require.\r\n\r\nThe following steps apply to saving files as AI, EPS, and PDF formats:\r\n<ol>\r\n \t<li><strong> Choose File→Save, File→Save As (to save an existing file with a new name), or File→Save a Copy (to create a duplicate copy of a file).</strong></li>\r\n \t<li><strong> Navigate to a location for the file and enter a filename.</strong></li>\r\n \t<li><strong> In the Format drop-down, choose one of the available formats (AI, EPS, or PDF). </strong>\r\n<p class=\"article-tips tip\">If the file format you want to use (such as PNG or TIFF) is not available in the Format drop-down, the format is available for export but not saving.</p>\r\n</li>\r\n \t<li><strong> Click Save to open the Options dialog for the file format you selected. The options will differ depending on the format but the following choices are widely available and useful:</strong></li>\r\n</ol>\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li>If you're saving to AI or EPS format, the Version drop-down defines the version of Illustrator with which you want your file to be compatible. If you are saving to PDF, the Compatibility drop-down defines what versions of PDF will be able to open the file. Legacy formats don’t support all features.</li>\r\n \t<li>Font embedding options allow you to embed fonts for users who will receive the file but may not have the required fonts.</li>\r\n \t<li>The Create PDF Compatible File option for saving AI files allows the file to be opened with Adobe Reader as well as apps that support importing Illustrator documents.</li>\r\n \t<li>The Include Linked Files option embeds any linked files in your illustration.</li>\r\n \t<li>The Embed ICC Profiles option is used by some print shops to ensure color integrity. Consult with your print shop on whether and how to use this option.</li>\r\n \t<li>The Use Compression option reduces file size.</li>\r\n \t<li>The Save Each Artboard to a Separate File option is available in Illustrator files with multiple artboards. Along with the resulting set of artboard-based files, a master file is created with all artboards.</li>\r\n</ul>\r\n</li>\r\n</ul>\r\nIf you're simply saving an Illustrator project to access it, to edit it, or to share it with someone who has Illustrator, save the file as an Illustrator file.\r\n<h2 id=\"tab2\" ><a name=\"_Toc14528275\"></a>How to export files from Illustrator</h2>\r\nIllustrator files (as well as artboards, assets, and selections) can be exported to a variety of print- and web-compatible file formats. These files can't be edited in Illustrator, so you will almost always want to save as well as export projects as Illustrator files.\r\n\r\nWeb designers may ask you for SVG files, which retain Illustrator editing capability. More likely, web designers will ask you for web-compatible PNG or JPG files.\r\n\r\nPrint designers may be able to work with your Illustrator files. Or they might require TIF or other print-only raster images. In those instances, get the specs for the exported files from your print partner.\r\n\r\nYou export files by choosing File→Export→Export for Screens or File→Export→Export for As (for print). Options vary depending on the output format. And, again, I’ll repeat a mantra that runs through this chapter and any discussion of output in this book: Ask the person to whom you are handing off the file what options he or she prefer.\r\n<h2 id=\"tab3\" ><a name=\"_Toc14528276\"></a>How to use artboards and assets for Illustrator output</h2>\r\nWhen you save or export Illustrator documents with multiple artboards, you can choose to export or save any set of artboards.\r\n\r\nFor example, if you're exporting a document to PNG output for screens, the Use Artboards check box allows you to define which artboards to export.\r\n\r\n[caption id=\"attachment_269128\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269128\" src=\"//coursofppt.com/wp-content/uploads/illustrator-exporting-artboards.jpg\" alt=\"exporting artboards in Illustrator\" width=\"556\" height=\"127\" /> Exporting selected artboards.[/caption]\r\n<h2 id=\"tab4\" ><a name=\"_Toc14528277\"></a>Communicating with your printer</h2>\r\nToday, print shops can turn Illustrator artwork into anything, from a poster to a coffee mug, a t-shirt to a message printed on glass. Each project has its own requirements, and the trick is to communicate effectively with your printer from the beginning.\r\n\r\nI asked Lydia Ochavo from UpPrinting.com, a widely used online print service, to share advice applicable to just about any print project in Illustrator. Here are some of her tips. Refer to the beginning of this chapter for notes on how to define documents to meet these specs:\r\n<ul>\r\n \t<li>Print shops provide templates for frequently used output. Download and use them before you begin your project. <a href=\"//www.uprinting.com/print-templates\">UpPrinting has templates</a>.</li>\r\n \t<li>Although Illustrator vector files are scalable, it’s safest to submit files to the printer sized to the actual output size.</li>\r\n \t<li>Most printers require a 1/8\" bleed around your artwork. Make sure that all printable content is inside the bleed.</li>\r\n \t<li>Set raster resolution to at least 300dpi.</li>\r\n \t<li>Use CMYK color mode because professional print shops print only in CMYK.</li>\r\n \t<li>Many print shops prefer PDF format to Illustrator AI files.</li>\r\n \t<li>When you need an exact color match and your printer supports the use of Pantone color, use Pantone colors. Pantone colors are available from Swatch panels in Illustrator. You can use a Pantone color books to preview how a color will print. Those color books are available from your printer.</li>\r\n</ul>","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"How to save Illustrator files","target":"#tab1"},{"label":"How to export files from Illustrator","target":"#tab2"},{"label":"How to use artboards and assets for Illustrator output","target":"#tab3"},{"label":"Communicating with your printer","target":"#tab4"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221abfeebca\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221abfef4f2\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269184},{"headers":{"creationTime":"2021-03-15T01:14:52+00:00","modifiedTime":"2021-03-15T01:14:52+00:00","timestamp":"2023-09-14T18:17:35+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Software","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33618"},"slug":"software","categoryId":33618},{"name":"Adobe Products","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33619"},"slug":"adobe-products","categoryId":33619},{"name":"Illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"},"slug":"illustrator","categoryId":33626}],"title":"How to Deploy Artboards in Illustrator CC","strippedTitle":"how to deploy artboards in illustrator cc","slug":"how-to-deploy-artboards-in-illustrator-cc","canonicalUrl":"","快速搜目录擎调整":{"metaDescription":"Learn what Illustrator artboards are and how to deploy them. Explore how to use artboards for multidimensional projects within Illustrator.","noIndex":0,"noFollow":0},"content":"Within the canvas of Adobe Illustrator CC, artboards are discrete, sized spaces that make it easy to export, share, or print sections of the canvas. The <em>canvas</em> is the area of the <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator</a> workspace where you create graphics. The canvas is basically everything you see on the screen except the interface (such as the menu, Control panel, and other panels).\r\n\r\nArtboards are both coherent and discrete. Too philosophical? Okay, here’s the point: Artboards inherit and share many properties of the document they lie within, such as color mode or raster effect resolution. And that’s nice because it means you can work on different graphics, including differently sized graphics, with shared properties.\r\n\r\nFor example, you might have a project where you design a print poster, palm card, and plastic banner for an event. Although these will be different in size, they will likely use the same set of colors and maybe other features such as symbols.\r\n\r\nOr you might use multiple artboards of the same size to prepare a prototype of a mobile app that shows different states of user interaction. Here, dozens of artboards might be helpful. Again, this project has common document properties that apply to all artboards, such as RGB color and pixels as the unit of measurement.\r\n\r\nTo help you get your money’s worth out of artboards, I first review some basic rules for creating and using them. Then I walk you through the two scenarios I just identified—print project and app prototype—to help you understand the efficacy of artboards and to expose you to key techniques for deploying artboards.\r\n<h2 id=\"tab1\" ><a name=\"_Toc14528271\"></a>What are artboards?</h2>\r\nYou can have 1 to 1000 artboards per document. I’ve never used 1,000 artboards in a project, but it’s nice to know they’re there if I need them. As I explain in the beginning of this chapter, you can set the number of artboards for a document when you first create it, but you can also add and remove artboards after you begin work on a document.\r\n\r\nThe Artboard tool is part of the Basic toolset. You create artboards in a document by selecting the Artboard tool and drawing interactively on the canvas, as shown.\r\n\r\n[caption id=\"attachment_269118\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269118\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drawing-artboards.jpg\" alt=\"Drawing an artboard.\" width=\"556\" height=\"474\" /> Drawing an artboard.[/caption]\r\n\r\nOr you can generate an artboard by clicking the New Artboard icon in the Artboard pane or the Control (or Properties) panel. The Artboard Options dialog shown here opens.\r\n\r\n[caption id=\"attachment_269102\" align=\"alignnone\" width=\"397\"]<img class=\"size-full wp-image-269102\" src=\"//coursofppt.com/wp-content/uploads/illustrator-artboard-options-dialog.jpg\" alt=\"Artboard Options dialog\" width=\"397\" height=\"600\" /> Generating an artboard with the Artboard Options dialog.[/caption]\r\n\r\nGenerating an artboard allows you to name the artboard as you create it, along with defining the dimensions and location digitally.\r\n\r\nYou can manage artboards in many ways. The following shows you how to define and take advantage of the artboard options I think you’ll find helpful in organizing and sharing projects.\r\n\r\nTo change artboard sizes in Illustrator or move an artboard interactively, follow these steps:\r\n\r\n<strong> 1. With the Artboard tool, click once inside the artboard.</strong>\r\n\r\n<strong> 2. Drag to move the artboard, as shown.</strong>\r\n\r\n[caption id=\"attachment_269140\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269140\" src=\"//coursofppt.com/wp-content/uploads/illustrator-moving-artboards.jpg\" alt=\"Moving an artboard.\" width=\"556\" height=\"323\" /> Moving an artboard.[/caption]\r\n\r\n<strong> 3. Click and drag on a side or corner (square-shaped) bounding box to resize the artboard, as shown.</strong>\r\n\r\n[caption id=\"attachment_269149\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269149\" src=\"//coursofppt.com/wp-content/uploads/illustrator-resizing-artboards.jpg\" alt=\"Resizing an artboard.\" width=\"556\" height=\"465\" /> Resizing an artboard.[/caption]\r\n\r\nYou can change any artboard property by using the Control or Properties panel:\r\n<ul>\r\n \t<li>The Presets drop-down provides quick access to commonly used sizes. My favorite feature here is the Fit to Artwork Bounds option, which resizes the selected artboard to shrink in size to where it just fits around all the artwork within it. By sizing an artboard to an exact fit around its content, you avoid exporting or printing blank space in your graphic.</li>\r\n \t<li>The Name box is the easiest way to change the selected artboard name.</li>\r\n \t<li>The Move/Copy Artwork with Artboard option is on by default but can be turned off if you want to move an artboard while leaving the content where it is.</li>\r\n \t<li>The Artboard Options box opens a dialog with options that apply to all selected artboards in a document. I find the Show Center Mark useful when centering content in an artboard. You can use this dialog also to rename multiple selected artboards with sequential numbering. For example, if I rename a bunch of selected artboards DK, I end up with DK-1, DK-2, DK-3, and so on.</li>\r\n \t<li>The X value in the Control panel defines the vertical location; the Y value defines the horizontal location.</li>\r\n \t<li>The Width and Height values resize the artboard. Use the lock icon to lock the height-to-width aspect ratio while you resize.</li>\r\n \t<li>The Rearrange All icon opens up a panel with different options for arranging your artboards in an orderly way on the canvas.</li>\r\n</ul>\r\nA couple of other artboard essential tips:\r\n<ul>\r\n \t<li>To hide all objects that are not within an artboard, choose View-->Trim.</li>\r\n \t<li>To delete an artboard, select it with the Artboard tool and click Delete.</li>\r\n</ul>\r\n<h2 id=\"tab2\" ><a name=\"_Toc14528272\"></a>Using artboards for a multidimensional project</h2>\r\nLet me illustrate a basic but typical multi-artboard workflow: one where you create different versions of the same graphic but with different dimensions. In doing that, I share some techniques and approaches you can apply to your own particular needs.\r\n\r\nSuppose that you are tasked with designing an ad that will run in different social media platforms and in different orientations: square, horizontal (landscape), and portrait (vertical). The ad must have the same basic content but fit the following size specs:\r\n<ul>\r\n \t<li>Square: 1080 pixels</li>\r\n \t<li>Vertical: 1080 pixels wide by 1350 pixels high</li>\r\n \t<li>Horizontal: 1200 pixels by 628 pixels</li>\r\n</ul>\r\nThe following steps are an efficient way to set up the artboards for this project:\r\n\r\n<strong> 1. Create a new document with one 1080 px square artboard, as shown</strong>.\r\n<p style=\"padding-left: 40px;\"><em>a. Choose File→New, and bypass the New Document dialog by clicking More Settings. </em>The More Settings dialog appears.</p>\r\n<p style=\"padding-left: 40px;\"><em>b. Name the project Ads.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. In the Profile drop-down, choose Web.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>d. In the Number of Artboards box, enter 3.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>e. Set the artboard arrangement to Arrange by Row (the third icon).</em></p>\r\n<p style=\"padding-left: 40px;\"><em>f. In the Height and Width boxes, enter 1080.</em> The Units setting will default to Pixels, and the Color Mode to RGB. These and other defaults are fine.</p>\r\n<p style=\"padding-left: 40px;\"><em>g.Click Create New Document.</em></p>\r\n\r\n\r\n[caption id=\"attachment_269163\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269163\" src=\"//coursofppt.com/wp-content/uploads/illustrator-three-artboard-document.jpg\" alt=\"Defining a three-artboard document.\" width=\"556\" height=\"485\" /> Defining a three-artboard document.[/caption]\r\n\r\n<strong> 2. Name the three artboards Square, Vertical, and Horizontal:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. If the Artboards panel is not displayed, choose Window→Artboards.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Double-click the name of Artboard 1 and type <strong>Square</strong>. In the same way, rename the second artboard <strong>Vertical</strong> and the third artboard <strong>Horizontal</strong>.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Choose View→Fit All In Window to see all three artboards, as shown.</em></p>\r\n\r\n\r\n[caption id=\"attachment_269141\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269141\" src=\"//coursofppt.com/wp-content/uploads/illustrator-naming-artboards.jpg\" alt=\"Naming artboards.\" width=\"556\" height=\"242\" /> Naming artboards.[/caption]\r\n\r\n<strong> 3. Resize the Vertical and Horizontal artboards:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. In the Artboard panel, double-click the icon to the right of the artboard named Vertical. In the Control panel that appears, change the height to 1350 px and click OK.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. In a similar way, change the dimensions of the Horizontal artboard to 1200 pixels wide by 628 pixels high.</em></p>\r\n<strong> 4. Arrange the artboards to create a more coherent display:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Click Rearrange All Artboards in the Control panel. </em>The Rearrange All Artboards dialog opens.</p>\r\n<p style=\"padding-left: 40px;\"><em>b. Keep the Arrange by Row layout and the left-to-right Layout Order settings you defined when you created the document. Leave the spacing set to 20 pixels, and leave Move Artwork with Artboards selected, as shown, then click OK. </em></p>\r\n<p style=\"padding-left: 40px;\">This step keeps the basic layout structure in place, but resets the spacing between the resized artboards so they don’t overlap.</p>\r\n\r\n\r\n[caption id=\"attachment_269101\" align=\"alignnone\" width=\"319\"]<img class=\"size-full wp-image-269101\" src=\"//coursofppt.com/wp-content/uploads/illustrator-arranging-artboards.jpg\" alt=\"Arranging artboards.\" width=\"319\" height=\"258\" /> Arranging artboards.[/caption]\r\n\r\n<strong> 5. Design your ad on one of the artboards.</strong>\r\n\r\n[caption id=\"attachment_269155\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269155\" src=\"//coursofppt.com/wp-content/uploads/illustrator-single-artboards.jpg\" alt=\"single artboard in Illustrator\" width=\"556\" height=\"230\" /> Designing a single artboard.[/caption]\r\n\r\n<strong> 6. Copy the first ad content to the other artboards:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Use the Selection or Direct Selection tool to select all the content in the first artboard, the one with the content.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Choose Edit→Cut.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Choose Edit→Paste on All Artboards. </em></p>\r\n<p style=\"padding-left: 40px;\">The Paste on All Artboards technique pays for itself when you're working with dozens or even hundreds of artboards! Of course, the pasted artwork doesn’t fit properly in differently sized artboards. Fixing that is the last step.</p>\r\n<strong> 7. Edit the design of the horizontal and vertical artboards to make the square content fit, as shown.</strong>\r\n\r\n[caption id=\"attachment_269114\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269114\" src=\"//coursofppt.com/wp-content/uploads/illustrator-customizing-artboards.jpg\" alt=\"customizing artboards\" width=\"556\" height=\"293\" /> Customizing designs for different artboards.[/caption]\r\n\r\nWhat do you do with a set of artboards? They are automatically saved as part of your Illustrator document. After that, you can export one, some, or all of them for screen or print output.","description":"Within the canvas of Adobe Illustrator CC, artboards are discrete, sized spaces that make it easy to export, share, or print sections of the canvas. The <em>canvas</em> is the area of the <a href=\"//coursofppt.com/software/adobe/illustrator/adobe-illustrator-cc-for-dummies-cheat-sheet/\">Illustrator</a> workspace where you create graphics. The canvas is basically everything you see on the screen except the interface (such as the menu, Control panel, and other panels).\r\n\r\nArtboards are both coherent and discrete. Too philosophical? Okay, here’s the point: Artboards inherit and share many properties of the document they lie within, such as color mode or raster effect resolution. And that’s nice because it means you can work on different graphics, including differently sized graphics, with shared properties.\r\n\r\nFor example, you might have a project where you design a print poster, palm card, and plastic banner for an event. Although these will be different in size, they will likely use the same set of colors and maybe other features such as symbols.\r\n\r\nOr you might use multiple artboards of the same size to prepare a prototype of a mobile app that shows different states of user interaction. Here, dozens of artboards might be helpful. Again, this project has common document properties that apply to all artboards, such as RGB color and pixels as the unit of measurement.\r\n\r\nTo help you get your money’s worth out of artboards, I first review some basic rules for creating and using them. Then I walk you through the two scenarios I just identified—print project and app prototype—to help you understand the efficacy of artboards and to expose you to key techniques for deploying artboards.\r\n<h2 id=\"tab1\" ><a name=\"_Toc14528271\"></a>What are artboards?</h2>\r\nYou can have 1 to 1000 artboards per document. I’ve never used 1,000 artboards in a project, but it’s nice to know they’re there if I need them. As I explain in the beginning of this chapter, you can set the number of artboards for a document when you first create it, but you can also add and remove artboards after you begin work on a document.\r\n\r\nThe Artboard tool is part of the Basic toolset. You create artboards in a document by selecting the Artboard tool and drawing interactively on the canvas, as shown.\r\n\r\n[caption id=\"attachment_269118\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269118\" src=\"//coursofppt.com/wp-content/uploads/illustrator-drawing-artboards.jpg\" alt=\"Drawing an artboard.\" width=\"556\" height=\"474\" /> Drawing an artboard.[/caption]\r\n\r\nOr you can generate an artboard by clicking the New Artboard icon in the Artboard pane or the Control (or Properties) panel. The Artboard Options dialog shown here opens.\r\n\r\n[caption id=\"attachment_269102\" align=\"alignnone\" width=\"397\"]<img class=\"size-full wp-image-269102\" src=\"//coursofppt.com/wp-content/uploads/illustrator-artboard-options-dialog.jpg\" alt=\"Artboard Options dialog\" width=\"397\" height=\"600\" /> Generating an artboard with the Artboard Options dialog.[/caption]\r\n\r\nGenerating an artboard allows you to name the artboard as you create it, along with defining the dimensions and location digitally.\r\n\r\nYou can manage artboards in many ways. The following shows you how to define and take advantage of the artboard options I think you’ll find helpful in organizing and sharing projects.\r\n\r\nTo change artboard sizes in Illustrator or move an artboard interactively, follow these steps:\r\n\r\n<strong> 1. With the Artboard tool, click once inside the artboard.</strong>\r\n\r\n<strong> 2. Drag to move the artboard, as shown.</strong>\r\n\r\n[caption id=\"attachment_269140\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269140\" src=\"//coursofppt.com/wp-content/uploads/illustrator-moving-artboards.jpg\" alt=\"Moving an artboard.\" width=\"556\" height=\"323\" /> Moving an artboard.[/caption]\r\n\r\n<strong> 3. Click and drag on a side or corner (square-shaped) bounding box to resize the artboard, as shown.</strong>\r\n\r\n[caption id=\"attachment_269149\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269149\" src=\"//coursofppt.com/wp-content/uploads/illustrator-resizing-artboards.jpg\" alt=\"Resizing an artboard.\" width=\"556\" height=\"465\" /> Resizing an artboard.[/caption]\r\n\r\nYou can change any artboard property by using the Control or Properties panel:\r\n<ul>\r\n \t<li>The Presets drop-down provides quick access to commonly used sizes. My favorite feature here is the Fit to Artwork Bounds option, which resizes the selected artboard to shrink in size to where it just fits around all the artwork within it. By sizing an artboard to an exact fit around its content, you avoid exporting or printing blank space in your graphic.</li>\r\n \t<li>The Name box is the easiest way to change the selected artboard name.</li>\r\n \t<li>The Move/Copy Artwork with Artboard option is on by default but can be turned off if you want to move an artboard while leaving the content where it is.</li>\r\n \t<li>The Artboard Options box opens a dialog with options that apply to all selected artboards in a document. I find the Show Center Mark useful when centering content in an artboard. You can use this dialog also to rename multiple selected artboards with sequential numbering. For example, if I rename a bunch of selected artboards DK, I end up with DK-1, DK-2, DK-3, and so on.</li>\r\n \t<li>The X value in the Control panel defines the vertical location; the Y value defines the horizontal location.</li>\r\n \t<li>The Width and Height values resize the artboard. Use the lock icon to lock the height-to-width aspect ratio while you resize.</li>\r\n \t<li>The Rearrange All icon opens up a panel with different options for arranging your artboards in an orderly way on the canvas.</li>\r\n</ul>\r\nA couple of other artboard essential tips:\r\n<ul>\r\n \t<li>To hide all objects that are not within an artboard, choose View-->Trim.</li>\r\n \t<li>To delete an artboard, select it with the Artboard tool and click Delete.</li>\r\n</ul>\r\n<h2 id=\"tab2\" ><a name=\"_Toc14528272\"></a>Using artboards for a multidimensional project</h2>\r\nLet me illustrate a basic but typical multi-artboard workflow: one where you create different versions of the same graphic but with different dimensions. In doing that, I share some techniques and approaches you can apply to your own particular needs.\r\n\r\nSuppose that you are tasked with designing an ad that will run in different social media platforms and in different orientations: square, horizontal (landscape), and portrait (vertical). The ad must have the same basic content but fit the following size specs:\r\n<ul>\r\n \t<li>Square: 1080 pixels</li>\r\n \t<li>Vertical: 1080 pixels wide by 1350 pixels high</li>\r\n \t<li>Horizontal: 1200 pixels by 628 pixels</li>\r\n</ul>\r\nThe following steps are an efficient way to set up the artboards for this project:\r\n\r\n<strong> 1. Create a new document with one 1080 px square artboard, as shown</strong>.\r\n<p style=\"padding-left: 40px;\"><em>a. Choose File→New, and bypass the New Document dialog by clicking More Settings. </em>The More Settings dialog appears.</p>\r\n<p style=\"padding-left: 40px;\"><em>b. Name the project Ads.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. In the Profile drop-down, choose Web.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>d. In the Number of Artboards box, enter 3.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>e. Set the artboard arrangement to Arrange by Row (the third icon).</em></p>\r\n<p style=\"padding-left: 40px;\"><em>f. In the Height and Width boxes, enter 1080.</em> The Units setting will default to Pixels, and the Color Mode to RGB. These and other defaults are fine.</p>\r\n<p style=\"padding-left: 40px;\"><em>g.Click Create New Document.</em></p>\r\n\r\n\r\n[caption id=\"attachment_269163\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269163\" src=\"//coursofppt.com/wp-content/uploads/illustrator-three-artboard-document.jpg\" alt=\"Defining a three-artboard document.\" width=\"556\" height=\"485\" /> Defining a three-artboard document.[/caption]\r\n\r\n<strong> 2. Name the three artboards Square, Vertical, and Horizontal:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. If the Artboards panel is not displayed, choose Window→Artboards.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Double-click the name of Artboard 1 and type <strong>Square</strong>. In the same way, rename the second artboard <strong>Vertical</strong> and the third artboard <strong>Horizontal</strong>.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Choose View→Fit All In Window to see all three artboards, as shown.</em></p>\r\n\r\n\r\n[caption id=\"attachment_269141\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269141\" src=\"//coursofppt.com/wp-content/uploads/illustrator-naming-artboards.jpg\" alt=\"Naming artboards.\" width=\"556\" height=\"242\" /> Naming artboards.[/caption]\r\n\r\n<strong> 3. Resize the Vertical and Horizontal artboards:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. In the Artboard panel, double-click the icon to the right of the artboard named Vertical. In the Control panel that appears, change the height to 1350 px and click OK.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. In a similar way, change the dimensions of the Horizontal artboard to 1200 pixels wide by 628 pixels high.</em></p>\r\n<strong> 4. Arrange the artboards to create a more coherent display:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Click Rearrange All Artboards in the Control panel. </em>The Rearrange All Artboards dialog opens.</p>\r\n<p style=\"padding-left: 40px;\"><em>b. Keep the Arrange by Row layout and the left-to-right Layout Order settings you defined when you created the document. Leave the spacing set to 20 pixels, and leave Move Artwork with Artboards selected, as shown, then click OK. </em></p>\r\n<p style=\"padding-left: 40px;\">This step keeps the basic layout structure in place, but resets the spacing between the resized artboards so they don’t overlap.</p>\r\n\r\n\r\n[caption id=\"attachment_269101\" align=\"alignnone\" width=\"319\"]<img class=\"size-full wp-image-269101\" src=\"//coursofppt.com/wp-content/uploads/illustrator-arranging-artboards.jpg\" alt=\"Arranging artboards.\" width=\"319\" height=\"258\" /> Arranging artboards.[/caption]\r\n\r\n<strong> 5. Design your ad on one of the artboards.</strong>\r\n\r\n[caption id=\"attachment_269155\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269155\" src=\"//coursofppt.com/wp-content/uploads/illustrator-single-artboards.jpg\" alt=\"single artboard in Illustrator\" width=\"556\" height=\"230\" /> Designing a single artboard.[/caption]\r\n\r\n<strong> 6. Copy the first ad content to the other artboards:</strong>\r\n<p style=\"padding-left: 40px;\"><em>a. Use the Selection or Direct Selection tool to select all the content in the first artboard, the one with the content.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>b. Choose Edit→Cut.</em></p>\r\n<p style=\"padding-left: 40px;\"><em>c. Choose Edit→Paste on All Artboards. </em></p>\r\n<p style=\"padding-left: 40px;\">The Paste on All Artboards technique pays for itself when you're working with dozens or even hundreds of artboards! Of course, the pasted artwork doesn’t fit properly in differently sized artboards. Fixing that is the last step.</p>\r\n<strong> 7. Edit the design of the horizontal and vertical artboards to make the square content fit, as shown.</strong>\r\n\r\n[caption id=\"attachment_269114\" align=\"alignnone\" width=\"556\"]<img class=\"size-full wp-image-269114\" src=\"//coursofppt.com/wp-content/uploads/illustrator-customizing-artboards.jpg\" alt=\"customizing artboards\" width=\"556\" height=\"293\" /> Customizing designs for different artboards.[/caption]\r\n\r\nWhat do you do with a set of artboards? They are automatically saved as part of your Illustrator document. After that, you can export one, some, or all of them for screen or print output.","blurb":"","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"primaryCategoryTaxonomy":{"categoryId":33626,"title":"Illustrator","slug":"illustrator","_links":{"self":"//dummies-api.coursofppt.com/v2/categories/33626"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"What are artboards?","target":"#tab1"},{"label":"Using artboards for a multidimensional project","target":"#tab2"}],"relatedArticles":{"fromBook":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}],"fromCategory":[{"articleId":269199,"title":"How to Place and Crop Artwork in Adobe Illustrator","slug":"how-to-place-and-crop-artwork-in-adobe-illustrator","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269199"}},{"articleId":269196,"title":"How to Create SVGs with Scalable, Searchable Type","slug":"how-to-create-svgs-with-scalable-searchable-type","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269196"}},{"articleId":269193,"title":"How to Apply SVG Filters in Illustrator CC","slug":"how-to-apply-svg-filters-in-illustrator-cc","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269193"}},{"articleId":269190,"title":"How to Apply Transparency to SVGs","slug":"how-to-apply-transparency-to-svgs","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269190"}},{"articleId":269187,"title":"How to Prepare Artwork for SVG Output","slug":"how-to-prepare-artwork-for-svg-output","categoryList":["technology","software","adobe-products","illustrator"],"_links":{"self":"//dummies-api.coursofppt.com/v2/articles/269187"}}]},"hasRelatedBookFromSearch":false,"relatedBook":{"bookId":281621,"slug":"adobe-illustrator-cc-for-dummies","isbn":"9781119641537","categoryList":["technology","software","adobe-products","illustrator"],"amazon":{"default":"//www.amazon.com/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"//www.amazon.ca/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"//www.tkqlhce.com/click-9208661-13710633?url=//www.chapters.indigo.ca/en-ca/books/product/1119641535-item.html&cjsku=978111945484","gb":"//www.amazon.co.uk/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"//www.amazon.de/gp/product/1119641535/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"//coursofppt.com/wp-content/uploads/adobe-illustrator-cc-for-dummies-cover-9781119641537-203x255.jpg","width":203,"height":255},"title":"Adobe Illustrator CC For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"<p><b data-author-id=\"9574\">David Karlins</b> is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","authors":[{"authorId":9574,"name":"David Karlins","slug":"david-karlins","description":" <p>David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of <i>Social Media Marketing All-in-One For Dummies</i> and author of <i>Digital Landscape &amp; Nature Photography For Dummies</i>.</p>","hasArticle":false,"_links":{"self":"//dummies-api.coursofppt.com/v2/authors/9574"}}],"_links":{"self":"//dummies-api.coursofppt.com/v2/books/"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221abfe534e\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{&quot;key&quot;:&quot;cat&quot;,&quot;values&quot;:[&quot;technology&quot;,&quot;software&quot;,&quot;adobe-products&quot;,&quot;illustrator&quot;]},{&quot;key&quot;:&quot;isbn&quot;,&quot;values&quot;:[&quot;9781119641537&quot;]}]\" id=\"du-slot-63221abfe5c56\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0},"sponsorAd":"","sponsorEbookTitle":"","sponsorEbookLink":"","sponsorEbookImage":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":269181}],"_links":{"self":{"self":"//dummies-api.coursofppt.com/v2/authors/9574/articles?sortField=time&sortOrder=1&size=10&offset=0"},"next":{"self":"//dummies-api.coursofppt.com/v2/authors/9574/articles?sortField=time&sortOrder=1&size=10&offset=10"},"last":{"self":"//dummies-api.coursofppt.com/v2/authors/9574/articles?sortField=time&sortOrder=1&size=10&offset=14"}}},"objectTitle":"","status":"success","pageType":"author","objectId":"9574","page":1,"sortField":"time","sortOrder":1,"categoriesIds":[],"articleTypes":[],"filterData":{"articleTypeFilter":[{"articleType":"Articles","count":20},{"articleType":"Cheat Sheet","count":4}]},"filterDataLoadedStatus":"success","pageSize":10},"adsState":{"pageScripts":{"headers":{"timestamp":"2025-03-04T05:50:01+00:00"},"adsId":0,"data":{"scripts":[{"pages":["all"],"location":"header","script":"<!--Optimizely Script-->\r\n<script src=\"//cdn.optimizely.com/js/10563184655.js\"></script>","enabled":false},{"pages":["all"],"location":"header","script":"<!-- comScore Tag -->\r\n<script>var _comscore = _comscore || [];_comscore.push({ c1: \"2\", c2: \"15097263\" });(function() {var s = document.createElement(\"script\"), el = document.getElementsByTagName(\"script\")[0]; s.async = true;s.src = (document.location.protocol == \"https:\" ? \"//sb\" : \"//b\") + \".scorecardresearch.com/beacon.js\";el.parentNode.insertBefore(s, el);})();</script><noscript><img src=\"//sb.scorecardresearch.com/p?c1=2&c2=15097263&cv=2.0&cj=1\" /></noscript>\r\n<!-- / comScore Tag -->","enabled":true},{"pages":["all"],"location":"footer","script":"<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->\r\n<script type='text/javascript'>\r\n(function(){var g=function(e,h,f,g){\r\nthis.get=function(a){for(var a=a+\"=\",c=document.cookie.split(\";\"),b=0,e=c.length;b<e;b++){for(var d=c[b];\" \"==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};\r\nthis.set=function(a,c){var b=\"\",b=new Date;b.setTime(b.getTime()+6048E5);b=\"; expires=\"+b.toGMTString();document.cookie=a+\"=\"+c+b+\"; path=/; \"};\r\nthis.check=function(){var a=this.get(f);if(a)a=a.split(\":\");else if(100!=e)\"v\"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(\":\"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case \"v\":return!1;case \"r\":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(\":\")),!c}return!0};\r\nthis.go=function(){if(this.check()){var a=document.createElement(\"script\");a.type=\"text/javascript\";a.src=g;document.body&&document.body.appendChild(a)}};\r\nthis.start=function(){var t=this;\"complete\"!==document.readyState?window.addEventListener?window.addEventListener(\"load\",function(){t.go()},!1):window.attachEvent&&window.attachEvent(\"onload\",function(){t.go()}):t.go()};};\r\ntry{(new g(100,\"r\",\"QSI_S_ZN_5o5yqpvMVjgDOuN\",\"//zn5o5yqpvmvjgdoun-wiley.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_5o5yqpvMVjgDOuN\")).start()}catch(i){}})();\r\n</script><div id='ZN_5o5yqpvMVjgDOuN'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>\r\n<!--END WEBSITE FEEDBACK SNIPPET-->","enabled":false},{"pages":["all"],"location":"header","script":"<!-- Hotjar Tracking Code for //coursofppt.com -->\r\n<script>\r\n (function(h,o,t,j,a,r){\r\n h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\r\n h._hjSettings={hjid:257151,hjsv:6};\r\n a=o.getElementsByTagName('head')[0];\r\n r=o.createElement('script');r.async=1;\r\n r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\r\n a.appendChild(r);\r\n })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');\r\n</script>","enabled":false},{"pages":["article"],"location":"header","script":"<!-- //Connect Container: dummies --> <script src=\"//get.s-onetag.com/bffe21a1-6bb8-4928-9449-7beadb468dae/tag.min.js\" async defer></script>","enabled":true},{"pages":["homepage"],"location":"header","script":"<meta name=\"facebook-domain-verification\" content=\"irk8y0irxf718trg3uwwuexg6xpva0\" />","enabled":true},{"pages":["homepage","article","category","search"],"location":"footer","script":"<!-- Facebook Pixel Code -->\r\n<noscript>\r\n<img height=\"1\" width=\"1\" src=\"//www.facebook.com/tr?id=256338321977984&ev=PageView&noscript=1\"/>\r\n</noscript>\r\n<!-- End Facebook Pixel Code -->","enabled":true}]}},"pageScriptsLoadedStatus":"success"},"navigationState":{"navigationCollections":[{"collectionId":287568,"title":"BYOB (Be Your Own Boss)","hasSubCategories":false,"url":"/collection/for-the-entry-level-entrepreneur-287568"},{"collectionId":293237,"title":"Be a Rad Dad","hasSubCategories":false,"url":"/collection/be-the-best-dad-293237"},{"collectionId":295890,"title":"Career Shifting","hasSubCategories":false,"url":"/collection/career-shifting-295890"},{"collectionId":294090,"title":"Contemplating the Cosmos","hasSubCategories":false,"url":"/collection/theres-something-about-space-294090"},{"collectionId":287563,"title":"For Those Seeking Peace of Mind","hasSubCategories":false,"url":"/collection/for-those-seeking-peace-of-mind-287563"},{"collectionId":287570,"title":"For the Aspiring Aficionado","hasSubCategories":false,"url":"/collection/for-the-bougielicious-287570"},{"collectionId":291903,"title":"For the Budding Cannabis Enthusiast","hasSubCategories":false,"url":"/collection/for-the-budding-cannabis-enthusiast-291903"},{"collectionId":299891,"title":"For the College Bound","hasSubCategories":false,"url":"/collection/for-the-college-bound-299891"},{"collectionId":291934,"title":"For the Exam-Season Crammer","hasSubCategories":false,"url":"/collection/for-the-exam-season-crammer-291934"},{"collectionId":301547,"title":"For the Game Day Prepper","hasSubCategories":false,"url":"/collection/big-game-day-prep-made-easy-301547"}],"navigationCollectionsLoadedStatus":"success","navigationCategories":{"books":{"0":{"data":[{"categoryId":33512,"title":"Technology","hasSubCategories":true,"url":"/category/books/technology-33512"},{"categoryId":33662,"title":"Academics & The Arts","hasSubCategories":true,"url":"/category/books/academics-the-arts-33662"},{"categoryId":33809,"title":"Home, Auto, & Hobbies","hasSubCategories":true,"url":"/category/books/home-auto-hobbies-33809"},{"categoryId":34038,"title":"Body, Mind, & Spirit","hasSubCategories":true,"url":"/category/books/body-mind-spirit-34038"},{"categoryId":34224,"title":"Business, Careers, & Money","hasSubCategories":true,"url":"/category/books/business-careers-money-34224"}],"breadcrumbs":[],"categoryTitle":"Level 0 Category","mainCategoryUrl":"/category/books/level-0-category-0"}},"articles":{"0":{"data":[{"categoryId":33512,"title":"Technology","hasSubCategories":true,"url":"/category/articles/technology-33512"},{"categoryId":33662,"title":"Academics & The Arts","hasSubCategories":true,"url":"/category/articles/academics-the-arts-33662"},{"categoryId":33809,"title":"Home, Auto, & Hobbies","hasSubCategories":true,"url":"/category/articles/home-auto-hobbies-33809"},{"categoryId":34038,"title":"Body, Mind, & Spirit","hasSubCategories":true,"url":"/category/articles/body-mind-spirit-34038"},{"categoryId":34224,"title":"Business, Careers, & Money","hasSubCategories":true,"url":"/category/articles/business-careers-money-34224"}],"breadcrumbs":[],"categoryTitle":"Level 0 Category","mainCategoryUrl":"/category/articles/level-0-category-0"}}},"navigationCategoriesLoadedStatus":"success"},"searchState":{"searchList":[],"searchStatus":"initial","relatedArticlesList":[],"relatedArticlesStatus":"initial"},"routeState":{"name":"Author","path":"/author/david-karlins-9574/","hash":"","query":{},"params":{"author":"david-karlins-9574"},"fullPath":"/author/david-karlins-9574/","meta":{"routeType":"author","prerenderWithAsyncData":true},"from":{"name":null,"path":"/","hash":"","query":{},"params":{},"fullPath":"/","meta":{}}},"profileState":{"auth":{},"userOptions":{},"status":"success"}}

David Karlins

David Karlins is a web design professional and author who's written over 50 books and created video training on top web design tools. Doug Sahlin is the coauthor of Social Media Marketing All-in-One For Dummies and author of Digital Landscape & Nature Photography For Dummies.

Articles From David Karlins

page 1
page 2
page 3
24 results
24 results
Adobe Analytics For Dummies Cheat Sheet Cheat Sheet / Updated 12-03-2023 Adobe Analytics is the most powerful tool available for analyzing digital consumer data, but it’s easier to grasp if you know where to start. Master the most basic and widely applicable features in the easiest way. Get details on two standard calculated metrics in the analytics industry that focus on analyzing engagement on your site, app, or other digital property. Discover several tips to improve your productivity in Analysis Workspace. View Cheat Sheet
Building Websites All-in-One For Dummies Cheat Sheet Cheat Sheet / Updated 11-13-2023 Note: The following cheat sheet is from Building Websites All-in-One For Dummies which published in 2012; therefore, this content may be outdated. For more current information on website building, please see HTML, CSS, & JavaScript All-in-One For Dummies. Whether complex or simple, websites require that you make decisions — such as color, theme, and tone — and that you juggle many pieces of the project — like code, style sheets, and graphics. Knowing which resources to turn to for help implementing HTML5, and a few key points about incorporating graphics and video, can help you. View Cheat Sheet
Adobe Illustrator CC For Dummies Cheat Sheet Cheat Sheet / Updated 02-23-2022 Many of the most dramatic changes in how Illustrator is being used are taking place in the realm of translating vector images to the web, and the underrated SVG format is the key link in that process. SVG files maintain the treasured scalability features of vector artwork and are supported nearly universally in websites and web development environments. When you prepare vector artwork for the web, it’s important to avoid Illustrator’s standard effects and, instead, use SVG filters. Illustrator comes with a decent (but minimalist) set of SVG filters, but here are some tips on how to find and add SVG filters as well as resources for creating your own SVG filters. For those who work with web and app developers, make their lives easier and more productive by checking out the cheat sheet for handing off SVG code. View Cheat Sheet
How to Create SVGs with Scalable, Searchable Type Article / Updated 06-01-2020 SVG type provides the same valuable features found in all aspects of SVG graphics created in Adobe Illustrator CC: scalability, editability in Illustrator, and native support in all browsers. Those features in and of themselves argue for exporting your graphic content that contains type in SVG format when it's targeted for digital development. Even beyond the advantages you incur when you use SVG for graphics in general, some special features are available when you have type in those graphics. Exploit the value of scalable, searchable type As you might have noted, I’m excited about the fact that SVG type, when opened in a browser window, is searchable with the browser. Normally those browser search tools work with only HTML type. And SVG type is not only searchable; users can find text on a page, copy and paste, and look up content. For example, if a visitor to a juice bar is interested in whether or not the kale shakes have lemon juice, he can search the SVG file for that text, as shown here. Or for that matter, if a user isn’t sure what the heck kale is, he can select the text and search for a definition, as shown. To dial back a bit, you can export Illustrator graphics that include type for screens as PNGs, GIFs, or JPEGs. But they won’t be scalable, and they won’t retain the kind of type functionality demonstrated in the previous two figures. Optimize type functionality by saving SVGs I’ll return shortly to when and how to save SVG files and export to SVG. But while we’re on the topic of SVG type, you need to know that to make the SVG type behave in the way demonstrated, you must save your graphic as an SVG. And you must use specific settings so that the type acts the way it is supposed to when the SVG image is viewed in a browser. To save type within an image as SVG type, follow these steps: 1. With your graphic ready to hand off to a web developer, choose File→Save As. Navigate to the folder where you want to save the file and enter a filename. Keep filenames web compatible, which means use lowercase letters and numbers, do not use special characters (except the dash and underscore), and definitely do not use spaces. If you're resaving a file you’ve already saved to another format, you can keep your filename and location, and move on to Step 2. 2. In the format drop-down in the Save dialog, choose SVG and click Save. The SVG Options dialog opens. 3. Leave the SVG Profiles set to SVG 1.1 (the current version, supported by all browsers. The other options are not critical to what we are doing here, but briefly they are as follows: Subsetting option: Leave Subsetting set to None. The other options aren’t operative for SVG type for web. Image Location options: These options are applicable only if you have embedded or linked (or both) artwork in your Illustrator file. CSS Properties options: I describe the CSS Properties options later in this chapter, but the short explanation is that they are determined by the needs of the developer to whom you are handing off the files. When you're saving type as SVG, you can use any of the CSS Properties options. 4. In the lower section of the Advanced Options dialog, deselect the Output Fewer Elements and Use Element for Text on Path. Note that these options are selected by default. This section of your SVG Options dialog should look like the following figure. Deselecting these options might increase your file size slightly, but by deselecting them, you preserve how text looks and the properties I’ve been bragging about in this section (searchability, copy-and-paste, look up in browser, and other features, depending on the browsing environment). The Responsive check box is selected by default. This setting is not critical to preserving the special attributes of SVG type. Here, as with most options, your choice depends on the needs of your web developer. When in doubt, leaving the Responsive option selected is a widely applicable output option. 5. Click OK in the SVG Options dialog to save the file as an embeddable SVG. A few notes on SVG type: As of this writing, support for all features of SVG type is a work in progress. The basic features I’ve walked through here work in any browser, but support for different fonts might require some tweaking of code by your web developer partner. Are you wondering whether those cool select, edit, and search features of SVG text apply to text on a curve? The answer is revealed in the following figure. Spoiler: Yes! Add code snippets to SVG graphics Illustrator will never be anyone’s top-rated code editor, but it does include a cool little feature for associating code with elements of an SVG file. Let’s take a quick look at how to add a snippet of code when you want to add a link to part of an SVG graphic. The steps below walk through assigning JavaScript to an object that will make that object function like a link. 1. With an object selected, view the SVG Interactivity panel. You can display this panel if it is not active by choosing Window→SVG Interactivity. 2. Leave the Event set to the default, Onclick. This JavaScript command performs a function (make something happen) when a user clicks the selected object in a web page. 3. In the JavaScript box, use this syntax to define a link target: window.open("[URL]"); So, for example, if you were linking to the Wikipedia page on kale, the full line of code would be what I have in the figure: window.open("//en.wikipedia.org/wiki/Kale"); 4. Save the Illustrator file as an SVG file. The file is ready to turn over to your web developer. (Or if that’s your other role, you can change hats and pick up the file in your favorite code editor to integrate it into a web project). Alternatively, you can simply embed the saved SVG file in a web page. The link won’t be elegant (until a web designer tweaks the generated CSS, it won’t include a typical link icon when hovered over, for example). But it will work, and it will definitely be serviceable for prototyping and testing before the web page is finalized. Don’t try using Illustrator’s slice technique for saving SVG files. The technology behind slices is raster-based and doesn’t mesh with vector-based output. View Article
How to Place and Crop Artwork in Adobe Illustrator Article / Updated 03-15-2020 In Illustrator, place refers to bringing files into an existing document. Placed files can be embedded in a document or linked from an external source and included in an Adobe Illustrator CC document. Before you learn how to crop in Illustrator, you need to first place images. When files are linked, changes to the original file are reflected in the Illustrator document. When files are embedded in an Illustrator document, the umbilical cord, so to speak, is cut, and changes made to the original file are not reflected in the Illustrator document. Embed and link files To embed or link a file in an open Illustrator document, follow these steps: 1. Choose File→Place, navigate to the file in the dialog that opens, and click the file, as shown. By default, the Link option is selected. If you know you want to embed the file, not link it, deselect the Link option. If you’re not sure, leave Link selected (because it’s easier to change a linked object to an embedded one than vice versa). 2. Select or deselect Link. 3. To place the object in your document full size, simply click with the icon that appears. Or click and drag to size the placed object as shown. Managing linked files When a linked file is selected, it appears with a big X on the Illustrator canvas. The file can be transformed, moved, or sized like any object, but as long as it is linked, it can’t be edited. You manage the status of linked files in the Links panel. A number of options for managing the status of a linked file are available, but the most important and widely applicable is updating the connection when a linked file has been changed so that the latest version of the file appears in your Illustrator document. When a linked file has been updated outside Illustrator (for example, when a photo is touched up in Photoshop, or replaced with a different photo using the same filename), a warning icon appears next to the file in the Links panel. To update the placed content, click the Update Link icon in the Links panel (to refresh the link), as shown. Embedding linked files If you placed a file as a linked file but decide you want to edit it in your Illustrator document, you can easily convert the file from linked to embedded. After you break a link and embed a placed file, any changes to the original file will not be reflected in the Illustrator document. To change a placed object from linked to embedded, select it and choose Embed from the Links panel menu, as shown. Place text in a shape or path You can place text files (in TXT or RTF format) from a word processor. The placed text will be embedded, not linked. But it will automatically pour into the selected shape. The following steps place text in a selected shape. 1. Select the shape into which you are placing text. 2. Choose File→Place and navigate to the text file. When you choose File→Place and select a text file, the Show Import Options check box becomes active. Ignore it. Whether or not you select that check box, the next dialog that will open is the Microsoft Word Options dialog. 3. Click Place. The Microsoft Word Options dialog opens. Use the options in this dialog if you want to include a table of contents or an index, not import a table of contents or an index, and include (or not include) formatting. Available options depend on the source of the text file. 4. Click OK to approve your import options. 5. Click the edge of the shape to insert the placed text inside the shape, as shown. How to crop rasters in Illustrator You can crop placed raster artwork in Illustrator. Cropping a linked raster image breaks the linkage to the original file, so before you can crop a raster image you need to change a linked image to an embedded image. You can so on the fly with the following steps. 1. Select the image, right-click, and choose Crop Image from the menu that appears, as shown. 2. If a dialog appears, reminding you that cropping the image changes the link status to embedded, click OK. 3. Use the side and corner cropping handles to crop the image, as shown. a. Hold down the Shift key to maintain the original height-to-width ratio while you crop. b. Hold down the Alt key (Windows) or Option key (Mac) to maintain the original center point as you crop. c. Click and drag on the center point to move the crop area. The area to be cropped appears dimmed. 4. Press Enter (or Return) to crop to the area you defined in the preceding step. How to use clipping masks in Illustrator What if you need to crop a placed image or define an irregular shape that determines what part of the image shows through but also maintain the text file’s linked status? One solution is to draw and apply a clipping mask. Clipping masks hide sections of an image without cropping the image. To create and apply a clipping mask, follow these steps: 1. Draw a shape or path over the image demarcating a crop area, as shown. Normally, this shape will be a rectangle, like the one shown, but it can be any shape or path. 2. Select both the rectangle and the placed image by using Shift-click or any other selection technique, and then choose Object→Clipping Mask→Make. The result looks like a crop, but the placed (and linked) image only appears to be cropped. The entire placed image is still in the Illustrator document. If you want to display the entire image in your illustration, you can release the clipping mask by selecting the placed image and choosing Object→Clipping Mask→Release. 3. To change the location of the clipped image, choose Object→Clipping Mask→Edit, and select and move the mask, as shown. To edit an existing clipping mask for a selected object, choose Edit→Clipping Mark→Edit Contents. View Article
How to Apply SVG Filters in Illustrator CC Article / Updated 03-15-2020 Effects, like the ubiquitous drop shadow, are an essential element in every designer’s toolkit. You may have noticed that Adobe Illustrator CC’s Effect menu includes a substantial submenu for SVG filters. The available set of filters is expanding as Illustrator evolves to provide more support for SVG. By the way, if you’ve used Illustrator for years, you might remember that the Effect menu used to list effects and filters. Filters were like effects, except they couldn’t be easily edited after being applied. But SVG filters are not a revival of those types of filters; SVG filters are called filters because they operate through the SVG filter element in coding web pages. Here's another cool thing about SVG filters: As you discover shortly, you can import and even create your own SVG filters. When you apply an SVG filter, it may look similar to an non-SVG effect. For example, this figure shows two identical squares, but the one the left has a raster drop shadow effect applied and the one on the right has a vector (SVG) drop shadow filter applied. When I select the rectangle with the SVG filter, that filter appears in the Appearance panel, as shown. The different ways that effects and SVG filters change the path of an object have subtle but real implications. Some of those implications are relevant to only web and app developers, but from your end of the workflow, the important thing to keep in mind is to avoid mixing SVG filters and raster effects in projects because they affect objects differently. By the way, I can’t help sharing here that the square with the raster drop shadow in these figures is almost seven times larger than the one with the SVG filter. Just a brief public service announcement from the SVG industry on how you can lose (file) weight with SVGs. And as you may have surmised by now, raster effects are not programmable. When you turn them over to an animator or an HTML coder, your developer teammate is not going to have the same kind of freedom to control how raster effects work in an animation or a transition. Finally, when you apply SVG filters instead of raster effects to SVG artwork, you don’t have to worry about those filters degrading when the artwork is rescaled in a browser. How to apply SVG filters I’ve made the case for applying SVG filters whenever possible in SVG artwork. Let’s walk through how that happens: Select the object(s) to which you are applying the filter. Choose Effect→SVG Filters and select a filter. The SVG Filters submenu has a list of filters with names that at best are only semi-intuitive (such as AI_Shadow_1, which is a drop shadow) and more often just cryptic (such as AI_Dilate_6). You’ll have to experiment until you get a feel for how these filters work. With the object to which you applied the filter still selected, view the Appearance panel (choose Window→Appearance). Hover your cursor over the applied filter and click it to reveal the Apply SVG Filter box, shown here. Here you can change the applied filter, and use the Preview check box to see how the filter will look. You can also select and delete an SVG filter in the Appearance panel, as shown. How to import SVG filters Illustrator’s set of filters is useful but hardly pushes the limits of what you can do with SVG filters. If you code in HTML, you’ll find an accessible tutorial for creating your own SVG filters at w3schools. You also can purchase additional sets of filters online, and even find some nice sets of SVG free SVG filters. To install this set of filters or other filters, follow these steps: Choose Effect→SVG Filters→Import SVG Filter. In the dialog that opens, navigate to and double-click the SVG filters file you downloaded. The file will probably be an SVG file. Choose Effect-->SVG Filters to apply new filters to selected objects. After you import new filters, they appear on the SVG Filters submenu. View Article
How to Apply Transparency to SVGs Article / Updated 03-15-2020 SVG graphics from Adobe Illustrator CC are rarely handed off to digital designers with backgrounds. Normally the graphics float above whatever background exists in the website, app, animation, or interactive context. Before discussing what’s involved in knocking out the background behind SVG artwork, focus on applying transparency to SVG graphics. You need to defining the opacity of artwork using the Transparency panel. For example, 50 percent transparency has been applied to the yellow shape in the figure, and you can see the transparency in effect. And yes, that image is an SVG file, with all the lightweight, fast-loading, and infinitely scalable features built into SVG. How to output SVGs with transparent backgrounds Designers are used to thinking in terms of backgrounds that are either made transparent or remain visible. We think about knocking out a background. PNG images and GIF images work like that—you either create with a background or you choose a transparent background in a program such as Illustrator or Photoshop to knock out that background. With GIFs and PNGs, you can have one transparent color that allows the background colors or images to show through in web pages. But the logic of knocking out the background is different in an SVG file than with PNGs and GIFs. Essentially, there is no such thing as an SVG graphic that has a non-transparent background because there is no background. In other words: by default SVG graphics save and export without a background. So, what’s the problem? Well, it’s easy to accidentally end up with a transparent background when saving or exporting SVG files! The following figure might have a white background, or it might have a transparent background. You can't tell just by looking at the Illustrator screen; you have to choose View→Show Transparency Grid. With Transparency Grid enabled, as shown, you can see that the bird has a white rectangle behind it, and that white background will “go with” the graphic if you save the file as an SVG or export it as an SVG. Let me emphasize and shine a light on this from another angle. When I go to export this image as an SVG, the Export for Screens dialog, shown, does not have an option for selecting a transparency color. I often encounter designers who insist on putting a background rectangle behind their SVG-destined artwork so they can see how the graphic will look when backgrounded by a color in the target medium (such as a web page or app). That’s okay, I caution them, as long as you remember to remove that background rectangle when you save or export the SVG. And in today’s high-pressure, high-productivity, fast turnaround world, who needs one more thing to remember? A better solution is to define a transparency “grid” with a single color that matches the environment into which the graphic will be placed. Why do I put grid in quotes? Because this technique cheats: With it, you define both grid colors as the same color, effectively simulating a web page or an app background color. To use that technique to create a custom background while you develop SVG artwork, follow these steps: Choose File→Document Setup. In the General tab, find the Transparency and Overprint Options section. The changes you want are controlled in this section of the dialog. Don’t worry about defining the grid size because you're effectively dispensing with the grid. In the Transparency Grid section of the dialog, click the first of the two grid color panels and choose a background color by using one of the various color palettes in the Colors pop-up shown in the following figure. None of these color palettes is particularly digital friendly, by the way. There is no palette for RGBA, hexadecimal, or other standard web color formats, but the color picker eyedropper can help you get the background color you are aiming to match. Select the second of the two grid color panels, and assign the same color to it. Remember, you can use the color picker eyedropper to grab that color. Click OK in the Document Setup dialog. All I’ve done in the previous set of steps was define how the Transparency Grid displays when it is enabled. So, if your Transparency Grid is not enabled, choose View→Transparency Grid. In this figure, I selected the artboard with the graphic, and I am previewing the project against a simulated background color. Apply transparency effects to SVG When transparency (such as 50 percent opacity) or transparency effects such as color burn, darken, or multiply are applied to SVG graphics, those effects retain the scalability of SVG. This figure shows the same graphic—three semitransparent orange rectangles—exported as a PNG file (top) and an SVG. You can see how the PNG file degrades in quality when I zoom in on it in a browser. What you can’t see is that the PNG file is almost twice as large as the SVG. Here’s a summary of the advantages to using SVG for transparency effects: The file size is qualitatively smaller. A web or app developer can tweak or edit the transparency values and assign interactivity. The image and the transparency will not degrade no matter how much the file is zoomed in on. By the way, if you’re curious about what the generated SVG code for this set of rectangles looks like, and how easy it is for a web or app developer to work with it, here’s the code for the first of the three SVG boxes, with 60 percent opacity applied: <svg id="orange-squares" <style>.cls-1{fill:#f7931e;}.cls-1{opacity:0.6 </style <title>orange-bars</title> <rect class="cls-1" y="0.13" width="74" height="66.85"/> </svg> If your HTML and CSS skills allow, you can paste the <style>; element into the <head>; element of a web page, and the rest of the HTML into your <body>; element, and you’ll have replicated the code I created in Illustrator. Let’s walk through the process of applying transparency and transparency effects to SVG artwork step-by-step: Select the View menu and be sure that Hide Transparency Grid appears on the menu. This check ensures that you're viewing the Transparency Grid. If the Transparency Grid display isn't turned on, you can’t accurately see the effect of the opacity settings you apply. Select objects to apply transparency to, and choose an opacity value from the Opacity slider in the Control panel, as shown. I'm using the default transparency grid for the screenshot to clearly illustrate the transparent background. Choose Window→Appearance and, in the Appearance panel, verify, edit, or hide (and show) the transparency Do not apply transparency to objects intended for SVG output by using the Layers panel. Doing that applies raster transparency, which degrades when SVG objects are enlarged. You can also apply Transparency effects such as color burn, darken, or multiply to SVG-destined artwork. View Article
How to Prepare Artwork for SVG Output Article / Updated 03-15-2020 Ideally, Illustrator CC graphics intended for SVG output will have been created with a minimum of anchors and effects and with a minimum of raster objects. As you develop your own Illustrator-to-SVG workflow and habits, you’ll begin to internalize some of the demands of SVG files, and integrate those requirements more seamlessly into the design process. But the creative process for illustrators doesn’t always work that way. A traced sketch is going to have extra anchors. So, too, is artwork created with the Pencil tool. So whether you are dealing with artwork created with a minimalist approach to adding paths, or you inherit a project with anchor bloat, you will want to work at reducing file size by reducing anchors (and paths), using symbols wherever possible, and minimizing the use of raster images. Simplify paths for screen output The best way to see how much you can simplify paths is through trial-and-error. You do that by selecting artwork and choosing Object→Path→Simplify to display the Simplify dialog. Here you can experiment with different Curve Precision and Angle Threshold settings to see how many anchor points can be safely deleted from your artwork. The frog in the following figure, for example, was created reasonably efficiently but with some extraneous anchor points. By using the Preview check box to see the effect of reducing points, I can assess whether or not I can sacrifice some anchor points to reduce the file size. I can also use the Show Original check box to compare the original and simplified paths. Usually, though, that clutters the screen, and I prefer to judge “before and after” simplifying by toggling the Preview option on and off. Less Curve Precision reduces the file size less but retains the integrity of shapes more. In the example in the preceding figure, I set Curve Precision to a point where I reduced the file size to one third the original, but can still live with the accuracy. If this illustration had angles, I could have experimented with different Angle Threshold settings to see how much that would have reduced the file size without degrading the graphic. Reducing the file size with symbols Symbols also reduce SVG file size. For example, the file size of the graphic in this figure is 25 percent smaller when the graphic is saved as an SVG file with the candles as symbols, compared to each candle being a discrete object. I’ve seen and achieved even more radical reductions in file size when maximizing the use of symbols in architectural renderings (which might have dozens of trees, for example, that can be “symbolized.”). View Article
Exporting, Saving, and Printing from Adobe Illustrator Article / Updated 03-15-2020 You can export, save, and print several kinds of objects in Adobe Illustrator CC: an entire document; one, some, or all artboards in a document; selected objects; and assets. You share Illustrator files for a wide range of print and screen output options by exporting them to one of a long list of file formats. Exported files can't be edited in Illustrator. You save Illustrator files when you need to edit them in the future. Sometimes you export files for print or web output, and then save them. Sometimes you can save Illustrator files in formats that you can hand off to print or web designers and edit them. How to save Illustrator files You can save Illustrator files in any of these formats: AI, Illustrator’s native format and AIT (Illustrator templates). EPS, a widely supported vector format used for sharing files with other vector-editing apps and printers. Adobe PDF, a portable vector format accessible to anyone with Acrobat Reader. SVG or SVG (Compressed) files for screen output. Saving projects as EPS, PDF or SVG files gives you the option of retaining the ability to edit the files in Illustrator. Each of the options for saving Illustrator files has distinct options. If you are handing off a file in any of them, check with the team you are handing off to, to find out if there are specific settings they require. The following steps apply to saving files as AI, EPS, and PDF formats: Choose File→Save, File→Save As (to save an existing file with a new name), or File→Save a Copy (to create a duplicate copy of a file). Navigate to a location for the file and enter a filename. In the Format drop-down, choose one of the available formats (AI, EPS, or PDF). If the file format you want to use (such as PNG or TIFF) is not available in the Format drop-down, the format is available for export but not saving. Click Save to open the Options dialog for the file format you selected. The options will differ depending on the format but the following choices are widely available and useful: If you're saving to AI or EPS format, the Version drop-down defines the version of Illustrator with which you want your file to be compatible. If you are saving to PDF, the Compatibility drop-down defines what versions of PDF will be able to open the file. Legacy formats don’t support all features. Font embedding options allow you to embed fonts for users who will receive the file but may not have the required fonts. The Create PDF Compatible File option for saving AI files allows the file to be opened with Adobe Reader as well as apps that support importing Illustrator documents. The Include Linked Files option embeds any linked files in your illustration. The Embed ICC Profiles option is used by some print shops to ensure color integrity. Consult with your print shop on whether and how to use this option. The Use Compression option reduces file size. The Save Each Artboard to a Separate File option is available in Illustrator files with multiple artboards. Along with the resulting set of artboard-based files, a master file is created with all artboards. If you're simply saving an Illustrator project to access it, to edit it, or to share it with someone who has Illustrator, save the file as an Illustrator file. How to export files from Illustrator Illustrator files (as well as artboards, assets, and selections) can be exported to a variety of print- and web-compatible file formats. These files can't be edited in Illustrator, so you will almost always want to save as well as export projects as Illustrator files. Web designers may ask you for SVG files, which retain Illustrator editing capability. More likely, web designers will ask you for web-compatible PNG or JPG files. Print designers may be able to work with your Illustrator files. Or they might require TIF or other print-only raster images. In those instances, get the specs for the exported files from your print partner. You export files by choosing File→Export→Export for Screens or File→Export→Export for As (for print). Options vary depending on the output format. And, again, I’ll repeat a mantra that runs through this chapter and any discussion of output in this book: Ask the person to whom you are handing off the file what options he or she prefer. How to use artboards and assets for Illustrator output When you save or export Illustrator documents with multiple artboards, you can choose to export or save any set of artboards. For example, if you're exporting a document to PNG output for screens, the Use Artboards check box allows you to define which artboards to export. Communicating with your printer Today, print shops can turn Illustrator artwork into anything, from a poster to a coffee mug, a t-shirt to a message printed on glass. Each project has its own requirements, and the trick is to communicate effectively with your printer from the beginning. I asked Lydia Ochavo from UpPrinting.com, a widely used online print service, to share advice applicable to just about any print project in Illustrator. Here are some of her tips. Refer to the beginning of this chapter for notes on how to define documents to meet these specs: Print shops provide templates for frequently used output. Download and use them before you begin your project. UpPrinting has templates. Although Illustrator vector files are scalable, it’s safest to submit files to the printer sized to the actual output size. Most printers require a 1/8" bleed around your artwork. Make sure that all printable content is inside the bleed. Set raster resolution to at least 300dpi. Use CMYK color mode because professional print shops print only in CMYK. Many print shops prefer PDF format to Illustrator AI files. When you need an exact color match and your printer supports the use of Pantone color, use Pantone colors. Pantone colors are available from Swatch panels in Illustrator. You can use a Pantone color books to preview how a color will print. Those color books are available from your printer. View Article
How to Deploy Artboards in Illustrator CC Article / Updated 03-15-2020 Within the canvas of Adobe Illustrator CC, artboards are discrete, sized spaces that make it easy to export, share, or print sections of the canvas. The canvas is the area of the Illustrator workspace where you create graphics. The canvas is basically everything you see on the screen except the interface (such as the menu, Control panel, and other panels). Artboards are both coherent and discrete. Too philosophical? Okay, here’s the point: Artboards inherit and share many properties of the document they lie within, such as color mode or raster effect resolution. And that’s nice because it means you can work on different graphics, including differently sized graphics, with shared properties. For example, you might have a project where you design a print poster, palm card, and plastic banner for an event. Although these will be different in size, they will likely use the same set of colors and maybe other features such as symbols. Or you might use multiple artboards of the same size to prepare a prototype of a mobile app that shows different states of user interaction. Here, dozens of artboards might be helpful. Again, this project has common document properties that apply to all artboards, such as RGB color and pixels as the unit of measurement. To help you get your money’s worth out of artboards, I first review some basic rules for creating and using them. Then I walk you through the two scenarios I just identified—print project and app prototype—to help you understand the efficacy of artboards and to expose you to key techniques for deploying artboards. What are artboards? You can have 1 to 1000 artboards per document. I’ve never used 1,000 artboards in a project, but it’s nice to know they’re there if I need them. As I explain in the beginning of this chapter, you can set the number of artboards for a document when you first create it, but you can also add and remove artboards after you begin work on a document. The Artboard tool is part of the Basic toolset. You create artboards in a document by selecting the Artboard tool and drawing interactively on the canvas, as shown. Or you can generate an artboard by clicking the New Artboard icon in the Artboard pane or the Control (or Properties) panel. The Artboard Options dialog shown here opens. Generating an artboard allows you to name the artboard as you create it, along with defining the dimensions and location digitally. You can manage artboards in many ways. The following shows you how to define and take advantage of the artboard options I think you’ll find helpful in organizing and sharing projects. To change artboard sizes in Illustrator or move an artboard interactively, follow these steps: 1. With the Artboard tool, click once inside the artboard. 2. Drag to move the artboard, as shown. 3. Click and drag on a side or corner (square-shaped) bounding box to resize the artboard, as shown. You can change any artboard property by using the Control or Properties panel: The Presets drop-down provides quick access to commonly used sizes. My favorite feature here is the Fit to Artwork Bounds option, which resizes the selected artboard to shrink in size to where it just fits around all the artwork within it. By sizing an artboard to an exact fit around its content, you avoid exporting or printing blank space in your graphic. The Name box is the easiest way to change the selected artboard name. The Move/Copy Artwork with Artboard option is on by default but can be turned off if you want to move an artboard while leaving the content where it is. The Artboard Options box opens a dialog with options that apply to all selected artboards in a document. I find the Show Center Mark useful when centering content in an artboard. You can use this dialog also to rename multiple selected artboards with sequential numbering. For example, if I rename a bunch of selected artboards DK, I end up with DK-1, DK-2, DK-3, and so on. The X value in the Control panel defines the vertical location; the Y value defines the horizontal location. The Width and Height values resize the artboard. Use the lock icon to lock the height-to-width aspect ratio while you resize. The Rearrange All icon opens up a panel with different options for arranging your artboards in an orderly way on the canvas. A couple of other artboard essential tips: To hide all objects that are not within an artboard, choose View-->Trim. To delete an artboard, select it with the Artboard tool and click Delete. Using artboards for a multidimensional project Let me illustrate a basic but typical multi-artboard workflow: one where you create different versions of the same graphic but with different dimensions. In doing that, I share some techniques and approaches you can apply to your own particular needs. Suppose that you are tasked with designing an ad that will run in different social media platforms and in different orientations: square, horizontal (landscape), and portrait (vertical). The ad must have the same basic content but fit the following size specs: Square: 1080 pixels Vertical: 1080 pixels wide by 1350 pixels high Horizontal: 1200 pixels by 628 pixels The following steps are an efficient way to set up the artboards for this project: 1. Create a new document with one 1080 px square artboard, as shown. a. Choose File→New, and bypass the New Document dialog by clicking More Settings. The More Settings dialog appears. b. Name the project Ads. c. In the Profile drop-down, choose Web. d. In the Number of Artboards box, enter 3. e. Set the artboard arrangement to Arrange by Row (the third icon). f. In the Height and Width boxes, enter 1080. The Units setting will default to Pixels, and the Color Mode to RGB. These and other defaults are fine. g.Click Create New Document. 2. Name the three artboards Square, Vertical, and Horizontal: a. If the Artboards panel is not displayed, choose Window→Artboards. b. Double-click the name of Artboard 1 and type Square. In the same way, rename the second artboard Vertical and the third artboard Horizontal. c. Choose View→Fit All In Window to see all three artboards, as shown. 3. Resize the Vertical and Horizontal artboards: a. In the Artboard panel, double-click the icon to the right of the artboard named Vertical. In the Control panel that appears, change the height to 1350 px and click OK. b. In a similar way, change the dimensions of the Horizontal artboard to 1200 pixels wide by 628 pixels high. 4. Arrange the artboards to create a more coherent display: a. Click Rearrange All Artboards in the Control panel. The Rearrange All Artboards dialog opens. b. Keep the Arrange by Row layout and the left-to-right Layout Order settings you defined when you created the document. Leave the spacing set to 20 pixels, and leave Move Artwork with Artboards selected, as shown, then click OK. This step keeps the basic layout structure in place, but resets the spacing between the resized artboards so they don’t overlap. 5. Design your ad on one of the artboards. 6. Copy the first ad content to the other artboards: a. Use the Selection or Direct Selection tool to select all the content in the first artboard, the one with the content. b. Choose Edit→Cut. c. Choose Edit→Paste on All Artboards. The Paste on All Artboards technique pays for itself when you're working with dozens or even hundreds of artboards! Of course, the pasted artwork doesn’t fit properly in differently sized artboards. Fixing that is the last step. 7. Edit the design of the horizontal and vertical artboards to make the square content fit, as shown. What do you do with a set of artboards? They are automatically saved as part of your Illustrator document. After that, you can export one, some, or all of them for screen or print output. View Article
page 1
page 2
page 3
fun88 casino net cách chơi keno trực tuyến game đánh bài baccarat baccarat quốc tế sòng bài trực tuyến