Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
InDesign has a lot of wonderful features, but you know what feature it's missing and I really wish it had? Where is the Save for Web? There's no Save for Web. Haven't you ever created a document in InDesign and you wanted to export a piece of it out for the web? Of course you have. Anyway, there are other ways to skin this cat and that's what this video is about. Let's say we're working on a spread about the Golden Gate Bridge and we need to get this sidebar--I'm going to select it and zoom in so we can take a look. We need to get this out for our web site.
How can we do that? Well, one way, the simplest way is you can take a screenshot of it. So I'm going to deselect to make sure it's not selected, deselect, and I'll switch to Preview mode right here, Preview. So you want to get it clean. You don't want any non-printing character showing or guidelines or anything like that because we're going to take a screenshot, and what you see is what you get with a screenshot. And depending on your operating system, you're going to use a different key to get a screenshot. I'm on a Macintosh and I can press Command+Shift+3 to take the screenshot of the entire screen, but if I press Command+Shift+4, then I get little a crosshairs, and this is a lot easier for me because then I can just surround this graphic with the crosshairs.
So let's go ahead and do that. Everything within this shaded area will be exported and that's it. You don't get a lot of feedback unfortunately. It's saved to the Desktop by default. It has a dumb name showing the date and the time, so I could always rename it to sidebar. It saves it as a PNG file by default, and I think back in Leopard or maybe it was Tiger, it saved these as PDFs. Actually I use a program called ScreenSnapz that lets me save the graphic in a different format.
So if you are doing a lot of screenshots, because you're trying to create web graphics out of InDesign, then you should probably invest in a dedicated screen capture program for your OS, for your operating system. So this is a PNG file which is perfectly fine, and if I jump over to Firefox and we open that up, there it is. There is my web graphic and then I can just send this on to my web developer or use it in my web site and just drop it right in there, sidebar.png. But there are other ways to get web graphics out of InDesign that give you a bit more control.
For example, let me zoom out a little bit and we'll go back to Normal view. I'm going to hide the Baseline Grid, because it's bugging me. You can select anything. It can be one item or multiple items. Here we're just selecting this, and you can export it to JPEG; JPEG is another web graphic format. So I've got this selected, I go to File > Export, choose JPEG, save it on the Desktop. I'll call it sidebar-exp to jpg. Now it doesn't automatically make a JPEG.
You get this wonderful dialog box first where you can say that you want to export the selection. That's what it's assuming, so you have to have the right selection first. You could, if you do have anything selected, you could export pages to JPEG if you wanted to. You can set the Quality of the JPEG, so I probably would like High or Maximum because there is some small type in there. You can set the Resolution, so let's say 72 because we like 72 PPI images. And the Color Space, RGB, CMYK. For the web, you just want RGB.
Everything else you can remain the same. So we're exporting it out. That's it. So exporting just exports a copy of what you have selected. If you want to see what it looks like, jump over to your browser, I'm going to create another tab here, and then go to your browser's File Open menu and open it up. So here it is at 72. You notice it's smaller than this one, and that's because the screenshot software that my Mac uses, uses a higher resolution. If you take this JPEG at a higher resolution, then it'll be larger because you'll have more pixels.
So let's try that. We're going to export this back out to JPEG; only this time we'll do it at a higher resolution, let's say 300. So here we're going to choose 300 PPI JPEG. Export it and then let's try this again. Open it up our 300 guy. There we go! That's really big. Papa bear, baby bear, and mamma bear! So you can change the resolution in that JPEG dialog box in InDesign. All right, let me show you another way that you can get this graphic out as an image.
Now this is only possible in CS5.5, and it's because of the wonderful new Object Export Options dialog box. So you make a selection; it doesn't have to be a picture, it could be anything. It can be a text frame if you wanted, but here we have a text frame in front of a background frame, so we have it selected and then we go to Object > Object Export Options and we're going to turn on Custom Rasterization. Here you choose not just JPEG but you could also make it into a GIF or a PNG file if you wanted to.
And a PNG file has the full range of colors just like a JPEG file, but it can also show transparency if you wanted to. So that's kind of like the file format of the future. But yeah, let's go ahead and choose PNG for this image. Here you can set the resolution. Now you can't enter your own resolution like we could before in the export to JPEG, but you can choose one of these. I think 150 is perfectly fine. So this will export as a graphic if we export to EPUB or HTML. All right, you can do the same thing say with this text frame. If you wanted to export this text frame or maybe say this little decoration up here, let me Command+Shift+Click to release it from the master page, this can also be exported instead of this text as a graphic.
So you just select it and then go to Object > Object Export Options and turn on Custom Rasterization. Now notice that you'll only see the graphic if you export it as EPUB or HTML. The problem with exporting as EPUB is that there is no option to export just the selection. So you'd have to export this entire stupid thing as an EPUB and then root through the images folder after you expand it and find this graphic. So instead, the method to our madness is now we're going to export this as a selection to HTML.
So we go to File > Export, we choose HTML from the dropdown menu, and it's already sidebar-exp to html.html. That's fine, so we know which one it is, and here is the key is that we want to export just the selection, not the entire document. Under the Image section, make sure that this is disabled, which is the default, to Ignore Object Export Settings. You want it to--and it's kind of a backwards setting. You want it to obey the Object Export Settings which means leave this unchecked and now we'll just say OK, and it automatically opened in whatever program opens up HTML files and there is our graphic inside there.
If I go to the Finder where it made this folder, here is the folder containing the images that go inside the web page. So there's the web page and then it has the images folder and there's our JPEG. So even though Adobe has not yet added Save for Web to InDesign, now you know of a bunch of ways to get your graphics or your text frames exported out in web-ready formats.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.