Design Premium Feature Tour Overview

Hello, and welcome to what's new in Creative Suite Design Premium CS5.5. My name is Terry White, Worldwide Design Evangelist for Adobe Systems, and it's my pleasure to walk you through some of the exciting new features in the new 5.5 release of Creative Suite. So with that, let's start with EPUB production, or eBooks. EPUBS or eBooks is a market that is growing by leaps and bounds. Just by the end of 2010, it was predicted that its market had reached just under $1 billion, and by the end of 2015 it's slated to reach $2.8 billion. That's a huge market, and it's the shape of things to come. Luckily for my designers out there, using Creative Suite CS5.5, you're at the forefront of this design process because you have tools built into your Creative Suite that will enable you to create these publications with ease. Let's take a look. So, for example, I'm going to go ahead and jump over to page 2. And on page 2, I have a muti-column layout that, again, works great for print. However, for an EPUB publication this may not work so well because of the singular column format. But before we get to that, I noticed there's some text or something down there that I can barely see. So let's go ahead and zoom in on that--we'll just zoom it up to a full size so we can read it. And this is the copyright information, and you know what? We'd love to have that copyright information appear on the last page. So what I'm going to do is just put my cursor in that text--anywhere in that body of text. It doesn't have to be at the beginning or at the end. And then I'm going to go up to my Edit Menu, and I'm going to use a new command called "Place and Link Story." So when I do that, it gives me the standard placement cursor that you're used to when you're bringing in external content. However, in this case, we're using the same content that we already have in the publication. So with that, I'm going to jump to the end, where I have a frame--over here, on the right-hand side. I'm just going to click, and of course, it places that text in the frame. And you're probably going to say, "How is that different from copy and paste?" Well, it's actually linked to the original. So for example, if I select that, and I go up and I choose Edit Original, what that will do is treat it like an embedded graphic or embedded text. It takes me back to the original text. So if I make any changes to it--let's say we have to update our copyright-- I know that never happens to you; it happens to me all the time. Let's say I need to change that to 2011, then what'll happen is the minute I click out of that, if I go to my links panel, my links panel will actually tell me that there is an outdated link. So if I bring up my links panel and scroll down, sure enough, there's an outdated link, and I can say, "You know what? I can't remember where that is. Take me to it." And by the way, even if I didn't notice it on the links panel, InDesign is always keeping track of any potential problems down here in the status dispay. So I'm going to go ahead and say, "Take me to that area." It will jump to the last page--in this case, page 15--back where I originally put it, and saying this is the link that's out of date, because remember we changed it to 2011. I can now just simply update the link. And as many times as I placed that throughout my entire publication, they would now all be up to date. So again, link text to make life easier, whether it's EPUBS or not-- any publication where you have content that needs to be linked and updated throughout the publication regularly. So the next thing we're going to do, is we're going to jump back over to page 2. So we will jump over to page 2, here, and zoom back out. And again, on page 2 we have this mult-column format, and the multi-column format is great for print, but what happens when I want to send this over to a device that only works with, basically, single columns? What I can do is I can select this text. And now, using the new Articles panel, I can just simply drag this content into the Articles panel, and it will prompt me to create a new article, which I will call TOC, for Table of Contents. Now at this point, the Table of Contents is a selectable and inclusive article that's going to be in here. For example, I can select the other pieces of this. If we zoom in a little bit more, you'll be able to read that text. So we have a map; we have the Old Town text. I'm just holding down my shift key, selecting these, and again dragging them into the same article layout. And it will continue to add onto that. So what I'm doing is basically, I'm telling you the order of which I want things to be laid out in the EPUB publication on my devices. And you can, of course, do CSS and a lot of html programming, but this makes it simple for designers to dictate the order of which things will appear in their publications. Also, you'll notice that there's a checkbox, which means things can be chosen to be included for the EPUB or eliminated for the EPUB. So if you didn't want that particular article or particular graphics in your EPUB publication, just uncheck them from your articles thread. They'll still print, but they will not export out for EPUB. So with that, let's go ahead and jump over to another page here. And in this case--same thing--I want to take this Old Town text, and I want to drag this in as a new article. And we'll call this Old Town. And now we have our Old Town text ready to go. One of the things that makes life a little bit more challenging in an EPUB publication is dealing with graphics that can be anywhere on the page in InDesign, but of course, in an EPUB or eBook, they have to flow with the text. And InDesign has had a long-standing history of allowing you to anchor objects. But anchored objects wasn't always easy, or at least not as easy as it is now in CS5.5. So with that, you notice that on this page, I have an anchored object. And again, this is a traditional anchored object that we will see with the dashed line, letting us know that this object in anchored to this text. And it even gives me an icon of an anchor right above it. But if I click on the logo above, there is no anchor. So that means it's free-floating, which is very okay or legitimate to do inside of an InDesign document for print, but that logo could end up anywhere in an EPUB publication, and we want it to stay with the text. So how do I anchor it now in InDesign CS5.5? Well it couldn't be easier. All I have to do is grab this little anchor icon, or this little box, and just drag this over to where I want it anchored with the text. So I'll put it right after the name of that particular establishment. As you notice, as soon as I drag it over and let go, it anchors it. Again, it couldn't be easier in InDesign CS5.5, than it is, by just drag and drop. So whenever you want to anchor an object, just drag the icon--the little blue square-- over to the text you want to anchor it to. So now let's go back to the page that I was working on with the articles. You'll notice that we have this graphic which is basically two graphics grouped together. Well now I want to control the order of the graphic, in conjuction with the text that's on the page. Once again, this is a perfect example of when you would want to anchor an object in InDesign CS5.5. Just drag the blue box up to the text or the paragraph that I want that image or images to appear in front of. And just like that, it is now linked together-- wherever that text goes the graphics will go with it. So now that we have those photographs anchored right before the last paragraph, the next thing I want to talk about is the actual tagging of the articles themselves as they go out to EPUB. In the previous versions of InDesign, whenever your would do your export for EPUB, all of your paragraph tags would have the P-tag, which is standard for paragraphs. However, if you wanted to dictate in your publication what was a headline, what was an h1, what was an h2, you would normally have to go in and edit the code or edit the publication manually afterward. Well no longer is that the case. We did it in InDesign CS5.5 in an intuitive way, along with creating your styles for your paragraphs or your characters. So when I go into my paragraph styles and I double-click on my header style, you'll notice that there is one additional element called Export Tagging. When I click on Export Tagging, by default, it will use the automatic tagging. Again, it's just going to tag everything as a paragraph tag. However, I can now--for the header paragraph style--I can say that is now an h1. So we'll export that out as an h1 for EPUB and HTML. If I go in and choose another style, I can make that my h2, my h3, so forth and so on. So that way, my paragraphs are not only styled in my print publication, but they're also styled in my EPUB publication as well. The next thing we're going to do is we're going to jump to the next page here. On this page, we have an image that is fairly large. Depending on the size of the screen for your device, it may be too large or too small. Again, the problem with EPUB is that you don't know what size the device is that the person's going to be looking at it on. So in this case, I want that graphic to dynamically size. If it's a small device, I want the graphic to be smaller. If it's a larger tablet-size device or horizontal device, I want it to be larger. Well now I can control that in InDesign CS5.5. I just click on the image; I can go up to my object menu. In my object menu, I now have an option for Object Export Options. When I choose this, as you may have guessed, I have the options for EPUB and HTML. So I can set my own custom rasterization for that particular object. By default, things go out at a fixed size. But in this case, I can now say Relative to Page Width, and more importantly, these devices are coming with higher resolutions, so no longer is 72 pixels per inch enough for some of these devices, especially those that have a high resolution display, or in the case of iPhone, a retina display. In this case, I could pump it up to 150, which will look better-- if the device can handle that resolution. If not, it's going to be relative to the page width. It's going to scale it down if need be. So just by choosing that one option, I've now made this one graphic scalable based on the size of the device that it's being looked at on. So now let's take a look at one of the most requested features for working with EPUBS inside of InDesign. In InDesign CS5.5, we now have the ability to work with video going out to the EPUB format. That's right--officially an EPUB standard 3.0 video is now a supported format. And that means, on devices that support video--like the iPad and iPhone and the iBooks app-- you can now place those videos in InDesign CS5.5 and actually have those videos go out to EPUB format. Let's take a look. I'm going to go ahead and jump over to page 7, here. On page 7, I have a placed video--it's actually a placed mp4 file, which is, of course, compatible on many devices. With this video, I can actually go to the media panel. I can play the video, pause the video, scrub through the video. Once I find a good spot in a video, I can actually make that spot the poster frame-- the actual image that people will see-- and with that, we either have it as just auto-play with no controller, or we can skin all over, which means that the person will be able to either tap to bring up a controller, including going full screen, or they'll be able to go in--if this publication appeared as an interactive document on a website-- and just hover over the video, and the controller will come up as well. So have the ability, of course, to show the controller on roll-over. So with that, now when we do our export, video will actually go out to EPUB format. Again, on devices that support video, the video will be there and playable on those devices. So let's take a look at the export menu now in InDesign CS5.5. So we're going to do an export--export for EPUB is first-class ciizen under the export menu now. We'll just go ahead and click Save, replacing the one we already did. With that in mind, the first thing we'll take a look at is another popular requested feature from the previous versions of InDesign. With InDesign CS5.5, we can now dictate what the cover image is going to be for our devices. For example, when you look at your publication in the iBooks app on the iPad, you will actually see a thumbnail for your publication, and again, the thumbnail that you chose. So how do we do this? We can rasterize the first page That works, but it's probably not the best option. My favorite option is actually to go into Photoshop and design a thumbnail that looks good small. So with that, once I make that thumbnail, I can actually go in here and choose it As you can see, that's the thumbnail that I want to use. When I go ahead and click Open, it will now reference that thumbnail, so that when I do my export from InDesign, it will actually export the EPUB with the appropriate thumbnail, written to the code appropriately. So with that, we also have the ability under the image tab, as we saw before, to change the pixels per inch for higher resolution devices, as well as choosing how our images interact with those devices, whether they're relative to the page and size--which is the new option-- or a fixed size--which is the old option or the old way we used to do things. So with that, now we can go ahead and export out our EPUB and side-load it onto our devices. Let's go ahead and take a look at what it actually looks like on an iPad. All right, I know I said iPad, but first let's take a look at how our EPUB looks on a smaller device like the iPhone. I'm in the iBooks app on the iPhone. There is my book--my thumbnail that I created. If I go ahead and tap that, it will go ahead and launch the book. Again, I can just flip through the pages. And again, the layout is exactly as I dictated in InDesign using the articles panel. Again, for a smaller device, this is extremely important because there's just not as much screen real estate. If I keep going, I can get to the two images side-by-side. I can get to the larger image, which by the way, is now set so that it goes larger when the device is rotated horizontally versus vertically if I just flip around there. And we can keep looking at the content here, but let's go ahead and look at it on something larger. All right. So now let's see what it looks like on the actual iPad. Now we have the iPad here, and I'm back to the table of contents because I actually want to use the hyperlinks to jump to the film festival. So I tap the film festival, and you might imagine what I'm looking for-- that's right--I'm looking for the video. And with the video--I can actually play that video back on the iPad inline, but more importantly I can go full-screen. And when I go full-screen, it's not just a vertical experience. I can actually go horizontal as well. So that's just a quick look at working with EPUBs and eBooks out of InDesign CS5.5. Now, of course, with InDesign CS5.5 you have the ability to create publications for print, interactive publications for the Web, and now interactive publications for tablet devices such as the iPad, the multitude of Android devices like the Motorola Xoom, and of course the PlayBook. So with that in mind, let's take a look at how this whole workflow works. So let's start with an InDesign document that I have open here. I'm going to go ahead and scroll through it and, as you might notice, I'm in my interactive workspace. And, of course, the interactive workspace is not new to CS5.5, but there is one new addition--one new important addition-- and that is the addition of the Overlay Creator. With the Overlay Creator, we can take objects that are seemingly static on the page, and we can turn those into interactive objects for tablet devices. So, for example, I have this--again, it looks like a still photo, but actually when I open up the new Overlay Creator panel, we can see that this is set to be a 360-degree view. That's right. It's basically the photograph of the bike at 360-degree increments, or angles, that we can now go ahead and make interactive. And, again, I get to control all of that inside of InDesign CS5.5. So, for example, I can choose what will be the first, or initial, image. I can choose whether or not it plays on load so the minute the person swipes to that page the bicycle will start spinning around. Or I can choose to have the person swipe through it, tap to play or pause, so forth and so on. So, again, with this Overlay Creator, I can build upon the toolset that's already in InDesign CS5 with CS5.5 and make things interactive directly inside my InDesign document so that they go out to tablet devices. So, for example, if we continue scrolling through this, one of the other examples here is that we have a photograph that is really a slideshow. When we click on this and we look at our object states, which were introduced in InDesign CS5, we have the ability to take multiple objects and stack them together. But now, with the Overlay Creator, we have the ability to turn that multiple stacked object, or the object states, into a physical slideshow. So, again, you control how it works. Do they tap it and it just starts to play? Do they swipe through each photo? Do you set up buttons that change the states? It's all up to you with InDesign CS5.5. So let's go ahead and scroll through this content, and one of the other things that we can see here--there's another slideshow-- are actually the ability to zoom in. So in this case, we have a photo that we can see the photo zoomed out. But what if you wanted to actually zoom in on the artwork? Well, if we click on this photo, and again we go to the Overlay Creator, we have the ability to choose a pan and zoom. So if I choose Pan and Zoom, then the user will be able to tap, and the photo will zoom up to its full resolution and pan their way around inside the photo directly inside their tablet or on their tablet devices. So with that, there's one more thing I want to show before we actually go and look at it on the iPad, and that is this interactive map, or this interactive display. Now in this case, we've done something pretty clever using some of the features that were built into InDesign CS5 and, of course, building upon those features in CS5.5. We have another object state here and, again, a stack of photos. But in this case, instead of swiping through or having a slideshow play, what I'd love the user be able to do is tap on different pinpoints of the map to show that location's photo. So in other words, each one of these is a button all set up in InDesign, and the button is set to go to a particular state of the object stacks. So with that we can have the user tap to go to a specific spot and actually show that spot right on the tablet device. So now that we've seen how to build the interactive publication in InDesign, what if you wanted to test it first? What if you want to make sure it was doing exactly how you programmed it or set it to do inside of InDesign? You want to test your interactivity. You want to test that map to make sure it all worked. Well, instead of having to load it onto the device first to test it, we're introducing the Adobe Content Viewer for your desktop. So with that, I can go ahead and switch over to the Content Viewer. In the Content Viewer, you can just drag and drop your doc folio file right into it, the one that you produced from InDesign, and your mouse becomes your finger at that point. So I can flick up to go to the next page. I can interact with that bicycle that we talked about, and so you can see it is a real 360-degree revolving bicycle. Also, if you have an Internet feed--in this case I have an Internet Twitter feed loaded on the right-hand side, so that will come in and allow me to test that as well. And again we can flick up. We can play the video that was on this page here. And again we have the ability to play that video inline or full-screen. Let's go ahead and go up, and as we saw before, we have the ability to tap, and this was just--again--just the slideshow that's playing automatically. And remember the Pan and Zoom? Well, we can click, zoom, and pan in on that photograph. So it's working exactly as I indicated. From the InDesign document we're able to test it first. So from here I can actually tap the pinpoints so that we can see the images change from each tap on the map. So now that we've seen it in InDesign, we've built it in InDesign, we've seen it in the brand-new Adobe Content Viewer, now let's take a look at how this looks on a device like the iPad. So here I am on the iPad, and I'm just going to go ahead and launch the free Adobe viewer; this is available on the App Store, so you can download it today. And once the viewer comes up, I see my document. So I'll just go ahead and tap View and, again, the same experience that we saw in the Content Viewer. I can flip up to go to the various pages. I can interact with the content, such as the bicycle that I can spin around. So it's working great. I also have the table of contents, or the thumbnail, that we saw there earlier. And let's go ahead and flip up here. We have our video. And, again, we're playing the video inline, but, of course, using the Overlay Creator I can also have that video play full-screen. So I can tell it what to do inside of InDesign CS5.5, and of course that translates to the tablet device, both horizontally and, of course, vertically and horizontally. So let's go ahead and come out of full-screen on that. We'll go ahead and pause it. And you notice I'm horizontal now but I can continue reading my content, reading my document. So I can tap to play the slideshow. And, again, this was the slideshow that we set up in the Overlay Creator that's just going to autoplay when a person taps on it. We can also go to the photo that we want to zoom in on. We can tap the photo, and it will load the larger version that we can pan around, we can pinch and zoom. And this, again, was a popular request. People wanted to be able to zoom content inside of their digital publications. So, again, my favorite page in this spread, or this publication-- the interactive map where you tap the pins on the map to change the photo. So we can go to the map. We can tap on different pins and see those spots on the map--the actual photos that represent those locations. As you can see, we have taken the content that we started with in InDesign CS5.5, and we took it out toe EPUBs earlier, eBooks, and now we've taken it to a digital publication using the Overlay Creator to add the interactivity for tablet devices that allow a touch interface, such as the iPad or the multitude of Android devices or the PlayBook. So now let's take a look at what's new in Adobe Creative Suite Design Premium CS5.5 for people that are doing Web design. And, of course, with the Web ever evolving, ever changing, HTML5 has become a very important aspect of Web design for designers and, of course, Adobe providing the best-of-breed tools for your Web design work. HTML5 is a part of that in CSS3 as well. So let's take a look at some new things, especially for print designers who are making that transition over to the Web. What it's like or what would it be like to now do the kind of design work you probably always dreamed of doing for the Web, but it just wasn't really technically possible until now. So I'm here in the new Dreamweaver CS5.5, which is a part of the Creative Suite Design Premium CS5.5, and what I would love to do is start from the beginning. What happens when you want to create a new Web page? What do you do? Well, let's start with the comp. In other words, I know that I need to create a Web page, but what is that Web page need to look like? So for that, I'm going to switch over to Acrobat. I'm in Acrobat 10, and I have a pdf on screen that my client delivered and said, "I want my Web page to look like this." And maybe the designer mocked it up and kind of thought, hey, this would make a great-looking Web page. The problem with this Web page is it's doing all kinds of things that would be bad in the Web of yesterday. But with Dreamweaver CS5.5, HTML5, and CSS3, these things are possible today. For example, you'll notice the banner at the top--looks like it has transparency in it. Well, how would you do that before? You'd have to go into Photoshop and composite an image together, and it would be a static image that you would put together with that transparency. You also notice that these columns, or these borders, are rounded. Again, a concept that is new or didn't exist before HTML5. So how do we do this in the new Dreamweaver CS5.5? Let's go ahead and take a look. So let's go ahead and open up that page from our site, and as you can see, it looks very much like the pdf, but there are some things that need to be addressed. First of all, I don't see any transparency. I don't see a lot of things. I'm seeing all these lines and borders and things that I probably wouldn't see on the Web, and there's a quick fix for that. It's actually the Live View button. By pressing the Live View button, what I've just told Dreamweaver CS5.5 to do is enable the WebKit renderer, the rendering engine, the same one that's powering Safari and the Chrome browser. So with that engine in place, I'm actually rendering this page the way it would look on the Web, but I'm not having to go out to a browser to see it. I can do that right inside of Dreamweaver CS5.5. And more importantly, because of the WebKit engine, I'm able to see the latest and greatest HTML5 and CSS3 live inside of Dreamweaver. So I'm seeing the transparency. I'm seeing the rollovers. I'm seeing everything the way it would look on the Web. So this is actually live text just like it would be on the Web--so that's not an image. That's not in Photoshop. It's actually live text in HTML5. So now we have some text here that is on a white background. What I would love to do is make the background for this text transparent. So with that, I'll go ahead and click on the element for that particular text. I'll bring up my CSS Styles panel, and with that I'll go to the element that controls that particular--or the properties that control that particular element. And I can see that that particular element is set to white, so I'll go ahead and click on it, and of course I can choose whatever color I want, and that is the way we would have done it on the past, but now I have more options in HTML5. So, for example, I can click the little fly-out menu here, and one of the things I can enable is the brand-new, not only RGB, but RGBA, or RGB Alpha support. And alpha--for those of you who are video people, you would know the term alpha channel, or Photoshop users would know the term alpha channel, as transparency. So when I enable RGBA, then I can pick whatever color I want, and not only does it change it to that color, but it also gives me, of course, the red, green, and blue values, and you notice that there is a comma, one after it for 100 percent. That's the transparency value. So if I go ahead and change that 1 to, let's say, 0.6, to make it 60 percent opacity, or opaque, then I get that as my background. So very cool to be able to do this. Now, I've gone ahead and tabbed down to the next element in my CSS properties, and what I'd love to do is change the border radius. In other words, border radius is a new element in HTML5 and CSS3, and I can now implement that right here inside of Dreamweaver CS5.5. So we'll just go ahead and start typing "border radius." We'll tab over, and you just tell it how much you want to round those corners. So I'll say about 10 pixels, and I get a 10-pixel rounded corner. Now, last but not least, over here on the right-hand side--I'll move the panel out of the way so you can see it--we have this Wine Testing area. And again, in the past you would have to do that as a graphic and drop it on the page. But in HTML5, CSS3, and of course Dreamweaver CS5.5, this is live. So this text is actually an element that we can now go in and change right here inside of Dreamweaver CS5.5. So if I right-click on that element and say Go to Code, it will take me over to the coding panel for the CSS style sheet for this particular page. And in the code, I can see that element, but more importantly I can see the rotation of that element. So all I have to do to change the rotation--again, since we're looking at this in the WebKit engine, I would just change the rotation here to what I wanted it to be. So let's say I want it to be 45 degrees, so we can see a nice change there. And if we move over so we can actually see it, and move the panel, we can see that that has now changed to 45 degrees. Here we'll change it back so you can see it better. Once again, we started with 20 degrees. If we change it to 45, we can see that it is actually rotating the text live on the page. And again, we're just changing the CSS3 properties inside of Dreamweaver CS5.5. Okay, let's take a look at one more aspect of this page, and that is the video. So as you can see, we have video, and this is actually HTML5 video. So using the video tag and HTML5, we can offer this directly inside of Dreamweaver CS5.5. But there's actually something that's more important than working with the native video, and that is how will this look on multiple devices, multiple screens? So let's go ahead and put away the CSS panel for a moment here. And what I'm going to do is click on the Multiscreen button. And what the Multiscreen preview will allow me to do is preview this layout for multiple screens. So, for example, we have the three most popular screen sizes here, and that would be a phone, a tablet, and down below a desktop. Now when you think about your design, how should your design look on each one of these screens? Well, if we look at the desktop design, of course it should be everything. It should be the exact representation of the HTML5 page that you laid out. However, when you go to a tablet, the tablet screen is not going to be as large as your desktop screen. So in this case, things are starting to fall off. The user would have to scroll back and forth. We don't want that to happen. And it gets even worse when we go down to the size of a phone, because we don't want the user to have to scroll too far vertically, and we don't want the user to have to scroll horizontally at all. It's just bad design. So how can we solve this problem without having to design three separate pages? We can do it with Dreamweaver CS5.5, the new Multiscreen preview, and Media Queries, which will allow me to attach a CSS3 style sheet to each one of these displays. So let's go to our Media Queries. The first thing I want to do is write the queries to the document. Then I want to add one for each one. So I want to say for my desktop, it will have a minimum width of 801 pixels. So that means if it's 801 pixels or wider, it will be most likely a desktop viewer. And for that I'm going to go ahead and say that it's going to use the CSS style sheet called Large, because it's a large display. Next we'll add another media query called Tablet. But this time I don't want to set a minimum. I want to set a maximum. I want to say that if it's 800 pixels wide it's a tablet; if it's larger than that it must be a desktop. So we'll go ahead and choose the CSS style sheet for working with a tablet. Last but not least, we'll add one more, and that's going to be the one for a phone. So if it's a phone device, and the maximum width for that is going to be 400 pixels, again we'll choose the CSS style sheet for mobile. Now when we click OK, we'll get a much different experience for each one of those devices. If we look at the phone, it looks like a mobile app, almost. But it's the exact same Web content, sized appropriately for a phone. If we look at the tablet, again using the CSS3 properties, the video gets larger, the content gets wider, but it's again appropriate for a tablet. And last but not least, of course the desktop does not change because it is, in fact, larger than the 800 pixels wide. So with that, you have now seen how designers can get started with Dreamweaver CS5.5 and take advantage of the latest Web technologies inside your Creative Suite Design Premium CS5.5 and, of course, Dreamweaver CS5.5 to author in HTML5, CSS3 for the desktop, tablet, and mobile devices. Thank you, and my name is Terry White. Thanks for watching. [Adobe Creative Suite 5.5 - tv.adobe.com]