IntroductionWelcome| 00:03 | Hi, I am Michael Murphy, and
Welcome to InDesign for Web Design.
| | 00:09 | In this course I'll show you how to build and
design website mockups using Adobe InDesign.
| | 00:14 | I'll start by showing you how to set up your documents
with web-friendly colors, grids, and measurements.
| | 00:20 | Then I'll show you how to streamline your
design process with styles that allow you
| | 00:24 | to easily transform and edit
your text, objects, and images.
| | 00:29 | We'll cover how to add interactive elements to
your site like hyperlinks, video, and HTML content.
| | 00:35 | Then I'll walk you through different ways
to export your web design and include the
| | 00:39 | necessary information and visual reference
a developer might need to build the site.
| | 00:44 | We'll cover all of these features, plus more.
So let's get started with InDesign for Web Design.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're A Premium Member of the lynda.com
online training library, you have access to
| | 00:05 | the exercise files.
The exercise files are organized by Chapter.
| | 00:10 | Each Chapter folder has a folder for
movies that contain the exercise files.
| | 00:15 | If you don't have access to the exercise files,
you can follow along using your own assets.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | If you're watching this course, you don't
need to know CSS, HTML, or how to write code.
| | 00:07 | You should however have a good
understanding of how to work in Adobe InDesign.
| | 00:11 | If you aren't familiar with InDesign, or if
you want to brush up on your skills, check
| | 00:15 | out InDesign CS6 Essential Training with David
Blatner here on the lynda.com online training library.
| | Collapse this transcript |
|
|
1. Setting Up DocumentsPrint vs. web: Working with pages, pixels, and the box model| 00:00 | When you lay out objects for print, you have
the option to loosely place and arrange them
| | 00:04 | on the page without locking
them to any particular structure.
| | 00:08 | InDesign knows that object's
coordinates on the page, but you don't have to.
| | 00:12 | Most designs, however, have an underlying grid
structure that serves both an organizational
| | 00:17 | and an aesthetic purpose.
| | 00:19 | The elements on your page align to that
grid, creating a sense of order and balance.
| | 00:24 | The grid itself may be invisible, but its influence
is felt at all times in a clean, organized design.
| | 00:30 | On the web, that grid exerts much more
influence in your work process, because each item on
| | 00:35 | the page is required to have a defined
relationship to the various divisions of the available
| | 00:40 | screen real estate.
| | 00:42 | This structure is defined with CSS and HTML
so that browsers and other devices can render
| | 00:47 | the page as you intended.
| | 00:49 | Unlike print layout grids, which are fixed
based on the physical constraints of ink and
| | 00:54 | paper, web grids can be fluid.
| | 00:56 | The divisions within the grid can be made
to adapt to changes in the available screen
| | 01:00 | space, typically your browser window, and
the proportions of the grid can be expressed
| | 01:05 | in percentages of the available
space, rather than in fixed values.
| | 01:09 | If you're familiar with establishing grids
for your print pages and working within that
| | 01:13 | structure, it's not a far leap to
adjust that approach for web design.
| | 01:17 | If you're not, it's time to start.
| | 01:19 | In this chapter we'll explore how to establish
the foundation of an InDesign based web design
| | 01:24 | project, from creating a document to
establishing grids and making use of master pages. Features
| | 01:30 | that will get your web design
project off to an efficient start.
| | Collapse this transcript |
| Creating a document for the web| 00:00 | InDesign ships with very print centric
default settings, but when you start using InDesign
| | 00:05 | as a web design tool, you'll need to switch
from those defaults and work with the InDesign
| | 00:09 | document settings that are specific to the
web, and it starts from the moment that you
| | 00:14 | create a new document.
| | 00:15 | I am going to create a new document by going
to the File menu and choosing new Document,
| | 00:20 | or I could choose Command+N on
the Mac, or Ctrl+N on Windows.
| | 00:24 | And whenever you create a new document
in InDesign its default Intent is Print.
| | 00:29 | There are actually three
different document Intents in InDesign.
| | 00:34 | Print and Web, which have been there since
CS5, and Digital Publishing, which was added
| | 00:38 | in CS6 to support InDesign's tablet-based
publishing, which is not what we're talking
| | 00:43 | about in this course.
| | 00:45 | We're going to be
creating a Web Intended document.
| | 00:48 | And as soon as you switch to Web
Intent, a lot changes in this dialog box.
| | 00:54 | The Page Size has changed, the measurement has
changed, you'll notice that the page Orientation
| | 00:58 | has changed to Landscape from
Portrait, which is the default.
| | 01:03 | Facing Pages is turned Off.
| | 01:05 | The units are all in pixels in this dialog now,
instead of either points or inches, whichever
| | 01:10 | your preferences were.
| | 01:12 | And the list of Page Sizes is now not
legal or tabloid or paper-based sizes, but more
| | 01:19 | screen-based sizes,
800x600, 1024x768, and so on.
| | 01:24 | And you can make your own custom size
just like you could for a print page.
| | 01:29 | The values for things like Column, Gutter,
and Margins are actually the same values in
| | 01:35 | size as their print counterparts, but
they're just expressed here in pixels.
| | 01:40 | And when you create a print document, you
almost always want more options showing so
| | 01:44 | that you can indicate a Bleed area
at least and possibly a Slug area.
| | 01:49 | But there's no paper on the web, there is no
Bleed area, so these things are not necessary
| | 01:53 | when you're creating a web
intended document in InDesign.
| | 01:57 | I'll click OK, and let's see what's different
about a web intended document once it's created.
| | 02:02 | I am going to open up the Swatches panel,
and you'll notice that it's the same swatches
| | 02:07 | that you have when you create a print document
except all of the colors are RGB, they're not CMYK.
| | 02:14 | When you create a New Swatch, you'll
see that the default color mode is RGB.
| | 02:21 | If I go to the Edit menu and look at the
Transparency Blend Space, that defaults to Document RGB.
| | 02:28 | And in the Ruler you'll see that your
measurements are all expressed in pixels.
| | 02:32 | When I create an object on the page, I'll
draw out a text frame here and then switch
| | 02:37 | to the Selection tool.
| | 02:39 | In the Control panel you'll see that its X
and Y coordinates are indicated in pixels
| | 02:44 | and its Width and Height
values are also indicated in pixels.
| | 02:47 | However, if I were to put a Stroke on this
object, you'll notice that it's expressed in points.
| | 02:53 | And if I switch to the Text tool and start
typing in this frame, and select that text--
| | 03:00 | I'll go to the Character Formatting
controls in the Control panel--and you'll see that
| | 03:03 | its point size and leading
are also expressed in points.
| | 03:07 | These are the two exceptions to the rule,
Stroke values and Type values, they're still
| | 03:13 | expressed in points here even
though they're actually pixels.
| | 03:16 | The fact is anything expressed in points
in InDesign is actually expressing a pixel.
| | 03:22 | One point in InDesign equals one pixel.
| | 03:25 | So even though it's showing up differently
in the Control panel, it's actually pixels.
| | 03:30 | Now if it turns out that you create a document,
but you don't start out with a Web Intent,
| | 03:35 | you can always change it after the fact, but I
just want to caution you about one little thing.
| | 03:39 | If I hit Command+N, or Ctrl+N on Windows, to
create a New document, the default is Print
| | 03:44 | Intent and the default is also facing pages.
| | 03:48 | I'll just click OK, and then I realize I
should have created a web intended document.
| | 03:53 | I can go to the File menu to Document
Setup and change it at this point to web.
| | 04:02 | Facing Pages gets turned off and my values
change as we saw before, and let's say I go
| | 04:07 | with 1024x768, and I click OK.
| | 04:11 | My Swatches change, my Ruler units change,
everything changes the same way that it was
| | 04:16 | when I created a document
for the web from scratch.
| | 04:20 | The only thing that doesn't
change is your Master page.
| | 04:24 | It was created for print using Facing Pages, and
that Master is still a two-page facing page master.
| | 04:32 | So I can always go into the master pages,
on the Pages panel, I'll double-click that
| | 04:37 | and choose Master Options for "A-Master" from the
Pages Panel menu, and make this a single page Master.
| | 04:46 | And now I've got a Web Intended document, which
is always going to be made up of Single pages,
| | 04:50 | not Facing Pages because there's no such thing
on the web, and I don't have that Master page
| | 04:54 | problem carried over from having
created it with the Print Intent.
| | 04:59 | So whenever you create a new InDesign document
for a web design project, remember it's important
| | 05:03 | to start off using a document with the right
Intent in order to take advantage of the automatic
| | 05:08 | adjustments that InDesign makes for you in measurement
systems and colors that are appropriate to web work.
| | Collapse this transcript |
| Setting up a custom web design workspace| 00:00 | If you know you're using InDesign for web
Design, you might want to take some additional
| | 00:04 | steps to tailor your workspace so it's
more conducive to that type of project and will
| | 00:09 | help you be more
efficient throughout the process.
| | 00:11 | For that I recommend setting up a Custom
InDesign Workspace, specifically for Web Design.
| | 00:16 | InDesign ships with a number of preconfigured
workspaces, including Essentials and Workspaces
| | 00:23 | specific to Digital, Publishing, or Printing
and Proofing workflows, but there's nothing
| | 00:27 | here for the web, so we need to create one.
| | 00:30 | I always start from Advanced, because it's
the one workspace that has the most things
| | 00:34 | I am going to keep before I start adding to it.
| | 00:37 | So I'll switch to Advanced, and the only thing I
might be inclined to remove from this workspace
| | 00:42 | is the Gradient panel, because I'll probably use it,
but I don't know that I'll use it all the time.
| | 00:47 | Again, this is very subjective, so if this
is something you feel you would use all the
| | 00:51 | time, certainly keep it in your workspace.
| | 00:54 | So now I am going to start adding panels to
this Advanced Workspace to customize it and
| | 00:58 | turn it into a web workspace.
| | 01:00 | I'm going to start with items mostly in the
Interactive group, so I am going to choose
| | 01:05 | Bookmarks and then click hold and
drag that panel right into here.
| | 01:13 | I'll grab Buttons and Forms too while I am
at it and put it in the same grouping with
| | 01:16 | Bookmarks, because it's
also an Interactive panel.
| | 01:20 | Back to Interactive for Hyperlinks and while I'm here,
I'll also get Media, Object States, and Liquid Layout.
| | 01:36 | So I'll take Media and drag it into that group, I'll
take Hyperlinks, also drag in there, and Object States.
| | 01:49 | And then I'll take Liquid
Layout, put that down here.
| | 01:53 | And Liquid Layout opened with the Articles
panel, and I actually could use the Articles
| | 01:57 | panel later on in this course.
| | 01:58 | So I'm going to drag that down, actually,
I am going to move that up here to a more
| | 02:04 | logical place with Pages Layers and Links.
And now I've got the panels configured the
| | 02:09 | way I want in the proper groupings, and
I want to save this as a Web Workspace.
| | 02:14 | So I'll go up to the Workspaces menu,
choose New Workspace, I'll call this Web.
| | 02:21 | panel Locations and Menu
Customization are checked by default.
| | 02:24 | I haven't actually used those features, but I
see no reason to turn them off, in this case.
| | 02:28 | So I am just going to leave
them as they are, click OK.
| | 02:31 | And now I've got my Web
Workspace up here in the list.
| | 02:34 | It shows up at the top along with any other
custom workspace that I've created and then
| | 02:38 | these are all the defaults.
| | 02:40 | So if I find myself wrapping up a Print
Project then I'm in the, say, Printing and Proofing
| | 02:44 | Workspace or just randomly working with
panels all over the application, and I'm wrapping
| | 02:50 | up this project, and it's
time to switch gears for the web.
| | 02:53 | I can simply go up here choose my Web workspace
from a list and get all of my web panels ready
| | 02:59 | to go to get started on a web design project.
| | 03:02 | By setting up a custom workspace, you can
make the panels you need the most available
| | 03:05 | at all times and avoid a lot of
mousing around to various menu commands.
| | 03:10 | You'll also eliminate screen clutter by
dispensing with panels that you're less likely to need.
| | Collapse this transcript |
| Working with web colors| 00:00 | If you're a print designer, you've probably
been trained throughout your career to think
| | 00:04 | of color in terms of
CMYK or Pantone spot colors.
| | 00:08 | On the web, however,
there's no such thing as ink.
| | 00:10 | You're working in an environment of color
created by combinations of red, green, and blue light.
| | 00:16 | CMYK doesn't enter into the
picture, it's all about RGB.
| | 00:21 | I'm in a Web Intended
InDesign document right now.
| | 00:24 | So when I look at my Swatches panel, I see
all RGB equivalents of Cyan, Magenta, Yellow,
| | 00:30 | Black, Red, Green, and Blue.
| | 00:33 | When I double-click any of these colors or
create a new swatch, I'm dealing with RGB values.
| | 00:39 | This is an additive color system where
color is created by adding light.
| | 00:43 | CMYK is a subtractive color system where
color is created by putting more ink on the page,
| | 00:50 | thereby subtracting away the
background color or the paper color.
| | 00:54 | So immediately this works in
reverse of what you're used to.
| | 00:58 | If I turn all the values for RGB up to
their highest number, I get pure white.
| | 01:05 | If I did that with CMYK, I would get
a very, very muddy saturated black.
| | 01:11 | Likewise, if I bring them all
down to 0, I get pure black.
| | 01:17 | In CMYK, I would have no ink at all,
and I would see the color of my paper.
| | 01:21 | So already, it's the opposite of your mindset
as a print designer, and it's not helped along
| | 01:27 | by the fact that InDesign really lacks an
intuitive color picker, something very comfortable
| | 01:32 | and visual, kind of like what you're used
to if you spend a lot of time in Photoshop.
| | 01:37 | I am going to switch over to Photoshop now
and just take a look at its Color Picker.
| | 01:41 | I have this image already open, and if I just
click on the Foreground Color Swatch, it opens
| | 01:47 | up the Photoshop Color Picker, which is a
very comfortable environment for me to work in.
| | 01:51 | I can get somewhere in the blues and
settle on a range of colors that I like and then
| | 01:57 | just drag over to any color within the
gamut of that particular shade of blue.
| | 02:03 | And once I have the color I like, I
can click OK or add it to my Swatches.
| | 02:09 | Unfortunately, InDesign
doesn't have anything like that.
| | 02:11 | I am going to switch back to InDesign for a
moment and take a look at my other alternative
| | 02:16 | for working with web color, which is to
switch the color mode from RGB to web. And what I
| | 02:23 | get there is this finite list of predefined
RGB swatches that are in the web safe color
| | 02:30 | range, which is a very limited palette of 216
colors that are compatible with both Windows
| | 02:39 | and Mac OSs, and pretty much any
display that is limited to 256 colors.
| | 02:45 | The thing is those displays really aren't
around anymore, this system was devised quite
| | 02:50 | some time ago, and it was true for the web
at that time, but in modern web design, this
| | 02:55 | restriction really doesn't exist anymore.
| | 02:57 | So switching your Color mode to web is unnecessarily
limiting yourself to a palette that you probably
| | 03:04 | don't want to work within, and it's going
to limit your design flexibility as well.
| | 03:08 | The other thing you're unable to do in
InDesign is to specify color in hexadecimal values,
| | 03:13 | which is the standard for
defining colors on the web.
| | 03:16 | I'll go back to Photoshop for a moment, click
the Foreground Swatch to open the Color Picker
| | 03:21 | again, and you'll notice that for any
color I select, I get my HSB, RGB, CMYK, and Lab
| | 03:28 | colors, and I also get this hexadecimal
value down here defined for me, and I also get a
| | 03:35 | hexadecimal color value defined
for the currently selected color.
| | 03:40 | If I were to work only in the web color mode
in InDesign, like I showed a moment ago, here
| | 03:46 | is an example of just how
limiting that palette is.
| | 03:49 | I'll check Only Web Colors, and you can see
how this Color Picker changes dramatically,
| | 03:55 | eliminating thousands of color
choices and limiting me to only 216 colors.
| | 04:01 | So I can only pick this or this or this, and
this is not the range of colors that I want
| | 04:07 | to be able to work with.
| | 04:08 | I am going to Cancel out of this for now,
and I am going to return to InDesign.
| | 04:14 | So we've got a few problems
that we need to deal with.
| | 04:16 | The RGB sliders and the Color Picker are
not quite as intuitive an interface as I would
| | 04:22 | like, and it's not what I am used to
from working in something like Photoshop.
| | 04:27 | And I'm not able to specify hexadecimal
color values for myself, or to a developer, when I
| | 04:32 | export files for them to start using
to create this site from my mockups.
| | 04:36 | Fortunately, there is a fix.
| | 04:39 | You can extend InDesign's
functionality using a script.
| | 04:44 | Sometime ago, David Blatner, a lynda.com author,
pointed out on his InDesign Secrets website
| | 04:49 | that this hexadecimal color definition was
lacking in InDesign and a scripter rose to
| | 04:55 | the occasion and created that functionality
and a few other bells and whistles that really
| | 05:01 | helped make this a much easier process.
| | 05:02 | I am going to Cancel out of here, and I'm
switching to my browser to the in-tools.com
| | 05:08 | website where you can download this script.
| | 05:11 | The script is called Hex
Swatches in InDesign. It's free.
| | 05:15 | So I can just click the Download button, and
then I'll find that download in my Downloads
| | 05:21 | folder, and it's in this
Create Hex Swatch folder. I'll open that up.
| | 05:27 | To install this script, all I need to do is
double-click this CreateHexSwatch.mxp file.
| | 05:33 | This opens the Adobe Extension Manager.
| | 05:35 | I'm given a License Agreement, which I'll
Accept and the script is installed, and it
| | 05:40 | tells me in order for the changes to take effect, you
must close and then restart InDesign. I'll click OK.
| | 05:46 | You can see that this has been installed
properly for InDesign, it shows up in the list here
| | 05:52 | and tells you who the author of the script is.
| | 05:54 | I'll quit out of the Extension Manager,
switch back to InDesign, quit--I don't need to Save
| | 06:01 | my changes--and then I'll just Restart InDesign.
| | 06:08 | Now this script was created to be compatible
with CS3, 4, and 5, but I have been running
| | 06:13 | it in CS6, and it works exactly
the way it did in the older versions.
| | 06:18 | So let me start over with a New Web
Intended document that is 1024x768--and I'll click
| | 06:26 | OK--and now when I go to the Swatches
panel, I have a new option, New Hex Swatch.
| | 06:33 | This allows me to specify a hexadecimal value,
soon as I tab out of the field, it shows me
| | 06:41 | what that color looks like
and puts in all the RGB values.
| | 06:46 | It also gives me the option to use
the Current Photoshop Foreground Color.
| | 06:50 | If I have a file open in Photoshop at the
time this dialog opens, its Foreground Color
| | 06:55 | can just be picked up and added in here.
| | 06:57 | So this is great for creating a
palette out of an existing image.
| | 07:00 | I'll switch over to Photoshop for a moment,
and I'll pick a specific color from this painting
| | 07:06 | just by sampling it with the Eye Dropper tool.
That places it here as the Foreground Color.
| | 07:11 | I'll go back to InDesign, and I'll click
Current Photoshop Foreground Color, and there's that
| | 07:17 | color available to me now in
InDesign with its hexadecimal value defined.
| | 07:22 | I can click Add to add this to my Color Swatches, and you
can see that it's added with its hexadecimal value name.
| | 07:29 | If I wanted to modify this swatch, I can just
click it and open up the Mac OS Color Picker.
| | 07:35 | On a Windows system, it would open
the Windows default color picker.
| | 07:39 | And here I can actually change the color,
redefine it altogether, and then when I close
| | 07:47 | the Color Picker, I get the new
Hexadecimal Value and a New Color, and I can add that
| | 07:53 | as well, either by hitting Add, if I
wanted to add it and then continue adding colors
| | 07:58 | or just by clicking OK to
add it and exit the dialog.
| | 08:02 | So here are two new colors that are RGB,
added to my Swatches panel and named according to
| | 08:08 | their Hexadecimal Values.
| | 08:09 | Now the only thing you need to be a little
cautious of is changing these once you've defined them.
| | 08:15 | Because they are named according to their
hexadecimal values, if I double-click, and
| | 08:20 | I start playing around with these sliders
that changes their RGB values, which changes
| | 08:26 | their Hexadecimal Values, but
the Swatch Name will not change.
| | 08:30 | If you make a change like this to your Swatch,
be sure to check the Name With Color Value
| | 08:35 | check box, so at least the Swatch Name will stay
current according to the RGB values that make it up.
| | 08:42 | I'm not actually going to do that.
So I am going to click Cancel out of here.
| | 08:46 | Of course, there's nothing wrong with
using InDesign's built-in RGB sliders to create
| | 08:50 | colors, if that works for you.
| | 08:52 | I've just found personally that I work better
in a more web-friendly color picking environment
| | 08:57 | that's closer to what I'm accustomed to and
comfortable with in Photoshop, and this Create Hex Swatch
| | 09:02 | script adds that functionality that
keeps me more productive in the long run.
| | Collapse this transcript |
| Creating web page grids and templates| 00:00 | Grids are an integral part of page layout
and create an underlying order for all of
| | 00:05 | the elements on a page.
| | 00:07 | Since the majority of modern web pages are
built using CSS and CSS is built around a
| | 00:11 | box model, everything on a page is some form
of box adhering to an overall grid, establishing
| | 00:17 | a grid early on provides structure
upon which you can build your design.
| | 00:22 | When you start a web project with InDesign,
the first thing you need to decide upon is
| | 00:26 | what's the smallest size screen you are
going to be shooting for. You are not delivering
| | 00:30 | your content onto paper, you are delivering it onto
screens and screens come in many shapes and sizes.
| | 00:37 | When you create a New Document, with a Web
Intent, you can choose from a number of predefined
| | 00:43 | and fairly common screen sizes. Some of which,
everything from say 800x600 and smaller, is
| | 00:50 | a little bit small by modern display sizes.
| | 00:54 | Anything from 1024x768 and up is more
reflective of the displays on the market right now.
| | 01:01 | 1024x768 is a nice safe comfort zone to
shoot for when you're designing for the web.
| | 01:08 | When you create a page that's 1024x768, bear
in mind that you're creating a page that is
| | 01:13 | the entirety of the user's display.
| | 01:16 | It doesn't account for things like the
browser interface, the operating system interface,
| | 01:22 | any of the surrounding elements
that might be around your web design.
| | 01:26 | So the target is always something a little
bit smaller than 1024x768 in your design.
| | 01:32 | And there is a popular trend on the
web now toward the 960 grid system.
| | 01:37 | And what exactly is the 960 grid system?
Well, let's take a look.
| | 01:40 | I am going to switch over to my browser,
and I am at a site that is 960.gs, and this is
| | 01:47 | your go to place for all the information
you might want about the 960 grid system.
| | 01:52 | One of the things I like about this page
is the rationale behind it is pretty clearly
| | 01:56 | stated except it's all the way down at the
bottom of the page, and it explains that all
| | 02:02 | modern monitors support at least 1024x768
resolution and 960 is easily divisible by
| | 02:10 | a great many numbers, making it a
highly flexible base number to work with.
| | 02:15 | Another thing that's great about this page
is it's loaded with examples of sites that
| | 02:20 | use and are built upon this 960 grid system.
| | 02:24 | Even better than that, it actually has a
function whereby you can see that grid system overlaid
| | 02:30 | on the pages that actually use it.
| | 02:32 | For example, here is a page that uses a 12-column
grid system, and if I click Show Grid, the
| | 02:39 | grid lays right over that page, and you can
see how everything is built upon that structure.
| | 02:44 | If I click this one for a 16-column page, I
get a 16-column overlay, and you get a glimpse
| | 02:50 | of that underlying grid
right here on these sites.
| | 02:54 | It's a really nice feature.
| | 02:57 | And the other great thing about this site
is the big ole DOWNLOAD button at the top.
| | 03:01 | The creator of this page has made a number of
useful resources available free for download,
| | 03:07 | including InDesign templates.
| | 03:09 | So I am going to click this button,
Download all of the files associated with it, look
| | 03:16 | at it in my Downloads folder.
| | 03:18 | Because I am on Safari on a Mac, this has decompressed
automatically to this nathansmith-960-Grid-System folder.
| | 03:25 | I'll double-click on that and then to the
templates folder within it, and inside there
| | 03:31 | is an InDesign folder.
There are templates for InDesign CS3, 4, and 5.
| | 03:36 | I'll open up the CS5 folder, because all of
those templates will open just fine in InDesign
| | 03:41 | CS6, and I'll double-click on the 960-grid-16
column template, which opens
| | 03:48 | up a new untitled document and the document
itself, if I look at its Document Setup is
| | 03:54 | actually 1280x1024.
| | 03:56 | This is really just a larger canvas set up
upon which to build your 960 grid-based design.
| | 04:03 | This could easily be a 1024x768 document,
it will still accommodate the 960 grid.
| | 04:08 | But I am going to select the Line tool, and
I actually have to unlock this Grid layer,
| | 04:14 | from the Layers panel,
here is this 16 Grid layer.
| | 04:17 | I'll unlock that, and if I draw a line, all
the way across from the outermost guide on
| | 04:23 | either side, you can see
that it is exactly 960 pixels.
| | 04:28 | Delete that line, and I am going to go to
the Pages panel to this document's Master
| | 04:34 | page, I'll double-click that.
| | 04:37 | And because I unlocked that layer previously,
if I switch to the Selection tool, I can select
| | 04:43 | across all of these columns.
| | 04:45 | You can see that there are these tinted
rectangular panels drawn on this page that indicate the
| | 04:50 | different columns in this grid.
There are 16 of them altogether here.
| | 04:55 | You will also notice since I have them all selected
that the total width of this is actually 940 pixels.
| | 05:02 | That 960 value divides with 16 columns and
20 pixels in between but that's 1620 pixel
| | 05:11 | gutters between the columns.
| | 05:13 | And that last 20 pixel gutter is actually
split in half with 10 pixels appearing on
| | 05:18 | the left-hand side and 10 on the right-hand side,
and that's what these blue guides are here for.
| | 05:23 | So we are actually dealing with 16
columns that span a total of 940 pixels.
| | 05:29 | Now if I am ready to get started on our project,
I can certainly start with any of these grids,
| | 05:34 | or I could create my own.
| | 05:35 | I am going to close this without saving,
and let's see how we would easily set up a 960
| | 05:42 | grid based InDesign layout
and create a template from it.
| | 05:46 | I'll go to File > New Document, I am
going to create a Web Intended document.
| | 05:52 | I'll set the Page up as 1024x768 and what I
want is a 16 column grid between each column
| | 05:59 | is 20 pixels, and I need to do a little
math in my head to establish the Margins.
| | 06:05 | Now it's easy enough for top and bottom,
I actually don't want any margin there.
| | 06:09 | So if I type 0 with make all the settings
the same, I get zeroes on all four sides.
| | 06:14 | I am going to turn that option off now because I
want to set separate margins for left and right.
| | 06:21 | But what I need to do is set Margins
that give me a total of 940 pixels.
| | 06:26 | When I subtract 940 from 1024,
what's left is 84 pixels.
| | 06:31 | Since I'm distributing half of that on the
left and half of that on the right, what I
| | 06:35 | need is a Left Margin of 42
pixels and a Right Margin of 42 pixels.
| | 06:41 | That's going to leave me
940 pixels in the middle.
| | 06:44 | I'll click OK, and there's my document with 16
columns and the appropriate margins on either side.
| | 06:53 | So take my Line tool again just to verify,
that my math in my head is correct, draw it
| | 06:59 | across, and there is 940 pixels. Perfect.
| | 07:03 | I'll just use that Line
tool to measure here again.
| | 07:07 | If I go to this column, that's exactly a 40
pixel column, and I'll drag across here, and
| | 07:13 | that's exactly a 20 pixel
gutter, and I've got 16 of those.
| | 07:18 | Now that I've created my own basis for a
template, there are a couple of things I want to do.
| | 07:22 | First, I want to go to the Master Page and
make sure that every change I make here occurs
| | 07:26 | on the Master, so all of my
document pages will match that master.
| | 07:32 | The first thing I am going to do is drag a
guide out from the left to 32 pixels, which
| | 07:37 | is 10 pixels away from my left margin, and
I'll come over here, then I'll come out and
| | 07:43 | drag a margin out here in the right to 992
pixels, that's 940 plus 10 plus my 42 pixel
| | 07:52 | margin so that's 992.
| | 07:54 | And that's my little 10 pixel
buffer on the right and on the left.
| | 07:59 | Let's just verify that that's correct, draw a
line across, and I have got 960 pixels exactly.
| | 08:07 | And the last thing I am going to do is take
a guide from the top and draw down to roughly
| | 08:13 | about 700 pixels or so, I could do 720, but
I am going to put a guide at 700 pixels, and
| | 08:20 | I'm putting this here because page depth
will always change, but the amount of space that
| | 08:25 | someone will see on a
1024x768 monitor is finite.
| | 08:29 | If that's the depth of their monitor, I want to
make sure that my most important page information,
| | 08:35 | the top level stuff--what in print
would be considered above the fold material--
| | 08:40 | all appears in that person's browser as best
it possibly can, above that line, where say
| | 08:46 | the user interface, the operating system interface,
the browser is going to start cutting off that content.
| | 08:52 | I'm putting that guide in place so that as
I develop my design and move forward, I may
| | 08:56 | be designing pages that
extend vertically much deeper.
| | 09:00 | But I'll always have that guide as a
reminder of what people are going to see initially
| | 09:05 | before they start scrolling down.
| | 09:07 | Next, I'm going to save this as an InDesign
template, but before I do that, I just want
| | 09:11 | to point out one little difference in behavior
that I've noticed in CS6 compared to earlier versions.
| | 09:17 | In earlier versions of InDesign, if you
were working on a Master page and then saved a
| | 09:21 | template, every time that template opened,
it would open on the Document page, not the
| | 09:26 | Master page. Not so in CS6, if I save a
document as a template, and I'm on the Master page
| | 09:34 | when I save it, it's going to open on the
Master page which means when I start working,
| | 09:38 | I'm working on the Master page, and
that's not typically what people do.
| | 09:42 | So I am going to first switch to the
Document page by double-clicking in the Pages panel
| | 09:47 | and then save my template.
| | 09:49 | I'll choose Save As, I am going to put this
on the Desktop as 960grid-16col.indt, which
| | 09:58 | is a template file.
| | 09:59 | I have to make sure that I choose InDesign CS6
template from the Format, and I'll click Save.
| | 10:04 | Now I can close this document, and when I
am ready to start a new project with a 16
| | 10:09 | column grid, I can just choose
File > Open, open that template file.
| | 10:16 | Here I am on the proper document page with
all of my grid settings established, and I
| | 10:22 | don't have to do that math again.
| | 10:23 | I can then make variations on this template
by going to the Master page, going to Layout >
| | 10:28 | Margins and Columns and just
changing this say to 12, click OK.
| | 10:37 | Let's just verify that I am still dealing with 940
pixels across here and 960 across here, that I am.
| | 10:46 | I don't want those lines in my
document, so I am going to delete them.
| | 10:50 | I am going to go back to the Document page
before I save and choose File > Save As, in
| | 10:57 | InDesign CS6 template, and I'll call
this one 960grid-12col and click Save.
| | 11:04 | I am going to close this.
| | 11:06 | I'm going to create a new document from that
template that I just created, and I am going
| | 11:10 | to change the parameters of the page and
show you how this grid adapts and why I put that
| | 11:15 | line in there in the first place.
| | 11:17 | If I am designing a page where I am showing
content that is really deep--what a long article
| | 11:23 | looks like, say on a magazine site or
something--and I need a much longer and more vertical
| | 11:29 | page. I may need to switch to the Page tool,
select this page, and then change its Height
| | 11:37 | to say maybe 2000 pixels. And I hit Enter,
the Page Size changes, I'll switch off of
| | 11:43 | the Page tool, and I'll Zoom to Fit in Window.
| | 11:48 | And you can see I have got a much deeper page,
but my grid is preserved, and I have this
| | 11:53 | guideline here that's showing me what I'm
going to see initially in the browser window
| | 11:58 | before I start scrolling down.
| | 12:00 | So once you've created these templates, keep
in mind that even if you're going to be working
| | 12:04 | on pages that are vertically deeper than
say 1024x768, you can start with one of these
| | 12:11 | templates and just extend the depth
of the page and maintain your grid.
| | 12:15 | So whenever you're designing pages for the web,
it's extremely helpful to have that underlying
| | 12:19 | grid structure to rely on.
| | 12:21 | Saving your commonly used grids as InDesign
templates lets you get started on your design
| | 12:26 | process without having to repeat
the grid set up steps every time.
| | 12:29 | It may even make the development process faster.
| | 12:33 | Grid systems like this are used by many
developers to divide up web pages using CSS, but it's
| | 12:38 | always a good idea to talk to your
developer upfront if you can to see if working with
| | 12:42 | this method is right for
how he or she works as well.
| | Collapse this transcript |
| Using master pages| 00:00 | One of InDesign's most powerful and useful
print features is as powerful, if not more,
| | 00:05 | for web design. Because most websites share
consistent header and navigational elements
| | 00:10 | across every page on the site, placing
those elements on an InDesign Master page allows
| | 00:15 | you to quickly create additional pages with
all of those repetitive items and then to
| | 00:19 | modify a header or a footer or navigation scheme
and have it applied to all of your document pages.
| | 00:26 | In this layout, I've got the basic structure
of a web page, that's fairly far along, it's
| | 00:32 | got branding at the top, it's got a navigation
bar, space for hero image at the top, a content
| | 00:39 | well, sidebar area, and a footer. And I'm ready
to start seeing how my individual page content
| | 00:47 | layers on top of this basic site structure.
| | 00:51 | At the moment, everything that I've done so far,
I've done on this first page of the document,
| | 00:56 | an actual document page.
| | 00:58 | So it's not a master page, because that's
not where I tend to start working in layout,
| | 01:03 | but it's time for me to move it to a master page,
and there's a couple of ways that I can do this.
| | 01:08 | I can certainly select everything on
the page and copy it to the clipboard.
| | 01:13 | But I just want to point out
one potential problem there.
| | 01:16 | In a Layers panel, I've got all of my
content broken out across various layers.
| | 01:23 | My nav bar, my header and footer, my hero
image content, and backgrounds for organizational
| | 01:27 | purposes for myself, and I want to
preserve that when I put it on the master page.
| | 01:33 | In order to keep that layering, I need to
make sure that an option that's off by default
| | 01:37 | in InDesign gets turned on.
| | 01:39 | So from the Layers Panel menu, I want to make
sure that Paste Remembers Layers is selected.
| | 01:44 | It's off here by default, but I'll click and
release and then when I go back you can see
| | 01:49 | the check mark is on.
| | 01:51 | So now everything that I copy when I paste it
back in it's going to go on the appropriate layer.
| | 01:57 | So I'll go the Pages panel now, I've copied
all the content to the clipboard, I'm going
| | 02:02 | to go to my Master page, and I'm going to
choose Edit, Paste in Place, everything goes
| | 02:09 | back on the page if I look in the Layers panel.
| | 02:12 | All of these layers show the content is on
them, and I can see from the different colored
| | 02:16 | guides that my layering has been preserved.
| | 02:21 | I'll go back to the Pages panel, and now, if
I go to this document page because I copied
| | 02:25 | this content I can still select on the page
but if I delete it you can see that the master
| | 02:32 | copy version of it remains on the
page, none of which is selectable.
| | 02:36 | If I hit Command+A or Ctrl+A on Windows to
select all, I can't actually select anything.
| | 02:42 | Everything on this document page is just a
reflection of what's on this master page.
| | 02:46 | I'm going to undo that copy and paste method
and get myself back to where I had everything
| | 02:51 | on document page and show you another method
for taking all of your content from a document
| | 02:57 | page and making a master out of it.
| | 02:59 | And this works great if everything on your
page, like I have here, is destined to show
| | 03:04 | up on that master page. If you have a mix of
items that belong on the individual document
| | 03:09 | page and some things that belong on a master
page, then the copy and paste method is probably
| | 03:14 | going to be what you need, because you'll
need to individually select some of that page
| | 03:17 | content, but I want everything
here to become a master page.
| | 03:21 | So the easiest way to do that with the page
still selected in the Pages panel is to go
| | 03:25 | to the pages Panel menu to Master Pages
and choose Save as Master and a new master, B,
| | 03:34 | is created in this document.
| | 03:36 | My document page here is still based on master
A, which has nothing on it, and this new master
| | 03:43 | B is populated with all of the objects and
content and elements that I want in my layout.
| | 03:50 | So I can delete this Master A page--it'll
warn me that it's applied to a page but that's
| | 03:57 | not problem for me.
| | 03:59 | Now you can see that my first page of the
document has the master none applied because
| | 04:03 | I've deleted the master that was applied to it.
| | 04:08 | If I go to the document page I can now
select all of this content and delete it and then
| | 04:15 | apply the Master B.
| | 04:16 | page by simply dragging it from the
Masters area of the pages panel over the document
| | 04:22 | page, and now I've applied that master.
| | 04:24 | And if I create a new page or insert a new
page into this document, I can choose that
| | 04:30 | Master page, and that page also has all
the recurring page elements that I want.
| | 04:37 | So once you've reached a point in your layout
when repeating elements like a header, navigation,
| | 04:41 | footer, and the different areas you've split
up for content, sidebars, and that sort of
| | 04:46 | thing are far enough along to try out with
unique page content, InDesign's master pages
| | 04:51 | will be one of the most effective ways to roll out
those standard design elements across multiple pages.
| | Collapse this transcript |
| A note about working with exact pixel dimensions| 00:00 | When you're working in print, you have a lot
of flexibility to reposition objects on the
| | 00:04 | page, and place them pretty much wherever
you want and resize objects without paying
| | 00:09 | a lot of attention to how
exact their proportions are.
| | 00:13 | On the web, you don't really
have that kind of flexibility.
| | 00:16 | And let me show you what I mean.
| | 00:18 | This logo in the top portion of this web
page is exactly 160 pixels by 150 pixels.
| | 00:23 | If I start scaling this up--just doing it loosely
based on eyeballing it--I can get a measurement
| | 00:30 | something like this which is an even value
in width, but a fraction of a pixel in height.
| | 00:37 | And unfortunately, there's no such thing as
a fraction of a pixel when you're translating
| | 00:41 | your work from the web.
Let me show you what I mean.
| | 00:44 | With this object selected I'll copy it to the
Clipboard, and then I'll switch to Photoshop,
| | 00:49 | and I'll create a new document.
| | 00:51 | And you'll notice that this new document is
in exact pixel dimensions, 207x194 without
| | 00:58 | that fractional amount that I had in
InDesign, which means it's not an exact match.
| | 01:03 | If I click OK, and I paste that in, it may
look initially fine, but it's actually clipped
| | 01:08 | off a piece of that image.
| | 01:11 | Everything for the web is based in pixels, and
there is simply no such thing as a fraction of a pixel.
| | 01:18 | Even though InDesign will let you set
something up that way, it's not going to translate when
| | 01:23 | you rasterize this page, hand it off to a
developer, and try to give them exact dimensions
| | 01:27 | for things, you're just not
going to have those exact dimensions.
| | 01:31 | So as you're working on your web layout and
in InDesign, you want make sure that you keep
| | 01:35 | an eye on the values in the X and You
coordinates and the Width and Height in the Control panel
| | 01:41 | to be sure that they are exact pixel values,
not fractions of a pixel which are only going
| | 01:46 | to create problems for you later on.
| | Collapse this transcript |
|
|
2. Working with Type and Type StylesPrint vs. web: Points and pixels, styles and CSS| 00:00 | Probably the most frustrating adjustment
for print designers to contend with on the web
| | 00:04 | is their limited amount of typographic control.
| | 00:07 | Early on, web typography was limited to a
small handful of less than desirable typefaces
| | 00:13 | that were common across all operating
systems. With the rise of web fonts, that's changing.
| | 00:18 | However, it's still entirely within the
user's purview to change the size of that font, or
| | 00:23 | resize the browser window to alter the
width of the column in which the type appears.
| | 00:28 | Instead of deciding for the reader what the
optimal experience for an article's body text
| | 00:32 | or a sidebar should be, we can only get them
part of the way there, making the best decisions
| | 00:37 | we have control over and considering how scalable
our typographic choices are within certain tolerances.
| | 00:44 | In Print, type is defined in points,
a fixed value measurement system.
| | 00:49 | On the web, type can be defined either in
pixels--which is technically a fixed value
| | 00:54 | but subject to how large a pixel is on a
given screen--or in a relative value called an em.
| | 01:01 | Type defined as pixels is very
similar to type defined in points.
| | 01:04 | Yet it's still subject to the readers
scaling whims and the resolution of the screen.
| | 01:09 | An em on the other hand is a relative unit
of measurement established around a base size
| | 01:14 | for all of the type on the page.
| | 01:17 | Values for body copy, headlines, captions,
et cetera, are defined relative to the base
| | 01:22 | size which is 1 em.
| | 01:24 | With pixels, you might want body copy defined as 15
pixels and an h1 heading at twice that size or 30 pixels.
| | 01:32 | With ems you define that heading as 2
ems, twice the size as the base font.
| | 01:37 | The benefit of ems, in that instance, is
that regardless of what the reader adjusts his
| | 01:41 | or her type size to be in a browser, the
relative proportions of headline to body, copy to caption,
| | 01:47 | and so on are maintained, because as one
gets larger or smaller, so do the others.
| | 01:52 | Personally, I'd love to see this ability to
define type relative to a base size extend
| | 01:57 | to InDesign to allow truly flexible layout
possibilities and more accurate print or web
| | 02:02 | or print to EPUB work flows.
| | 02:05 | Unfortunately, we're not quite there yet,
so we still need to work in exact units as
| | 02:09 | we create our web pages in InDesign.
| | 02:12 | In this chapter, we'll look at the InDesign Type
Tools that will allow you to set up hierarchical
| | 02:16 | styles that conform to the
organization of a well structured web page.
| | Collapse this transcript |
| Using web fonts| 00:00 | One of the most frustrating aspects of the
web for print designers has always been their
| | 00:04 | limited level of typographic control.
| | 00:06 | Because browsers use default system fonts,
designers were relegated to very little in
| | 00:11 | the way of finesse and
sophistication where type was concerned.
| | 00:14 | But that's quickly changing with the adoption
of web fonts, which allow more and more elegant
| | 00:19 | looking options than ever before.
Let's take a look at a few examples.
| | 00:22 | I have got The New Yorker website up here
and in addition to their own signature typeface
| | 00:28 | for their logo, which is used throughout the
site, they have other typography on the page
| | 00:33 | that really breaks from the sort of thing
you're used to seeing on the web all the time.
| | 00:38 | In the past, achieving this kind of look
and feel for typography required turning that
| | 00:43 | type into an image, a rasterized
version of the text as you set it.
| | 00:48 | The problem with this is it was a static image,
and it wasn't scalable if somebody increased
| | 00:53 | their font size that image
would not increase along with it.
| | 00:57 | And the other problem is it's not searchable,
not on this site and not by search engines.
| | 01:02 | So it's not good SEO practice to use
images of text if it can be avoided.
| | 01:07 | But you'll notice that all of this custom
typography that you see, including the signature
| | 01:11 | New Yorker font is fully selectable.
| | 01:15 | If I were to copy this to the Clipboard and
then just paste it anywhere, there it is it's
| | 01:20 | selectable text, and that applies to everything
here, all of this text however custom it looks
| | 01:27 | is fully selectable, fully searchable text.
| | 01:31 | The same thing is true on
a lot of sites these days.
| | 01:33 | This Food Sense site uses some very nice
clean understated typography that is searchable,
| | 01:42 | selectable, and also scalable.
| | 01:43 | If I increase the size of the font in this
page, just by using my standard browser controls--
| | 01:51 | it may break the page layout a little bit
because I am going a bit too far--but you'll
| | 01:55 | notice that that type completely scales up
because it is editable text, and it also looks
| | 02:01 | great, and it's not the usual type
that you see on every other website.
| | 02:05 | This is made possible through a number of
different services and a number of different
| | 02:09 | ways. One of which is Typekit, which was
recently bought by Adobe, and contains a huge number
| | 02:15 | of fonts, many of them Adobe fonts, many
licensed by other outside font foundries.
| | 02:21 | And sites like Typekit allow you to
register to use them and license these fonts up to
| | 02:28 | certain limits for use on your website.
| | 02:30 | You can see that everything here is also fully
selectable and they have a great many fonts to choose from.
| | 02:37 | If I go to Browse Fonts, I can choose
something say from their Decorative grouping and they
| | 02:43 | have it really nicely organized here on Typekit.
| | 02:46 | If I want to look at this typeface, even the
samples that they show me are fully selectable,
| | 02:52 | type specimens, every line of it is selectable text,
and this is all being rendered live on the web.
| | 02:59 | Where Typekit is concerned and some others,
the only drawback is the fonts are delivered
| | 03:03 | up to the browser via JavaScript, and you
can't replicate that in InDesign. InDesign
| | 03:09 | is limited to using the
fonts that are on your machine.
| | 03:12 | So while you can't use Typekit fonts, there
are web fonts available for download, some
| | 03:17 | of which are at Google's Web Fonts page,
and we are actually going to download a couple
| | 03:22 | of these for the website project
that we are going to be working on.
| | 03:25 | One of the fonts that I am
looking for is Droid Sans.
| | 03:30 | So I can just search for that here.
| | 03:31 | It shows me that there is Droid Sans and Droid
Sans Mono, and I can click to see all the styles.
| | 03:36 | This comes in Normal and Bold.
| | 03:39 | And if this is a font that I want, I can add
it to my collection, and this shows me I have
| | 03:43 | one Font Family in my collection.
| | 03:45 | And the other font that I am looking for--because I
happen to know what I'm looking for--is called Bitter.
| | 03:52 | I can click to see all of the styles for that
font, and this particular font has a Normal,
| | 03:57 | a Bold, and a Normal Italic. I like this font.
| | 04:00 | I want to add it to my
collection. So I'll do that.
| | 04:04 | It's showing now that I have two font families
in my collection, and when I'm finished gathering
| | 04:08 | the fonts that I want, I can download them.
| | 04:11 | Now I happen to know what I was looking for,
but you can also browse through the site based
| | 04:15 | on category, Serif, Sans Serif, Display,
Handwriting, you can narrow it down based on Thickness,
| | 04:22 | Thinness and any number of other
criteria to get what you are looking for.
| | 04:25 | I have already got what I want selected,
so I'm going to download this collection.
| | 04:30 | I'm told that I don't need to download the
font to use it on my web page, and I understand
| | 04:35 | that, but I'm using this for another purpose.
I want to use these in InDesign.
| | 04:39 | So I am going to click Download the font
families in your collection as a zip file--downloads
| | 04:44 | quite quickly--and it's
decompressed in my Downloads folder.
| | 04:49 | There is a folder here called Fonts and
inside that, there's Bitter and Droids Sans along
| | 04:57 | with their licensing information
which is a very important consideration.
| | 05:00 | Before you're using a font, you want to be
sure that you have the appropriate license
| | 05:04 | or secure the appropriate
license to deliver that font.
| | 05:07 | These Google fonts are freely
distributable under a license that allows that.
| | 05:13 | So I am comfortable using these both for
my layout and ultimately for my website.
| | 05:18 | Now you could take these font folders, and
you could add them to the appropriate location
| | 05:21 | on your system whether it's Mac or Windows,
use a font manager to load them up or you
| | 05:27 | could go a simpler route in InDesign and make
those fonts available only to individual documents.
| | 05:33 | I am actually going to take these two folders,
and I'm going to move them to my desktop.
| | 05:40 | I'll close this, and I'll exit out of my
browser, and I'll go back to InDesign, and I'm going
| | 05:47 | to create a new document.
| | 05:49 | It's going to be a web document, and
I am just going to make this 1024x768.
| | 05:55 | I'll click OK, and if I draw out a text
frame here, and I just fill it with placeholder
| | 06:03 | text, let's zoom in a little,
so we can see it better.
| | 06:09 | If I select this text, I'm not going to
find either of those two fonts, Bitter, which I
| | 06:15 | should see about here, but I don't,
or Droid Sans in my font menu.
| | 06:23 | Because they're not loaded the way you wouldn't
load a normal font, at least I haven't done that.
| | 06:27 | But I am going to save this file also to
my Desktop, and I'll call it font_test.indd.
| | 06:34 | You can see that Bitter and
Droid Sans are also on the Desktop.
| | 06:38 | I'll save it and to make these fonts
available to this InDesign document, all I need to do
| | 06:43 | is put those fonts that I saved on my
desktop into a folder called Document Fonts.
| | 06:48 | So I am going to go to the Finder, to the
Desktop, and create a new folder called Document Fonts.
| | 06:56 | I am going to take both the Droids Sans
folder and the Bitter folder and drag them into the
| | 07:02 | Document Fonts folder.
| | 07:05 | Because this font_test InDesign file is in
the same directory with this Document Fonts
| | 07:09 | folder, any fonts within that Document Fonts
folder are available to this InDesign document
| | 07:15 | and any other InDesign document in this
directory, but not to any other InDesign document that
| | 07:21 | isn't in this directory.
| | 07:23 | So this makes the fonts available without me
necessarily having to install them on my system.
| | 07:29 | Now if I go back to the InDesign document,
at the moment I'm still not going to find
| | 07:33 | those fonts in this list because InDesign
wasn't aware of the existence of the Document
| | 07:40 | Fonts folder when it was open. So I need
to close this file, then reopen it, and then
| | 07:49 | I'll select some text here, and I'll go to
the Font menu in the Control panel and right
| | 07:54 | up at the top of the list under Recently Used
Fonts which is this top grouping, I get document
| | 08:00 | specific fonts, these are the fonts that
are available to this document because of that
| | 08:05 | proximity of this InDesign
file to the Document Fonts folder.
| | 08:09 | So now I can actually apply this web font
that I haven't technically installed in my
| | 08:15 | system, I've only made it available to this
document by placing it in that folder in the
| | 08:20 | same directory, and I can
start using this web font here.
| | 08:24 | Not every web font available for use on a
website is going to be available for you to
| | 08:29 | use in InDesign in this manner, but
many will, like these Google Fonts.
| | 08:33 | So it's worth trying out to see if you
can find a typeface that works for you.
| | 08:38 | Just be sure to pay attention to any
licensing restrictions the same way you would if you
| | 08:41 | were using a font in a print layout.
| | Collapse this transcript |
| Using styles to mimic CSS behavior| 00:00 | However different print in the web may be,
both are built on the use of styles to manage
| | 00:04 | text formatting. On the web it's cascading
style sheets for CSS, and in InDesign it's
| | 00:10 | Paragraph and Character Styles.
| | 00:12 | By using InDesign Styles in a manner similar
to how CSS works, you can both speed up your
| | 00:17 | work and start to become more
accustomed to style behavior on the web.
| | 00:22 | I've got a layout in progress here and
even though it's not finished, I want to start
| | 00:26 | putting in some of the main content in this
content area over here on the left and playing
| | 00:31 | around with its text formatting.
| | 00:33 | The first thing I am going to do is select
this first paragraph of body copy, not the
| | 00:38 | heading, and I am going to change the
typeface to one of my available document fonts, these
| | 00:44 | are web fonts that I
downloaded in a prior movie.
| | 00:48 | For this body copy, I'm going to use Droid Sans >
Regular, and that's now applied to that paragraph.
| | 00:55 | It's a little small, you'll find that your
body copy fonts on the web are going to need
| | 00:59 | to be bigger than the body copy
fonts that you typically use in print.
| | 01:04 | So I'm going to bump this up from 12 to 16
and give it a leading of 22 points or rather
| | 01:11 | 22 pixels, and that's a decent
look for this paragraph, I like that.
| | 01:17 | So with some text in that paragraph selected,
I'll go to the Paragraph Styles panel and
| | 01:23 | create a new paragraph style.
| | 01:26 | And as I name my styles in this document,
I am going to start adhering to a few web
| | 01:30 | conventions or at least stay in
close to them wherever possible.
| | 01:33 | A basic body copy paragraph on the web would
typically be tagged with a p tag, it's a generic
| | 01:39 | tag indicating the start of a paragraph.
| | 01:42 | So I am just going to call this p, but I am
going to call it p_main because it's a paragraph
| | 01:48 | in my main content area.
| | 01:50 | I am going to make sure that Apply Style to
Selection is on so that it gets applied to
| | 01:55 | the text that I have selected in the document
at the moment, and I'm just going to click OK.
| | 02:00 | So now this whole paragraph has p_main applied
to it, and I am going to select my other body
| | 02:05 | copy paragraphs like this one here and
apply the same style to all of those.
| | 02:16 | So now I have got consistent
formatting applied to all of those styles.
| | 02:20 | Now I am going to move on to my headings, I
am going to select this top heading up here
| | 02:24 | which would be my Level 1 heading if I'm just
looking at this from an organizational standpoint.
| | 02:30 | And I'm going to choose Bitter > Bold--one
of my other downloaded web fonts--and I'm
| | 02:38 | going to bump this up to about 32
pixels and make the leading about 36.
| | 02:45 | I am going to go to the Swatches
panel and change the color for this.
| | 02:49 | I am going to give it this purple color, which
is defined here in the Swatches panel already,
| | 02:54 | and you will notice that it's named with a
hexadecimal color value, which is appropriate for web-work.
| | 02:59 | And I'll go to the Paragraph Styles panel
again, create a new style for this and call
| | 03:05 | it h1 which is a Level 1 heading in web terms.
| | 03:10 | And I'll actually call this h1_main because
this is what a Level 1 heading will look like
| | 03:15 | in my main content area.
| | 03:17 | On the web, that h1 tag may be used
somewhere else, but in the context of a sidebar, it
| | 03:22 | might have a different appearance.
| | 03:24 | Apply Style to Selection is on so it's
going to be applied to that, and I'll click OK.
| | 03:29 | So now I've got a Level 1 heading
and basic body copy paragraph style.
| | 03:34 | I am going to select this next heading
down here, which is really a subheading, it's a
| | 03:38 | Level 2 heading, But I am going to
first apply the h1_main style to it.
| | 03:45 | It's bigger than I want, and it doesn't
back up that Level 1, Level 2 hierarchy that I
| | 03:50 | am trying to establish.
| | 03:52 | But it does make a connection between the h1 style,
and this style when I start to vary its appearance.
| | 04:00 | So I'm going to knock this one down
to 24 points or 24 pixels over 26.
| | 04:07 | I'm going to remove the bolding off of this.
| | 04:12 | And I am going to change its color in
the Swatches panel to this Gray color.
| | 04:18 | So now that's what my Level 2 headings will
look like, however I still have h1_main
| | 04:26 | applied to this with overrides, and you'll
see these overrides are defined when I hover
| | 04:30 | over this. My color has changed, my size has
changed, and my leading has changed, everything
| | 04:35 | else about these two styles is still consistent.
| | 04:39 | So I am going to create a New Paragraph
Style based on the selection, and you will notice
| | 04:44 | that automatically it's based on h1_main, which
means there's a connection established between
| | 04:50 | this new style I am creating and the style
from which I deviated in the first place.
| | 04:57 | Down here in the Style Settings it shows me
h1_main plus all of the different variations
| | 05:02 | that I have applied.
| | 05:03 | This is precisely how
cascading style sheets work on the web.
| | 05:08 | You define variations of a style
based solely on their differences.
| | 05:14 | Unless you specify a difference, it considers
everything else to be inherited from the style
| | 05:19 | that it's originally based on.
| | 05:21 | It's a parent-child relationship, in this
case, h1_main is the parent style and my new
| | 05:27 | style which I'll call h2_main
is the child style.
| | 05:32 | I'll click OK, and now let's take a look at this
relationship and see exactly what I've set up here.
| | 05:39 | If I now change this font from Bitter to
Droid Sans > Bold and for my h1_main style, I'll
| | 05:48 | choose Redefine Style.
| | 05:52 | You'll notice that the entire paragraph has
been reformatted with that new style definition.
| | 05:58 | And down here my h2_main
style has also been changed.
| | 06:02 | And it's been changed with the common
attribute that they both shared, which is the typeface.
| | 06:08 | And what's changed about this h2 text is
that it's Droid Sans but since my h2 style was
| | 06:15 | not bold, it's not Droid Sans bold, it's
Droid Sans regular and since my color was changed,
| | 06:21 | it doesn't change to purple.
| | 06:24 | So the things that were unique about this
child style, stay unique and the things were
| | 06:29 | shared, stay shared between the two typefaces.
| | 06:33 | So if I go back, and I do that change again,
make this Bitter > Bold and redefine the style
| | 06:42 | that formatting is applied here and here as well, but
it's still not bold, and it's still a different color.
| | 06:49 | This kind of passing down from parent style
to child style, or cascading, is at the heart
| | 06:55 | of cascading style sheets on the web and
the fact that InDesign allows you to base one
| | 07:00 | style on another style and then hand down
attributes from one to the other enables you
| | 07:05 | to work in a very web-like manner.
| | 07:07 | If you're not already doing this in print, shame on
you, you should be because it's a great way to work.
| | 07:12 | But when you're starting to work on the web, it
really tunes you into exactly how CSS is intended to work.
| | 07:19 | So even though they're implemented differently,
there's more than enough common ground between
| | 07:23 | InDesign Styles and CSS to make building a
layout around well structured InDesign styles
| | 07:28 | a worthwhile goal and an
efficient path to web design.
| | Collapse this transcript |
| Organizing style groups based on site content| 00:00 | When you work in InDesign it's typical to name
every one of your styles distinctly, differently.
| | 00:06 | On the web however, styles, or rather the
content that you mark up with HTML tags, tends to have
| | 00:13 | fairly standard tagging. For
instance, paragraph or h1, h2, and h3.
| | 00:20 | In InDesign, it's typical to name every one of
your different styles with a unique paragraph
| | 00:26 | or character style name.
| | 00:29 | On the web, it's more common to have standard
HTML tags around content, put them into different
| | 00:35 | distinct regions or containers on the page,
and apply a div tag to them, then define what
| | 00:42 | a paragraph and what a heading and what any
other standard text element looks like based
| | 00:48 | on the fact that it's in that
div or in that part of the page.
| | 00:52 | There is no exact equivalent to this in InDesign.
| | 00:55 | There's no way to have something contextually
reformat just by moving it from one frame into another.
| | 01:02 | But before you get started on a web project,
one approach to consider in creating your
| | 01:07 | basic styles and some style relationships
is to break them out into separate groups
| | 01:13 | that correspond to the
different regions of your page.
| | 01:15 | In this example, I've got my left side, which is my
main content area, that would be one div on the web.
| | 01:23 | And my right side which is my
sidebar which would be a different div.
| | 01:27 | In each, I could have many heading levels
at a minimum I'd have probably three and a
| | 01:32 | basic paragraph tag.
| | 01:34 | So let's see, how I could create some of
those styles for each of these parts of the page
| | 01:39 | without actually defining
any of their attributes.
| | 01:41 | First, I'll Option-click,
or Alt-click on Windows.
| | 01:45 | The Create New Style button at the
bottom of the paragraph styles panel.
| | 01:49 | In the new paragraph style dialog I'm going
to create a style and just name it p, it will
| | 01:54 | be my basic paragraph style, it's based on
no paragraph style, and I'm going to define
| | 02:00 | absolutely nothing about this.
| | 02:03 | I'll do that later, I just
want to build a basic style.
| | 02:07 | I'll click okay, and I'll Option-click that
same button again and create a style called h1.
| | 02:14 | Again, defining nothing about how it looks.
| | 02:18 | I'll click OK, I'll
Option-click that button again.
| | 02:22 | Create a style called h2 but the only thing
I'm going to define here is a relationship
| | 02:27 | between this style and the h1 style.
| | 02:31 | I want to connect them by
basing h2 on h1, and I'll click OK.
| | 02:37 | I'll Option-click again, create a style
called h3, base that also on h1, everything for the
| | 02:45 | headings gets passed down
from the top level heading.
| | 02:49 | They can very dramatically once I start defining
them, but they will start from h1, and I'll click OK.
| | 02:55 | I now have the four basic styles
you'll ever find on any web page.
| | 03:00 | I'm going to select all four and from the
Panel menu, choose New Group from Styles.
| | 03:08 | I'll call this group main because this is
the group of core styles that are going to
| | 03:13 | apply to my main content well,
and now I have that style group.
| | 03:19 | I'll select a group, right-click, and choose
Duplicate Style Group, and I'll rename this
| | 03:25 | right in the panel as sidebar.
| | 03:30 | I'm going to open up this group and take a
look at the definition of the h2 style, which
| | 03:36 | when I created it for
this group was based on h1.
| | 03:40 | Now that I have an h2 copy in the new
group, let's see what it's based on.
| | 03:45 | I'll right-click choose Edit "h2", and
this h2 which is in the sidebar group has been
| | 03:54 | re-associated with the h1
that's also in the sidebar group.
| | 03:59 | InDesign does this for you automatically,
and that's one of the benefits of creating
| | 04:03 | the undefined styles upfront, creating
duplicate groups, and having of all those associations
| | 04:09 | established for you without
having to do it over and over.
| | 04:13 | Depending on how many regions I know there are
on my web page, I can create as many variations
| | 04:18 | of the style group as possible and InDesign
will keep those connections within that group.
| | 04:23 | Once I'm ready to start actually defining
the styles for my main area, and my sidebar area.
| | 04:29 | My basic styles are all
there waiting for me to do so.
| | Collapse this transcript |
|
|
3. Working with Objects and ImagesPrint vs. web: Working with object styles and divs| 00:00 | In an InDesign Print Layout, we
designers work mostly with objects called Frames.
| | 00:05 | They might be text frames, which we populate
with editable text, graphic frames that act
| | 00:09 | as containers for illustrations or photos, or
drawn objects, which are really just irregularly
| | 00:14 | shaped frames, and can
also contain text or images.
| | 00:18 | In Web Design, the containers for our text
and graphics are called divs, which define
| | 00:23 | divisions or sections of page content.
| | 00:26 | Each div is essentially a box, and has a
relationship with the overall grid structure of the page,
| | 00:32 | and the other divs in the layout.
| | 00:34 | But divs are much more versatile
than any kind of InDesign frame.
| | 00:38 | A div's definition can determine the
appearance of the box the way InDesign's object styles
| | 00:43 | do, the formatting of all text within it
which InDesign handles separately with paragraph
| | 00:49 | and character styles as well as the geometry
or physical dimensions of that box, and its
| | 00:55 | alignment relative to the page
or to the other divs on that page.
| | 01:00 | For all its power and flexibility, InDesign
has no exact equivalent to what a div can do.
| | 01:06 | But in this chapter, we'll look at how a
handful of InDesign features together can help you
| | 01:11 | simulate much of what a div can do and help
you quickly set up page elements and try out
| | 01:16 | design alternatives in a way
very similar to a div on the web.
| | Collapse this transcript |
| Making InDesign frames work like divs| 00:00 | InDesign's content is contained in frames and
web page content is typically contained in a div.
| | 00:06 | Before you start designing a web layout with
InDesign, it's a good idea to understand the
| | 00:11 | similarities and
differences between divs and frames.
| | 00:15 | Pages on the web are constructed
using CSS and CSS is based on a box model.
| | 00:21 | While you can describe many things about
that box, there are few major attributes of the
| | 00:27 | CSS box model to take into consideration.
| | 00:30 | One is that there are three
distinct areas for any box in CSS.
| | 00:35 | There is the content area, which is
where your image or text would go.
| | 00:41 | Around that you can have padding, which is
indicated here in blue, you can apply a border
| | 00:46 | to that box, which is applied outside of
the padding if you have any, and then you can
| | 00:52 | also apply a margin, which is as gray area
here, which is the distance between the object
| | 00:58 | and either the page edge
or another give on the page.
| | 01:02 | All of these different attributes, Margin,
Border, and Padding get added on to the overall
| | 01:07 | size of the content area.
| | 01:10 | So if I click this frame here, which is
really just a simulation of the box model, I can
| | 01:15 | see in the control panel that it's
120 pixels Wide by a 120 pixels High.
| | 01:21 | Outside of that I have this box to indicate
the Padding, and that's 164x164. So on each
| | 01:28 | side this frame is 22 pixels greater in size
than this frame, which means I've got a Padding
| | 01:36 | of 22 pixels around this.
So the entire area taken up becomes 164x164.
| | 01:44 | Outside of this padding there is a 2 point
Stroke or 2 pixel Stroke, that also gets added
| | 01:50 | on, in addition to the area defined for content
and then, outside of that this is 200 pixel by 200
| | 01:58 | pixel box which is 40 pixels greater on
each side than the actual 120x120 content.
| | 02:07 | This frame represents my margin, and that's the
distance between this box and any box around it.
| | 02:13 | So everything about a box in CSS that you
define adds to the overall size of that box.
| | 02:19 | This div could be described as being 120 pixels,
but as soon as I give it a padding that gets
| | 02:26 | added on top of that 120, and it becomes larger,
the border adds more, the margin adds more.
| | 02:33 | In InDesign things work differently, but
there are equivalents to the Border, the Padding,
| | 02:39 | and the Margin in InDesign on any frame
that you would create, in this instance I have
| | 02:44 | a text frame. The area inside of the text
inset here is my content that's the equivalent
| | 02:50 | of this box right here in white.
| | 02:53 | In this particular frame there is an inset
that provides a cushion around the text, between
| | 02:58 | it and the frame edge that's the
equivalent of the CSS box model's Padding attribute.
| | 03:04 | On that I have a Stroke which is the
equivalent of a Border in CSS and then around the whole
| | 03:10 | frame I have Text Wrap applied, and that
would be the equivalent of a Margin. One of the
| | 03:15 | closest thing you're going to get to it in
InDesign, Text Wrap is something that will
| | 03:19 | push away other content and create a
distance between in InDesign, and that's the closest
| | 03:25 | InDesign equivalent you'll get to the
margin property of a box or a div in CSS.
| | 03:31 | The other distinct difference between how
InDesign frames behave in the CSS box model
| | 03:36 | is that adding attributes like Text and setting
Borders are not necessarily an additive process.
| | 03:42 | They don't actually increase the size of the
object itself, they get subtracted from the
| | 03:49 | size of the object.
| | 03:50 | So I can create a 380 pixel frame like I
have here and apply a text inset, and that text
| | 03:56 | inset essentially gets subtracted from the
380 pixel width and my content area inside
| | 04:02 | becomes smaller. CSS works
the opposite, it builds outward.
| | 04:08 | The same goes for my Stroke, the only
thing that really builds outward in InDesign is
| | 04:12 | the text wrap, that's the only
thing that behaves quite like CSS does.
| | 04:16 | Let's take a look at this in
a more practical application.
| | 04:20 | In this web Layout in progress I've got a main
content area, here, that's defined all in one Text Frame.
| | 04:26 | This Text Frame is 640 pixels wide, but
when I look at some of the different attributes
| | 04:31 | of this text frame, by hitting Command+B or
Ctrl+B on Windows, to open the Text Frame Options
| | 04:36 | dialog, you can see that I've got a 20-pixel
Inset on all four sides of this frame.
| | 04:44 | So my frame is 640 pixels, but I'm
subtracting 20 pixels on either side, and you can see
| | 04:50 | in my Column information that the width
of my column is defined as 600 pixels.
| | 04:55 | So I have a 600 pixel wide content area,
but I have a 640-pixel wide frame, and I click
| | 05:02 | OK and get out of that, and let's take a look
at what happens if I had what would be a border
| | 05:07 | in CSS by adding a stroke in InDesign. I'm
going to add a, let's do a nice big 10 point
| | 05:15 | stroke, so it's painfully obvious what's
going on here, and I'm going to zoom in a bit.
| | 05:20 | So I've added a 10 point Stroke all the way
around which means 10 on the Left, 10 on the
| | 05:25 | Right, 10 Top and Bottom.
| | 05:28 | My original frame was 640 pixels, add 10
and 10 to that, and I should have a 660-pixel
| | 05:33 | frame, but I don't, I have a 650 pixel frame
because of the way InDesign draws strokes on an object.
| | 05:41 | By default, half of the stroke is drawn
outside the object and half is drawn inside.
| | 05:47 | So it's really splitting the difference, I'm
getting five points of this 10 point stroke
| | 05:51 | on the left and five points of the 10 point
stroke on the right added to the overall size.
| | 05:58 | Now if you're working along with these
exercise files or trying this out on your own files,
| | 06:03 | you might notice that when you add the stroke,
you don't get this exact change in the pixel width.
| | 06:09 | It could be that your preferences are
slightly different than mine and the option what you
| | 06:14 | can get in the Control Panel menu for
Dimensions Include Stroke Weight may be turned off.
| | 06:21 | When that's on, the actual Stroke Weight is
calculated in the overall size of the object.
| | 06:26 | When it's turned off, you can see here InDesign
is still telling me I have a 640 pixel object,
| | 06:32 | even though it's 650 pixels extending out here.
| | 06:36 | I like to keep this on, so I
know truly how large my object is.
| | 06:43 | This default InDesign behavior of drawing
strokes centered on the frame actually creates
| | 06:49 | problems with alignment too.
| | 06:50 | You can see I want my content area to
actually be all the way over here, but the way that
| | 06:56 | stroke was drawn, my stroke is actually
pushing out into this area of the page, and that's
| | 07:02 | not where I want things aligned.
| | 07:04 | So if I go to Window > Stroke, I can change
that attribute to either Align Stroke to Inside,
| | 07:14 | which pulls that stroke inside the object
and returns it to a 640 pixel width object,
| | 07:21 | or Align Stroke to Outside,
making it a 660 pixel object.
| | 07:28 | Aligning a stroke to the outside is the
closest thing to how a div behaves in CSS on the web,
| | 07:36 | that stroke is added to the
overall size of the object.
| | 07:39 | So if you're trying to work and think in web
terms, this might be a good setting for your
| | 07:44 | objects, as you create them and add strokes.
| | 07:47 | I now have an accurate picture of exactly
how large this frame is, and if I need to
| | 07:53 | keep it to 640 pixels, I can do that just
by changing it's size--I'll adjust it in the
| | 08:02 | control panel from the left--and keep 640-pixel
width, which is what I want, and actually align
| | 08:12 | this properly, because I've set the stroke
to be aligned to the outside of the frame.
| | 08:17 | And I have Dimensions Include Stroke Weight
checked, so it's telling me accurately the
| | 08:22 | physical size of this frame.
| | 08:24 | When I go back into the Text Frame Options,
you will notice however that my actual content
| | 08:29 | area is now 580, because 10 pixels have
been taken away on either side, where I used to
| | 08:36 | have 600 pixel Width for my column, I'm now
down 10 pixels because I've subtracted those
| | 08:44 | from what's available for
me inside of this frame.
| | 08:47 | So as you're designing, you want to keep an eye
on some of these measurements as you change things.
| | 08:52 | If you really need 600 pixel Width content area,
you might have to make some design adjustments,
| | 08:59 | you might have to opt to reduce your Inset
Spacing perhaps to 10 pixels all the way around.
| | 09:06 | So by making an adjustment to the Inset Spacing,
I get my 600 pixel area of live content preserved,
| | 09:13 | or you might opt to lose the stroke altogether and
go back to 20 pixel Inset Spacing and a Stroke of 0.
| | 09:22 | However, with the Align Stroke to Outside
setting applied to it, when I take away the
| | 09:27 | stroke, my frame actually gets smaller, so I
have to go back and make it 640 pixels Wide again.
| | 09:35 | So the upside of Aligning a Frame to the
Outside is that it behaves more like CSS.
| | 09:40 | The downside is that when you change that
you're actually changing the size of your
| | 09:46 | frame, and that might require additional
adjustments like I just had to make here.
| | 09:50 | The other option would be to Align a Stroke to
the Inside, let's say, we do another 10-point
| | 09:56 | stroke. I've maintained my 640-pixel Width,
I've got my 20 pixel Inset, but again, I've
| | 10:03 | affected my content area, and I have to make
a decision about what I want to preserve and
| | 10:08 | what I need to adjust.
| | 10:11 | But the benefit of Aligning a Stroke to the
Inside of the Frame is if I reduce the stroke
| | 10:16 | and size, it doesn't affect the size of my
frame, it only affects the size of my content
| | 10:22 | area inside, because it's actually
subtracting away space for that text.
| | 10:28 | While InDesign frames and CSS
divs behave quite differently.
| | 10:32 | There are adjustments you can make in
InDesign like ensuring that dimensions include Stroke
| | 10:37 | Weight is on and adjusting the Alignment of
your Stroke to either inside or outside more
| | 10:43 | properly approximate a divs behavior.
| | 10:45 | And when you're aware of the differences
between frames and divs, you can keep in mind the
| | 10:51 | Size of your content area, the Size of your
text Insets, and the Weight of your Strokes
| | 10:56 | as you work and design to make sure that
things remain aligned properly, that things have
| | 11:01 | the allotted amount of space that you are
going to want in the final web layout, and
| | 11:05 | to prevent surprises later down the road.
| | Collapse this transcript |
| Defining and using object styles| 00:00 | Styles on the web can
literally make or break a site.
| | 00:03 | Good CSS makes design changes far easier than
manual formatting and the same is true for InDesign.
| | 00:10 | Although InDesign styles and CSS, each have
their differences, the principle is the same.
| | 00:15 | The control of appearance and formatting from
a centrally define style for rapid application
| | 00:20 | to multiple objects.
| | 00:22 | InDesign does this with object styles, and
in this movie, we'll take a look at you can
| | 00:26 | take advantage of this
powerful feature in a web layout.
| | 00:29 | On this web page design, I have two frames over
here that I need to turn into boxes for sidebar links.
| | 00:37 | I have two different categories here,
I'll zoom in a little bit, so we can see it.
| | 00:41 | I've got Academic Links, which is a heading
under which I have a number of different links.
| | 00:47 | And then, Find out more which is another
heading, and there will be links under that as well.
| | 00:51 | I already have paragraph styles set up to format
this text, and let's take a quick look at those styles.
| | 00:59 | In the Paragraph Styles panel with my
cursor in this Academic Links text, I'm going to
| | 01:05 | click sidebar_menu_heading, and it
applies this rather elaborately formatted style.
| | 01:11 | Let me just take a moment to show you what's
going on in here and how I achieve this. I'll
| | 01:16 | right-click on sidebar_menu_heading and
choose Edit "sidebar_menu_heading" and take a look
| | 01:22 | at some of the formatting
that's going on in here.
| | 01:25 | First of all, I've already assigned what the
next style is going to be for this paragraph,
| | 01:29 | and we'll see how that works later.
| | 01:31 | I've indicated that this is going to be
followed by the sidebar_menu_links style, but this
| | 01:37 | stripped pattern behind the text
itself was achieved with Paragraph Rules.
| | 01:40 | There is a Rule Above that is solid in the
full strength orange color and a Rule Below
| | 01:48 | that is a Straight Hash pattern in the
slightly lighter orange color, and that lays on top
| | 01:55 | of the other rule, and they're positioned
so that they create a continuous single rule,
| | 02:00 | or at least it looks that way.
| | 02:03 | And each has a -12-pixel Inset on the left and the
right which is what's pushing outside of the frame.
| | 02:09 | As I modify the frame attributes that's going to
pull back inside, and we'll see that in a moment.
| | 02:15 | I'll click OK here, and now, I'm going to
select all of the text here and to take advantage
| | 02:20 | of that next style setting that's build in here,
I'm going to right-click on sidebar_menu_heading
| | 02:26 | in the Paragraph Styles panel, and choose
Apply "sidebar_menu_heading" then Next Style,
| | 02:32 | and it applies the heading followed by the
links style and then keeps using that link
| | 02:36 | style for the remainder
of the text in this frame.
| | 02:39 | This link style also, includes a Rule
Below setting that pokes outside the frame.
| | 02:44 | We'll adjust that in a moment, because I'm going
to start changing the attributes of this frame now.
| | 02:49 | The first is I am going to give this an
Inset so that my text isn't all flush left here,
| | 02:54 | and that these rules aren't poking outside.
| | 02:57 | So I'll hit Command+B or Ctrl+B on Windows
to open the Text Frame Options dialog, and
| | 03:03 | I'm going to make sure that keep all
settings the same is checked here, which it is and
| | 03:09 | give this a 12 pixel Inset, I'll click Preview,
so we can actually see that here and by insetting
| | 03:16 | the text 12 pixels, I compensate
for that 12 pixel push on these rules.
| | 03:23 | I'm not going to change anything here in
the Baseline Options, that's all I really need
| | 03:27 | to change in the Text Frame
Options at the moment, so I'll click OK.
| | 03:30 | Next, I'm going to change
the Fill Color for this frame.
| | 03:34 | I'm going to fill it with this sort of golden
yellow color, and that makes my text readable
| | 03:39 | and my rules pop out
between the individual links.
| | 03:44 | Now that I've got most of this frame the way I
want it, I'm going to lock all of these design
| | 03:49 | decisions into an Object Style.
| | 03:52 | With the object still selected, I'll go to
the Object Styles menu and from its panel
| | 03:57 | menu, I'll choose New Object Style.
I'll move this over here, so we can see it.
| | 04:02 | I'll also check Preview and Apply Style to
Selection so that once I save this style,
| | 04:08 | it will get applied to this object, and
I won't have to do that in another step.
| | 04:12 | First I'll name it, sidebar_menu_box, and
I'll call this sidebar_menu_box_yellow. And
| | 04:18 | because I had this frame selected when I
created the Object Style, all of the attributes of
| | 04:22 | this object have already been picked up
and added to the style definition, it's Fill,
| | 04:27 | matches what you see here, it's General Text
Frame Options, have the 12-pixel Inset that
| | 04:32 | I just added a moment ago, and everything,
with one exception has been built into the style.
| | 04:39 | The only thing that is off by default
in an Object Style is Paragraph Styles.
| | 04:43 | This is always turned off, even if you create
a new style based on a style where it's turned
| | 04:49 | on, it gets turned off again,
and I'll show you why in a moment.
| | 04:53 | When I click that on, it detects that sidebar_menu_
heading is the first paragraph style in this frame,
| | 04:59 | and then it applies it to every single line,
and that's not necessarily what you want.
| | 05:05 | And that's the rationale
behind keeping it off by default.
| | 05:08 | In order to make the Text Frame, obey my
Next Style Settings I have to check Apply Next
| | 05:14 | Style, and I get the benefit of that
automatic formatting, where it starts with a heading
| | 05:19 | and then continues with the Link Style.
| | 05:22 | Now that this is defined, I'll click OK, you
can see that it's applied that style, because
| | 05:27 | I had Apply Style to
Selection checked when I defined it.
| | 05:31 | And now, I want to apply this style to the
next menu down here, so I'm going to zoom
| | 05:35 | out a little bit, and click this frame and
apply that style to this frame, and that's
| | 05:44 | not really what I want at all.
| | 05:46 | Actually, it is what I want,
it's just not the right size.
| | 05:51 | Object Styles don't really control the
geometry of an object on the page, but there is a way
| | 05:56 | for you to control it in
InDesign CS6 to a degree.
| | 06:00 | I'll zoom out a little bit more and while I
have this frame selected, I'm going to right-click
| | 06:06 | on the sidebar_menu_box_yellow style, choose
Edit "sidebar_menu_box_yellow" and go to the
| | 06:13 | Text Frame Auto Size Options.
Right now, auto sizing is off.
| | 06:20 | I can turn it on for the Height Only, the
Width Only, Height and Width and Height and
| | 06:25 | Width (Keep Proportions) I want the height
and width to be controlled as part of the
| | 06:29 | objects style, and when I do that you can see it
doesn't quite match, now they're both not working.
| | 06:37 | First I want to define from where it adjusts
the Height and Width, and I'm going to click
| | 06:41 | the top left corner and both of them
jump accordingly to resize from that point.
| | 06:47 | And I want to establish a minimum width
for these frames, that's what's going to make
| | 06:51 | them both be the same, when I
apply the objects style to it.
| | 06:56 | I know that the area that I have over here
in my layout is 320 pixels Wide, so I'm going
| | 07:02 | to put that in as my value, and there you
can see both frames expand out to that Minimum
| | 07:07 | Width of 320 pixels and their Height
adjust to whatever is needed to fill all of this
| | 07:15 | text in here along with my Text Inset.
| | 07:17 | So each one auto sizes in depth, I'll
click OK, and now that's the parameter for this
| | 07:24 | style, and it can be
applied with a click to any frame.
| | 07:28 | Because these two share the same style
definition, if I go in and make a change to this style,
| | 07:33 | say, add a Black Stroke to it at about 4
pixels and in the Stroke panel, I'm going to Align
| | 07:40 | that Stroke to the inside, so I don't
actually change the physical dimensions of my object.
| | 07:47 | You can see that the frame adjusts
automatically to make sure that text stays in there, because
| | 07:51 | the auto sizing is turned on, and when I go to
the Object Styles panel, the sidebar_menu_box_yellow
| | 07:57 | has a plus sign indicating an
override, which is that stroke.
| | 08:01 | From the panel Menu I'll choose Redefine Style,
it's changed here, it's passed down here as well.
| | 08:08 | Styles are at the core of efficient
consistent design in InDesign, whether you're designing
| | 08:12 | for print or the web, they're also the
foundation of nearly all modern websites in the form
| | 08:17 | of Cascading Style Sheets or CSS.
| | 08:20 | Whether you're planning to take your
InDesign layout as the basis for your own CSS based
| | 08:25 | design or hand off the project to a developer,
using object styles will make the entire process
| | 08:30 | faster, easier, and much more consistent.
| | Collapse this transcript |
| Using anchored objects to connect content| 00:00 | One of the primary differences between Print
and Web Layouts is that print pages are static
| | 00:05 | and web pages can vary in height and width.
| | 00:08 | As page content changes from page to page--
length of an article, for example--the depth
| | 00:12 | of that page changes.
| | 00:14 | In an InDesign layout page elements don't
react to these type of changes the way they
| | 00:19 | do on the web, but you can set InDesign objects
up to behave a bit more like web page elements
| | 00:25 | and keep things flexible as you go.
| | 00:27 | Here's an example, in Print it's not
uncommon to set something up like you see it here.
| | 00:33 | There's a frame with some text in it, and
if I quadruple click to get into that frame
| | 00:39 | with the text tool and hit Command+A or Ctrl+A
to Select All, you can see this as a flow
| | 00:44 | of text from one frame into another
frame near to the bottom of the page.
| | 00:50 | This is a continuous story, but it's
two separate objects on the InDesign page.
| | 00:55 | In between there's this placed image, a
placeholder of a Google map, and this small text frame
| | 01:02 | adjacent to the image that's
acting sort of as a caption.
| | 01:06 | Now, the problem with this set up while it's
fine for print is that as you're adjusting
| | 01:11 | things for the web, this
would behave very differently.
| | 01:15 | For example, let's say during the design process
your client decides that they want their headings
| | 01:21 | to be significantly larger.
| | 01:23 | If I select this heading and make it significantly
larger, I begin to push text down into this bottom frame.
| | 01:31 | The problem there that I've created is that
now this image, which was suppose to fall between
| | 01:37 | these two paragraphs is not falling where
it's supposed to be, and my text frame is
| | 01:42 | not big enough to
incorporate this additional text.
| | 01:46 | I want to be able to set up my frames and
my objects in a way that will adapt to these
| | 01:51 | type of changes as quickly as possible.
| | 01:53 | I'm going to undo those size changes and
get things back the way they were. And ideally
| | 01:58 | what I want to do is make all of this into
a continuous flow, but since I have an image
| | 02:04 | here and a separate frame what I'm going
to need to do first is select these two, the
| | 02:10 | image and the caption, and group them. I can
then add a Text Wrap, I'll hit Command+Option+W
| | 02:16 | or Ctrl+Alt+W, to open the Text Wrap panel,
and I can set a basic text wrap for this object.
| | 02:23 | Maybe with just 12 pixels on the top and
12 pixels on the bottom--it's wide enough
| | 02:28 | left and right that it's going to push
everything anyway. And I'm going to consolidate all of
| | 02:32 | this text into a single frame by first
deleting the bottom frame where the text flows and
| | 02:38 | continues and then expanding the top frame as
far down as I can to include all of that text.
| | 02:47 | So now everything is back the way it was,
but I haven't really fixed the problem of a
| | 02:52 | change in this content.
| | 02:55 | If I increase that size, it's still pushing
the text down and the image and the caption
| | 03:01 | are not following along as the text moves.
| | 03:05 | So I'll undo that again, get it back to
it's original state, and what I need to do with
| | 03:10 | this is put it in with the text flow.
| | 03:13 | I have to anchor this inside of my text so
that as the text changes that the object moves
| | 03:18 | along with it. And the easiest way to do that
is to click this little square that's at the
| | 03:25 | top of the frame--and I even get a tooltip
telling me what this does--and drag it into
| | 03:29 | a location in a text that will anchor it,
and that drops this object right in at the
| | 03:34 | end of this paragraph.
| | 03:36 | This is now an anchored object, and this
little icon on the frame indicates that.
| | 03:41 | So the entire group is anchored, and let's take a
look at what happens as I make changes in this text.
| | 03:48 | If I go back and increase that size, you can
see that the image moves along with the text
| | 03:54 | as the text requires more
depth inside of this frame.
| | 03:58 | However, if I go little too far with that height,
I still have the problem of the text overflowing.
| | 04:05 | I'm going to bring this back to its normal
32 points. And let's make this frame a little
| | 04:11 | bit more adaptive, by going to its Text Frame
Options, l hit Command+B and go to Auto-Size,
| | 04:20 | and turn it's Auto-Sizing onto Height Only
starting from the top, and I'll click OK,
| | 04:27 | and now that's an attribute of this object.
| | 04:30 | So now if I have something like a headline
change that increases the size or even just
| | 04:36 | a two line headline that pushes it down or
text is removed, this frame will adapt and
| | 04:44 | the image will move with it, and I
keep everything a lot more flexible.
| | 04:47 | Likewise, if the width of the frame
changes and everything flows, the image will move
| | 04:52 | with it, it won't resize and the frame will
continue to increase in height to accommodate
| | 04:58 | all the text, because it's set to Auto-Size.
| | 05:01 | So that's the simple way to create a flow
of text that will adapt as changes are made.
| | 05:07 | But there is actually another way that allows
you to keep this bottom bit of content here
| | 05:13 | and his top bit of content in separate frames,
if, for example, you wanted to take that frame
| | 05:19 | for one portion of it and use it on another
page, but you can still have the two frames
| | 05:24 | react to one another as
something changes in your design.
| | 05:28 | Let's take a look at how this might work.
| | 05:31 | I'm going to select this text from the bottom, this
last paragraph, and cut it altogether from the story.
| | 05:36 | I'm going to paste it into a new frame, drag
it out to this width, and I'm going to apply
| | 05:43 | the object style article, which is
applied to this frame, also to this frame.
| | 05:49 | I'm going to make sure that they're both
the same width to keep my design consistent.
| | 05:55 | You can see that I've got overset text in
this frame, so the first thing I want to do
| | 05:58 | is modify this article style to include
Auto-Sizing and its Height from the top.
| | 06:06 | I did that before as a local override, but
now I'm building it into the Object Style.
| | 06:11 | So that's going to be automatic
in this frame and in this frame.
| | 06:15 | This object that I anchored in before, I'm
going to release by right-clicking on it going
| | 06:22 | to Anchored Object and choosing Release.
| | 06:24 | Now it's just a separate grouped object
that's not in anyway part of this flow.
| | 06:29 | I'm going to anchor this in the bottom frame,
but first I'm going to add one line above
| | 06:35 | the first line of text, because I need to
anchor it as an in-line graphic on a separate line.
| | 06:41 | The easiest way to anchor it is again to drag
this in, right to the insertion point on that
| | 06:46 | line. But when you do that, InDesign
assumes you want this object to stay exactly where
| | 06:51 | it is in relation to that insertion point,
and it makes it a custom anchored object.
| | 06:57 | That option needs to be changed for this effect.
| | 06:59 | I'm going to right-click on this object,
go to Anchored Object > Options, and I'm going
| | 07:06 | to change it from a Custom anchored objects,
which in this case is relative to the bottom
| | 07:10 | point and has a number of settings that will keep
it exactly in this relationship with the text frame.
| | 07:17 | I'm going to go to the Simpler
Inline and Above Line Options.
| | 07:20 | You can see that everything changes,
because I've got Preview turned on, and I'm going
| | 07:25 | to make this an Above Line object
Aligned to the Left and click OK.
| | 07:32 | It's actually pushed everything down in my text
frame, so I'm going to move the entire text frame up.
| | 07:38 | So now this is anchored into this frame, if
I were to resize this group, that text would
| | 07:44 | come up behind it, and you can see the
auto-size pulls the size of the frame up as well.
| | 07:50 | But I have no relationship established
between this bottom frame, and this top frame.
| | 07:55 | If I start making changes up here,
let's say, I add a paragraph of text.
| | 08:02 | I now have objects here colliding with
objects here, and that's not what I want.
| | 08:09 | In order to get this bottom frame to actually
react to changes in this top frame, and have
| | 08:13 | it's content move or expand accordingly,
I'm going to place a Text Wrap on this object
| | 08:22 | in the Text Wrap panel. And you can see
what happens, it's actually pushed the content
| | 08:28 | to this frame down, because the wrap forces
the content in this frame to move out of the
| | 08:34 | way of the entire frame.
| | 08:36 | I can actually pull the top of this bottom
frame all the way up so that it starts at
| | 08:41 | the same point as the top frame of content,
but because of the Text Wrap on the top frame,
| | 08:47 | it's forced not to begin until all the way
down here and the Auto-Size on the text frame
| | 08:53 | allows this frame to get as big as it
needs to, to push that text to the bottom.
| | 08:58 | Let's Escape out of there, now if I make changes
in the top frame, which I can't actually access,
| | 09:04 | because this frame is on top of it, I'm going to go to
Object, Arrange and Send this bottom frame to the Back.
| | 09:12 | If I were to take out a paragraph of text
now, this frame's Auto-Sizing Options make
| | 09:17 | it get smaller and its Text Wrap Options
don't push this bottom frame as faraway, and
| | 09:22 | this frame sort of jumps up--or at least its content
jumps up--and the bottom of the frame adjusts accordingly.
| | 09:29 | It's just a different approach and what it
allows you to do then is if you wanted this
| | 09:33 | to be a discrete bit of content that you
used elsewhere, you could drag this out of this
| | 09:39 | layout or make a copy of it and notice that the
frame adapts and becomes a very self-contained
| | 09:44 | object when it's not affected by this top frame.
| | 09:47 | If I just put it back in this layout anywhere, it
will adapt and push itself where it needs to go.
| | 09:54 | By taking advantage of features like Anchored
Objects and Auto-Sizing Text Frames, you can
| | 09:59 | keep the different components of your page
modular or create relationships between page
| | 10:04 | items and make the entire page layout more
responsive to change in formatting and content.
| | Collapse this transcript |
| Using anchored objects and text wrap to simulate floats| 00:00 | Not all page elements in a web
layout proceed in a top to bottom fashion.
| | 00:04 | A common design convention, both in print and
online, is to have an image or pull-quote inset
| | 00:10 | within the text and have the
text flow around that item.
| | 00:14 | In InDesign you can easily do this by
creating a new object and putting a text wrap on it.
| | 00:19 | Online, it's done using a float left
or float right attribute in the CSS.
| | 00:24 | In order to mimic this web style float
behavior, you can use InDesign?s anchored object and
| | 00:29 | text wrap to get the same effect.
| | 00:32 | I want to add an inset pull-quote into this layout
to sort of break up the page and emphasize some text.
| | 00:37 | So I'm going to select this sentence as my
pull-quote, I'll copy it to the clipboard,
| | 00:43 | and then I'll draw out a new text frame over here,
on the pasteboard and paste this text into that frame.
| | 00:48 | With my cursor still in the text, I'll open
the Paragraph Styles panel, and I will apply
| | 00:53 | a style called pull-quote that I
already have created in this document.
| | 00:57 | That formats the pull-quote
that way, I want it to look.
| | 01:00 | And I'm going to make some changes to the look
of this frame before I move it onto the page.
| | 01:05 | I'm going to give it a fill just sort of medium
orange color, and I also want o add some space
| | 01:12 | around the text, so it's not hugging the
edges of this frame. I'll hit Command+B or Ctrl+B
| | 01:17 | on Windows for my text frame options, and I'm
going to apply a 20 pixel inset all the way around.
| | 01:26 | While I'm at it, I want to make sure that
whatever the content of the pull quote, that
| | 01:29 | my frame is exactly the size that it needs
to be without this excess space, or that I
| | 01:35 | don't create a situation where my pull
quote doesn't fit, and I get over set text.
| | 01:39 | I'll do that by applying the auto-size option.
| | 01:43 | Height Only from the top that will keep this
frame exactly, the height that it needs to be.
| | 01:48 | I'm a big fan of this feature.
| | 01:51 | I'll click OK, and I've now done enough to format
this frame where I'm ready to create an object style.
| | 01:58 | I'll open the Object Styles panel from
the Panel menu I'll choose New Object Style.
| | 02:04 | I'll just move this dialog box over, so
we can see what's going on, on the page.
| | 02:09 | I'll call this quotebox, make sure
that Apply Style to Selection is on.
| | 02:14 | If I make changes I want Preview selected so
that I can see those changes, and I'm going
| | 02:19 | to click on the Paragraph Styles area, both
to go to the area and to activate automatic
| | 02:25 | paragraph styling for this frame.
| | 02:28 | It's only going to use one style, and
it's detected that style in use already.
| | 02:32 | So that text formatting is going to be
automatic whenever this object style is applied.
| | 02:37 | Next I'll add a text wrap of about, let's
say 16 pixels, and I'll make sure that all
| | 02:46 | values are the same on all four sides.
| | 02:48 | I'll click OK to save the style, it's
applied to this frame, and now I can drop this on
| | 02:54 | to my layout, and I want to position this
right about here where the second paragraph starts.
| | 03:00 | My smart guides show me that I've got this
aligned with the inset of this text frame
| | 03:05 | not with the edge of the text frame--which
is a really nice feature. And that pushes
| | 03:09 | the text around it.
| | 03:11 | I can adjust the width of this, and it's
its height will just automatically, and I get
| | 03:14 | it right about where I want it to be visually.
| | 03:17 | The problem is if there's a change in the text,
for example, this headline becomes Everything
| | 03:23 | You Want to Know About Roux Academy it pushes
this text down, and this is no longer beginning
| | 03:30 | at the top of this paragraph,
which is really where I want it.
| | 03:34 | So I'll undo those text changes, and I want
to connect this pull-quote box to this frame
| | 03:40 | in a way that it reacts to changes in this
frame very much like a float would when there
| | 03:46 | are changes or resizing or anything
happens on the web that reflows the text.
| | 03:52 | The easiest way to anchor anything in
InDesign is to click this little anchoring square at
| | 03:56 | the top of a frame, and I'm going to anchor this at
the very end after the period in the first paragraph.
| | 04:05 | I'll just release and nothing really changes
visually on the page except you can now see
| | 04:09 | that this is an anchored object.
| | 04:12 | If I resize the frame, you'll notice that the
object moves down, but it has no relationship
| | 04:20 | to the edge of this frame.
| | 04:23 | Using that drag anchor method is the
easiest way to anchor an object in InDesign.
| | 04:28 | But InDesign makes all the decisions for you,
and it may not necessarily know exactly how
| | 04:33 | you want this to behave.
So I need to customize how this works.
| | 04:37 | I'm going to actually undo those resizes,
select this anchored object, right-click on
| | 04:42 | it, and go to Anchored Object options, and
you can see that the settings for this make
| | 04:48 | the reference point for the image the top
left, and that it's position is relative to
| | 04:54 | the text frame, the left side of the text
frame with this huge 398 pixel offset, that's
| | 05:00 | not what I want at all.
| | 05:02 | I'm going to actually change the
reference point of this to the top right.
| | 05:07 | You can see that it completely changes
what's going on the page, I'm going to clear this
| | 05:12 | offset to 0, and this offset to 0 and
everything changes on the page because now my relative
| | 05:21 | reference point for the object is it's top right,
and it's anchored to the left side of the frame.
| | 05:26 | I want it anchored to the right side of frame,
so I'll just click the right proxy point there.
| | 05:32 | Because this frame has an inset, I
actually want to push it away a little bit.
| | 05:37 | So I'm going to give it an inset that's equal
to the inset on this text frame, which I believe
| | 05:43 | is about 12 pixels, but I
can always adjust that later.
| | 05:47 | Right now the Y relative position is
relative to the baseline, and that's the baseline of
| | 05:53 | this line where the text was inserted.
| | 05:55 | So the top right corner, which is this
reference point, is in-line relative to that baseline.
| | 06:02 | I want it to appear more like
it's at the cap height of this line.
| | 06:06 | So I need to nudge it down a little bit,
and I'm just going to eyeball it for now, and
| | 06:11 | that looks about right to me. So I'll click OK.
| | 06:15 | And since I did all of this locally on the
page, I have deviated from my quote box style.
| | 06:20 | What I want to is redefine that style from the
objects style panel menu by choosing Redefine Style,
| | 06:27 | and add those changes to the
attributes of this object style.
| | 06:31 | Now let's take a look at what
happens when I resize this frame.
| | 06:36 | The object moves along
with the edge of the frame.
| | 06:39 | So if a change in my design occurs, and I
need to go with a narrower content well for
| | 06:43 | this page I can trust that this quote box
is going to follow along with it whatever
| | 06:48 | that change might be.
| | 06:50 | Similarly, if there's a change in text or
text size that reflows things vertically,
| | 06:58 | it's going to move that along, and I don't
have to worry about manually repositioning
| | 07:02 | that every time there's a change.
| | 07:05 | Even though InDesign allows you more flexibility
and doesn't require you to tether items together
| | 07:09 | in this fashion, a web page at CSS does. By
working this way you'll be keeping that requirement
| | 07:15 | in mind as you go, and you're also building
in connections that will make your page design
| | 07:20 | more adaptive to change.
| | Collapse this transcript |
|
|
4. Taking Advantage of TablesPrint vs. web: Using tables for design, not for HTML layout| 00:00 | Well before CSS matured to the point where
it could effectively handle page layout, many
| | 00:05 | early web designers relied on HTML tables
to establish a web pages' structure and control
| | 00:11 | the division of content.
| | 00:13 | Although this didn't accomplish the task, it
was a tedious process that lacked flexibility,
| | 00:18 | and was not search engine friendly.
| | 00:21 | Table-based layout is virtually
unheard of in modern web design.
| | 00:24 | Since CSS, divs, floats, and other
techniques can achieve the same results and far more
| | 00:30 | with simpler search engine friendly HTML markup
that's much more adaptable for design and content changes.
| | 00:38 | So why are we talking about
tables in this chapter at all?
| | 00:40 | Although you wouldn't want to take a table-based
approach on the web, there are some efficiencies
| | 00:45 | that can be gained by using InDesign's Table
features for your design phase and for mockups.
| | 00:51 | Those will later be translated into more adaptive
CSS structure by a developer or your internal web team.
| | 00:58 | But web page elements like horizontal and
vertical nav bars are much easier to set up
| | 01:03 | and adjust with InDesign tables rather than
using a number of individual InDesign frames
| | 01:09 | that then have to be continually
realigned and resized as you make adjustments.
| | 01:14 | In this chapter we'll focus on those areas
of web design for which InDesign tables, not
| | 01:19 | HTML tables, are the quickest
path to a finished, flexible result.
| | Collapse this transcript |
| Designing a simple horizontal navbar with tables| 00:00 | As web design has evolved, the confined boxy
look of a table-based approach has given way
| | 00:06 | to more open looking web pages.
| | 00:08 | However, there are many parts of web pages
that work very effectively, if they stick
| | 00:12 | to a more row and column format.
| | 00:15 | One such common web element is the
horizontal navbar, typically a band of top-level links
| | 00:21 | to major content areas of a site placed
at the top or near the top of every page.
| | 00:26 | Let's take a look at how InDesign tables can make
short work of this essential web design element.
| | 00:31 | In this layout, I'm working on just the
navbar portion of this website, and this text frame
| | 00:37 | contains a list of all of the top level nav
item that are going to go into a horizontal navbar.
| | 00:43 | The easiest way for me to handle this
horizontal navbar is to set this entire thing up as a
| | 00:49 | table and the easiest way for me to do that
is to select all the text in the frame, go
| | 00:54 | to the Table menu, and
choose Convert Text to Table.
| | 00:58 | By default, InDesign wants to look for a
tab to separate columns, but I don't have any
| | 01:02 | columns here, everything
here is on it's own line.
| | 01:06 | So I'm going to switch this to paragraph,
and it's going to divide everything into a
| | 01:11 | column where ever it
encounters a paragraph break.
| | 01:15 | The number of columns option--I'm just
going to leave that--and I'm going to leave
| | 01:19 | the table style set at basic table we can adjust
that later, f we're so inclined, I'll click OK.
| | 01:25 | And InDesign converts all of my individual
lines of text into single row table with each
| | 01:31 | line from the previous plain text
arrangement attributed in it's own cell.
| | 01:37 | I can immediately tell the some things need fixing,
like this broken line here, and this stacked line here.
| | 01:43 | In fact, I know that I'm going to be
shooting for an 800 pixel wide navbar in my layout.
| | 01:49 | So what I'm going to do is switch to the
Selection tool, make sure this frame is selected, and
| | 01:54 | I'm going to make this an 800 pixel wide frame.
| | 01:59 | I can then double-click in any cell to
select my table and switch to the text tool, and
| | 02:05 | I'm going to hover over the right edge of
this table, till I see this cursor change,
| | 02:10 | click hold and drag this out all
the way to the edge of this frame.
| | 02:14 | So I've extended my table out to the full
width but I've only done it with this one cell.
| | 02:19 | Everything else is also jammed in
here, and it's not evenly distributed.
| | 02:23 | One of the things that really makes
InDesign great for setting up these navbars is that
| | 02:28 | I can select this entire row, I'll hover
over the left click, and select the whole row and
| | 02:34 | go to Table > Distribute Columns Evenly. And
it will redistribute all of that content into
| | 02:41 | equally sized cells that
fill the available space.
| | 02:45 | But this has given me a fairly shallow
depth for my navbar, and I have to keep in mind
| | 02:50 | that not everyone is clicking
with something as precise as a mouse.
| | 02:54 | Some people may be using a
tablet and tapping on these links.
| | 02:57 | So I want, a beefier navbar up here.
| | 02:59 | I'm going to double-click inside here to
switch to the text tool, select the row again by
| | 03:05 | hovering over the left clicking, and then for
my At Least or Exactly values for this table
| | 03:11 | rows height, I'm going to switch to exactly,
and I'm going to make this 42 pixels high.
| | 03:18 | Now I've got a 42 pixel high navbar by 800
pixels wide, and I've got some alignment issues,
| | 03:25 | obviously, my text really should be
centered both vertically and horizontally.
| | 03:30 | So I'm going to select the text and hit Shift+Command+C
or Shift+Ctrl+C on Windows, to center it. And then
| | 03:38 | modify the style that's applied to it by
choosing Redefine Style, and then they all get aligned
| | 03:44 | to the center and then, I'll hit Command+Forward Slash
or Ctrl+Forward Slash on Windows, which switches me from
| | 03:50 | text selection to cell selection.
| | 03:53 | And now I get different options in the
Control panel, and I want to vertically align this
| | 03:57 | text to the center. I can actually select
the entire row. And apply that to the whole row.
| | 04:06 | So that's looking better, and now I want to
start adding some color to these cells and
| | 04:11 | breaking up this navbar a little
bit with some table formatting.
| | 04:14 | I'm going to select the whole row again, and
right now this whole table has an outer border
| | 04:20 | of one point, and I don't want
any outer border on here at all.
| | 04:24 | So I'm going to get rid of that border on
all four sides but I'm keeping the internal
| | 04:29 | strokes for the time being.
| | 04:31 | With the table still selected,
I want to give the cells a fill.
| | 04:35 | So I'm going to go to my Swatches panel, and
I want to apply this navbar_gradient swatch
| | 04:40 | that's already been created.
| | 04:41 | I want to make sure I have the fill
selected, not the text or the stroke.
| | 04:46 | I'll click navbar_gradient and unfortunately,
when you do this the first time InDesign by
| | 04:51 | default applies this gradient
horizontally across the length of the entire table.
| | 04:56 | In order to switch that, I need to select
all the cells again, switch to gradient tool,
| | 05:01 | and what I want is a gradient
that goes from top to bottom.
| | 05:05 | So I'm going to click the very top here,
shift and drag down, and then I'll switch the Text
| | 05:12 | tool and deselect this, and you can see I
get this sort of very kind of trendy Web 2.0
| | 05:18 | Glossy button effect.
| | 05:19 | I like that but I don't
like the black type against it.
| | 05:22 | So I'm going to make a change to the look
of that text by switching the color to paper.
| | 05:29 | And then I'll use the keyboard shortcut Shift+Command+
Option+R or Shift+Ctr+Alt+R on Windows to redefine
| | 05:36 | the paragraph style without having
to go to the Paragraph Styles panel.
| | 05:39 | I'm also noticing that student portal is a
little wedged in here, I'm going to have make
| | 05:43 | an adjustment to my size, so I can fit that
text in, and I am going to knock that down
| | 05:48 | to about 15 point--or that would be 15 pixels
on the web--and again Shift+Command+Option+R
| | 05:55 | to redefine the style.
| | 05:57 | So I'm quickly affecting every single one of
my nav bar, items by changing the paragraph
| | 06:02 | styles and the table formatting attributes.
| | 06:04 | I'm going to click off of this and then go
to Preview mode by hitting the W key, which
| | 06:11 | hides the individual blue strokes that are
around this table indicating where the cells
| | 06:16 | are, so I can get a better look on how this
the table looks without all the only in design
| | 06:19 | adornments around it.
| | 06:21 | And I still have my vertical lines here
between each item but I want those vertical lines
| | 06:26 | to be white, and I also have my text alignment
set for each of these cells I have my background
| | 06:32 | gradient fill established
for each of these cells.
| | 06:35 | So it's time to use cell
styles to speed up this process.
| | 06:39 | I'm going to select this cell by first
getting inside the cell with a Text tool and then,
| | 06:46 | hitting Command+Forward Slash to select the whole cell.
The other option there is I can hit Escape
| | 06:51 | to switch from text selection and then Escape
again, to go to cell selection, either method works.
| | 06:58 | I want to take all of these attributes
I've applied and lock them into a cell style.
| | 07:03 | So I'm going to the Window menu to Styles
to Cell Styles and from the Panel menu I'll
| | 07:11 | choose New Cell Style. I'm going to call this
nav_button, and I can assign my navbar paragraph
| | 07:18 | style to this cell style,
it's not assigned by default.
| | 07:24 | It's picked up the fact that I'm aligning this
text to the center just based on my selection,
| | 07:29 | and all of the other values here that appear
either in an null-state or a blank state are
| | 07:34 | just defaulting back to the
basic table style attributes.
| | 07:38 | I haven't really deviated from that so
it's not showing me any unique values.
| | 07:42 | However, I have aligned the text to center
that's why I'm seeing that difference there.
| | 07:46 | If I go to Strokes and Fills you can see
that I've got navbar_gradient selected there and
| | 07:51 | another thing I want to do is deselect these
top and bottom proxies for the strokes, and
| | 07:56 | I would change my stroke color between all
the buttons between each of these cells, to
| | 08:02 | a 1 point solid paper or white stroke. That's
everything I need to set here so I'm going to click OK.
| | 08:12 | Unfortunately, table styles and cell styles
don't have the apply style to selection option
| | 08:17 | that paragraph character and object styles have.
| | 08:20 | So once I've created the style I do have
to go back in and make sure that I apply it.
| | 08:25 | So I'll select this entire row, you can see
my newly created nav_button cell style here,
| | 08:31 | and I will apply that to this whole selection.
| | 08:33 | I'll switch to the Selection tool so we can
get a better view of this table and what I've
| | 08:38 | got is a basic horizontal navbar, nicely and
evenly distributed and consistently formatted
| | 08:44 | with a combination of
paragraph styles and cell styles.
| | 08:47 | Once I have the cell style established, one
of the things that I might want to do in my
| | 08:51 | mockups is show what a particular navbar
button in its selected state looks like.
| | 08:58 | To do that I'm going to select one of the
cells in this table and what I want to do
| | 09:02 | is show it in it's selected state it's fairly
common to be on a specific section of a site
| | 09:07 | and have the navbar reflect where you are.
| | 09:11 | This selected navbar item is really going
to look just like the others except I'm going
| | 09:15 | to reverse the gradient.
| | 09:16 | So I'm going to switch to the gradient tool,
and this time from the bottom I'm going to
| | 09:22 | click hold and shift drag up to
apply the gradient in reverse.
| | 09:27 | I'll deselect, so we can
see what that looks like.
| | 09:30 | So that would be what a selected or active
part of this navbar will look like on the web.
| | 09:36 | I'll select that cell again, you can see that
I've got overrides on my nav_button cell style.
| | 09:41 | So I'm going to create a new
cell style based on nav_button.
| | 09:45 | I do have to reassign the paragraph style
of navbar but that's about all I need to do.
| | 09:52 | Everything else is going to be the same except,
it's going to pick up that change in the direction
| | 09:58 | of the gradient, it's not even showing me
that the cell fill is any different, it is
| | 10:03 | the same fill-color it's just
proceeding in a different direction.
| | 10:07 | And the very last thing, I'll do is actually give this
a name, and I'll call this navbar_active and click OK.
| | 10:16 | So I've created the style but I do still have to
manually apply it, so I'll just click navbar_active,
| | 10:21 | and I'll click off, so we can see what that
looks like here. And at any point if I'm showing
| | 10:26 | a mockup of a different part of the page,
I can switch this back to nav_button, and
| | 10:31 | if I was showing the campus page, I could
select that and turn it to navbar_active.
| | 10:37 | That quickly, and that easily, with the
combination of paragraph styles and cell styles.
| | 10:42 | For web page elements made up of grids, of
rows and columns like navbars, InDesign tables
| | 10:48 | along with table and cell styles can help
you build these web elements faster and more
| | 10:53 | efficiently than if you were working
with a number of individual objects.
| | Collapse this transcript |
| Designing a rounded-corner navbar with tables| 00:00 | Web Design just like Print Design is always
influenced by trends, the Glossy Web 2.0 look
| | 00:06 | of smart phone interfaces and
many websites is evidence of that.
| | 00:10 | Rounded corners are part of
that trend, but for good reason.
| | 00:13 | A simple rounded corner can take the hard
edge off of an object and make it less rigid
| | 00:18 | looking and more approachable.
| | 00:20 | Unfortunately, you can't make a rounded corner
table in InDesign, but you can fake it, here's how.
| | 00:26 | In the last movie we assembled this simple
nav bar using a single row InDesign table
| | 00:31 | along with Paragraph Styles and Cell Styles.
| | 00:34 | I will switch to Preview mode, and it's a
nice looking, clean, simple, horizontal nav
| | 00:40 | bar, it's got that gradient that creates that
sort of trendy glossy shimmer, but it is coming
| | 00:46 | off a bit boxy, and I would like to sort of
take that edge off at least on the corners
| | 00:50 | of the overall nav bar.
| | 00:52 | A Cell in InDesign is a
perfect rectangle at all times.
| | 00:56 | There's nothing you can do to
make the actual cell shape change.
| | 01:00 | So what I need to do is revisit my
approach to this if I want a rounded corner.
| | 01:05 | Although I can't round the corners of a table,
I can round the corners of a text frame and
| | 01:11 | every InDesign table
sits inside of a text frame.
| | 01:16 | So the first thing I am going to do is set
the size of this frame to exactly the size
| | 01:20 | of this table by going to Object > Fitting >
Fit Frame to Content, and that closes this
| | 01:27 | entire frame up to the size of my nav bar.
| | 01:31 | Next, with the frame still selected, I
will go up to the Control panel, and I'm going
| | 01:36 | to switch to Rounded corners, and I'm going
to make it pretty subtle, I am going to do
| | 01:41 | about an 8 pixel rounded corner.
| | 01:45 | I will exit Preview mode, and you can see
that if I zoom in here, my frame is actually
| | 01:51 | rounded, but my Table cell extends beyond
that rounded corner and still presents that
| | 01:57 | perfect rectangular presentation.
So that's something that needs to be fixed.
| | 02:02 | What I need to do is remove the fill from these
cells and actually apply the fill to the text frame.
| | 02:11 | Since I've used the Cell Style, removing that fill
is going to be quite easy to do for the entire table.
| | 02:15 | I just need to have my cursor in one of
the cells, you can see that nav_button is the
| | 02:21 | Cell Style, and it's currently active.
| | 02:24 | I will right-click and choose Edit "nav_button"
and under Strokes and Fills, I am going to
| | 02:30 | switch it to None and immediately the Fill is
gone and my white text is completely unreadable.
| | 02:37 | So I will switch to the Selection tool, and
that selects the frame for me, and instead,
| | 02:42 | I am going to apply that gradient, which is in my
Swatches panel, to the text frame itself not to the table.
| | 02:50 | Again, InDesign's default is to go left to
right with this, so I will switch to the Gradient
| | 02:55 | tool, click and hold at the top of the frame, and
Shift+Drag down in a straight line to the bottom.
| | 03:02 | I will go to the Preview mode, and now you
can see I have got this nice, more softer
| | 03:08 | edged rounded corner nav bar. And I was
able to accomplish that simply by removing the
| | 03:14 | Fill attribute from the existing Cell Style
and instead applying the Fill to the frame.
| | 03:19 | So even though InDesign's tables don't allow
you to break outside of that strictly rectangular
| | 03:23 | appearance, there are workarounds and by
coming combining things like the attribute of a text
| | 03:29 | frame, with a change in approach and
design to your individual cells, you can achieve
| | 03:34 | the effect you are looking for.
| | Collapse this transcript |
| Designing a multi-level vertical navbar with tables| 00:00 | Tables are a very effective method for
designing website navigation schemes, because of their
| | 00:05 | grid-based precision and consistency.
| | 00:08 | This is equally true for web designs
that require a two-tier navigation system.
| | 00:13 | In this movie, we'll take a look at how to
use tables and cell styles to build a two
| | 00:17 | level vertical nav bar.
| | 00:18 | In this document again, I'm working on the
nav bar separate from the rest of my web design,
| | 00:24 | and I'm going to be building
a vertically oriented nav bar.
| | 00:27 | The text in this frame is all of the items
that are going to appear in my nav bar mockup.
| | 00:32 | Everything in bold is a level 1 item and
everything not in bold is a level 2 item.
| | 00:39 | The first thing I need to do is to convert
all of this text to a table, so I'll just
| | 00:43 | put my text my cursor in the text by double-clicking,
hit Command+A or Ctrl+A on Windows to select
| | 00:48 | all go to the Table menu and
choose Convert Text to Table.
| | 00:53 | The default is typically Tab--in a prior movie,
I had set it to Paragraph--so I'm going to
| | 00:58 | reset that back to a Column Separator of Tab
and a Row Separator of paragraph, which means
| | 01:03 | every time InDesign encounters a paragraph,
it's going to create a new row in this table.
| | 01:08 | For Table Style I'm going to stick to Basic
Table, and I'll click OK. I'm going to open
| | 01:15 | up this text frame, so I can see my whole table.
InDesign has put in an extra row at the bottom.
| | 01:21 | I'll select that and hit Command+Delete to
get rid of the row, and now each one of my
| | 01:28 | NAV items is in its own row in a single cell.
| | 01:31 | The first thing I want to do is deal with
the text and format that, so I'm going to
| | 01:36 | select my first top-level item in this cell,
go to my Paragraph Styles panel, and I'm going
| | 01:43 | to apply my nav_level_1 paragraph style.
I'll then come down here and select all of these
| | 01:49 | rows, which were my other level 1
items and apply that same style.
| | 01:53 | For all these level 2 items, I'll select
those rows and apply nav_level_2. It's a lighter
| | 02:01 | weight font and a slightly different size
I can always adjust this later, and I will
| | 02:05 | as I finalize my design.
| | 02:06 | Next, I'll select this row and in fact, I'm
really just selecting one cell, because that's
| | 02:11 | all these rows made up of, and I'm going to
start changing some of its attributes, I'm
| | 02:16 | going to go to Table > Cell Options > Text,
and that takes me to the Text tab in the Cell
| | 02:24 | Option dialog, I'm going to up the spacing
around this to 8 pixels and click Make all
| | 02:31 | settings the same, and that gives me 8
pixels of padding around the text in here.
| | 02:36 | I'm going to align this text to the center,
really doesn't change much in a tight cell like this.
| | 02:42 | Under Strokes and Fills, I'm going to first
reset everything to 0 and then deselect the
| | 02:49 | left and right proxies and create a one
point paper stroke and give this cell a fill of
| | 02:58 | this hexadecimal orange color, and now I'll
click OK. I'll go to the Selection tool and
| | 03:04 | click off and go to Preview mode by hitting
the W key and see how that looks, it's a nice,
| | 03:08 | clean, simple, flat color fill cell.
| | 03:12 | I'll go back into the cell select the entire
cell, and I'm going to create a new cell style
| | 03:17 | based on what I've done so far. So I'll go
to Window > Styles > Cell Styles and from
| | 03:26 | the Panel menu I'll choose New Cell Style.
I'm going to call this nav_level_1, and I'm
| | 03:33 | going to assign the nav_level_1 paragraph style.
| | 03:36 | Personally, I really like to keep my
paragraph styles that are going to be associated with
| | 03:41 | cell styles named the same as the cell style, it
just makes it easier for me to keep track of everything.
| | 03:48 | It's picked up my other attributes that I
have changed anything that's deviating from
| | 03:53 | the basic table style like my 8 point text
inside my vertical center, along with my fill
| | 03:59 | and stroke options.
| | 04:00 | Those are all unique to the selected cells
so they are built into the style, I'll click
| | 04:05 | OK, and as with all cell styles that are
newly created, I have to apply it from the panel
| | 04:11 | after I have created it.
| | 04:13 | So now I've got a nav_level_1 style applied
to this cell, I'm going to select all of the
| | 04:18 | other level 1 items and apply the same style
and quickly I pick up that exact same formatting
| | 04:25 | and what I might also like to
do is make an adjustment in here.
| | 04:28 | I think maybe the black is a little bit too
halloweenish against this orange, so I'm going
| | 04:33 | to open up the Paragraph Styles Panel menu
and edit my level 1 nav style by changing
| | 04:41 | its color to Paper, clicking
OK and all of those are changed.
| | 04:48 | Now I want to deal with the level 2 items
in my nav bar, so I'll select all of those
| | 04:53 | rows, I'll close the Paragraph Styles panel,
and I'm going to apply my nav_level_1 style
| | 05:00 | even though I'm not going to ultimately
use it on these just as a starting off point.
| | 05:06 | I'll then go to the panel
menu and choose New Cell Style.
| | 05:10 | I'm going to base this on nav_level_1, I want
keep certain attributes the same or if I wanted
| | 05:15 | to deviate from this altogether, I could go to
based on none and break the association between the tow.
| | 05:22 | In fact, I may do that just to avoid
any potential problems down the line.
| | 05:26 | I'm going to assign my nav_level_2 paragraph
style to this, and name the cell style nav_level_2,
| | 05:34 | just to keep things organized in my brain.
| | 05:37 | I'm going to adjust the text insets for
this to be slightly less than they are for the
| | 05:42 | level 1 items, I think I'm going to probably
do about 6 pixels and make all the settings
| | 05:47 | the same, I'm also make this align to the
center, and I'm going to remove all of my
| | 05:54 | strokes and fills by making sure with all of
these proxy strokes selected that, I specifically
| | 06:01 | switch to 0 point stroke,
and I'll switch it to None.
| | 06:07 | For my Cell Fill I'm going to switch to a
yellow differentiate the two levels in the
| | 06:13 | nav, and I'll click OK.
| | 06:16 | Right now, everything still looks like it
looked before, so I'm going to select this
| | 06:21 | and apply my nav_level_2.
| | 06:24 | Now if I click off I'm going to Preview
mode with the W key, you can see that I've got
| | 06:28 | a difference between my top-level
and my second level nav.
| | 06:32 | I might also want make another visual
adjustment to really indicate that one of these is a
| | 06:37 | nested within a broader category.
| | 06:40 | So I'll modify my nav_level_2 style by right-click
in the Cell Styles panel choosing Edit "nav_level_2"
| | 06:47 | and for my text insets I'm going to
deselect make all settings the same and on the left
| | 06:53 | I'm going to add about an 18 pixel indent,
so it's clear that this is hierarchically
| | 06:59 | underneath programs which is a higher level,
and I'll click OK, because I did it with the
| | 07:04 | style level it's apply to all of those cells.
| | 07:08 | So whether you're creating a simple horizontal
NAV bar or a vertical NAV bar with two levels
| | 07:14 | of hierarchy like this a handful of
InDesign paragraph styles, cell styles and a table
| | 07:20 | will get you there quickly.
| | Collapse this transcript |
| Creating an expanding two-level navbar with tables| 00:00 | In the last movie we very quickly
designed and built a two-level vertical nav bar.
| | 00:05 | Here, we're going to take that basic nav bar
mockup a bit further to mimic some common web behavior.
| | 00:11 | To save valuable screen space many two-level
navigation schemes expand and collapse when
| | 00:16 | a top-level item is
clicked or just hovered over.
| | 00:20 | When you're designing web page mockups in
InDesign you may want to show both the expanded
| | 00:24 | and collapsed states to your client.
| | 00:27 | Here is the way to do that without having
to actually create a completely different
| | 00:30 | table or rely on hiding and showing the layers.
| | 00:34 | This is the nav bar that we've
already created, and it is a single table.
| | 00:38 | I can click on the top left corner, and I'm
selecting one entire table. All of these items,
| | 00:43 | here, are my second level navigation items,
and I want to try and mimic the expanding
| | 00:50 | and collapsing behavior of this type of nav bar.
| | 00:53 | To do that, I am actually going to have to
split this into some separate tables and bring
| | 00:57 | some other InDesign features that
aren't strictly table related into the mix.
| | 01:02 | The first thing I'm going to do is hover
over the left side of all of these level 2 items
| | 01:07 | and cut all of those cells to the clipboard.
And then going to just hit Command+V or Ctrl+V
| | 01:13 | on Windows to paste them, and it will create
a new text frame containing all of those cells
| | 01:18 | it just expand that frame for now, and the
next I want to do is separate everything after
| | 01:24 | the first item into its own table. So I'll
select all of those rows, cut those to the
| | 01:30 | clipboard as I did before.
| | 01:32 | Hit Command+V or Ctrl+V, which
pastes them into a new text frame.
| | 01:36 | And now I want to combine each of these three
tables into this one text frame in a way that
| | 01:41 | looks like it's one table. So I'll select
this entire table--and as you know a table
| | 01:46 | is just one text item, a single character
on a line in an InDesign text frame--so I
| | 01:52 | can just double-click, and I am really just
selecting this line. I'll cut the entire table
| | 01:57 | to the clipboard again, put my cursor in at
the end of this single row single cell table
| | 02:03 | and hit Return. Then paste my level two table
onto a new line--don't worry about that gap
| | 02:09 | between the two we're going to fix that--I'll
hit Return then I'll go select this separate
| | 02:14 | table with my remaining level 1 items, cut
that to the clipboard, and paste that at the
| | 02:19 | bottom of this frame.
| | 02:20 | Now you're seeing this gap here because of a
rather irritating default of InDesign tables,
| | 02:26 | and that is built-in space before and space
after for every single table you create.
| | 02:32 | I want to eliminate that in all of these tables,
so I'm going to actually select this first
| | 02:38 | one and under Table, go to Table Options > Table Setup
and here are those pesky defaults that I do not care for.
| | 02:48 | I'm going to eliminate the 4 pixel Space
Before, I'll hold down the Shift key and click the
| | 02:53 | down arrow to set that to 0 and for some reason
there's a negative space after, and I'm going
| | 03:00 | to Shift click the up arrow to
reset that to 0 then I'll click OK.
| | 03:06 | Next, I'll select this entire table by
hovering over the top left, clicking to select all
| | 03:12 | the rows, and I'll do the exact same thing
Table Options > Table Setup set both Space
| | 03:19 | Before and Space After to 0 and click OK
and these two become nested together, so they
| | 03:25 | visually appear to be on table even though
they're not, I'll hover over this select the
| | 03:30 | entire table do the exact same thing again,
clear out those values, click OK, and now I've
| | 03:39 | just got my three tables.
| | 03:41 | The white space that you see there is the
white space that's built into the cell style
| | 03:45 | that appears on the top and bottom borders
of each of these cells so that's actually
| | 03:50 | supposed to be there.
| | 03:51 | So how do I get the expanding
and collapsing trick to work?
| | 03:54 | Well, the first thing I need to do is get
my cursor up to select, not this table, but
| | 04:00 | I'll use my up arrow to select the single
line containing this table. And I'm going
| | 04:05 | to use the feature called conditional text,
which really has nothing to do with tables,
| | 04:09 | and you can't apply to a table itself, but you
can apply it to the line that a table sits on.
| | 04:14 | I'm going to go to the Window menu to Type
& Tables > Conditional Text, and I'm going
| | 04:20 | to create a new condition by clicking New
Condition from the Panel menu. I'll name this
| | 04:25 | condition expanded, or I could name
it Level 2 whatever works and click OK.
| | 04:32 | Right now, it's not applied, but all I have to do
is click here to apply that condition to this text.
| | 04:39 | Once that condition is applied, I can then
hide and show anything that I've put that
| | 04:44 | condition on simply by toggling this icon
in the Conditional Text panel and with that
| | 04:49 | condition hidden my table has disappeared,
but the line that it sits on is still there
| | 04:54 | that's because I selected the table and applied
the condition, but I didn't select the paragraph
| | 04:58 | return at the end of line that it sits on,
so I can do that quickly and easily now.
| | 05:04 | By double-clicking in that line you can see
I've got my return selected, and I'm going
| | 05:08 | to apply the expanded condition to that and since
it's hidden, it's going to disappear immediately.
| | 05:16 | So now I've got what looks like a single
table with all of my top-level nav items and by
| | 05:21 | simply toggling this expanded condition on,
or off I can mimic the appearance and show
| | 05:27 | in mockups to my clients, what a collapsed
or expanded navigation is going to look like.
| | 05:33 | I really love this best of both worlds
approach to getting two different appearances out of
| | 05:37 | a single object by combining various features,
it's one of InDesign's real strengths, when
| | 05:42 | it comes to creating web designs.
| | Collapse this transcript |
|
|
5. Putting It Together: Website Prototype ProjectPrint vs. web: Understanding the importance of templates| 00:00 | For print designers the word template
can often have a negative connotation.
| | 00:05 | It suggests a rigid consistency and
lack of creative freedom from page to page.
| | 00:11 | On the web, however, a well-planned
and consistent template is essential.
| | 00:15 | Websites can span dozens, hundreds, even
thousands of pages, and around each page of unique content
| | 00:22 | you'll almost always find a consistent
template containing all of the site's architecture,
| | 00:26 | such as headers and footers and sidebars.
| | 00:30 | It's the only way to keep that much content manageable
for the site's creators and accessible for its visitors.
| | 00:37 | Before you dive into InDesign to start a web
design project, the template should be foremost
| | 00:42 | on your mind and one of the first things you
nail down before working on specific pages.
| | 00:47 | You can always adjust it and adapt it along
the way, but a template is like the framing
| | 00:51 | of a house.
| | 00:52 | It has to be there first to support
everything you're going to place on and into it.
| | Collapse this transcript |
| Setting up a wireframe template| 00:00 | Any project, print or web, needs a plan.
| | 00:03 | Once a conversation with the client has
taken place, brainstorming has been done, and a
| | 00:07 | direction has been approved, the detailed
design of a site requires planning, so you
| | 00:12 | can work as efficiently as
possible and adapt to changes quickly.
| | 00:16 | In the beginning, that planning can be anything
from a sketch on a napkin to a wireframe created
| | 00:21 | in something like Adobe's Proto Touch app.
| | 00:24 | Personally, I prefer to
sketch in Adobe Ideas on my iPad.
| | 00:27 | I can work in layers, undo if necessary,
and get the best of both worlds, the immediacy
| | 00:32 | of a hand-drawn sketch with the ability
to edit, export, and share the results.
| | 00:38 | These three PDFs were actually Adobe Ideas'
sketches that I roughed out on my iPad and
| | 00:43 | then saved to the Creative
Cloud and downloaded as PDF.
| | 00:46 | I could've done them as PNGs or JPEGs.
| | 00:49 | It shows PDF, because it preserves all of the
layers that were in my original Adobe Ideas' sketch.
| | 00:55 | And I had two layers, one, with all the blue
lines for my actual page sketch, and the other
| | 01:01 | with all the yellow type for my
little Notes, Doodles, and Reminders.
| | 01:06 | Whenever I'm about to get started on a
site design, I tend to try to work on the page
| | 01:11 | that's going to be used
most throughout the site.
| | 01:14 | Most sites tend to rely on a default template
for the majority of the content and then there
| | 01:19 | are a few pages like the homepage or some
special micro-site area that might deviate
| | 01:25 | from that template and require unique design.
| | 01:28 | But I like to work on the page that's really
going to be seen the most throughout the site
| | 01:33 | and then work on those specialty pages later on.
| | 01:37 | So I am going to start working on the template_sketch.pdf
that I have here and start building that out
| | 01:43 | into an InDesign Wireframe to take these rough
lines and areas and to define them more precisely.
| | 01:50 | So I will switcher over to InDesign, and
I'm going to create A New Document with a web
| | 01:56 | Intent, I'll choose 1024x768 from the default
Page Sizes, but I am going to change the Height
| | 02:02 | to 1500 pixels, because my page is going to have
content that requires it to be longer than it is wide.
| | 02:09 | I am going to leave columns alone right now,
because I establish my column grid using guides
| | 02:14 | inside of the document, rather than using actual
InDesign columns here in the New Document dialog.
| | 02:20 | The underlying grid for my page is going
to be based on the 960 grid system, which we
| | 02:24 | covered earlier in this course.
| | 02:26 | So I am going to clear out these Margins to 0,
then deselect, make all settings the same,
| | 02:33 | and give myself a 42
pixel Left and Right Margin.
| | 02:38 | That's going to be an area of 940 pixels,
when I subtract those two values from 1024.
| | 02:45 | I'll click OK, and there's my page with my
margins, and this whole center area spans 940 pixels.
| | 02:52 | The first thing I am going to do is go to my
Master page for this document, double-click
| | 02:56 | on that, and establish some
guides on this Master page.
| | 03:01 | From the Layout menu I
will choose Create Guides.
| | 03:06 | I don't need Rows, but I do need Columns.
I'm going to create a 12 column grid.
| | 03:10 | I will fill 12 in the Number field, and I
want all of those columns to have a 20 pixel
| | 03:17 | Gutter, and I want the Guides for my
Columns to be relative to the page Margins.
| | 03:22 | It's a very different thing to
make them relative to the page.
| | 03:25 | When I select that the Column Widths and the
placement of the Gutters are completely different.
| | 03:30 | I want my 12 columns within my Margins.
| | 03:33 | So I'll make sure Margins
is selected and click OK.
| | 03:36 | So now I have 12 columns
that span a total of 940 pixels.
| | 03:40 | There is a 20 pixel Gutter between
each, and each Column is 60 pixels wide.
| | 03:46 | This is the structure upon which I'm going
to build all of my content, but I need to
| | 03:50 | add two additional Guides.
| | 03:52 | We are working with the 960 grid system,
and I am going to zoom up here a little bit,
| | 03:57 | so I can place my guides more precisely.
| | 03:59 | I am going to drag out a vertical guide
from the left and put it at the 32 pixel point.
| | 04:04 | That's 10 pixels outside of my outer margin.
| | 04:08 | I'll move over to this side,
and I'll drag out another guide.
| | 04:11 | This position at the far
end of my column is 982.
| | 04:14 | So I am going to pull this out 10 pixels beyond that
to 992, and I'll zoom back out to view the whole page.
| | 04:21 | Now I've got 12 columns that fall within 940
pixels and an additional 10 pixel buffer on
| | 04:26 | either side to keep all of my content away
from the edges of the browser window or the
| | 04:31 | smart phone or tablet screen.
| | 04:34 | Those extra 10 pixels on
either side give me a 960 pixel grid.
| | 04:38 | Next, I'll go to the Layers panel,
and I'm going to create a New layer.
| | 04:43 | It's automatically created on top of this layer.
| | 04:45 | I am going to select all of these guides
and then by holding on this little square here
| | 04:51 | in the Layers panel, I am going to click,
hold, and drag that up to move all of my guides
| | 04:55 | onto their own layer.
| | 04:57 | I'll double-click the layer name and in the layer
Options dialog, I'll name this 12-column grid and click OK.
| | 05:06 | While I'm on this layer, I am going to add one
more horizontal guide at about the 700 pixel mark.
| | 05:12 | That gives me a visual reminder of what my
screen real estate is on a 1024x768 monitor.
| | 05:17 | This is a line that tells me what's going
to fall above the fold and below that line
| | 05:23 | is where people are probably going to have
to start scrolling on a screen that size.
| | 05:28 | So now I've got all my guides in place.
| | 05:30 | With them all on their own layer, I can then
selectively hide and show them at any point
| | 05:34 | during the process.
I'm going to lock this layer.
| | 05:37 | So I don't ever accidentally select any of these
guides and disturb my underlying page structure.
| | 05:43 | The next thing I want to do is bring that
sketch that I created into this document,
| | 05:47 | so I have a reference to
start building a rough wireframe.
| | 05:50 | I am going to switch to this bottom layer, and I
am going to double-click it and rename it sketch.
| | 05:56 | Then I'm going to place that PDF that was
exported from my Adobe Ideas sketch by placing
| | 06:03 | the template_sketch.pdf file, but before I
click open, I am going to hold down the Shift
| | 06:08 | key so that when I click open, I'll get
the Import Options dialog box where I want to
| | 06:13 | show a few interesting things about this file.
| | 06:16 | In the Place PDF import options dialog I
get a preview of what I'm about to place, but
| | 06:22 | I also get access to the layers that are in
this file and one of the reasons I like to
| | 06:25 | export from Adobe Ideas to PDF is that
it preserves the layers in my sketch.
| | 06:31 | So I had a layer at the top, which was all
my little yellow scribbled notes, and I can
| | 06:36 | selectively turn that on or off.
| | 06:39 | This layer here is all of my blue
lines for the actual layout of the page.
| | 06:43 | This bottom layer is the default
photo layer that in every Ideas document.
| | 06:47 | I'm not using that layer here,
but I don't have any content in it.
| | 06:50 | So I don't have any
reason to actually turn it off.
| | 06:54 | I am going to leave everything on now.
| | 06:55 | So I have all my notes as
reminders for the time being.
| | 06:57 | Now I'll click OK, and then I am just
going to click and drop this onto the page.
| | 07:04 | So it appears on the sketch layer, which was
my active layer at the time. It's not to scale.
| | 07:09 | So I'm going to scale this up by placing its
top left corner in approximately the top left
| | 07:17 | of my actual grid area.
| | 07:19 | Switch to the Scale tool by hitting the S
key, and I am going to click right about at
| | 07:24 | that point where I want to start scaling
from and Shift+Drag to the right until it pretty
| | 07:31 | much fills whole 960 pixel space.
| | 07:34 | Now my sketch is more in the size and proportions of
the area that I am actually going to be working in.
| | 07:40 | As I start to work, this sketch could
actually start to be quite distracting.
| | 07:44 | So one of the things I can do to make this
more like say an Illustrator template layer
| | 07:48 | is with the object selected, go to the Effects
panel and knock the Opacity of this back to about 50%.
| | 07:56 | I can still see everything and use it as a
reference, but it's not as overwhelming at this point.
| | 08:02 | Just so that I don't accidentally select this
later on at any point, I'm going to lock this layer.
| | 08:07 | Now I want to use this rough sketch to start
building out much more precise regions for my page template.
| | 08:14 | First, I am going to need to create a New
layer, because I've locked all the layers
| | 08:18 | in this document, and I am going to start
defining regions of the page just by drawing
| | 08:22 | out rectangle shapes and building a wireframe.
| | 08:25 | So I'll go to the Rectangle Frame tool and
the first thing I am going to create is an
| | 08:31 | area about the size of my content well.
| | 08:35 | My main page content is going to be 640 pixels,
and I can control all of this in the Control panel.
| | 08:41 | That came in at 650, so I am just going to
knock it down by 10 and my content is to start
| | 08:48 | at roughly 200 pixels up on the page.
| | 08:52 | That's about the size I
think my header is going to be.
| | 08:54 | I can draw a guide in on this layer that is
unique to this layer and not part of the 12
| | 09:00 | column grid, and I'm going to
fill this with white or Paper.
| | 09:05 | Now the first thing it does is it
starts to obscure my background sketch.
| | 09:09 | That's easily fixed by going to the Layers
panel and grabbing that sketch layer and moving
| | 09:13 | it up over my working layer.
| | 09:16 | Now I have it more as an overlay, because
that placed PDF came in with a transparent
| | 09:20 | background, and I can see right through it.
| | 09:23 | So now I am going to start
blocking out a few more rectangle frames.
| | 09:25 | I am going to zoom in a little bit at the
top and start building areas for my header.
| | 09:31 | I'll go to the Rectangular Frame tool and
make sure that I am on my working and unlocked
| | 09:36 | layer, and I am going to click from here
and just draw out a frame for where my logo is
| | 09:41 | going to be placed.
| | 09:42 | I'll go to the Swatches panel and give that
a Fill of black, and now I can precisely say
| | 09:48 | that I want my logo to be roughly 160x160,
and that puts a box there at exactly that
| | 09:54 | size, and it's at my
precise 32 pixel guidelines there.
| | 10:00 | Next I will define a region for my nav bar.
| | 10:01 | I am going to draw out a frame that
is 800 pixels wide by 42 pixels high.
| | 10:08 | That's a decent nav bar height.
| | 10:11 | I'll line it up right alongside that logo,
and it aligns to the outer edge of the page.
| | 10:15 | I'll just Fill that with black,
and I'll Tint it back to about 50%.
| | 10:21 | I'll draw another frame from that same top
point down to about 200 pixels, and I am using
| | 10:27 | the live guide information as I draw
to get that height. This is 960x200. That's perfect.
| | 10:35 | I'll give that a Fill of black, but I'll make
it about 15%, and I'll send that to the back.
| | 10:42 | So there are most of my header elements.
I've got a content well here.
| | 10:46 | I am going to Shift+Option+Drag this
frame over and reduce its Width to 320 pixels.
| | 10:54 | That's going to be my sidebar area.
| | 10:55 | I'll Fill that with black at a percentage
of about 70 and just make sure it's aligned
| | 11:01 | up at the far edge.
| | 11:04 | Next I want to create a footer area at the
bottom that's going to be about 200 pixels high.
| | 11:08 | So I am going to select this frame up here
and Shift+Option+Drag it down to the bottom
| | 11:12 | of the page, choose Object > Arrange > Bring
to Front, and that's going to be my footer.
| | 11:22 | Now my sketch is actually
becoming a bit distracting.
| | 11:26 | So I am going to temporarily hide
the visibility of that sketch layer.
| | 11:30 | Now I've got the basic regions of my page
blocked out in exact pixel dimensions, and
| | 11:35 | I can start planning my design based on this.
| | 11:38 | If I wanted to, I could start building out
an additional layer structure by taking these
| | 11:42 | individual items and moving
them onto their own layers.
| | 11:45 | Let's say, for example, I wanted to grab
these three frames, create a new layer, move all
| | 11:52 | of the frames up to that, and call it header.
| | 11:55 | I can then create a top to bottom organization
using layers, which is something I will typically
| | 12:00 | do in my design work, and I can
do it right here from the start.
| | 12:03 | The last thing I am going to do is preserve this as
a template that I can continue to open up later on.
| | 12:09 | I'll go to File > Save As,
I'll choose InDesign CS6 template.
| | 12:15 | I am just going to save this on
my Desktop as site_wireframe.indt.
| | 12:22 | Click Save and then close the document.
| | 12:26 | Now when I am ready to get back to this
project and start the design process, I can go to
| | 12:30 | File > Open, go to my Desktop or wherever
that file is, choose that InDesign template,
| | 12:37 | click Open, and a new untitled document opens
with all of my basic blocked out content areas,
| | 12:43 | all of my guides, and all of my
layering already established for me.
| | 12:47 | So as you can see, even working from a rough
sketch, you can set yourself up for a consistent,
| | 12:52 | well-planned skeleton upon
which to build your pages.
| | 12:55 | Although it's a simple wireframe consisting
of simple content blocks, it positions you
| | 12:59 | for a faster, more efficient
design process right from the start.
| | Collapse this transcript |
| Designing the header and the footer| 00:00 | An essential part of Web Design is a
consistent user experience throughout a site.
| | 00:05 | From page to page, you don't want the user
to encounter nonstandard interface elements.
| | 00:10 | Things like a Header, Footer, and Navigation
should be the same across the site, to make
| | 00:14 | the user's interaction with it
easy, familiar, and intuitive.
| | 00:18 | In print we do similar things with repeating
elements like page folios and running headers
| | 00:23 | placed on Master pages, to guide the
reader through a book, brochure, or magazine.
| | 00:28 | We can do the same thing when
using InDesign for Web Design.
| | 00:32 | In the last movie I created a basic wireframe
template upon which to start designing a site.
| | 00:38 | In this movie I am going to Open a slightly
more developed version of that, by going to
| | 00:44 | this site_wireframe.indt template file in
the Exercise Files folder and clicking Open.
| | 00:52 | It's still a basic wireframe, but the Layers panel
has been fleshed out considerably from the last version.
| | 00:59 | There are additional Swatches in place, as
well as Object, Paragraph, Character, and Table,
| | 01:05 | and Cell Styles. These are all in here to
speed up the development of this design, the
| | 01:10 | individual components of which we've covered
in previous chapters and movies in this course.
| | 01:15 | The first thing I am going to do is go to
the Pages panel and go to the Master Page.
| | 01:19 | That's where I want to start working, because
everything I do here, I want to see on every page of this site.
| | 01:25 | I'll zoom in a little bit, and I'm going
to place the logo in this top box up here.
| | 01:32 | You can see in the Layers panel this is on its
own layer, so everything is nicely isolated here.
| | 01:37 | I am going to hit Command+D or Ctrl+D,
navigate to that logo in the Exercise Files folder,
| | 01:45 | place it in this box, and I want to
set the background to just a solid Black.
| | 01:50 | In this frame I'm going to been placing my
site navigation, and I have an Object Style
| | 01:55 | for my navbar here called navbar.
| | 01:58 | I'll click and apply that, and that gives
me this Gradient, and it's going to multiply
| | 02:02 | blend mode, that's going to help interact
with background image. And into this frame,
| | 02:07 | I'm going to place the text for my navbar.
So I'll go File > Place navigate to the content
| | 02:15 | folder and to my main_nav.txt file, and this
is just a list of text items that are going
| | 02:23 | to be part of my navigation.
| | 02:25 | From the Table menu I am going to Convert
Text to a Table because that's how I'm setting
| | 02:29 | up my navbar, and we
covered this in a prior chapter.
| | 02:33 | The Text is converted to a Table, using
the Paragraph Separator, and I'm going to use
| | 02:38 | an Existing Table Style called nav, click OK.
| | 02:42 | Table in Cell Styles always require a tiny
bit of adjustment so I'm going to select this
| | 02:47 | because I can't define the height in a
Table Style, and I'm going to make it Exactly 42
| | 02:52 | pixels, which I know is the height of nav.
And while it's still selected I'm going to
| | 02:58 | Window > Styles > Cell Styles, and I'm going to
clear out all the overrides that Cell Styles
| | 03:05 | think are applied anytime something
deviates when you apply a Table Style.
| | 03:09 | So I'll click Clear Overrides and Selection
button, and now I get the look that I want
| | 03:14 | for this navbar, and I am ready to move on.
| | 03:17 | This frame is going to be where I place
what's called a hero image, which is a large image
| | 03:21 | that appears at the top of the page, and
it's going to fall behind the navbar, and it's
| | 03:26 | going to be different on every page, so I don't
want to place a specific image in here right now.
| | 03:32 | But what I do want is to apply an Object Style
called hero_image that has an Auto-Fit attribute
| | 03:39 | on it and ensures that whatever image I do drop in
on my document pages, it will fill the entire frame.
| | 03:45 | With these basic header elements in
place, I am going to move on to the Footer.
| | 03:49 | I'll close the Tables and Cell
Styles dialog, so I am done with that.
| | 03:53 | And at the bottom of the page I am just going
to format this frame with this pale tint for
| | 03:57 | my Footer, and I'm going to bring in the Text
that was supplied to me for the Footer, which
| | 04:02 | is a number of individual text based links.
| | 04:05 | I'll go to File > Place, to my
content folder, and place footer.txt.
| | 04:12 | I'll click Open, and I can't click in this
frame, because it's going to try to place
| | 04:17 | the text in this frame.
| | 04:18 | So I'm going to move over to the
pasteboard and drag out a frame for this.
| | 04:24 | I am actually going to split this into three
separate groups, so I'll cut the first group
| | 04:29 | of links, put it in its own frame, cut the
second group of links, put it in its own frame,
| | 04:38 | and this third group of links, I'll put into
its own frame, then this Copyright information
| | 04:48 | is going to be in a separate frame.
| | 04:50 | I am going to bring all these over to this
Footer area, and I am going to drop them in
| | 04:58 | place and make each one of them exactly 320
pixels across. That measurement is a third
| | 05:10 | of my entire page area.
I know that because 960 divided by 3 is 320.
| | 05:17 | I can use my smart guides to align them altogether,
and then I am going to select all three frames
| | 05:25 | and in the Control panel make each one of
them a two column frame, and I am going to
| | 05:30 | turn on Balance Columns.
That's going to evenly divide everything.
| | 05:35 | Next, I'll select all the text in the first
frame, go to the Paragraph Styles panel, and
| | 05:41 | I'll right-click on my h1_footer style and
choose Apply "h1_footer" then Next Style,
| | 05:48 | and that formats everything in this frame.
| | 05:51 | I'll select the Next, do the exact
same thing, and the last, and do it again.
| | 05:59 | Now I have got all of my Footer links in place,
and I am just going to bring up this little
| | 06:04 | Legal Copyright line, select the text in that
and apply the Footer Legal Style, and I want
| | 06:12 | to run this all on one line, so I'll get
rid of that superfluous Return in there.
| | 06:17 | And now I have placed my Footer Elements on
the page, I can go to Object, Fitting, Fit-Frame
| | 06:23 | to content to shrink up the text frame so
that it's not hanging down below my page.
| | 06:28 | So now in a few short steps applying my styles, I've got
a Header and Footer clearly established for this document.
| | 06:36 | When I go to the Pages panel, and double-click
the Document page, this is ready for me to
| | 06:41 | start designing actual content into, and I
can continue to create pages in my document,
| | 06:48 | based on this master.
| | 06:49 | And any design changes that I make from
this point forward to the Header or the Footer,
| | 06:54 | because they're on this Master, will roll out to
every single page in the document where it's used.
| | 06:59 | A consistent navigation and Header and
Footer scheme for a website is essential, and the
| | 07:04 | easiest way to keep that consistent is
to build those elements on a Master page.
| | Collapse this transcript |
| Using separate InDesign files for a modular template| 00:00 | The kinds of standard elements you see on
all pages of a site, its header, nav bar,
| | 00:05 | and Footer typically, are rarely
coded directly into that page's HTML.
| | 00:10 | More often than not, these site wide modules
are separate files inserted dynamically into
| | 00:16 | that page when the browser asks for it.
| | 00:19 | This is typically done using a server-side
or PHP include statement, and you can actually
| | 00:23 | take a similar protein InDesign by
breaking your site wide elements out into separate
| | 00:29 | InDesign documents, then placing those
individual documents back into a more modular template.
| | 00:35 | Let's take a look at what I mean.
| | 00:37 | I am going to choose File > Open and open up the
site_template.indt file that's in the Exercise Files folder.
| | 00:46 | That opens a new untitled
document using my existing template.
| | 00:50 | I'll open the Pages panel and go to the
master page where all of my elements reside.
| | 00:54 | Then I'll switch to Layers panel, because I am
going to be using that to select certain items.
| | 01:00 | At the top of the page the logo and the nav bar
are items that are going to appear on every page.
| | 01:07 | One approach is exactly what we have here to
keep it on the master page of this document.
| | 01:12 | But another approach is to remove these from
this document, and control them from a completely
| | 01:17 | separate InDesign document.
| | 01:19 | So while I have the two selected, before I
cut them to the clipboard, I want to take
| | 01:23 | advantage of the information I get in the
control panel, which shows me that this entire
| | 01:28 | selection, these two objects together, are
960 pixels across by 150 pixels deep, and
| | 01:35 | that tells me exactly what
size to create my new document.
| | 01:38 | So I'll cut these objects to the clipboard,
create a new InDesign document with a Web
| | 01:43 | Intent at exactly that size 960x150, and
I'll set the Margins to 0 all the way across
| | 01:52 | the board and click OK.
| | 01:55 | I can now paste what I copied into this
document, and you may notice that I've got pink font
| | 02:01 | highlighting in here which
indicates a missing font.
| | 02:04 | Now the font wasn't missing
in the original template file.
| | 02:06 | However, that file was saved in a folder
that had a Document Font's folder that included
| | 02:12 | the necessary fonts and they
were available to that document.
| | 02:16 | This document has not been saved yet.
| | 02:18 | It doesn't know that it has document fonts
available to it until I save it into a location
| | 02:23 | with a document fonts folder, close it and then
reopen it, and I'll demonstrate that in a moment.
| | 02:28 | But first InDesign has a pesky habit of
not putting things in exactly at 0 and 0.
| | 02:34 | So before you save and close this document,
you want to make sure that you take a look
| | 02:38 | at those X, Y coordinates and make sure
that they reflect 0 and 0 in the top left.
| | 02:43 | I really don't need to do anything else here
except save the document, and I'll call this
| | 02:48 | brand_and_nav.indd, and I am going to save
it in this same Exercise Files folder where
| | 02:56 | that Document Fonts folder is.
| | 02:58 | I'll click Save, I'll close it, and let me just open
it again to see that the font issue is resolved.
| | 03:06 | I'll double-click it.
| | 03:08 | When I open it again now that it knows it's
sharing the same directory as the Document
| | 03:13 | Fonts folder, I no longer
have the pink highlighting.
| | 03:17 | I can take the same approach with the footer,
and I can just Option-click the Footer layer
| | 03:22 | in my Layers panel.
| | 03:24 | I'll take a quick look up in a
control panel that's 960x240.
| | 03:29 | I'll cut it to the clipboard, create a New
Web Intended document that is also 960x240,
| | 03:37 | and I'll set its Margins
to 0 all the way around.
| | 03:41 | Click OK, paste my footer content in there,
same font problem, but it will be resolved
| | 03:46 | the exact same way.
| | 03:48 | Check the Control panel to make sure everything is at 0
and 0, save the document as footer.indd, and close it.
| | 03:57 | Lastly I'll do the same thing with the sidebar.
| | 04:00 | I'll just Option-click this Sidebar Content
layer, and that's really why I use layers,
| | 04:04 | it makes it very easy to just
grab everything on a layer at once.
| | 04:08 | I'll take a look up here.
I have got 320 pixels 902.66 pixels.
| | 04:14 | Now I know in earlier movies I've cautioned
about doing your best in web design to keep
| | 04:18 | things at exact pixels, but here I
am actually bending that rule a bit.
| | 04:23 | All of the frames here in the Sidebar have
autosize turned on as part of their text frame
| | 04:29 | attributes and autosize doesn't let you
round up to the nearest number, but the autosize
| | 04:34 | functionality has allowed me to pull off some
nice interesting reflow tricks here in these items.
| | 04:40 | So I'm going to err on the side of getting
what I want in my mockup, and I'll deal with
| | 04:44 | that rounded pixel at a later
time when I hand it off to a developer.
| | 04:49 | So bearing that in mind, I am going to cut
this to the clipboard and create a new InDesign
| | 04:53 | document with a Web Intent that's 320x903.
| | 04:58 | I am going to round it up here in the document even
though my content falls a little bit short of that.
| | 05:06 | Again, Margins at 0, I'll click OK, paste the
content on the page, adjust its X, Y coordinates to 0.
| | 05:17 | You'll notice that the height of the
selected object is entirely different here than when
| | 05:21 | I copied it, and that's
because the font is missing.
| | 05:24 | So these adjustable frames are
adapting to this placeholder font.
| | 05:29 | So nothing quite lines up exactly right here.
| | 05:31 | But as soon as the font problem is
solved so will the height problem be.
| | 05:35 | I'll Save this as sidebar.indd and close it.
| | 05:42 | Now I'm back in my original template file
with all of my design content missing, and
| | 05:48 | I want to re-place all of these little modules
that I've created in separate InDesign documents
| | 05:53 | back into the template.
| | 05:55 | So from the File menu I'll choose Place, and I
am going to grab all three at once, sidebar.indd,
| | 06:01 | footer.indd, and brand_and_nav.indd.
| | 06:06 | I'll click Open and the first one that shows
up here with this little preview is my header.
| | 06:13 | I'll just click and drop that on the page,
I have got my footer, I'll click and drop
| | 06:17 | that down here temporarily, and my
sidebar, I'll drop that down here as well.
| | 06:22 | Notice that any part of my InDesign document
that doesn't have content is actually transparent.
| | 06:27 | I can see right through it,
which is really helpful.
| | 06:30 | So I can just drag this into position
exactly where I want, and I do want it at 32 pixels
| | 06:36 | from the left and 0 pixels from the top.
| | 06:39 | My footer I want to drop in also, align to
that 32 pixel mark, if it's not exact I can
| | 06:45 | adjust it in the control panel.
| | 06:47 | I want is to align exactly the bottom of my
1500 pixel high page so I am going to check
| | 06:53 | this bottom proxy and type in 1500 here, and that
will snap that right down to the bottom of the page.
| | 07:02 | Lastly, I'll put in my sidebar, and I want that to
snap in over here and be at 200 pixels at the top.
| | 07:12 | So I'll just type that in there.
| | 07:15 | So now I've got the same look and feel in
my template except I'm dealing with outside
| | 07:20 | resources for all of
these standard page elements.
| | 07:24 | So someone else could theoretically be
working on changes to the nav bar or changes to the
| | 07:28 | sidebar content or adjustments to the footer
and those will, when they are updated, show
| | 07:34 | up for me as links that need to be updated.
| | 07:37 | If I'm just working on this myself, and I
want to make it change to something in the
| | 07:40 | sidebar, I can actually Option+Double-click
it the same way I would do any linked image.
| | 07:46 | It will open up that InDesign file.
I can start making a change in here.
| | 07:51 | Let's say, for example,
one of those links comes out.
| | 07:55 | My little autosize trick
adjusts everything accordingly.
| | 07:59 | I can save sidebar.indd, and when I come back
here it automatically updates in my document.
| | 08:09 | I can then save this as a new template called
site_template_modular.indt and then whenever
| | 08:21 | I am ready to start working on page design
using this more modular approach, I will just
| | 08:26 | open this template.
| | 08:27 | The only thing I'll caution about this
particular approach is it does keep things discreet,
| | 08:32 | separate, and very convenient to drop in, and it
eliminates the number of objects on your master page.
| | 08:38 | But if your goal is to start using things
like InDesign's Liquid Layout features and
| | 08:42 | keep the objects on your page a little bit
more flexible then these items are not going
| | 08:47 | to adapt the way native InDesign
objects on a page are going to adapt.
| | 08:52 | So you have to think about what your goal
is and then create the kind of template that
| | 08:56 | works according to that goal.
| | Collapse this transcript |
| Adding layout variations with master pages| 00:00 | Earlier in this chapter, I mentioned that
when I approach a web design project, the
| | 00:04 | first page I design a template for
is the one that will be used the most.
| | 00:09 | I can then use that as the foundation
to build pages that differ slightly.
| | 00:13 | Now that I've got a solid Master page built,
I can start adding variations for those pages
| | 00:18 | on my site that deviate from the norm.
| | 00:21 | I am going to open up the site_template
file that I've been working on.
| | 00:25 | This is in your Exercise Files folder,
and it opens up a new untitled document.
| | 00:30 | I am going to go to the Pages panel and go
to my Master page and then to my Layers panel.
| | 00:36 | Now when I originally created this, I
built it based on an initial sketch I had done,
| | 00:41 | which you can see still
down here on this hidden layer.
| | 00:44 | I will click, drag, and move it up to the top,
so we can see what that actually looked like.
| | 00:50 | I'm going to unlock this layer and select
the placed image and get rid of some of my
| | 00:55 | distracting notes by right-clicking and
then going to Object layer options and shutting
| | 01:01 | off the layer in that PDF where my notes appear.
| | 01:04 | This is another reason why I love to use
layered PDFs saved out from a sketch in Adobe ideas.
| | 01:09 | I will click OK, and now I'm
just looking at my initial sketch.
| | 01:14 | Well, this is a sketch for most of my site,
where say 90% to 95% of my pages are conform
| | 01:21 | to this layout, but I also did a sketch for
the site's homepage, and I am going to swap
| | 01:26 | out this placed sketch for that homepage sketch.
| | 01:29 | I will hit Command+D, and I will navigate
to the Sketches folder in the exercise files
| | 01:34 | folder, and I'm going to choose the home_sketch.pdf
file. Replace Selected Item is on, so it's
| | 01:42 | going to replace the sketch that's in here.
| | 01:43 | I'll hold down the Shift key and click
Open and since I had the Shift key down, I get
| | 01:48 | my options for showing and hiding Layers.
| | 01:52 | To eliminate visual distractions, I am going to
shut off that layer of notes and just concentrate
| | 01:57 | on the sketch and see how it
differs from my existing Master.
| | 02:00 | I will click OK, and that sketch gets
swapped out for the sketch that was already placed.
| | 02:06 | I may have to reposition it a little bit,
because these are hand-drawn sketches, so
| | 02:09 | they are not an exact match.
| | 02:11 | I will scale it a little bit just so I can
get a little bit more accurate representation
| | 02:17 | of what I had sketched out, and it's
pretty close in most of its structure.
| | 02:23 | It shares the logo, in shares the nav, it
shares the footer, but it doesn't have the
| | 02:28 | same sidebar, and it has a
much deeper hero image area.
| | 02:32 | So I can make those adjustments by creating
a new Master page where I keep all the things
| | 02:37 | that are the same but I start to take away things
I don't need and modify things that are different.
| | 02:44 | So I will switch to the Pages panel and the
first thing I am going to do is more clearly
| | 02:47 | name this existing Master page, now that I am
going to be creating additional ones based on it.
| | 02:52 | This is the default InDesign naming convention.
| | 02:54 | I will click the Panel menu in the Pages panel, go to
Master Options for "A-Master" and call this A Standard.
| | 03:04 | This is my standard page template.
| | 03:06 | I will then go back to the
Panel menu and choose New Master.
| | 03:11 | It gives it the B Prefix which is fine, I
tend to just ignore that, but I'll call this
| | 03:16 | Home, and I'm going to Base it on that
A-Standard Master, and I will click OK.
| | 03:23 | So now because I've created this new page
based on all the elements on this Standard
| | 03:29 | Master page, I can't
actually select anything here.
| | 03:32 | I have to detach items from the Master page
in order to work with them and make variations.
| | 03:37 | And the first thing I want to detach from
the Master page is this Sketch layer, and
| | 03:42 | to quickly detach the object, I'm going to Shift+Command
or Shift+Ctrl, click where that placed sketch is.
| | 03:48 | I am going to go to the Effects panel, and
I'm going to lower its Opacity to about 50%,
| | 03:57 | so it's less distracting.
| | 03:58 | I will go back to the Layers panel, I will
lock that Sketch layer, because I need to
| | 04:03 | use it as a visual reference on top of all
my other page elements, but I need to select
| | 04:08 | those objects underneath
it, so I need it locked.
| | 04:11 | The first thing I am going to do is expand the
depth of this hero image, which in my homepage
| | 04:16 | sketch goes all the way down to here.
| | 04:18 | So I'll Shift+Command-click
where that hero image is on the page.
| | 04:22 | It moves me to that layer, releases the
object from the Master, and now I can drag it down
| | 04:27 | here, and I want to get it to an exact position.
| | 04:30 | So I'll make it 378 even, and my
homepage doesn't actually have a sidebar area.
| | 04:37 | It has similar boxes to the sidebar,
but it has a different kind of layout.
| | 04:41 | So I don't need this sidebar panel at all.
| | 04:44 | So I'm going to Shift+Command-click or Shift+Ctrl-click
on the first sidebar item here to release it and delete it.
| | 04:52 | Then the next, Shift+ Command-click
the next and then the last.
| | 05:00 | My footer is staying exactly where it is and
the way it is so nothing is going to change there.
| | 05:06 | I'll continue to take this Shift+Command-click,
Shift+Ctrl-click approach to release certain
| | 05:11 | page items that need to differ
from the Master that it's based on.
| | 05:15 | So I will Shift+Command-
click in this content area.
| | 05:19 | In the Layers panel, I can see I am in the
Main Content layer, and that's a placeholder
| | 05:23 | text frame for actual page content
to be floating on the document pages.
| | 05:28 | For now, I am going to pull down the top of
this frame so that I can work on objects behind
| | 05:32 | this frame, and I am going to release some
of these locked layers for the background,
| | 05:37 | including Content Background, Content
Well Background, and Sidebar Background.
| | 05:42 | I will click in this area where the
Sidebar Background is bound to be.
| | 05:47 | First I am going to click on the Pasteboard
to release the selection of this object, and
| | 05:51 | then I'll Shift+Command-click
where my Sidebar Background is.
| | 05:55 | I can see that's what I have selected here
in the Layers panel, and I'm just going to
| | 05:58 | delete that, and that's
revealing what's going on behind it.
| | 06:02 | So I'm going to Shift+Command-click again
to release this Content Background and pull
| | 06:08 | that all the way over here to my full 960
pixel width, and I'm going to relock these layers.
| | 06:20 | So now I've opened up my existing Master page,
removed items that I don't need, and created
| | 06:25 | a new Master page that will be
appropriate for my homepage design.
| | 06:30 | Items like the logo, the nav bar, these
vertical black bars on the side and the footer, all
| | 06:35 | remain linked to the Main Master page.
| | 06:38 | So if I change them there, I change them everywhere,
but my homepage has a slightly different structure.
| | 06:45 | So now in my Pages panel, I've got my Standard
Master and my Home Master, and I can continue
| | 06:50 | to do this for any other pages on the site
that have a niche look and feel, but share
| | 06:55 | these common elements just by creating a
New Master, basing it on the closest master to
| | 07:00 | it, and modifying its individual master elements.
| | 07:04 | Just as I benefit from basing styles and
other styles and get greater flexibility, I can
| | 07:09 | also base Master pages on other Master pages,
controlling common page elements from one
| | 07:14 | page, while getting design
flexibility and variation on others.
| | Collapse this transcript |
| Adding custom page content| 00:00 | With a working skeleton upon which to build,
in the form of a tightly designed template
| | 00:05 | and strong Master pages, it's time to
start fleshing out your site design with unique
| | 00:10 | content for your site's individual pages.
| | 00:12 | I am going to open up the site_template that's
in the Exercise Files folder, and that creates
| | 00:19 | a new untitled document but I'm no longer
going to be working on the Master page items,
| | 00:24 | the repeating items have pretty much
been nailed down for the time being.
| | 00:28 | I'm going to start bringing in some of the
content and information for the individual
| | 00:32 | pages that's been supplied by my client,
start dropping it into the appropriate areas, and
| | 00:37 | seeing how my pages take shape with
real content and information in them.
| | 00:42 | Right now, my document only has one page in
it, and I am going to start by bringing in
| | 00:46 | the contact from one of the pages on the site.
| | 00:49 | I'll go to the File menu and choose Place,
and in the content folder I am going to choose
| | 00:54 | the about.txt file, click Open.
| | 00:59 | And when I hover over this region of the page,
which is my main content well, you'll notice
| | 01:04 | my cursor changes, you've seen this in print.
| | 01:08 | This is indicating that there is a
textframe on the Master page that's ready to receive
| | 01:13 | text into it, I don't
have to draw out a new frame.
| | 01:15 | So all I have to do when I see that cursor
is click, the textframe is overridden from
| | 01:20 | its Master Page item, and because there is
an Auto-Fit it automatically shrinks up to
| | 01:25 | fit the content and only the content.
| | 01:27 | I am going to zoom into 100% so we
can see what we've got going on here.
| | 01:31 | And the first thing I am going to do is
start applying some styles and formatting to the
| | 01:35 | text in this document, and this should be
very familiar territory, it's no different
| | 01:39 | than what you do when you're starting out
a print project you get your text in, you
| | 01:43 | start establishing styles.
| | 01:44 | I've already built my styles, they are in this document,
and we walked through that process in earlier movies.
| | 01:50 | So I'm going to start by quickly applying
things the way I typically would, if I were
| | 01:55 | doing this from scratch I'll be trying
things out, making adjustments, creating styles,
| | 02:00 | modifying styles, that sort of thing.
| | 02:02 | But right now I am just going
to apply what I've already done.
| | 02:04 | And my approach with styles is I always start
by applying the style that's going to be used
| | 02:10 | to the most content to everything
and then winnowing down from there.
| | 02:14 | So I'm going to select everything in this
frame, open the Paragraph Styles panel, and
| | 02:19 | apply my p_main style, that's my main body
copy style, and about 95% of what's in this
| | 02:26 | frame is going to use that style.
| | 02:29 | From there, I'll start looking at what some
of my headings are, this first-line up here
| | 02:33 | is my top-level heading, like h1-main,
and I can apply an existing style for that.
| | 02:39 | I've got a secondary heading
down here, and a style for that.
| | 02:44 | This is a third level heading,
I have got a style for that.
| | 02:48 | This one could go either way, but I'm going to
assume it's an h3, my client tells me otherwise
| | 02:54 | I can easily just apply a different style to it.
| | 02:58 | Most of these heading styles have a space
before attribute so I don't need some of the
| | 03:03 | extraneous spaces that are in here that
always come with imported text files or word files,
| | 03:08 | so I can just delete them. And that starts
to tighten up my formatting here I've got
| | 03:13 | an instruction in the text that I need to
embed a Google map, that's clearly a web function
| | 03:18 | but I can certainly put in a
placeholder image at the moment.
| | 03:21 | I can delete that text from
here, delete that extra Return.
| | 03:28 | Switch to the Selection tool, deselect my
textframe so I don't accidentally replace
| | 03:32 | it, and place an image from my images
folder, which is a Google map placeholder.
| | 03:40 | In later chapter we'll take a look at how
you can actually place in, a live Google
| | 03:45 | map placeholder that will work in
HTML but I'm getting ahead of myself.
| | 03:51 | So I'll drop this map in on the page here,
roughly align it with my content, and as I
| | 03:56 | said this should all be very familiar and
comfortable, these are all the same things
| | 04:00 | you do when you are
laying out content for print.
| | 04:03 | It's a little bit more linear and
structured, that's about the only difference.
| | 04:06 | So I'll set all the values to be the same
on a Text Wrap for this object, that's a bit
| | 04:12 | much, and I'll put about a 20 pixel Text Wrap
around that so it pushes some of the content away.
| | 04:18 | All of this is subject to change as I
continue to work through this layout.
| | 04:22 | I love the Auto-Fit capability here
because as this type gets bigger, and I need more
| | 04:28 | room in the frame it just keeps growing and
accommodating, and I'm not making adjustments
| | 04:32 | all the time by pulling down and opening
up a textframe that has overstepped text.
| | 04:38 | So there is one page of content roughly dropped
in, roughly formatted, I can do the same thing
| | 04:44 | by adding another page, using the same
template, hitting Command+D or Ctrl+D on Windows to
| | 04:51 | place another page of content.
| | 04:53 | Let's say the academic programs page,
drop it in here, and repeat the process.
| | 05:01 | Select everything, give it the most common
style, again, this is my approach, and then
| | 05:06 | start assigning the individual
styles from that point forward.
| | 05:10 | Right now, this is mostly text that I've
dropped in, but one thing that's missing here on each
| | 05:14 | of the individual pages is what the
hero image at the top is going to be.
| | 05:19 | On each page I want something unique and my Master
page already has a frame ready to receive an image in it.
| | 05:26 | So I'm going to hit Command+D here and go
to my images folder and pick one of my accent
| | 05:33 | images, these little bits of metal
type that looks good for now, click Open.
| | 05:37 | And as with the textframe on a Master page
ready to receive content my cursor changes
| | 05:42 | when I hover over an
image frame on a Master page.
| | 05:45 | I'll just click, and it drops
right into place on that page.
| | 05:49 | I can go back to the first page in the document
hit Command+D or Ctrl+D again, pick a different
| | 05:54 | accent image you need for this page and
drop it right into that placeholder frame.
| | 05:59 | And now in just a few clicks and a little
bit of formatting my pages are starting to
| | 06:04 | take shape even though they share a common
structure, their content, the different header
| | 06:09 | image, start to give each one a unique flavor.
| | 06:13 | Once you're working in an established site
structure getting content on the page is largely
| | 06:17 | the same process you're used to for print work.
| | 06:19 | All of the tools and features you're used
to in InDesign come into play and can be used
| | 06:23 | to quickly format text and graphics,
establish styles, and build a consistent look and feel.
| | Collapse this transcript |
| Managing assets with object libraries| 00:00 | As you start building out additional mockups
for site pages in your project, you're likely
| | 00:05 | to find that you use certain assets, photos, logos,
other images, and text in more than one place.
| | 00:12 | As you move through the project, having those
assets available quickly and properly formatted
| | 00:16 | can shave a lot of time off the design process.
| | 00:19 | InDesign's Object Library feature, which
has been around for quite a long time, can be
| | 00:24 | an ideal way to manage those often used assets.
Let's take a look at an example.
| | 00:30 | On this page, I have an anchored pull quote,
and the formatting for this wherever I use
| | 00:35 | it in the site is always going to be the same.
That's managed by an object style.
| | 00:40 | As I add pull quotes to other pages on the
site, I can eliminate a few steps for myself
| | 00:45 | which include copying out the relevant text
from the page, pasting it onto the clipboard
| | 00:50 | to create a new text frame, formatting that
frame with the Object style, and then cutting
| | 00:54 | and pasting that frame to
anchor it into the text.
| | 00:57 | Rather, I can take out a fully formatted
version of that pull quote box and just drop in the
| | 01:03 | appropriate text if I have that
pull quote box in an Object Library.
| | 01:08 | To work with Object Libraries, you first
have to create a new library for your assets.
| | 01:12 | So I'm going to go to File > New > Library.
I'll call this web_assets.indl.
| | 01:21 | I'll save it in this same folder
with my libraries.indd exercise file.
| | 01:27 | And Library is open as a panel in InDesign.
| | 01:30 | Right now, with nothing in this
library, we see nothing in the panel.
| | 01:35 | I want a pull quote box available to me at
all times, and I want to be able to just drag
| | 01:38 | it out of this library
and place it where I need to.
| | 01:41 | So, the first thing I need to do, since this
is an anchored object, I can't just drag it
| | 01:45 | into the Library panel.
| | 01:47 | I'm going to copy this to
the clipboard and paste it.
| | 01:51 | I'm actually going to drop in some placeholder
text, so I know exactly what to do with this.
| | 01:58 | The object has all of its
formatting attributes, including the text.
| | 02:01 | It has its Object style applied, which
includes its anchored objects settings.
| | 02:06 | So the next time it's anchored,
it's going to go in the right place.
| | 02:09 | Now I'll just add it to the Library by dragging it
over the panel, and it comes in as an Untitled item.
| | 02:16 | I can double-click and call this quotebox,
which is the same name as the object style.
| | 02:21 | So hopefully, I'll remember that.
It tells me that it's a text object.
| | 02:27 | And now that's ready for me
to insert wherever I want to.
| | 02:30 | I can delete the item that the library object
was created from and then go to another page
| | 02:38 | where I want to pull out some text
and insert it into a quote box.
| | 02:42 | All I need to do is drag
this item out onto the page.
| | 02:48 | Since I want the object anchored, I'll cut
it to the clipboard and then add a return
| | 02:55 | in here, and paste it in at
the end of this paragraph.
| | 02:59 | Now, I've got an anchored pull quote box
ready to put in whatever quote I want to put in.
| | 03:05 | So, I'm just going to take any random
sentence from here, copy it out, select all of this
| | 03:13 | placeholder text, and choose
Edit > Paste Without Formatting.
| | 03:17 | Since the text I copied has formatting, I want to
pick up the formatting that's already applied in here.
| | 03:23 | So I'll choose Paste Without Formatting,
which means paste without its original formatting.
| | 03:27 | And it goes right into that
quote box, and I'm ready to move on.
| | 03:31 | Before I proceed to design more pages on the
site, I might want to build up some library
| | 03:35 | assets, so I have the things that I
think I'm going to need available to me.
| | 03:39 | I'm going to open the Pages panel, and go
to the A-Standard Master page, which is the
| | 03:44 | master for most of the pages on my site.
| | 03:47 | And one of the things I have here
is this group of social media icons.
| | 03:50 | Now, right now they are anchored, but if I
copy them, and then I'll switch from Preview
| | 03:56 | mode so we can see them pasted over here on the
pasteboard, I can drag those into my library as well.
| | 04:03 | I can drag them as a group, I can ungroup them,
and drag them all in as one item ungrouped,
| | 04:10 | or I can drag them in one icon at a time,
depending on how I think I might want to use them.
| | 04:17 | These are just little XML references to this
object, its physical size, the file it's linked
| | 04:22 | to, so I can have many variations of these
items in my library to click and drag out
| | 04:28 | on to the page and use as I see fit.
| | 04:31 | Again, I can delete the original object the Library
item was created from because I no longer need it.
| | 04:38 | So let's say I'm ready to move on
to the homepage design for this site.
| | 04:42 | On the Homepage, I'm going to use a few of
these featured item boxes that appear as a
| | 04:47 | sidebar item throughout most of the site, but they
are going to be pretty prominent on the homepage.
| | 04:52 | So, I'm going to Option+Drag this bottom item
that has the photo in it off to the pasteboard
| | 04:59 | to make a copy of it.
| | 05:01 | I'm going to actually take the image out of it
because I'm going to be swapping out individual images.
| | 05:07 | And I'm going to make this a little bit more
generic, Featured Item, because I don't know
| | 05:15 | what the headline is going to be and then select
the text that's specific for this version from
| | 05:21 | the sidebar, and replace it with something
generic like Add description here.
| | 05:29 | And the more info link is fine because
each of these is going to have a link.
| | 05:33 | I can then take this item and drag it directly
into my Library, and I'll name this Feature Box.
| | 05:42 | Now, let's say I'm moving away from my standard
site pages, and I want to tackle my homepage design.
| | 05:50 | Let me move the library over here.
| | 05:52 | I will create a new page in my document by
dragging my homepage Master page into the
| | 05:58 | document area of the Pages panel.
| | 06:00 | That's going to add that as the
first page in this document now.
| | 06:04 | I want to add several of this
Feature Box item to this page.
| | 06:08 | So I can just drag them out from my library.
| | 06:11 | Once you have a library item on the page,
it isn't locked in stone and inflexible.
| | 06:15 | For example, I may discover that there is
an issue with this particular item once I've
| | 06:20 | placed it on the page.
In fact, I know there is.
| | 06:23 | This sidebar_menu Object Style has been
overwritten. Something doesn't match the original style.
| | 06:30 | When I clear the overwrites, I can see that I've
got different formatting here than I actually want.
| | 06:36 | I need a variation on this object style.
| | 06:38 | So, I'm going to create exactly that, a
new object style called featured_item_orange.
| | 06:48 | Make sure Apply Style to Selection is on.
| | 06:52 | And where my Paragraph Styles are incorporated
in here, I'm going to use a new paragraph
| | 06:58 | style called featured_item_heading_orange.
It's still based on sidebar_menu_heading.
| | 07:05 | So I am maintaining a relationship.
| | 07:08 | For the next style, I'm going to put in the
p_sidebar paragraph style, which is exactly what I want.
| | 07:15 | I'll click OK there, and I'll click OK here.
Now, I'm using this new object style.
| | 07:23 | But it's out of sync with the
object in my Object Library.
| | 07:27 | What I can do with this object still selected
is right-click on this item and choose Update
| | 07:33 | Library Item, and let's see what happens when
I place another instance of it now on the page.
| | 07:39 | I'll drag it out, and it
looks just like that one.
| | 07:44 | And when I go to the Object Styles panel,
it's using that Object style I just created.
| | 07:49 | Object Libraries allow you to have a handful
of frequently used items or groups of items
| | 07:54 | available simply by
dragging and dropping from a panel.
| | 07:57 | And as easy as they are to place,
they are equally easy to update.
| | Collapse this transcript |
|
|
6. Using Liquid and Alternate Layouts Print vs. web: Exploring the flexible page| 00:00 | Before almost anything else, a print designer
knows what the physical size of their project is.
| | 00:06 | A magazine, poster, brochure, or
annual report has a fixed dimension.
| | 00:11 | It's a constraint that's
established early on in the process.
| | 00:14 | And once printed, that
page never changes in size.
| | 00:18 | You as a designer can be absolutely certain
that the reader will see every page of that
| | 00:22 | project exactly as you intended.
| | 00:25 | On the web, tablets, and mobile devices,
there's no such certainty that the reader will see
| | 00:30 | things exactly as you want them to.
| | 00:32 | Subtle differences between web browsers can
affect the appearance of a design for desktop
| | 00:37 | users, and sites viewed on a tablet or a smart
phone can be either scaled down for the device
| | 00:42 | or in some cases presented in an
entirely different configuration.
| | 00:45 | And at any time, the reader can increase
or decrease the size of the type on the page
| | 00:51 | that you so meticulously designed.
| | 00:54 | We're entering in age where the
finished page is a movable target.
| | 00:57 | We designers have to cede a certain amount
of the control we've always had, and think
| | 01:01 | about our designs in a
more flexible, adaptive way.
| | 01:05 | In this chapter, we'll see which new
InDesign CS6 features allow you to design more fluid
| | 01:10 | and responsive layout scenarios.
| | 01:12 | And to link the content used in a desktop
browser design to the layout of a tablet or
| | 01:17 | a smart phone version of the same page, but
apply different formatting characteristics
| | 01:22 | from layout to layout.
| | Collapse this transcript |
| Understanding basic Liquid Layout: Scale and Recenter| 00:00 | When you're designing for the screen, you
have to accept that screens come in a wide
| | 00:05 | range of shapes and sizes.
| | 00:07 | Your design, therefore, has to be a bit more
fluid and flexible to adapt to changes you
| | 00:12 | have no control over.
| | 00:14 | To help with these new challenges, InDesign
CS6 introduced a feature called Liquid Layout
| | 00:19 | that allows you to create more
flexible and adaptable pages.
| | 00:23 | You'll find the liquid layout panel listed
under the window menu, grouped with the other
| | 00:28 | interactive panels as Liquid Layout.
| | 00:31 | When you first open the Liquid Layout panel,
you'll notice that you really can't do anything
| | 00:36 | in it because the Liquid Layout panel is
designed to work in conjunction with the Page tool,
| | 00:41 | which was introduced in InDesign CS5 to allow the
creation of different sized pages within the same document.
| | 00:49 | Initially, this feature was lauded because
people thought that they could combine different
| | 00:54 | size print layouts into one
document, which you still can.
| | 00:58 | But in the ever-changing world of screen-based
design, the Page tool, and now Liquid Layout
| | 01:03 | become even more valuable.
| | 01:05 | With the Page tool selected, some of my
options under the Liquid Layout become available.
| | 01:10 | The first one is the Liquid Page Rule.
| | 01:13 | There are four different rules that can be
applied for Liquid Layout, Scale, Re-center,
| | 01:19 | Object-based, and Guide-based.
| | 01:22 | There is also an option for Controlled by
Master, which means you set a Liquid Layout
| | 01:26 | rule from the master page, and then you
just tell all the document pages that use that
| | 01:31 | master page to use the same rule, or you
can specifically select one of these rules to
| | 01:36 | override that master, or you
could simply turn Liquid Layout off.
| | 01:42 | I don't have any Liquid Layout settings applied
to the master for this page, so I'm just going
| | 01:46 | to demonstrate a couple of the simpler liquid
layout rules right here by applying the first
| | 01:52 | of them which is Scale.
| | 01:55 | Scale is pretty self-explanatory, when I
have the Page tool selected, you'll see that the
| | 02:01 | page is a modifiable object.
| | 02:04 | It has control handles on it, and when I Click
and Hold and Drag, I am changing the physical
| | 02:11 | size of the page, and with a Liquid Layout
rule, in this case Scale applied, I'm actually
| | 02:18 | changing the objects on that page.
| | 02:21 | Scale does exactly that, it just shrinks or expands
the page and keeps it fitting within the new page size.
| | 02:30 | Everything is 100% proportional and your only
real options are, is it smaller or is it bigger.
| | 02:37 | Now, if I were to let go of this right now, it would
not actually resize this page, I'm going to let go.
| | 02:44 | Because the default behavior of the Page tool
is that you initially use it by clicking and
| | 02:49 | dragging just to see how the rule works.
| | 02:53 | If you want to commit to that rule,
you have to hold down the Option key.
| | 02:57 | So let's say I drag this again and resize
the page, and for some reason, I like this.
| | 03:04 | If I hold down the Option key at this
point and release, I commit to that change.
| | 03:09 | I have a new page that's 1136x819 pixels,
and all of my content is shrunk down to that.
| | 03:17 | This can be undone just like anything
else, with Command+Z or Ctrl+Z to undo.
| | 03:23 | So that's the first rule, and
that's really all there is to it.
| | 03:26 | The second rule is Re-center.
| | 03:29 | This is also quite an aptly
named rule. It does one thing.
| | 03:33 | When I click and hold on the page and drag
it around it just re-centers the content on
| | 03:40 | that page, no scaling takes place.
| | 03:43 | It just make sure that whatever the
proportions of the page are that the entirety of the page
| | 03:48 | design gets centered in that page whether
it gets bigger or whether it gets smaller.
| | 03:54 | But you'll notice with re-center and objects
on the master page, that when the page itself
| | 03:59 | becomes too small for any of those master
objects to appear, they start to actually
| | 04:05 | disappear from the page.
I'll release and not commit to that change.
| | 04:09 | And let's go up and resize this page from
the top right, and we can see how it affects
| | 04:14 | the uppermost master page items.
| | 04:16 | As I make the page too small to fit the
nav bar, the logo, and the first, second, and
| | 04:25 | subsequent sidebar items, they
just start disappearing off the page.
| | 04:29 | Only the items that are on the document page
or overwritten from the master page remain,
| | 04:35 | and they stay centered on the page.
| | 04:37 | So that's Scale and Re-center, two liquid
layout rules that, as you can see, are rather
| | 04:43 | limited but quite easy to implement.
| | 04:45 | An adaptive web page doesn't really
behave in this all or nothing way.
| | 04:49 | So for the purposes of this course, you'll
want to move up to one or both of the two
| | 04:54 | other liquid layout rules, and
we'll take a look at those next.
| | Collapse this transcript |
| Using the guide-based Liquid Layout rule| 00:00 | In the last movie, we just scratched the surface of what's
possible with InDesign CS6's new Liquid Layout feature.
| | 00:07 | But the two options we looked, at
Scale and Re-center, were quite limited.
| | 00:11 | In this movie, we'll look at the Guide-
based Liquid Layout rule, which probably has the
| | 00:16 | best combination of ease of
use and general flexibility.
| | 00:20 | In order to show off exactly how Guide-based
liquid layout rules work, I need to make a
| | 00:26 | few adjustments to this page because so many
things on this page are on the actual master
| | 00:32 | page and not on the document page,
and that's going to affect the behavior.
| | 00:37 | The first thing I'm going to do is change
one of my preferences by hitting Command+K
| | 00:41 | or Ctrl+K on Windows, and going to
the Guides & Pasteboard preference.
| | 00:46 | And I'm going to give myself a much higher
vertical margin for my pasteboard up to about 400 pixels.
| | 00:53 | Because I'm going to be changing the page
size, I want to be able to have a lot of room
| | 00:57 | around that page to see
where that page is going.
| | 01:00 | I'll right-click on the pasteboard and
change my View to Entire Pasteboard, and you can
| | 01:05 | see I've got a lot more room top and bottom
| | 01:07 | to take a look at this page and what
happens to it as I change its size.
| | 01:12 | If I work just on this document page and try
to invoke the Guide-based Liquid Layout rule,
| | 01:16 | let's take a quick look at what happens.
| | 01:18 | First, I'll switch to the Page tool, that
selects the page, open the Liquid Layout panel, and
| | 01:24 | right now this says Controlled by Master,
which means that whatever the rule is on the
| | 01:29 | master page is the rule for this document page.
| | 01:32 | Any document page or master page can only
have one rule, you can't mix and match scale
| | 01:37 | with Guide-based or Object-based.
| | 01:39 | So let me first try to resize this page
and see what happens with a guide-based rule.
| | 01:45 | I'll click and drag and really nothing happens.
As the page becomes too small to fit a master
| | 01:52 | page item, they disappear like they did with
the Re-center rule, but nothing else is affected
| | 01:58 | on the page at all.
It doesn't re-center, it doesn't scale.
| | 02:02 | So let's go to the master page for this
document, where this liquid layout is controlled and
| | 02:07 | where many of the page elements actually reside.
| | 02:10 | I'll go to the Pages panel, double-click
the A-Standard master that this page uses, and
| | 02:17 | I'll start doing the same thing
right here on this master page.
| | 02:20 | I'll drag it out, and as you can see,
nothing really happens. Because I'm on the master
| | 02:27 | page, these master page items don't
disappear when the page gets smaller.
| | 02:31 | However, if I go to liquid layout and my
liquid page rule is set to off for this master page,
| | 02:38 | I'm going to switch that to Guide-based so
now this master page and all document pages
| | 02:43 | based on it will be controlled by this,
let's just trying resizing this page.
| | 02:49 | Well, as with working on the document page,
nothing really happens here. Because this
| | 02:55 | is the master and all of these objects are
actually on this master page, they're not disappearing
| | 03:01 | the way they did on the document page.
| | 03:03 | But really nothing else is happening
because I haven't created the guides necessary for
| | 03:08 | a Guide-based Liquid Layout.
| | 03:10 | When I have Guide-based chosen as my Liquid
Page Rule, and my Page tool is selected, anytime
| | 03:16 | I go out to the ruler and drag a guide out
onto the page, I'm dragging a new and very
| | 03:22 | different kind of guide. When I release,
you will see that this is a dashed guide, it's
| | 03:28 | obviously different from the standard page
guides or ruler guides that we are used to using.
| | 03:33 | This is a liquid guide.
| | 03:35 | If I switch to the Selection tool, select
this guide and right-click on it, the contextual
| | 03:41 | menu includes Guide Type as an option, and
there are two types Ruler Guide or Liquid Guide.
| | 03:48 | Since I created this guide with the Page
tool selected, I get a Liquid Guide by default.
| | 03:54 | At any point I can change a Liquid Guide to
a Ruler Guide and a Ruler Guide to a Liquid
| | 03:58 | Guide from this contextual menu.
| | 04:01 | So right now this is a Liquid Guide, and it
is cutting through my nav bar, my Hero image
| | 04:07 | frame, my content wall frame, and my footer.
| | 04:11 | Basically, it's passing through just about
everything on this page except for the logo and the sidebar.
| | 04:18 | Think of this guide like a slice or just a
break in every frame that it passes through.
| | 04:25 | At this point that allows that point to
stretch, and I'll show you what I mean.
| | 04:30 | I'm actually going to select this guide and
move it over to the sidebar, switch to the
| | 04:36 | Page tool by hitting Shift+P, and I'm going to
click hold and drag the right side of this page out.
| | 04:45 | And that's quite different behavior than
you have seen from InDesign in the past.
| | 04:49 | The guide passing through all of these
frames in the sidebar means that these can expand
| | 04:56 | horizontally from that point forward.
| | 04:58 | I'll release to not commit to that and they
snap right back to where they were supposed to go.
| | 05:03 | If I draw out a horizontal guide from the
top ruler and have it pass through the frame
| | 05:10 | for this Hero image and the logo, and I
start scaling this page up in size, the frame for
| | 05:19 | that Hero image increases in size because
it's allowed to increase from that guide point
| | 05:24 | as does my logo frame.
| | 05:26 | Because the guide doesn't pass
through the nav bar, that's unaffected.
| | 05:30 | I'm going to drag another liquid
guide onto my content well here.
| | 05:34 | A vertical guide and then a horizontal guide,
and I'll let that horizontal guide go through
| | 05:40 | this part of the sidebar, and this part of the
content well but not through these individual
| | 05:45 | parts of the sidebar.
| | 05:47 | So I've set a few points from which
I've allowed this page to stretch.
| | 05:52 | Let's see the impact of these
settings on my document page.
| | 05:56 | I'll go to the Pages panel to Page 1, you can
see my liquid guides now on that master page.
| | 06:04 | I'll go to the Liquid Layout panel,
switch to the Page tool by hitting Shift+P.
| | 06:09 | Controlled by Master is what I want because I have
a Guide-based rule on the master page, and let's
| | 06:13 | start dragging out this
page and see what happens.
| | 06:16 | I'll click from the bottom-right corner so I can
affect it horizontally and vertically at the same time.
| | 06:23 | And as I pull and stretch this page, not
everything refreshes right away, but you can see that
| | 06:29 | my content well frame is allowed to expand,
my sidebar frames are allowed to expand, as
| | 06:35 | is my Hero image, my logo box, and if I hold
down the Option key and then release, I commit
| | 06:43 | to that change, and everything refreshes,
and I have a new page at 1177x1840 with wider
| | 06:51 | columns here, here, a taller Hero image, all
based on where guides bisect these parts of
| | 06:57 | the page and allow it to stretch.
| | 07:01 | Guide-based Liquid Layout is quick to apply
and great for layouts that react well to general,
| | 07:06 | horizontal, and vertical parameters for increasing or
decreasing the size of portions of objects on the page.
| | 07:12 | As I said when we started out, Guide-based
rules probably have that perfect balance of
| | 07:17 | impact on the page and ease of implementation.
| | 07:21 | And they're great for layouts that really
lend themselves to horizontal or vertical
| | 07:25 | stretching of objects to fill the new page size.
| | 07:29 | But there's a fourth liquid layout rule that's even
more powerful, but the trade-off is it's a bit more work.
| | 07:36 | That's Object-based Liquid Layout, and we're
going to take a look at that in the next movie.
| | Collapse this transcript |
| Establishing object-based Liquid Layout rules| 00:00 | If you have a controlling nature when it comes
to your design work like I do, you'll probably
| | 00:05 | opt for the most robust of the liquid
layout rules, the Object-based method.
| | 00:10 | Using Object-based liquid layout, you can
set each object on the page to react precisely
| | 00:15 | the way you want as the page dimensions change.
| | 00:19 | However, that control
comes at the cost of speed.
| | 00:23 | Object-based liquid layout is the most
adaptive option but requires more work up front.
| | 00:28 | I want to use Object-based liquid layout to set the
parameters of this page to adapt to changes in size.
| | 00:35 | When I switch to the Page tool, I'll use the
keyboard shortcut Shift+P to switch to the Page tool.
| | 00:40 | And when I do that, this page is selected,
and you can see that my Liquid Page Rule is
| | 00:45 | controlled by the Master.
| | 00:48 | So I'll open up the Pages panel, and I'm
going to go to the appropriate master page.
| | 00:52 | By default, Liquid Page Rule is off, and I'm
going to choose Object-based for this layout.
| | 00:59 | Once I do this, you'll notice a number of
things change as I select objects on the page.
| | 01:04 | I'll click on this large content area frame,
and you can see that this frame when selected
| | 01:10 | with the Page tool and Object-based liquid
layout chosen, looks very different than most
| | 01:15 | frames have ever looked in InDesign before.
| | 01:18 | The frame has this heavy border around
it, the same color as its layer color.
| | 01:22 | And it's got all of these adornments like
these dashed guides and solid control handle
| | 01:28 | circles, and hollow circles outside
of the frame, and little lock icons.
| | 01:33 | And all of these are the various control points
and visual indicators that tell you what this
| | 01:40 | particular object's attributes
are in terms of liquid layout.
| | 01:44 | At first glance, this can come off
as a bit confusing or overwhelming.
| | 01:48 | Fortunately, everything you hover over in
this mode has a tool-tip, and it tells you
| | 01:53 | that this object's width is locked.
Click to let the object change width.
| | 01:58 | So, I could click this guide, or
I could click this control point.
| | 02:02 | A solid circle means that this is a fixed width.
| | 02:05 | If I click that, now it tells me that this
is a flexible width and my little Lock icon
| | 02:11 | has changed to a little springy icon.
| | 02:13 | I can make that same change, not on the
object, but right from the Liquid Layout panel by
| | 02:18 | checking the Width box.
You can see I get the exact same change there.
| | 02:23 | And if I click Height, then
that becomes flexible as well.
| | 02:28 | You also have the option to pin an object
to any part of the page, which essentially
| | 02:33 | forces that item to stay
glued to that particular edge.
| | 02:37 | Let's put this in practice and see how it works.
| | 02:39 | First I'll change that, and I'm going to start
with something simple like the logo in the top-left.
| | 02:45 | I'll select that, and on a small object
like this, these handles get a little bit hard
| | 02:49 | to deal with, and the
guides are a difficult to see.
| | 02:52 | So I'm going to work from the panel itself.
| | 02:55 | What I want to do is make sure that
whatever changes occur on the portions of this page,
| | 03:00 | that my logo is always fixed to
the top-left corner of this page
| | 03:06 | and that it doesn't change in size.
| | 03:08 | So I need to pin the
object to the top and left.
| | 03:14 | You can see the visual indicators change, all the
circles are solid on the left side and the top side.
| | 03:20 | Height and Width are not checked, so
this object is going to stay fixed in size.
| | 03:24 | Let's zoom out a little bit, so
I can see the entire pasteboard.
| | 03:27 | And I'm going to start changing the size of
this page by dragging these control handles
| | 03:32 | that the Page tool gives me.
| | 03:35 | Notice that as my page size changes, that
logo doesn't change in size, and it doesn't
| | 03:41 | change in its relationship to
the top-left edge of the page.
| | 03:45 | When I release, I don't want to commit to
that change in the page size, so I'll just
| | 03:49 | release, and it snaps
back to its original format.
| | 03:53 | If I did want it to change in height and
width and resize, I could just check those options
| | 03:59 | in the Liquid Layout panel.
| | 04:02 | And now, as I alter the size of the page,
my logo box stays in that fixed location,
| | 04:09 | top-left, but it gets wider as the page gets wider
and shallower as the page gets shallower and so on.
| | 04:16 | So, this method gives you a lot of very
specific control over each object on your page.
| | 04:21 | If I wanted an adaptive hero image here,
something that would stay locked to the top, to the
| | 04:28 | left, and the right, I can make those changes
by selecting the appropriate check boxes in
| | 04:33 | the Liquid Layout panel.
| | 04:34 | I want to hinge my hero image frame to
the Top and to the Left and to the Right.
| | 04:41 | But notice when I try to check the Right check
box, it doesn't let me. That's because Liquid
| | 04:47 | Layout can't obey that particular rule unless
something about resizing the object changes. Think about it.
| | 04:54 | If my page gets wider or narrower, and I
want that frame to pin to those three sides, the
| | 05:00 | size of the frame has to change.
I have to allow it to resize.
| | 05:03 | So, I have to check the Width box as well and
permit that frame's width to change according
| | 05:10 | to how the page changes, and
then I can pin it to the right.
| | 05:14 | So, all of this stuff is very inter-related.
| | 05:17 | There are limits to what you can lock and
what you can pin based on what you allow in
| | 05:22 | terms of resizing the object itself.
| | 05:25 | I'm going to resize the page again just by
dragging it out, and now you can see my hero
| | 05:30 | image frame at the top stays glued to the
top, left, and right, but its width changes
| | 05:37 | in order to make that happen.
| | 05:38 | Typically, the goal of applying this level
of specific liquid layout behavior to your
| | 05:45 | design is to see how that design
adapts to changes in screen size.
| | 05:50 | You may know from your client or your web
developer that what they want is a page that
| | 05:55 | is not necessarily fixed in width all the time.
| | 05:58 | They want something that adapts to
different screen sizes and browser window widths.
| | 06:04 | And as you design, you really are working
with fixed values to start out with, and you
| | 06:10 | want to test how exactly your design is going to hold
up to changes in say the height and width of a page.
| | 06:18 | And using Liquid Layout is a really good way of
seeing how your design holds up in those situations.
| | 06:24 | Let's take a look at this page after I've
done a fair amount of work to it and applied
| | 06:29 | Liquid Layout Rules to everything on the page.
| | 06:33 | I'm going to go to the
liquid_finished.indd page.
| | 06:37 | This is the same layout, but I've spent some
time on the Master page, going in and applying
| | 06:43 | Object-based liquid layout rules to every
object on the page so that they behave in
| | 06:49 | the way I want them to behave.
| | 06:51 | Let's see what happens as
I start resizing this page.
| | 06:54 | First, I'm going to hide this Column grid, so
we can see more of the page without distraction.
| | 07:02 | I will click, hold, and drag the bottom of
this page which is selected with the Page
| | 07:07 | tool, and I'm going to start
pulling it out to the right.
| | 07:12 | And not everything redraws right away, but
you can see based on just the expansion of
| | 07:17 | the frames that the objects on my page are adapting
quite nicely, and my design is holding up fairly well.
| | 07:27 | Now, if you've bend something
far enough, it's bound to break.
| | 07:30 | You're not really looking to see if your design
will fit every single possible scenario out there.
| | 07:35 | You want to see if your design is going to
hold up to a slightly narrower browser width,
| | 07:41 | or screen size width, and if it's going to
also hold up and look the way you want in
| | 07:46 | a slightly larger one.
| | 07:48 | So, I'm going to pull this out to a size that
might show up on say a 1280-wide browser display.
| | 07:55 | I'll hold down the Option key and release.
So I commit to that change.
| | 08:01 | Once I do that, everything refreshes, and I see
my page as it is now, and it doesn't look too bad.
| | 08:09 | If I go to the second page in my document,
I've got some text that's running over.
| | 08:13 | But overall, my design
is holding up fairly well.
| | 08:17 | I do also want to point out that yes, I've
changed this document page, and this document
| | 08:21 | page, but if I go back to the Master,
I've changed the Master as well.
| | 08:26 | Using this Object-based liquid layout rule
that is controlled by the Master page means
| | 08:31 | you're committing to changing every document
page and every master page and every master
| | 08:37 | page based on that master page when you
make your changes to the actual page dimensions.
| | 08:42 | Here, I've got two other Masters, both based
on that first A-Standard Master page, and they've
| | 08:49 | all changed just as a result of me
changing that single document page.
| | 08:54 | It's a document-wide change, and
that's an important behavior to be aware of.
| | 08:59 | The particulars of your design and the objects
in your layout will ultimately determine which
| | 09:03 | Liquid Layout Rule approach is best for you.
Each has its strengths and weaknesses.
| | 09:09 | But they are a big timesaver
compared to redesigning every page manually.
| | Collapse this transcript |
| Using Liquid Layout for varying page heights| 00:00 | Probably the most common resizing need you
will encounter as you create web mockups in
| | 00:04 | InDesign is the varying
height of any given page.
| | 00:08 | On the web a page is as tall as it needs to
be to fit the length of its content.
| | 00:13 | Let's see how you could use liquid layout to
achieve the same result in your InDesign web layout.
| | 00:19 | In this document, I've got a web page design
for which I have established a very specific
| | 00:24 | Object-based liquid layout rules.
| | 00:27 | When I switch to the Page tool by hitting
Shift+P, which automatically selects this page,
| | 00:32 | you can see that my Liquid Page Rule is
controlled by the Master page. I'll go to the master
| | 00:37 | page for this layout.
| | 00:39 | And as I click on each item, there are very
specific rules applied to all of the objects
| | 00:44 | on it so that it will behave the way I want.
| | 00:49 | So that master and all its liquid layout
rules are controlling how liquid layout behaves
| | 00:54 | on this document page and on this document
page, and you can see that I've got one page
| | 00:59 | that's far too long and one page that's a
little bit short and what I would like is
| | 01:05 | to click and hold the bottom of this and
drag it up so that my page compacts vertically
| | 01:11 | and everything fits nicely. I'll just release
the mouse and not commit to that change just yet.
| | 01:18 | And on the second page, what I like is to
just click, hold, and drag down this center
| | 01:23 | handle and adjust my page. Notice my footer
travels with it because I've pinned it to
| | 01:29 | the bottom of the page, and that's the result
I would like to achieve. Let's see what happens
| | 01:34 | if I do that and hold down the Option key before
I release and commit to that change in the page.
| | 01:40 | I'll release that now my page re-centers, get
that whole thing in the view, and that looks
| | 01:46 | really good, but because this is Object-based
liquid layout controlled by the master I haven't
| | 01:52 | just changed this page, I've changed this
page, too, and I have changed the master, as we
| | 01:57 | saw in a previous movie.
| | 01:59 | So what should be very simple change has
not quite worked out for me. I'm going to undo
| | 02:04 | that and get back to where I was before.
| | 02:07 | One possible way to get around this problem
is to select the particular page, go to the
| | 02:13 | Pages panel and choose Override All Master
Page Items, switch to the Page tool, and change
| | 02:19 | this individual pages liquid
layout rule to Object-based.
| | 02:24 | Now I'm not dealing with changes to the
master or the whole document, and I can just drag
| | 02:29 | that up, hold down the Option key before I
release, and make that change to this one page.
| | 02:36 | I haven't affect this page or the
master page, but here's the catch.
| | 02:42 | If I go to the master page--I?ll switch to the
Selection tool, and I'm going to zoom in on
| | 02:46 | one of the sidebar boxes--and I change the
content of this frame, not it's fill or it's
| | 02:52 | stroke or any of the frame attributes, but
the actual text in here--I'll delete one of
| | 02:57 | these links, and then I go back to this
page where I detach that--that deleted text is
| | 03:03 | still there. It's not here on the second page,
but since I overrode these master page items,
| | 03:12 | I can now no longer rely on a master page
that's controlling this page. That's a sacrifice
| | 03:18 | and a compromise to
flexibility that I don't want.
| | 03:22 | So knowing this, how to do I achieve the same result
and still keep the flexibility that I'm looking for?
| | 03:29 | Well, there is a different way to do this.
| | 03:31 | I need to think about how I have built my
master page and in a prior movie we talked
| | 03:36 | about how to build a master page where the
recurring elements on your page are not actually
| | 03:42 | in the document on the master page, they are
separate InDesign documents altogether containing
| | 03:47 | those repeating elements but placed on
the master page of your current document.
| | 03:51 | I'm going to open up an exercise file where that's
the approach that I've taken. Let's zoom this
| | 03:57 | page in and take a quick
look at the master page.
| | 04:00 | You'll see that my entire sidebar area has
this little link icon and the tooltip tells
| | 04:05 | me it's linked to sidebar.indd.
| | 04:07 | Similarly, my header is linked to a file
called header.indd, and my footer is linked
| | 04:15 | to a file called footer.indd.
I can see that in the Links panel as well.
| | 04:22 | And if I Option double-click on any of these
linked InDesign files, I open the actual InDesign
| | 04:28 | file, and I can effect changes there.
Let's go back to the Page layout itself and see
| | 04:34 | how this change in approach is better for
solving that resizing need. I'll go to the
| | 04:40 | Pages panel and go to my first document page,
and I'll hit Shift+P to apply the Liquid Layout rule.
| | 04:47 | Right now it's controlled by master.
I'm going to change it to Object-based, and
| | 04:55 | I'll go to the second page and
change it to Object-based as well.
| | 04:59 | Now I'm not affecting everything in my document.
| | 05:02 | If I pull down, you'll see that my master
page items and my document page items are
| | 05:09 | not moving in sync. I still need to detach
these objects from the master page and make
| | 05:16 | them local instances on this page, so I'm
going to choose Override All Master Page Items
| | 05:20 | for this page and do the
same thing for the second page.
| | 05:25 | Now let's go back and try that resize again,
and that works, I'm controlling only this
| | 05:31 | page so I can resize this vertically, Hold
Down the Option key and release, do the same
| | 05:37 | thing on the second page, resize it
vertical, hold down the Option key and release, and
| | 05:44 | now I have two pages in the same document of
varying heights where my footer has adapted
| | 05:53 | and pulled down to the bottom, and I
have the visual results that I want.
| | 05:57 | What I also have maintained, though, is a
dynamic relationship to the items on my master page,
| | 06:03 | Even though they're detached, they're still
external linked InDesign files, so if I Option
| | 06:08 | double-click even on this version that's a
local instance on the document page, I can
| | 06:13 | go into this sidebar.indd file, select say
one of the links in this sidebar, delete it,
| | 06:22 | save the file, close it, and when I go
back into InDesign, it's automatically updated
| | 06:30 | here in this local instance on the page,
it's updated here on this local instance on the
| | 06:36 | page, and here on the master page,
because it's an external linked file.
| | 06:41 | So this allows me to accomplish both tasks,
maintain a dynamic link to my master page
| | 06:46 | content by separating that content from this
actual document, and resizing my pages individually
| | 06:53 | to different heights without
negatively impacting one of the other.
| | 06:57 | So as you can see, InDesign's liquid layout
feature allows for a lot of flexibility, but
| | 07:02 | it also requires you to be flexible in your
thinking and change your approach is needed
| | 07:07 | to get the desired results.
| | Collapse this transcript |
| Creating alternate layouts| 00:01 | A companion feature to InDesign's
liquid layout is the alternate layout feature.
| | 00:06 | Using alternate layout, you can take your
existing layout and generate a completely new layout
| | 00:11 | with all the same content but at
a different size or orientation.
| | 00:15 | Combined with a strategic use of liquid
layout, you can quickly generate alternate layouts
| | 00:19 | that can be ready to go
with little or no adjustment.
| | 00:23 | In this document, I've got a finished web
page layouts it's two pages right now, and
| | 00:28 | I've spent some time on the master page working
with liquid layout to get this to resize exactly
| | 00:34 | the way I would want it to, and up to this
point, I've been able to simply use the Page
| | 00:40 | tool by hitting Shift+P and drag the edges
of the page around and get a general sense
| | 00:48 | of where and how the different
regions of my page are adapting.
| | 00:52 | So, I'm looking at this visually, and it
looks fine, but now my client wants to see what
| | 00:57 | this looks like in say more of a tablet
orientation, because they're looking for more adaptive
| | 01:02 | design and they want to see how this
shrinks down to a narrower width, so I need to be
| | 01:07 | able to show them that alternate layout.
| | 01:11 | Rather than create a new document and make
all those adjustments manually, I'm just going
| | 01:15 | to make an alternate layout using the
Alternate Layout feature. I'll switch off of the Page
| | 01:20 | tool to the Selection tool, and I'm going
to go up to the Pages Panel menu and choose
| | 01:25 | Create Alternate Layout, and that opens
up the Create Alternate Layout dialog box.
| | 01:30 | I should say before getting into this dialog
box that most of the alternate layout features
| | 01:35 | were designed with Adobe's Digital Publishing
Suite in mind where pages are being designed
| | 01:41 | to be both vertical and horizontal and
orientation on the iPad or other tablets, and InDesign
| | 01:47 | defaults to wanting to support that behavior
which is why you'll see these H and V designations
| | 01:53 | for horizontal and vertical added by default.
| | 01:56 | The other things that InDesign wants to do
by default is take my existing page dimensions,
| | 02:02 | which are 960 wide by 1500 high, and flip
them to a horizontal orientation similar to what
| | 02:09 | you would see if you flipped an iPad on
its side and give me a page that is 1500 wide
| | 02:14 | by 960 high. That's not what I'm trying to
do here. I'm sort of bending the rules where
| | 02:19 | liquid layout is concerned.
| | 02:21 | So, I'm not going for a straight vertical
to horizontal orientation here.
| | 02:25 | I'm going to create a new name for my new layout,
that's iPad Vertical, and I'm going to force the
| | 02:34 | width and height to what I want--which is 768,
assuming I'm supporting the original version
| | 02:41 | 1 and version 2 of the iPad by about 1700
pixels, because I know as my page gets narrower
| | 02:47 | my content is going to flow deeper into the
page, it automatically switches to a vertical
| | 02:53 | orientation based on those
measurements, and that's my target.
| | 02:57 | The other options here are whether or not
I'm going to preserve my existing liquid layout
| | 03:02 | rules, and I went to great pains to establish
those so that's what I'm going to do, and by
| | 03:07 | default all the other options down here are
checked and they include links stories which
| | 03:12 | actually connects the text content from
my original layout to my alternate layout.
| | 03:17 | So if I change the text content in my original
layout, it will be passed down to my alternate
| | 03:23 | layout, so I want to leave that checked.
| | 03:25 | The other option is to copy my
text styles to a new style group.
| | 03:29 | InDesign will take all of the styles for my
original layout, put them in their own group
| | 03:33 | and then create a second
group for my alternate layout.
| | 03:37 | The last option, Smart Text Reflow, will
create additional pages to handle overset text as
| | 03:43 | I need them. I'm working on discrete individual
web page mockup, so I don't need this function,
| | 03:48 | and I'm going to turn it off. I'll click OK
and InDesign has generated my alternate layout for me.
| | 03:54 | You'll also notice that the Pages panel
looks rather different when you've got
| | 03:59 | alternate layouts created, it's split into
columns, and I've got my original layout here
| | 04:05 | as Custom V which I can always rename,
and it's got my iPad Vertical layout here.
| | 04:12 | If I want to compare these two layouts, I
can just click on the layout name and choose
| | 04:18 | Split Window to Compare Layouts.
| | 04:20 | On the left I've got my browser-based
layout, and on the right--if I minimize this panel
| | 04:27 | a little bit--I've got my vertical iPad layout,
and I can see them side by side, and I see
| | 04:33 | that this one's holding up pretty well with a
few exceptions, and this gives me an excellent
| | 04:37 | opportunity to look at both layouts and
really see how my design holds up, not only on this
| | 04:43 | page, but on the second page in both the
original browser layout and the iPad layout.
| | 04:51 | So by taking advantage of alternate layout,
I was able to quickly generate a near final
| | 04:56 | alternate layout without having to create
another document or do a lot of manual tinkering
| | 05:02 | around with my page elements.
| | 05:04 | There's a lot more that alternate layout does
under the hood for you, and we'll take a look
| | 05:07 | at that in the next movie.
| | Collapse this transcript |
| Diving deeper into the alternate layout| 00:00 | In the last movie, we used alternate layout
to create a tablet-based version of our web
| | 00:05 | page design from our
original browser-based version.
| | 00:09 | And with just a few steps and a handful of
instructions for InDesign, the new layout
| | 00:14 | was created without any
manual intervention on my part.
| | 00:17 | But let's take a look at some of the other
things that go on when you create an alternate
| | 00:20 | layout besides just creating the layout page.
| | 00:24 | When I created this alternate layout, one
of the options that I checked was to create
| | 00:28 | a new style group for the alternate layout.
| | 00:31 | If I go to the Paragraph Styles panel,
you'll notice that I now have one style group for
| | 00:36 | my original layout, and that's called Custom
V--which was the layout name when I created it--
| | 00:41 | and that has all of the
paragraph styles for that layout.
| | 00:45 | Similarly, I have a group for my
Character Styles but not for my object styles.
| | 00:51 | In CS6, there isn't yet support for
object styles with alternate layout.
| | 00:57 | But in my Paragraph Styles panel in
addition to my Custom V group, I've got a new group
| | 01:01 | for my iPad Vertical Layout.
| | 01:04 | So at this point, I can start modifying
styles that are particular to this layout to get
| | 01:10 | the adjustments that I want without
negatively impacting my original layout.
| | 01:14 | They're discrete groups.
| | 01:16 | And InDesign has done the work behind the scenes
to even re-establish my relationships between styles.
| | 01:22 | For example, if I right-click on this h2_main
style, which I originally set up to be based
| | 01:27 | on h1_main, the version that was created in
my iPad Style group now has a relationship
| | 01:34 | with h1_main in the same group.
| | 01:36 | InDesign has reconnected all of the styles
appropriately without me having to do it myself.
| | 01:42 | I like that feature a lot.
| | 01:43 | I am going to close the Paragraph Styles panel,
and let's go to the Pages panel and take a
| | 01:48 | look at something else that happens behind the
scenes when you create an alternate layout.
| | 01:53 | Not only did I get alternate document pages, but
InDesign also created an alternate master page.
| | 01:59 | I am going to expand the Pages panel
a little bit so we can see the names.
| | 02:03 | My original browser layout was created
from the A-Standard Master page, and now a new
| | 02:10 | D-Standard iPad Vertical
Master page has been created.
| | 02:13 | It's the same name with my
layout name appended at the end.
| | 02:17 | I am going to double-click that page to show
it on the right here, and there are all my master
| | 02:21 | page items in my Resize Layout, and I will
click in the left area here and then double-click
| | 02:28 | the original Master page so we
can look at them side by side.
| | 02:33 | One thing you might notice on this page is
that the content frames here have links on
| | 02:39 | them in this new alternate version
that don't appear on the original.
| | 02:44 | And those links indicate that this text content is
linked back to the text content on the original layout.
| | 02:52 | I am going to go over here to this sidebar
frame and zoom in and take a look at what
| | 02:58 | that actually means for you once
you've created this alternate layout.
| | 03:02 | I'll bring the one from the
original master page into view as well.
| | 03:06 | If I go in here and make a change to my Master
page for my original layout, let's say I rename
| | 03:12 | this link Division of Continuing Education.
| | 03:17 | On the right, you can almost see hidden under this
other frame an alert icon indicating a modified link.
| | 03:24 | I will go to the Links panel
so we can see it more clearly.
| | 03:27 | And as I scroll down, you can see
that I've got this Modified item.
| | 03:32 | All of these different text items in the
Links panel are the content frames on my alternate
| | 03:37 | layout, either on the alternate master page
or the alternate document page, and they link
| | 03:42 | back to the original layout's content.
| | 03:45 | So if I just double-click this icon, I
will update this item, and it says Division of
| | 03:51 | Continuing Education now in my alternate layout.
| | 03:54 | So, even once I've produced this layout, I can now
make changes in tandem for my original to my alternate.
| | 04:01 | However, it should be noted that this is all
limited to stories or text-based content in my layouts.
| | 04:09 | It doesn't apply to images.
| | 04:11 | As great as this linking is, it's important
to note that it's only for text-based content.
| | 04:16 | If I have an image in my original layout,
and I replace that image or modify it, it
| | 04:22 | will not update in my alternate layout.
| | 04:25 | There is, however, one exception.
| | 04:26 | I am going to scroll down here in my
original layout's master page, and I have this image
| | 04:33 | that is anchored in my text.
| | 04:36 | Now InDesign considers an
anchored object in your text to be text.
| | 04:41 | So it actually will update this image in my
alternate layout where I also have the image.
| | 04:49 | Because InDesign considers an anchored image
in text to be text, if I update this anchored
| | 04:56 | image in my original layout, it will
actually update in my alternate layout.
| | 05:01 | Let me quickly do that here.
| | 05:02 | I'm going to hit Command+D while I have this
frame selected, and I will choose a different
| | 05:07 | image to place in that frame.
| | 05:10 | And I drop it in there, and that
looks fine in my original layout.
| | 05:13 | And then when I come back, and I select this
object, and I look at it in the Links panel,
| | 05:19 | you can see that it's showing me that my text
content has been updated, and it has because
| | 05:24 | my anchored image is a
piece of content in my text.
| | 05:28 | So if I just double-click that here,
it actually updates that anchored image.
| | 05:33 | So, if you are looking to use alternate
layout and take advantage of some image updating,
| | 05:39 | you might want to adjust your approach and
anchor your images as often as possible in
| | 05:43 | your layout to maintain that link
from the original to the alternate.
| | 05:46 | There is another important thing to note about
liquid layout, and that is it's really designed
| | 05:51 | to get you from point A to point B when
point A and point B aren't dramatically different,
| | 05:58 | they are within a certain tolerance,
and let me show you what I mean.
| | 06:01 | Let me close Links panel, let
me view this page at actual size.
| | 06:08 | I am going to go to my document pages actually.
| | 06:12 | I will get that one to fit in the window,
and I will get that one to fit in the window.
| | 06:20 | And as we saw, InDesign did a really good
job at getting me from a browser-based layout
| | 06:25 | to a tablet-based layout.
| | 06:27 | But if I were to try that same thing to get me
from a browser-based layout to say a Smartphone
| | 06:34 | layout, which is a dramatically smaller screen,
let's see what we'd actually end up with.
| | 06:39 | I am going to go back to this original layout,
and in the Pages panel, I am going to click
| | 06:44 | next to the layout name and
choose Create Alternate Layout.
| | 06:48 | Let's say I thought I could take this entire browser-
based layout and make it into a Smartphone layout.
| | 06:54 | I will call this iPhone.
| | 06:58 | And let's say I was going to limit it to
say a 320-pixel wide screen, and it's going be
| | 07:03 | a vertical page, so let's
say about 1,000 pixels high.
| | 07:06 | I am going to use those same options that I
had before, click OK, and let's see what we get.
| | 07:13 | In the Pages panel, I have a
new column with my iPhone layout.
| | 07:16 | I'm actually going to Unsplit the window and just
take a look at that new layout, and that is quite a mess.
| | 07:25 | It's just too far a leap for the
capabilities of alternate layout.
| | 07:30 | At this point to go dramatically from
something that's nearly 1,000 pixels to something
| | 07:35 | that's less than a third that size.
| | 07:38 | All the liquid layout rules in the world are not
going to get me to a one-click result like this.
| | 07:43 | I am going to at some
point have to break from this.
| | 07:48 | It proves yet again that if you've
bend something far enough, it will break.
| | 07:52 | So alternate layout does have its limits,
and it's important to know that before you
| | 07:56 | start going in and having
unrealistic expectations for what it will do.
| | 08:01 | It will get you quickly from one layout to
another within a certain range, but it will
| | 08:06 | not take you from one extreme to another.
| | Collapse this transcript |
| Repurposing content with the Content Conveyor and style mapping| 00:00 | When you're working on a web design project,
it's not unusual for the same content to appear
| | 00:04 | in different places and with a
somewhat different appearance.
| | 00:08 | With InDesign 6's new Content Conveyor, Link
Options, and Style Mapping features, you can
| | 00:14 | reuse page content and modify it in various ways
but keep it dynamically linked to its original source.
| | 00:21 | Here is an example.
| | 00:22 | On the site design project we've been
working on throughout this chapter, I've moved on
| | 00:26 | from the interior pages of the site design,
and I'm concentrating on the homepage now,
| | 00:32 | which is a little bit different, but there
are a couple of things that are on the standard
| | 00:36 | page layout that appear in the sidebar that
I want to appear here on the homepage, which
| | 00:41 | doesn't actually have a sidebar.
| | 00:43 | Let me take a look at that standard page template,
and what my client wants to make sure is included
| | 00:48 | on the homepage is this Connect with us
box, as well as this Find out more box.
| | 00:55 | Now, if I make a copy of these and just place them
on the homepage, there's no connection between them.
| | 01:00 | I'm now going to be modifying or dealing with completely
discrete separate objects from this point forward.
| | 01:07 | And I'd like to avoid that.
| | 01:08 | I want to keep these things
flexible and connected as much as I can.
| | 01:12 | So instead of just copying and pasting, I'm
going to go to the new Content Collector tool,
| | 01:17 | which I can either click here in the Toolbar or
just hit the B key to invoke from my keyboard.
| | 01:23 | Hitting the B key again changes you from
Content Collecting to Content Placing, one keystroke,
| | 01:30 | one tool, two different modes.
| | 01:32 | Now there is a lot more to the Content
Collector tool and the Content Conveyor than is really
| | 01:37 | applicable for this particular course, and
Anne-Marie Concepcion covers this tool and
| | 01:41 | these new features in great detail in
her InDesign CS6 New Features course.
| | 01:47 | So I suggest if you really want to go in
depth into this feature, you take a moment to take
| | 01:50 | a look at that part of that course.
| | 01:53 | We're just going to deal with what we need to do to
maximize this feature for this particular purpose.
| | 01:59 | The first thing I'm going to do with this
Content Collector tool is click on the first
| | 02:03 | object that I want, which is this Connect
with us box ,and then again on this Find out
| | 02:09 | more box, and I have now collected those
to the Conveyor and they're available for me
| | 02:14 | to use in this document or another
document if I should open one up.
| | 02:18 | I've collected everything I need for now, so
I'm going to go back to my homepage design,
| | 02:22 | and I'm going to hit the B key again to switch
this tool from Content Collector to Content Placer.
| | 02:30 | I want to make sure that before I do anything
else that I have this Create Link check box checked.
| | 02:36 | This is the key to keeping my placed
version of this connected to my original version.
| | 02:42 | So with that checked, I'm just going to
click to drop this object on the pasteboard and
| | 02:46 | click again to drop the second one.
| | 02:49 | They've been cleared out of the Collector,
because its default behavior is to just remove
| | 02:54 | things once you place them somewhere else.
| | 02:56 | If I want to get rid of this Content
Conveyor altogether, I'll just hit the Escape key,
| | 03:02 | and that whole Conveyor panel goes away.
| | 03:05 | I'm also going to switch to the Selection
tool by hitting the V key so I'm no longer
| | 03:09 | collecting objects on the page.
So I want to quickly drop these into my layout.
| | 03:13 | I'm going to select the two of them.
| | 03:15 | I'm going to go to Window > Object & Layout >
Align, and I'm going to align these two
| | 03:21 | to the Left and to the Top.
| | 03:24 | Because they have autosizing built into them,
they actually stretch so that I can see both of them.
| | 03:31 | I'm then going to select this object on the
page, which is this Alumni Profile that has
| | 03:37 | the same effect applied to it.
| | 03:38 | Click again and make it a key object,
align all three objects in the same way.
| | 03:44 | That way I quickly have everything
right in place the way I need it.
| | 03:48 | I'm going to go up here, zoom in, and one
thing I need to do is get the Connect with
| | 03:54 | us box up above this box.
| | 03:56 | So I'm going to use the keyboard shortcut,
Command+Right Bracket to move it to the front,
| | 04:02 | and that moves it up, and now I've got Connect with
us here in blue and Find out more in purple.
| | 04:08 | But I've been told for my client that they
are not crazy about this blue-yellow-blue
| | 04:12 | color sequence here and they want
blue-yellow-purple and then blue.
| | 04:17 | So I need to modify these placed
instances and change their appearance.
| | 04:21 | The other thing I need to do, which is a
little more subtle, is to make these extend the full
| | 04:29 | width of 322 pixels that the object above
it does, so everything is properly aligned.
| | 04:36 | So I'm going to select both of these, and from the
left I'm going to increase their Width to 322 pixels.
| | 04:43 | So now I've changed the physical geometry of
these objects from the original. That's one change.
| | 04:49 | The next thing I need to do is
apply different objects styles.
| | 04:53 | The appearance of these is
controlled by object styles.
| | 04:56 | So I'm going to go the Object Styles panel and
change this selected frame from sidebar_menu_blue
| | 05:04 | to sidebar_menu_purple and then select the one
underneath and change that from sidebar_menu_purple
| | 05:09 | to sidebar_menu_blue.
| | 05:12 | Now I've got the appearance that
I want and the size that I want.
| | 05:15 | But those are two distinct changes
from this object to the original.
| | 05:21 | So for the moment everything looks fine, and
it's the way I want, but then Word comes back
| | 05:25 | after showing this to the client that they
want to change the language on this Connect
| | 05:28 | with us item and they want it to be a little
bit more direct, and it's going to say Get social.
| | 05:34 | So I want to go back and change my original
instance of this object and pass that change down here.
| | 05:40 | A quick way to get back to the original is
to select this and go to the Links panel,
| | 05:45 | and here you can see for each of the items
that I've placed I have two items listed in
| | 05:51 | the Links panel, one has this little text
icon, and that's the link to the content in
| | 05:55 | the frame, and the other is
the link to the frame itself.
| | 06:00 | It's still technically one link,
but it has two aspects to it.
| | 06:03 | I can right-click on this and choose Go To
Source, and that jumps me right to the original
| | 06:09 | object that I placed this from.
| | 06:11 | It's a nice, fast way to find out what
something is linked to and get to that object quickly.
| | 06:16 | So I'm going to change the
language as requested to Get social.
| | 06:22 | And as soon as I do, my link on my
homepage indicates that it has been modified.
| | 06:28 | So a quick way to get back to that is to right-
click on it and choose Go To Link, and that takes
| | 06:34 | me right to this placed and modified version.
| | 06:37 | Now, if I just double-click this to update,
I get a warning that edits have been made
| | 06:43 | to the linked story, I'm aware of that.
| | 06:45 | Let's see what happens if I
just go ahead and click Yes.
| | 06:49 | Well, some aspects of this have reverted
back to their original appearance, specifically
| | 06:55 | the striped pattern behind this
text is part of its paragraph style.
| | 07:00 | So when the text got changed and updated here,
it brought that original paragraph formatting
| | 07:05 | in, and that's really not what I want.
| | 07:07 | So I'm going to undo that update, and before
I redo it, I first need to tell this linked
| | 07:14 | item what is acceptable to be changed and
preserved and what isn't, and I can do that
| | 07:19 | by right-clicking on the link in the
Links panel and selecting Link Options.
| | 07:26 | In this dialog, which I can use per link,
or for all the links in my Links panel if I
| | 07:32 | have none of them selected, I can specify
which local edits to my link object are okay
| | 07:38 | to preserve when I'm updating it from the
original, and in this case I want its Appearance,
| | 07:45 | which is the Object Style applied to it,
among other things, and its Size and Shape, which
| | 07:50 | is its dimensions that I also changed, to be
preserved even though I update something from the original.
| | 07:58 | In order to prevent that problem of the
paragraph style changing, I'm going to actually create
| | 08:03 | a custom style map between the original
style from the parent object to the style applied
| | 08:09 | in this placed child object.
| | 08:12 | I'll check Define Custom Style
Mapping, then the Settings button.
| | 08:16 | Since this is the only document I have open,
it's automatically picked as the Source of
| | 08:20 | my style mapping, and the kind of style
that I am mapping is a Paragraph Style.
| | 08:26 | I'll click New Style Mapping.
| | 08:28 | I can either choose an entire Style Group
or a Single Style. In this case, I'm choosing
| | 08:33 | a Single Style, and it's my
sidebar_menu_heading_blue.
| | 08:38 | I want to map that in this
instance to sidebar_menu_heading_purple.
| | 08:44 | That's all I need to do is create a relationship and a map
between those two styles, and I'll click OK, then OK again.
| | 08:52 | Now let's see what
happens when I update this link.
| | 08:55 | I get the same warning.
| | 08:57 | InDesign is always going to give me this warning,
but I'll click Yes, and now my text is changed,
| | 09:03 | but my paragraph style hasn't, and my appearance and
my dimensions for this object have also been preserved.
| | 09:11 | Taking advantage of this ability to
collect multiple pieces of content at once, place
| | 09:15 | them elsewhere in one document or multiple
documents, modify them as necessary, but maintain
| | 09:21 | this kind of dynamic parent/child relationship
between them will keep your web design projects
| | 09:26 | efficient and easy to update.
| | Collapse this transcript |
|
|
7. Adding Interactive ElementsPrint vs. web: Exploring the static page and the (inter)active page| 00:00 | All design is intended to tell a story,
whether it's a story about a product, a charitable
| | 00:06 | organization, an event, anything.
| | 00:08 | We want to tell the most compelling
story possible with our design.
| | 00:11 | The web's distinct advantage over print is
its ability to bring motion, sound, video,
| | 00:17 | and other immersive forms of communication
and interactivity into those stories.
| | 00:22 | Expressive storytelling elements like video
are the norm these days, not the exception.
| | 00:28 | And while you can't play video or hear sound
directly in an InDesign page, you can import
| | 00:33 | that content into an InDesign layout and
preview it in a couple of different ways.
| | 00:38 | In this chapter, we'll take a look at ways
to add common interactive page elements like
| | 00:42 | links, buttons, video, and embedded HTML to
a web page design in InDesign and preview
| | 00:49 | that content in different ways.
| | Collapse this transcript |
| Exploring the interactive capabilities and constraints of InDesign| 00:00 | InDesign's capabilities have grown beyond
the realm of print for several versions now.
| | 00:04 | So it's worth taking a moment to look at just what
sort of media and interactivity InDesign supports.
| | 00:11 | In any InDesign document you can create hyperlinks
that can be applied to either text, images,
| | 00:17 | or any object on the page.
| | 00:19 | And they can link to another location within the
document, to an external web page, and even launch an email.
| | 00:26 | You can build functional buttons with
rollover and click states that can also act as links
| | 00:30 | or trigger actions like playing a video.
| | 00:33 | You can include video and audio which can
be previewed in InDesign's Media panel and
| | 00:38 | played when you export from InDesign to
Interactive PDF or the Flash Player SWF format.
| | 00:44 | Starting in InDesign CS6, you can now include
embeddable HTML content, such as a Google Map,
| | 00:50 | a Twitter Feed widget,
or a Facebook Like button.
| | 00:54 | And InDesign does include other
interactive capabilities as well, such as the ability
| | 00:59 | to create multi-state objects for things like
slideshows and entire animations from scratch
| | 01:06 | right from within InDesign.
| | 01:08 | Those are outside of the scope of this course,
but if you really wanted to dig deep into
| | 01:12 | InDesign's interactive capabilities, I
suggest taking a look at Mike Rankin's
| | 01:18 | InDesign CS6Interactive Documents Course
here in the online training library.
| | 01:22 | So, that's a quick overview of your
interactivity options in InDesign.
| | 01:26 | There is no single perfect path for
interactive output from InDesign, but there are enough
| | 01:30 | choices available that at least one should
suit your design and prototyping needs when
| | 01:36 | you're doing a web design project.
| | Collapse this transcript |
| Adding hyperlinks| 00:00 | The most basic and ubiquitous form of interactivity
on the web is the hyperlink, a clickable image
| | 00:06 | or bit of text that takes
you from one place to another.
| | 00:09 | InDesign has allowed hyperlinks and
documents for many versions now, initially for Export
| | 00:13 | to PDF, but more recently for
HTML and other output paths.
| | 00:18 | This feature can be put to equally effective
use on a web page design when you're trying
| | 00:22 | to demonstrate functionality
or navigate between pages.
| | 00:26 | Let's take a look at some of the most common
types of hyperlinking you're probably going
| | 00:30 | to employ in your web design project.
| | 00:33 | In my homepage design, I want to set up a
hyperlink to one of these social media icons, so I'm
| | 00:37 | going to select this anchored group, and I'll
zoom in, then click twice to select down into
| | 00:45 | the group, and grab just
this little Google+ icon.
| | 00:49 | Next I'll go to Window > Interactive >
Hyperlinks to start setting up my hyperlinks.
| | 00:55 | From the Panel menu I'll choose New Hyperlink,
there are several different types of hyperlinks,
| | 01:00 | whatever you linked to
last is what shows up here.
| | 01:04 | In his case URL is my current choice,
and that's actually what I want.
| | 01:09 | I want to link this image to plus.google.com.
| | 01:16 | Shared Hyperlink Destination is checked by
default, and I'm going to leave it checked,
| | 01:20 | because by doing so, I enable myself to
apply this same hyperlink to other objects and to
| | 01:27 | other text in the same document without
having to create a new hyperlink every time I want
| | 01:33 | to link to Google+.
| | 01:34 | At the bottom, there are some options for Appearance.
By default, they're set to Invisible Rectangle
| | 01:40 | with a highlight of None, and I highly
recommend you keep those set exactly that way.
| | 01:45 | I'll click OK, and in the Hyperlinks panel
there is now a new Hyperlink listed.
| | 01:51 | Because it was an object, it's just
given a generic hyperlink name.
| | 01:55 | But when I hover over you can see plus.google.com,
and that address is added here in my list
| | 02:01 | of Shared Hyperlink Destinations.
| | 02:04 | With a hyperlink enabled in InDesign, I'm
not going to be able to click it in my layout
| | 02:08 | and go to that destination, but I can test
this link by clicking the Go To Destination
| | 02:14 | arrow at the bottom of the Hyperlinks panel.
| | 02:17 | When I do that it launches my browser, and
it tries to go to Google+, but since I'm not
| | 02:21 | logged in it then bounces me to the login
page, but at least I know my hyperlink works.
| | 02:27 | I'll close my browser and go back to InDesign,
and next I want to establish an email link
| | 02:32 | and apply it to some text in this layout.
| | 02:36 | I'm going to zoom out, and I know that
somewhere in the body of this text there is a call to
| | 02:41 | action to contact someone.
| | 02:43 | So I'm going to use Find/Change by hitting
Command+F, and I'm going to just type in the
| | 02:48 | word Contact and hit Enter, and it's
found it here on the Academic Programs page.
| | 02:54 | So I'll close the Find/Change dialog, and
let's zoom in here, and there is a call to
| | 03:00 | action, Please contact the
department chair for more information.
| | 03:04 | And below that the department
chairs are all listed by name.
| | 03:07 | So I'm going to apply an
email link to this name.
| | 03:10 | I'll select the entire name, go to the
Hyperlinks panel and choose New Hyperlink.
| | 03:17 | From the Link To menu I'll choose Email and
my Destination options change in the dialog.
| | 03:23 | I'm going to assume that this Email
Address will be gmontague@rouxacademy.com.
| | 03:32 | And I can pre-populate a Subject Line by adding it
here, so I'm going to put in Animation Program Inquiry.
| | 03:42 | I'll leave Shared Hyperlink Destination checked,
and when I'm applying a hyperlink to text,
| | 03:47 | I'm able to apply a Character Style to
it right here from the Hyperlink dialog.
| | 03:52 | Right now, it's defaulted to None, but I have
a Character Style called Underline that does
| | 03:56 | only one thing, it applies an
underline and the same color as the text.
| | 04:00 | So I'm going to apply that here to this hyperlink,
you can see it reflected on the page already.
| | 04:06 | I'll leave everything else the same, click OK,
and I can test this link exactly the same
| | 04:11 | way I tested the URL, by going to the bottom of the
Hyperlinks panel and clicking the Go To Destination arrow.
| | 04:18 | That launches my email application, creates a
new message, puts in the address I specified,
| | 04:24 | and populates that Subject field as well.
I'll close that and go back to InDesign.
| | 04:30 | And the last type of hyperlink I want to show
is one that links to another destination within
| | 04:35 | the same InDesign document.
| | 04:38 | I'm going to zoom out, switch to my
Selection tool, and I want to set this logo that's in
| | 04:43 | the top-left corner on every page to link to
the Homepage layout in this InDesign document,
| | 04:50 | which happens to be Page 1.
| | 04:52 | Now this logo is on my Master
page, so it appears everywhere.
| | 04:56 | So I'm going to go to the Pages panel, double-
click that master page which is A-Standard, select
| | 05:02 | the logo that's in the top-left corner, go to
the Hyperlinks panel and choose New Hyperlink
| | 05:07 | from the Panel menu.
| | 05:10 | The Link To type is going to be Page, and
I'm able to specify either this document or
| | 05:16 | another InDesign document, but I'm sticking
to this InDesign document because that's where
| | 05:21 | all of my web page layouts are.
| | 05:24 | My homepage is on Page 1, and the Zoom Settings
really come into play once this page is exported
| | 05:31 | to Interactive PDF, these Fit View/
Fit in Window are PDF specific views.
| | 05:37 | Right now, I'm just
going to leave this to Fixed.
| | 05:39 | I'll leave everything else as is and click
OK, and as before I'll test this by going
| | 05:45 | to the bottom on the Hyperlinks panel and
clicking Go To Destination, and it jumps me
| | 05:50 | to Page 1 in the document.
| | 05:53 | There are other hyperlink options similar
to page, such as bookmarks if you've created
| | 05:58 | any, you can link to them, and text
anchors if you have any in your document, you can
| | 06:02 | link to those as well.
| | 06:04 | So setting up and testing hyperlinks within
InDesign is a simple enough process, but the
| | 06:08 | clients and developers you'll be sending
your mockups to aren't likely to have InDesign.
| | 06:13 | So how do you go about showing them
your pages with working hyperlinks?
| | 06:17 | We'll see how that's done in the next movie.
| | Collapse this transcript |
| Previewing interactive page elements with interactive PDFs| 00:00 | It's one thing to add interactivity to an
InDesign document, but the goal of adding
| | 00:04 | that interactivity is to
be able to make it work.
| | 00:07 | InDesign offers two methods for doing just that,
one is Interactive PDF, and the other is Flash Player.
| | 00:15 | Both have their plusses and their minuses.
| | 00:18 | And in this movie, we'll take a
look at the first, Interactive PDF.
| | 00:22 | In a previous movie, we added some basic
interactivity to this document in the form of hyperlinks.
| | 00:27 | Now, I want to export this to Interactive
PDF so that I can pass this along to my client,
| | 00:33 | and they can test some of that
interactivity out themselves.
| | 00:36 | So, from the File Menu, I'll choose Export,
and the option I'll choose from the Format
| | 00:41 | Menu is Adobe PDF (Interactive).
| | 00:45 | I'll click Save, and I'll replace an older
version that I was working on with this new one.
| | 00:51 | In the Export to Interactive PDF dialog, I
want to make sure that I'm exporting all of
| | 00:56 | the pages in this document that they're going
out as pages and not spreads because there's
| | 01:00 | no such thing as a spread on the web.
| | 01:03 | And I'll make sure that View After Exporting is
checked, so Acrobat will open and show me this PDF.
| | 01:08 | I can also set my View here to Fit Page, Fit Width,
or any of the other standard Acrobat View settings.
| | 01:14 | I am going to choose Fit Page.
And for the Layout, I'll keep it at Single Page.
| | 01:21 | To have my interactivity in this document
at all, I need to make sure that Include All
| | 01:25 | is selected for Forms and Media.
| | 01:28 | Forms and Media includes not just forms and
media like videos, but buttons, hyperlinks,
| | 01:33 | and any interactive elements.
| | 01:36 | Everything else here, I'll
leave as is. I'll click OK.
| | 01:40 | The PDF is generated.
I see the entire thing here in Acrobat.
| | 01:45 | When I hover over one of the links I created--
which is the Google+ icon--and click on that,
| | 01:51 | my browser opens, and I go to the Google+ page.
| | 01:55 | But since I'm not logged in,
I go to the Login page.
| | 01:58 | But at least I know my link works.
| | 02:00 | The first time you test this out on your machine,
you may encounter an Acrobat security warning
| | 02:06 | asking if it's okay to go from this
document on your desktop out to the web.
| | 02:11 | Once you say it is, you
won't see that warning again.
| | 02:14 | So, I know that link works, let's check the email
link I established on another page in this document.
| | 02:20 | That was on the Programs page, and I've
actually snuck another link in here for programs up
| | 02:25 | in the nav bar that will jump me to that page.
Here's my email link.
| | 02:30 | When I hover over it, the tool-tip looks a
little bit scary, but it's just some special
| | 02:35 | entity characters representing the at
symbol and the spaces in the subject line.
| | 02:39 | The real test is if I click it and it works.
| | 02:42 | I'll click that, and it opens up my email
client, creates a new addressed message with
| | 02:47 | a pre-populated subject line.
| | 02:49 | So, I can show that
functionality in the PDF as well.
| | 02:52 | I'll click back in this PDF to
bring Acrobat back to the foreground.
| | 02:56 | The last hyperlink we added was to this
logo up in the top-left on the master page, and
| | 03:03 | we linked it to the homepage.
| | 03:04 | So, I'll click it here, and it returns me to
page 1 in this document which is the homepage.
| | 03:10 | So, this is just basic hyperlinking
interactivity in an Interactive PDF.
| | 03:15 | Now, the up-side of a PDF is nearly
everyone has the free Adobe Reader.
| | 03:21 | They can download this, they can take it on
their computer, and they can view it almost anywhere.
| | 03:26 | The down-side is it's really
not like a browser experience.
| | 03:30 | When I see it in its entirety, it's
not showing it to me at an accurate size.
| | 03:34 | When I use a standard Acrobat View such as
Actual Size, it's actually way bigger than
| | 03:42 | this page would appear in the web browser.
| | 03:45 | Acrobat is translating my InDesign pixel values
into inches, and it's not an accurate conversion.
| | 03:51 | So, it's very difficult for my client to look
at this and evaluate the quality of the images
| | 03:57 | and the readability of some of the type.
| | 03:59 | So, that's the negative part of the equation
when you're using PDF as a proofing method.
| | 04:05 | If I don't want to go the Interactive PDF
route, my other option is to Export for Flash
| | 04:09 | Player as an SWF file, and view it in my browser,
and we'll see how that's done in the next movie.
| | Collapse this transcript |
| Previewing interactive page elements with SWF files| 00:00 | When you're working on a web design project,
and you are exporting an interactive proof
| | 00:05 | for someone to look at, you basically have
two options, interactive PDF which we created
| | 00:11 | in the last movie, and
Flash player or SWF format.
| | 00:15 | Let's take a look at how we export and test
our interactivity when we export to Flash player.
| | 00:21 | From the File menu I'll choose Export, and
from the Format pulldown I'll select
| | 00:26 | Flash Player, if it's not already selected.
| | 00:28 | I'm going to save as to my desktop, click
Save, and in the Export SWF dialog I want
| | 00:35 | to make sure that I'm Exporting all of the pages,
because I'm going to be jumping around from page to page.
| | 00:39 | That's part of the interactivity I am testing.
| | 00:42 | And I definitely want InDesign to both
generate the HTML file that calls upon this SWF file
| | 00:48 | and then show me that HTML file and the
SWF file in it in my browser after exporting.
| | 00:55 | I want this at 100% scale so I get an
accurate representation of what this page will look
| | 00:59 | like in the browser.
| | 01:02 | Everything else here I'm basically going to
leave the same, except I'm going to Uncheck
| | 01:06 | this Include Interactive Page Curl effect which
is On by default when you're exporting to SWF.
| | 01:12 | I'll click OK.
| | 01:13 | The SWF is generated and my browser opens
up and shows me this page in the environment
| | 01:20 | that it is really going to be viewed ultimately
when this gets turned into a real working website.
| | 01:26 | So I see how this looks at an
accurate size in the browser.
| | 01:30 | I'll scroll down and my
text is nice and clean here.
| | 01:33 | And because it's at the proper size, it can
be evaluated for its readability and other
| | 01:38 | factors when my client takes a look at it.
| | 01:41 | Next, I'll test out my interactivity by
clicking this first link here for the Google+ icon,
| | 01:48 | and that opens up again the login
page for Google+ since I'm not logged in.
| | 01:52 | Now, you may initially encounter a Flash
player security warning if you're viewing this on
| | 01:58 | your local computer and
trying to go out to the web.
| | 02:02 | Once you follow the proper instructions in
that security message and resolve them, you
| | 02:07 | will be able to test that link
out again on your local machine.
| | 02:10 | Odds are you're going to be posting your
version of this SWF file on a web server and pointing
| | 02:16 | your client to it that way remotely.
| | 02:19 | When this is actually posted on a web
server for your client to look at and they click
| | 02:23 | on that link they're not going
to get that security warning.
| | 02:27 | I'll close that new window that Safari opened
to take me into the Google+ page, and I will
| | 02:32 | test out my other links.
| | 02:34 | Up at top at the nav bar I just created a
quick text link for programs to jump me to
| | 02:39 | the third page in the document.
| | 02:42 | That's where I have the email link that I created,
and when I click on that that works just fine.
| | 02:48 | It opens up my email client and creates a new
message preaddressed and with its subject field populated.
| | 02:54 | I'll close that, go back to the browser, and
the last link that I want to test is the logo
| | 03:00 | in the top left corner which is
supposed to always jump me to the homepage.
| | 03:04 | I'll click that, and I'm back at the homepage.
| | 03:07 | So all of that interactivity is working both
in the interactive PDF version that we created
| | 03:13 | in the previous movie and in this SWF version.
| | 03:17 | Which option you go for depends on what you
know about the people that you're going to
| | 03:20 | be sending these proofs to.
| | 03:23 | If you know they're going to try and view
this on say an iPad which doesn't support
| | 03:27 | any type of Flash, then you're going
to have to go with interactive PDF.
| | 03:32 | If you know they're going to be viewing this
on a desktop browser, most of which come with
| | 03:37 | the Flash player built-in, then exporting to the
Flash player format is probably the way to go.
| | Collapse this transcript |
| Creating working navigation buttons| 00:00 | When you're dealing with interactivity in
an InDesign document, the next level up from
| | 00:04 | a basic hyperlink is a button.
| | 00:07 | While a hyperlink will work simply when you
click on it, a button can have various states
| | 00:13 | and provide visual feedback when you
roll over it, roll off it, and click on it.
| | 00:18 | And InDesign allows you to create
buttons that work exactly that way.
| | 00:22 | Let's take a look at how you create a
button in InDesign that works and reacts the way
| | 00:27 | it would on the web.
| | 00:28 | I am going to go to my Pages panel, to the
Master page for this site where my nav bar
| | 00:33 | is, and I am going to select this first
button in the nav bar and zoom in on it.
| | 00:39 | Now in an earlier movie in this course, I
had created this entire nav bar as a single
| | 00:44 | InDesign table, because it was the fastest
and easiest way to do it at the early stage
| | 00:49 | of the design process.
| | 00:51 | Now that I'm actually building some
functionality into this, and my design decisions are largely
| | 00:56 | made, I needed to break up that table because I
can't make a button out of each cell in a table.
| | 01:03 | Everything had to be broken
out into a separate object.
| | 01:06 | And to do that quickly and easily, all I
did was select each cell in the table, cut it
| | 01:11 | to the clipboard, and paste it into a new text
frame as a one-row, one-column single-cell table.
| | 01:19 | And then I placed them all back in the line
so that they look like one continuous object.
| | 01:24 | Now I want to take the first of these
nav bar items and turn it into a button.
| | 01:28 | To do that, I'll go to Window >
Interactive > Buttons and Forms.
| | 01:34 | That opens the Buttons and Forms panel, and
I am actually going to pull that off here,
| | 01:39 | so I have it available to me even while I
am working in other panels, and I don't have
| | 01:43 | to keep jumping back and forth.
| | 01:45 | The first thing I will do from the Type Menu is to
select button, and that turns this object into a button.
| | 01:51 | You can see that its outer border
changes into this dashed somewhat thicker line.
| | 01:57 | Once I've turned this into a button, this
Appearance area gives me three options for
| | 02:02 | how this button will appear in its various
states, Normal, when nothing is happening
| | 02:07 | to it, Rollover when the mouse moves over it, and
Click when it's actually clicked with the mouse.
| | 02:14 | To add any of these other two appearances
besides Normal, all I have to do is click
| | 02:18 | their name here in this Appearance window,
and a duplicate of the current Normal appearance
| | 02:24 | is automatically created.
| | 02:26 | The easiest way to change an object's
appearance as always is with an object style.
| | 02:32 | And I happen to have one created in this
document already called navbutton_rollover.
| | 02:38 | With this rollover state selected in the Buttons
and Forms panel, I will click that navbutton_rollover
| | 02:44 | object style to apply it to
this appearance of the button.
| | 02:48 | Next, I will select the Click state which
another duplicate of the original Normal state.
| | 02:55 | Then I will go back to my Object Styles panel,
and apply the navbutton_click state that I've
| | 03:01 | already created, and that's just a
solid black background behind here.
| | 03:06 | So now I can toggle through and see what
the different appearances of my button will be
| | 03:10 | depending on the user's interaction with it.
| | 03:13 | And I always want to make sure that I set
it back to its normal appearance before I
| | 03:16 | save this document and export it.
| | 03:18 | Next, I will give the button a
name, in this case, Programs.
| | 03:24 | And I have to do two more things to make
this a working button, the first is to tell it
| | 03:29 | what it's going to react to, and the
second is to tell it what to do when it reacts.
| | 03:35 | What it reacts to is an event, and in this
case, the default is On Release or Tap, and
| | 03:40 | that's what I'm going to choose.
| | 03:43 | That's when someone clicks it and then
releases the mouse, not when they initially click it,
| | 03:47 | or when they've tapped it if
they're viewing it on a tablet.
| | 03:51 | Next is the Action, what to
do when that event takes place.
| | 03:56 | To add an action, I will click this Plus icon,
and I have different actions available
| | 04:02 | to me for different output destinations.
| | 04:05 | Everything at the top, I can do whether I
export to Flash Player, or to Interactive PDF.
| | 04:12 | Below that, I have options that are restricted,
in this case, to Liquid HTML5 and SWF Only.
| | 04:18 | I can do any of these.
| | 04:20 | And in PDF Only, I can do any of these.
| | 04:24 | When I export to Flash Player, I have the
option to go to a specific page in this document.
| | 04:29 | But I don't have that in PDF only.
I can only go to a Destination.
| | 04:35 | And a destination in an InDesign document
is either a bookmark or a text anchor, and
| | 04:41 | those have to be created in
order for me to designate it here.
| | 04:44 | So, before I can finish telling this button what to do,
I need to create that destination in the document.
| | 04:51 | So I am going to go to the Pages panel, and I'm
going to go to Page 3, and let's fit that in the window.
| | 04:58 | This is the Academic Programs page, and this
is the destination that I want for that button.
| | 05:04 | To add that destination to the
document, I need to create a bookmark.
| | 05:07 | And I do that from the Bookmarks panel.
| | 05:09 | I have already got ones for the
other buttons that I've already created.
| | 05:15 | And from the Bookmarks panel
Menu, I'll choose New Bookmark.
| | 05:19 | Since I'm on this page,
this is what I'm bookmarking.
| | 05:22 | So I'll just type in Programs, hit Return,
and now I'm ready to go back to my Master
| | 05:29 | page, to that button at the top, and
assign the proper action of Go To Destination.
| | 05:37 | I will go back to the Buttons panel, or I can now
assign the appropriate Go To Destination action.
| | 05:44 | And when I do that, the interface changes
again, my destination is within this InDesign
| | 05:50 | document, buttons.indd and the
Destination is any of my existing bookmarks.
| | 05:56 | Here is the one I just created, Programs.
| | 05:59 | I'm also given Zoom options. This is
specific for PDF export where I can specify whether
| | 06:06 | the current zoom is inherited when the
destination is reached, or if it switches to Actual Size,
| | 06:13 | Fit in Window, or Visible Width. I am
going to keep it at Inherit Zoom right now.
| | 06:17 | And now I've told this button everything I
need to about how it's supposed to behave.
| | 06:22 | Let's put it to the test.
I am going to close the Buttons and Forms panel.
| | 06:29 | I've already made all these other
options in the top into buttons.
| | 06:34 | So I'm ready to export this file.
| | 06:37 | So first I will save it,
and then I will export it.
| | 06:41 | For now, I'm just going to export this to
the Flash Player in SWF format, and I will
| | 06:46 | save it to my Desktop.
These are the SWF options that I want.
| | 06:51 | In my Export SWF dialog, I want to make sure
that I'm exporting All Pages and then InDesign
| | 06:56 | generates the HTML and shows it to me afterward,
everything else is exactly the way I want it.
| | 07:02 | I will click OK, and my
layout opens up in my browser.
| | 07:08 | And now let's see how my buttons behave.
| | 07:10 | First I will go over to Programs,
and there's my Rollover state.
| | 07:14 | I'll click it, and there's my Click state, and
when I release, it goes to that page in the document.
| | 07:21 | And when I move my mouse off as you
saw, it goes back to its Normal state.
| | 07:26 | All of these other buttons behave the same way.
| | 07:29 | Some of them go nowhere because I haven't
created these pages, but if I click About,
| | 07:34 | it goes to the About Roux Academy page.
| | 07:36 | And if I click Contact,
goes to the Contact page.
| | 07:40 | So my button functionality
is working great here.
| | 07:43 | And when you've got your design finalized,
and you're ready to show it to your client,
| | 07:48 | a rollover state, and a working
click is really worth a thousand words.
| | Collapse this transcript |
| Adding video| 00:00 | Video is absolutely
everywhere on the web these days.
| | 00:03 | With ubiquitous, broadband, and Wi-Fi
connectivity, streaming video on web pages has become one
| | 00:09 | of the most effective ways of
communicating and engaging with a visitor to a site.
| | 00:14 | InDesign has supported the import
and export of video for many versions.
| | 00:18 | So if you're designing pages that will
include video, you can not only add accurately sized
| | 00:22 | placeholder frames for the video, you can
preview that video in the context of your layout.
| | 00:28 | When it comes to placing video in
InDesign, there are two approaches.
| | 00:31 | The first is to just place a local video
file that's on your hard drive the same way you
| | 00:36 | would place any image and
drop it into the layout.
| | 00:40 | The second is to point to an external
video that's out on the web by a direct URL.
| | 00:47 | Let's take a look at the first method for
adding a file that I have locally on my hard drive.
| | 00:52 | Just like I would place anything else in InDesign,
I place a video by hitting Command+D or Ctrl+D
| | 00:56 | on Windows or going to File > Place.
| | 01:00 | In the Exercise Files folder in the Links
folder, I have this farmtotable.mp4 file.
| | 01:06 | When you're placing video in InDesign, there are
some limitations in terms of what video is compatible.
| | 01:12 | You can only use Flash Player compatible video
like FLV or F4V format, or H.264 encoded video.
| | 01:21 | You can also include SWF files
which are Flash Player compatible.
| | 01:24 | So, if you have a Flash Player SWF animation
that you want to place in, the process is the same.
| | 01:32 | So I'll grab this MP4 file which is an H.264
encoded video, click Open, and I get this
| | 01:39 | media cursor to place.
| | 01:42 | I'm just going to click and drop
it in there at 100% onto the page.
| | 01:47 | It creates a new frame.
| | 01:48 | And right now, I'm just seeing the first frame
in the video which happens to be a black screen.
| | 01:54 | Although this is a video, I can manipulate it
largely like I manipulate any other InDesign object.
| | 02:00 | For example, I can click Auto-Fit here in
the Control panel to make sure that when I
| | 02:05 | resize this frame that the content--the
video itself--will resize according to the size of
| | 02:11 | the frame, and I'm going to do just that.
| | 02:13 | With my Height and Width Aspect Ratios locked
here in the Control panel, I'm going to make
| | 02:18 | this 600 pixels wide to fit my content well.
| | 02:22 | And when I tab out of that field, you can
see my height has also been adjusted because
| | 02:26 | I've constrained that aspect ratio.
| | 02:29 | I'm going to drag this onto my page about
here and release, and I can also apply a text
| | 02:34 | wrap on this so that my
text will flow around it.
| | 02:37 | I'll open the Text Wrap panel by hitting Command+Option+W
or Ctrl+Alt+W on Windows, and I'll just click
| | 02:44 | the Jump Object option so that everything
skips over this frame, and give it a Buffer
| | 02:50 | of about 20 pixels, and
close the Text Wrap panel.
| | 02:54 | So now I've got my video in place, but I
certainly don't want to leave this here with just this
| | 02:59 | black frame. I would like to have something in
its place that is a little bit more appealing
| | 03:04 | in case someone chooses not to play the video
at all, they at least have something to look at.
| | 03:09 | All of my options for working with a video
placed in InDesign exist in the Media panel,
| | 03:15 | and that's under Window > Interactive > Media.
| | 03:19 | I happen to have that here in my web
workspace that I created in an earlier movie.
| | 03:25 | In the Media panel, I can actually play and
watch this video, a portion of it or in its
| | 03:30 | entirety, and I can set all of the options
for how this video will work when I export
| | 03:36 | it to either interactive PDF or to Flash Player.
| | 03:40 | The Media panel is also where I would specify a
video from a URL if that was the approach I was taking.
| | 03:47 | For that, I would go to the panel Menu,
choose Video from URL, and put in the direct URL
| | 03:54 | path to the video file.
| | 03:56 | It can't be something like a YouTube video link or
an embed code for a Vimeo video or some other format.
| | 04:03 | It has to be a direct path to a video file that is
compatible with Flash Player or is H.264 encoded.
| | 04:12 | But if I were pointing to URL on the
web, this is where I would enter it.
| | 04:16 | And from that point forward,
the process is the same.
| | 04:18 | I'm going to cancel out of that
and keep this local video version.
| | 04:23 | To select my placeholder frame, or what's
called a poster frame, I'm going to scrub over to
| | 04:29 | a portion of this video that will give me
something that looks a little bit nicer when
| | 04:33 | people arrive at this page.
That's a nice colorful image.
| | 04:36 | I'm happy with that.
| | 04:37 | So here, from the poster options,
the default is From Current Frame.
| | 04:42 | I could also choose an external static
image file, or opt for no poster at all.
| | 04:47 | I'm going to stick with From Current Frame.
| | 04:50 | And when I release that menu,
it refreshes the view here.
| | 04:54 | If I hadn't clicked that at all, I could click this
little Refresh icon here, and it will do the same thing.
| | 04:59 | For the controller, I can choose any of a
number of flash-based controllers, and I'm
| | 05:05 | going to choose SkinOverAllNoFullNoCaption.
| | 05:09 | And once I pick a controller, I like to have
that controller visible on rollover, so someone's
| | 05:15 | mouse moves over this video, the controller
will pop up, but then it will fade away when
| | 05:20 | they move their mouse off.
I am happy with these options.
| | 05:23 | So I'm going to close the Media panel, and I
would really like to see this video in context.
| | 05:29 | Yes, I can play it in the Media panel, but
I'd like to see how this video plays in the
| | 05:33 | context of my entire web page.
| | 05:36 | To do that, I'll go to Window >
Interactive > SWF Preview.
| | 05:42 | This opens the SWF Preview panel which I can
completely resize because that's quite a small
| | 05:48 | representation of my page.
| | 05:49 | And when you look at something in the SWF
Preview panel, what InDesign has actually
| | 05:53 | done in the background is build the SWF
file necessary to present it to you this way.
| | 05:58 | This is basically a Flash Player
Viewer, that's what the panel does.
| | 06:03 | What's nice about that is if it works in the
SWF Preview panel, I can be certain that it's
| | 06:07 | going to work when I export to Flash Player.
| | 06:10 | But in the SWF Preview panel, I have all of
my interactivity, including the buttons that
| | 06:14 | I created in an earlier movie, those all work,
and my video will play right here in the context
| | 06:21 | of my page once I click it.
So the video starts to play.
| | 06:28 | I can see how the controller appears when I
mouse over and disappears when I mouse off,
| | 06:33 | and how I can stop or
restart the video at any point.
| | 06:38 | So, before I even export or leave InDesign, I know that
this is going to work in a Flash Player-based presentation.
| | 06:46 | Now, let's take a look at how I
would export this to Interactive PDF.
| | 06:51 | From the File Menu, I'll choose Export.
| | 06:55 | I'll make sure my format is
set to Adobe PDF (Interactive).
| | 06:59 | I'm just going to save this
to my Desktop, click Save.
| | 07:03 | I'm going to export all of the pages in this
document as single pages, and I want to view
| | 07:09 | it after exporting and make sure that Forms
and Media which is all my interactivity is
| | 07:14 | set to Include All. I'll click OK.
The PDF gets generated.
| | 07:19 | And because the video is getting embedded,
it hangs a little bit here at page 5 where
| | 07:24 | the video is because it's including
that entire video file in the PDF.
| | 07:29 | PDF opens automatically, and I can use the
buttons that I created to go to the Alumni
| | 07:35 | page where the video is.
| | 07:38 | When I hover over it, Acrobat doesn't give
me the Flash Player controller initially,
| | 07:43 | I have to click to activate this video.
So I'll click that.
| | 07:48 | Now, my controller appears a little
bit exaggerated at this reduced size.
| | 07:53 | But if I zoom in a little bit, the controller
is a little bit more accurate, and I can control
| | 08:02 | the video from here, I can move along the
timeline, I can increase or decrease the volume,
| | 08:07 | anything I could do in the web
presentation, I can do here in an interactive PDF.
| | 08:12 | And now I can hand this off to my client
and show them exactly how this page is going
| | 08:16 | to look with the video completely functional.
| | 08:20 | With video everywhere on the web, InDesign
offers a big advantage and effective prototyping
| | 08:25 | with its ability to accurately place video
content to scale in your design and to export
| | 08:30 | that in a format where the
video can be played in context.
| | Collapse this transcript |
| Adding HTML content| 00:00 | With CS6, InDesign gained the ability to
embed working HTML into an InDesign document.
| | 00:07 | Now this feature is geared mostly towards
Adobe's Digital Publishing Suite Workflow,
| | 00:12 | so you can't take complete advantage of it
in a web design project, but it's a great
| | 00:16 | way to drop in accurate
placeholders for live HTML content.
| | 00:22 | A good example of the kind of HTML content
you might want to embed into a web page design
| | 00:28 | is say a Google Map. Let's see how we can
bring in a very common embedded HTML object,
| | 00:35 | a working Google Map into our InDesign layout.
| | 00:38 | I am going to select this frame in the
layout which contains the address for the school,
| | 00:44 | and I'll just select the address, copy it,
and then go to my browser to Google Maps.
| | 00:51 | I'll paste the address into the Search field and
hit Enter, and I get the map showing me that address.
| | 00:58 | To get the code I need to embed this, I'll
just click the Link button, and I have the
| | 01:03 | option to point to it as a URL link or
embed it as HTML, that's the option I want to go for,
| | 01:10 | but I want to customize this and get a
Google Map that's a specific size and appearance.
| | 01:16 | So I'm going to click Customize and preview
embedded map, it shows me the current settings,
| | 01:22 | and there are Small, Medium, and Large options.
| | 01:25 | I'm going to click Custom, and I want a map
that's going to go in at exactly 400x300 pixels.
| | 01:34 | I get a Live preview, the map works, and this
is how it would work when this page goes from
| | 01:41 | my web mockup to working HTML, and down at
the bottom is the code I need to generate
| | 01:48 | this embedded Google Map.
| | 01:50 | I'll select all of that, copy it to
the clipboard and go back to InDesign.
| | 01:54 | I'll deselect this text and that frame, and
from the Object menu I'll choose Insert HTML.
| | 02:04 | The Edit HTML dialog pops up and by default
it always has This is an HTML snippet in it
| | 02:11 | with a couple of basic tags and a
frame is automatically created on the page.
| | 02:16 | I'll delete that placeholder HTML and hit
Command+V or Ctrl+V on Windows to paste in
| | 02:22 | my embeddable Google Map
code, and then I'll click OK.
| | 02:28 | InDesign churns this for a moment, processes the HTML,
and delivers up an accurate placeholder of that Google Map.
| | 02:37 | Now this is just a placeholder image. It's
not a working map. I'll just move this over
| | 02:42 | into position in my layout,
and I can add a Text Wrap to it.
| | 02:51 | So now I've got the map where I want it, at
the size I want it in my layout, but this is
| | 02:55 | just a placeholder image.
| | 02:57 | This is not going to work in my InDesign page,
nor am I going to be able to preview this
| | 03:02 | if I exported to SWF or interactive PDF.
| | 03:06 | Those two export paths and formats do not
support this functionality at the moment.
| | 03:11 | For right now, all I get is a placeholder
image, but I get a placeholder image that
| | 03:15 | is completely accurate to what
would show up on the web page.
| | 03:20 | It's the right size, it's the right dimensions,
and it's exactly what people can expect to
| | 03:24 | see when this gets turned
into a working HTML page.
| | 03:28 | The other upside of doing this, this way,
as opposed to just grabbing a screen capture
| | 03:33 | and dropping it in is that now saved in my
InDesign file is the embed code that I might
| | 03:39 | pass onto a developer when I'm ready to hand
my mockups off to have this site built in HTML.
| | 03:46 | At any point I can just select this HTML
object, right-click on it, and choose Edit HTML.
| | 03:54 | The entire iFrame code everything that I
need for this and that a developer would need
| | 03:59 | for this is right here, so at any point I
can just copy this, paste it into an email
| | 04:04 | or paste it into a plain text file, and send it off for
my developer to build into my HTML version of the site.
| | 04:11 | These HTML tools are meant for a different
workflow than web page design and prototyping,
| | 04:17 | but since embeddable content like Google Maps,
YouTube videos, Twitter Feeds, and Facebook
| | 04:23 | Like buttons are common place on so many sites,
it's a helpful way to take working code from
| | 04:29 | the web and generate an accurately sized
preview of embedded content into your design.
| | Collapse this transcript |
|
|
8. Handing It Off: Leveraging InDesign Files for Faster Implementation and DevelopmentPrint vs. web: Working collaboratively| 00:00 | When the design and production part of a print
project is done, your role as a designer doesn't
| | 00:05 | include calibrating the press, loading the
paper, or folding, trimming, and binding the job.
| | 00:11 | You pass those responsibilities to a printer
with the tools and expertise to handle them.
| | 00:16 | Likewise, with web design it's unusual that
a designer adept at marrying client messages
| | 00:22 | and expectations to a coherent visual brand
with clear, clean design and typography is
| | 00:27 | also going to be an expert in CSS, JavaScript,
jQuery, server configuration, and database integration.
| | 00:34 | For that, you're likely to hand off your design
and requirements to developers skilled in those technologies.
| | 00:41 | Handing off to a developer can be as simple as
exporting images of your InDesign web layouts
| | 00:46 | with a few notes or as detailed as
exporting HTML and CSS from InDesign to capture the
| | 00:52 | attributes of your text formatting and
eliminate guesswork on the part of the developer.
| | 00:57 | You can also export an interactive PDF to demonstrate
functionality or combine any of these methods together.
| | 01:05 | Which path you choose will depend a lot on your comfort
factor and your relationship with the developer.
| | 01:10 | Less work on your part probably means more hours on
the developer's end, which can affect the project cost.
| | 01:16 | More specifics reduce the margin of
error and could speed up the entire process.
| | 01:21 | In this chapter we'll look at how to take
what you've done InDesign and hand it off
| | 01:25 | to be translated into working web pages.
| | Collapse this transcript |
| Exporting flat PNG and JPEG comps| 00:00 | Once you've got your design finalized and
ready to hand it off, the fastest and easiest
| | 00:05 | way to provide a developer with a pixel perfect
mockup of your work is to export your InDesign
| | 00:10 | files as PNG or JPEG files.
First, let's take a look at exporting as JPEG.
| | 00:16 | I'll hit Command+E or Ctrl+E on Windows,
and I'll choose JPEG from the Format menu,
| | 00:22 | and I'm going to name this
rouxmockups.jpg, I'll hit Save.
| | 00:29 | And one of the nice things about exporting
from a multi-page InDesign document is you're
| | 00:32 | essentially batch exporting every page
in the document as an individual file.
| | 00:37 | I could choose a specific Range of pages
or even just a selected object on the page.
| | 00:42 | But I'm going to keep it at All, and export
all of the pages as individual pages, not spreads.
| | 00:48 | JPEG is a lossy compression scheme, so I want
to make sure that I set this to Maximum under
| | 00:54 | Quality to get the highest quality result.
| | 00:56 | For the Format Method, I'm going to leave
it at Baseline rather than Progressive which
| | 01:00 | will slowly build in quality as
the JPEG loads into the browser.
| | 01:05 | Since I'm just creating this as
a mockup, I'll leave it at Baseline.
| | 01:09 | For Resolution, I'll keep it at 72
pixels per inch, and the Color Space is RGB.
| | 01:14 | I want to make sure that Anti-aliasing is
checked so that my type edges get smoothed,
| | 01:19 | and any vector artwork that I've placed in my
InDesign layout gets nice, soft, anti-aliased
| | 01:25 | edges when it gets
converted and rasterized for JPEG.
| | 01:29 | I'll click Export, and InDesign should
be able to produce this in no time at all.
| | 01:34 | I'll go to the Finder, to my Desktop, and there
are sequentially numbered files rouxmockups.jpg
| | 01:41 | and then 2, 3, 4, and 5.
| | 01:44 | I'll take the first one which is my
homepage, drag it over Safari in my dock.
| | 01:49 | It opens up at a size that will fit in the
current browser window, but if I click on
| | 01:54 | it, it will zoom to actual size, and it's a nice,
crisp, clean JPEG showing me my entire page layout.
| | 02:01 | And I have one for each
page in my InDesign file.
| | 02:05 | Let's go back to InDesign and
take a look at exporting for PNG.
| | 02:09 | Again, I'll hit Command+E or Ctrl+E on Windows,
and just so that I can easily differentiate
| | 02:15 | these files once they are exported, I'm
going to change the file name by getting rid of
| | 02:18 | Roux at the beginning and then switch the Format to
PNG, and that automatically changes my file extension.
| | 02:26 | I'll click Save, and I have most of the
same options here in the Export PNG dialog.
| | 02:32 | I can Batch Export all of
the pages in my document.
| | 02:36 | I have a Quality setting
that goes from Low to Medium,
| | 02:39 | but PNG--or ping as it's often pronounced--is
technically a lossless compression scheme.
| | 02:47 | I'm not 100% sure why this Quality setting is here,
but I'm going to set it to Maximum just to be safe.
| | 02:53 | I'll keep the Resolution at 72, Color
Space at RGB, and Anti-aliasing is On.
| | 02:59 | One principle advantage of the PNG format besides
being lossless is that it supports transparency.
| | 03:05 | So I could check this and get a transparent
background for any part of my page that doesn't
| | 03:11 | have a Fill inside of an object.
| | 03:13 | I don't need that for these purposes. I
actually want to keep this as a simple flat image.
| | 03:19 | So, I'm going to leave that as unchecked.
| | 03:22 | Click Export, InDesign will
export all of my pages as JPEGs.
| | 03:28 | I'll go back to the Finder, to the
Desktop, and here are all of my PNG files.
| | 03:34 | I'll load that homepage in to my browser, click
it to get it to full-size, and there's my PNG file.
| | 03:43 | I can't visually see any appreciable difference
here between the JPEG version and the PNG version.
| | 03:49 | Both were output with their maximum possible
Quality settings, and they both look great.
| | 03:54 | It's not a bad idea to talk to your
developer about which format they prefer, but in my
| | 03:58 | opinion PNG is the better of the two options
because of its lossless compression scheme,
| | 04:03 | relatively smaller file size,
and its support for transparency.
| | 04:07 | Whichever you settle upon though, InDesign makes
getting your layouts into those formats fast and easy.
| | Collapse this transcript |
| Exporting mockups at a device-specific resolution| 00:00 | We've talked a few times in this course
about screen sizes and pixel dimensions
| | 00:05 | and how the old 72 pixel per inch standard
is no longer the case in today's changing
| | 00:10 | world of mobile devices.
| | 00:13 | The iPad 2, for example, has a
screen resolution of 133 pixels per inch.
| | 00:19 | That means that a pixel occupies a physically
smaller area on that device, and your pixel-based
| | 00:24 | designs will appear smaller.
| | 00:26 | Fortunately, you can generate JPEG or PNG
comps from InDesign that simulate this and
| | 00:33 | help give you a better idea of exactly how big
your layout is going to look on a specific device.
| | 00:39 | In this document I've created a mockup for
my website and then an ultimate layout using
| | 00:44 | the Liquid Layout and Alternate Layout features,
that's optimized for the iPad 2's 768 pixel wide display.
| | 00:54 | When I view the two layouts side by side
in InDesign, and each one goes up to 100%, I
| | 01:06 | am comparing the two layouts based on this
particular monitor's resolution, which is the same.
| | 01:12 | Even though I'm looking at this layout on
the left, this layout on the right, I'm looking
| | 01:15 | at two different layouts, but I'm looking at
them on the same display with the same resolution.
| | 01:21 | If I Export my iPad 2 layout here at 72 pixels
per inch, it's not going to give me an accurate
| | 01:28 | representation of that device's 133
pixels per inch screen resolution.
| | 01:34 | Fortunately, I can export my PNG or JPEG
mockups of this layout at a specific screen resolution
| | 01:41 | that's right for that device and then
preview in Photoshop to get a much better idea of
| | 01:47 | its true physical size.
| | 01:49 | I'll hit Command+E or Ctrl+E
on Windows to Export the file.
| | 01:54 | I'm going to use the PNG format and
Export this as ipad2.png, click Save.
| | 02:02 | I'm going to choose the pages that are in my
iPad Vertical Layout, set the Quality to Maximum,
| | 02:07 | and I'm going to switch the Resolution from
72 pixels per inch to 133 pixels per inch.
| | 02:15 | I'll leave Transparent Background off,
because I don't need that, and I'll click Export.
| | 02:20 | InDesign rasterizes all of those pages,
Exports them out to PNG, and I'll go to the Finder
| | 02:25 | to my Desktop, and here are my PNG files.
| | 02:29 | Rather than open them in the browser, which
is going to, again, show it to me at this monitor
| | 02:35 | screen resolution, I'm going to
open this page up in Photoshop.
| | 02:38 | I'm just going to drag it down to the dock,
over the Photoshop icon, to open it there.
| | 02:43 | If I double-click the Zoom tool,
I get the actual pixel view.
| | 02:48 | And that's actual pixels based
on the resolution of this monitor.
| | 02:52 | So, I'm seeing a much bigger
page than I'll see on the iPad2.
| | 02:58 | However, if I right-click on the image, and
switch to Print Size, it adjusts to the pixel
| | 03:06 | resolution of this image, and it shows me a
close approximation of what this will actually
| | 03:12 | look like at 133 pixels per inch.
| | 03:14 | So, if you need to evaluate say your type
size or just the overall appearance of your
| | 03:19 | layout on a specific device that you're
targeting, this is the right approach for doing it.
| | 03:25 | Export it at the device's
resolution from InDesign.
| | 03:28 | Open it in Photoshop, and view it in Print
Size to really get a sense of how this is
| | 03:32 | going to look at your intended destination.
| | Collapse this transcript |
| Generating a layered PSD file| 00:00 | Perhaps one of the most useful things you
could hand off to a developer is a layered
| | 00:04 | Photoshop file that represents any
layering that you used in your InDesign layout.
| | 00:09 | As I've been working on this project, I've
been meticulous in my use of layers for my
| | 00:14 | own organizational purposes.
| | 00:16 | And now I would like to take that layered
structure and get it out into rasterized Photoshop
| | 00:22 | layers in a single file.
| | 00:24 | Unfortunately, there's just no out of
the box way to do that in InDesign.
| | 00:28 | There is no direct export function that will
get InDesign layers exported out and preserved
| | 00:34 | as Photoshop layers.
There is a workaround.
| | 00:38 | It's a little bit harder on the Windows side.
| | 00:40 | But there's a script that can automate
nearly the entire process on the Mac side.
| | 00:45 | Let's take a look at how it
would need to be done on Windows.
| | 00:48 | First, each layer of your InDesign file
would have to be exported by itself to a PDF.
| | 00:55 | Then those PDFs would need to be opened
in Photoshop and reassembled into layers.
| | 01:00 | Let's start with the export process.
| | 01:02 | I'm on one page of this document,
and that's all I am going to work with.
| | 01:06 | Before I can export any single layer from
this document out to PDF and then ultimately
| | 01:11 | to Photoshop, I want make sure that I
export it with all of the right PDF settings.
| | 01:16 | For that, I've created a PDF preset just for
this type of export, and that PDF preset is
| | 01:21 | in the exercise files.
Here's how we would load this into InDesign.
| | 01:25 | From the File Menu, I will go to Adobe
PDF Presets, and Define, I will click Load.
| | 01:33 | And in the Exercise Files folder, I want to
choose the ID to Layered PSD.joboptions file.
| | 01:39 | I will click Open and then Done.
| | 01:43 | Next, I want to have only one layer
revealed at a time to start exporting.
| | 01:48 | I will go to the top-most visible layer and
Option-click its visibility icon or Alt-click
| | 01:55 | on Windows to turn off all the other
layers and only have this one showing.
| | 01:59 | Next, I'll go to File > Export, and I am
going to export this topmost layer as 01.pdf.
| | 02:09 | I'm exporting only page 4.
It's using the PDF preset that I just loaded.
| | 02:14 | I will click Export, and I'm
ready to move onto the next.
| | 02:17 | If I Option-click again on this second layer, it
shuts off all the other layers and just reveals that.
| | 02:24 | I'll export this one, Command+E or Ctrl+E
on Windows to export, and call it 02.pdf.
| | 02:32 | To move this exercise along,
I've actually done 3 through 10.
| | 02:37 | So once I'm done with this, we'll
be able to move onto the next step.
| | 02:41 | If you're working on your own files, you are
going to have to do this layer by layer, and
| | 02:45 | for each individual page.
| | 02:48 | Before I close this document, I will go back
and turn all my layers on, save it, and close it.
| | 02:53 | Next, I need to go to Photoshop and make sure
that when it opens these PDFs, it opens them
| | 02:59 | at the right resolution and
with all the right settings.
| | 03:02 | To do that, I will have to open one of the
PDFs I just created or any PDF for that matter.
| | 03:09 | Select it, click Open, and at the moment, they
are not anywhere close to where they need to be.
| | 03:14 | Notice I'm seeing just the logo cropped here,
because Bounding Box is the Crop To option.
| | 03:21 | I want to bring in this logo in
the context of the entire page.
| | 03:25 | So I need to choose Trim Box, and you can see now
my logo is in the top-left of a much larger area.
| | 03:31 | I also want this at 72 pixels per inch.
I do not want a 4000-pixel-wide image.
| | 03:36 | So I will switch this to 72.
| | 03:39 | And you can see that my
image size adjusts to 960x1500.
| | 03:44 | That matches my InDesign layout.
It's in RGB color, which is fine.
| | 03:48 | It's actually been as sRGB
profile, but that works as well.
| | 03:53 | And now I can just click OK,
and it will convert this one PDF.
| | 03:56 | I don't actually need to use this one, I just
needed to open it to establish those settings.
| | 04:03 | Now every PDF I open with Photoshop will
open with those settings until at some point I
| | 04:08 | actually change them.
I am not going to save this.
| | 04:10 | I am going to find that
folder full of PDFs on my Desktop.
| | 04:16 | Because I am on the Mac, I can just click
this little folder icon in the top of the
| | 04:20 | folder bar, and drag it over Bridge,
so I can get directly to those files.
| | 04:26 | On Windows, you can open Bridge and just
navigate to the folder with all of your PDFs.
| | 04:30 | So here are my 10 PDF
files, numbered 1 through 10.
| | 04:34 | I am going to select all of them, go to the
Tools Menu, and under Photoshop, choose
| | 04:41 | Load Files into Photoshop Layers.
The rest is automated by Bridge.
| | 04:47 | Each PDF is opened up in Photoshop using those
settings I just established in the prior step,
| | 04:53 | and then all of those individual Photoshop files are
rebuilt and stacked into a new layered Photoshop file.
| | 05:02 | Because everything was numbered sequentially,
when I exported it from InDesign, they're
| | 05:06 | layered in the proper order as well.
It has a transparent background.
| | 05:11 | And if I want, I can select the bottom layer,
Command-click or Ctrl-click on the Create
| | 05:16 | New layer icon to create a layer beneath that
and then hit Shift+F5 to fill that layer with
| | 05:24 | the foreground color of white to
get a better representation of my page.
| | 05:30 | And now you can see I've got a layered
Photoshop file with all of my InDesign layering.
| | 05:36 | I can toggle certain items on and off as needed.
| | 05:40 | But it's a bit of a
laborious process on Windows side.
| | 05:43 | I can now save this.
| | 05:45 | I will save it to my Desktop, call it alumni_page_layered,
click OK, and I'm Done, and I can close all
| | 05:55 | of these other windows without saving them.
Now that was just one page.
| | 06:01 | If you were exporting all of your pages to
layered PSD, you would have to repeat all
| | 06:06 | of these steps for every page you're exporting.
| | 06:09 | If you're on the Mac, there is a script that
will run in InDesign that will automate nearly
| | 06:14 | this entire process for you.
| | 06:16 | First, you need to load
that script into InDesign.
| | 06:19 | The script was created by a designer in Boston,
and it's available for download on his website.
| | 06:25 | I've already downloaded this to my Desktop,
and it expands into a folder called IDtoPS.
| | 06:31 | To install it, all I need to do is select
this PageToPSLayersV3.scpt file and drag it
| | 06:40 | into my InDesign application folder, into the
Scripts folder and then into the Scripts panel folder.
| | 06:46 | I can then switch back to InDesign, go to
Window > Utilities > Scripts, and there is
| | 06:53 | the script right there.
| | 06:55 | And let's see how much easier
this script makes this whole process.
| | 06:58 | I will double-click the script.
It will ask me where I want to save these PDFs.
| | 07:04 | I am going to create a new folder on my
Desktop called script pdfs and save them there.
| | 07:11 | I am going to choose that same ID to Layered PSD
PDF preset that we loaded earlier, and
| | 07:18 | set the Resolution to 72 pixels per inch,
and I am going to Export the same page, Page 4.
| | 07:24 | I will check Anti-alias, so I get nice
smooth edges on everything, and click OK.
| | 07:32 | And everything that was done before by
Bridge is now being done via the script.
| | 07:38 | And the entire export from InDesign process
was automatically handled by the script without
| | 07:42 | any manual intervention on my part.
| | 07:45 | You can see that I've got basically the same
result here, a layered PDF representing everything
| | 07:50 | that was in that single page layout in InDesign,
except in this version, besides taking a fraction
| | 07:56 | of the time, it's also named everything
with my original InDesign layer names.
| | 08:01 | So, if you're on the Mac side, this can be
a huge timesaver, and it's no great hardship
| | 08:06 | to go back to my InDesign document
and do this for several other pages.
| | 08:10 | It's a bit more laborious on the Windows side,
but if you do need to get your layered InDesign
| | 08:16 | structure out to a layered
PDF, this is the way to go.
| | Collapse this transcript |
| Exporting web-optimized images| 00:00 | In some situations, you may need or just want
to gather and optimize all of the necessary
| | 00:06 | image files for your site to hand off
to a developer or to your web team.
| | 00:11 | InDesign offers a number of options for this
task, one of which is sure to meet your needs.
| | 00:16 | The simplest one that gives you the most
control but also requires the most work is to simply
| | 00:21 | copy and paste your images
out of the InDesign file.
| | 00:25 | Even if you're exporting JPEG or PNG mockups
of the entire web page as reference for your
| | 00:30 | developer, it's probably going to be more convenient
for them to work with the individual component images.
| | 00:37 | So if I export a JPEG of this full homepage,
someone's going to have to go in and slice out
| | 00:42 | all these individual image
files, and that's extra work.
| | 00:45 | I have already got them here as
individual selectable objects in InDesign,
| | 00:50 | so I can take care of some of that work a
little bit more quickly, and the reason I might
| | 00:54 | want to do this is my images in InDesign may
not be placed at exactly the size or cropped
| | 01:00 | in exactly the way that the original is.
| | 01:03 | For instance, this image here is presented
exactly how I want it in the layout, but that
| | 01:07 | required cropping at top and bottom.
| | 01:10 | I don't want to hand off this image with all
of that extra information to have a developer
| | 01:15 | then have to crop and resize, and it might
not exactly match what I want. I'd like to
| | 01:20 | give an image that's exactly
the size and this orientation.
| | 01:25 | So the easiest method is to just select the
image, copy it to the Clipboard, go to Photoshop,
| | 01:32 | create a New Document, which by default is
created of the size of my clipboard and just
| | 01:39 | paste this image in.
| | 01:41 | It comes in as a Vector Smart Object, but
I can flatten that if I want, or I can just
| | 01:45 | leave it this way, and then I can either
save this as JPEG, PNG, PSD, whatever format I
| | 01:52 | think works best or my developer prefers, and
it's cropped exactly the way I want it to be.
| | 01:57 | Of course, doing this image by image is
going to take a little bit extra time, but I find
| | 02:03 | that the copy and paste results out of InDesign are
actually some of the most satisfying image quality results.
| | 02:09 | So it's really a matter of what your
preference is, what your workflow and your time support.
| | 02:15 | The other option is to let InDesign handle the
exporting for you, bypassing Photoshop altogether.
| | 02:21 | I could simply select the same image and
hit Command+E or Ctrl+E on Windows, choose my
| | 02:27 | desired format from the Menu. Let's say I
want to go to PNG, pick a location for the
| | 02:33 | file, give it a name, home_rabbit.png, click
Save, and just choose Selection, instead of
| | 02:45 | exporting an entire page or Range of pages.
| | 02:48 | Here I can set my Image Quality settings,
my Resolution, my Color Space, whether or
| | 02:55 | not it has the Transparent Background, is Anti-
aliased, all the typical PNG options, but it's just
| | 03:00 | for this one selected item,
and I can click Export.
| | 03:05 | And now that file is Saved,
then I can move on to the next one.
| | 03:08 | I'm not going to Photoshop, pasting it, saving a
new file, naming it and then coming back to InDesign.
| | 03:14 | But again, if you want all of the images
separately, you're doing it one by one.
| | 03:18 | There is a method for sort of batch exporting
from InDesign, and it requires using InDesign's
| | 03:24 | Articles panel which debuted in InDesign CS5.5.
| | 03:29 | From the Window menu, I'll choose Articles,
now the Articles panel opens up with nothing
| | 03:34 | in it except for
instructions about how to use it.
| | 03:37 | And basically it works this way, anything
you drag into the Articles panel can be used
| | 03:42 | to determine what you export from InDesign,
and you can rearrange it to determine what
| | 03:47 | order it gets exported in.
| | 03:49 | This is great for HTML Export and for ePUB
Export, and that's really what it's here for,
| | 03:55 | but it can be tweaked and used in this
manner to export a number of images in one step.
| | 04:00 | Let's say I wanted to export all of these
large hero images at the top of my pages.
| | 04:05 | I can simply click the image, hold and
drag it into the Articles panel, I'll create a
| | 04:11 | New Article called hero images--I don't technically
have to name it at all--and make sure Include
| | 04:16 | When Exporting is on, and I've
added that image to the Articles panel.
| | 04:21 | I am going to pull the Articles panel off here.
| | 04:24 | So I have continuous access
to it, go to the Pages panel.
| | 04:28 | And now I'll go to the Next page and grab
that hero image and add it to the same article.
| | 04:32 | I want to make sure that this black heavy
bar comes right in within that hero images
| | 04:38 | article and adds it to the same article.
| | 04:40 | I'll go to Page 3, grab that hero image, add
it to the Articles panel, Page 4, and Page 5.
| | 04:54 | It's showing me all the individual
file names for all the images that I've added to it,
| | 04:59 | and that's everything that I
am ready to Export for now.
| | 05:02 | So from the File menu, I'll choose Export,
and the Format I'm going to choose is HTML.
| | 05:09 | I'll save this to the Desktop, and I
am going to call it batch_images.html.
| | 05:16 | I am not actually going to need the HTML
file at all. I am just going to need InDesign to
| | 05:21 | think I do, so it will take
all of the images with it.
| | 05:24 | I'll click Save, and I get
the HTML Export Options dialog.
| | 05:30 | I want to make sure that my Content Order
is Same as Articles panel, so it's only going
| | 05:34 | to Export what's in the Articles panel.
| | 05:37 | And under Image, I'm in the Copy these
Images as Optimized and Preserve Appearance from
| | 05:44 | Layout, because that's going to
preserve all of my cropping and sizing.
| | 05:50 | And even if I had something like rounded
corners, it would preserve that, too, and I'll choose
| | 05:54 | 72 pixels per inch as the Resolution.
| | 05:57 | For Image Conversion, I can leave it up to
InDesign and set it at Automatic, or I can
| | 06:02 | specifically pick a Format that I prefer.
| | 06:05 | There's nothing under the
Advanced tab that I need to look at.
| | 06:07 | So I'm ready to just click OK, and this
whole batch of images is exported and organized
| | 06:14 | into a single HTML file.
| | 06:17 | I can see everything here at the exact right
size, and they are all stacked one on top of another.
| | 06:23 | I'm actually going to Command-click on the
name of this file in the Safari menu bar
| | 06:29 | to back out and reveal it in the Finder, and
there's the batch_images.html file that got
| | 06:34 | exported, and this folder is all the
resources that go with that file. In this case, it's
| | 06:40 | all of the CSS and images.
| | 06:43 | I didn't export any text, so the
CSS is meaningless for me right now.
| | 06:48 | So all of my files have come out as PNGs
into a single folder, and I could then take this
| | 06:54 | image folder and hand it off to my developer.
| | 06:57 | For efficiency alone, the Articles panel offers the
most bang for your buck when you're exporting images.
| | 07:02 | I found that occasionally, the quality
suffers slightly when exported in this manner, but
| | 07:07 | that's up to you to decide. You can see
the results for yourself and determine if you
| | 07:11 | want to go with a more file-by-file
exporting or copy and paste method and get greater
| | 07:16 | control over the image conversion quality.
| | 07:19 | Depending on your needs, one of these
approaches will get you the results you are looking for.
| | Collapse this transcript |
| Exporting HTML and CSS| 00:00 | Throughout this course we've used InDesign to
create highly-detailed pixel perfect mockups
| | 00:06 | of what our vision of a website should be,
with the ultimate goal of handing it off to
| | 00:12 | a developer or an internal web team to convert those
ideas and those visual concepts into working web pages.
| | 00:20 | And while a static JPEG or layered PSD file
or interactive PDF communicates a lot about
| | 00:27 | the functionality and appearance that we're
looking for, there is a lot of information
| | 00:31 | that doesn't automatically get handed
off that a developer is going to need.
| | 00:36 | Specifically the content on these pages, the
formatting of its text, the color of its text
| | 00:42 | and its size, and the spacing around objects,
the margins around objects like this where
| | 00:48 | I have this pull quote, none of that is
really specified in those static images.
| | 00:54 | You can look at it and make a good guess,
but the additional information that reflects
| | 00:58 | my many design decisions, like font size,
font face, font color, are not communicated
| | 01:06 | in those static visual references.
| | 01:09 | But because I've gone through this whole
project using InDesign features that help me speed
| | 01:14 | the process up and keep things organized, I
can also benefit from having done that and
| | 01:19 | give my developer more information that's
going to save them hopefully some time and
| | 01:25 | avoid miscommunication between what I put
together and what they produce for the web.
| | 01:30 | For example, in this main content area there
is a lot going on in the formatting of this text.
| | 01:36 | There is a specific color and weight and
font for the heading. There is spacing after it.
| | 01:41 | Likewise for the paragraph, and for the
pull quote, and the box that contains it, and my
| | 01:47 | secondary and third level headings, all of
these reflect specific design choices that
| | 01:54 | I've made, and all of that information is
stored in the form of carefully planned out
| | 02:01 | Paragraph Styles, Character
Styles, and Object Styles.
| | 02:06 | If I want to give my developer all the
information they can possibly use and capitalize upon
| | 02:11 | from the work I've already done, I need to take one
extra step in addition to those visual references.
| | 02:17 | What I'm going to do is export this particular
piece of content as HTML and take its InDesign
| | 02:24 | values and translate them more into web terms.
| | 02:27 | Now, this is not HTML that's going to produce
a working web page for me, and I'm only taking
| | 02:32 | the specific content that I need.
| | 02:34 | In this case I'm just taking this one frame
as an example, but let's take a look at what
| | 02:39 | we can export from InDesign
and pass on to a developer.
| | 02:43 | From the Window Menu, I'm going to go to the
Articles panel and drag this frame into the Articles panel.
| | 02:49 | I'll stick with the generic Article 1 Name and
make sure Include When Exporting is on and click OK.
| | 02:56 | And now I'll go to File Menu, to Export,
and I'm going to export this as HTML.
| | 03:03 | I'll do it to my Desktop, and I'll call it
export_test.html, making sure that HTML is
| | 03:10 | the Format selected down
here, and I'll click Save.
| | 03:15 | In HTML Export Options, I want to make
sure that Same as Articles panel is selected.
| | 03:21 | If I choose Based on Page layout, InDesign
is going to decide what to export and how
| | 03:26 | to export it, and that's not what I want.
I just want what I placed in the Articles panel.
| | 03:32 | What I want to export does not include images,
so I don't need to do anything in this tab,
| | 03:36 | but I want to make sure that in the Advanced
tab, Embedded CSS is selected so that InDesign
| | 03:42 | will write CSS that reflects the
attributes of my content from the InDesign layout.
| | 03:49 | Include Style Definitions should be checked,
because that's where all those attributes will be written.
| | 03:54 | And I tend to uncheck Preserve Local Overrides,
because I rarely use them, and I don't want
| | 03:59 | a lot of that written out as
code in the HTML. I'll click OK.
| | 04:05 | And almost instantly, the HTML and CSS files are
written, and the Exported Content opens up in my browser.
| | 04:13 | And while it's not an accurate reflection
of the look and feel from my site, which I
| | 04:18 | never expected, it does contain a lot of
information that reflects what I did in InDesign.
| | 04:24 | The color of my heading, the color behind
my quote in this box, the color of my level 2
| | 04:31 | heading, and my level 3 heading, the
bolding on this line, all of that has been preserved
| | 04:37 | and built into the CSS and HTML from InDesign.
| | 04:41 | I'm going to Command-click on the top of this browser
window and backtrack to the Desktop where I saved this.
| | 04:49 | And on the Desktop, along with this export_test.html
file is a folder export_test-web-resources,
| | 04:56 | in there is a css folder and then there is the
actual css that InDesign wrote from my exported content.
| | 05:04 | I'm going to Command-click both of these files,
right-click, and choose Open With > TextWrangler,
| | 05:10 | which is a free text editor
from Bare Bones Software.
| | 05:13 | I like it not just because it's free, but
because it color codes all of the tagging
| | 05:18 | in HTML documents, making it very easy
to separate content from tags visually.
| | 05:25 | I'm going to choose Soft Wrap Text
here so I can see everything on the page.
| | 05:30 | And you can see that my Text Content
has been marked up with HTML tags.
| | 05:34 | Now, this is not great HTML markup. I
would not recommend using this for your own web
| | 05:40 | page; however, it contains very important
information that's been taken from InDesign.
| | 05:46 | For instance, the names of my paragraph
styles are included in these paragraph class tags,
| | 05:52 | the name of the object style that was applied
to my pull quote box is included in this div tag.
| | 06:00 | For instance, the name of my InDesign
styles are actually added as class attributes to
| | 06:06 | the paragraph tags, like "h1-main" and "p-main".
| | 06:10 | And the names of my object styles
get appended to the div classes.
| | 06:14 | Here's the quote box object style name included
in the div class that encloses this pull quote.
| | 06:21 | Let's take a look at the CSS file itself which
contains even more valuable information brought
| | 06:27 | over from InDesign.
| | 06:29 | I'll scroll down here and take a look at the
attributes assigned to this p.h1-main class,
| | 06:34 | and these attributes include its exact
hexadecimal color, which came from InDesign, the font
| | 06:41 | that's used, the size of that font, its line-
height, it's margin-bottom, which is space after in
| | 06:48 | InDesign, its font-weight,
and many other attributes.
| | 06:53 | All of that is information that my
developer would have to guess at, or I would have to
| | 06:57 | meticulously document for them so that they can
produce CSS that matches all of my InDesign attributes.
| | 07:05 | But here InDesign has actually pulled it out
into CSS that I can just hand off to the developer
| | 07:10 | to use sort of as a cheat
sheet for building their own CSS.
| | 07:14 | I wouldn't expect any diehard developer or coder
to actually use the CSS as it comes out of InDesign.
| | 07:19 | InDesign has got a way to go before it
produces CSS that's really efficient and is going to
| | 07:25 | be up to snuff for people who are
really diehard back-end web coders.
| | 07:30 | However, I am happy to use it to provide all
of this information in addition to my visual
| | 07:37 | references, interactive PDFs for functionality,
and all the other things that are going to
| | 07:42 | bridge the gap between my InDesign mockup and
the working web page, which is my ultimate goal.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | If you want to know more about InDesign styles,
check out my course, InDesign Styles in Depth,
| | 00:05 | here on lynda.com online training library.
| | 00:09 | If you want to know more about the
interactive features we added to our document, I highly
| | 00:13 | suggest Mike Rankin's course
InDesign CS6: Interactive Documents.
| | 00:19 | If you're interested in web design for other
applications, there are plenty of resources
| | 00:23 | here on lynda.com, like Muse Essential Training
with James Fritz, Photoshop for Web Design,
| | 00:30 | and Illustrator for Web Design with Justin Seeley.
| | Collapse this transcript |
|
|
