Page 1

M A G A Z I N E 76

August 2015

Publish Anywhere!

InDesign to HTML5

Plus · ·Customizing A/V Controls · ·Typekit Gems · ·InFocus: Back to School Supplies


Check out the All-New CreativePro.com! Where Creatives Go to Know

NOVEMBER 16–18

DENVER

2015

INDESIGN MAGAZINE  76

August 2015

2


MAGAZINE

From the Editor in Chief PUBLISHERS David Blatner, Anne-Marie Concepción EDITORIAL Editor in Chief Mike Rankin, mike@indesignmag.com Managing Editor Wendy Katz, wendy@indesignmag.com Senior Editor Sandee Cohen, sandee@indesignmag.com Contributing Writers Chris Converse, Justin Putney, Chad Chelius, Claudia McCue, Erica Gamet, Peter Kahrel, Eugene Tyson, Keith Gilbert, Steve Werner, and Sandee Cohen DESIGN Rufus Deuchler rufus.deuchler.net BUSINESS Contact Information http://indesignsecrets.com/contact Subscription Information indesignsecrets.com/issues Published by InDesignSecrets.com, a division of The Creative Publishing Network, Inc. Copyright 2015 InDesignSecrets.com. All rights reserved. Reproduction and redistribution prohibited without approval. For more information, contact permissions@indesignmag.com. InDesign Magazine is not endorsed or sponsored by Adobe Systems Incorporated, publisher of InDesign. InDesign is a registered trademark of Adobe Systems Incorporated. All other products and services are trademarks or registered trademarks of their respective owners and are hereby acknowledged.

Long gone are the days when “publishing” just meant distributing your content via ink and paper. Now, your choices also include websites, ebooks, interactive documents, presentations, and apps of all kinds. Throw in Adobe’s DPS and new Publish Online service, and it’s easy to get lost in a maze of too many choices. You need a guide (or maybe three)! So in our feature article, Publish Anywhere!, David Blatner, Chris Converse, and Justin Putney team up to help you navigate the modern publishing landscape, and understand the many benefits of using HTML5. In addition to choosing the right publishing platform, you also have to design engaging experiences for your interactive documents. Chad Chelius knows a thing or two about this, so we got him to write an InStep on creating cool custom controllers for audio and video.

Don’t think we’ve forgotten about print amidst all this digital wizardy. In this month’s InQuestion, Claudia McCue solves some tricky problems that arise when working with spot colors and digital presses. And no matter how you publish your content, you’re going to need well-designed fonts to make your text look great. So Scott Citron spent some time digging around in Adobe Typekit to find the best hidden gems, which he shares in this month’s InType. Erica Gamet is also back with another fun InFocus. This time, she’s here to save you from wilting in the summer heat with cool thoughts of autumn and a big batch of Back to School goodies for InDesign geeks. We’ve got all that, plus a clever GREP of the Month trick by Peter Kahrel and a huge Best of the Blog bursting with InDesign goodness. Enjoy!

Photos on pages 1, 5, 18, 23, 39, 47, 63, 68, and 84 courtesy of Fotolia.com ISSN 2379-1403

INDESIGN MAGAZINE  76

August 2015

3


InSide: Table of Contents 5

Publish Anywhere with InDesign to HTML5 David Blatner, Chris Converse, and Justin Putney show how to export your InDesign documents as HTML5 to create fully-functional interactive documents and apps.

51

Free Script Identifies Word Stacks

53

Changing Numbers to Words with a Script

55

Read This Before Installing InDesign CC 2015!

InStep Chad Chelius shows how to create custom controllers for audio and video.

58

Where Did DPS Go in CC 2015?

59

What Do the Default Sample Scripts Do in InDesign?

62

Mystery of the Changing Font Contest

66

Switching Rows and Columns in an InDesign Table

68

How to Find Obscured Text in InDesign

71

More Font Info for InDesign CC Users

72

InDesign Documents on Behance

73

How to Save InDesign Files as Layered Photoshop Files

76

Understand the Current Limitations of CC Libraries

78

How to Copy Transparency Effects Between Groups

Best of the Blog  A collection of the most important and informative articles from InDesignSecrets.

80

Resize Your Documents to Fit One or More Objects on the Page

49

83

InDex to All Past Issues

18

28

32

39

48

InQuestion Claudia McCue answers your trickiest InDesign questions. InType: Hidden Gems of Adobe Typekit Scott Citron waxes typographic about the ever-expanding trove of fonts you have at your fingertips in Creative Cloud. InFocus Erica Gamet’s Back to School guide for InDesign users. GREP of the Month: Reveal Codes Peter Kahrel shows a trick for finding mixed formatting.

Making Custom Borders With Type on a Path

INDESIGN MAGAZINE  76

August 2015

4


Publish Anywhere!

Publish Anywhere!

InDesign to HTML5

David Blatner Chris Converse Justin Putney

INDESIGN MAGAZINE  76

August 2015

5


Publish Anywhere!

A

lmost everyone agrees that the future of publishing involves HTML5—not just on websites, but also HTML delivered through Web Apps, tablet apps, e-documents, and ebooks. Some publishers are now using HTML5 even for print! But what does that mean about the future of InDesign? InDesign has had a rocky relationship with HTML, but that relationship has been quietly changing over the past few years, and today we actually have several very promising pathways between our InDesign layouts and on-screen, HTML-based publishing. Our goal in this article is to help you understand why HTML is so important to InDesign users, how you can use the HTML you get out of InDesign, and the pros and cons of the various methods for converting your documents to HTML.

Why HTML? Back when Flash (SWF) and PDF were both ubiquitous, creating and distributing

INDESIGN MAGAZINE  76

August 2015

interactive content was relatively easy. The Adobe engineering teams made huge investments in implementing SWF-based features in InDesign and Acrobat, with the result that you could create a PDF document with a variety of buttons, slideshows, and more, and almost anyone could open, view, and interact with the document on their desktop or laptop computer. But all that changed with the release of iOS and the growing importance of mobile devices. On phones and tablets (and even now on many desktops, because Flash is no longer installed by default on Mac or Windows), Flash-based content typically won’t display at all. Making things worse, many interactive objects inside PDF files— such as buttons and videos—simply don’t work in most PDF viewing apps on the iPad and iPhone. You can blame Adobe or the International Organization for Standardization (ISO, which technically controls what can and should be supported in PDF), but the reality is that

HTML: It’s Everywhere When you think HTML, you probably think “web browser,” but HTML is all around us. Many digital billboards, fast food kiosks, and restaurant menus are based on HTML. If your refrigerator or car dashboard has a screen, it’s probably running HTML, too. Those ebooks you’re so fond of? And many of the most popular news and information apps on your devices? Yup, them too. we can no longer rely on PDF and SWF for rich media documents. Fortunately, there is another standard that offers many of the same benefits: HTML5. We should be clear here: We are using the term “HTML5” as shorthand for a combination of HTML, CSS, and JavaScript. And, unfortunately, HTML5 cannot do everything that the older formats can do. There are still reasons to use PDF.

6


Publish Anywhere! For example, it’s still easier to create and distribute forms (with checkboxes and menus and text fields and so on) as PDF; and you can password-protect PDF documents. (More on the topic of “documents” in a moment.) Nevertheless, for rich, interactive experiences, HTML5 is probably the way to go. But that brings up another question: Of all the many tools and applications available for creating HTML5, why would we want to use InDesign? Why Use InDesign for HTML5? With the dozens of HTML5 creation and editing apps available, why on earth would we suggest creating HTML5 with InDesign? There are four great reasons: »» We know InDesign. You’re going to be more efficient using a tool you understand, and the more comfortable you are with InDesign, the more you want to stay in it for all your work.

INDESIGN MAGAZINE  76

August 2015

»» Our content is in InDesign. The content we’re trying to push digitally is already in InDesign—whether it’s a book, magazine, brochure, ad, or catalog. It often makes more sense to export HTML5 from InDesign than to extract the content some other way. »» InDesign has easy-to-use tools. The folks at Adobe know how to build features that designers can use. For example, creating a slideshow or rollover button in InDesign is

incredibly simple compared to most other HTML programs. Plus, InDesign’s object, paragraph, and character styles map beautifully to HTML. »» InDesign is a page-layout tool. Much of design is about setting text and graphics on a “page.” InDesign was built for this task, and it’s important to remember that, under the hood, InDesign doesn’t care whether you’re working on a print page or a digital page.

More Reasons HTML Rocks Here are a few more reasons to choose HTML5 over PDF or SWF: »» HTML is very easy to edit, even with just a text editor. SWF is nearly impossible to change, and editing PDF files typically requires heavy-duty tools. »» HTML is reflowable. In a world where people are viewing content on a wide variety of mobile devices, content that can reflow to fit the screen is important. »» HTML readers are free and everywhere. With PDF and SWF, you need to find or even buy a viewer app. »» HTML is open. You can easily convert HTML to some other format, and HTML will be readable even decades from now.

7


Publish Anywhere! To What End? HTML can be a destination in itself, but the real power of the format is its ability to live just about anywhere. As we’ll discuss in this article, not only can you view HTML directly on the web (with a web browser), but you can also include it in or convert it to many other viewable formats and platforms. For example, you can build a Web App that can run on a mobile device, or you can put your HTML into an EPUB that appears like a digital book. You can even build whole apps based on the HTML you export from InDesign, using tools such as Adobe DPS. We’ll explore all these options and more later in this article. InDesign vs. Muse We want to be clear here that we are not advocating creating websites with InDesign. While you technically can, you would likely get a better result faster and easier with a tool such as Muse or Dreamweaver. Muse, especially, was designed to be a “web

INDESIGN MAGAZINE  76

August 2015

Not for Email Long story short: Email is one of the few places where HTML is still extremely limited. The main issue is that even though many email readers can handle simple CSS for text formatting, when it comes to positioning the text (the “geometry”), they’re stuck in 1999, when all HTML layout was done with tables. Because there’s no way to export an InDesign page as a giant HTML table, you cannot use InDesign to create even simple HTML emails. A secondary limitation is that JavaScript, which is responsible for the interactivity in HTML, could present a security risk inside of an email. So while HTML plays a central role in email formatting, it does not have the power there that it has in a web browser or mobile app. For a more detailed explanation and suggestions, check out Justin’s article at ajarproductions.

design tool for InDesign users.” And Muse has many different widgets and features (such as parallax scrolling and in-browser editing) that are unlikely to ever make it into InDesign. However, if you want to take advantage of HTML in some other way (either as a

section of a larger website, a Web App, or some other destination), and if you like using InDesign, we think it’s perfectly sensible to export directly from InDesign to HTML5.

8


Publish Anywhere! Exporting HTML from InDesign If you choose File > Export, you’ll see that you can choose HTML from the Format pop-up menu (Figure 1). This HTML export feature has been available for over a decade, but most people who try it find themselves sad, angry, or disappointed with the results. It all comes down to “page geometry”— that is, how the page looks vs. what is on the page. InDesign’s HTML export feature can currently save only the text and graphics on your pages. It does not save any positioning

Figure 1: You’ll find HTML right in the middle of the list of file formats you can export from InDesign.

INDESIGN MAGAZINE  76

August 2015

or layout information. In other words, you get the raw materials, and none of the “look and feel” of your design. The reason is that this feature was designed to export content that would be formatted in a web-design program such as Dreamweaver. Adobe made the assumption that you would want your InDesign pages to look completely different than your HTML pages. If you want to export the text and images from your document as HTML—in order to use them on a website or repurpose the content for some other system (such as a CMS)—we strongly recommend reading Michael Murphy’s feature article “InDesign to HTML” in Issue 53 of InDesign Magazine. He goes into great detail about how InDesign handles paragraph, character, and object styles in HTML, and explains the proper way to prepare your InDesign document before you export. On the other hand, if you want to retain the layout and interactivity that you built in InDesign, there are ways to do so.

Jailbreak EPUB With the release of InDesign CC 2014, Adobe started exporting true HTML5 with page geometry, but they called it something different: fixed-layout EPUB. EPUB files can only be viewed with a special reader, such as iBooks or Adobe Digital Editions. A fixedlayout EPUB (also called FXL) is a specific kind of EPUB which includes page geometry information (specific page positioning for the text and graphics). A fixed-layout EPUB acts somewhat like a PDF file in that it looks almost exactly like your InDesign layout. Technically, an FXL (and EPUB files in general) is like a little website packaged up into a single zip-compressed file. So if you’re trying to export HTML with page geometry from InDesign, you could export an FXL file, and then open this archive in a number of different programs and extract the HTML, CSS, and JavaScript files. You’ll also find a few other EPUB-specific files in there that you can probably ignore. This is called “jailbreaking” the EPUB.

9


Publish Anywhere! While extracting HTML5 from an EPUB is convenient (and basically free), you must remember that the HTML inside an EPUB has been created with an EPUB reader in mind. Therefore the HTML you retrieve may or may not be suitable for your needs, and you’ll have to test it carefully. In general, a very short (like single-page) document should work OK. However, note that FXL does contain one oddity when it comes to its HTML: every word on the page is generally saved within its own <span> code. That means each word can be precisely positioned on the page, but it also makes the HTML quite awkward to work with. Publish Online InDesign’s newest option for HTML5 export is a service called Publish Online. We call it a service rather than a feature because the HTML5 must currently reside on Adobe’s Creative Cloud servers. When you export using Publish Online (Figure 2), the tool

INDESIGN MAGAZINE  76

August 2015

automatically uploads the HTML5, posts it in a form that can be viewed on Adobe’s server, and provides you with a web address (URL). At the time of this writing, Publish Online is a “technology preview” (which we consider a nice way of saying “public beta”). That means Adobe is continuing to fine-tune it, and makes no guarantees about what will and won’t work. However, the results so far are very promising. Pages online look almost identical to the

Figure 2: General Publish Online options

InDesign layout; interactivity such as multistate objects, buttons, and animations work beautifully; and text formatting is maintained for any font (text appears to be converted to an outline format, such as SVG). There is no additional cost to use the service. On the downside, Publish Online sites cannot easily be downloaded, viewed offline, or used in any other non-web project. Plus, you cannot use any of the Adobe DPS Folio Overlay features in Publish Online, edit the exported HTML, or make the text searchable. We look forward to seeing if Adobe can or will address some of these limitations. But in the meantime, you should definitely try Publish Online to see how it works with your documents. InDesign Plug-ins Sometimes companies outside of Adobe can develop software more aggressively, bringing features and tools to market faster, and addressing the needs of certain

10


Publish Anywhere! segments of InDesign users more nimbly. This is clearly apparent when it comes to exporting HTML. Several years ago, one of us (Justin) decided to launch a Kickstarter campaign to raise funds to develop an HTML export tool. The result was the very successful in5 plug-in (published by his company Ajar Productions), which adds an “Export HTML5 with in5” feature to the File menu (Figure 3). Over the past three years, the plug-in has been updated every few months with new features to keep pace with user requests. We don’t want this article to sound too much like an ad for Justin’s software, but here’s a quick overview of some of its features: »» Full-page layout rendering in HTML5 »» Text can be rasterized, converted to SVG, or exported as editable HTML text »» Support for native InDesign animations, buttons, multi-state objects, hyperlinks, and other interactive features

INDESIGN MAGAZINE  76

August 2015

»» Support for DPS Folio Overlay slideshows, imported web content, image sequences, pan and zoom images, and scrollable frames »» Audio and video embedding »» Export to HTML5, Web Apps, and Baker Framework HPub Other developers have been working on HTML5 export tools, too. For example, where in5 focuses just on export, the Finnish company eDocker has a robust production and distribution system based on exporting your InDesign documents as HTML. Quark’s AppStudio offers some enterprise-level tools for converting InDesign IDML files to HTML

Figure 3: Exporting to HTML5 with in5 via the File menu

(though only for the purposes of building native apps with their system). Another company, Kerntiff, is also working on an HTML export tool for the Baker Framework (more on Baker in a moment).

Where Does the HTML Go? In most cases, the HTML that all these tools export from InDesign should be considered an intermediary step. That is, you need to do something with it—whether that be post it to a web server, convert it into an app, make an EPUB, or place it into another document. HTML is very flexible! Let’s explore your options for using the HTML produced from your InDesign documents. Put It on the Web Viewing HTML from a web server is probably the most common way HTML content is consumed. You first use an FTP (file transfer protocol) application to transfer HTML (and images and so on)

11


Publish Anywhere! from your computer to a web server, and then users view the content by navigating their web browser to your site’s domain. If your content is stored in a database, you can use a content management system (CMS) such as WordPress or Drupal to generate the HTML content directly on your web server. But in either case, people are visiting your website and being served the HTML content directly. In general, as we said earlier, we don’t recommend building websites with the HTML exported with in5 or any of these tools. That said, we have seen some pretty nice examples where InDesign documents have been uploaded as part of a larger site. For example, Daily Commercial News created an “online brochure” using InDesign and in5. This is similar to including a PDF on a site, but it was created with HTML and can contain far more interactivity than a PDF. Another way to place your HTML5 project on a web server is to embed it inside another HTML file or website using

INDESIGN MAGAZINE  76

August 2015

an iframe. An iframe keeps the embedded content in its own sandbox. You see this all the time in Slideshare presentations, YouTube videos, Google Maps, and Twitter Feeds, to name a few. Using an iframe lets you embed your InDesign document within the same layout as other web content, even if that content is coming from a CMS.

Apps vs. Documents When it comes to digital publishing, one of the most commonly-asked questions is “what’s the difference between a digital document and an app?” If you’re still scratching your head over this, read David’s explanation here at InDesignSecrets. Web Apps A Web App (we capitalize the words to distinguish this from a “web application,” which is a program that is running on a web server) is a wonderful piece of web

technology that makes a folder full of web content (HTML, CSS, and so on) appear as a native app on a mobile device. The content itself is HTML, but with a couple of added meta tags, the HTML can be saved to the viewer’s home screen just like a native mobile app. Combine that with the ability of most mobile devices to save a Web App in an offline cache, and the viewer doesn’t even have to be online when the Web App is later re-launched from the device’s home screen. Creating a Web App is simpler and cheaper than building a native app for a mobile device. The typical native-app development process involves using a heavier programming language (such as Swift or Objective-C for iOS or Java for Android), obtaining a developer certificate (Apple’s comes with a minimum $99/year fee), and submitting to an app store. Plus, Apple’s App Store has strict requirements, and Apple asserts the right to reject content for any reason (for example, they may

12


Publish Anywhere! decide your app is solely for marketing purposes or simply not interesting enough). The Web App process, on the other hand, is far easier. First you create your content (which you can do visually in InDesign) and export it as HTML. Then you add the Web App meta tags and, optionally, some detection JavaScript (if you’re using in5, it will automatically add these for you). Finally, just post your files to a web server like you would any other website. When someone views the site on their mobile device (like an iPhone or iPad), it lets them save the file to their home screen, and it begins to look and act more or less like a native app. The Web App can even optionally run as a website on desktops, laptops, and other devices that don’t support the “Save to Home Screen” feature. In the end, there are fewer hoops for you, the creator, to jump through when making a Web App, and the install process can potentially offer an easier user experience as well.

INDESIGN MAGAZINE  76

August 2015

However, the easier installation process means that Web Apps do not lend themselves to monetization the way a native mobile app sold in an app store would. Nevertheless, a Web App can be a great solution for marketing and internal materials, as well as low budget and quickturn projects, and any time you don’t want to deal with Apple’s App Store. Note that Apple’s iOS has the most sophisticated Web App support, though Android is slowly catching up. For more on Web Apps, see the sidebar “Additional Resources” at the end of this article. Creating an EPUB Most people don’t realize that the internal structure of an EPUB document is actually HTML. You can think of an EPUB as a

miniature, portable website. The ability to reflow content, change the text size, and add interactive features comes from the ability to combine HTML content with CSS and JavaScript. The EPUB reader unpacks the EPUB (it’s literally just a ZIP archive), loads the HTML and other media, and displays them for you. And the best part is, you don’t need an Internet connection to view the content. That said, because EPUB is focused primarily on providing a book-reading experience, EPUB readers are notoriously simple-minded when it comes to the scope of HTML they can handle. The two openstandards bodies that control EPUB and the web (IDPF and W3C) have stated their interest in creating a version of EPUB in the future that could support virtually any kind

A Web App can be a great solution for any time you don’t want to deal with Apple’s App Store. 13


Publish Anywhere! of HTML, which will lead to even richer and more interesting reading experiences. In the meantime, InDesign can export directly to reflowable EPUB and Fixed Layout EPUB. See InDesign Magazine issue 67 for more on this topic. Presentation Players EPUB is not the only method for “bundling up” HTML content and displaying it in a reader. Another solution is to work with a “presentation player.” This allows you to load your HTML content as the content of the presentation. Think of this as something like making a PowerPoint or Keynote presentation, but with the material being designed in InDesign and exported as HTML and CSS. Presentation players are native applications, available for many devices, which allow you to embed your entire HTML project into them for playback. One of the main advantages of a presentation player is that—because your

INDESIGN MAGAZINE  76

August 2015

project is saved inside that player—it can run all web content, even video, when you are offline. These players can save you a lot of time, and relieve you from having to create a native application of your presentation or document. Over the past few years, presentation players have been used to create presentation documents for sales staff, pharmaceutical reps, real estate agents, and financial brokers. This market is constantly shifting, but a few of the more popular options now are Showpad, MobileLocker, and Mobile Intelligence. Creating Native Apps A native app (application or program) is software that “runs” on a device, whether it be a computer, mobile device, or anything else with an operating system. InDesign, for example, is developed as two different native apps—one for Mac OS and one for Windows. In order to create an app, developers need to use specific programming languages for

each device or platform. This can require very skilled developers, and can be costly to create multiple versions of an app for various devices. However, there are ways of embedding your HTML5 content inside a native app, so that it looks and functions like any other app on a device. If you’re looking to sell or distribute your app via the Apple iTunes iOS app store, you’re going to need to create your own native app. Fortunately, there are a number of companies that provide off-the-shelf “wrappers” or frameworks, so that you don’t have to hire your own team of programmers to convert your InDesign documents into apps. DPS The most obvious app-creation tool is Adobe’s own DPS (Digital Publishing Solution), which can convert an InDesign document with various Folio Overlays into a native mobile app. It does this by converting your layouts to images or PDF files. But most

14


Publish Anywhere! people who view DPS apps don’t realize that much of the coolest interactivity was actually created with HTML5. That’s because DPS lets you seamlessly integrate HTML either as a whole article or as a portion of a page (using the content overlay feature). Both techniques allow you to include all of the HTML, CSS, JavaScript, and media files within your digital publication. Because DPS doesn’t support most of InDesign’s built-in interactivity tools (such as animations), many DPS users have taken to exporting interactive elements out as HTML5 using in5, and then importing that HTML (which DPS does support) back into InDesign. You can read more about that process in this article by Keith Gilbert, and then in a follow-up by Justin, here, in which he shows how to automate the process. By the way, another feature of DPS is the ability to reference HTML content directly from the web. This gives you the ability to add live, up-to-date content within your digital publication. While this approach

INDESIGN MAGAZINE  76

August 2015

does require the user to have an Internet connection for the HTML content, it means you get to combine evergreen content with the ever-changing content of the web. Alternatives and Hybrids There are, of course, several important alternatives to creating documents with DPS, including some that can literally convert your HTML project into an app! For example, like DPS, Twixl Publisher has tools for converting your documents to a native app, but it now also supports the HPub “microsite” format. If you’re looking for an open-source tool for converting apps, consider using the

Baker Framework. This embeds the HTML that you export from InDesign in a wrapper that acts kind of like a dedicated web browser that plays just your publication. That’s why these kinds of apps are often called “web view apps” or “hybrid apps”— they’re all creamy HTML on the inside, and delicious native app on the outside. Another, perhaps even simpler option for making a hybrid app is PhoneGap Build. (If you have an Adobe Creative Cloud membership, PhoneGap Build is free.) The one part of PhoneGap Build that can sometimes be complicated is creating the configuration file, but there’s a trick: let ConfiGAP do it for you. Then, once you have

New Secret Script for HTML Export Our friend Keith Gilbert recently discovered something amazing: A secret backdoor method for exporting HTML5 directly from InDesign without any plug-in. It appears to be similar to exporting as FXL EPUB, cracking it open, and pulling out the HTML files. You can download his free script here.

15


Publish Anywhere! all your files set up, you can literally just upload your HTML5 package to the service, and it spits out iOS, Android, and Windows Phone apps. That’s right: hybrid apps mean you do not need to re-write your content for each platform… you can write once, and deliver just about anywhere. For more bells and whistles—including branding, analytics, and the ability to make private (user login) apps—consider Liquid State. Again, you supply the artwork, they wrap it up in an app, and Bob’s your uncle (whatever that means).

The HTML Launchpad—You Can Get There From Here We hope it’s clear from this article that HTML can live just about anywhere. If you have a starting point for your content or design (such as an InDesign document) and an end point (such as an iPad app), you can get where you need to go via HTML. That is the case with nearly any format or device, because HTML is so universal.

INDESIGN MAGAZINE  76

August 2015

We should add that while most of the tools we’ve mentioned do not require you to know how to code, learning even basic HTML, CSS, and/or JavaScript skills can pay huge dividends. If you’re comfortable making even minor edits to HTML, you can easily crack open files created by other

Additional Resources Want to learn more about InDesign and HTML5? Check out these articles and videos. »» Creating HTML Layouts with InDesign on Lynda.com »» How to Get Paid for your Digital Publications without Breaking the Bank »» Introducing the Web App »» Creating an iPad App with HTML5 and PhoneGap Build »» Create an iPad Web App »» HTML Essential Training

applications and make any needed changes in a text editor. So once you have your content in an HTML format, not only can you go anywhere with it, but you can also make changes to your content, even if the original application that created the files disappears or no longer works. Why not get started today?

n David Blatner is the co-founder of the Creative Publishing Network and InDesign Magazine. He is the co-host of The InDesign Conference and InDesignSecrets.com and the author of 21 titles at lynda.com. Chris Converse has over 20 years of experience as a designer and developer, and presents training for Udemy and lynda.com. Learn more about his work at Codify Design. Justin Putney is a designer, animator, developer, speaker, author (Adobe Press & lynda.com), Adobe Community Professional, entrepreneur, and minimalist runner. He is also co-founder of Ajar Productions.

16


S R E H S I L B PU

5 1 0 2

N O I T C U D O PR ARTISTS

S R E N G I S E D

INDESIGN MAGAZINE  76

August 2015

8 1 – 6 1 r e b m o e d v a o r N o l o C , r e v n De

17


By Chad Chelius

InStep: Creating Video Controls

Adding video and audio controls in InDesign offers unique options when exporting to interactive formats. Too often, designers get pigeonholed into thinking about InDesign as a print-only application. But if the most recent releases of InDesign have taught us anything, it’s that InDesign is capable of far more than that. With its ability to output to digital publishing formats such as interactive PDF, EPUB, and DPS, we have more publishing options than ever before. And with those options come opportunities for including all sorts of fun modern gadgets that Mr. Gutenberg himself never dreamed of!

1. Optimize the video

INDESIGN MAGAZINE  76

August 2015

Video and audio controls are just a few of the interactive features that you can add in InDesign, but they’re arguably the ones that can have the most impact, as well as the most support across the different interactive formats. For this article, we’ll be outputting to the Fixed Layout EPUB format (FXL). FXL offers some powerful features and good compatibility across supported devices and EPUB readers including Kobo, iBooks for iOS and Mac, and Readium for Chrome.

Begin with the video that you’d like to use in your project. You’ll likely want to optimize it. One way to do this is to use Adobe Media Encoder. Part of a Creative Cloud subscription, this application lets you optimize an existing video file for a specific resolution and file format.

18


InStep: Creating Custom Video Controls

The easiest way to use Media Encoder is to select one of the many presets available in the Queue panel. For my example, I chose Web 1280×720, 16×9, with a framerate of 3500kbps.

If you don’t have a Creative Cloud subscription, there are other applications you can use to optimize your video. One that I like is a product called HandBrake. Available for both Mac and Windows, HandBrake is a free application with excellent options for optimizing video content to specific formats and resolutions. InDesign supports many video formats, including .mp4, .mov, .avi, .mpeg, .f4v, and .flv. But for maximum compatibility and quality, it is recommended that you use a video format encoded with the H.264 codec such as the .mp4 format. InDesign also supports the .mp3 format for audio.

INDESIGN MAGAZINE  76

August 2015

19


InStep: Creating Custom Video Controls

2. Place audio/video into

the InDesign document

Place the video file into the InDesign document. You can do this via File > Place, Adobe Bridge, or the Mini Bridge panel in InDesign.

Audio won’t appear visually in the exported document, so positioning, cropping, and scaling of the placed file aren’t very important. Video does appear in the exported document, so position it where you want it to appear in the layout. InDesign will allow you to crop video, but this cropping is not supported in exported formats (the full video will always appear in the final exported file). Scaling applied to a video in InDesign will be reproduced in the exported file, but for best quality, you should optimize the video to the size that you need with Media Encoder or HandBrake prior to placing the file into InDesign.

INDESIGN MAGAZINE  76

August 2015

20


InStep: Creating Custom Video Controls

3. Set media options

INDESIGN MAGAZINE  76

August 2015

With an audio or video file selected, you can set options for how those files will play by opening the Media panel (Window > Interactive > Media). The Media panel allows you to preview placed audio or video files within InDesign by clicking the Play button or by manually dragging the playhead. You can use Options checkboxes to set the video to play when the page loads and loop the audio/video file. Just keep the user experience in mind when considering these options. You can also use the Media panel to choose a poster (the static image the user sees before the video starts playing). The skins you can choose from the Controller menu only apply when exported to the Flash format; they don’t have any effect when exporting to FXL and PDF. You can also add navigation points at the bottom of the Media panel that will allow you to jump to specific sections of the video. To do this, drag the playhead to the desired point in the video, and click the + sign at the bottom of the panel. Give the navigation point a descriptive name, and then press Enter or Return. In this example, I’ve added four navigation points for key areas of the video that I’d like to provide easy access to.

21


InStep: Creating Custom Video Controls

4. Mask the video

Video doesn’t have to be simply dropped inside of a document. You can have a lot of fun integrating it visually into the context of the layout. In my example, I’d like the video to play in the screen area of a television image because that’s the visual effect that I’m going for.

I could just as easily use an image of an iPad, smartphone, tablet, or anything else. To make this happen, I obtained an image of a television and cut a path for the screen area of the television in Photoshop.

INDESIGN MAGAZINE  76

August 2015

22


InStep: Creating Custom Video Controls

I then placed the television image in InDesign on top of the video. Next, I chose Object > Clipping Path > Options, selected the Photoshop path that I created, and clicked the Invert checkbox so that the area within the path would reveal the video. This technique works just fine when the document is exported to an .FXL file, but in an exported PDF, the video will play on top of the placed image. An easy fix for this is to convert the image of the TV (or whatever image you are using) to a button by opening the Buttons and Forms panel (Window > Interactive > Buttons and Forms), selecting the image, and clicking Convert to Button at the bottom of the panel. By converting the image to a button, it also becomes an interactive object and will mask the video underneath.

5. Add a Play button

INDESIGN MAGAZINEâ&#x20AC;&#x201A; 76

August 2015

Now you have the ability to add buttons that will control the playback of the video/audio in your document. In this example, Iâ&#x20AC;&#x2122;ve placed an image of a remote control as a visual element that will contain invisible buttons placed on top of the actual buttons of the remote control. You could also create your own visual buttons using a placed graphic or an object drawn directly within InDesign.

23


InStep: Creating Custom Video Controls

Using one of the Rectangle or Ellipse tools, draw a frame on top of the Play button of the remote control image. Make sure the stroke and fill are set to None. I like to make the interactive button a little bigger than the actual button to provide a larger hit area for the user when they are trying to click or tap the button. Again, you could use an image or graphic of your choice for the button, or you could draw your own shape. With the shape selected, open the Buttons and Forms panel, and choose Button from the Type drop-down menu or click the Convert to Button button (I never get tired of saying that) at the bottom of the panel. I like to give the button an appropriate name. It doesnâ&#x20AC;&#x2122;t have much effect when exporting to PDF or FXL, but it does have an impact when trying to capture analytics in a DPS app, and you can use these same techniques to control video when building DPS folios. Leave the Event set to On Release or Tap. Click the + sign in the Actions section, and choose Video from the drop-down menu. If you were creating a button to control audio, you would choose Sound from the dropdown menu. In the Video drop-down menu, choose the video file that you want this button to control (in case you have more than one video on the page), and choose Play

INDESIGN MAGAZINEâ&#x20AC;&#x201A; 76

August 2015

24


InStep: Creating Custom Video Controls

from the Options drop-down menu so this button will play the video when it is clicked or tapped. In the PDF Options section at the bottom of the panel, you can provide a description for the button (useful for accessibility purposes), and you can choose whether the button will print or not.

6. Preview the video

7. Add a Stop button

8. Add a Pause button

INDESIGN MAGAZINE  76

August 2015

Click the button at the bottom of the Buttons and Forms panel to preview your page in the EPUB Interactivity Preview panel. Hover your mouse over the Play button you created, and click to start playing the video. You’ll notice that the video begins to play, but there’s currently no way to stop the video. Pressing the Play button simply restarts the video from the beginning. So let’s address that problem next. Draw a shape around the Stop button that will become the interactive button that will stop the video. Convert it to a button, and add another video action to the button—this time, choose Stop from the Options drop-down menu. Now you have buttons to both play and stop the video in the file. A more realistic requirement when watching a video is the ability to pause the video at certain points during playback. Draw a shape around the Pause button of the remote control, and convert the shape to a button. Add the Video action to the button, and choose Pause from the Options drop-down menu.

25


InStep: Creating Custom Video Controls

Preview the document using the EPUB Interactivity Preview panel to see the controls in action. One limitation of the Pause button is that although it allows you to pause the video, it won’t let you resume it. This requires some advanced controls.

9. Add advanced controls

INDESIGN MAGAZINE  76

August 2015

Begin by adding another button directly on top of the pause button, and add the Resume action to this button. Although this will in fact resume the video, you’ll have noticed that because it’s on top of the Pause button, it has made the Pause button inaccessible. To address this, we’ll systematically hide and show certain buttons that will need to be available at various times during playback. Select the Play button, and open the Buttons and Forms panel. Click the + sign to add another action to the button, and choose Show/Hide Buttons and Forms from the drop-down menu. Choose which buttons in the document to show and/or hide: In the Visibility section, show the Pause button and hide the Resume button. This makes only the Pause button available when the Play button is pressed. Repeat this for the Pause button, setting it to show the Resume button and hide the Pause button (itself ). Do the same thing for the Resume button, but have it show the Pause button and hide the Resume button (itself ). This sets the controls so that only the appropriate controls are visible when needed.

26


InStep: Creating Custom Video Controls

10. Adding navigation points

11. Wrap up

In step 3, we used the Media panel to add some navigation points at key areas in the video. Now we’ll add some buttons that will provide quick access to those navigation points. I’m using the colored buttons at the top of the remote control image to access each of the navigation points that I’ve created. Start by drawing a shape over the first button of the remote control, and convert it to a button. Click the + sign in the Buttons and Forms panel to add an action to the button, and choose Video. Make sure to choose the correct video from the Video drop-down menu, and in the Options drop-down menu, choose Play From Navigation Point. Choose the appropriate navigation point from the Point drop-down menu. Repeat this for the remaining buttons at the top of the remote control image. From here, you can export your file to the format of your choice. Note that there is a bug that can affect the stacking order of buttons in an interactive PDF. You can read about it (and some fixes for the problem) at InDesignSecrets. Adding video and audio to your digital documents can make them more engaging in ways that can’t be matched in print. And by crafting a few custom controls with images and buttons, you can go even further—as far as your own creativity will take you.

n Chad Chelius is an Adobe Certified Instructor, author, and consultant in the Philly area and is the Managing Editor of incopysecrets.com. He has authored several titles for lynda.com including his most recent title, Creating Accessible PDFs. You can reach him at chad@cheliusgraphicservices.com.

INDESIGN MAGAZINE  76

August 2015

27


By Claudia McCue

InQuestion

InQuestion is a regular column devoted to answering your questions about working with InDesign. Q. I’ve created a brochure with some color overlay effects, and my client has approved my design, based on what I showed her on my monitor. But now that it’s time to go to Figure 1: By default, InDesign may not show accurate previews of blending modes applied to spot colors (left). But turning on Overprint Preview (right) solves the problem.

INDESIGN MAGAZINE  76

the printer, I’m finding that the effect just doesn’t look the same in an exported PDF, and the proof from the printer shows the same problem. How can I fix this? A. Unfortunately, InDesign’s default viewing mode is a bit lazy—it doesn’t faithfully render some blending modes if you’re using spot color content. For example, in Figure 1, spot color shapes are using the Hue blending mode. In Normal view mode, the effect is subtle. But that isn’t the real story; choose View > Overprint Preview, and InDesign buckles down and displays the actual outcome. It’s a bit of a shocker, isn’t it? What can you do to resolve this? Be aware of this issue, and if you’re getting fancy with

August 2015

28


InQuestion: Send Us Your Queries

spot colors and blending modes, always work with Overprint Preview turned on, or get in the habit of frequently activating it to check your work. But what if you have your heart set on a particular appearance, and the effect just won’t behave? The easiest fix is to convert spot color content to process (CMYK) colors; then you’re likely to achieve the desired look. If you don’t have the option to convert to process, try using a combination of lowered opacity and the Multiply blending mode. Q. We combine pages from multiple documents in order to build project proposals. Now I’m encountering two problems, and I can’t figure out what’s causing them. First, when I drag a page from one document into another, the page numbers disappear! And if I just copy text from one document into the other, the appearance of the text changes. The text just uses the [Basic Paragraph] style in both documents. What’s going on?

INDESIGN MAGAZINE  76

August 2015

A. When you transplant a page, it takes on the corresponding master that’s in effect in the target document. In other words, if the A-Master in the donor document has automatic page numbers, but the A-Master in the target document doesn’t, you lose the page numbers. The same principle is at work when you copy and paste text between documents. Of course, your donor document and target document both have the default [Basic Paragraph] style, but someone has changed the specifications for that style in one of the documents. When you paste into the target file, the text takes on the specs in that file. This is one reason I’m not a big fan of changing the [Basic Paragraph] style. By the way, this happens regardless of the particular style; if you have a style named Heading in two documents, but the style is defined differently, pasted text will take on the definition of the target document as well.

Q. My company is printing promotional brochures for an upcoming trade show. Because we only need a few hundred, they’re going on a digital press. I have an image with a dark blue background, but I need for the background to cover entire pages. I went into Photoshop and used the Eyedropper tool to sample the color, and built a swatch in InDesign with the same values, created a large rectangle, and filled it with that swatch. But in the printed piece you can still see the difference between the image and the InDesign object (Figure 2, next page). I don’t want to have to create a ginormous image and composite the products together, because the client moves everything around so frequently. How can I make the colors match? A. The RIPs (Raster Image Processors) that process graphics for digital presses seem to apply color management differently to raster content (images and image content generated by effects, such as drop

29


InQuestion: Send Us Your Queries

shadows or glows) and vector content. The large flat color rectangle you’re using as a background is a vector shape. If you just needed a glow around your product shots, you could silhouette them in Photoshop, and then apply the glow in InDesign. But you have noise in the gradient background, and there’s really no way to do that in InDesign—you can add noise to the transition area of a gradient, but not inside an object. For consistency across your page on a digital press, you will need to have all-image content. But don’t panic—this doesn’t mean you have to composite in Photoshop! Here’s the fix: in Photoshop, create a small new image (one inch square is sufficient), and fill it with the correct swatch. In InDesign, change the fill of your background rectangle to None, and then place the small swatch image in that frame. Choose Object > Fitting > Fit Content to Frame. Don’t worry—the swatch image has no detail and no grain, so it doesn’t matter

INDESIGN MAGAZINE  76

August 2015

Figure 2: A color used to fill areas in Photoshop and InDesign content appears the same onscreen in InDesign (left). But it may look quite different when output to digital presses (right).

how much you scale it. And because it’s so small, it doesn’t add much to the size of your InDesign file or an exported PDF. Now, the content of your page is all made of the same material, and will provide

consistent print output on the digital press. By the way, this issue is particular to digital presses; the RIPs for offset platemakers treat raster and vector content the same. And no, I don’t know why!

30


InQuestion: Send Us Your Queries

Q. In previous versions of InDesign, I’d rotate a frame, and then select an adjacent frame and drag on the bounding box, relying on the Smart Guide “echo” in the first frame to help me rotate to the same degree. Now, in CC 2015, I can’t seem to get it to work unless I change the Interface option for “Live Screen Drawing” to “Immediate.” Am I missing something, or have Smart Guides gotten dumb? A. Patience, Grasshopper. Really: InDesign CC 2015 seems to prefer that you use what’s long been called Patient Mode to awaken the rotation guide “duckbills.” If you position your cursor just outside a corner of a frame and immediately drag to rotate it, you may not see the familiar green Smart Guide angle indicators (Figure 3). It’s not happening to everyone, but you’re not alone— it’s been happening to me, too, along with the majority of students in a recent class—not seeing those helpful positioning guides. Changing the Live Screen Drawing option (under Preferences > Interface) to

INDESIGN MAGAZINE  76

August 2015

Figure 3: If you click and drag a corner of a frame without pausing, you may not see the Smart Guides that indicate matching angles.

Figure 4: A pause after clicking the corner of a frame will invoke Patient User Mode, and make the Smart Guides appear when frames are rotated at the same angle.

Immediate is a fix, but it may slow down your performance, especially if there is large vector artwork in your layout. Instead, take a deep breath and use Patient Mode. Click and hold down your mouse button for a second before you begin rotating. When the cursor changes to an arrowhead, InDesign is ready to show you a live preview. When you begin rotating, you’ll see the matching green angle marks,

confirming that you’ve magically rotated the frame to the same angle as the adjacent frame (Figure 4).

n Claudia McCue is the author of Real World Print Production with Adobe Creative Suite Applications, and the presenter for a number of print-related lynda.com courses. When not chained to the computer, she can be found riding her motorcycle on country roads; she swears it’s the cure for writer’s block.

31


By Scott Citron

Hidden Gems of Adobe Typekit

There’s Gold(enbook) and Garamond and Gesta and Gibson in them thar hills. Among the many benefits of Adobe Creative Cloud membership is free access to fonts from Typekit. In this article we’ll explore the world of Typekit, learn more about how it started and how it became part of Adobe, and along the way discover a handful of typographic gems you might not know about.

What is Typekit?

Figure 1: From the Type menu, choose Add Fonts from Typekit.

INDESIGN MAGAZINE  76

August 2015

Typekit began in September 2009 by the creators of the Google Analytics service. Typekit’s original mission was to provide fonts to be served to websites, thus allowing designers unlimited typographic freedom over restrictive, websafe-only fonts. In October 2011, the service was acquired

by Adobe Systems. Today, Typekit is fully integrated into Adobe’s existing desktop type products and is accessible from within products such as Adobe Photoshop, Illustrator, Muse, and of course InDesign. For more information about Typekit and how to use it with your Creative Cloud membership, refer to the article “Getting Started with Typekit and Creative Cloud.”

How to use Typekit Kudos to Adobe for making Typekit a cinch to use. From within InDesign, you have access to it in a number of ways. From the Type menu, simply choose Add Fonts from Typekit (Figure 1). Typekit fonts can also be accessed from either the Character panel

32


InType: Hidden Gems of Typekit

or the Control panel drop-down menu (Figure 2). Once you click the Add Fonts from Typekit menu item or button, you’re whisked to the Typekit website. Assuming you logged in to your Creative Cloud account in InDesign, you’ll be automagically logged in to Typekit (Figure 3).

Figure 2: From the Type drop-down menu in either the Character panel or Control panel (seen here), choose Add Fonts from Typekit.

INDESIGN MAGAZINE  76

August 2015

From here, it’s simply a matter of green Use Fonts button in the upper right exploring fonts by any of the number of corner (Figure 4). ways seen in the rightmost column. When On this screen, it’s important to note Once you click the Add Fonts from Typekit menu item or button your whisked to the Typekit you find a fontyou you want use, clickCloud the account inwhether not chosen font is available website. Assuming logged intoto your Creative InDesign, or you’ll be your automagically logged in to Typekit (Fig. 3). for Sync or Web or both. Sync means the font can be used for print projects. Web fonts can be used only for screen projects. Adobe is clever here in its use of the word sync. Notice they don’t use the word download, which implies you could access the font files on your computer. Instead,

Figure 3:3: Here’s your next next destination from InDesign. Figure Here’s your destination from InDesign.

Figure 4: Here I’ve chosen Aktiv Grotesk Std, which is available for both Sync and Web (see far right column). All weights and styles for this font will be displayed on screen (some styles have been deleted here in the interest of space). From here, click the green “+ Use fonts” button in the upper right corner.

33


InType: Hidden Gems of Typekit

when you sync Typekit fonts, the font files are indeed downloaded to your computer, but they are placed in a hidden location that you cannot access through regular means. To continue, click the green button in the upper right corner. Doing so will bring up the window shown in Figure 5. Place a checkmark to the left of the fonts you want to use, and then click the green

Figure 5: Select the fonts you want to import, and then click the big green button labeled “Sync selected fonts.”

INDESIGN MAGAZINE  76

August 2015

button below the list. When you return to InDesign, these fonts will now be available in the usual places. What’s even nicer is that InDesign makes it easy to show only your Typekit fonts by clicking the Typekit filter button (Figure 6). Brilliant! Overall, Typekit integration could hardly be simpler or more seamless. One final point worth noting. When you use desktop fonts from Typekit (the ones you sync), Typekit’s terms of service do not allow copying or moving its fonts. This means that when you’re using InDesign’s Package

Figure 6: To display only your Typekit fonts, click the Typekit ‘T’ button at the top of this window.

feature (File > Package), any fonts from Typekit will not be collected along with the rest of the job. If you need those fonts elsewhere, the person receiving your file package must have his or her own Creative Cloud subscription. To avoid this problem, I suggest creating a press-ready PDF file to hand off. Creating a PDF file is (generally) the best and most reliable way to ensure typographic integrity in documents headed for print.

Hidden Gems? Now that you know how to find and use Typekit fonts in InDesign, what about those so-called “hidden gems”? With so many great fonts, it’s hard to narrow my choices. To make matters worse (or better, depending on your point of view), Adobe recently announced that it was adding nearly 60 new fonts from esteemed foundries like TypeTogether, Dalton Maag, and URW++. Although one man’s gem

34


InType: Hidden Gems of Typekit

is another man’s junk, here are 20 of my current favs:

The five boxing wizards jump quickly. Lexia Bold

HWT Bon Air

The five boxing wizards jump quickly. Bookmania Regular

The five boxing wizards jump quickly. Proxima Nova Regular

The five boxing wizards jump quickly. Lust Regular

The five boxing wizards jump quickly. Calluna Regular

The five boxing wizards jump quickly. Franklin Gothic URW Extra Compressed Book

The five boxing wizards jump quickly. Garamond Premier Pro Italic Display

Thefiveboxing HWT Catchwords Regular

INDESIGN MAGAZINE  76

The five boxing wizards jump quickly.

The five boxing wizards jump quickly. Arno Pro Regular

The five boxing wizards jump quickly. Blenny

The five boxing The five boxing wizards jump wizards jump quickly. Kings Caslon Display Italic quickly. HWT American Shopworn

Giddyup Std Regular

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

Madrone Std Regular

Ratio Modern Regular

Plume Regular

Craw Modern URW

Goudy Old Style (OTF)

The five boxing wizards jump quickly. Alegreya Regular

August 2015

35


InType: Hidden Gems of Typekit

Fonts in action Now that we’ve chosen a bunch of Typekit fonts, let’s take a look at some examples of how they might be put to work. Talat S. Halman book Here’s a spread from a book I designed about the late Turkish man of letters, Talat S. Halman. The entire book uses Arno Pro as its font. Because of the many Turkish names and words in the book, I was limited to a typeface that included a complete Turkish character set. Arno Pro, named after the lazy river that runs through Florence, Italy, was designed by Adobe Principal Designer Robert Slimbach (Minion Pro, Garamond Pro, and many others). To facilitate typesetting Turkish characters in the book, I created a custom glyph set for the project.

Chapter 1

Relatives and More Relatives

Istanbul, 1938

O

n a cool autumn day, a slight, rather fragile boy of seven gazes from the window of his room in the konak (mansion) of his maternal great-uncle, Nemlizade Cemal Bey, enjoying the solitude that would become a hallmark of his entire life. The boy feels abandoned, and with good reason. He has been relegated to the care of his wealthy great-uncle while his parents are away indefinitely in Europe. His father, a captain in the Turkish navy, has been sent on an extended mission to purchase ships for the navy, and his mother has accompanied him. Among the things the boy misses most are the discussions with his father. He sighs and gets up to head downstairs to dinner.

Above: Talat as a young boy of five or six. Opposite: Ottoman miniature painting depicting the Battle of Çaldıran, August 1514, when the Ottoman sultan Selim I (depicted with white turban, blue kaftan, and sword raised, sitting astride a horse outfitted in red) and his crack Janissary troops attack Shah Ismail’s Safavid troops (on left, with pointed black caps).

14 | Talat S. Halman: Turkish Nomad

INDESIGN MAGAZINE  76

August 2015

He does not look forward to joining the crowd. The meals are virtual feasts—the huge tables laden with a fantastic variety of food: assorted appetizers, pilaf, meat dishes, fish, pasta, and sumptuous desserts and fruit. Each dish is a masterpiece. Seldom are fewer than thirty people served in what can only be described as a banquet hall. All these people and the constant chatter of the adults make the small boy feel even more alone. Uncle Cemal’s mansion, in the wealthy Mühürdar section of Istanbul, has at least forty rooms and serves as home for numerous members of an extended family. The house boasts a magnificent garden facing onto the sea; this fall day it offers the summer’s last blooms of the most extensive rose collection in all of Turkey. Chirps and twitters fill the air, coming from the garden’s aviary where Cemal Bey houses his four hundred canaries. Only a favored few of these feathered musicians are selected to live in the house at any given time to delight the family with their song. It is, rather, the extraordinary view from his room that enchants the young Talat Halman—a bird’s-eye

| 15

36


InType: Hidden Gems of Typekit

July 4th invitation For this simple all-type invite, I’ve chosen Carol Twombly’s Giddyup for the headline font, and Franklin Gothic URW for the tag line.

Sasquatch Brewing Company For this brewery based in Portland, Oregon, I developed this logo with iconic Mt. Hood, using HWT American from Hamilton Wood Type. The grungy quality of the font worked perfectly for the rustic feeling the client wanted to impart.

INDESIGN MAGAZINE  76

August 2015

37


InType: Hidden Gems of Typekit

Like a kid in a candy store

Alphabirds book For this book that I designed and illustrated, I chose Lust Regular. Lust has its roots in Bodoni and seemed a nice counterpoint to the drawings.

If you’re a Creative Cloud subscriber who can’t get enough fonts, you’ll have big fun with Typekit. The carefully curated combination of professional fonts that are not only free but easy to find and use in InDesign is a home run for typoholics. Enjoy your hangover.

n Scott Citron is a New York City-based designer and consultant. He specializes in fine books, magazines, advertising, and corporate identity systems. You can learn more about his work at scottcitrondesign.com.

Pretty Kitty Cat Food For this brand of gourmet cat food, I’ve chosen two fonts that you might not otherwise think would work well together. For the label brand (Pretty Kitty) I’ve used Madrone. For the tag line below it, I’m using Clavo Light.

INDESIGN MAGAZINE  76

August 2015

38


By Erica Gamet

InFocus

Back to School Supplies, InDesign-style

It’s just about that time of year when those three little words, dreaded by children everywhere, start flying around: Back to School. Even though I loved school, those words reminded me just how much little time was left to enjoy the freedom of summer. Just because most of us don’t get to experience the joy of a long summer vacation as adults doesn’t mean that we can’t find diversions and surprises in our work that feel like a getaway. If you’re not ready to say good-bye to summer, read on!

GoodNotes App Our months-long vacations are a thing of the past, but that doesn’t mean we can’t get away for a mini vacation here and there. If

INDESIGN MAGAZINE  76

August 2015

you’re anything like me, you often bring a little work along with you. It’s kind of like when you’d vacation during the school year and you were forced to do homework at Disney World. I recently found GoodNotes (Figure 1, next page), an app that makes my workload seem a bit less like work. GoodNotes is a note-taking and PDF markup tool that bridges the gap between handwritten notes and the text-based PDF annotation apps I’ve tried. GoodNotes is brimming with so many features (that I couldn’t possibly cover here), and it’s a steal at only $7. The app—which is only available only for the iPad—lets you create notebooks with custom covers and “paper” styles like lined and grid, or you can

39


InFocus

simply import images and PDFs directly as a project for markup. I like using the single-file import for marking up images and for freeform editing of my PDF proofs. GoodNotes also has a slew of textbased PDF markup tools, but I find that in the “virtual notebook” world, using my finger or stylus for that purpose feels more natural. One of the killer new features (recently added) is the OCR capability that lets you search text, even in your handwritten notes! Working on changes in a PDF proof is as easy as it was back in the days of printing out the PDF and red-lining the changes. GoodNotes has changed the way I approach both pre-production and the inevitable client changes, simply by mimicking the ease of working with pen on paper.

Fit Text to Frame Script Just like when we were little, sometimes we are forced to color within the lines. Only now, our “lines” are text frames, set to a fixed size that our client is determined to stuff copy into. You know that client—the one that insists no copy can be cut, but somehow it all must fit into a certain amount of space. That’s where a handy little script like the Fit Text to Frame script from Bookraft Solutions steps in to help. Its purpose is simply to increase or decrease point size to perfectly fit text within the enclosing frame (Figure 2). Figure 2: Before and after running the Fit Text to Frame script.

Figure 1: The GoodNotes app lets you take notes, add images, annotate PDFs, and more on your smartphone or tablet.

The $49 price tag might seem a bit steep at first, but how much time have you spent sizing down your type by 1/4 of a point at a time to make things fit? Your time is worth money, and this script will save you both. You can use the script in one of two ways. The first is by selecting the frame (or frames) that need the text fit. Selecting a single frame of a story will fit all the text in the story to the complete set of frames. The other option for using Fit Text to Frame is to start with nothing selected. Running the script will bring up a dialog box

INDESIGN MAGAZINE  76

August 2015

40


InFocus

that lets you fit text based on an object style. Since the text is being transformed—just as if you manually resized the frames—you may have to choose Redefine Scaling as 100% from the Control panel, especially to view and fix paragraph style overrides.

Creating Animations in InDesign One of the most anticipated events in school was when the Book Fair came to town, am I right? I hope I’m not alone in recalling with fondness the joy in being able to purchase several books of my own choosing! Now that I’m an adult, I still get giddy when I buy a book that is for me, and me alone. I’m not ashamed that most books I buy as a physical book these days are computer- or graphics-related. One that caught my eye recently doesn’t actually come out until the end of this month: Creating Animations in Adobe InDesign CC One Step at a Time. Written by the incomparable Sandee Cohen, this 220+ page book covers the animation capabilities of InDesign in detail. And, because it’s from Sandee, many of the animations come from unexpected places. The “one step at a time” concept describes not only the

INDESIGN MAGAZINE  76

August 2015

explanation of techniques, but also the exercise sections. Each chapter concludes with multiple exercises, each one more in-depth than its predecessor. This allows readers to test their basic grasp of the chapter, by taking part in the first exercise only or by delving into a certain topic or technique by completing all the exercises for that chapter. Animations in InDesign have become more relevant since InDesign gained the ability to export Fixed Layout EPUBs. Cohen focuses on the export choices available and how animations fit into the different digital output options. If you purchase the book you can also download the elements used in the exercises, as well as the finished creations, so you always know what your creations should look like. The book from Adobe Press is currently available for preorder on Amazon for $40.

Ufish IN Lite One of the greatest inventions of the 20th century has to be the Trapper Keeper notebook. Seriously, anything that could keep yours truly organized throughout her school days has to be worth such distinction. Not only could I keep my papers in order in the 3-ring binder, but I had a separate section for each subject, and I could easily find just what I was looking for, no matter what class I was sitting in. That’s kind of how I view the Ufish IN Lite app (free from the Mac App Store, Figure 3, next page) that I recently discovered.

41


InFocus

It’s like a Trapper Keeper for your InDesign files. I’m not nearly as organized these days, and my file-naming schemes leave something to be desired. What the Ufish app lets me do is see my InDesign files—and only my InDesign files—in a visual arrangement.

include cloud syncing, which would give you an instant, curated portfolio on your tablet or smartphone. I would like the ability to individually delete files from the list—currently you can only delete the entire list—and to open the InDesign files directly from the app. While Ufish is kind of like the new kid at school whose worthiness is still being evaluated, I think it has the potential to be a valuable cataloging and identification tool in my workflow toolbox.

Pencil by FiftyThree Remember walking into class the first day of elementary school with that shiny new pencil box and a couple of freshly sharpened, bright yellow pencils? The simple-yet-powerful Pencil by FiftyThree stylus (Figure 4) brings those memories flooding back.

Figure 3: The Ufish IN Lite app shows only InDesign files within a given folder.

The minimal interface asks you to choose a folder, and the app displays only the InDesign files it finds in that folder. You can continue adding folders to the group, or even select your hard drive to display every InDesign file on your computer. Ufish has two display modes: list and grid. Both options display the first page of your document, as well as creation and modification dates, file path information, and file size. You can also mark items as favorites, making it easy to display only certain files. Planned improvements

INDESIGN MAGAZINE  76

August 2015

Figure 4: Pencil by FiftyThree brings the comfort of a familiar tool to the digital age.

42


InFocus

This stylus costs $50–60 and comes in a walnut or dark graphite finish, proving you don’t need a stylus that looks like it fell off the Starship Enterprise to get the job done. Modeled along the lines of a classic carpenter’s pencil, the Pencil—which could have been named more imaginatively to make my job easier—serves a basic function, with modern conveniences like palm rejection. The fat rubber tip that Pencil sports is great for drawing and some fine-line creation. I wouldn’t expect it to be exactly adept at handling text or hand-written notes on your touchscreen device. Erasing is natural to anyone who’s ever used a pencil (with a lowercase p). Simply flip the stylus over to erase. Sometimes simple is the easiest route, and that’s definitely a theme I see with Pencil. And since Pencil is made by the same folks who brought us the Paper drawing app, you can expect it to work best with that particular software. Other apps—such as Procreate, Sketchbook, PDF Pen, and the Adobe mobile apps—have integrated Pencil’s pressure-sensitive abilities and even its blending mode. Pencil by FiftyThree is equally at home in the most popular drawing apps as it is in those apps that simply use a stylus to tap and move objects.

Now redlining and editing is just part of my job, and something InDesign has been handling natively via Track Changes for several versions. One thing InDesign doesn’t do natively, though, is show changes that are being tracked in the layout view. I don’t know about you, but that’s the view I work in most often, even when working on type edits exclusively. Not to worry: the folks at Kerntiff Publishing Solutions have released a script that shows those changes, right in the layout view. The free EditMarksViewer script (Figure 5) does this through the use of conditional text.

EditMarksViewer When I was in school, I dreaded getting my writing assignments handed back to me. Just seeing all those red marks across the page—all my errors and shortcomings—sent my little heart racing.

INDESIGN MAGAZINE  76

August 2015

Figure 5: The EditMarksView script displays tracked changes in layout view.

43


InFocus

With Track Changes on, simply run the script, and your added or changed text will appear with highlighting. Of course, any deleted text isn’t indicated at all in the layout view. You can easily hide and show the changes from the script’s panel (which remains open after running the script). I think the one big drawback—keeping in mind, of course, that this is a free script—is that as you continue to work, future changes you make aren’t automatically tagged and viewable as changes. You have to re-run the script for new changes to appear. A big plus, however, is the ability to make changes and then create a new EditMarks group, giving you a way to toggle between revisions in your document. So, while EditMarksViewer isn’t perfect, it will save you from having to repeatedly jump between the layout and Story Editor views.

there’s an option to connect two devices at once, for the multitasker in you. The A300 (Figure 6) is made from an aluminum alloy and sports grilles in five festive hues: red, yellow, white, green, and blue. Setup is a breeze, with easy on/auto off functions, and Bluetooth can be set up without even powering on the little guy. And it’s not just for jamming to the sounds of summer: The speaker can be used to send and receive calls as well. So whether you’re boppin’ to the oldies while mocking up a template on your iPad or holding a conference call at the family cabin, this “little speaker that could” just might make the end of summer bearable.

Bluetooth Speakers for Travel If you find yourself working more, er, mobile-ly these days, or you’re just ready to take one more road trip before the kids go back to school, you might want a bit more audio than your smartphone can put out. The A300 Bluetooth Mini NFC Speaker ($60 from Rapoo.com) gives you sounds on the go in a cute little package. At roughly 3 inches cubed, the A300 connects via Bluetooth to your computer, tablet, or smartphone. In addition to the Bluetooth connection, you can even hook up via a wired connection, and

INDESIGN MAGAZINE  76

August 2015

Figure 6: Stylish and portable Bluetooth speakers for work or play.

44


InFocus

Blokk and Redacted Fonts When choosing a typeface, one of the first things we designers consider is, “What message are we trying to convey?” We select the type based on how readable it will be and the types of emotions and atmosphere it will create. But what if your goal was to say nothing at all and to let the type just be part of the form and structure of the piece you were creating? I know what you’re thinking: Lorem Ipsum! Sometimes—whether through hyphenation issues or the client’s lack of knowledge of dummy text’s purpose— even our Latin stand-in is too much in the spotlight. That’s where a typeface that says nothing comes in handy. Two such typefaces—BLOKK and Redacted—excel at this task. BLOKK is literally just a collection of blocks. Looking like you set your “Greek Type Below” setting to 96pt., BLOKK is meant to be used early in the workflow. When you’re first comping up a layout, or wireframing a site, use BLOKK to totally focus on structure over content. Redacted—which is an open source project based on BLOKK—steps it up a notch. This typeface includes text that looks similar to BLOKK, but that the author says is designed with “more sane character widths” (Figure 7). In addition, Redacted includes three “script” faces that take a less heavy-handed approach to blocking out text.

INDESIGN MAGAZINE  76

August 2015

Figure 7: BLOKK (top) and Redacted (bottom) typefaces stay out of your way to focus on the layout.

45


InFocus

Type:Rider Typography Game Let’s face it, we can’t work all the time. But what we can do is play games that give us the sense that we are still doing something work-related. That’s where a fun little game called Type:Rider comes in. Available to play on iOS, Android, and online, Type:Rider takes you on a playful ramble through typographic history. You play the part of a colon rolling along on its individual dots from the earliest days of cave paintings, through the worlds of Gutenberg and the Roaring ’20s, and into the brave new world of digital typography. Along the way, you encounter familiar faces like Garamond, Clarendon, Times, and Didot, while learning some of these characters’ backstories. And though I haven’t gotten all the way through, I hear there’s even a secret level (of Hell, perhaps?) that features everyone’s favorite archenemy: Comic Sans. Type:Rider (Figure 8) is a beautifully designed sidescroller of sorts, the brainchild of Parisian Théo Le Du Fuentes of Arte Creative. The visuals are a treat for the eyes, and they combine with music and ambient sounds to create a calming world of type exploration. So calming, in fact, that even when I can’t overcome an obstacle, I never seem to mind. I just keep moving my little double-orbed colon companion along. Oh, did I mention the obstacles Mr. Colon has to navigate are the letterforms themselves? Your roly-poly avatar works its way up and over spinning letters of the Gothic age, among the writing of the Renaissance, and through the steam-powered

INDESIGN MAGAZINE  76

August 2015

Figure 8: Two levels of gameplay in the Type:Rider game.

46


InFocus

Wild West. Type:Rider is a welcome diversion, not only as a game, but, ahem, also for the educational history it provides on the evolution of the written word. Yeah, that’s it, educational.

School’s Out Well, I hope you enjoyed this Back to School-themed stroll down Memory Lane. You all get a perfect A for Effort! Be sure to come back next semester, uh, issue, and see what new lessons I have in store for you.

n Erica Gamet is a speaker, writer, and trainer, focusing on Adobe InDesign and Illustrator, Apple Keynote and iBooks Author, and other production-related topics. With over 25 years experience in the graphics industry, she is a regular contributor to CreativePro.com. After living as a nomad, she recently put down roots in El Paso, Texas, where she hikes and bikes every chance she gets.

where creatives go to know INDESIGN MAGAZINE  76

August 2015

47


GREP of the Month

Reveal Codes

Normally, you can’t target text with mixed formatting in a GREP search. But with this workaround, it’s a cinch. GREP Level: Medium A limitation of GREP searches (and of normal text searches too) is that everything you’re looking for must be in the same style. Thus, it’s not possible to formulate a GREP expression along the lines of “find certain punctuation in italic that is followed by a non-italic space.” This can be a bad limitation, but fortunately there’s a way around this problem: you can reveal all or some formatting codes. Using GREP expressions, you can temporarily add HTML-like tags that spell out formatting in a way that you can use and manipulate. For example, to show all italic formatting, enter .+ in the Find What field, <i>$0</i> in the Change

INDESIGN MAGAZINE  76

August 2015

To field, and then set Italic in the Find Format panel and Regular (or Roman, or whatever the non-italic style is called) in the Change Format panel (Figure 1). The find expression matches everything in italic. The replace expression uses $0, which stands for “whatever was matched by the find expression.” Instead of the HTML-style tags <i> and </i> that we used here, you can of course use any form: %i% and %/i% would do fine too, as would @i@ and #i#—it doesn’t matter much. After running this query, your text could contain things like ;</i> (where there’s a space after the closing angle bracket). To find italic punctuation followed by a

Figure 1: A GREP Find/Change to wrap all italic characters in tags that you can use in another GREP operation.

non-italic space, we can now search for [:;,.]</i>\x20 (you’ll recall that \x20 stands for the space character). To get that punctuation out of italics, search using the GREP expression ([:;,.])</i>\x20, and use </i>$1\x20 as the replacement string. To reinstate the italic formatting, use the Find What string <i>(.+?)</i>, the Change To string $1, and set Italic in the Change Format panel (make sure that you leave the Find Format panel blank). —Peter Kahrel

48


Best of the Blog

Best of the Blog

A collection of the most important and informative articles from InDesignSecrets. If you want to add comments or ask questions, just click the title of the article, or click the Feedback button to view the original post in your web browser. Making Custom Borders With Type on a Path

There are extremely fun hidden InDesign Secret Strokes, which can be found here and look like these:

Eugene Tyson | June 4, 2015

InDesign has a pretty limited set of Stroke Options (Figure 1) compared to her sister, Adobe Illustrator, and of course you can make custom strokes (Figure 2) which are also pretty limited, dull, and boring!

But what if you wanted to make something a bit different?

Figure 1

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

Figure 2

January 2015 August 2015

49


Best of the Blog

I know some of these look similar, but I’m just using them to illustrate the technique, rather than my amazing design skills.

1. Draw a text frame.

2. Set the Stroke and Fill to None.

Usually you’d pop on over to Illustrator to make objects like these, but sometimes you don’t have access to Illustrator, or you want something that stays only in InDesign, or you just need a custom fun stroke for a one-off piece. So, how would you go about doing something like this in InDesign?

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

3. Select the Type on a Path tool (press and hold on the Type tool; more here).

50


Best of the Blog

Click the edge of the frame when the cursor turns to this icon:

colorful frame for a photo, a sweet shop (candy store), or whatever you can imagine it to be.

4. Insert a bunch of underscores (________) or some fun glyph. 5. Select your desired font (preferably a fun font like a symbol/ dingbat font, chalky font, or bamboo, grass font, etc.). 6. Once you have filled the frame edge with the font, increase the size, decrease the tracking, and justify to your liking. Additional Tips Don’t be afraid to experiment with different letters, and use Type > Type on Path Options to achieve different effects. Since your new border is made of text, you can color and style it any way you like. For example, I created this colorful display using the letter “I” from a font called Infected (available for personal use). Using Type > Type on Path Options, I selected the Gravity setting, which skews everything as if it’s being pulled to the center. Using a colorful paragraph style and nested styles, I created these thinking they would be perfect for a BBQ party frame, a

I look forward to seeing what people can come up with. And if you can improve on this technique or have additional advice, I look forward to reading all about it. Feedback Enjoy! 

Free Script Identifies Word Stacks Keith Gilbert | June 10, 2015

At the 2015 Print and Electronic Publishing Conference (PePcon) last week, the InDesign developer and

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

51


Best of the Blog

scripting community that was attending the concurrent Creative Developers Summit offered to write a “people’s choice” script based on ideas from attendees before and during the conference. I submitted the idea for a script to identify multiple lines that end in the same word, since I’ve heard frequent requests for this capability from the InDesign community. Within 24 hours of making the suggestion, Kris Coppieters of Rorohiko Workflow Resources not only produced the first working draft of the script, but had exceeded my request with additional capabilities. He has since put the finishing touches on the script, and you can download the free “SmokeWordStacks” script here. When you run the script, a dialog box appears that lets you control what type of “stacks” to search for.

it finds. The character style has a thick red underline, so it is easy to spot the word stacks.

The thick red underline makes it easy to visually spot the word stacks.

Or, better yet, do a find/change to locate each occurrence of text formatted with the character style. Tip: Search backward from the end of the document, since fixing a word stack may cause reflow.

The SmokeWordStacks script gives you control over what types of “stacks” to search for.

When you click OK, the script creates a character style named Text Stack and applies this character style to any word stacks that

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Choose Edit > Find/Change to easily locate all text with the Text Stack character style applied.

52


Best of the Blog

You will need to fix the word stacks manually, but this script sure is a huge help in locating them! The behavior of the script is extremely configurable by tweaking settings in the well-documented SmokeWordStacks.ini file that accompanies the script. Kris is a brilliant scripter and an all-around really nice guy. Consider Rorohiko for your next InDesign scripting, automation, or custom development project. The Rorohiko website is also a treasure trove of very useful commercial scripts and plug-ins for Feedback InDesign. 

To make the script change numbers to words, you first need to edit the text file that the script references. You can find this text file in InDesign’s Scripts panel in Application > Samples > Javascript > FindChangeSupport. Right-click on the file, and choose Reveal in Finder/Explorer.

Changing Numbers to Words with a Script Mike Rankin | June 15, 2015

A while back, David wrote a post on a cool script from Jongware that allows you to have page numbers written out as words instead of numbers. It got me to thinking about how you might also convert numbers in regular text to words, and it turns out that there’s a script for that too—and every InDesign user already has it. It’s the venerable Find/ChangeByList script that comes with InDesign.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Duplicate the text file, and stash the unaltered copy in a safe location to serve as a backup. Then open the original file in a text editor of your choice, and replace the default queries with new ones that change numbers to

53


Best of the Blog

words. You can target text formatted with specific fonts, paragraph/ character styles, or only on visible layers, etc.

With the help of the script, you can instantly change something like this:

Into something like this: For a complete guide to using the Find/ChangeByList script, check out Cari Jansen’s article in InDesign Magazine issue 26, and the InDesignSecrets podcast 90.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

54


Best of the Blog

If you need to replace double-digit numbers, be sure to include the option wholeWord:true, otherwise things like “12” will be changed to “onetwo”.

In other cases, you can get around some problematic replacements by telling the script to process double-digit numbers before single-digit numbers. In general, the script won’t mess up things like phone numbers, dates, serial numbers, and page ranges. But watch out for things like OpenType fractions, decimals, numbers followed by an underscore, and ordinals, which will require a separate line in the text file:

Feedback

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Read This Before Installing InDesign CC 2015! Steve Werner | June 15, 2015

Adobe released the new versions of InDesign CC and 14 other Creative Cloud applications at 9 pm Pacific Time on June 15. The new update is called InDesign CC 2015. You can read about the features in InDesign CC 2015 in InDesign CC 2015 Now Available. However, Adobe also made some changes in the installation process and requirements which may cause some pain and consternation. Here are three things you need to know to make your installation as easy and pain-free as possible: 1. Have the Current Version of the CC App Creative Cloud applications are installed and uninstalled with the Creative Cloud desktop app, and it’s critical that you have the most recent version of the CC app before updating other apps. You may have already had a “silent” update to the version of your CC desktop app. You can check by opening the desktop app, selecting the gear

55


Best of the Blog

icon to view the menu, and then selecting Preferences to view your current version. The current version as of today’s date is 2.1.1.110.

doesn’t appear correctly, restart your computer. That should prompt the update. If you have any further problems updating, go to Adobe’s Creative Cloud Download & Install forum for further help. 2. New Mac System Requirements for InDesign CC 2015 The system requirements for Windows users remain the same as for InDesign CC 2014, so if you already have that installed, you should see an update appear for InDesign CC 2015. However, to update to InDesign CC 2015 on a Macintosh computer, you must be running Mac OS X 10.9 or 10.10. If you’re still using 10.8 or earlier, you probably won’t even see updates for the 2015 versions of CC apps. Apple provides a free update to the latest version of OS X (10.10).

If you don’t have the current version, choose Quit from the Creative Cloud desktop app menu. Then relaunch the Adobe Creative Cloud app from your Applications folder. You should be prompted to update Creative Cloud. Accept the update. If for some reason this doesn’t happen, or if the Creative Cloud app window

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

3. The Installer Will Remove Previous Versions! By default, if you install CC 2015 apps, your previous versions will be removed. This is a huge change from the way it used to work. Adobe believes (although many of us disagree) that most Creative Cloud users only want the current version of their Creative Cloud apps. So beginning with this release, it has changed the default so previous versions will be uninstalled by default, and settings will be migrated to the new version. If you’re happy with that, then in the Update dialog box, just click Update.

56


Best of the Blog

If you want to change that, here’s how: after you click Update, click Advanced Options. Then in the Advanced Options, deselect Remove Old Versions, and then click Update.

Of course, if you didn’t see the Advanced Options (or if you read this after you’ve had your previous versions removed), you can still reinstall the previous versions which are removed. To reinstall previous versions, in the App menu of the Creative Cloud app, scroll down to Find Additional Apps. Click All Apps, and then choose View Previous Versions. You will see the apps which

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

were removed (as well as other apps you haven’t installed before), and you can select them and choose Install.

Many of us are unhappy with the way Adobe has foisted this decision (to uninstall previous versions) on us with very little notice. It should be made far more obvious that a major change will happen if you click Update. It seems obvious that many people will have installation problems, and Adobe will be responsible for that. Please pass this information on to your friends and colleagues!  Feedback

57


Best of the Blog

Where Did DPS Go in CC 2015? Mike Rankin | June 16, 2015

With every new version of InDesign, features large and small are added. But occasionally features are removed as well. Anyone seen the Position Tool or the Navigator panel recently? I didn’t think so. Another case in point: InDesign CC 2015 does not (yet?) support DPS—that’s the old DPS, aka the Digital Publishing Suite. Don’t believe me? Check the File menu. No more Folio Preview and Folio Preview Settings. Then take a look in the Window menu. Gone are the Folio Builder and Folio Overlays panels. Well, technically, there is still a panel called Overlays, but it is a tad underwhelming at this point in time.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Personally, I would have gone with something with a little more pizzazz. Like…

Now Adobe has moved on to a new DPS: the Digital Publishing Solution. This is bound to be confusing for some folks, but apparently all other three-letter acronyms were taken.

58


Best of the Blog

All kidding aside, what we’ve seen so far of the new DPS is very exciting. I (along with all the other attendees at PePcon this year) got a sneak peek, and immediately starting drooling at the possibilities of the new DPS. In a brief live demo, it came across as forward-thinking, easy to use, and gorgeous. I encourage you to read all about it and sign up for the public beta to get your hands on it. Plug-ins Need Upgrading In the meantime, if you need access to the old DPS tools, don’t ditch that copy of CC 2014 just yet. If you haven’t already run the update, read Steve Werner’s article on how to avoid having CC 2014 automatically removed during the CC 2015 installation process. Notice that earlier I said “InDesign CC 2015 does not (yet?) support DPS.” That “yet?” means that we currently don’t know if or when the “traditional DPS” plug-ins will be updated for CC 2015. This is not that different than other, third-party commercial plug-ins: Whenever there is a new version of InDesign, virtually all plug-ins need to be updated. Scripts are a different matter; scripts sometimes break but often keep working from version to version. It’s easy to think of the DPS tools as part of InDesign, but they’re more like third-party plug-ins, where the “third party” is the DPS team at Adobe. Just like the Acrobat team and the InDesign team

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

are in different “silos” at Adobe, DPS and InDesign are very separate parts of the whole. So, once again: Before you jump into CC 2015 (or any new version), first make sure your plug-ins will keep working… and if Feedback you use DPS, then this is even more important! 

What Do the Default Sample Scripts Do in InDesign? David Blatner | June 24, 2015

You probably know that InDesign ships with a bunch of cool scripts that automate a number of “features” you may want to use. You can find them by opening the Scripts panel (Window > Utilities > Scripts) and then opening the panel’s Application folder, then the Samples folder, and then the JavaScript folder.

59


Best of the Blog

These scripts are labeled “Samples” because they were originally written as inspiration or education for people who want to learn how to write their own scripts. But even if you don’t intend to write scripts of your own, you will almost certainly find something useful in these sample scripts. But what do they do?! Some have names that are selfexplanatory, but some are quite mysterious. Here’s a quick rundown of each one: AddGuides. Draws guides around the currently selected object or objects. See this article. AddPoints. Adds points to a path: each point is added at the midpoint of each line segment in a path. (For scripters: This script demonstrates simple Bezier math and path and point manipulations.) AddQRCode. This script will create a QR barcode for you, but you would probably never use the script. Instead, it’s easier and faster to choose Object > Generate QR Code. AdjustLayout. Moves the page items of even/odd pages by specified distances. Use this script to move objects back into the correct position after adding pages or applying master pages. See this article. AlignToPage. How many times have you wanted to position an object in the center of the page? This script does that, and many

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

other page alignments—including the ability to align the objects relative to the page margins. (This script is no longer necessary, since InDesign has its own “align to page/spread” feature.) AnimationEncylopedia. Want to see what all the different features in the Animation panel do? Just run this script. See this article. BreakFrame. Removes the selected text frame and its contents from the story. For example, if your story spans three frames (let’s call them A, B, and C), you can select frame B, run this script, and that part of the story will no longer be part of the thread. Doesn’t really work well when tables span multiple text frames. CornerEffects. Here’s another one that is no longer really relevant. Ever want to round one or two corners of a rectangle, while leaving the other corners square? If you have, then this script is for you. The script redraws the path and applies a corner effect to a pattern of corners you specify. Where the built-in InDesign feature (Object > Corner Options) makes corners that are easily changeable, the script actually adds Bezier points and curves that make it hard to edit. CreateCharacterStyle. When you create a character style in InDesign by basing the style on the selected text, InDesign records only those attributes that differ from the default formatting of the surrounding text. While this is a powerful and flexible way

60


Best of the Blog

of working with character styles, it’s also different from the way that other applications (such as QuarkXPress and FrameMaker) work. In those applications, character styles apply every formatting attribute. The CreateCharacterStyle script creates a new character style based on the selected text and defines every formatting attribute. CropMarks. Draws crop and registration marks around the selected object or objects. You have options such as how far from the edge of the object(s) you want the marks to be positioned. ExportAllStories. Exports all of the stories in a document to a specified folder using the file format of your choice (RTF, tagged text, or text only). See this article. FindChangeByList. Runs a sequence of find/change operations on the selected text. The find/change parameters are stored in a tab-delimited text file (it should be in a folder named FindChangeSupport inside the same folder as the sample script). By default, these searches cover the standard stuff: changing double spaces to single spaces, changing double returns to single returns, changing double dashes to em dashes, and so on—but you can add your own favorite searches to the text file (including the ability to find/change formatting). You’ll find instructions at

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

the beginning of the script, and in the corresponding find/change file. See these articles. ImageCatalog. Places all of the graphics in a folder in a grid in an InDesign document. See this article. Indic Preferences. This script is actually not in the Samples folder; it’s loose at the top level of the Scripts panel. Indic refers to languages from the Indian subcontinent. If you’re typesetting in Hindi or Bengali or something like that, you’d use this to turn on an internal setting that helps with those languages. If you don’t, then ignore it. In fact, you should specifically not run it because there is no user interface and there is no way (other than rebuilding your preferences) to reverse it. See more in the links on this podcast page. MakeGrid. Splits the selected frame into a grid of frames. If the frame contains content, the script can duplicate the frame. See this article, and this one. Neon. Creates a simple “glow” effect by duplicating the selected path or paths. Each copy of the path is slightly smaller than the original, and slightly lighter. The final duplicate path is a white hairline. The resulting group of paths is something like an Illustrator blend.

61


Best of the Blog

PathEffects. This script includes the ever-popular Illustrator path

effects “Bloat” and “Punk,” as well as a few others. It’s crazy stuff, but can come in handy! PlaceMultipagePDF. InDesign can place all of the pages in a multi-page PDF, but it’s a manual process—you have to click the place icon for each PDF page you want to place. This script places all of the pages of a PDF on sequential pages, placing one PDF page per page, adding pages to the document if necessary as it does so. See this article for an even better solution. SelectObjects. Selects all of the objects on a spread that belong to a specific object type (or set of types). This script is only slightly useful by itself, but it shows you how to traverse the objects on a spread to find objects based on their type or content. As such, it’s a great starting point for any graphic “search and replace” operation you might want to implement. SortParagraphs. Alphabetically sorts the paragraphs in the selection. Shows how to sort text using a simple “bubble sort” algorithm, and how to move text in an InDesign story. See this article. SplitStory. Converts each text frame in the selected story to an independent text frame (story), retaining the content in the frames.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Doesn’t really work when tables span multiple text frames. See this article. TabUtilities. This script automates several tab and indent tasks: First, you can set a right tab stop at the right margin of a paragraph. In general, I would rather use a Right Indent Tab character instead of a right-column edge tab stop. The other options are more helpful, though: You can set a left tab at the current cursor position, or adjust the left indent (or left and first-line indents) based on the current cursor position. See this article. These scripts can help you save a huge amount of time on a project. It’s worth knowing they exist so you can grab them when you need one. Oh, I almost forgot to say how to run them… it’s easy: just double-click the script in the Scripts panel! [Parts of this article were excerpted from Real World InDesign CS4, Feedback by Olav Martin Kvern and David Blatner.] 

Mystery of the Changing Font Contest Mike Rankin | June 25, 2015

Hey folks, it’s time for another InDesign mystery that you can solve for a chance to win an awesome prize! Ready? Here’s the scenario: You’re working at a colleague’s computer, creating a tourist guidebook to the fair city of Oslo,

62


Best of the Blog

Norway. You’re given some handwritten copy to type into a text frame on top of an image.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

As you type, you notice that some characters look strange. They don’t match the surrounding text.

63


Best of the Blog

Sure enough, when you select those characters, you see that they’re formatted with a different font.

As you type the rest of the text, the font automatically changes back to the correct one.

You check the paragraph style and see nothing in it that would change the font automatically. There are no nested styles, no GREP styles, etc. In fact, there are no character styles at all in the document. Yet every time you type a character like the “o” with a stroke shown above, it changes to Minion Pro.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

64


Best of the Blog

What InDesign feature is making this happen? In fact, it was happening because of a preference: Missing Glyph Protection. You can find Missing Glyph Protection in InDesign’s Advanced Type preferences. It’s also found in Type preferences in Illustrator and Photoshop.

With it enabled, if you type a character that doesn’t exist in the current font, InDesign will automatically switch to the default font Minion Pro.

If you apply a font that doesn’t contain the character, the font applied to that character will not change.

The benefit is that you’ll never have the dreaded pink empty space where the character should be.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

65


Best of the Blog

The downside is that you might not want (or notice) mixed formatting. However, by default, Missing Glyph Protection is turned off, and if you enable it, you will get a warning when it is used.

So you’d probably have to set it and forget it (or work at an unfamiliar machine) for it to happen without your knowing it. In any case, now you know why the font was changing without any apparent cause. And the winner the contest is… David Popham David wins a Personal Activation Code for FrameReporter from Rorohiko! Thanks to everyone who entered, and be on the lookout for Feedback another contest with a new great prize next month! 

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Switching Rows and Columns in an InDesign Table David Blatner | July 1, 2015

Sometimes you have a table in InDesign that looks like this: A

B

C

D

E

F

G

H

I

But you want it to look like this: A

D

G

B

E

H

C

F

I

That is, you want to transpose (switch) the columns and rows so that the content “flows” down the first column, then down the second column, and so on. There is no obvious way to do this in InDesign, but you can do it either with the help of Excel, a free script, or an excellent plug-in.

66


Best of the Blog

The Excel Route As long as the table is relatively simple, the easiest and fastest route is to do the following: 1. Select all the cells (click in one cell and then press Command+Option+A or Ctrl+Alt+A). 2. Copy them to the clipboard (Command/Ctrl+C). 3. Switch to Microsoft Excel and open a new document. 4. Choose Edit > Paste. 5. Select the cells again, and copy them to the clipboard. (Yes, you need to do this again, in order to take advantage of the next feature.) 6. Choose Edit > Paste Special. 7. In the Paste Special dialog box, turn on the Transpose checkbox.

When you click OK, the table will be reversed! Now you can copy the cells one last time, return to InDesign, and paste (assuming the table cells are still selected there). (If, when you paste, it doesn’t look right—for example, if the whole table ends up in the first cell of the InDesign table—then it’s possible that you need to open InDesign’s Preferences dialog box, choose the Clipboard Handling pane, and set the “When Pasting Text and Tables from Other Applications” to “Text.”) Here’s an example… before and after:

The Script In trying to find a solution for this problem, I discovered an old script from 2006, written by Iain Anderson. Amazingly, it seems to

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

67


Best of the Blog

work just as well today, in InDesign CC, as it did back then. Here’s our InDesign FAQ, which includes links on how to install scripts. Note that when you run this script, you need to select the text frame (not the table), and it will only affect the first table in the story.

For example, here’s an image that partially obscures some text.

The Plug-in The ActiveTables plug-in, which we mentioned back in this article and which you can also find on the DTP Tools site, has a wide array of cool table features. If you’re using InDesign CC, you can get Active Tables as part of the DTP Cloud option (all the DTP Tools plug-ins for one low price per month or per year). Of course, if your table is complicated (with merged cells and so on), all bets are off with any of these techniques. But for a simple table that needs flipping, these techniques should do the trick!  Feedback

How to Find Obscured Text in InDesign

Normally, you’d have to look at the text in the Story Editor or move/hide the image to see the obscured text.

Mike Rankin | July 2, 2015

Someone recently asked if there was a way in InDesign to find text that was obscured by an image. While there isn’t a way to directly find obscured text with InDesign’s preflight features, you might be able to use some other features to help.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

68


Best of the Blog

But if you apply a blending mode like Difference to the image frame, the text can be seen.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

So to help find obscured text throughout a document, you can temporarily apply an object style that includes the Difference blend mode to all image frames. If you’re already using custom object styles, good for you! All you have to do is edit your object style to apply the Difference mode and then page through your document looking for text that is visible through an image.

69


Best of the Blog

If you’re not using object styles, then edit the default [Basic Graphics Frame] style to include the Difference mode.

If you have image frames formatted with [None] (which can’t be edited), then you’ll have to use Find/Change to replace [None] with another object style.

After you’ve finished detecting and correcting the problem, you can edit the applied object style(s) to change the Difference blend mode to Normal, and return the document to its original appearance.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

70


Best of the Blog

You might also consider using the Preflight panel to speed things up. By creating a custom preflight profile that flags any use of transparency as an error, you can double-click on each item to quickly jump to image frames in the document with the Difference blend mode applied, and see if they are obscuring text.

icons that used to tell you at a glance what kind of fonts you had in your document (OpenType, Type 1, TrueType, etc.).

InDesign CS6 Find Font dialog box

Similarly, you could use the Links panel to jump to images by Feedback clicking on their page numbers. 

More Font Info for InDesign CC Users Mike Rankin | July 6, 2015

Have you noticed that in recent versions of InDesign, the Find Font dialog box isn’t as informative as it used to be? Gone are the little

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

InDesign CC 2015 Find Font dialog box

71


Best of the Blog

Do you miss this feature? I sure do (though you can still see a font’s type by clicking More Info and clicking on the font). Fortunately for us, Peter Kahrel missed the old dialog box too, because he went and did something about it. He wrote a script called Show Fonts that not only gives you the types of all the fonts in your document in one view, it also shows their status (Fauxed, Installed, Not available, Substituted, or Unknown), and offers the ability to save that font info into a text file.

How cool is that? The script is free to download, but if you enjoy using it, consider making a donation to encourage Peter to keep Feedback cranking out goodies like this for us. 

InDesign Documents on Behance Sandee Cohen | July 8, 2015

If you’re like me, you probably have looked at the portfolios on Behance and wondered how you, as an InDesign user, could get involved. Most of the portfolios are photos, illustrations, etc. from Photoshop and Illustrator.

Peter Kahrel’s Find Fonts script dialog box

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

72


Best of the Blog

But what about multi-page design? Book designs. Branding. Multi-page ads. Interior book pages. Posters. Brochures. Flyers. Menus. Etc. Etc. The possibilities are endless. There is the File > Share on Behance command in InDesign. But that command only uploads the first page or spread of a document. That’s really not enough to display the brilliance of your InDesign documents.

Even better, it also allows you to include interactivity with multimedia, animations, and buttons. But how do you get this into Behance? All you need is an embed code to add a Publish Online link to Behance. Here’s one that I got from the InDesign Product Manager for one of my Publish Online documents: <iframe src="https://indd.adobe.com/view/6fd86743bffc-42aa-afbc-1ba9f0d46191" style="height: 800px; width: 100%;" allowfullscreen></iframe>

Interactivity and Animations? And the Share on Behance feature doesn’t do anything to show interactivity, multimedia, and animations in InDesign files. For many designers this is the new age where they can really shine. There didn’t seem to be any way to get a full representation of our work up there. Until now! From Publish Online to Behance The new Publish Online (preview) technology in InDesign CC 2015 provides designers a great way to fill their portfolio with examples of your work.

Now I don’t know much about codes, etc., but I was able to use the same embed code to post a different Publish Online link (marked in red above). I’m assuming you could use something similar for your files. Cool! If you want to see my projects in Behance, just go to: https://www.behance.net/sandeecohen. I expect to have more Feedback posted in the next few weeks. 

How to Save InDesign Files as Layered Photoshop Files Mike Rankin | July 9, 2015

Recently, someone asked the question of whether it was possible to export from InDesign to a layered Photoshop file, converting InDesign layers to Photoshop layers. While you won’t find PSD as

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

73


Best of the Blog

one of the file formats in the Export dialog box, you can accomplish this task on the Mac with the help of a script written by Rob Day and available to download for free from zenodesign.com. The script works by exporting each layer as a separate PDF, and then placing those PDFs into Photoshop (CS5 or later). You have the option to place layers as Smart Objects or rasterized layers. So this:

Becomes this:

The layer names in Photoshop match the layer names in your InDesign document. Hidden layers, locked layers, and empty layers are all exported.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

74


Best of the Blog

When you run the script, you get a dialog box where you can choose one of your PDF Presets, the Color Mode, page, resolution, and whether each layer is rasterized or saved as a Smart Object.

Save and close, and the change will be reflected in Photoshop.

If you select Smart Objects, you can edit the content of a layer by double-clicking the thumbnail in the Layers panel in Photoshop. Here’s one being edited in Illustrator.

Note: For lots more information about working with Smart Objects, check out Bart Van de Wiele’s Get Smart videos at CreativePro.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

75


Best of the Blog

If your InDesign document contains a lot of text, don’t expect it will be easy (or even possible) to edit it in the exported file. Some text will be converted to outlines.

Also, transparency effects are rasterized, and blending modes applied to InDesign content will not be honored (check out the red rectangle in the images above). Remember, PDFs are intended to be output files, not working files. Even so, it’s pretty awesome to Feedback get InDesign content into Photoshop like this. 

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Understand the Current Limitations of CC Libraries Steve Werner | July 13, 2015

In the February 2015 release of InDesign CC 2014, a new kind of library panel was added called CC Libraries. I wrote about its initial features in this blog post. In brief, this new library not only lets you share assets between InDesign documents, but also between other Adobe applications like Photoshop CC and Illustrator CC. It is supported in Adobe mobile apps as well. In June 2015, enhancements to CC libraries were added in InDesign CC 2015. These included the ability to store color swatches, character and paragraph styles, in addition to InDesign objects. A new ability to place a linked graphic from a CC library was also added, and CC libraries are used to support the new Adobe Stock feature to purchase photos and graphics. A short description of these enhancements is found in another blog post; a more thorough description is found in an article Keith Gilbert wrote in the July 2015 issue of InDesign Magazine. You can also read about it in the online Adobe Help files. I encourage you to explore this new feature, and both Keith and I are starting to use it in our workflows. However, CC libraries are a work in progress. It’s highly likely that Adobe will update the CC library features to eliminate a lot of the current limitations in future updates to InDesign and the other Creative Cloud applications.

76


Best of the Blog

To help reduce your frustration level as you try this new feature, I thought it would be helpful to explain some of the current limitations of CC Libraries: 1. You might expect that CC Libraries would start with the same features as InDesign’s existing Library feature (File > New > Library), but there are some things missing: You can’t sort the order of items in the CC Libraries panel. You can’t search or filter a library, which can make it difficult to find assets in a large library. You can’t add metadata to describe the assets like you can with an InDesign library. Workaround: Keep your libraries smaller and give your assets carefully picked, meaningful names. 2. Similarly, there is no way yet to group paragraph or character styles or color swatches. Again, careful naming is essential. 3. Assets can only be added to a CC library one at a time. There is no way to multiple-select a number of styles or swatches at the same time. 4. If you share a library with someone else, Illustrator or Photoshop assets can be edited in those programs. If your collaborator changes the asset, it will appear as out of date in your InDesign file. If you update the CC library links, the modified asset will appear. However, InDesign assets are stored in a CC library as an embedded copy. There is no way to create a link to an InDesign asset that will update on the page when that asset changes.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

5. If you copy your paragraph or character styles or color swatches to a CC library, and you subsequently change the style or swatch definitions, they aren’t updated in your CC library. You need to delete the original asset in the library, and add the style or swatch again, using the same name. Workaround: If you’re using the same assets in another file, use the Redefine Style feature to update the definition. 6. InDesign assets are stored as both snippet files and PDF files. InDesign uses the snippet, and Illustrator and Photoshop uses the PDF version. There are limitations to how Illustrator and Photoshop can understand InDesign assets: If you create a spot color swatch and copy it to your CC library, InDesign will retain that color space if you place it in another file. However, Illustrator or Photoshop will not, and it will be converted to CMYK. Furthermore, Illustrator and Photoshop don’t yet support paragraph styles. And what were called text styles in the first incarnation of the feature are now called character styles.  But Illustrator and Photoshop have more primitive text engines and may not understand all the character style formatting (I haven’t had the time to figure out exactly what may not be supported). There are probably other limitations as well worth mentioning. Feedback Feel free to add more in the comments to this posting. 

77


Best of the Blog

How to Copy Transparency Effects Between Groups Mike Rankin | July 15, 2015

If you’re a regular reader of InDesignSecrets, you probably know I enjoy creating special graphic effects with InDesign—to the point that I’ve done over 100 InDesign FX videos for lynda.com. But one thing I really don’t like about the Effects panel is that you cannot easily copy effects from one group of objects to another. With individual objects, you can drag and drop the FX icon from the panel to duplicate effects. But this doesn’t work with groups. If you try it, the effects will be applied just to the object you drop the FX icon onto. You also can’t use an object style, because the effects will be applied to both the group and the individual objects in it. Notice how the drop shadows in the screenshot below are darker in some places because they are doubled, and how they overlap some of the objects, which is not what happens when you apply an effect at the Group level.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

78


Best of the Blog

But there is a workaround you can use if you really want that drag-and-drop feature to work with groups. Cut the group that you want to apply the effects to, draw a new empty frame with no stroke and no fill, and then choose Edit Paste Into (or press Command+Option+V on the Mac or Ctrl+Alt+V on Windows).

Be sure to drop the FX icon onto an empty area of the frame, not on top of one of the internal objects, or the trick won’t work.

Now you can select the original group and drag and drop the FX icon onto the frame you pasted the second group into. InDesign only “sees” one object (the frame containing the group), so the effects are applied the same way as if the drag-and-drop feature worked with groups.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

79


Best of the Blog

Even better, now you can use an object style! Just apply it to the outer frame.

Resize Your Documents to Fit One or More Objects on the Page David Blatner | July 16, 2015

I often make graphics (such as logos or ads) in InDesign, but they’re in the middle of the page. So when it comes to exporting the graphic as a PDF or INDD or whatever, I get too much white space around the edges. For example, I want to export the artwork on this page:

Doesn’t that feel better? OK, everyone, group hug! 

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

Feedback

Before I export this page, I need to resize it to the size of the artwork. I could use File > Document Setup, but that’s a hassle because I don’t know how big it should be, and because after I resize the page, the artwork will probably not be in the middle of the page anymore.

80


Best of the Blog

So I use a different technique instead: the Page Tool. When you choose the Page tool in the Tools panel and click on a page in your document, it gets highlighted with side and corner handles (as in the image above). You can drag those handles and it looks like the page is being resized… but it’s just teasing you, because when you let go of the mouse button, the page snaps back to the way it was! The Trick Fortunately, there’s a trick: If you hold down the Option/Alt key when you drag a handle with the Page tool, then you really do change the page size. Try it! It’s cool. So when I Option/Alt-drag the upper-left corner of the page down to the upper-left corner of the object (in this case, a text frame), it snaps against the object edge:

However, in the image above, you can see that I can’t quite get the lower-right corner up to the lower-right corner of the object.

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

That’s because of the page margins. InDesign doesn’t let you make a page so small that the margins would overlap. You’d think you could simply choose Layout > Margins and Columns to change the margins, but unfortunately that only changes them for the current page or spread. Instead, you first need to click the master page in the Pages panel. Then, with that selected, you can choose Margins and Columns. Set the Margins to zero, click OK, and then you’ll be able to reduce the page as small as you want:

Getting Just the Right Size As I said earlier, the Page tool snaps the edge of the page to the edge of the object. In the example above, I have just one text frame, so it works great. But sometimes I find it helpful to draw out a blank frame (with no fill or stroke) around the artwork, and then use the Page tool to snap to it. For example, if you know you want your final artwork to be exactly 10 cm × 20 cm, you could make a frame that size, position it around the artwork, and then use the Page tool to snap to the edges of that frame. (Then you could delete that frame if you want.)

81


Best of the Blog

Alternatively, you can just get the page size close with the Page tool, and then adjust it to the exact size you need by changing the W and H values in the Control panel:

Finally, when the page size is just right, you can use File > Export to get your JPEG, PNG, PDF, EPS, or whatever file format you need. [By the way, don’t send me hate mail for the text in the graphics above! It’s just a reference to an old Steve Martin joke. But I have cats Feedback myself and I do not condone juggling them.] 

INDESIGN MAGAZINE  69 INDESIGN MAGAZINE  76

January 2015 August 2015

82


The InDex: InDex Your Key to Our Content Can’t find that article you saw in an earlier issue? Wondering whether we covered that obscure plug-in? Never fear, the InDex is here. The first issue of InDesign Magazine was published in July 2004. Since then, we’ve cranked out thousands of pages on hundreds of related topics. While it’s possible to use Acrobat to simultaneously search all past issues of the magazine for one word or phrase, many readers have clamored for a formal index at the back of each issue. However, with 76 issues to account for, that’s not feasible. Instead, the InDex will live as a PDF you can download for free. If you come across a topic you want to know more about, but it’s in an issue you don’t have, you’re not out of luck. We sell back issues at indesignsecrets.com.

INDESIGN MAGAZINE  76

August 2015

If the topic you’re looking for isn’t in the InDex, you have one more way to search: that PDF trick we mentioned. To make it work, all of your magazine issue PDFs must be in one folder. Open any issue in Acrobat, and then press Shift+Command+F (Shift+Ctrl+F on Windows). In the Search window that appears, be sure that you click the radio button that says “All PDF Documents in,” and in the dropdown menu below that, choose the folder in which you placed your magazine issues. You’re on your way to finding anything in any PDF!

Click here to download the InDex.

83


While this PDF is just for you, you can tell your friends about this great discount: $10 off a 1-year membership (use coupon code friend) Send them to: indesignsecrets.com/issues Coming Soon! MAGAZINE September 2015

77

All-New Tips!

INDESIGN MAGAZINEâ&#x20AC;&#x201A; 76

August 2015

84

Idm issue 76  
Read more
Read more
Similar to
Popular now
Just for you