special reprint! - Adobe Blogs

1 downloads 234 Views 2MB Size Report
Sep 1, 2015 - Page layout in Adobe Comp CC on the Apple iPad. ... Adobe InDesign, Adobe Photoshop, or Adobe Illustrator
September 2015

L IA T! EC IN SP PR RE

M A G A Z I N E 77

● Awesome Add-Ons ● Publish Online ● Adobe Comp

Fresh Tips

Become a Member of InDesignSecrets! Premium members receive InDesign Magazine, plus many other great benefits! Visit indesignsecrets.com/membership for all the great reasons to join. Use the discount code TRYSUB to get $10 off!

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

2

By Conrad Chavez

InStep: Adobe Comp CC

Quickly sketch layout mockups on an iPad for production in Adobe InDesign.

A tabloid-sized layout device I sketched decades ago in high school. The slot on top is for floppy disks.

Back in high school I was on the yearbook staff—an early publishing experience that’s apparently common among many InDesign users. It was the B.C. era (Before Computers), so we drew placeholder boxes on printed layout grids. We filled in those placeholders by using hot wax to paste down printed galleys of typeset text and photo prints from the darkroom—a lot of tedious manual work. Because I was into science fiction and video games at the time, I imagined how future yearbooks might be laid out more easily with some kind of computer. I sketched an idea for a flat tabletop device large enough to lay out a double-page yearbook spread at actual size,

and proposed that objects might be moved around its screen with a joystick. When the digital future of page layout arrived just a few years later, it was a lot better than I imagined. The mouse turned out to be a more powerful and agile layout tool than the joystick, and page layout software such as Aldus PageMaker and Adobe InDesign swept away all the knives, paper type galleys, and waxers. I didn’t anticipate that digital page layout could become completely portable, first with laptop computers and now with mobile tablets. With Adobe Comp CC on the Apple iPad, we can design layouts with nothing more than fingers on a touchscreen.

Page layout in Adobe Comp CC on the Apple iPad.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

3

InStep: Adobe Comp CC

Hands-On Design Adobe Comp CC brings back the fluidity of designing in a paper sketchbook, but with the advantages of digital assistance and connectivity. This free app lets you use touch gestures to work out page layout ideas on the iPad, and you can fill in the placeholders with real content. What advances Comp beyond being a mere toy is that you can send layouts to Adobe InDesign, Adobe Photoshop, or Adobe Illustrator as fully editable documents that you can take through production and final output. Let’s take a look at how Adobe Comp CC might help work out ideas for the opening page of a feature story while meeting with a magazine’s art director.

1. Set up Adobe Comp CC

A magazine graphic I added to the Libraries panel in Adobe Illustrator will be available to Adobe Comp when I design a new magazine layout.

Reprinted by permission from InDesign Magazine 77 

Setup is simple. Install Adobe Comp CC from the iOS App Store, and then sign in to your Adobe Creative Could account from inside the app. Comp is connected to Creative Cloud libraries, so you can be more prepared for the meeting by using Adobe InDesign, Adobe Photoshop, and Adobe Illustrator to add that client’s graphics, colors, and character styles to a Creative Cloud library in advance. After I sign in with my Adobe ID, Adobe Comp CC is ready to use and gains access to Creative Cloud online resources including CC Libraries, Typekit fonts, and assets from Creative Cloud Market.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

4

InStep: Adobe Comp CC

2. Make a new layout

I tap the plus sign to create a new layout.

Reprinted by permission from InDesign Magazine 77 

When you open Adobe Comp CC, you see a sliding gallery of sample layouts. To make a new blank layout, tap the plus sign at the left edge of the screen to see the mobile, print, and web formats you can use, and then tap the format you want. This example involves a vertical magazine page that doesn’t match any of the preset formats, but I can tap a New Format icon and enter the page dimensions in points, the only unit of measure you can use. Each layout can be only one page. This is partly because Comp is intended for working out layout ideas and not for production of a complete publication.

The page size of the magazine doesn’t match any of the presets, so I tap the New Format icon (the last one) and enter custom dimensions.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

5

InStep: Adobe Comp CC

3. Sketch a graphics placeholder

Reprinted by permission from InDesign Magazine 77 

You can sketch on the layout when the little tab on the left edge of the screen is blue with an X in it. If the tab is gray with an open rectangle, tap the tab to switch to drawing mode. Now you can draw specific gestures to create different types of objects. Sketch an X where a photo should be, and Comp converts it into a perfect rectangle placeholder.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

6

InStep: Adobe Comp CC

If you’re new to Comp, you won’t know which gestures you can draw, so tap the help icon at the top to display the Drawing Gestures screen. If a gesture involves more than one line, such as the X that creates an image placeholder rectangle, draw each line in quick succession and Comp will know that they’re part of the same shape. If you wait too long after drawing the first line, Comp will think you’re done, and will try to interpret the first line by itself. Comp ignores gestures it doesn’t recognize. If you’d rather sketch with a stylus instead of with your fingers, no problem. Comp doesn’t currently take advantage of a pressure-sensitive iPad stylus, so you don’t need a fancy one; any iPad-compatible stylus will do.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

7

InStep: Adobe Comp CC

4. Move and resize objects

Sketching is imprecise by nature, so when Comp converts your sketch into an object you’ll probably need to adjust it. You can do this in layout mode, where the tab on the left edge of the screen is gray. If the tab is blue, tap it to get into layout mode. Tap any object to display its handles. Drag the object to reposition it; you’ll see smart guides temporarily appear to help you align it with other objects on the layout. If you move an object so that it’s almost centered over another, the smart guides appear and help you snap the object to the other object’s center. You can rotate objects with two fingers. Drag an object’s handles to resize it. As you resize, dotted guides appear to help you constrain the shape to its existing proportions or to 1:1 proportions (for example, a perfect square or circle). Drag near a dotted guide to snap your drag along the guide.

As I drag the bottom left handle of the graphics placeholder, Comp displays smart guides indicating vertical alignment with the layout edges and center. If I continue to drag the handle along the diagonal dotted line, the shape’s original proportions will be maintained. A tool tip indicates the dimensions of the placeholder.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

8

InStep: Adobe Comp CC

5. Sketch and edit text placeholders

In drawing mode, I sketch the Comp gesture that creates body text.

Reprinted by permission from InDesign Magazine 77 

Sketch a rectangle containing horizontal lines to create body text—again, much like you would on paper. Comp also provides gestures for creating headlines and multiline text. Double-tap a text placeholder to edit the text. All placeholder text is replaced as soon as you start typing. If you delete all of your own text from the object, the placeholder text returns.

Comp converts the sketch into body text paragraphs.

Switching back to layout mode, I adjust and duplicate the body text, sketch to add a headline and another text placeholder, and enter text into the headline to replace the placeholder text.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

9

InStep: Adobe Comp CC

6. Change type

specifications

Tapping the T icon reveals the type spec options.

Reprinted by permission from InDesign Magazine 77 

When a text object is selected, you can edit type specs by tapping the T icon at the bottom of the workspace. You can add fonts from Adobe Typekit, synced to your iPad by Creative Cloud. If you created character styles from InDesign and added them to a Creative Cloud library, you can also apply those here.

In addition to the already-available fonts, you can add fonts from Typekit.

If I just want to adjust the size of the text, I can drag a vertical slider that appears to the right of a selected text placeholder.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

10

InStep: Adobe Comp CC

7. Edit a graphics

placeholder and add more graphics

By tapping the first icon on the bottom, I can insert an image into the selected placeholder.

Reprinted by permission from InDesign Magazine 77 

You can drop an image into a graphics placeholder by tapping the Graphics icon at the bottom (the first one) to choose a source and an image to import. While you can add more shapes by switching over to drawing mode and sketching them, in layout mode you can also tap the Shapes icon at the top of the workspace. You can change the appearance of a selected shape the same way you can edit type specs: tap one of the icons along the bottom of the workspace.

I use the Shapes menu to quickly add a rectangle instead of sketching it.

To change the fill color and opacity of the selected rectangle, I tap the first two icons at the bottom.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

11

InStep: Adobe Comp CC

8. Erase, undo, review

In sketch mode, draw a squiggle over one or more objects, and Comp erases them in real time—an effect that’s kind of fun to watch. If you’re in layout mode, you can just select an object and tap the delete icon (trash can) at the bottom. If you delete something by accident, swipe two fingers left to undo your last edit. To redo, swipe two fingers to the right. Need to undo or redo more than one step? Swipe three fingers horizontally to scrub through the undo history. The three-finger history scrub is also a great way to review the progression of thought that led to the current design.

The red triangle isn’t working out, so in sketch mode I delete it by drawing a squiggle over it.

As I drag across the screen with three fingers, I scrub backward and forward through the undo history, which is indicated by the scroll bar across the top.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

12

InStep: Adobe Comp CC

9. Add a graphic from a

Creative Cloud library

We need to see how the layout looks with one more graphic that the magazine uses, so I tap the Graphics icon and then tap My Libraries.

Reprinted by permission from InDesign Magazine 77 

When you tap the graphics icon at the top of the workspace in layout mode, one of the sources you can choose is My Libraries, which leads to your Creative Cloud libraries. If you don’t have any assets on your iPad or in Creative Cloud but you still want to fill out the layout with more specific visuals, you can add graphics from the Creative Cloud Market of member-submitted content, or take a picture with the iPad camera.

I add Illustrator artwork from a Creative Cloud library named Magazine.

It’s a simple matter to resize the graphic and reposition it in the top right corner of the layout. It’s a little easier after using a two-finger pinch to zoom in.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

13

InStep: Adobe Comp CC

10. Create a different take on the same idea

11. Send to InDesign

If the art director wants to see something a little different, you can try again using an existing layout as a starting point for another idea. Tap Close to back out to the main screen, and then tap the Duplicate icon in the layout you want to copy. The Send feature is what sets apart Adobe Comp from other mobile sketching apps. Just tap the Share button, and then tap Send to InDesign CC. If you’re sitting in front of your computer, after a few moments you’ll see InDesign open, and then the Comp document will open in InDesign. While this is obviously a simple operation, it still looks like magic when you see the document open itself in InDesign straight from your iPad.

To create a variation on the design, I tap the Duplicate icon to copy the layout.

Reprinted by permission from InDesign Magazine 77 

This is the design we settle on, so it’s time to take this layout to production. With the layout open, I tap the Send icon at the top, and then tap Send to InDesign CC.

To purchase this issue or subscribe, visit indesignsecrets.com/issues

14

InStep: Adobe Comp CC

Send to InDesign is such a great time-saver because you don’t have to manually and tediously transcribe paper sketches into a production-ready document in Adobe InDesign, Adobe Photoshop, or Adobe Illustrator. Instead, your Comp sketch is already part of a fully digital workflow that continues on through production to final output.

12. Finish the document in InDesign

When you send a Comp document to InDesign, it opens as an untitled document, and all images are embedded. Choose File > Save As to name and save the document to a folder. If you want to replace the embedded images with linked files, open the Links panel menu (Window > Links), and use the Unembed Link or Relink commands. Or just drag and drop local versions of the files into the graphics frames.

The Comp document arrives in InDesign. All text and graphics elements are fully editable, separate objects contained within one InDesign layer.

The Links panel reports that all imported graphics are embedded. I can manage a selected graphic by clicking the Links panel menu.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

15

InStep: Adobe Comp CC

You can go on to refine each object’s position and size, apply styles, and add any bleeds or other media-specific adjustments required to complete production of the layout. If there’s one piece of advice I’d give about using Comp, it would be “don’t overthink everything.” Don’t waste time worrying about precise measurements, advanced typography, or production details like bleeds; you wouldn’t worry about these if you were sketching on a napkin. You can work out those details later and more efficiently after you send the Comp layout to InDesign. Comp works best when your iPad is connected to the Internet. Although it’s possible to use Comp without an Internet connection after you’ve signed into Creative Cloud, you’ll probably encounter messages encouraging you to connect to a network so that Comp can reach services such as Typekit fonts. Adobe Comp CC is available for any iPad that can run iOS 7.1 or later. Adobe has not announced availability of Adobe Comp CC for other mobile platforms, but Android users may note that Adobe has begun to release Android versions of some of their mobile apps. It would be fun to go back in time and show my high school self that the future of digital design would be cooler than I ever dreamed of, and a prime example would be Adobe Comp CC.

n Conrad Chavez has provided education and training for digital media and publishing for over 20 years. His work includes the last three editions of the book Real World Adobe Photoshop for Photographers and the video Color Management for Photographers and Designers. He also contributes articles to publications including InDesign Magazine, CreativePro.com, and Peachpit.com, and is a photographer. To learn more about Conrad, please visit conradchavez.com.

Reprinted by permission from InDesign Magazine 77 

To purchase this issue or subscribe, visit indesignsecrets.com/issues

16