IntroductionWelcome| 00:06 | What? You've never used Illustrator
for web graphics? Well, you're about to
| | 00:10 | discover what you've been missing.
| | 00:12 | Hi! I am Mordy Golding and this
is Illustrator CS4 for the Web.
| | 00:17 | If you are here, I am assuming
that you have a working knowledge of
| | 00:19 | Illustrator. If not, you might
first take a look at the Illustrator CS4
| | 00:23 | Essential Training to get up to speed.
| | 00:26 | Throughout this presentation, I'll
show you how you can take advantage of the
| | 00:29 | benefits of Adobe Illustrator to
create pixel-perfect web graphics as well as
| | 00:34 | cool and functional interactive Flash
content. We'll get started by taking a
| | 00:39 | close look at both pixel-based and
vector-based web graphics workflows and
| | 00:44 | we'll learn how to increase our
options with the use of Illustrator.
| | 00:47 | I'll share lots of great design
techniques like creating typography that looks
| | 00:50 | great on screen as well as easy ways to
add those cool reflections that you see
| | 00:54 | everywhere on the web these days.
We'll even learn how easy it is to create
| | 00:58 | really cool Flash animations.
| | 01:00 | Along the way, I'll introduce you to
some of the most productive features of
| | 01:03 | Illustrator, like using multiple
artboards new to Illustrator CS4, and how to
| | 01:08 | bring your art into Dreamweaver as well
as the new and very cool Adobe Flash Catalyst.
| | 01:14 | So are you ready to be more
productive, more efficient, more creative?
| | 01:18 | Of course, you are. So let's get
started with Illustrator CS4 for the Web.
| | Collapse this transcript |
| Understanding pixel- and vector-based web graphics| 00:00 | There are really two ways to use
Illustrator for web design. You can either
| | 00:04 | design artwork inside of Illustrator
and then export it directly for use on the web,
| | 00:08 | or you can create artwork inside
of Illustrator and then import those into
| | 00:12 | other applications, which will
then export items to the web.
| | 00:15 | What's great about Illustrator is that
you could choose either/or without any
| | 00:18 | consequence. Now within web workflows
specifically though, you kind of boil
| | 00:22 | these things down to two categories.
There are pixel-based web graphics and
| | 00:27 | then there are vector-based web graphics.
| | 00:29 | Both of these workflows each have
their own individual challenges and
| | 00:32 | generally the direction that you
choose is dictated by the file formats that
| | 00:36 | are required to deliver your artwork in.
| | 00:37 | For example, GIF, JPEG, PNG and
Wireless Bitmap formats are pixel-based
| | 00:43 | web graphics, and if you're using
Illustrator in tandem with other design
| | 00:46 | applications, you might consider
taking your artwork from Illustrator into
| | 00:49 | Photoshop, Dreamweaver or Fireworks.
| | 00:52 | However, if you're creating vector-
based web graphics, your file formats will
| | 00:55 | probably be SWF, SVG or FXG, and if
you're using Illustrator as a starting
| | 01:00 | point for your web design, you'll
find yourself bringing your artwork into
| | 01:03 | programs like Flash Professional, the
new Adobe Flash Catalyst, Flex Builder or
| | 01:08 | even Fireworks.
| | 01:09 | You may notice that Fireworks appears
listed in both categories and that's
| | 01:13 | because Fireworks supports both
pixel-based and vector-based graphics.
| | 01:17 | Now, I actually split this video title
into two parts. The first few chapters
| | 01:21 | deal with the challenges of creating
perfect pixel-based web graphics in
| | 01:24 | Illustrator, which is primarily a
vector-based application. The remaining
| | 01:28 | chapters focus primarily on vector-
based artwork destined for Flash.
| | 01:32 | With these things in mind, let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the
lynda.com Online Training Library, or if
| | 00:05 | you're watching this tutorial on a disc,
you have access to the Exercise Files
| | 00:08 | used throughout this title.
| | 00:10 | Exercise Files for this title are
arranged by chapter, as you can see here in
| | 00:13 | this folder. If you're a monthly or
annual subscriber to lynda.com, you don't
| | 00:18 | have access to the Exercise Files
but you can certainly follow along.
| | 00:21 | So, let's get started.
| | Collapse this transcript |
|
|
1. Creating DocumentsUsing the Web New Document Profile| 00:00 | I've always believed that Illustrator
suffers from somewhat of an identity crisis.
| | 00:04 | I mean, there are so many
different types of projects or design
| | 00:07 | tasks that you can do with Illustrator,
and because of that Illustrator has
| | 00:10 | many different settings and preferences,
each of them optimized towards each of
| | 00:14 | those workflows. Rather than just
jumping in and creating a brand-new file and
| | 00:18 | then worrying about getting all those
settings right, Illustrator allows you to
| | 00:21 | be proactive.
| | 00:22 | And you do that by creating a new
document based on a profile. In this way,
| | 00:25 | you're really telling Illustrator what
type of document you're about to create,
| | 00:28 | and that way all the settings would
be correct once that file is opened.
| | 00:31 | When you launch the program,
Illustrator presents you with this Welcome screen,
| | 00:35 | and on the right side where it says
Create New, you can choose between Print,
| | 00:38 | Web, Mobile and Devices, and also
Video and Film Documents. Since we're
| | 00:42 | creating web graphics, let's get
started by creating a web document.
| | 00:45 | Since we're letting Illustrator know
what type of graphics you want to create,
| | 00:49 | there are a couple of settings that
right off the bat will be done correctly
| | 00:51 | for us. For example, notice that the
measurements are now being done in pixels.
| | 00:55 | I'll also come down here where it says
Advanced and I'll click on this button.
| | 00:58 | I'll see that the Color Mode for this
document is already set to RGB, which is
| | 01:01 | correct for web graphics.
| | 01:03 | My Raster Effects are set to a low
enough resolution for the web, 72 pixels per
| | 01:07 | inch, and I also see there is a
Preview Mode here. Right now it's set to
| | 01:11 | Default but as we'll soon see we could
also choose an option called Pixel.
| | 01:14 | The Pixel Preview Mode is a completely
different preview that allows us to view
| | 01:17 | optimized graphics right on our screen.
| | 01:19 | Now, one of the things to note about
Illustrator CS4 is that you now have the
| | 01:23 | ability to create multiple artboards
in a single document. For example, maybe
| | 01:26 | we're creating some kind of a web
graphic where we want to show different
| | 01:30 | possible design ideas to a client,
maybe we want to show them three possible
| | 01:34 | different ideas.
| | 01:35 | I come over here where it says Number
of Artboards, and I'll change that number
| | 01:38 | to 3. I'll create the document and
I'll see that I now have three artboards
| | 01:41 | created, each of them are sized
to 800x600 pixels. Most importantly,
| | 01:46 | by creating documents in this way, all
the settings that we need for creating web
| | 01:49 | graphics are done right at
the beginning of our document.
| | 01:51 | In this way, we don't have to worry
about color shifting later on in our workflow.
| | Collapse this transcript |
| Creating your own New Document Profiles| 00:00 | I think it's great that Illustrator
ships with four profiles already set, one
| | 00:04 | for Print, Web, Mobile and Devices and
Video and Film. But the reality is that
| | 00:09 | all my web documents are not the same.
| | 00:10 | I really wished there was a way that
I can create a web profile for the needs
| | 00:13 | of each of my jobs. For example, I am
always creating ad banners, standard web
| | 00:17 | banners that are 468x60. It would
really be great if I could also create a web
| | 00:22 | profile just for those types of
documents. And the good news is that there is.
| | 00:26 | You can create your custom profiles.
In fact, you can create as many as you like.
| | 00:30 | To create your own web profile, start
by creating a new web document. Next,
| | 00:34 | I'll change the Width and Height
settings of my artboard. Let's do 468x60, and
| | 00:39 | I know that my clients always want to
see a variety of different ideas, so I am
| | 00:42 | going to change the Number of Artboards to 4.
| | 00:44 | Finally, I come down here on the
bottom where it says Preview Mode and I want
| | 00:47 | my preview to always launch as the
Pixel Preview Mode. Now that I've set my
| | 00:51 | settings, I'll go ahead and click OK
and I'll create my document. Now I am
| | 00:54 | ready to save this as my profile. I'll
go to the File menu and I'll choose Save
| | 00:58 | As. I want to make sure I save this
as a native Illustrator file. Because I
| | 01:02 | want to save this as a web profile,
I need to make sure I save it in the right
| | 01:05 | location so that Illustrator can find it.
| | 01:06 | I am on a Mac here, so I'll go first to
my user folder. I'll click on Library >
| | 01:11 | Application Support > Adobe > Adobe
Illustrator CS4 > en_US, and then I'll
| | 01:16 | scroll down the list here to
where it says New Document Profiles.
| | 01:19 | I can see here the profiles that
already shipped by default with Illustrator.
| | 01:23 | Let me give my profile a name. Let's
say I type in ad_banners and I'll click
| | 01:28 | Save. I'll use the regular
Illustrator options and just click OK. Back in
| | 01:32 | Illustrator, I'll go to the Help
menu and I'll choose Welcome Screen.
| | 01:35 | That brings up Illustrator's Welcome
Screen and I could see now that here on
| | 01:38 | the bottom of the Create New list that
my ad_banner profile has now been added
| | 01:42 | to the list. So it's really easy to
create your own custom profiles and
| | 01:45 | remember you can create
as many as you would like.
| | 01:48 | Because the location of where you save
your profiles is so important, here's
| | 01:51 | another look at the exact location that you need
to save your files on both Mac OS and on Windows.
| | Collapse this transcript |
| Taking advantage of web templates and content| 00:00 | Illustrator comes with lots of great
content that you could use. For example,
| | 00:04 | on the Create New section of the
Welcome Screen, you'll see there is a button
| | 00:06 | here called From Template. By
clicking on that, it takes you directly to an
| | 00:10 | area on your hard drive that contains
all these templates. Some of these are
| | 00:14 | great for web design.
| | 00:15 | For example, by Club you'll see
there's a Web Site file. It ends with an .ait
| | 00:19 | file extension, which stands for Adobe
Illustrator Template. In fact, you can
| | 00:23 | see these templates lot better using
Bridge. I'll click Cancel and I'll click
| | 00:26 | on the Bridge button right here on the
top of my screen. If I double-click on
| | 00:29 | the Club folder, I can see exactly
what that website design looks like.
| | 00:33 | What's important to realize here is
that Adobe didn't provide these templates
| | 00:35 | that I could actually use them for my
design, but rather it's a way that I can
| | 00:39 | reverse-engineer these files to learn
how they were built. In fact, some of
| | 00:42 | these templates can be quite helpful.
In fact, if I go back here to the regular
| | 00:45 | folder, you'll see there is a section
here called Blank Templates. Inside of
| | 00:49 | here is an entire document filled with
Banner Ads. I'll double-click on that to
| | 00:53 | open that up inside of Illustrator
and you could see that with multiple
| | 00:56 | artboards, this document contains
all the standard banner ad sizes.
| | 00:59 | No, there is no artwork here, but it's
a great way to get started on a project.
| | 01:03 | You can also access templates by going
to the File menu and choosing New from
| | 01:06 | Template. In addition, you could take
advantage of additional resources such as
| | 01:10 | swatches or symbols. I come over here
and I'll expand the panels. I'll click on
| | 01:14 | Symbols and then from the bottom left
of the panel, I'll click here and I'll
| | 01:18 | choose something like Arrows.
| | 01:20 | This is a great resource and once you
have this open you can use the arrows
| | 01:23 | here on the bottom to actually
load that additional symbol libraries.
| | 01:26 | Finally, you can create your own
templates. Simply create any new document
| | 01:30 | whatsoever, add any piece of artwork,
add layers, whatever you would like and
| | 01:33 | then go to the File menu
and choose Save As Template.
| | 01:36 | Unlike New Document Profiles,
Templates can contain artwork, layers and other
| | 01:40 | information inside of it. What's great
about templates is that you could also
| | 01:43 | easily save them and
distribute them amongst your colleagues.
| | Collapse this transcript |
| Setting up a custom web workspace| 00:00 | I am going to create a New Web
Document here using the web profile. I am just
| | 00:03 | going to use the regular Standard
settings, because I want to spend a few
| | 00:05 | moments talking about the
interface inside of Illustrator.
| | 00:08 | One of the great things that Adobe
has done recently is made a unified
| | 00:12 | interface that applies across the
entire creative suite. Even better, you can
| | 00:16 | customize this workspace to fit your
exact needs, and once you have positioned
| | 00:20 | everything just the way that you like
it, you can save or capture that as a
| | 00:23 | workspace. In fact, the Illustrator
team did a wonderful job by including
| | 00:27 | several workspaces that are
already created inside of the program.
| | 00:30 | Take a look here at the top of the
screen, where it says Essentials. If you
| | 00:33 | click on that, that gives you access
to some of the other settings that are
| | 00:37 | already inside of Illustrator.
| | 00:38 | For example, some of these workspaces
are optimized for different types of
| | 00:41 | workflows. For example, Painting. For
our needs though, it's interesting to
| | 00:45 | note that Illustrator also comes with
a Web workspace. I will go ahead and
| | 00:49 | choose that option, but I will be
honest with you, as a web designer on my own,
| | 00:53 | I don't necessarily find this as useful.
By setting up this workspace, Adobe is
| | 00:57 | basically telling us that these
are the web features that are part of
| | 00:59 | illustrator, but I find that, based
on experience; I like to set up my
| | 01:02 | workspace just a little bit different.
| | 01:04 | So what I would like to do is spend a
few moments showing you how I create my
| | 01:07 | Web 2.0 workspace. In fact, I will be
honest with you, I want to let you know
| | 01:12 | that I really like the way that Flash
has their interface laid out, so a lot of
| | 01:15 | the things that I am going to be doing here
inside of Illustrator does come from Flash.
| | 01:17 | I will start by grabbing this dark
gray bar right here and dragging it out so
| | 01:22 | that it no longer is
attached to the side of the screen.
| | 01:24 | The first thing I want to talk about
here is working with the toolbar. I am
| | 01:26 | going to take the tools that are
currently on the left side of my screen right
| | 01:29 | now and drag them all the way across
to the right side, and snap them to the
| | 01:33 | side of the screen here. I will also
click once in the bar here to make it a
| | 01:36 | single row of tools
instead of a double row of tools.
| | 01:39 | Basically, what I am looking for here
is to have all of my tools and panels on
| | 01:42 | one side of the screen, so my eye
always knows to go towards that one side of
| | 01:45 | the screen and my artwork
is going to everywhere else.
| | 01:48 | Next, I want to think about some of
the most important tools or panels that I
| | 01:51 | will be using when creating web
graphics inside of Illustrator.
| | 01:54 | The first thing is the Transform panel.
That becomes really important because
| | 01:58 | it will allow me to precisely
position my graphics on my screen.
| | 02:00 | I will go to the Window menu and I will
choose here Transform. I will take that
| | 02:05 | panel right here, drag it right here,
and as soon as I approach the side here a
| | 02:08 | little bar kind of comes out. I release
the mouse and now that becomes its own
| | 02:13 | doc right here on the side of the screen.
| | 02:14 | I will also add the Align panel
directly to that area as well. This way I have
| | 02:18 | Transform and Align together.
| | 02:20 | Next comes working with Color. I will
take my Swatches panel from here and I
| | 02:24 | will drag that here as well. I will
also bring the Color panel directly to that
| | 02:27 | area, and I will also specify that
right here, from the flyout menu of the
| | 02:31 | Color panel, that I choose Web
Safe RGB. In this case, I can see the
| | 02:35 | hexadecimal values of the colors that I choose.
| | 02:38 | Next, I will drag over Graphic Styles,
and also Symbols. These libraries will
| | 02:43 | help me maintain and also
create the web graphics.
| | 02:45 | Finally, I will bring my Appearance
panel right over here and also my Layers
| | 02:51 | panel. I always find that for most of
the graphics that I create the Appearance
| | 02:54 | and the Layers panels are very, very
important. In fact, in Illustrator CS4 the
| | 02:59 | Appearance panel is really important
because it gives me access directly to
| | 03:01 | some of the panels. For example, the
Stroke panel and even the Swatches panel
| | 03:05 | directly from these little squares.
| | 03:07 | So what I have here is basically most
of the panels that I will be using on a
| | 03:10 | day-to-day basis when I am creating my
web graphics. I will just add a few more
| | 03:14 | things to really fill out my Web 2.0 workspace.
| | 03:17 | I will start off by working with the
Pathfinder panel. I will drag that in over
| | 03:20 | here to create a new doc, but I will
also collapse that doc, because I don't
| | 03:24 | need to use it as much. I will also
move my cursor just a little bit left here,
| | 03:27 | where it turns into a double arrow,
and I will click and drag so that this
| | 03:30 | becomes just an icon.
| | 03:32 | Now I will go to the Window menu here
and I will also open up my Attributes
| | 03:34 | panel. The Attributes panel is
important because it gives me options for
| | 03:38 | applying image maps. Clicking on the tab
right here, I will drag that over here as well.
| | 03:42 | There are two more panels that I use
quite often. One of them is the Links
| | 03:46 | panel. I will go ahead and I will
drag that over here as well. Also, the
| | 03:50 | Actions panel. Let me close these, and
now I have created my Optimize workspace
| | 03:54 | for working with web graphics. Because
these panels aren't used as much, I can
| | 03:57 | simply click on them and then
make them go away as needed.
| | 04:00 | Finally, I will save my workspace.
I will go over here to where it says Web,
| | 04:04 | click, and then choose Save Workspace.
I will give it a name; let's call it Web
| | 04:09 | 2.0. You can actually use a period
or any punctuation when you save a
| | 04:13 | workspace, so I will call it Web 2
space 0 for now. Click OK, and now I have
| | 04:18 | done it. I have created my web workspace
that's optimized for the way that I work.
| | 04:22 | What's great about this is that we all
know that Illustrator can be used for so
| | 04:25 | many different tasks. When I am
working on something else, I can change my
| | 04:28 | workspace to be optimized
for that kind of workflow.
| | 04:30 | For example, I will go over here,
instead of Web 2.0, let's go, for example, to
| | 04:35 | Typography. Everything changes,
optimized for that kind of workflow. When I am
| | 04:39 | ready to work inside of web graphics
again, I simply come up to the top here,
| | 04:43 | choose my own workspace, and I'm ready to go.
| | Collapse this transcript |
|
|
2. Pixel-Based Web Graphics: Key ConsiderationsSetting measurement preferences| 00:00 | Making sure that certain Preference
Settings are set correctly from the
| | 00:03 | beginning will really save you a lot
of heartache later on. For example, when
| | 00:07 | working with web graphics, you are
always working with pixel dimensions.
| | 00:10 | Now, when we created a new document
using the Web Profile, we saw that
| | 00:14 | Illustrator already set our measurement
system to pixels. However, that doesn't
| | 00:17 | mean that everything is now
using pixels for measurements.
| | 00:19 | For example, when I click on this
rectangle right over here, I could see that
| | 00:23 | my Stroke is measured in points. I find
it easier that when I am designing web
| | 00:27 | graphics I really want to use a
consistent measurement system.
| | 00:29 | So I will go over here where it says
Illustrator and choose Preferences. If you
| | 00:33 | are on a Windows machine, you would go
under Edit and choose Preferences,
| | 00:36 | but I'm going to choose here Illustrator >
Preferences, and then I will choose Units
| | 00:40 | & Display Performance.
| | 00:41 | Here for a Stroke Weight, I will also
choose Pixels. So now my General setting
| | 00:46 | is set to Pixels as well as my Stroke.
I am going to leave my type setting left
| | 00:50 | to Points right now, just because in my
own designer mind it's easier for me to
| | 00:53 | understand type size based in points
than pixels. But I will leave that up to you.
| | 00:57 | Now I will click OK, and you notice
that when I go ahead and I select this
| | 01:00 | box right now, my Stroke measurement
is measured in pixels. Now, as I make
| | 01:05 | adjustments all throughout Illustrator,
I will have one consistent measurement
| | 01:07 | system, pixels for web graphics.
| | Collapse this transcript |
| Setting preview bounds| 00:00 | As you create web graphics inside of
Illustrator, nothing is more important
| | 00:03 | than the pixel dimensions that we used
to define those graphics. What's great
| | 00:07 | about Illustrator is because its
object based and vector graphics are very
| | 00:10 | precise in nature, it can be very
easy for us to create just the right size
| | 00:14 | graphics that we need.
| | 00:15 | For example, if I click on this
rectangle right over here, I can go over here
| | 00:19 | to the top where it says Width and
Height and see that the size is exactly 90
| | 00:23 | pixels wide by 20 pixels high. By the
way, this is referred to as the Control
| | 00:27 | panel inside of Illustrator, and
what's great about the Control panel is that
| | 00:30 | it actually senses the resolution
that you have your monitor set to.
| | 00:34 | If you have a smaller monitor or if
your monitor is set to a lower resolution,
| | 00:37 | you may not see these up here. In fact,
that's one of the reasons why I had the
| | 00:40 | Transform panel always
available on sight for me.
| | 00:43 | Again, a quick look here shows me that
I have a Width of 90 pixels and a Height
| | 00:47 | of 20 pixels for the selected object.
But is it really 90x20? Let's take a
| | 00:52 | closer look at this. I am going to go
ahead and I am going to Zoom in on this
| | 00:55 | shape right over here, and I will see
that this object right here has a 1 pixel Stroke.
| | 00:58 | Now, the way that Illustrator draws
graphics is that it creates the actual
| | 01:02 | Stroke on the center line of the path.
So that means the Stroke weight right
| | 01:06 | now is distributed a half a point on
the inside and half a point on the outside
| | 01:10 | of the path. So pixel dimensions that
are displayed here on the Transform panel
| | 01:14 | aren't of the actual physical representation
of that graphic, they are the size of the path.
| | 01:19 | So what I am seeing right here is that
the path is 90x20, but because I do have
| | 01:23 | a 1 pixel Stroke on this particular
object, in reality the object is really 91x21.
| | 01:27 | Now, normally when I am using
Illustrator for print graphics, I really wouldn't
| | 01:32 | care about this. However, every pixel
counts when I am working in web design.
| | 01:36 | Because I rely on precise pixel
measurements, I really need to make sure that I
| | 01:40 | am seeing exactly the way the graphic is
going to reproduce itself, not the path itself.
| | 01:45 | So to make sure that I am always seeing
the right pixel dimensions, I am going
| | 01:48 | to turn on our Preference inside of
Illustrator, and I will choose Illustrator
| | 01:51 | > Preferences. Again, if I were
Windows right now, I would choose Edit >
| | 01:54 | Preferences. Then I will
choose the General area.
| | 01:56 | You will notice there is a setting here;
by default its unchecked, its called
| | 02:00 | Use Preview Bounds. What that setting
does is it allows Illustrator to define a
| | 02:04 | value, not by the dimensions of its
path, but by the dimensions of its
| | 02:08 | appearance. So I will turn
that option on and click OK.
| | 02:12 | Take a look now at what I am seeing
here on the Transform panel. That exact
| | 02:16 | same object here is displaying with a
Width and Height of 91x21, not 90x20.
| | 02:21 | Because it's so important for me to be
able to account for every pixel on my
| | 02:24 | design, I want to make sure when
I am working with web graphics inside of
| | 02:27 | Illustrator that I have that Use
Preview Bounds setting turned on. This way
| | 02:32 | the values that I see in the Transform
panel are exactly the way those files are
| | 02:35 | going to display on a computer screen.
| | Collapse this transcript |
| Setting grid preferences| 00:00 | Working with exact pixel dimensions
is really important when creating web
| | 00:04 | graphics. To help you out Illustrator
actually has a grid. I am going to go to
| | 00:08 | the View menu here and choose Show Grid. This grid
basically is basically a whole bunch of boxes here.
| | 00:13 | Almost like graph paper for all of
you old time designers out there.
| | 00:17 | Now, specifically for web graphics
though, it would be really great if I could
| | 00:20 | set up Illustrator so that each square
inside of that grid represents a single
| | 00:24 | pixel. That way as I am working on my
design I could really make it easy for me
| | 00:28 | to make sure that everything is set
correctly. I will do this by adjusting my
| | 00:31 | Preferences for how the grid gets displayed.
| | 00:34 | Again, I will go to the Illustrator
menu here and I will choose Preferences.
| | 00:37 | I will also choose here Guides & Grid.
If you are on Windows you would choose
| | 00:41 | Edit > Preferences and
then again go to Guides & Grid.
| | 00:44 | Now, there are two settings here that
are important for me to know about. First
| | 00:47 | one is Gridline every. Those are these
big bold lines that appear over here.
| | 00:52 | So what I like to do is set my
Gridline to every 10 Pixels. This way
| | 00:56 | I basically get a solid line that from
a distance or even without squinting too
| | 01:00 | hard at my monitor, I can easily
count off pixels in increments of 10.
| | 01:03 | I will also set the Subdivisions to 10.
So what that means is that I will now
| | 01:08 | have a thick line every 10 pixels,
and then in between that I will have 10
| | 01:12 | squares inside of that. This means that
every box that I will see inside of my
| | 01:16 | grid will represent a single pixel.
| | 01:18 | Now, what I will also do is I will
set my grid over here to be in front by
| | 01:21 | unchecking this box. Now I will click OK.
Let's zoom in on my artwork here to
| | 01:25 | see what's happening here. I will zoom
in right let's say on this particular
| | 01:28 | part of the graphic, and as I zoom
in here I can see that every box that
| | 01:32 | appears here represents a single pixel.
Because I have set my Gridlines to be
| | 01:36 | every 10 Pixels, I can quickly count off,
10, 20, 30, 40, 50, 60, 70, and know
| | 01:41 | that this graphic is
approximately 70 Pixels wide.
| | 01:44 | In reality, it could be somewhat
annoying to have my grid always in front of
| | 01:47 | the graphics. I just wanted to show
you these possible settings that you can
| | 01:50 | actually have the grid appear either in
front of or behind all of your artwork.
| | 01:54 | I will go back to the Preferences
setting right here and I will turn that
| | 01:57 | setting back on. In this way,
I can see exactly where that grid is,
| | 02:01 | but it doesn't get in way of the graphics.
An important keyboard shortcut is Command+'
| | 02:05 | or if you are on a PC, Ctrl+'.
That easily toggles the grid on and off.
| | 02:11 | Now that you know how to make the grid
work for you, I am sure that you will
| | 02:13 | find it useful as you
start creating web graphics.
| | Collapse this transcript |
| Understanding Pixel Preview| 00:00 | One of the great things about vector
graphics in general is that you can scale
| | 00:04 | them to any size, and no matter how big
you make them, they always look clean and sharp.
| | 00:08 | For example, let me zoom in right over
here on this little button. If I zoom in
| | 00:11 | really close, even though I have
these nice rounded rectangles, I have this
| | 00:15 | text here, I can go even closer
to look at these beautiful sharp lines.
| | 00:19 | However, that isn't the case for
graphics for the web, especially so for pixel
| | 00:24 | based graphics.
| | 00:25 | Have you ever tried downloading an
image from the Internet and then zoom in
| | 00:28 | really close and see it becomes
pixilated? That you could actually see the
| | 00:31 | individual pixels themselves?
| | 00:32 | Well, let me zoom back out here for a
second. Illustrator is almost giving us
| | 00:35 | this full sense of reality. Here I am
inside of this wonderful vector based
| | 00:39 | application, but at the end of the day
my graphics are going to get rasterized,
| | 00:43 | and how will they look when that happens?
| | 00:45 | Rather than cross your fingers and
wait to find out what happens when you do
| | 00:48 | so, Illustrator provides us with a
different way to preview our graphics.
| | 00:52 | If we go to the View menu here, we see
something here called Pixel Preview. By
| | 00:56 | choosing Pixel Preview, Illustrator now
renders my graphics to the screen, the
| | 01:00 | same way that they would
display inside of a web browser.
| | 01:03 | For example, watch what happens now
when I zoom in really close on this button.
| | 01:07 | See how I see the pixels themselves. No
longer the actual sharp vector graphics
| | 01:12 | that I saw before, Illustrator is
rendering that artwork as pixels. This way I
| | 01:17 | know exactly how this artwork is going
to look when displayed on an electronic screen.
| | 01:20 | I will zoom back out again because
I want to show you a great way how as a
| | 01:23 | designer you could really take
advantage of the regular Preview Mode inside of
| | 01:26 | Illustrator and also this
Pixel Preview Mode as well.
| | 01:29 | First, I will come back to the View
menu and I will just turn off Pixel
| | 01:32 | Preview; now I am with a Regular
Preview Mode. Illustrator has a wonderful
| | 01:35 | feature that allows me to see my
artwork in two different possible states.
| | 01:38 | I will go to the Window menu here and
I will choose New Window. This actually
| | 01:42 | takes my exact same artwork but
creates a new window for it. Take a look. I
| | 01:46 | have two tabs here at the top of my
screen. I have this one here called
| | 01:49 | groundswell_728x90, and then I have
this one called groundswell_728x90. Its
| | 01:54 | basically two ways to look at the same
document, but the beautiful thing about
| | 01:57 | doing things in this way is that I can
change the Preview settings for one of
| | 02:01 | these views but not for the other.
| | 02:03 | First, let's change how Illustrator
displays these documents. Right now I am
| | 02:07 | using Illustrator's new tabbed user
interface that allows me to have tabs
| | 02:10 | across the top of my screen, displaying
the documents that are currently open,
| | 02:14 | and I could swap or basically click on
these to go back and forth between the two.
| | 02:17 | But I would really like to see both of
these at the same time. If I go up over
| | 02:20 | here to the Application Bar, there is a
setting here called Arranged Documents.
| | 02:24 | I will click on that, and then I will
choose this option here, which will allow
| | 02:27 | me to choose 2-Up and basically lay
these documents so that I can see both of
| | 02:32 | them at the same time.
| | 02:32 | I will click on the top document here
and adjust my setting here so I can view
| | 02:36 | it, and I will do the same for here as
well. Now I am looking at the exact same
| | 02:40 | document but through two different windows.
| | 02:42 | Notice over here I have a 1 and over
here I have a 2. I will click in this
| | 02:46 | window to make this one active, and
I will go to the View menu and I will
| | 02:49 | choose Pixel Preview. What I am
basically seeing right now is my original
| | 02:52 | artwork here, and then this is the
exact same artwork but with the Pixel
| | 02:55 | Preview turned on.
| | 02:56 | Let me zoom in a little bit closer here
on this part of the file. I will do the
| | 02:59 | same down over here. Here I can see
all the pixels and the way that this
| | 03:03 | artwork is going to get
rasterized when displayed on the web.
| | 03:06 | Here is the way the vectors display. As
I make adjustments to my artwork I will
| | 03:10 | see them updated automatically in that window.
| | 03:12 | Notice here I can click on it, no
matter what I do on either of the windows it
| | 03:15 | happens exactly in the other window as
well. When working this way I could very
| | 03:19 | easily create things and see things
just the way that I want to on the top
| | 03:22 | window inside of Illustrator and get an
immediate preview of what that's going
| | 03:26 | to look like when its displayed on the web.
| | 03:28 | If you have two monitors, feel free to
actually display both these windows; one
| | 03:31 | on one monitor and one on the other, in
this way you can design everything that
| | 03:35 | you want in a high res preview inside
of Illustrator and then take a quick
| | 03:38 | glance at the monitor to see what it
looks like when rasterized in Pixel Preview.
| | 03:42 | Overall, when using Illustrator it's
really important to take a look at how
| | 03:46 | Pixel Preview renders your graphics. In
doing so you will always know how your
| | 03:50 | graphics will look like when
they are displayed on the web.
| | Collapse this transcript |
| Understanding anti-aliasing| 00:00 | In the world of printing, graphics
are usually printed at an extremely high
| | 00:04 | resolution. For example, image setters
that create film or plates for printing
| | 00:08 | often print graphics at 3600 DPI or
3600 dots per inch. However, web graphics
| | 00:15 | always display on a computer screen,
and computer screens have far lower
| | 00:18 | resolution. In fact, 72 pixels per
inch is often regarded as the standard
| | 00:22 | resolution for most computer screens.
| | 00:24 | It's important to realize this because
normally when you are working inside of
| | 00:28 | the world of vector graphics you are
used to expecting very clean and sharp
| | 00:31 | output, but on lower resolution
computer screens that may not always be the case.
| | 00:35 | For example, let's zoom in really close
on this word right here, BOARDS. Notice
| | 00:39 | how you see nice, clean, smooth edges
that appear here around the letter D or
| | 00:43 | around the curves of the letter S.
Even though our monitor is relatively low
| | 00:47 | resolution I am still seeing nice
smooth edges because the computer employs a
| | 00:50 | certain technology called anti-aliasing.
Anti-aliasing slightly blurs the edges
| | 00:55 | of color that appear on a computer
screen to make it look like its smooth.
| | 00:59 | You can easily see this by turning off
that feature. I will go over here to the
| | 01:02 | Illustrator menu, or on Windows you
would go to Edit menu, choose Preferences,
| | 01:06 | and then I will choose General.
I will uncheck the option here called
| | 01:10 | Anti-aliased Artwork. In doing so, if
I take a look now, I now see there are
| | 01:13 | jagged edges around this area. I will
zoom in closer so you could even see that
| | 01:19 | a little bit better. I will turn that
setting back on again, and you could see
| | 01:20 | that now those jagged edges go away.
| | 01:23 | Because web graphics are always going
to appear on a computer screen, I always
| | 01:26 | have to keep in mind that this anti-
aliasing will occur, and sometimes it will
| | 01:30 | do some things to my
graphics that I may not expect.
| | 01:33 | To illustrate this let me Zoom out for
a second here, just about right about
| | 01:36 | over here, and I will split my screen
into two windows. I will go to Window,
| | 01:40 | choose New Window. I will set my
setting over here to display it one on top of
| | 01:44 | each other; let me go ahead and
position it just right over here. You might get
| | 01:47 | a little bit closer on some of these.
| | 01:49 | On the window on the bottom I will turn
my Pixel Preview on. I will go to View
| | 01:53 | and I will choose Pixel Preview. Take a
look, what was once a nice clean sharp
| | 01:57 | line right over here, turns into this
fat ugly line right here. How did that happen?
| | 02:02 | Notice that the text itself doesn't
read that well, like it does over here.
| | 02:06 | More importantly, take a look at the
edges of that rounded corner right here.
| | 02:09 | See how this is nice and clean and
smooth, and on the anti-alias version I see
| | 02:13 | a stair-step effect.
| | 02:14 | Since we have the Grid turned on,
let's see exactly what's happening here
| | 02:17 | inside of Illustrator. I get even
closer on the file right here on the top.
| | 02:21 | Take a look at this. Right now the
actual dimensions of my file right here are
| | 02:25 | 91 Pixels by 21 Pixels. That's because
the actual path itself; if I count off
| | 02:31 | the pixels that are here, are 10 and 20,
so it's exactly 20. But because I have
| | 02:36 | a 1 Pixel Stroke and because my Stroke
is painted on the center line of that
| | 02:40 | particular path, I am seeing a half
a pixel being added as a width on the
| | 02:44 | outside, and half a pixel on the inside.
If I add a half a pixel on the outside
| | 02:49 | here and I add a half a pixel over
here, I end up with a total of 21.
| | 02:53 | Here's the problem. Each of the
squares in this particular grid actually
| | 02:57 | represent a single pixel, but a
computer screen only has the ability to turn
| | 03:01 | the pixel on or off. There is no way
for your computer to only paint half of a
| | 03:05 | pixel. So how will this particular
pixel appear when rendered to my screen, it
| | 03:09 | only has artwork that fills up
half of that particular pixel?
| | 03:12 | Well, that's where anti-aliasing
comes into play. This 1 Pixel line that
| | 03:16 | appears here, literally right in the
middle of twp pixels, will turn into two
| | 03:21 | fat pixels, and to simulate the line,
Illustrator will kind of drop back to
| | 03:25 | color a little bit, so that it
doesn't appear as if my line weigh just grew
| | 03:28 | twice in width.
| | 03:29 | Let's zoom in on the bottom here to
see exactly where that's happening. My
| | 03:32 | path, as you can see, goes right
through literally the border of two particular
| | 03:37 | pixels, and instead of me filling a
half a pixel for this it actually fills up
| | 03:41 | the whole pixel.
| | 03:42 | So what's interesting to see about anti
-aliasing here is that even though the
| | 03:45 | computer is trying to make my graphic
look better by smoothing out the lines
| | 03:49 | using anti-aliasing, the effect is a
graphic that ends up looking worse.
| | 03:53 | Instead of me getting a nice, clean
sharp line, I get a fat line that doesn't
| | 03:56 | look anywhere nearly as good.
| | 03:58 | With this in mind, there are several
things that I could do to correct this
| | 04:00 | problem. First of all, let's go back
over here to the top window. I will select
| | 04:04 | this object and I will go to my Stroke
panel. Notice that there is an option
| | 04:07 | here called Align Stroke. By default,
Illustrator paints the Stroke on the
| | 04:10 | center line of the path, which is
really the cause of the problem right here.
| | 04:14 | I can choose to align the stroke to
the inside of the path, and in doing so,
| | 04:18 | notice that now my path becomes a
single solid pixel and not the two pixels
| | 04:23 | that it was before. Again, this is
happening because the full weight of that
| | 04:26 | particular stroke right now is taking
up a single pixel. It's not falling on
| | 04:30 | the boundary between pixels
which would cause a problem.
| | 04:33 | Another thing to do is just to avoid
using strokes altogether. In fact, when I
| | 04:37 | am creating my web designs, I try to
avoid using strokes and I use filled
| | 04:40 | shapes instead. If I want to draw a line,
rather than draw just a single line,
| | 04:45 | I draw a rectangle that's one pixel in width.
That way I always know what I am getting.
| | 04:49 | As we learn more about creating web
graphics inside of Illustrator, we will
| | 04:52 | always come back to this point, understanding
what anti-aliasing is doing to our artwork.
| | 04:56 | Now that we know what to look for and
how to solve it, we can create great
| | 04:59 | looking pixel based web
graphics using Illustrator.
| | Collapse this transcript |
| Disabling anti-aliasing| 00:00 | Anti-aliasing, as we have learned, is
both a blessing and a curse. While it
| | 00:04 | allows us to see beautiful, clean
graphics on a computer screen, it can also do
| | 00:08 | certain things to our web graphics
that are somewhat less appealing. In fact,
| | 00:11 | there are times when you may want to
disable anti-aliasing, and one of the
| | 00:14 | great things about Illustrator is
that you can do so on an object by object basis.
| | 00:18 | Let's take this file for example. I am
going to go to the View menu; I am going
| | 00:21 | to turn on Pixel Preview. So I can now
see the anti-aliasing that's going to
| | 00:25 | appear on this particular document.
| | 00:27 | Now, right off the bat, you will
notice that this particular object in the
| | 00:29 | middle looks better than the ones in
the left and the right of it. That's
| | 00:33 | because on this object the stroke for
that object has been set to align towards
| | 00:36 | the inside of the path.
| | 00:37 | I can do the same, let's say, for
this object and for this one as well. And
| | 00:43 | that may be great, but sometimes you
will find that text becomes unreadable
| | 00:46 | because of how blurry it gets when it
turns anti-alias. In those cases there
| | 00:51 | isn't much that you can do except
to disable the anti-aliasing for that
| | 00:54 | particular object.
| | 00:55 | Now remember, anti-aliasing does
smooth out objects so they look better on a
| | 00:59 | computer screen. So what it really
boils down to is do you want something that
| | 01:03 | looks a little bit prettier but is too
blurry to read, or do you want something
| | 01:06 | that does not look as great but that
you can easily see the words? That's the
| | 01:09 | decision that you as a
designer will always have to make.
| | 01:11 | So let's take a look at this example.
I will use my Selection tool to select
| | 01:15 | this object right here; a regular
text object. This is currently set now to
| | 01:18 | Myriad Pro, Regular, and its set at
14 Points. The anti-aliasing that gets
| | 01:23 | applied does make it somewhat blurry.
So what I will do is I will go over to
| | 01:26 | the Effect menu and I will choose
an option here called Rasterize.
| | 01:29 | Now, when you apply things to the
Effect menu inside of Illustrator that effect
| | 01:33 | gets added as we call a live effect;
meaning it's added in a nondestructive
| | 01:37 | fashion. So even though this object is
text, I am performing now a Rasterize
| | 01:41 | effect on it. Meaning I am turning it
into pixels, but because it's a live
| | 01:44 | effect, the text still remains
text, therefore it's still editable.
| | 01:48 | If you look towards the bottom of the
Rasterize dialog box, you will see where
| | 01:51 | it says Options; Anti-aliasing is
currently set to None. That means this object
| | 01:56 | will not receive any anti-aliasing.
If I click OK, I have rasterized that
| | 02:00 | object without getting any
of the anti-aliasing effects.
| | 02:02 | So you can clearly see that these
objects on the left and the right side have
| | 02:06 | an Anti-aliasing applied, but this text
object right here has no Anti-aliasing applied.
| | 02:10 | Likewise, I can do the same for the
rectangle as well. I can click on it, go to
| | 02:14 | the Effect menu, choose Rasterize,
and then click OK, making sure that the
| | 02:19 | Anti-aliasing setting is still set to None.
| | 02:21 | Depending on the artwork that you
create, you may find it easier to disable
| | 02:25 | Anti-aliasing rather than trying to
get it to look just right. At the end of
| | 02:28 | the day though, it's all in your hands,
the designer, to decide when objects
| | 02:32 | should be anti-aliased and when they shouldn't.
| | Collapse this transcript |
| Setting up color management| 00:00 | I know it's not a fun subject, but
we've got to talk about it. It's color
| | 00:03 | management, especially considering
that web graphics are graphics that are
| | 00:07 | destined to be displayed on another
computer screen, you really want to make
| | 00:10 | sure that you've got your colors to be
just right so that they appear correctly
| | 00:13 | on other computer screens.
| | 00:15 | Now I think Adobe has done a
wonderful job about making sure that other
| | 00:18 | applications are consistent
when it comes to color management.
| | 00:21 | In fact, inside of Illustrator if you
go over to the Edit menu and you choose
| | 00:25 | Color Settings down here on the bottom,
you'll see that there is a little icon
| | 00:28 | here and it says, Synchronized:
Your Creative Suite applications are
| | 00:31 | synchronized using the same color
settings for consistent color management.
| | 00:35 | That's really wonderful!
| | 00:36 | What this means is that whether you
open up a graphic inside of InDesign or
| | 00:40 | Illustrator, Photoshop, they all will
look the same. However, the settings that
| | 00:44 | Adobe chose for all these
applications may not be optimized for the kind of
| | 00:48 | work that you do.
| | 00:49 | You'll notice here that by Settings
it says North America General Purpose 2,
| | 00:53 | which is really a preset or
collection of settings that are predefined by
| | 00:56 | Adobe, and here's basically what it
means. Whenever you're working inside of an
| | 01:00 | RGB file, use the sRGB color workspace.
When you're working with CMYK files,
| | 01:05 | use the U.S. Web Coated SWOP v2 color space.
| | 01:08 | Now, if you remember when you create
a web profile inside of Illustrator,
| | 01:12 | Illustrator uses RGB. Now in reality
most people think of RGB as just one range
| | 01:17 | of colors. But there are different
color spaces that exist within RGB. For
| | 01:20 | example, you may be familiar with
something called Adobe RGB. In fact, if you
| | 01:24 | click over here, you can
actually choose that from the listing.
| | 01:27 | The Adobe RGB color space has a much
wider gamut or contains more colors than
| | 01:31 | the sRGB workspace. But the reality is
that for web design, you should be using
| | 01:35 | sRGB, which is correct here on this
particular example. Why? Because if you go
| | 01:40 | out into the world, most people who do
access the web don't necessarily have
| | 01:44 | the greatest monitors.
| | 01:45 | As graphic designers, you may have
wonderful monitors that can display
| | 01:49 | a larger range of colors, but in general,
around the world, sRGB, which is a
| | 01:54 | smaller or limited range of colors
that exist inside of RGB, is a better
| | 01:57 | workspace to work within. Basically,
what you see inside of sRGB will closely
| | 02:02 | match that which what other people
will see on their computer monitors.
| | 02:05 | In fact, by default, Illustrator
automatically converts all of your artwork to the
| | 02:09 | sRGB color space. Let me show you.
I'll click Cancel out of here for a second.
| | 02:13 | We'll come back to this in a minute,
and I'll go to the File menu and choose
| | 02:16 | Save for Web & Devices.
| | 02:18 | Now, here's the way that I'll
actually export GIF or JPEG versions of my
| | 02:21 | artwork. If I come all the way here
to the right side and I click on this
| | 02:24 | button to open up the flyout menu,
I'll see there is a setting here called
| | 02:27 | Covert to sRGB.
| | 02:29 | In fact, there may have already been
times when you might notice that when you
| | 02:32 | create some artwork inside of
Illustrator, it looks really bright and rich and
| | 02:35 | vibrant inside of Illustrator, but
when you export that artwork to a GIF or
| | 02:38 | JPEG file, the colors become muted or
it doesn't look as rich as it did before.
| | 02:43 | That's happening because Illustrator
is converting to the sRGB workspace on
| | 02:46 | export. I'll click Cancel and come
back to the Color Settings that we were
| | 02:49 | looking at before.
| | 02:51 | So we already know that sRGB is
probably the right workspace to work in when
| | 02:54 | creating web graphics. But let's take
a look at something over here called
| | 02:57 | Color Management Policies. Right now for RGB,
it's set to Preserve Embedded Profiles.
| | 03:02 | Well, what does that mean?
| | 03:04 | What that means is that if I take a
photograph and I place it into my document
| | 03:08 | inside of Illustrator, if that
photograph already has a color management
| | 03:11 | profile on it, for example, maybe that
photograph is inside of the Adobe RGB
| | 03:15 | workspace, Illustrator preserves that
embedded profile, meaning that image
| | 03:19 | stays in the much richer workspace of
Adobe RGB and does not get converted to the
| | 03:24 | sRGB workspace. So let's go back up here
to where it says Settings for a moment.
| | 03:29 | Notice that if I click on this right now,
I have some other options. It has
| | 03:31 | something called, North America
Prepress 2 and also North America Web/Internet,
| | 03:36 | Hmm...
| | 03:37 | Well, if we choose North America
Prepress 2, you can see that the RGB workspace
| | 03:41 | now switches to Adobe RGB, that much
richer environment. And that's because
| | 03:45 | when I am printing, I want to be able
to work with the most rich amount of
| | 03:48 | colors as possible. It will also
allow me to simulate spot colors in a much
| | 03:52 | richer environment than otherwise.
| | 03:54 | But let's take a look at what happens
when I switch now from North America
| | 03:56 | Prepress 2 to North America Web/
Internet. I mean, after all, we are doing web
| | 04:00 | graphics here. When I choose that,
it returns to the sRGB workspace, which is
| | 04:04 | correct, but take a look over here.
For RGB now it says, Convert to Working Space.
| | 04:09 | Well, what that means that if I now
take a photograph and I place it into
| | 04:13 | Illustrator, Illustrator will
automatically take that photograph and kind of
| | 04:17 | dumb it down to fit within the sRGB
color workspace. What this means is that
| | 04:22 | I'll always see exactly the way my
artwork is going to look like when it's
| | 04:24 | displayed on the web when I am
working on it inside of Illustrator.
| | 04:27 | So to review, let's go back over here.
The default setting is North American
| | 04:31 | General Purpose 2. In that particular case,
I am using sRGB. However, it is
| | 04:36 | going to preserve embedded profiles.
So it means I have the ability to see
| | 04:40 | things inside of Illustrator which may
not look that way when it's displayed on the web.
| | 04:45 | If I know that I am always doing web
graphics I may get better results by
| | 04:48 | choosing the North America Web/Internet
version. That means that now whenever
| | 04:52 | I place artwork into Illustrator, it will
always convert it to the working space,
| | 04:56 | which is sRGB. Now, by the way
where it says Profile Mismatches now,
| | 05:00 | Illustrator says Ask When Opening. So
when I do go ahead and place such a file,
| | 05:04 | I'll get a dialog box and Illustrator
will ask me if that's what I want to do.
| | 05:07 | So, overall it's your call. Basically,
Adobe created the General Purpose 2
| | 05:11 | version so that anybody who is doing
all different types of work, be it print,
| | 05:15 | or web or anything else for that matter,
has just a general color setting that
| | 05:19 | works across all applications.
| | 05:21 | However, if you're the kind of person
who spends most of your time doing web work,
| | 05:24 | you may want to switch to the
North America Web/Internet version which
| | 05:28 | will give you better results and make
sure that you're always seeing the right
| | 05:30 | things inside of Illustrator, same way
that they will appear when that artwork
| | 05:34 | is posted up onto the Internet.
| | 05:35 | Want to know what I do? Well, I just
work on so many different projects on a
| | 05:39 | single day that I really can't afford to
have my color management settings set to
| | 05:43 | North America Web/Internet.
I just do too much print stuff as well.
| | 05:46 | Therefore, when I am creating images
that I know are going to be used inside of
| | 05:49 | my web design and I am working on
those images inside of Photoshop,
| | 05:52 | I'll actually assign the sRGB color
profile to that particular image. This way
| | 05:57 | I always know that I won't see any
color shifts when I am working with them
| | 06:00 | inside of Illustrator.
| | Collapse this transcript |
|
|
3. Pixel-Based Web Graphics: Layout and StrategyComparing pixel dimension and resolution| 00:00 | In the world of web graphics you hear
the following term tossed around a lot.
| | 00:04 | 72 pixels per inch, right? I mean
think about it. Anytime that you ever talk
| | 00:09 | about screen resolution or any kind of
web graphics, people always say 72 ppi.
| | 00:14 | They may say 72 dpi, which is incorrect.
That stands of Dots Per Inch, which
| | 00:17 | only applies to printing. But
ppi stands for Pixels Per Inch.
| | 00:21 | Now as a web designer though,
you really don't care at all about that
| | 00:25 | resolution. In fact, you should just rid
your mind of there's 72 pixels per inch altogether.
| | 00:29 | Why is that? The reason is because
pixel dimensions are far more important than
| | 00:33 | the actual resolution itself. So the
file that I have here on my screen, it's
| | 00:37 | called resolutions.ai. It's something
that will really kind of bring that point home.
| | 00:41 | So what I have here on the screen
itself on the upper left-hand part over here
| | 00:45 | is a banner that I've created and the
banner was created at 728x90. That's 728
| | 00:50 | pixels wide by 90 pixels tall. When
you're working with web graphics, that's
| | 00:55 | the most important thing, how many
wide by how many pixels tall.
| | 00:59 | Let's take our monitor, for example.
| | 01:01 | You may know that your monitor
can be set to a variety of different
| | 01:04 | resolutions. In fact, right over here
I have three gray areas and each of them
| | 01:08 | are indicating a different resolution.
This is the size that a 1024x768 monitor
| | 01:13 | would be. This one is 1440x900, which
is wide-screen, and then this one is 1600x1200.
| | 01:19 | Now the thing is that your monitor
doesn't change in physical size when you
| | 01:23 | change its resolution. All that's
really happening is the pixels themselves get
| | 01:26 | bigger or smaller, and in reality,
many of today's monitors are much higher
| | 01:31 | than 72 pixels per inch. For example,
Apple displays exceed 120 pixels per inch
| | 01:35 | and even the iPhone has a really
high-resolution screen of 160 ppi.
| | 01:40 | To better understand this concept,
let's take a look at something else. I am
| | 01:42 | going to go over here to my Layers
panel. I am going to turn off the
| | 01:44 | Resolutions layer. I am going to turn
on this layer called Monitors. See here I
| | 01:47 | have the exact same physical monitor,
but this monitor is set to different
| | 01:51 | resolutions, and as you can see, the
same banner that I created at 728x90
| | 01:56 | appears very large when my monitor is
set to 800x600. It kind of fits really
| | 02:01 | nicely in the middle of the screen at
1024x768, but that same monitor set to a
| | 02:05 | much higher resolution of 1280x1024,
my 728x90 pixel banner appears much
| | 02:11 | smaller on the screen.
| | 02:13 | So rather than thinking about
resolution, when you're creating web graphics,
| | 02:16 | the important thing is just to
understand what the pixel dimensions are.
| | 02:19 | Trust me, if you have the pixel dimensions
right when you get started, everything
| | 02:22 | else will just fall into place.
| | Collapse this transcript |
| Grid is good, grid is great| 00:00 | When you are using Illustrator to
design web graphics, you can either create
| | 00:04 | entire web layouts or you can create
individual pieces of art. For now, let's
| | 00:08 | look at creating an entire
web layout using Illustrator.
| | 00:11 | When it comes to web design itself,
structure is very important. Whether you
| | 00:15 | plan on laying out your page using
HTML tables or CSS, doing a little bit of
| | 00:20 | planning in advance can really help
you out. For example, when I sit down to
| | 00:23 | create a web layout, what I will first
do is sketch out some kind of an idea of
| | 00:26 | what my page is going to look like, and
what I end up creating is some type of
| | 00:30 | a grid as you see here. When you break
your page down into a grid in this way,
| | 00:34 | it's really easy for you to focus on
the individual parts of those pages.
| | 00:37 | Not only is it easier to build your pages
from scratch in this way, it's also easy
| | 00:41 | for you to update individual parts of
them without disturbing the rest of the page.
| | 00:45 | Once I have created this rough type
sketch what I will then do is build an
| | 00:48 | actual file inside of Illustrator.
For example, here is a grid that I have
| | 00:52 | created inside of Illustrator based
on the sketch that I showed you just
| | 00:55 | before. Because Illustrator is object-
based, it's really easy to generate such
| | 00:59 | a layout, and more importantly I can
now use this to easily re-purpose it for
| | 01:03 | layouts using slices, which will be
useful in a table-based HTML layout or to
| | 01:07 | create divs working with CSS.
| | 01:10 | Even more importantly if I am working
with some kind of a Web Developer I could
| | 01:13 | hand this off to them and they can build
the site templates where that they need to.
| | 01:17 | So now that you see the end result here,
let me tell you how actually I went
| | 01:19 | ahead and built this. I will come down
to the Layers panel here and I will turn
| | 01:23 | Off this layer called Slices. Going
back to what we have already learned in
| | 01:26 | this title, we know that anti-alias
thinking cause certain problems. So when I
| | 01:29 | create my boundaries here for this
particular layout. I want to make sure that
| | 01:32 | I don't use objects that have strokes
on them. I am only going to use objects
| | 01:36 | that have a fill.
| | 01:37 | So I get started by coming over here
and clicking on the Rectangle tool and I
| | 01:41 | will draw my first rectangle. Just
simply draw any shape, whatever it is that I
| | 01:44 | want, and I will set my Stroke Color
to None and I will set my Fill to Black.
| | 01:49 | And here is where Illustrator makes
things really easy. I am going to go ahead
| | 01:52 | and select this particular rectangle.
Where I have been trying to position up
| | 01:55 | Ai, I am going to use numbers. This is
one of the reasons why I always have the
| | 01:58 | Transform panel always available to
me here in the workspace that I have
| | 02:02 | created. So I will start by doming
in the right dimensions first for this
| | 02:05 | particular object. For the Width,
I will type-in 215 pixels. I will hit the Tab
| | 02:10 | key and specify 150 for the Height.
| | 02:12 | To position it precisely where it needs
to go, I will go first over here to the
| | 02:16 | Transform panel and make sure my
Reference Point is set to the upper left-hand
| | 02:19 | corner. I will set the coordinate for
my X value to 0. Now here is the tricky
| | 02:23 | part. Normally you might think that
I would type-in 0 for the Y value as well.
| | 02:27 | But Illustrator actually calculates
its 0-0 point down here on the lower
| | 02:31 | left-hand corner, not on the upper left-
hand corner. Since my layout is set to
| | 02:35 | 800X600, I will align the top left-hand
corner to the 600 mark. And that way my
| | 02:40 | object fits exactly where I needed to
go. To make it easier I will actually
| | 02:44 | come down to the Layers panel and
create a new layer and I will take this
| | 02:46 | little dot on the far right edge of
the layer and drag it into that new layer
| | 02:50 | that I created.
| | 02:51 | Now since I will be creating a whole
much of these boxes and I don't really
| | 02:53 | have any strokes, what I like to do is
applying Opacity value. This way we are
| | 02:57 | able to kind of see what happens to
the rest of my page. So with the object
| | 03:00 | still selected, I will change the
Opacity of this object to say 70%.
| | 03:04 | Now, let's go ahead and create the next
shape. I will select the Rectangle tool
| | 03:07 | again, but this time instead of drawing
out of shape, I will simply click once
| | 03:11 | on my artboard, in doing so a dialog
box will come up asking me for the precise
| | 03:15 | width and height for the shape I want to create.
| | 03:17 | Since I have done my homework before
and I have already sketched out my grid, I
| | 03:20 | know the exact pixel dimensions I want
to get for this. So I will type-in over
| | 03:23 | here, 485 Wide by 100 High. It just
saves me the time in first creating my
| | 03:28 | shape and then having to adjust it later.
All I need to do now is put it in the
| | 03:31 | right position. I come over here to
the X coordinate. I now know that this
| | 03:35 | shape needs to go in around 215 for the
X value. Again I know that because this
| | 03:39 | particular object is 215 pixels wide,
and again the upper left-hand corner
| | 03:43 | needs to go to 600.
| | 03:44 | I will back the Opacity of this one
to around 60%. In doing so I now see a
| | 03:50 | visual difference between the
slices that I have created here and here.
| | 03:52 | And before I go any further, I just
want to stop here for a moment. You may
| | 03:55 | have used Photoshop before to draw out
guys in order to create slices. Well, in
| | 04:00 | Illustrator there are many ways to
do this. I find just working with the
| | 04:02 | rectangles to be far more intuitive.
| | 04:04 | Let me create a few more of these
boxes. I will click again here to get
| | 04:07 | 100X100, and again, I will choose to
position this all the way up here in the
| | 04:11 | corner. I will change my Wide value to
600. And just to show you if I really
| | 04:15 | don't want to go ahead and find that
all the mess, I do know that the far right
| | 04:18 | edge over here is 800. So if change my
reference point to the upper right-hand
| | 04:22 | corner, I can now change my X value
to 800 and that again pops right into
| | 04:26 | position where it needs to go. And
I will dial back the Opacity of this one to
| | 04:30 | maybe 50%, and I will continue to go
to this process in order to get to the
| | 04:34 | grid like I showed you here before.
It's really simple, it's really easy to do,
| | 04:38 | and most importantly once your grid is
created everything else seems to fall into place.
| | Collapse this transcript |
| Working with multiple artboards| 00:00 | One of the benefits of using
Illustrator to create web graphics is that you can
| | 00:04 | create entire webpage layouts or you
can create individual graphics. In fact, I
| | 00:09 | find the Illustrator excels at
creating these individual web graphics and
| | 00:12 | the new multiple artboards features that was
added to Illustrator CS4 really brings this home.
| | 00:16 | For example, maybe you have been asked
to create an ad banner campaign. Chances
| | 00:20 | are you will need to create a variety
of different ad banner sizes and create a
| | 00:24 | variety of art concepts as well. Rather
than be forced to work with individual
| | 00:28 | Illustrator files, you can create a
single document that contains multiple
| | 00:31 | artboards inside of it.
| | 00:32 | For example, in this case right here
I have four different ad banners all
| | 00:36 | within a single document, all set up
using multiple artboards. What's great
| | 00:39 | about multiple artboards is that
Illustrator has a certain thing called an
| | 00:42 | Active Artboard.
| | 00:44 | Notice that right now this artboard at
the top has a black line while the other
| | 00:47 | ones have gray borders. That indicates
the top one right here. This one is set
| | 00:51 | to 468x60. It's currently the Active
Artboard. To make any other artboard an
| | 00:56 | Active Artboard all you need to do is
simply click anywhere within the boundary
| | 00:59 | of that artboard. For example, by
clicking here I have now made this the Active
| | 01:02 | Artboard. And Illustrator uses the
Active Artboard to perform certain
| | 01:06 | functions. For example, if I now go to
the File menu and I choose Save for Web
| | 01:10 | & Devices. Say for example I exported
JPG, or GIF of this banner. I will see
| | 01:14 | that none of the other artwork
appears in this window at all.
| | 01:17 | Let me click Cancel, I will click on
this banner right here and now again if I
| | 01:20 | choose File > Save for Web &
Devices because that one is now the active
| | 01:24 | artboard. It appears
here in this window as well.
| | 01:27 | Let me show you how easy it is to
create your own artboards. Say we need to
| | 01:30 | create now a new artboard of like
250X60 pixels for example. I will select the
| | 01:35 | Artboard tool from the toolbar over
here and that immediately puts me into
| | 01:39 | something called Artboard Edit Mode.
Notice now that the Active Artboard has
| | 01:43 | these dotted lines around it, it
becomes selected. What I can do is simply come
| | 01:47 | over here and click-and-
drag to create a new artboard.
| | 01:49 | When I release the mouse this becomes
the active one and I could change the
| | 01:52 | dimensions to make it precisely what
I need it to be. I will go over here where
| | 01:56 | it says Width, and we'll type-in 250,
and I will change its height to be 100. I
| | 02:00 | could position it just so, just where
I want it and then just simply tap the
| | 02:04 | Escape key on my keyboard to exit
Artboard Edit Mode, and now I have created
| | 02:07 | a new artboard.
| | 02:08 | What I really love about working with
artboards though is that I can simply go
| | 02:12 | to the File menu at any time, choose
Save As and for the Format here choose
| | 02:18 | Adobe PDF. This will allow me to create
a multi-page PDF file, meaning that each
| | 02:22 | of these banners will get their own
page and a single PDF file which I could
| | 02:25 | then email to my client for review.
| | 02:27 | For more detailed information about
all the things that you can do with
| | 02:30 | artboards and how they work, check out
one of my other titles here on lynda.com
| | 02:33 | called Adobe Illustrator CS4 Essential Training.
| | Collapse this transcript |
|
|
4. Pixel-Based Web Graphics: Web ColorUnderstanding web-safe colors and hexadecimal| 00:00 | Like just about any design medium web
design has its own set of challenges. And
| | 00:05 | one of those challenges is around color.
In other words if you specify a color
| | 00:08 | on your computer screen, how do you
know that that color is going to display
| | 00:11 | correctly on other computer screens?
| | 00:13 | Think about that box of crayons that
you had when you are growing up. Maybe
| | 00:17 | you had their uber-pack, you had like
256 crayons. Wow! That's a lot of colors.
| | 00:21 | But what if your friend only had 16
crayons in their box? If you created some
| | 00:26 | kind of a graphic or some kind of
picture or drawing with your crayons and you
| | 00:29 | want your friend to create the exact
same drawing, could they possibly define
| | 00:33 | the exact same colors and draw with
the colors that you have? They don't even
| | 00:36 | have the colors that you do.
| | 00:38 | Well, think less about color
management and about the display themselves, but
| | 00:41 | think about the graphic cards that are
inside of other people's computers. Some
| | 00:45 | graphics cards are far more capable
and can draw many more colors than others can.
| | 00:48 | In fact, if the computer is asked
to draw a color and it can't create that
| | 00:52 | particular color, it uses something
called dithering to try to simulate that
| | 00:55 | color. Sometimes those
colors can look really bad.
| | 00:58 | So as a designer sometimes what you
try to do is just design or use a color
| | 01:02 | that is kind of the lowest common
denominator. You are sure that just about
| | 01:05 | every computer screen out there
can draw that color correctly. From a
| | 01:09 | technology point of view computer
graphics cards support something called VGA.
| | 01:12 | This is pretty much the lowest
common denominator today. VGA supports the
| | 01:16 | drawing of 256 colors.
| | 01:18 | Now across Mac OS and Windows, which
are the most popular computer platforms
| | 01:22 | out there, they differ in about 15
colors, which leaves you with about 241
| | 01:26 | colors which we refer to as web-safe
colors. We are sure that if you use one of
| | 01:30 | those colors, you are guaranteed that
that color will display correctly on
| | 01:34 | those computer screens.
| | 01:36 | Now inside of Illustrator you can
access this library of 241 web-safe colors
| | 01:40 | pretty easily. Let's switch over to
Illustrator and I will show you what I mean.
| | 01:43 | I will start by coming over to my
Swatches panel. From the bottom left-hand
| | 01:47 | corner I click on this icon that
will allow me to load additional swatch
| | 01:50 | libraries. By clicking there I can
scroll to the bottom and see something
| | 01:54 | called Web. All of the colors that
appear inside of this panel right now are
| | 01:58 | what we refer to as web-safe colors.
| | 02:00 | So as I am creating my web design if
I use colors only from this collection,
| | 02:04 | I am pretty sure that they will display
correctly on any device. As a designer
| | 02:08 | you may find it somewhat difficult to
see the colors or choose from them in
| | 02:11 | this is kind of non-intuitive way.
| | 02:12 | There is another library that exist
inside of Illustrator called VisiBone2, and
| | 02:16 | I will basically click down here and
scroll down to where it says this item.
| | 02:20 | While it doesn't look that intuitive at
first blush, if I kind of resize the panel in a
| | 02:25 | way that all the corners have white
squares inside of them, I can see that they
| | 02:29 | kind of appear now as a Color Wheel.
In this way I could more intuitively
| | 02:32 | choose a web-safe color.
| | 02:34 | Now I will be honest with you, as a
designer I don't appreciate being limited
| | 02:37 | to only work within a certain range of
colors. And nowadays most people do have
| | 02:41 | monitors or graphics card that do
exceed the limit of 256 colors. And what can
| | 02:46 | really be helpful is as a designer
knowing who your target market is.
| | 02:50 | For example, if you are creating
something for artwork that's going to be
| | 02:53 | displayed or viewed mainly here in
United States, most people do have modern
| | 02:57 | hardware and they will be able to see
more colors. So feel free to use whatever
| | 03:00 | color you would like. However, if your
web designs will be viewed from third
| | 03:03 | world countries that may not have the
latest in hardware, you may want to limit
| | 03:07 | yourself to using a web-safe color.
| | 03:08 | Let's take a look over here on the
Color panel itself. Notice that I have the
| | 03:12 | ability to choose RGB values. But on
the left side over here there is a little
| | 03:16 | square, a cube, that's indicating that
the color that I have chosen right now is
| | 03:19 | not a web-safe color. If I were to
click on that cube, Illustrator will
| | 03:23 | automatically find the closest web-safe
color and it's kind of snap to that
| | 03:26 | particular color.
| | 03:28 | And you notice that the values here
are set to 51, 51, and 51. However, when
| | 03:32 | you are working with HTML, colors
are specified using something called
| | 03:35 | hexadecimal. It's basically a code
that is contained of either numbers or
| | 03:40 | letters that are six digits long.
Basically the Red, Green and Blue values are
| | 03:46 | each represented by two characters.
| | 03:48 | To get the hexadecimal value of any
color, simply go over here to the flyout
| | 03:51 | menu and choose Web Safe RGB. Now
you will notice that as you move these
| | 03:55 | around, this particular case here, the
hexadecimal number for this color would
| | 03:58 | be 993333. Personally when I am
creating web graphic inside of Illustrator,
| | 04:04 | I try to use the hexadecimal values.
That way I can easily copy and paste them
| | 04:08 | into other applications, for
example Flash or Dreamweaver.
| | 04:11 | Finally, another way to specify colors
is simply come down here to this little
| | 04:14 | Swatch icon and double-click on it.
That brings up the Color Picker. Here you
| | 04:18 | can easily move your slider up and down
on the Color slider right here, choose
| | 04:22 | a color here and see immediately
values that are CMYK, RGB or the hexadecimal
| | 04:27 | value all in one location.
| | Collapse this transcript |
| Pulling colors from Kuler| 00:00 | If you are looking for inspiration
about what colors to use for your web
| | 00:03 | graphics, you might look towards Kuler.
| | 00:05 | If you are not familiar with Kuler
already, it's an online community that Adobe
| | 00:08 | created to allow designers to share
inspiration around color, and with
| | 00:12 | Illustrator CS4 you can access
Kuler directly from the application.
| | 00:16 | Go over to your Window menu, choose
Extensions, and then choose Kuler. That
| | 00:20 | brings up the Kuler panel. Immediately,
you will see a list here of the highest
| | 00:24 | rated colors that are now currently
existing inside of the Kuler website. By
| | 00:28 | clicking on this bar over here, you can
browse through Most Popular colors and
| | 00:33 | the Newest colors that are
now added to Kuler as well.
| | 00:35 | You can also perform specific searches
for colors. For example, let's say you
| | 00:39 | are doing some kind of piece of artwork
around football. You could simply come
| | 00:41 | over here to the Search area, type in
football, and any color themes that are
| | 00:46 | created inside of Kuler around that
particular theme are returned to you in this list.
| | 00:51 | Now, here's the great thing about
working with colors that you find inside of
| | 00:54 | Kuler. For example, let's say I really
like this one here called Steelers. If I
| | 00:57 | now want to use that inside of
Illustrator, take a look at my Swatches panel,
| | 01:01 | I could simply click on this button right
down here called Add Selected Theme to
| | 01:04 | Swatches. With one click of a button
I now see that that particular collection
| | 01:08 | of colors have been added to my
Swatches panel inside of Illustrator.
| | 01:12 | For even more functionality around
Kuler you might want to check out the Kuler
| | 01:15 | website, which is available at kuler.
adobe.com. In fact, one of the things that
| | 01:19 | I love most about Kuler is the ability
to go to the Create Tab here and click
| | 01:24 | on From an Image. This allows you pull
out a palette of colors directly from
| | 01:28 | any image that you upload.
| | 01:30 | For more information and instruction
about all the wonderful things that you
| | 01:32 | can do inside of Kuler, check out one
of my other titles here at lynda.com
| | 01:36 | called Kuler Essential Training. Not
only will you come up with some great
| | 01:39 | colors to work with, you will
also have a really fun time doing it.
| | Collapse this transcript |
| Using the Color Guide with web-safe colors| 00:00 | Here's a great way to get color
inspiration directly inside of Illustrator.
| | 00:03 | By going to the Window menu, you can
choose an option here called Color Guide.
| | 00:07 | This brings up the Color Guide panel.
| | 00:09 | The job of the Color Guide panel is
basically to offer suggestions of color
| | 00:13 | that work well with
colors that you already choose.
| | 00:15 | For example, I am going to go ahead
to Swatches panel and click on some of
| | 00:18 | these colors. Notice that as I click
on each of the colors, the Color Guide
| | 00:22 | updates suggesting colors that
might work well with that color.
| | 00:25 | The way that the Color Guide works is
pretty simple. I can come here to this
| | 00:28 | little pop-up menu here and choose
what's called a Color Harmony. This is just
| | 00:32 | a scientific way that defines
relationships between colors. By choosing one of
| | 00:36 | these, I am basically giving the Color
Guide some kind of an idea of what types
| | 00:39 | of colors I would like to see.
| | 00:41 | What's important with these Harmony
rules is to know that none of these are
| | 00:44 | right or wrong. Just as a designer, you can
just choose one of these and see how it works.
| | 00:48 | For example, I will choose
Complimentary 2. I will expand the panel just a
| | 00:52 | little bit so I could see more of it.
As I click on a color in the Swatches
| | 00:55 | panel, Illustrator chooses a variety
of Complimentary colors here, which are
| | 01:00 | displayed also directly in the center
here, and it offers Shades darker and
| | 01:04 | Tints lighter of those colors as well.
| | 01:06 | But as a web designer, you also know
that sometimes you want to work within a
| | 01:09 | web safe color palette. So while it's
nice that the Color Guide is offering
| | 01:13 | suggestions of lots of colors, it's
very doubtful that any of these colors are
| | 01:16 | web safe colors.
| | 01:18 | You can change that pretty easily by
coming down to this icon here on the lower
| | 01:20 | left hand corner. It allows us to limit
the color groups to colors that are in
| | 01:24 | a specific swatch library. Let me click
over here and choose Web. Now the only
| | 01:29 | colors that can be suggested inside of
the Color Guide are going to be web safe colors.
| | 01:33 | So no matter what color I click on
over here, all the suggestions that are
| | 01:36 | offered by the Color Guide will always
be web safe colors. I find this to be a
| | 01:40 | great way, not only to get inspiration
for colors, but also to make sure that
| | 01:43 | the colors that I do choose will
always work great inside of my web graphics.
| | Collapse this transcript |
| Converting art to web-safe or limited colors| 00:00 | So it's obvious that Illustrator has
plenty of tools to allow us to become
| | 00:04 | inspired about color or to even
define color, all within the web safe color space.
| | 00:08 | However, one of the true benefits of
using Illustrator is the fact that you can
| | 00:12 | develop content, not only for web design,
but for all types of design, for any
| | 00:15 | kind of treatment, and therefore, it
could be quite often that you are working
| | 00:18 | with graphics that were first
created for print and that you are now
| | 00:21 | repurposing for web design.
| | 00:23 | Take this banner for example. I may
have pulled in pieces of artwork from other
| | 00:26 | existing artwork that was created
for print; maybe this little symbol for
| | 00:29 | example. If I click on this little
blue color right here, you can see that
| | 00:32 | right now it is not a web safe color.
In fact, I doubt that any of these colors
| | 00:36 | are web safe colors.
| | 00:37 | Well, Illustrator has some great
functionality for taking existing colors and
| | 00:41 | converting them to web safe colors as well.
| | 00:42 | Let me take my Regular Selection tool,
and I will select this group right here.
| | 00:46 | What I am going to use is
Illustrator's Live Color feature to adjust these
| | 00:49 | colors. Now, I could do that either
by coming to this little icon in the
| | 00:52 | Control panel right here called Recolor
Artwork, or alternatively, I can go to
| | 00:55 | the Edit menu, choose Edit Colors, and
then choose Recolor Artwork here as well.
| | 01:00 | Let me bring this dialog box down
about over here. It says Recolor Artwork
| | 01:04 | right now. Basically, what Illustrator
is saying is I am going to take these
| | 01:07 | colors and remap them to these colors.
By default, Illustrator automatically
| | 01:11 | remaps each color to itself. But
I want to make sure that these colors get
| | 01:14 | converted to web safe colors, and
I want those web safe colors to be as close
| | 01:18 | as possible to these original colors.
| | 01:20 | Well, let me go over here to the Edit
menu. You can see here on our Color Wheel
| | 01:24 | that here are where my colors exist,
but this particular Color Wheel right now
| | 01:28 | represents all colors in a visual
spectrum within the RGB workspace. What I can
| | 01:32 | do is I can click on this icon right
here, which is the same icon that you may
| | 01:35 | have seen inside of the Color Guide
panel, to limit the Color Wheel to only a
| | 01:38 | certain palette of colors.
| | 01:40 | I will click, scroll down to the
bottom here and choose Web, and now you will
| | 01:44 | see that this particular Color Wheel
that looked all nice and smooth before is
| | 01:47 | broken into segments which
are all only web safe colors.
| | 01:51 | By clicking OK I have now simply
converted the colors that were there before to
| | 01:55 | web safe colors. It's that simple.
| | Collapse this transcript |
|
|
5. Pixel-Based Web Graphics: Web SlicingUnderstanding slicing| 00:00 | We have spoken about how important
the grid is when creating a web layout.
| | 00:04 | One of the benefits of creating these
grids is how it works well with slicing.
| | 00:07 | For example, when you look at this
particular web design, you may just see a
| | 00:10 | simple page. However in my Layers
panel, I am going to turn on a layer here
| | 00:14 | called Slices; this is the grid that
I kind of worked on before. You notice
| | 00:17 | that how well everything kind of fits
within the defined areas that I created.
| | 00:21 | By splitting up a page into individual
elements in this way, I can easily focus
| | 00:25 | on individual parts of those graphics.
More importantly, when it comes to
| | 00:28 | actually building a website, not every
part of the page is built in the same way.
| | 00:32 | For example, graphics get different
consideration than text does. Maybe I want
| | 00:37 | certain interactivity. For example,
maybe I want to have rollovers, where these
| | 00:41 | particular words light up
as I move my mouse over them.
| | 00:43 | Alternatively, I may want to define
certain areas where video might play or
| | 00:47 | maybe create some Flash animation.
Finally, there may be some parts in my page
| | 00:51 | that are dynamic. For example, maybe
I am leaving an area here on the bottom of
| | 00:54 | my page though I have rotating ad banners.
| | 00:57 | The concept of slicing really came out
of HTML or the way that tables are setup
| | 01:01 | inside of HTML. If you think about
each of the sections that appear on this
| | 01:04 | particular layout, you might think of
them as a table and each of these are
| | 01:07 | individual cells within that table.
| | 01:09 | Web slicing is the act of taking an
overall piece of artwork and chopping it up
| | 01:13 | into pieces. Now traditionally, those
pieces were turned into an HTML table,
| | 01:18 | but nowadays many web developers also
use this to create divs or divisions of
| | 01:22 | areas on a page that are used in CSS layouts.
| | 01:26 | No matter what your final output is,
when you think about your entire web
| | 01:29 | design, be it overall pages or even
individual pieces of art, working with
| | 01:33 | slices can help you get
it done faster and better.
| | Collapse this transcript |
| Using manual slicing| 00:00 | So we understand the importance of
creating slices when working with web
| | 00:04 | layouts inside of Illustrator. So
let's see how we actually create these
| | 00:07 | slices. In this document, I will
turn on this layer where I have already
| | 00:10 | created these areas or these regions,
which are going to become slices. And in
| | 00:14 | reality there are two ways to
create slices inside of Illustrator.
| | 00:17 | In this particular video, we will talk
about creating them in a manual fashion.
| | 00:20 | I will start by selecting the Slice
tool here in the toolbar, then I will come
| | 00:24 | directly to my document and I will click
-and-drag to create a slice around the
| | 00:27 | region that I have defined. When
I release the mouse, the slice is created.
| | 00:31 | Using the Slice tool I can continue
to create additional slices as well.
| | 00:35 | However, I will tell you that as I am
doing this right now, there is really
| | 00:38 | nothing preventing me from creating a
slice that's not the exact same size as
| | 00:41 | the rectangle that I have created before.
For example, I will purposely clicked
| | 00:45 | right about over here and click to drag
this. They obviously don't line up here.
| | 00:49 | Now the Slice tool is used specifically
for creating slices, not for modifying
| | 00:53 | them. Once I have created them I have
to use a different tool, which is the
| | 00:57 | Slice Select tool. I will come back
to the toolbar here, click and hold my
| | 01:01 | mouse button on top of the Slice tool
and I will see the Slice Select tool. Now
| | 01:05 | I can come back, click on this
particular slice to select it, and you will
| | 01:08 | notice a double arrow appears as I
move over the boundary of that slice.
| | 01:11 | By clicking and dragging I can now
simply resize the slice to match as needed.
| | 01:15 | Let's take a look at what's really
happening here behind the scenes. As I
| | 01:19 | create a slice, Illustrator draws a
rectangle and refers to it as a slice. If I
| | 01:24 | look over here at the layer that I am
in right now, the Slices layer, I see
| | 01:27 | that I have just now created these
objects called Slices. These are the paths
| | 01:31 | that I have defined before when I first
defined my grid, but the slices that I
| | 01:34 | have just drawn are brand new objects.
| | 01:36 | In reality, I can delete these simply
by clicking on them and dragging them on
| | 01:39 | to the Trashcan. To make it somewhat
easier to draw your slices, you can simply
| | 01:44 | go ahead and drag out Guides. In doing
so when you go ahead and you create your
| | 01:48 | slices, I will go back here to the
Slice tool, you will notice that when I
| | 01:51 | click and drag my cursor will snap
to that particular guide as well.
| | 01:55 | In reality though creating slice in
this way is really a manual process. And
| | 02:00 | because of the issues that we discussed
in the past about how Illustrator uses
| | 02:03 | anti-aliasing to define the
boundaries of pixels, it can be somewhat
| | 02:06 | frustrating to get your slices to line
up just so. But for quickly creating a
| | 02:10 | slice here or there working in this
particular manual way with the Slice tool
| | 02:14 | is a great way to create your slices.
| | Collapse this transcript |
| Using object-based slicing| 00:00 | Admittedly, working with the Slice
tool can be somewhat of a frustrating
| | 00:03 | experience. Besides struggling to get
all of your slices to match up precisely
| | 00:08 | and be just the right size, the slices
that you create are really additional
| | 00:11 | objects, which means if you ever really
want to go back and change some of your
| | 00:14 | grid settings, you then have to return
to the Slice Select tool and readjust
| | 00:18 | all of your slices. And besides in
general, I always believe that the computer
| | 00:22 | is there to kind of help you as a designer,
not make life more difficult for you.
| | 00:25 | That's why when it comes to slices
inside of Illustrator I like to use
| | 00:28 | something called Object-Based Slicing.
An Object-Based Slice is really a simple
| | 00:32 | concept. It's simply an attribute
that's applied to an existing path. For
| | 00:36 | example, on this document we already
created a grid of objects. I can see that
| | 00:40 | by going to my Slices layer and
turning that on. In fact, what I will do is
| | 00:43 | turn off all the other layers right
now. By the way you can do that by just
| | 00:46 | clicking and dragging straight down
across all those particular layers.
| | 00:50 | And remember that when I created this
particular grid I was really careful
| | 00:52 | about using the Transform panel to
perfectly size and align each of these
| | 00:56 | shapes as well. And none of them have
those strokes so when it comes to the
| | 00:59 | anti-aliasing part of the Illustrator
with web graphics everything really fits
| | 01:03 | perfectly with each other.
| | 01:03 | So rather than try to duplicate all
that perfection using the Slice tool, I
| | 01:07 | will simply tell Illustrator, hey, all
those objects that I created, go ahead
| | 01:11 | and turn them into slices for me. So
I will press Command+A on my keyboard or
| | 01:15 | Ctrl+A if you are on a PC to go
ahead and select all of my objects.
| | 01:19 | Next, I will go over to the Object menu
and I will choose Slice and then I will
| | 01:23 | choose Make. In doing so all my objects
now automatically turn into slices. But
| | 01:28 | sure it's a lot faster than working
with a Slice tool and drawing out all those
| | 01:31 | other shapes.
| | 01:32 | But more importantly these slices
are now attributes of these rectangles
| | 01:36 | themselves. Which means that at any
time if I want to make a change to my grid
| | 01:39 | layout, all I need to do is to select
that rectangle and modify its setting.
| | 01:43 | Let me go ahead and deselect everything
right there and click on just this one shape.
| | 01:47 | Notice the Transform panel says now
the Width is 100 pixels and the Height is
| | 01:50 | 100 pixels. I will set my reference
point to the top in the middle. And just as
| | 01:54 | an example, I will go ahead and change
the height to 150 pixels instead of 100.
| | 01:58 | Notice that the slice
automatically grows and updates.
| | 02:01 | So what's great about working with
Object-Based Slices is that once you go
| | 02:03 | ahead and you create your grid and
then you turn them into slices. As you
| | 02:07 | modify your grid the slices just seem
to update by themselves. What does that
| | 02:10 | mean for you? Well, once you create
your slices you never have to back and
| | 02:14 | modify them anymore. So you set your
slices up once and then you take the rest
| | 02:18 | of your time and you
focus purely on your design.
| | 02:21 | At any time if you decide that you
want to remove a slice from an object,
| | 02:24 | simply go back to the Object menu with
that object selected, choose Slice and
| | 02:28 | then choose Release, and that
object will no longer be a slice.
| | Collapse this transcript |
| Comparing user slices and auto slices| 00:00 | I would like to take a moment to
take a closer look at slices inside of
| | 00:03 | Illustrator. You may have noticed that
when you are creating slices, it appears
| | 00:07 | as if there is two types of slices.
To illustrate this, I am actually going
| | 00:11 | to create a slice in this document,
I will use the Regular Slice tool and I
| | 00:14 | click and drag to create a slice.
Notice that when I release the mouse, I see
| | 00:18 | that I have created a slice here but take
a look at some of the numbers that were created.
| | 00:22 | See this one over called 1, this slice
is number 2, this slice is number 3, 4,
| | 00:27 | so and so forth. But take a look at
the actual color of the box here. The
| | 00:32 | number is 3 is in a bright colored grid,
whereas these are tilted back. They
| | 00:36 | are grayed out somewhat.
| | 00:37 | Well if you understand really what a
slice is; a slice is simply a cell within
| | 00:42 | an overall table and that table fills
the entire art-board that I have set
| | 00:45 | right now inside of Illustrator. So
Illustrator doesn't just create a table of
| | 00:49 | just one region right here, it actually
uses the entire art-board as one large
| | 00:53 | table. Since I have created a slice in
just this region over here, Illustrator
| | 00:57 | automatically filled in all the other regions
to basically fill-out the rest of that table.
| | 01:01 | When working inside of Illustrator,
when you specifically create a slice, that
| | 01:05 | slice has its very dark color that
appears here. The slices that Illustrator
| | 01:09 | creates are the ones that are grayed out.
We refer to these as User Slices; the
| | 01:14 | ones that you have created and then
Auto Slices; those are the ones that
| | 01:18 | Illustrator automatically creates
to fill-out the rest of the grid.
| | 01:20 | You will notice that as you create
and draw more slices, the ones that you
| | 01:24 | create will always appear in the
darker color and the ones that Illustrator
| | 01:27 | creates, the Auto Slices
always appear in the lighter color.
| | 01:30 | For some web workflows, it really
doesn't make a difference if slices are User
| | 01:33 | Slices or Auto Slices. At the end of
the day, they are just slices. However,
| | 01:37 | there are some certain workflows
where it's important to create these User
| | 01:40 | Slices because we will be able to take
advantage of that. For example, when we
| | 01:42 | are exporting all of our artwork,
Illustrator does give us the option to say
| | 01:47 | let's export only the User Slices and
not the Auto Slices. As we explore more
| | 01:51 | usage for slices inside of Illustrator,
we will find more and more uses for
| | 01:55 | these user slices.
| | Collapse this transcript |
| Applying settings to slices| 00:00 | So we know how to create slices inside
of Illustrator. We know that there is
| | 00:04 | two types of slices. There are User
and Auto Slices and that we can define
| | 00:08 | slices either manually or using the
object based method. But we haven't spoken
| | 00:12 | about yet though is what to do with
those slices once we have created them. So
| | 00:16 | let's take a look at how we adjust
the settings for each of our slices.
| | 00:19 | In this document, I will start off by
creating some object-based slices. I go
| | 00:23 | to my Layers panel. Let's go ahead and
show the Slices layer, again, those are
| | 00:27 | the objects that I created into the
grid and I will turn off all different
| | 00:30 | layers right now. I will press Command+
A or Ctrl+A on Windows, to go ahead and
| | 00:34 | select all my objects, then I will go
to the Object menu, I will choose Slice
| | 00:38 | and then Make to turn them all into slices.
| | 00:41 | Let me deselect these objects right now.
Let's go ahead and choose the settings
| | 00:44 | from maybe this slice right here.
I will click on it to select it and I go to
| | 00:48 | the Object menu, I will choose Slice
and then I will choose Slice Options. This
| | 00:53 | brings up the Slice Options dialog box.
| | 00:56 | Now the first thing you notice right
here is where it says Slice Type. In
| | 00:59 | Illustrator, you actually have the
ability to choose that a slice itself is set
| | 01:03 | to No Image, Image or HTML Text. So
let's take a look at what each of those mean.
| | 01:09 | No Image simply means that
particular area of that particular cell has no
| | 01:13 | artwork exported whatsoever. If
I choose Image, which is really the standard
| | 01:17 | for most slices, it simply means that
whole area that's encompassed within that
| | 01:22 | region gets turned into an image and
gets exported when I save my web graphic.
| | 01:27 | Finally, there is an option here
called HTML Text, this option is only
| | 01:30 | available when you actually select a
text object and turn that into a slice.
| | 01:34 | With the HTML Text option chosen,
when your table gets exported, that text
| | 01:39 | actually is converted to
live HTML text within that cell.
| | 01:43 | In my opinion, though, I don't find
that as useful because usually the live
| | 01:46 | text that I am adding, comes later on a
stage, for example, when I am inside of
| | 01:49 | a Dreamweaver but for now,
I will leave this slice set to Image.
| | 01:53 | Next, I can choose to name my slice.
When I export my artwork from Illustrator,
| | 01:58 | as you can see here in this particular
table, I have seven slices. That means
| | 02:02 | that I will end up with an HTML file
with a table inside of it and that table
| | 02:06 | will reference seven different images.
Each of those images, obviously, has a
| | 02:10 | name. Now by default, Illustrator just
adds its own name using the slice number
| | 02:15 | but if I wanted to, I can actually go
and give the slices specific name. As we
| | 02:19 | learn about more ways to use slices
inside of Illustrator, we will see where
| | 02:22 | that comes into play.
| | 02:23 | Now that brings us to probably one of
the most exciting parts about slices
| | 02:26 | themselves; URL because the slice
really, as a separate image, does have the
| | 02:31 | ability to contain a link, meaning
that I can click on that particular region
| | 02:35 | and be taken to a different
location or different web page, altogether.
| | 02:38 | For example, if I want that a user
goes to my web page and clicks anywhere in
| | 02:42 | this region, and gets directed to
another area, I can simply type in a URL, for
| | 02:46 | example, I will type in http://www.
lynda.com. I could also choose a target,
| | 02:55 | meaning _blank, _self, _parent or _top,
and if I am using different frames or
| | 02:59 | if I want to be able to have this
particular link open up in the new window, I
| | 03:03 | can add that as well.
| | 03:04 | I can also specify a message and
some Alt text. Alt text is actually very
| | 03:09 | important if you are working with
website that should be accessible. For
| | 03:11 | example, people who are visually
impaired, actually have the artwork that
| | 03:15 | appears inside of website, read to them.
Whatever you specify in the Alt text,
| | 03:19 | it gets read to those
people using the screen readers.
| | 03:21 | Finally you have the option for a
Background. Currently, the background is set
| | 03:25 | to None but by clicking on this button
here, I can actually choose any of the
| | 03:28 | color that I want Illustrator
a background for that slice.
| | 03:31 | In reality, if the slice is an image,
this really is not as useful because the
| | 03:34 | image itself covers up the background.
However, if elements inside of the slice
| | 03:39 | are transparent, for example, if I save
it out as a transparent GIF file or if
| | 03:44 | I am working with a HTML Text slice,
then the background does come into play.
| | 03:48 | Let me click Cancel here, and I will
you there is one another important way
| | 03:52 | that I work with slices inside of
Illustrator. Sometimes, I take the grid, as
| | 03:55 | you see it right here, and I use
this as a basis for how I build my pages
| | 03:59 | inside of Dreamweaver. If all I am
looking to do is to build that a HTML base
| | 04:03 | table, this is all that I need and
I might be working with another designer who
| | 04:07 | is working on the actual artwork that's
going to go into this slices but using
| | 04:10 | the Slice Option dialog box is not the
only way to change the settings for each
| | 04:14 | of the slices. I will click Cancel here.
| | 04:16 | Now last you choose the option here
under the File menu called Save for Web &
| | 04:20 | Devices and doing so this brings up
this particular feature and right over you
| | 04:24 | will see there is slice select tool.
I can actually double click in any of
| | 04:28 | these slices and bring up that same
Slice Options dialog box. In fact, when I
| | 04:32 | am working inside of Illustrator and
I want to change a setting for a lot of
| | 04:35 | different slices in my layout, I find
it much easier to do that right here on
| | 04:38 | the Save for Web & Devices dialog box.
I will make my settings here, click OK,
| | 04:42 | double-click on the next slice,
choose its settings, so on and so forth.
| | 04:46 | When I am done, I will go ahead and
click on Done button and returns me back to
| | 04:49 | my layout without exporting any
graphics. Now that we know how to apply
| | 04:53 | settings to our slices, we can explore
many different ways to take advantage of
| | 04:56 | all these features.
| | Collapse this transcript |
| Defining an image map| 00:00 | As we have learned, we can apply
certain settings to slices inside of
| | 00:04 | Illustrator. One of those settings, the
ability to assign a URL to that slice,
| | 00:08 | is probably one of the most important
ones. By assigning URL to a slice, you
| | 00:12 | are basically enabling a user to click
on a particular area of your page and be
| | 00:16 | directed to a certain location.
| | 00:18 | However, there may be times when you
want to be able to click on a specific
| | 00:21 | area within a slice. In the world of
pixel based web graphics, the ability to
| | 00:25 | click on a certain area or a hotspot
region of a graphic is referred to as
| | 00:29 | an image map.
| | 00:30 | Basically, when Illustrator generates
the HTML table with all the slices inside
| | 00:34 | of it, it also includes the file that
has coordinates and those coordinates
| | 00:39 | instruct the web browser so that when
a user clicks on a certain area of a
| | 00:42 | slice or an image, the user is directed
towards that location. Let's see how we
| | 00:46 | do this inside of Illustrator.
| | 00:47 | For example, maybe I want make it so
that when I click just on the Groundswell
| | 00:51 | logo itself; I am directed to their
homepage. So what I will do is I will
| | 00:54 | assign an image map to that location.
Now it's important to know that, inside
| | 00:58 | of Illustrator, you cannot assign an
image map to a group. You can only assign
| | 01:02 | to a single object. So what I will do
is I will try to find the largest object
| | 01:06 | in this group which is this background
right here. The easiest way to do that
| | 01:09 | is to use a Direct Selection tool
inside of Illustrator and just click on one
| | 01:13 | of the largest objects that you have there.
| | 01:14 | By looking at the Appearance panel,
I see I just have a single path targeted.
| | 01:18 | Now I will open up the Attributes
panel and for image map, I will choose
| | 01:22 | Polygon. Now in reality, there are two
types of image map that exist inside of
| | 01:26 | Illustrator. If your object is
rectangular in shape, you can choose the
| | 01:29 | Rectangle option, however, for any
other shapes, choose the Polygon option.
| | 01:34 | For example, in this graphic right here,
if I would choose Rectangle, even if I
| | 01:38 | were to click on let's say this area
right here, that would still be treated as
| | 01:41 | a hotspot. By choosing Polygon, I am
ensuring that the web browser will only
| | 01:45 | allow the users to click on that particular
region inside the boundaries of the shape.
| | 01:49 | Once I have defined that area as an
image map, I will now specify URL for where
| | 01:53 | I want the user to go. I will type
in an address and I will use the full
| | 01:56 | address here, http://www.groundswell.
com and you notice there is a little arrow
| | 02:05 | here on the right side. When I click
on that, all the other URLs that I have
| | 02:09 | specified already appear on this list.
That way I don't have to keep typing
| | 02:12 | them each one time I want
to add another image map.
| | 02:14 | Let's apply one more, I come over here
to this side of the graphic and I will,
| | 02:19 | just again, use the Direct Selection
tool to click on the outline of this
| | 02:22 | Hawaii Surf logo. Once again, I will
specify Polygon as my image map and this
| | 02:27 | time here, I will choose lynda.com.
| | 02:30 | Now let's see if these image maps work.
To do so, I will use the Save for Web &
| | 02:34 | Devices feature. I go to the File menu,
I will choose Save for Web & Devices
| | 02:39 | and one of the great things about Save
for Web & Devices is that not only I can
| | 02:42 | see my artwork here inside of the
window, but I can also come on this button
| | 02:46 | over here on the bottom where it says
Preview in Default Browser. By click on
| | 02:50 | that option right now, we will actually
load that graphic into my web browser.
| | 02:53 | Now for this particular example,
I did not create any slices, so we got
| | 02:57 | exported with my entire web layout as
one overall JPEG image. But as I master
| | 03:02 | with this logo here, you will see that
my cursor changes to a hand, and if you
| | 03:05 | look at the bottom of my screen, it
says I will be directed to groundswell.com.
| | 03:09 | Likewise, if I move my cursor over
this Hawaii Surf logo, clicking on it will
| | 03:13 | direct me to lynda.com web page.
| | 03:16 | I close my browser window, click on
the Cancel button here inside of Save for
| | 03:20 | Web & Devices and return back to my
document. What's great about the image map
| | 03:23 | feature is that it really, sits along
both sides of both the pixel based and
| | 03:28 | the vector-based part of web design.
Meaning that if I export my graphic as a
| | 03:31 | JPEG or a GIF file, my image map will
work. Likewise, if I export my file as a
| | 03:36 | SWF file, Illustrator writes the
necessary ActionScript information into that
| | 03:40 | SWF file so that again that piece
of artwork now turns into a button.
| | Collapse this transcript |
| Working with slices| 00:00 | For the most part, we have been
talking about slices as it applies to an
| | 00:04 | overall webpage, meaning you design an
entire webpage layout and now you want
| | 00:08 | to split that up into chunks or pieces,
which in reality, when you think about
| | 00:12 | traditional web design or where most
designers come from, for example, using
| | 00:15 | products like Photoshop or Fireworks,
they actually create entire webpage
| | 00:20 | layouts and then slice them up in that way.
| | 00:22 | However, one of the real benefits of
using Illustrator is that it's very easy
| | 00:25 | to create web graphics that are
individual objects, maybe they are offered as
| | 00:30 | parts of a page or maybe it is creating
either banners or little elements that
| | 00:33 | belong within an overall page. The
challenge in that case is how do you export
| | 00:38 | those easily. Now one of the things
that we have explored to this particular
| | 00:41 | point is something called multiple artboards.
| | 00:43 | Yes, Illustrator does have the ability
to contain multiple artboards and each
| | 00:48 | of those artboards can also be of
different sizes. So in theory, I could go
| | 00:52 | ahead and set up a document. Let's say
I need a three of these size web banners
| | 00:56 | and three of these size web banners,
I could, in theory, create a document that
| | 01:00 | has six artboards, three of
this size and three of this size.
| | 01:03 | However, because of the nature of
the way that artboards work inside of
| | 01:06 | Illustrator, I can only have one
artboard that is the active artboard at any
| | 01:10 | one time. That means if I want to now
export each of the banners that we need
| | 01:13 | to click on one of them, go to the
Export method, then go ahead and click on
| | 01:17 | another one, export that one, so on
and so forth, one after the other.
| | 01:21 | Now maybe an example here where I only
have six banners in total that may not
| | 01:25 | seem like such a large task. However,
there might be times where you need to
| | 01:28 | generate maybe tens or hundreds of
different types of web graphics and I think
| | 01:32 | it's where these types of examples
where you will derive the most benefit from
| | 01:35 | working with slices inside of Illustrator.
| | 01:37 | So let's take a look at what I have
done here. I am going to go with my Layers
| | 01:40 | panel and just hide Layer 1. What
I have created here is simply six different
| | 01:44 | objects and I used the same method that
I did before when I created my grid. I
| | 01:48 | just created rectangles. Remember the
rectangles had no strokes on them so that
| | 01:52 | in short the anti-aliasing would
always be perfect and snap to a grid. I then
| | 01:56 | took those objects and turned
them into object-based slices.
| | 02:00 | In fact, if I go here and I click on
one of these objects, you will see that
| | 02:02 | it's a regular black filled object.
But what I have done for this particular
| | 02:06 | object here and in fact all the
objects on this layer is that you will notice
| | 02:10 | that over here on the Slices layer,
I set the Opacity level for the entire
| | 02:13 | layer to 0. By clicking on this little
target circle right here, I see that the
| | 02:17 | Opacity for that layer is set to 0.
| | 02:19 | So all the objects on that layer
exist and they are being used to define
| | 02:23 | slices, but they are invisible. Let me
zoom in really closer, so you can see
| | 02:27 | that all these objects also snap
perfectly to the grid. And here is the most
| | 02:30 | important part of this. Let me zoom
out just a little bit here so you can see
| | 02:32 | the objects that I have created.
Notice that I have only defined these six
| | 02:36 | slices, so these are user slices,
slice number 3, 5, 9, 10, 13 and 14, the
| | 02:43 | others are auto slices.
| | 02:45 | As we will soon see, when I am using
the Save for Web & Devices feature, I have
| | 02:49 | the ability to tell Illustrator, you
know what, only export the user slices in
| | 02:53 | my document but don't export any of
the auto slices. So really these all fall
| | 02:57 | by the wayside and what I am left
with is just the slices that I need.
| | 03:01 | More importantly, I will be able to
export all of my slices or more accurately
| | 03:06 | in this particular example, all of my
web banners with one action. Let's see
| | 03:10 | how that works. Let me turn my Layer 1
back on. I will also turn on my Pixel
| | 03:14 | Preview so that I can see exactly
what my artwork looks like when it gets
| | 03:17 | rasterized. I can zoom it over here to
make sure that everything looks okay. In
| | 03:22 | this example, I have actually made sure
that my stroke is aligned to the inside
| | 03:25 | of this rounded rectangle. That way
I don't get any unnecessary artifacts in
| | 03:29 | the anti-aliasing.
| | 03:30 | Now I will go to the File menu here
and I will choose Save for Web & Devices.
| | 03:34 | Now I would like to show you one of
the things that I love best about using
| | 03:37 | this method. I use my Regular Slice
Select tool here to double-click on this
| | 03:41 | first banner. Notice that I have
already given it a name. It's called gs, for
| | 03:45 | Groundswell, large_melbourne.
| | 03:47 | I will Cancel, let me click on this
one here and see I have named this one as
| | 03:51 | well. In fact, I have named all of
these slices. If I were using multiple
| | 03:55 | artboards to do this exact same method,
I would have to name in my artwork each
| | 03:58 | time that I export each individual banner.
| | 04:01 | Here, every time I update my artwork,
I simply need to do one Export function;
| | 04:05 | all the six different banners already
have the names that I want for them and
| | 04:09 | to get exported with just one click of a
mouse. Let me show you how that's done.
| | 04:13 | I will click Cancel here and I will
click on the Save button. For Format, I
| | 04:17 | want to make sure that I am only
exporting the images; I don't need any HTML,
| | 04:20 | because the table is meaningless to me.
I just want the images themselves or
| | 04:23 | the banners, in this case. I will put
them on the Desktop of my computer here
| | 04:27 | and rather than export all slices,
I will choose to only export all user slices.
| | 04:32 | Now when I click Save, take a look at
this. Let's go to my Desktop here for a
| | 04:36 | second and you will see that in my
Images folder, it now has all the banners
| | 04:40 | that I have created. So when you apply
all the knowledge that we have learned
| | 04:43 | when working with slices, we see that
multiple artboards may be great, but for
| | 04:47 | many things inside of Illustrator,
slices really has no match at all.
| | 04:51 | So if you are creating individual
web graphics, I do hope that you take a
| | 04:54 | closer look at slices and how
they might help you in your work.
| | Collapse this transcript |
|
|
6. Pixel-Based Web Graphics: Design TechniquesMaking text look good on the web| 00:00 | It can be easy to forget sometimes,
but really as a designer our biggest job
| | 00:04 | is to make sure that we deliver our
message. That being the case, whenever we
| | 00:07 | create some kind of text and we put
that up onto the web, we need to make sure
| | 00:11 | that text is readable. Now, you may
notice that I am here inside of Photoshop
| | 00:14 | because I want to show you a few
settings that Photoshop has for making text
| | 00:17 | look really great for the web.
| | 00:18 | With my Type tool selected, I will go
ahead and I will select this text and you
| | 00:22 | will see that in the Tool Options bar
towards the top, I have several options
| | 00:25 | for how that text should be anti-
aliased. I can either turn off the
| | 00:28 | Anti-Aliasing altogether or I can go
ahead and choose something called Sharp,
| | 00:33 | Crisp, Strong or Smooth.
| | 00:36 | Depending on the typeface that I choose
and what size I may producing it at,
| | 00:40 | I may choose between some of these
different settings in order to get the best
| | 00:43 | looking type for the web. Now
unfortunately, Illustrator does not have any of
| | 00:47 | these settings at all. In fact, if
you remember, Illustrator is always
| | 00:50 | optimized for print. So type
really is never anti-aliased at all.
| | 00:53 | However, when you are creating
graphics for the web, it is and we do need to
| | 00:56 | care about how that type looks like
when it is anti-aliased on the web.
| | 00:59 | So let's take a look at Illustrator
and see what options we do have.
| | 01:02 | I am going to use my Regular Selection
tool here to start working with some of
| | 01:06 | this text that's right here. Let me
zoom in a little bit so we can see the text
| | 01:08 | a little bit better. Now I have my
Pixel Preview turned on right now, so that's
| | 01:12 | why I am seeing an anti-
aliased version of my text.
| | 01:14 | While we don't have the five
wonderful settings that Photoshop has for
| | 01:18 | anti-aliasing text, we do have three
different settings that we can use. What I'll
| | 01:21 | show you is those three different
settings side by side and then again on
| | 01:25 | the individual basis, depending on the
typeface and the size that you said your
| | 01:29 | type, you will choose
whichever works best for you.
| | 01:32 | Let me select these two text objects
here on the top. I am going to go to the
| | 01:35 | Effect menu, I will choose Rasterize
and I will go over here on the bottom
| | 01:39 | where it says Anti-aliasing and make
sure it's set to None. In doing so when I
| | 01:43 | click OK, this text will
not get anti-aliased at all.
| | 01:46 | Next, I will click on these two
objects right here. I will go back to the
| | 01:49 | Effect menu, choose Rasterize once
again. But this time, instead of leaving
| | 01:54 | Anti-aliasing set to None, I will
choose an option here called Art Optimized
| | 01:58 | or Supersampling.
| | 01:59 | If I go ahead and I choose that one
and click OK, Illustrator will use that
| | 02:02 | method of anti-aliasing for that
particular text. Finally, I come down to these
| | 02:06 | last two text objects, select those,
once again choose to apply the Rasterize
| | 02:11 | effect. But this time, instead of
choosing Art Optimized, I will choose
| | 02:15 | Type Optimized or Hinted.
| | 02:17 | Now I will click OK and we could easily
compare how these look like directly on
| | 02:21 | the screen. One thing that's
interesting to note about, the bottom option where
| | 02:25 | I chose the Type Optimized version of
anti-aliasing is exactly the same as
| | 02:29 | setting your type to Smooth inside of Photoshop.
| | 02:32 | The Art Optimized version, which is
the middle that you see right here, is the
| | 02:36 | same as setting as your anti-aliasing in
Photoshop to the Strong setting. And then
| | 02:39 | finally of course, on top, this is
the same as setting your text to None as well.
| | 02:44 | So while Photoshop does have five
settings for anti-aliasing, Illustrator does
| | 02:48 | have three of those. So when you want
your text to look just right on the web,
| | 02:52 | as you should, try experimenting with these
three different methods to get the best results.
| | Collapse this transcript |
| Adding reflections| 00:00 | One of the latest design trends
these days is adding reflections to your
| | 00:03 | artwork. It's almost like the soft drop
shadows of yesterday or the gradients
| | 00:08 | before that, so on and so forth. Every
generation seems to have its own little
| | 00:11 | design thingy that everyone kind of clamps
on to and I think this is like one of them.
| | 00:16 | So in reality, when you are working
inside of Illustrator, it's really easy to
| | 00:19 | create reflections, and we are going to
do so through the Appearance panel.
| | 00:23 | The benefit of that is that you can save
it as a Graphic Styles, so that applying
| | 00:26 | reflections moving forward would just
be a single click. You can't get better
| | 00:30 | than that, let's get started.
| | 00:31 | I am going to go ahead and select this
text right over here called Surfing.
| | 00:35 | I have converted with the outlines in
this case, but in reality you don't need to
| | 00:37 | work with outlines; you could use
regular live text as well. I want to be
| | 00:41 | a little bit fancy here and turn the
I into one of the body suits that we are
| | 00:44 | using. I come over to the Appearance
panel and I will see that I now have a
| | 00:47 | Group that's targeted.
| | 00:48 | So the first thing that I want to do
is create a secondary fill. Inside of
| | 00:51 | Illustrator, we have the ability to add
fills not only to objects but to groups
| | 00:55 | as well. To do that, I will come down
to the bottom over here and click on this
| | 00:59 | button, Add New Fill. By default,
Illustrator sets that fill to black, but I
| | 01:03 | can easily change it by coming
here and changing it back to white.
| | 01:06 | Now it doesn't look like anything has
happened, but wait, let's create the
| | 01:09 | reflection right now. With this fill
still highlighted here inside of the
| | 01:12 | Appearance panel, come down to where
it says fx and let's add a new effect. I
| | 01:16 | am going to choose Distort &
Transform and then I will choose Transform.
| | 01:20 | Let me move the dialog box over here
so that we can better see what we are
| | 01:22 | looking at. I will turn on the
Preview and then I will click on this button
| | 01:26 | right here, Reflect Y, that just
simply flips that fill upside down. I will
| | 01:30 | also change my Origin Point to be
from the bottom part of the object.
| | 01:34 | By clicking OK, you can see that
I have now created that reflected area for
| | 01:37 | that particular artwork, but it's still
missing a little bit of that reality. I
| | 01:41 | want my reflection to kind of fade
out. To do so, I will actually use a
| | 01:45 | gradient instead of a regular solid
fill, I will go over here to the Window
| | 01:48 | menu and I will choose Gradient
to open up the Gradient panel.
| | 01:51 | By clicking over here, I can
actually apply that regular black and white
| | 01:54 | gradient. The first thing I will do is
I will actually rotate the gradient. So
| | 01:57 | let me change it to 90 degrees. Now
I have it going from white to black.
| | 02:01 | Now I don't want to go to black at
all, I wanted to go from white to
| | 02:04 | transparence that it fades out. To do
so, I will actually just click on the
| | 02:07 | black color stuff right here and
change the Opacity value to 0. I will also
| | 02:12 | double-click on the black color
here as well and change it to white.
| | 02:15 | Now, by adjusting the sliders
themselves, I can adjust exactly how that
| | 02:19 | gradient looks. I will close the
Gradient panel and now I have created my
| | 02:22 | reflection. In order to now save this
reflection as a Graphic Styles so that I
| | 02:26 | can easily apply it to other objects,
I will click on the object itself and in
| | 02:30 | the Graphic Styles panel, click on this
button here called New Graphic Style.
| | 02:34 | I will double-click on it and call it
reflection and that's it, instant reflections.
| | Collapse this transcript |
| Applying rounded corners| 00:00 | It seems as if one of the prerequisites
of creating Web 2.0 graphics is having
| | 00:05 | rounded corners. In fact, you see rounded
corner artwork all over the Web these days,
| | 00:09 | and when you are using Illustrator,
it's really easy to apply to that
| | 00:12 | effect. Rounded corners are added as a
live effect inside of Illustrator.
| | 00:15 | That means that you can apply it to a shape,
but then always go back and modify or
| | 00:18 | adjust it. Let's take a look.
| | 00:20 | I'll start by click on this rectangle
right here. I just want to point out that
| | 00:24 | for this rectangle, if I go over
here to towards and click on the Stroke
| | 00:27 | Setting. You can see that I have
aligned the stroke to the inside of the path.
| | 00:30 | That will prevent any anti-aliasing
issues for that shape. I'll click over here
| | 00:34 | on the path to target the entire path,
and then from the Effects menu down here
| | 00:37 | on the bottom, I'll choose
Stylize, and then Round Corners.
| | 00:41 | I'll specify a radius of around 10
pixels. I'll click on the Preview button to
| | 00:44 | see what that looks like, and then I'll
click OK. The great thing about working
| | 00:47 | with Live Effects is that if later on
my client says, "You know something? The
| | 00:51 | corners are just too rounded for me."
I can easily go back anytime and change
| | 00:54 | it. I'll click on the object right here,
simply click once on the word Round
| | 00:58 | Corners here, adjust it to maybe
around 6 pixels. Let's look at the Preview,
| | 01:02 | yeah. That looks great. Click OK, and
I could easily update that at anytime.
| | Collapse this transcript |
| Creating dynamic text buttons| 00:00 | When you are creating web graphics
inside of Illustrator, I always say it's
| | 00:03 | easy to get caught up in all the
aspects of publishing your web graphics, and
| | 00:06 | sometimes you forget about the power
that Illustrator has. Let's take a moment
| | 00:10 | to look at one of the most powerful
features inside of Illustrator,
| | 00:13 | the Appearance panel, and see how that
might help us create our web graphics.
| | 00:16 | For example, let's create something called
a dynamic text button. Maybe you want to
| | 00:20 | create some navigation inside of our
website. So we want to create a word that
| | 00:24 | has some kind of a button appearance.
| | 00:26 | Now maybe the button is exactly the
same size as the text, then we want to make
| | 00:29 | sure that each time that I create a
new button, that the button is resized to
| | 00:32 | fit just the text inside of it. It's
really easy to do this using some of the
| | 00:36 | effects that are available
through the Appearance panel.
| | 00:38 | I'll get started by adding some text to
my page. Let me take my Text tool over
| | 00:42 | here, click on my artboard and let's
type in the word Apparel. I'll change the
| | 00:47 | Point Size here to 18 points. I use
Myriad Pro. Let's go ahead and choose Bold
| | 00:51 | for now. And again, if you don't have
the exact same typeface, that's fine. Be
| | 00:54 | creative. I am using a little bit over
here so we can see it somewhat better.
| | 00:59 | Center it on my screen here. And the
first thing I want to do is create the
| | 01:03 | actual button itself.
| | 01:04 | But here's a really cool thing, instead
of creating a separate shape I am going
| | 01:08 | to create the button using the fill
of the object itself. But I am going to
| | 01:12 | create a new fill for this object, and
then I am going to do something special
| | 01:15 | to that fill. Let's take a look, I am
going to go over to the Appearance panel,
| | 01:18 | I see that I have my type object
targeted right here, and I'll come down here
| | 01:21 | to this button to choose, Add New Fill.
| | 01:24 | Just so that it will be easier to see,
I am going to change the color of that
| | 01:27 | fill to something else. For now I'll
choose Yellow, only because that's my
| | 01:30 | favorite color. So by taking a look at
the Appearance panel, what I have here
| | 01:34 | are the characters, which are still
filled black, and then I have a new fill,
| | 01:37 | which I have created that's yellow
that's on top of that. So the first thing I
| | 01:40 | want to do is I want to move that
yellow fill beneath the black characters. To
| | 01:44 | do so I'll click on the fill itself,
and just drag it beneath the characters.
| | 01:47 | Now you can see that over here that the
black fills in front. Now that doesn't
| | 01:51 | look very interesting, but the next
step I am going to take that fill, the
| | 01:54 | yellow fill that I have created, and
turn it into the Appearance of a button.
| | 01:58 | I'll go to the Appearance panel and
I'll highlight that yellow fill that I have
| | 02:00 | created. I'll click on the Effects
button here, I'll choose Convert to Shape,
| | 02:05 | and then I'll choose Rounded Rectangle,
this brings up the dialog box here
| | 02:09 | called Shape Options.
| | 02:10 | Now I'll be honest with you, when
I first saw that feature, Convert to Rounded
| | 02:13 | Rectangle, I always thought well why
would I want to create one shape and then
| | 02:17 | convert it to a rounded rectangle, I'll
just create a rounded rectangle for the
| | 02:20 | beginning. But then I realized that you
can apply this text. And in this case,
| | 02:24 | it's actually a live and editable as
well. So I'll click on the Preview button
| | 02:28 | and you can see what happens here is
I have taken that yellow fill which said
| | 02:31 | the word Apparel, and I have converted
that yellow fill, to an actual rounded rectangle.
| | 02:37 | Now you have two options when you
create these shapes. You can either create an
| | 02:39 | absolute shape meaning that that
shape is always constant in size, or I can
| | 02:44 | choose an option here called Relative.
That means that the fill that I am now
| | 02:48 | converting into a Rounded Rectangle
will change in size relative to the actual
| | 02:52 | fill itself. Now by default,
Illustrator adds Extra Width and Extra Height of
| | 02:56 | 18 pixels. That's way too much what
I need for my button here. So for Extra
| | 03:00 | Width, let me change it to around 6 pixels,
and for Extra Height let's try 4 pixels.
| | 03:05 | I'll also change the Radius of that
particular rounded rectangle to something a
| | 03:08 | little bit less dramatic, maybe
around 6 pixels as well. Now that I have
| | 03:12 | applied those settings, I'll click OK,
and there you have it, a dynamic text
| | 03:15 | button. Take a look at this. If I go
ahead now and I switch back to my Type
| | 03:19 | tool and I will highlight that word
Apparel. Let's say I change it now to
| | 03:22 | Events. As I type the word, the
Background button automatically updates itself.
| | 03:27 | Remember that that yellow background
that we are seeing right now? The yellow
| | 03:30 | rounded rectangle is simply the
letters Events that turns into a rounded
| | 03:34 | rectangle. So as I change the text, the
rounded rectangle simply updates itself
| | 03:38 | as I type it. Let's try something longer.
Let me erase that text right here and
| | 03:42 | type in Contact Us.
| | 03:44 | Again as I do so, I will get that
button that automatically adjusts as I type it.
| | 03:48 | So when you are creating web
graphics inside of Illustrator, always
| | 03:51 | remember the power that you have
inside of Illustrator. It's all about being
| | 03:54 | efficient, productive and creative.
| | Collapse this transcript |
|
|
7. Pixel-Based Web Graphics: Save for Web & DevicesOptimizing web graphics| 00:00 | When you export your web graphics from
Illustrator there are several different
| | 00:03 | file formats that you can choose. And
while sometimes you are asked to deliver a
| | 00:07 | specific file format, such as JPEG or
GIFF, many times as a designer it's your
| | 00:12 | choice to choose which ones you want
to use. So of course the question comes
| | 00:15 | down to when do you save your files as a GIF,
or when do you save your file as a JPEG?
| | 00:19 | What about PNG?
| | 00:21 | Well if you go back a couple of years,
designers who worked in web design were
| | 00:24 | required to export their files in a
variety of different formats and then open
| | 00:28 | them up each inside of a web browser,
and see what they look like to find out
| | 00:31 | the best one. Obviously that's a lot
of work and it's very time consuming.
| | 00:35 | And that's precisely the reason why Adobe
offers a feature inside of Illustrator
| | 00:38 | called Save for Web. In fact, you may
already be familiar with this feature
| | 00:42 | because it also appears inside of Photoshop.
| | 00:44 | So I'll go to the File menu and
I'll choose Save for Web & Devices.
| | 00:48 | By looking at the tabs that appear on the top
of my screen, I could either view the
| | 00:52 | Original artwork, an Optimized version,
a 2-Up version, or a 4-Up version.
| | 00:58 | By choosing the 4-Up version, I have
the ability to compare my Original artwork
| | 01:02 | against three other possible formats
that I could save my artwork for the web.
| | 01:06 | In doing so, I take away all the
guesswork and I find just the right file
| | 01:09 | format for the job.
| | 01:10 | On a basic level for example, I'll go
ahead and I'll use my Slice Select tool
| | 01:13 | to click on this one slice right here.
Notice over here it says this is my
| | 01:17 | original. Now I'll go ahead and I'll
click on this window and I'll specify
| | 01:21 | that this one should be set to JPEG.
I'll come down over here. Click on this
| | 01:24 | one right here, I'll set this one to
GIF, but I will reduce the number of
| | 01:27 | colors to around 16 Colors.
| | 01:29 | Finally, I'll come down to this
option right over here. And I'll choose the
| | 01:32 | Wireless Bitmap option. Notice that
the Save for Web dialog box not only lets me
| | 01:36 | see all these pieces of artwork
at once and compare their visual
| | 01:39 | appearance, but I could also see
the file sizes that it creates as well.
| | 01:43 | This JPEG file is 9.5K in size. This GIF
file is almost half of that size, at 4.5K,
| | 01:49 | and the Wireless Bitmap format is even smaller.
| | 01:51 | Taking your original artwork and then
specifying a certain file format and
| | 01:55 | adjusting its settings is a process
that we refer to as optimizing web
| | 01:58 | graphics. And here the name of the
game is trying to find the best possible
| | 02:02 | quality for your image from a visual
perspective, and at the same time making
| | 02:06 | the smallest file size. In this way,
the artwork that you create will download
| | 02:10 | fast, no matter where a person is
trying to access it. It's also important to
| | 02:13 | pay attention not just to individual
graphics but in the case like here where
| | 02:16 | you have several slices, even though
this one image might be just 9K in the
| | 02:21 | JPEG version, you still have to total
up all the slices to see how long it
| | 02:25 | would take to download that entire page.
| | 02:26 | So for a web designer, the Save for
Web & Devices dialog box is really your
| | 02:30 | best friend. It not only offers a quick
way to export your graphics in the file
| | 02:34 | formats that you require, it also helps
you make those tough decisions to find
| | 02:38 | out how to optimize your
graphics in the best way.
| | Collapse this transcript |
| Comparing GIF, JPG, PNG, and WBMP files| 00:00 | In the world of pixel based web
graphics, the most common file formats that
| | 00:03 | you'll find is GIF or some people
pronounce it 'JIF,' JPEG and PNG. There is also
| | 00:10 | another raster format that's supported
by Illustrator which is called WBMP or
| | 00:14 | Wireless Bitmap. It's not nearly as
popular. It's reserved for the older
| | 00:17 | versions of cell phones. But in either
case, let's take a look at the options
| | 00:20 | that are offered for each of these
file formats. I'll go to the File menu and
| | 00:24 | I'll launch to Save for Web & Devices
dialog box. Let's just focus right now on
| | 00:28 | a 2-up version so you could see the
original and also the optimized version
| | 00:32 | of my artwork. I am going to go ahead
and select this slice right here so we
| | 00:34 | can see this Groundswell logo.
| | 00:36 | And let's take a look at some of the
options that are available for the GIF
| | 00:38 | file format. Now one of the things
about the GIF file format is that it's
| | 00:41 | really optimized for working with
flat colors. For example logos and things
| | 00:45 | like that. Any time you have
gradients or photographic content, it doesn't
| | 00:48 | really work that well and the reason
why is because the GIF file can only
| | 00:52 | contain a maximum of 256 colors. But
here's the sweet thing about working with
| | 00:57 | a GIF file. Of course we know that the
name of the game when creating optimized
| | 01:01 | web graphics is to get the best
possible looking graphic but at the smallest
| | 01:05 | file size.
| | 01:06 | And yes, you can have a maximum of
256 colors inside of a GIF file, but the
| | 01:11 | lower that you bring that number down,
the smaller your file size can get.
| | 01:15 | For example take a look over here. I had
this Groundswell logo and right now my
| | 01:19 | file size is 9.4 k. But my Color
setting is set to 256. Let me go ahead and
| | 01:25 | change that to -- let's do
something drastic and go down to 4.
| | 01:28 | Sure, it doesn't look that great but
I have also changed my file size down to
| | 01:31 | 2.3. And this is really one of the
great things about Save for Web. Instead of
| | 01:35 | having to export this in many
different formats and see what works well,
| | 01:38 | I could just play with this particular
setting until I get enough colors that
| | 01:41 | it looks really good,
| | 01:42 | but yet it also comes down in file size.
For example here you can see that the
| | 01:46 | logo itself looks pretty good. But the
drop shadow here does not really look
| | 01:49 | that great because there aren't enough
colors to make that happen. So let me
| | 01:51 | crank this up a little bit higher.
Let's go to around 32 Colors. Now I have an
| | 01:55 | acceptable drop shadow. My color looks
great and I am able to save a couple
| | 01:59 | of K on my image.
| | 02:00 | Let's take a look at some of the
other settings available for GIF. First of all,
| | 02:02 | it says here Selective. This is
actually an algorithm that's used to
| | 02:06 | reduce the number of colors. Now in my
original, I am working with millions of
| | 02:10 | colors that are right here. How do
I take those millions of colors and make
| | 02:13 | them fit within just 32 colors?
Illustrator has several different methods to
| | 02:17 | do that. Something called Selective,
Perceptual, Adaptive and Restrictive.
| | 02:22 | The Restrictive version only uses web
safe colors. So I doubt you'll ever get
| | 02:26 | anything you'll be happy with
when you use that option.
| | 02:28 | For the most part, I find the
Selective version to be the best. What's really
| | 02:32 | happening when you use Selective is
Illustrator is looking at the overall
| | 02:35 | graphic and it's selecting the best
colors to use in order to preserve the
| | 02:38 | appearance of the artwork as you've
created it. Now there are also times when
| | 02:42 | you go ahead and you choose to use
fewer numbers of colors that Illustrator has
| | 02:46 | to use some kind of dithering pattern
in order to simulate those colors. Like
| | 02:49 | for example notice that over here the
drop shadow is really smooth while I have
| | 02:53 | lots of colors to get that great gradation.
| | 02:55 | However, because I am only using 32
colors right here I start to see some
| | 02:58 | artifacts in that drop shadow. By
default, when you choose GIF as a file format
| | 03:02 | inside of Illustrator, Illustrator
use something called Diffusion Dither.
| | 03:06 | However, you can choose between Pattern
and Noise or you can turn off dithering
| | 03:09 | all together. I don't suggest that one
but there are times when depending on
| | 03:13 | the colors that are used that the
Noise option is better. What the Noise
| | 03:17 | normally does is it adds kind of
destructive pattern to that area so that you
| | 03:20 | don't really see any artifacts.
| | 03:21 | But I'll go back to the Diffusion
setting right here. One of the really neat
| | 03:24 | things about working with GIF files
is that they can also have transparency
| | 03:27 | settings inside of them. That means
you can specify up to one color in your
| | 03:31 | graphic to be transparent. We'll
talk more about that in another movie.
| | 03:34 | You also have an option over here to
choose Interlaced. What Interlaced does is it
| | 03:37 | basically allows a large graphic to
download in multiple passes. So it appears
| | 03:42 | first in a web browser window as a
lower res graphic and then over time it
| | 03:45 | starts to res up and comes to full strength.
| | 03:48 | So again because of these settings,
the ability to add transparency and also
| | 03:51 | the ability to limit the number of
colors to save file size, the GIF file
| | 03:55 | format works really great for logos or
things that have flat color or even text
| | 03:59 | for that matter. Now if you are
dealing with something that's photographic in
| | 04:02 | nature and really want to get as many
colors as possible, the best format for
| | 04:05 | you to choose in that case would be JPEG.
| | 04:08 | The main difference between JPEG and
GIF are two things. First of all like we
| | 04:12 | said before, the GIF format can only
contain a maximum of 256 colors. JPEG can
| | 04:18 | have millions of colors inside of it,
but there is a catch. You see a GIF file
| | 04:22 | saves file size by finding common areas
of the same color. That's why it works
| | 04:27 | great for artwork that has flat color.
However, a JPEG is considered a lossy
| | 04:32 | format, meaning that it basically takes
a look at your artwork and it tries to
| | 04:36 | find areas that may not be as important
then it throws that data out of the file.
| | 04:39 | In fact, each time that you save a
JPEG the quality degrades more and more.
| | 04:43 | It's kind of taking a piece of artwork
and making a photocopy of it and then
| | 04:47 | making a photocopy of the photocopy
and making a photocopy of that photocopy.
| | 04:51 | Each time you make another copy of it,
the artwork just does not look great.
| | 04:54 | That being said, you can see a tremendous
amount of file savings when working with
| | 04:57 | JPEG and again it's mainly beneficial
to be used on photographic content. When
| | 05:02 | you do choose the JPEG option, you
could choose exactly how much quality you
| | 05:06 | would like to keep in that particular image.
| | 05:07 | For example, a low quality image will
store a lot more information out of the file.
| | 05:11 | It won't look that great.
For example take a look over here; you can
| | 05:14 | see lots of artifacts in the artwork.
But you really get a large file savings.
| | 05:18 | For higher quality, go ahead and choose
something like very high or maximum.
| | 05:21 | It will look great, but you may be
faced with a larger file size. Here at the
| | 05:25 | maximum level for example, it says
over here 25k. That's a pretty big
| | 05:29 | difference from the 3k option that
we saw when we chose the low version.
| | 05:33 | There are two other options here that
are important to know about. Progressive
| | 05:36 | is the same thing like interlacing was
with GIF. It basically allows the file
| | 05:39 | to be downloaded over time. There is
also an option to include an ICC color
| | 05:43 | profile with your artwork. I don't
recommend this because not only does it add
| | 05:47 | to your file size, there are very few
web browsers that are available today
| | 05:50 | that actually honor those color profiles.
| | 05:52 | For a third possible option as far as
file formats go, you can choose the PNG
| | 05:57 | option or PNG and there are 8-bit and
24-bit versions. But I am going to choose
| | 06:01 | the 8-bit one. Basically the PNG file
format combines the best of both worlds
| | 06:05 | between GIF and JPEG.
| | 06:07 | PNG files can support more colors,
they also have transparency, and they're
| | 06:11 | supported by most modern web browsers.
If you take a look at the options
| | 06:15 | presented for the PNG file format, they
match closely to what you've seen with
| | 06:18 | a GIF file format and just to close
the loop on all bitmap based formats,
| | 06:22 | if I go over here to what it says WBMP
or Wireless Bitmap, I'll see that I can
| | 06:26 | optimize this graphics
specifically for the wireless bitmap format.
| | 06:30 | But again, it's very rare that you
would want actually use this particular
| | 06:33 | feature. Most of the mobile devices
that are used today have the ability to
| | 06:36 | support color graphics.
| | Collapse this transcript |
| Setting up transparency and matte| 00:00 | As we've learned, one of the benefits
of using the GIF file format is that it
| | 00:04 | supports transparency. That means that
you have an object that's irregularly
| | 00:07 | shaped. For example, say a logo. It's
not a rectangular or a square. Take for
| | 00:12 | example this little surf logo right here.
If I were to go ahead and now put it
| | 00:15 | on to a different colored background,
I might see artifacts from that. So let's
| | 00:20 | take a look at some of those
considerations here and see how we can overcome
| | 00:22 | these challenges. I'll start over here in
this case by just turning off the background.
| | 00:26 | Let's imagine we want to make this
trapped to a white background on a web page.
| | 00:28 | Now I'll go to choose File, then I'll
choose Save for Web & Devices. I want to
| | 00:34 | focus on just that particular piece of
the graphic, so I'll use my Hand Grabber
| | 00:37 | tool here. Then simply kind of move
along to see that part of the file. Now I
| | 00:42 | will switch to my Slice Select tool and
click on that to make sure that that is
| | 00:44 | now selected. Since I want to work
with the GIF itself, I'll actually click
| | 00:48 | over here to select that GIF file
format. Notice that I see that it's here
| | 00:51 | selected. And if you take a close look
over here what's going on, let me zoom
| | 00:54 | in just a little bit here
with a Magnifying Glass tool.
| | 00:57 | You can see that there is kind of a
white edge around the particular graphic
| | 01:00 | here. So because my graphic was
created on a white background inside of my
| | 01:04 | layout, the drop shadow here has to
fade to some kind of color so it fades
| | 01:08 | right now to white. Remember that when
you are working with transparency inside
| | 01:12 | of a GIF file, you can only have one
color be transparent. So in this case
| | 01:16 | here, the white area that was here is
defined as a transparent color. But since
| | 01:20 | the white here starts to have some gray
shades in there which taking to effect
| | 01:24 | the drop shadow that was added, I no
longer have the ability to make that
| | 01:28 | transparent as well.
| | 01:29 | Now this is fine if I am going to take
this graphic and place it on to a white
| | 01:32 | background on a web page. But let's
say I put this on to a like a blue
| | 01:35 | background. What I am going to see
is this really ugly large white border
| | 01:39 | around the particular graphic. So to
get around that problem I am going to use
| | 01:43 | the setting called Matte. In doing so
I am going to define or at least tell
| | 01:47 | Save for Web the exact color that
this object is going to be placed upon.
| | 01:51 | This way rather than fade to white,
Save for Web will automatically modify that
| | 01:55 | drop shadow to fade to the correct color.
Obviously to make this work, you need
| | 01:59 | to know what the actual background
color is going to be. I come over here to
| | 02:02 | where it says Matte, click on the
little pop-up list here and choose Other. For
| | 02:06 | example let's say now it's going to be
some kind of a red color Lets go over
| | 02:09 | here and choose something red. Click
OK and you can see that now that drop
| | 02:12 | shadow fades directly to red. In this
case now when I place this artwork onto
| | 02:17 | that particular color background it
will blend seamlessly into that background.
| | 02:21 | Another thing to keep in mind when you
are working with Matte and Transparency
| | 02:24 | in a GIF file was that you also have
the ability to change which color does
| | 02:27 | become transparent. To do that you'll
use the Eye Dropper tool. By selecting
| | 02:31 | the Eye Dropper tool, I can click on
any color in my graphic. Notice that in
| | 02:35 | the color table window here, this
particular setting comes up. By clicking on
| | 02:39 | the little checkerboard pattern here
that's going to turn that color into transparent.
| | 02:42 | Now that you know how to take advantage
of both the transparency and the Matte
| | 02:45 | settings for the GIF file format, you
know that your graphics will always look
| | 02:49 | pixel perfect when put on to a web page.
| | Collapse this transcript |
| Adjusting image dimensions| 00:00 | One of the obvious benefits of using
Illustrator for not just web design but
| | 00:04 | any kind of design is that any thing
that you create is vector based. Meaning
| | 00:07 | that you can scale it to any size that
you need. Now in reality, when you are
| | 00:10 | creating web graphics, you are always
designing your artwork to just the size
| | 00:14 | that you need.
| | 00:15 | However, there may be times when you
are asked to deliver artwork in other
| | 00:18 | sizes as well and rather than have to
resize everything, you may be able to
| | 00:23 | take advantage of some of the
functionality inside of Illustrator that allows
| | 00:26 | you to scale your graphics as necessary.
| | 00:28 | For example, take a look at this file.
I have several banners that I have
| | 00:32 | created and maybe I am being asked to
deliver this one banner in a different
| | 00:35 | size, not 300x250 but maybe they want
to be that it's just 200 pixels wide.
| | 00:40 | Instead of having to create a brand
new artboard and then resize that artwork
| | 00:43 | right here, I can do so directly
to the Save for Web dialog box.
| | 00:47 | The first thing I will do is I make
this active artboard by clicking anywhere
| | 00:49 | within that area. Next, I will go to
the File menu and I will choose Save for
| | 00:53 | Web & Devices. Maybe I need to deliver
this as a JPEG file. So I will change
| | 00:58 | the file format from GIF to JPEG.
| | 01:00 | Now let's take a look at this tab over
here called Image Size. Right now the
| | 01:04 | Image Size panel tells me the Width
and Height of my graphic. It's 300x250 as
| | 01:09 | it was originally created. But by
leaving the Constrain Proportions options
| | 01:12 | turned on, I will go over here where it
says Width and change to the width that
| | 01:16 | I really need, which is 200 pixels.
Then I click the Apply button and you
| | 01:20 | notice that right here in the Save for
Web dialog box and my image gets resized
| | 01:24 | to the exact dimensions that I need.
| | 01:27 | Now when I click Save I created the
file just at the size that I needed,
| | 01:30 | without having to change or adjust
anything of my original file. Now here was
| | 01:34 | an example where I actually reduce the
file size but remember we are working
| | 01:38 | with vector graphics here.
| | 01:39 | For example, if I want to change this
to width of 800, I will type that in
| | 01:43 | right here, click Apply and now
everything gets resized and looks crystal
| | 01:47 | clear, just the way it should be. Again,
I don't have to do this inside of my
| | 01:50 | Illustrator document, I can do this
right here inside of Save for Web. So this
| | 01:54 | happens just at the export time.
| | 01:56 | Unlike Photoshop where it has to
recreate my artwork at each individual size,
| | 02:00 | I find myself coming back again and
again inside of Illustrator because I can
| | 02:04 | easily resize my graphics as necessary.
| | Collapse this transcript |
| Optimizing to a specific file size| 00:00 | As we have said many times before one
of the most important things about web
| | 00:03 | graphics, at least the final version
that you deliver, is its file size. Now you
| | 00:08 | may look at a certain file
size and think it's not too big.
| | 00:10 | For example, with a broadband connection,
even downloading a file that several
| | 00:13 | megabytes only takes a short amount
of time. However, measuring bandwidth is
| | 00:17 | incredibly important when working in
web design and sites that get tons of
| | 00:21 | traffic, things like Google for
example or Yahoo, may have so many hits in a
| | 00:25 | certain day that they put
restrictions in the file sizes for the ad banners
| | 00:28 | that appear on their website.
| | 00:30 | Because of that if you are creating an
ad banner for a certain company, you may
| | 00:33 | be asked to deliver that web banner at
a specific file size or more likely
| | 00:38 | you will be asked not to exceed a certain
file size and therein lies the problem.
| | 00:42 | What happens if you are working on a
web banner and in order to get to a
| | 00:45 | certain file size you really not happy
with the way that your artwork looks?
| | 00:48 | It may take a tremendous amount of time
finding just the right settings to find a
| | 00:51 | file size that works for you as well
as the visual aspects of that file.
| | 00:55 | One again, Save for Web comes to the
rescue. It has certain functionality built
| | 00:59 | in that allows you to dial in an exact
file size of what you need and it will
| | 01:03 | automatically try to find the settings
to make it fit within that file size.
| | 01:06 | Let's take a look. I will click on this
banner over here. This is the one that
| | 01:09 | 728x90. Since I have now made this the
active artboard, if I choose File and
| | 01:14 | then choose Save for Web that ad banner
and that ad banner alone appears inside
| | 01:18 | of my dialog box. I have noticed by
the way sometimes insides of Save for Web
| | 01:22 | resizing the overall window helps you
adjust how that appears inside of the
| | 01:26 | dialog box. This can be especially
helpful with ad banners that are always in
| | 01:30 | this wide format.
| | 01:31 | For example, if I choose 4-Up over
here I can easily see four different
| | 01:35 | versions of that banner. But let's say
I click on this one right over here and
| | 01:38 | I have been told that I need to get
file size down to maybe 17K. Right now it
| | 01:44 | set to 24K. Instead of me trying to
mess or adjust those particular settings, I
| | 01:47 | will come over here to the Fly-out
menu which appears right here on the top
| | 01:50 | right of the dialog box and from that
menu I will choose Optimize to File Size.
| | 01:55 | This brings up a dialog box that
lets me dial the exact size I need.
| | 01:58 | So I will type in 17K. I could choose
this Start With Current Settings and I
| | 02:02 | could also have Save for Web Auto
Select GIF/JPEG, which ever is the one that
| | 02:06 | it feels going to be the best. I will
choose OK and automatically Illustrator
| | 02:11 | chose GIF format, came just
under 17K and it looks great.
| | 02:16 | I will be honest with you. I actually
find it funny that such a useful feature
| | 02:19 | inside of Save for Web is so cleverly
hidden inside of that little tiny flyout menu.
| | 02:23 | But the next time that you need it,
now you know exactly where it is.
| | Collapse this transcript |
| Editing output settings| 00:00 | You know at first glance, the Save
for Web feature inside of Illustrator
| | 00:03 | appears pretty simple. I mean, it
allows you to take your files and optimize
| | 00:06 | them for GIF, JPEG or any of the other
file formats that exists for the web.
| | 00:10 | But there is really tons of
functionality that's hidden deep inside of Save for
| | 00:14 | Web and if you are willing to go there,
there's lots of great things that you
| | 00:17 | can do using the Save for Web
feature in Illustrator. But just a little
| | 00:20 | disclaimer, before we get started. Some
of the functionality that I'm about to
| | 00:23 | show you matters most to web
developers or programmers and not necessarily to
| | 00:27 | designers. Let me show you what I mean.
| | 00:29 | I have this web layout that I've created.
All my slices are done and I'm ready
| | 00:32 | to go and publish this page. So I'll
go to the File menu and I'll choose Save
| | 00:37 | for Web & Devices. Let's say for now
that I'm willing to take auto Default
| | 00:40 | Settings for all these slices and I'm
ready to save my document. So I go over
| | 00:44 | here to the Save button and
Illustrator ask me when do I want to save all my
| | 00:47 | content. I'll throw this off to the
desktop in my computer, and where it says
| | 00:51 | Format down here, I don't just want
the images themselves, I also want the
| | 00:55 | HTML. This way I get an HTML page with
the table inside of it and also all the
| | 01:01 | images that appear inside
the cells of those tables.
| | 01:03 | As far as slices go, I obviously want
all the slices to be included and here's
| | 01:07 | where the fun begins. Underneath the
Settings pop-up menu, I'm going to choose
| | 01:11 | Other. Well, that brings up a dialog
box called Output Settings. If you think
| | 01:15 | there is a lot of information to look at,
try clicking on this pop-up menu and
| | 01:19 | see that there are actually four
different panels within this one dialog box.
| | 01:23 | This first one here is called HTML and
what it allows you to do specify exactly
| | 01:27 | how Illustrator writes the HTML file
that you create. For example, you may want
| | 01:31 | to choose XHTML.
| | 01:33 | In doing so, you can also choose how
Illustrator formats the HTML as well as
| | 01:37 | specify how the code is written. There
is a whole another setting here for the
| | 01:40 | slices themselves. If you're doing
your website design on your own or you're
| | 01:44 | working with a web developer, this
setting is actually one of the most
| | 01:47 | important where it says Slice Output.
| | 01:49 | Now until now, we've been discussing
how Illustrator creates the slices using
| | 01:54 | an HTML based table. But I also
mentioned that nowadays more and more people
| | 01:58 | are moving towards the Web 2.0 standard
and using CSS layouts as they can form
| | 02:03 | to standards based design. If you want
to export your artwork using CSS rather
| | 02:07 | than an HTML table, just click on this
one button right here. Rather than cells
| | 02:11 | in a table, Illustrator will
automatically create divs for each of the slices
| | 02:14 | that you've defined.
| | 02:15 | Additionally, you can choose
Background. This allows you to specify a
| | 02:19 | background image for the HTML page
that you're creating. Finally, there is an
| | 02:22 | option here for saving files. For
example, if your artwork has lots of slices
| | 02:26 | inside of it, Illustrator will use these
settings for how it names each of those slices.
| | 02:30 | Since most web servers are hosted on
UNIX machines, it's always great to choose
| | 02:34 | the UNIX option for File Name
compatibility. Finally, you may notice that every
| | 02:38 | single time that you save images out
of Save for Web, it puts into a folder
| | 02:42 | called Images. You can easily change
the name of that folder by changing
| | 02:45 | this word right here.
| | 02:46 | So as you can see, there is a ton of
information here for Save for Web. Now you
| | 02:50 | don't have to worry about coming to
these dialog boxes every single time you
| | 02:53 | want to export a file, because you can
save all these settings as a preset. Any
| | 02:57 | time that you save a setting, it
appears in this pop-up list right here.
| | 03:00 | Now if there are some settings here in
this dialog box that confuse you, you
| | 03:04 | may want to reach out to your web
developer or someone else that you deal with
| | 03:07 | for your web programming.
| | Collapse this transcript |
|
|
8. Vector-Based Web Graphics: Creating Flash (SWF) ContentUnderstanding Illustrator and Flash workflows| 00:00 | Adobe Illustrator and Adobe Flash
Professional are both vector-based
| | 00:04 | applications. But before we learn how
these applications work together, let's
| | 00:08 | take a moment to explore some of the common
workflows that exist between these applications.
| | 00:12 | Now the first thing I want to talk
about is a common misconception out there.
| | 00:15 | That SWF and Flash are the same thing.
Sometimes people use those phrases
| | 00:19 | interchangeably. But they really refer
to two different things and throughout
| | 00:22 | the rest of our title here, when we
refer to SWF or S-W-F, that is the final
| | 00:27 | delivery format of a file, a file
that's uploaded to the web and it's played
| | 00:31 | back to the Flash Player. However,
Flash is the actual application that authors
| | 00:35 | these files. In other words, a SWF file
is what is created by the Flash application.
| | 00:41 | Now the reality is that you can create
a SWF file without using Flash at all.
| | 00:44 | When we're using Illustrator and Flash
there are really two ways to think about
| | 00:48 | delivering these SWF graphics to the web.
We can either work entirely inside of
| | 00:52 | Illustrator and export our graphics to
SWF directly using Illustrator or we can
| | 00:56 | design artwork inside of Illustrator
and then bring those into Flash and then
| | 01:00 | create the SWF out of Flash.
| | 01:02 | Obviously, Flash Professional, the
application, can do a lot more to a SWF file
| | 01:06 | than you can do inside of Illustrator.
For example, Flash developers spend a
| | 01:09 | lot of time writing custom
ActionScripts to make Flash files do just what they
| | 01:12 | want them to do. Illustrator doesn't
have that capability. But we'll spend some
| | 01:16 | time exploring the benefits of
creating SWF directly out of Illustrator or
| | 01:20 | exporting artwork from Illustrator and
bringing them to the Flash application.
| | 01:23 | Keeping that in mind, there are three
common workflows that exist. Designer
| | 01:27 | only workflows are those in which there
is only one person is really working on
| | 01:31 | all the artwork. That person is in
charge of look and feel of what you're
| | 01:34 | trying to create. In such cases you
may design all your work inside of
| | 01:37 | Illustrator and export to SWF directly
or if you are a designer who knows how
| | 01:41 | to use Flash, you may save your files
as an Illustrator file and then bring
| | 01:44 | that into the Flash application.
| | 01:46 | Then there are developers. These are
people who primarily work inside of code
| | 01:50 | and as such they're probably more
familiar with working inside of the Flash
| | 01:53 | application. So if you're a developer,
you'll probably care more about how easy
| | 01:56 | it is to bring artwork from Illustrator,
which may be handed off to you by a designer,
| | 02:00 | and bring that directly into
your coding environment inside of Flash.
| | 02:03 | Finally, there is the designer/
developer workflow. Here is an established
| | 02:07 | relationship between a team of people.
Some people who are maybe just in-charge
| | 02:10 | of the visual look and feel of a
particular website or an interactive graphic,
| | 02:14 | and then you have a developer who is
involved in making sure that the code works.
| | 02:18 | Traditionally, there has always been a
big divide between the designers and the
| | 02:21 | developers. But because Flash and
Illustrator work so well with each other,
| | 02:25 | we'll learn how easy it is to create
artwork inside of Illustrator and then
| | 02:28 | when that artwork gets brought into Flash,
it has all the functionality built into it.
| | 02:32 | This means a designer can focus on
making sure the artwork looks just right
| | 02:35 | inside of their design application,
Illustrator, and know that when that
| | 02:38 | artwork is brought into Flash, it will be
completely functional and useful for a developer.
| | Collapse this transcript |
| Understanding SVG| 00:00 | Whenever I speak about Flash, I always
get a couple of questions about SVG. SVG
| | 00:04 | stands for Scalable Vector Graphics,
and it is a vector-based file format
| | 00:08 | that's used on the Web. But in reality,
the similarity between SVG and Flash
| | 00:12 | end pretty much there.
| | 00:14 | While Flash is a format that's owned
by Adobe, SVG is an open standard.
| | 00:18 | It's not owned by any particular company,
and it's developed under the auspices of the
| | 00:22 | W3C or the World Wide Web Consortium.
| | 00:24 | When it was first introduced, there was
a tremendous amount of momentum behind
| | 00:28 | SVG. However lately, Flash has become
the de facto standard across the Web.
| | 00:32 | And because of that, in this particular
video title we deal specifically with
| | 00:35 | Flash workflows, not SVG.
| | 00:37 | However, if you are intriguing by SVG
or you want to learn more, you might
| | 00:40 | want to visit Adobe's SVG zone. The Web
address for that is www.adobe.com/svg.
| | 00:47 | But I will tell you though that this
is information that really hasn't been
| | 00:50 | updated in a long time.
| | 00:52 | In fact, if I scroll down the page
over here, you will see that Adobe makes
| | 00:55 | numerous references to CS2 and also
GoLive, a project that Adobe no longer ships.
| | 01:00 | But if you really like to find the
most up-to-date information about SVG,
| | 01:03 | go ahead and visit SVG.org. Being that
it is an open standard, there are really
| | 01:08 | many different things that
can happen to SVG over time.
| | 01:10 | For example, more functionality may be
added and it may be supported on more
| | 01:14 | platforms. But for now, if you are
looking to deliver interactive vector-based
| | 01:17 | content on the Web, Flash
is certainly the way to go.
| | Collapse this transcript |
|
|
9. Vector-Based Web Graphics: Preparing Art for FlashDefining symbols in Illustrator| 00:00 | When you are creating artwork that's
going to be published using Flash,
| | 00:03 | you will want to take advantage of the
symbols feature inside of Illustrator.
| | 00:06 | Now in reality in the world of Flash,
symbols, at least what I always kind of feel,
| | 00:11 | are the lifeblood of Flash.
| | 00:13 | If you really want to add any kind of
interactivity, or you want to be able to
| | 00:16 | add scripting to be able to do
something instead of Flash, you need to create
| | 00:19 | a symbol first.
| | 00:20 | So first let's understand exactly what
a symbol is. A symbol is simply any kind
| | 00:25 | of artwork that exists inside of
your document. In the case here of
| | 00:27 | Illustrator, it can be anything with
the lone exception of a placed linked image.
| | 00:31 | Now once you create that symbol, you
can reuse that piece of artwork many, many
| | 00:35 | times inside of your document, but it
doesn't add to your file size. All the
| | 00:38 | copies of the symbol that you create
are simply aliases of the original symbol
| | 00:42 | that you have created.
| | 00:44 | When we work with symbols, we refer
to the first piece of artwork that we
| | 00:47 | define as a symbol, and all other
copies of that are referred to as instances
| | 00:51 | of that symbol. Let's take a look
at how we defined symbols inside of
| | 00:54 | Illustrator, and it's important to note
that when you create symbols inside of
| | 00:57 | Illustrator, anytime down the road
that you bring your artwork into Flash,
| | 01:01 | those symbols are maintained. And again,
this is important going back to some
| | 01:04 | of the workflows that we have discussed.
| | 01:06 | If you are working with developer, by
going ahead and creating and defining the
| | 01:09 | symbols right now instead of Illustrator,
there is less work for the developer
| | 01:12 | to do later on in the workflow. And
just as importantly, if you're the designer who
| | 01:15 | is starting off inside of Illustrator
and then going to Flash, by defining your
| | 01:19 | symbols now inside of Illustrator,
there's less for you to do when you get into Flash
| | 01:22 | as well. In fact, when I am working on
an artwork that I know is going to go
| | 01:25 | into Flash, I try to add as
many things as symbols as possible.
| | 01:28 | So let's take a look at this example
here. I have this banner that I have
| | 01:31 | created. Well, it's basic elements
that I plan on turning into an interactive
| | 01:35 | banner. But for now I'd like to take
each of the elements and turned them into symbols.
| | 01:38 | Let's start with this surfer guy right
over here. I will go ahead and click on
| | 01:41 | that piece of artwork. And then
I come over here to the Symbols panel, and
| | 01:44 | click on this button over here called
New Symbol. In doing so a dialog box
| | 01:48 | comes up and I have to give my
symbol a name. I strongly suggest that you
| | 01:51 | don't just call it New Symbol, and then
New Symbol 1 and New Symbol 2, because
| | 01:54 | that will be more difficult to
reference them later in your workflow.
| | 01:56 | I'll go ahead now and I call this one
SurferDude. Now don't worry about these
| | 02:00 | settings that are here, we'll get to
you exactly what each of these things do,
| | 02:03 | but for now I am just going to
click OK. And I have defined my symbol.
| | 02:06 | Illustrator also automatically
converted this piece of artwork now into the
| | 02:09 | first instance of that symbol. Any
time I want to add more instances, I can
| | 02:13 | simply take this symbol from the
Symbols panel, and drag it out onto my artboard.
| | 02:17 | Let's create a few more symbols
here. I'll take this logo right here
| | 02:20 | Groundswell. Now remember, this is not
one single piece of artwork, but this is
| | 02:23 | a group of objects. Anything at all can
be a symbol. Instead of using the icon
| | 02:27 | inside of the Symbols panel, I am
going to use the keyboard shortcut.
| | 02:30 | The keyboard shortcut to define a
symbol, not only in Illustrator but also in
| | 02:33 | Flash, is simply to tap the F8 key.
That brings up the same Symbols Options
| | 02:37 | dialog box, and here I will type in a
name Groundswell_Logo. Let me move over
| | 02:44 | here to the left side, and I want to
show you that I am going to create a
| | 02:46 | nested symbol. That means when I have
basically two symbols that are embedded
| | 02:50 | within another symbol.
| | 02:51 | I'll start by clicking on this Surf
logo right here. I am going to double-click
| | 02:54 | over here, so that I am isolating just
as one object, and I'll turn that into a symbol.
| | 03:00 | Next, I'll select the text and the
button around it, and turn that into a
| | 03:04 | symbols as well. Now I'll double-click,
and I'll select both of these symbol
| | 03:09 | instances and finally I'll
turn that into a symbol as well.
| | 03:15 | The benefit here is that I have now
created a single symbol that has two other
| | 03:18 | symbols inside of it. If in my
designs I sometimes want to have this logo
| | 03:21 | appear on its own, but also sometimes
together with a button, I could modify a
| | 03:24 | single symbol and they'll
update no matter where they are.
| | 03:27 | Finally, I'll create one more symbol
here. I'll select these waves and I'll
| | 03:30 | turn that into a symbol as well. So
now I have created all the symbols that I
| | 03:34 | want inside of my document. Now there
is one other thing that I want to cover
| | 03:37 | here with regards to symbols.
| | 03:39 | As I mentioned before, symbols are the
lifeblood of Flash. If you want to add
| | 03:42 | any kind of interactivity inside of
Flash, you need to create a symbol.
| | 03:45 | Once I have a symbol, I can write an
ActionScript code that tells that symbol to do
| | 03:49 | something. But we also know that we
can create multiple instances of a single symbol.
| | 03:53 | For example, like before I came over
here to the Symbols panel and I created
| | 03:57 | now another instance of this surfer
guy. Now both of these symbols have the
| | 04:00 | exact same name. So if I wanted the
ActionScript code to tell one of these
| | 04:04 | particular surfers to kind of move
around, how would I do that? How would I be
| | 04:07 | able to reference just one
of those symbols using code?
| | 04:10 | So in Flash, you have the ability not
only to create a symbol and name that
| | 04:13 | symbol, you also have the ability to
name each individual instance. The way
| | 04:18 | that I would like to refer to it is
that when you create a symbol and you give
| | 04:20 | that symbol a name, it's like
giving that piece of artwork a last name.
| | 04:23 | For example, everyone in my family has
the same last name, but if I wanted one
| | 04:27 | of my kids to actually go ahead and do
something, and I just yelled that out
| | 04:30 | our last name, probably none of the
kids will listen at all, but there will be
| | 04:33 | no ways for me to reference exactly
one of them. That's why we give our
| | 04:36 | children first names. In that case,
I can go ahead and call their first name
| | 04:39 | and tell one of them to
do something specifically.
| | 04:41 | So think of an instance as a person's
first name. In the past, the only way to
| | 04:45 | add instance names was directly inside
of the Flash application, but what's
| | 04:48 | great now about the integration that
exist between Illustrator and Flash, I can
| | 04:52 | add those instance names right here
inside of Illustrator. Take a look over here
| | 04:55 | at my Control panel. It says here,
Instance Name, which is currently set to nothing.
| | 04:59 | So with that particular symbol selected,
I'll call this one dude_01 and then
| | 05:04 | I'll click on this one over here
and I'll refer to the one over here as dude_02.
| | 05:09 | Now when I bring this piece of
artwork into Flash, I'll be able to use
| | 05:12 | ActionScript code to reference each
of those two different symbol instances directly.
| | 05:16 | The key concept here is that the more
work that you do upfront here in your
| | 05:19 | design inside of Illustrator, the less work
you will have to do when you get into Flash.
| | Collapse this transcript |
| Editing symbols in Illustrator| 00:00 | One of the true benefits of working
with symbols is that when you edit an
| | 00:03 | original symbol, all of the instances
that you've also added update as well,
| | 00:07 | and what I really like about what
Adobe has done so far with working with
| | 00:10 | symbols is that they have made the
experience across both Illustrator and Flash
| | 00:14 | nearly identical. We already know to
create a symbol, you tap the F8 key and
| | 00:18 | again that applies to both
Illustrator and Flash.
| | 00:21 | Well, if you want to modify or change
the artwork that appears inside of a
| | 00:24 | symbol, all you need to do is double-
click on that symbol on the artboard.
| | 00:28 | So for example, say I want to change
some of these waves and make some kind of
| | 00:31 | modification to it. I will double-click
on it, and I will get a dialog box here
| | 00:35 | it says that I am about to
edit the symbol definition.
| | 00:37 | I will go ahead and I will click OK,
and now you can see that the other
| | 00:40 | artwork has kind of dimmed back
somewhat. In fact, before this surfer dude was
| | 00:44 | in front of the waves. Temporarily,
Illustrator takes the actual symbol itself
| | 00:48 | and brings the artwork to the front so
I can see all of it. In fact, you will
| | 00:51 | see that I can't even
select this. It is locked.
| | 00:53 | So I have the ability to see the
artwork in context to the design that I am
| | 00:56 | creating, but it's much easier for me
now to edit the artwork that appears
| | 00:59 | inside of that symbol. Take a look
over here also. It has the name of the
| | 01:02 | symbol here, and it appears in this
gray bar across the top of my screen.
| | 01:06 | This gray bar indicates that I am
now editing a symbol. I'm in what
| | 01:09 | Illustrator refers to as Isolation Mode.
Basically, the artwork in the symbol
| | 01:13 | has been isolated from everything else
from the file. I also have the ability
| | 01:16 | to dive deeper into the artwork here
in this particular symbol. For example,
| | 01:20 | I can double-click now on this and
each time I double-click, I go one step
| | 01:22 | further. Notice now that I am inside
the symbol, inside the group that's in
| | 01:26 | that symbol, and inside the path
that lives inside that particular group.
| | 01:29 | I just want to jump over the Flash for
a minute and show you that's exactly
| | 01:32 | the same way that it works in that
application as well. So here inside of Flash
| | 01:37 | I have the exact same piece of artwork.
In fact, I just copied and pasted it
| | 01:40 | here into Flash.
| | 01:41 | If I click on it, I see the instance
name right here in the Properties panel.
| | 01:45 | If I want to edit this particular symbol,
I can just double-click on it. Notice
| | 01:48 | now a gray bar appears across the top
of the screen. I have my RadWaves symbol
| | 01:52 | right here and again a double-click
again, continues to drive me deeper and
| | 01:56 | deeper into that particular object.
| | 01:57 | Once I am done editing, I can simply
double-click anywhere outside to step
| | 02:01 | back upwards in the hierarchy of
that particular symbol. Again, back in
| | 02:05 | Illustrator it works the same way.
In fact, I can just simply come over here to
| | 02:09 | the gray bar and click on this little
arrow to go back one level at a time or
| | 02:13 | simply tap the Escape key on my
keyboard to just exit Isolation Mode
| | 02:16 | altogether and go back
to working with my artwork.
| | Collapse this transcript |
| Choosing a symbol type| 00:00 | In the Adobe Flash Professional
application, when you define a symbol, you can
| | 00:04 | choose between three different types
of symbols. There is a graphic symbol, a
| | 00:07 | movie clip symbol, and a button symbol.
| | 00:10 | Now in Illustrator, you can create a
graphic or a movie clip symbol but not a
| | 00:14 | button symbol, and that's simply
because Illustrator itself has no way to
| | 00:17 | define the states that exist within a
button. However, let's explore the other
| | 00:21 | two types of symbols that you can
create here inside of Illustrator, graphic
| | 00:24 | symbols and movie clips.
| | 00:26 | So I will click on the Groundswell
symbol right over here, and then from the
| | 00:29 | Symbols panel, I will click on this
button here, which allows me to choose the
| | 00:32 | Options for that symbol. This may
look familiar; it's the exact same dialog
| | 00:36 | that appears when you first define a
symbol. Now there's another over here
| | 00:38 | where it says Type. You can
choose between Graphic and Movie Clip.
| | 00:42 | A graphic symbol is simply a symbol
that exists as a flat static graphic. The
| | 00:47 | main benefit that you derive from
defining a graphic symbol is that you can
| | 00:50 | repeat that symbol many, many times throughout
your artwork, and your file size is reduced.
| | 00:54 | However, if you want to add any kind
of interactivity, you need to define a
| | 00:58 | movie clip symbol. In fact, most of
the symbols that Flash Developers use are
| | 01:02 | going to be movie clips. The main
difference between a graphic symbol and a
| | 01:05 | movie clip symbol is that a graphic
symbol basically exists as a single graphic
| | 01:09 | on the overall timeline, but a movie clip symbol
has its own timeline embedded inside of it.
| | 01:14 | What does that mean? Well, let me
give an illustration. Say you wanted to
| | 01:17 | create this animation of a bird flying
to the sky. Well, if you had a graphic
| | 01:21 | symbol, you could make the bird fly
from the left to the right side of your
| | 01:24 | screen. But if you define a movie clip
symbol, you can define a bird that flaps
| | 01:28 | its wings, and that particular
animation of the bird flapping its wings is all
| | 01:32 | embedded inside of the movie clip itself.
| | 01:34 | So in that regard, when you make the
same bird fly from the left to the right
| | 01:38 | side of your screen, the bird will
be flapping its wings as it does show.
| | 01:41 | Graphic symbols can do that, but
movie clip symbols can't. But there is one
| | 01:45 | point overall that's even
more important than all of this.
| | 01:47 | No matter what type of symbol that you
choose here inside of Illustrator, the
| | 01:50 | difference is only what happens inside
a Flash. However, with regards to using
| | 01:55 | Illustrator itself, there is no
difference to a graphic or a movie clip symbol.
| | 01:58 | In fact, the symbol type alone means
nothing at all when you are inside of
| | 02:02 | Illustrator. It only takes effect once
you bring this artwork into the Flash application.
| | Collapse this transcript |
| Setting the Flash registration| 00:00 | When you are working inside of
Illustrator, we have already seen how important
| | 00:03 | the Transform panel is. We use it
not only to position our objects on our
| | 00:07 | screen, but also to resize them
precisely. For example, when clicking on this
| | 00:11 | symbol right here, I can see its exact
coordinates by looking over here at the
| | 00:14 | Transform panel.
| | 00:15 | Now when we are in the Transform panel,
we are always looking over here at the
| | 00:18 | Reference Point to see what these
values refer to on the object itself. In
| | 00:23 | reality, when you are working inside
of ActionScript inside of Flash and you
| | 00:26 | want to be able to rotate an object,
you want to be able to resize an object
| | 00:29 | using code; you also needs to use a
Reference Point to tell the script where to
| | 00:33 | start that particular transformation from.
| | 00:35 | Now you can either way to do it
inside of Flash or you can do it right here
| | 00:38 | inside of Illustrator. The beauty of
doing it here inside of Illustrator is
| | 00:41 | that once you set it, you don't have
to worry about it later on. To do so
| | 00:44 | select any symbol and then from the
Symbols panel, click on the button over
| | 00:48 | here to be able to show this Symbol Options.
| | 00:50 | Here within the Symbol Options dialog
box, you have a Flash Registration point.
| | 00:54 | It's the same reference point that you
are just seeing here in the Transform
| | 00:57 | panel. I will tell you that by design
most developers like to have the Flash
| | 01:01 | Registration always set to the upper
left-hand corner as you see it right now.
| | 01:05 | That's because when performing math
calculations, it's just easier to figure
| | 01:08 | things out in that way. But no matter
what you choose, I am sure developer will
| | 01:11 | be happy if you are simply
consistent with everything that you do.
| | 01:14 | Again, whatever Flash Registration you
choose here in the Symbol Options dialog
| | 01:18 | box inside of Illustrator will transfer when
that particular graphic is brought into Flash.
| | Collapse this transcript |
| Using 9-slice scaling| 00:00 | As a designer, depending on the medium
that you are creating your artwork for,
| | 00:03 | you face different challenges. For
example, print designers may be faced with
| | 00:07 | choosing between different inks or
different types of paper. We have discussed
| | 00:11 | how choosing the right color can also
be a challenge for even web designers,
| | 00:14 | but when it comes to working with Flash
itself, the fact that the artwork that
| | 00:18 | we create is interactive that it
changes as its use can also offer additional
| | 00:22 | challenges to a designer.
| | 00:23 | Let me explain what I mean. Let's say
I wanted to create a button that changes
| | 00:27 | over time, maybe I wanted to animate
inside of Flash. Well, when I define my
| | 00:32 | button and I specify how it should look,
how does it look when it actually goes
| | 00:35 | ahead and changes its state? Let's
take this button for example; I am using a
| | 00:39 | little bit more on this.
| | 00:40 | Notice it's a nice button that has
rounded corners. But look what happens, if I
| | 00:44 | go ahead now and I resize it. Let's
say I stretch this that it should grow
| | 00:46 | over time. Look what happens to the
corners. Well, it was nice pretty rounded
| | 00:50 | corners before, now it turns
into these ugly stretched corners.
| | 00:54 | Again, this is before and this is after.
What are the challenges about working
| | 00:58 | with graphics that you know are going
to published with Flash is to find the
| | 01:01 | way to have these
particular elements scale gracefully.
| | 01:04 | Well, the good news is that there is
a feature inside of a symbol which we
| | 01:07 | refer to as 9-Slice Scaling. It's way
for us to kind of build intelligence into
| | 01:12 | a symbol to tell that symbol how we
should scale over time? Instead of waiting
| | 01:16 | to get into Flash or define that type
of functionality, we can actually as a
| | 01:20 | Designer plug that right into the symbol,
right here inside of Illustrator. And
| | 01:23 | again, once I define it here inside of
Illustrator, that property translates
| | 01:27 | through directly into Flash.
| | 01:29 | So the first step here is going to be
to define this into a symbol. I will go
| | 01:32 | ahead and hit F8 on my keyboard and
I will go ahead and I will call this one
| | 01:36 | sliding_button. I will define it is
a Movie Clip. I will leave my Flash
| | 01:41 | Registration set to the upper left-
hand corner here, and I will choose this
| | 01:44 | option called Enable Guides for 9-
slice scaling. Now I will click OK.
| | 01:49 | Now I want to be able to edit my symbol.
So I am simply going to come over here
| | 01:52 | and double-click into my artboard.
I got a dialog box which by the way if you
| | 01:57 | are editing symbols all the time, you
might want to choose Don't Show Again and
| | 02:00 | I will click OK.
| | 02:01 | Now take a look at this, because
I went ahead and I specified to turn on that
| | 02:05 | option for 9-slice scaling, my symbol
now appears with four guides. Two of them
| | 02:10 | are horizontal and two of them are
vertical. The way that I position these
| | 02:14 | guides are going to make that
particular symbol intelligent and know how it
| | 02:17 | should scale. Because of the way that
these particular guides are drawn I am
| | 02:21 | left with 9 regions on my
screen 1, 2, 3, 4, 5, 6, 7, 8, and 9.
| | 02:29 | Each of these regions will get scaled
in a different way. Basically, the way
| | 02:32 | that 9-slice scaling works is that
the middle region over here will always
| | 02:35 | scale both horizontally and vertically.
However, each of the corner regions
| | 02:40 | here do not scale at all.
| | 02:41 | So any artwork that appears in this
particular region and this region here, and
| | 02:46 | in this region, and finally this one
here as well, will always remain as they
| | 02:49 | are. Artwork that appears in this
region here and in this region here will only
| | 02:53 | scale vertically. And likewise any
artwork that appears within this area or
| | 02:58 | this area will only scale
in a horizontal fashion.
| | 03:00 | So let's position our guides. What
I will do first is make sure that my guides
| | 03:04 | are not locked. The easiest way to do
this is to use the Contextual menu. If
| | 03:08 | you are on a Mac with just a single-
button mouse, hold down the Ctrl key and
| | 03:11 | then click to get the menu. If you are
on Windows or if you have a two-button
| | 03:14 | mouse, just hit the right-
click button on your mouse.
| | 03:16 | Here I will uncheck Lock Guides. Now
I will simply position the guides that I
| | 03:20 | have the regions instead of the way
just that I want my object to scale. By
| | 03:24 | carefully doing this right now, I am
basically telling Illustrator, this
| | 03:27 | particular area and this particular
area you can only scale in horizontal fashion.
| | 03:31 | This one here and this one here scales
vertically and the corners will always
| | 03:35 | remain unchanged. In this way, when my
object is scaled and it grows, I will
| | 03:39 | make sure that the corners don't
change and they always remain nice and sharp
| | 03:43 | the way that I have defined them.
| | 03:44 | Now that I am there with my 9-slice
scaling, I will simply hit the Escape key
| | 03:47 | to go back to my regular piece of
artwork. Now here is the important thing to
| | 03:50 | know about Illustrator. Because of
inside of Illustrator and because the
| | 03:54 | 9-slice scaling is only a Flash-
based feature, if I scale my artwork here
| | 03:58 | inside of Illustrator, I won't see
the effects of the 9-slice scaling.
| | 04:00 | For example, I will click on this
symbol right here and I will stretch it, and
| | 04:03 | you will see that the corners really
don't look that pretty at all. But take a
| | 04:07 | look at this. If I now go to the File
menu and I choose Save for Web & Devices,
| | 04:11 | and I come over here-- Let's position
this so I can see it better on my screen.
| | 04:15 | And instead of a GIF format, I go
ahead and choose the SWF format, right, for
| | 04:19 | Flash. Now that I will see that the
corners do appear correctly. That's because
| | 04:23 | Illustrator is using the Flash Player
to simulate what this particular piece of
| | 04:26 | artwork is going to look like.
| | 04:27 | So basically, I have added this
functionality here inside of Illustrator and it
| | 04:31 | will take effect as soon
as I bring that into Flash.
| | Collapse this transcript |
| Defining static and input text| 00:00 | Putting ourselves into the mindset of
interactivity, we know that when you are
| | 00:03 | working inside of Flash, you can
either have text that appears on your screen
| | 00:06 | which you simply look at and read,
but there is also type that you interact with.
| | 00:10 | For example, let's say you have a field
that you want someone to actually type
| | 00:13 | in some information, or maybe there is
some dynamic text that's being displayed
| | 00:17 | inside of your Flash animation
that's maybe coming from a database. Well,
| | 00:21 | Illustrator lets you define that kind
of text right upfront here inside of your layout.
| | 00:24 | To show you, I am actually going to
specify some different settings for this
| | 00:27 | text that appears over here that says
Sign Up! Now, this is already a symbol,
| | 00:31 | but I want to show you another way that
you can actually edit or modify symbol
| | 00:34 | inside of Illustrator.
| | 00:35 | We already know that I can go ahead
and I can double click on this symbol to
| | 00:38 | isolate that symbol, and what we
created here was a Nested symbol. I can
| | 00:41 | double-click on that one as well to
isolate that symbol. But I am going to tap
| | 00:44 | the Esc key, because I want to
show you another way to do that.
| | 00:46 | Remember when I go ahead and I double
click on a symbol on the Artboard, all
| | 00:49 | the rest of the artwork just simply
grays out. So I see my artwork in a context
| | 00:53 | of everything else in my design.
| | 00:55 | But let's say I want to focus just on
the symbol alone, I just want to work
| | 00:57 | with that text. I really don't want to
see anything else. Well, come over to
| | 01:00 | the Symbols panel and you will see
that I have that particular button right
| | 01:03 | here. If I double click on a symbol in
the Symbols panel, I have the ability to
| | 01:07 | isolate that symbol, but everything
else is removed from my vision. In fact,
| | 01:12 | take a look at my Layers panel right
here, it says that I am in Isolation Mode,
| | 01:15 | and the only thing I have available to
me right now is my Text button, nothing else.
| | 01:19 | When you do things in this way, you
are able to focus specifically on this
| | 01:22 | piece of artwork without anything
else getting in your way. So let's take a
| | 01:26 | look at this text. I will go over here
and I will click on just the text object
| | 01:28 | right here. I will go up to the
Window menu, I will choose Type, and then I
| | 01:33 | will choose Flash Text. This
brings up the Flash Text dialog box.
| | 01:38 | Now, you will see here that for Type,
I have three different options to choose
| | 01:41 | from. Static Text means that its just
regular plain text that's just sitting
| | 01:44 | there, for me to read.
| | 01:46 | Dynamic Text means that that text would
now be brought in from a database or a
| | 01:50 | script or some other kind of way for
me to actually make that text change on
| | 01:55 | the fly as the SWF is being
played back in the web browser.
| | 01:58 | Alternative, there is something called
Input Text. Input Text would simply be
| | 02:01 | the kind of text that I would expect
somebody else to interact with and type
| | 02:04 | into my layout.
| | 02:05 | For example, if I wanted someone to
type in their email address so I could send
| | 02:08 | them something, I might have a text
field that I will create. I will choose the
| | 02:12 | typeface in a way that type should look,
but I will define that as Input Text.
| | 02:16 | That way when that's displayed in the
final Flash file, it will be a field that
| | 02:19 | the user can simply go ahead
and type some information into.
| | 02:21 | The way that Flash deals with these is
that it turns these text objects almost
| | 02:25 | into like symbols. For example, I will
choose Dynamic Text here. When I do so,
| | 02:29 | I am going to click OK over here, and
I could add an Instance name for that
| | 02:32 | text object. I could choose the
Rendering Type; and this is just a simple way
| | 02:35 | for Flash to do a better job at anti-
aliasing that type so looks better on my screen.
| | 02:40 | I also have additional options when
I choose Input Text. The most important
| | 02:44 | part here is defining the maximum
number of Characters that I will allow in
| | 02:47 | that particular field.
| | 02:48 | Once I am done, I will simply Edit
out of that particular symbol, and I now
| | 02:51 | know that I have changed the text
inside of that particular symbol button.
| | 02:54 | Now again, the real benefit here is
simply that I can define something here
| | 02:58 | inside of Illustrator and not have to
wait to actually define or change that
| | 03:01 | when I am inside of Flash. More
importantly, if I am working with a developer,
| | 03:05 | the developer right away knows simply
by looking at the text exactly what my
| | 03:08 | intention is for how that text
should be used inside of the animation.
| | 03:11 | Remember, as with almost all of these
settings here that we are specifying for
| | 03:14 | Flash, all these settings only apply
to the text when it gets brought into
| | 03:18 | Flash itself, but here inside of
Illustrator, whether I define Static Text or
| | 03:22 | Input Text, or Dynamic Text, it has no
effect whatsoever inside of Illustrator.
| | Collapse this transcript |
|
|
10. Vector-Based Web Graphics: Going from Illustrator to Flash and SWFSetting preferences in Flash| 00:00 | So you have created your masterpiece
here inside of Illustrator and you are
| | 00:03 | ready now for the next step. You are
ready to bring your artwork into Flash,
| | 00:06 | the application.
| | 00:07 | Now, one of the great things that
Adobe has done recently is made it much
| | 00:11 | easier to move artwork between
Illustrator and Flash. In fact, beneath the hood,
| | 00:15 | Flash now uses the exact same
drawing engine that Illustrator does.
| | 00:19 | That means that when you bring artwork from
Illustrator into Flash, the integrity of
| | 00:23 | your artwork is preserved. But in
reality there are a variety of preferences
| | 00:27 | that you can set inside of Flash to
make this transition a pleasant one.
| | 00:30 | Let me switch over to Flash here and
I will go over here underneath Flash,
| | 00:34 | and choose Preferences. On Windows,
you would find the Preferences settings
| | 00:37 | underneath the Edit menu.
| | 00:39 | Notice on the left side here where it
says Category, towards the bottom there
| | 00:42 | is something here called AI File
Importer. By choosing this option I now see
| | 00:46 | all the settings that Flash applies
when bringing artwork in from Illustrator.
| | 00:50 | For example, do you want to able to
exclude objects that appear outside of the
| | 00:54 | artboard? Do you want to import
hidden layers? When you import text, do you
| | 00:58 | want that text to remain editable?
Would you like it to be converted to Outlines,
| | 01:01 | or do you want it to be Rasterized?
| | 01:03 | Notice that in each of these cases as
well, whether you are importing text,
| | 01:06 | paths, images, groups, or even
layers, you can specify to have Flash
| | 01:10 | automatically convert those elements
to movie clip symbols. Likewise, you can
| | 01:13 | set the default registration for those symbols.
| | 01:16 | For now, I will leave the default
settings here inside of Flash, but as we
| | 01:19 | become more comfortable with moving
artwork from Illustrator into Flash, you
| | 01:23 | may come back to this Preferences
settings to get things exactly the way that
| | 01:25 | you need them.
| | Collapse this transcript |
| Copying and pasting elements| 00:00 | When you are working on creating Flash
content with Illustrator, there may be
| | 00:03 | times when you quickly want to bring
some piece of artwork from Illustrator
| | 00:06 | into Flash. There are several reasons for this.
| | 00:08 | First of all, you might have a whole
composition already setup inside of Flash,
| | 00:12 | and you want to be able to tweak a few
elements. Well, you may find the tools
| | 00:16 | available inside of Illustrator to
be far more intuitive from a drawing
| | 00:19 | perspective than that found inside of Flash.
| | 00:21 | Alternatively, you may be working with
a developer and he may be asking for a
| | 00:24 | certain type of graphic or element,
rather than struggling to try to figure out
| | 00:28 | how to draw those elements inside of
Flash for them, you can just create them
| | 00:31 | inside of Illustrator and have them
work with it from there. In those cases, to
| | 00:34 | bring individual elements from
Illustrator into Flash, the easiest way to do
| | 00:38 | that is simply to copy and paste
it from Illustrator into Flash.
| | 00:40 | Let's take a look. I will go ahead and
I will click on this particular symbol
| | 00:43 | right here called Groundswell. By
looking in the Symbols panel here, I see that
| | 00:47 | the name of that symbol is Groundswell_
Logo. Take a look. Also, it's a Movie
| | 00:50 | Click and see where the Flash Registration is.
| | 00:52 | I will click Cancel, and you will also
see that over here the Instance Name is
| | 00:55 | set to logo_01. Keeping that in mind,
let's now bring this into Flash.
| | 00:59 | I will simply choose Edit > Copy,
I will switch over to the Flash application,
| | 01:05 | and let's create now a new ActionScript
3 file. Now, I will simply choose Edit
| | 01:09 | and then I will choose Paste in Center.
| | 01:11 | The Paste dialog box comes up and the
option, Paste using AI File Importer
| | 01:15 | preferences is available. I will
simply click OK and my artwork appears right
| | 01:19 | on my screen.
| | 01:20 | But take a look at this. If you look at
the Properties panel, you will see that
| | 01:23 | my movie is already set to Movie Clip.
The name of the symbol is preserved,
| | 01:26 | Groundswell_Logo, and the Instance
Name, logo_01, appears here as well. So
| | 01:30 | everything that I have defined inside
of Illustrator comes right here inside of Flash.
| | 01:34 | In fact, let's take a look at the
library here. I will go up to the Library tab.
| | 01:37 | I will see that right over here
inside of this particular folder called
| | 01:40 | Illustrator Symbols, I now see that
that symbol has come right into my Library
| | 01:44 | as well. So in most cases a simple
copy and paste from Illustrator to Flash
| | 01:48 | does just the right job.
| | Collapse this transcript |
| Exporting entire files| 00:00 | While copying and pasting individual
elements from Illustrator into Flash can
| | 00:04 | be useful, there may be times when you
have an entire document all ready to go
| | 00:07 | and you just want to bring everything
in one fell swoop. Again, whether you are
| | 00:11 | just the designer who is using both
Illustrator and Flash, you can easily see
| | 00:14 | the value of defining and creating
everything in your favorite design
| | 00:17 | application, Illustrator. But then
adding all the interactivity later on
| | 00:21 | inside of Flash.
| | 00:22 | And likewise if you are working with
a developer, it's much easier for you to
| | 00:25 | take your simple Illustrator file and
hand that off to the developer, which
| | 00:28 | they can then use directly inside a
Flash. You may know that if we go to the
| | 00:32 | File menu, you can choose Export.
In doing so, underneath the File Format
| | 00:37 | setting, you can choose to export
your file as a Flash or SWF file.
| | 00:41 | However if you are moving
graphics from Illustrator into Flash,
| | 00:45 | the application, this is not the way
to go. As I shared with you before,
| | 00:49 | Illustrator and Flash do share the
same graphics engine. And likewise whether
| | 00:53 | you work with symbols and other
elements such as text, they're all the same.
| | 00:57 | Therefore, the best way to bring an
entire file from Illustrator into Flash is
| | 01:01 | simply to save your file as a
regular native Illustrator file.
| | 01:04 | So I will cancel out of this. I come
over to the File menu and I will choose
| | 01:08 | Save As and on my desktop I will
choose to save this file called
| | 01:12 | animated_banner and I will name this
one flash_banner. I will click OK over
| | 01:18 | here in the dialog box. I will just
take the regular standard Illustrator
| | 01:21 | settings and now I will switch
over to Flash, the application.
| | 01:23 | I will create a brand new Flash file
right here and now I want to get started
| | 01:27 | with everything I have done inside of
Illustrator. To do so, I will go to the
| | 01:30 | File menu > Import > Import to Stage.
I go to my desktop and I will choose that
| | 01:38 | flash_banner.ai file and import it.
| | 01:42 | Now Flash throws up this Import dialog
box, which gives me a tremendous amount
| | 01:46 | of control over exactly how this
entire file does get imported into Flash.
| | 01:51 | As you can see on the left side over here,
every single object that I have created
| | 01:54 | inside my Illustrator file shows up in
this list. I can choose to import only
| | 01:58 | specific layers, and I will go ahead
I will close these layers so I just see
| | 02:01 | the overall layers that exist in the file.
| | 02:03 | In the Illustrator file I had a
Background layer, a Surfer layer, a Groundswell
| | 02:07 | logo on its own layer and that Sign Up
button as well. If I don't want any of
| | 02:12 | these, I can simply uncheck it and
then that artwork will not be included
| | 02:15 | inside of Flash. But in this case here
I am going to have all these options
| | 02:18 | checked. Take a look over here.
It also says Select Illustrator Artboard.
| | 02:21 | If I would have had multiple artboards
defined to my Illustrator document, I can
| | 02:25 | simply choose which those
artboards I want to import.
| | 02:27 | Let me highlight just one of these for
example. I will go ahead and I will click on
| | 02:30 | the word here Groundswell. I can turn
that entire layer here and simply convert
| | 02:34 | that to a bitmap or I could turn that
entire layer into a movie clip as well.
| | 02:38 | But since I have done all this work
already inside of Illustrator, I don't even
| | 02:41 | need to go there. The one thing that
I do want to make sure is taking a look at
| | 02:44 | some of the settings down here on the bottom.
| | 02:45 | I would like to convert all my
Illustrator layers into Flash layers. By the way,
| | 02:49 | the alternative is to turn them into
keyframes or to turn everything to a
| | 02:52 | single Flash layer, but I want to
preserve my Illustrator layers and turn them
| | 02:55 | into Flash layers. I want to place all
my objects at their original position
| | 02:59 | and most importantly, I want Flash to
automatically change its stage size to
| | 03:03 | match the size of the artboard
that I created inside of Illustrator.
| | 03:06 | In this case, it's a 728x90 leaderboard.
I will go ahead and I will choose
| | 03:10 | that option and I could also choose to
import any unused symbols. For example,
| | 03:14 | I might have some symbols that
I defined inside of Illustrator which are saved
| | 03:18 | to my Symbols panel, but that don't
appear on the artboard itself. I may want
| | 03:22 | to be able to use those symbols here
inside of Flash. So I will go ahead and I
| | 03:25 | will check that option.
| | 03:26 | Now let's simply click OK and all of
my artwork is brought right here inside
| | 03:30 | of Flash. You will notice that my
stage now changed to the right dimension.
| | 03:33 | I can click on these individual
elements, for example right now on this
| | 03:37 | particular logo. And if I go to my
Properties panel, I will see that all the
| | 03:41 | information is preserved. The same applies
to all the other symbols that I created.
| | 03:44 | In fact if I go ahead and now
I double-click on this particular symbol to
| | 03:47 | isolate it, I can actually select this
text and see that with my Type tool
| | 03:52 | I can go ahead and I can edit that text.
In fact inside of Illustrator I already
| | 03:55 | defined that as dynamic text and
I have given an instance name. So all the
| | 03:59 | information that I put into my artwork
inside of Illustrator is all preserved
| | 04:02 | now inside of Flash. Let me go ahead
and exit the Isolation mode for these
| | 04:05 | particular symbols and you will see
here on the Timeline that all of my layers
| | 04:09 | that I created inside of
Illustrator are also preserved.
| | 04:11 | So here is the way that I look at it
using both Illustrator and Flash together.
| | 04:15 | On an individual basis if you just need
to bring some graphics in at one time or
| | 04:18 | another, a simple copy and paste
will do. But if you spend a few moments
| | 04:21 | upfront planning your project, you
can really take advantage of defining an
| | 04:25 | entire file with layers and
everything inside of Illustrator and bringing
| | 04:28 | everything into Flash in one step.
From this point it's simply a matter of
| | 04:32 | adding some ActionScript and
some interactivity and you are ready to go.
| | Collapse this transcript |
| The Save for Web & Devices dialog| 00:00 | Of course with Illustrator you
don't even need to go and use the Flash
| | 00:04 | application in order to create a SWF
file. You can actually save a SWF file
| | 00:07 | directly out of Illustrator and
publish it directly to the web. One way to do
| | 00:11 | that is to use a feature called Save
for Web & Devices. Now I know we have
| | 00:14 | already used this to create GIF, JPG or
PNG files out of Illustrator, but as we
| | 00:19 | will soon see, you can also
use it to create Flash files.
| | 00:22 | I will go over to the File menu and
I will choose Save for Web & Devices. In
| | 00:26 | the resized window, just a little bit
here to make it appear much nicer. Now I
| | 00:30 | can see the banners directly on my screen.
| | 00:32 | Now I am using the 2-Up version right
here, so I am comparing the original
| | 00:34 | banner with what I would like
to see when it gets exported.
| | 00:37 | So I come over here where I can choose
different file formats and rather than
| | 00:41 | GIF, JPG, or PNG, I will scroll down
lower to where it says SWF. Now I will see
| | 00:46 | a preview of what that looks like
when it gets rendered as a SWF file.
| | 00:49 | I also have several important
settings that I can choose from here in this
| | 00:52 | dialog box. First of all I can choose
what version of Flash Player I want my
| | 00:56 | graphic to be compatible with?
| | 00:58 | Now Adobe publishes different
versions of the Flash Player every once in a
| | 01:00 | while. For example, currently the
latest version is Flash Player 10. The newer
| | 01:05 | the version of the Flash Player, the
more capabilities it has. For example it
| | 01:08 | might have better performance or the
ability to playback video, so on and so
| | 01:12 | forth. But it also means that a fewer
people out on the Internet actually have
| | 01:15 | that plug-in installed. So what you are
always looking for is a happy median, a
| | 01:19 | version of Flash Player that's
compatible that most people have installed. I
| | 01:23 | find that many people choose
the Flash Player 8 version.
| | 01:26 | You can also choose to have your
entire Illustrator file converted to one
| | 01:29 | static SWF file, or you can choose to
convert your Illustrator layers to Flash
| | 01:33 | frames. We will explore that option
in another video when we talk about
| | 01:36 | animation out of Illustrator. For now
I will just choose Illustrator file to
| | 01:40 | SWF file.
| | 01:41 | I can choose to compress the file to
make a little bit smaller. I can choose to
| | 01:44 | protect it, this way other people now
will take that SWF file and open it up
| | 01:48 | inside of Flash to make changes to it.
I also can convert any text in that
| | 01:52 | particular file to outlines to
ensure that my text appears correctly.
| | 01:56 | Finally there are two options down
here on the bottom. I can either choose to
| | 01:59 | preserve Appearance or preserve
Editability, and this is here because there are
| | 02:03 | several constructs or things that you
can create inside of Illustrator that may
| | 02:07 | not translate perfectly into the
world of Flash. So I could either have
| | 02:11 | Illustrator preserve the editability,
meaning I can make changes to it if I
| | 02:14 | open up that file inside of Flash or
since this is going right upon to the web,
| | 02:18 | I might choose the Appearance option.
In fact, take a close look at the text
| | 02:22 | that appears right here in this button.
Right now the text looks really nice.
| | 02:26 | When I choose Editability, notice the
text does not look that great at all. In
| | 02:30 | this particular case here by choosing
Appearance, it does look nicer, but that
| | 02:34 | also means that this text will not be
exported as live text, but rather will be
| | 02:38 | converted to outlines to
preserve its appearance.
| | 02:40 | If I really want to see what this file
looks like when it gets displayed inside
| | 02:43 | of a web browser, I will come down
here say for web dialog box and I will
| | 02:47 | choose to Preview in Browser. In this
way I see exactly what it's going to look
| | 02:51 | like when rendered in a browser. Plus
I also have access to the actual HTML
| | 02:55 | content that I can copy and
paste right into my webpage.
| | Collapse this transcript |
| Exporting SWF files| 00:00 | When you create artwork inside of
Illustrator and you then want to bring that
| | 00:03 | into the Flash application, we've
already discussed the best way to do that is
| | 00:06 | to save your file out of Illustrator
as a native Illustrator file. That's
| | 00:10 | because Flash has the ability to parse
all the information in that Illustrator
| | 00:13 | file including layers,
symbols, so on and so forth.
| | 00:16 | However, when you have artwork inside
of Illustrator that you just want to
| | 00:19 | create a quick SWF out of, so that you
can put it onto a website, we know that
| | 00:22 | you can create a SWF file using Save
for Web, you also have the ability to
| | 00:26 | export your document as a SWF file.
As we'll soon see, we have a ton of
| | 00:30 | information and setting that we
can choose from when we do that.
| | 00:33 | So I have my banner that I've created,
I have all my symbols, I have all my
| | 00:36 | layers that I've created. I'm going to
go to the File menu here. I'm going to
| | 00:39 | choose Export and then from the Format
popup, I'm going to choose to export my
| | 00:44 | file using Flash or SWF.
| | 00:46 | Now if I had multiple artboards in my
document I could choose to use Artboards
| | 00:50 | button and basically choose which of
my artboards I want to export as a SWF.
| | 00:54 | But in this document, I just have one
artboard. That doesn't come into play
| | 00:57 | here. I'll choose Export over here and
I'll have a range of options, some of
| | 01:01 | these we've already explored. For
example, I can choose which version of Flash
| | 01:04 | Player I want my Flash
file to be compatible with.
| | 01:07 | I also have the ability to convert my
entire Illustrator file to a one static
| | 01:10 | Flash file or I can convert my layers
to a variety of different things. I can
| | 01:14 | convert my Illustrator layers to Flash
frames to Flash files. Those would be
| | 01:18 | individual Flash files, or each of
them can be converted to symbols. If I am
| | 01:23 | using artboards I can convert each of
those artboards to individual SWF files
| | 01:27 | as well. I can choose to clip the
contents of my Illustrator file to the size
| | 01:30 | of my artboard, just to show you, you
can see that in some of these cases here
| | 01:34 | I actually have some artwork that
extends without the boundary of the artboard.
| | 01:37 | By choosing Clip to Artboard Size, I'm
ensuring that my banner will actually
| | 01:41 | export at the intended size. Let's
take a look at some of the other options
| | 01:44 | here. Preserving Appearance will make
sure that anything that I create inside
| | 01:47 | of Illustrator that is not directly
compatible with Flash; for example, certain
| | 01:51 | types of live text will all get
converted to outlines that it appears correctly
| | 01:55 | in the final SWF file.
| | 01:56 | I can compress the file to make it
smaller. I can include unused symbols in
| | 02:00 | this file and I would probably only
choose this option if I knew that I was
| | 02:03 | then going to import this SWF into
Flash itself to work with. I can export all
| | 02:07 | of my text as outlines. I can choose to
ignore kerning information for text. I
| | 02:12 | can include any metadata in my file, by the way,
that makes the file size grow somewhat.
| | 02:16 | I can also choose to protect it from
import by using a password. In other
| | 02:19 | words, I don't have to worry about
somebody opening up my SWF file inside of
| | 02:22 | Flash and making changes to it. If
I want a specific background color I could
| | 02:25 | also choose that option here.
| | 02:26 | If you thought these weren't enough
options, well, take a look, there is a
| | 02:29 | button here called Advanced. If I have
any placed images inside of my file, I
| | 02:33 | can choose to use a Lossy (JPEG)
version to make a smaller compressed version
| | 02:37 | of that file, which by the way results
in a smaller SWF file overall or I can
| | 02:41 | use Lossless compression.
| | 02:42 | I can also set which resolution I want
those images to be exported in. There
| | 02:46 | are a variety of other settings here as
well which only apply to when you work
| | 02:49 | with animations out of Illustrator,
which will deal within a separate movie.
| | 02:52 | Just like in the Save for Web dialog
box, you've a preview in browser option;
| | 02:56 | here I can choose Web Preview. That
automatically shows exactly what that SWF
| | 02:59 | file is going to look like inside of a
web browser. Let's go back to the dialog
| | 03:03 | back here for a minute though.
| | 03:04 | Admittedly, there is a lot of settings
here when you export these SWF files.
| | 03:07 | Having to go through each of these can
be quite time-consuming. So it's nice to
| | 03:11 | know that any time you could go ahead
and choose Save Preset. In doing so,
| | 03:14 | those presets will appear in this
little popup list. That way if you have
| | 03:17 | certain settings that you always use
when exporting a SWF file, go ahead and
| | 03:21 | save that as a preset and then moving
forward, creating your SWF file is one
| | 03:24 | click instead of many.
| | Collapse this transcript |
|
|
11. Vector-Based Web Graphics: Creating a Flash AnimationConverting layers to frames| 00:00 | Say you're a designer who is really
comfortable creating artwork inside of
| | 00:03 | Illustrator, but maybe not so much
inside of Flash. Now if you want to create
| | 00:06 | an animation, you don't have to
worry about learning how to create that
| | 00:10 | animation using Flash; you can actually
export an interactive animated SWF file
| | 00:14 | directly out of Illustrator.
| | 00:15 | Now the first thing to realize about
animations is that they usually require
| | 00:19 | some timeline in the application,
basically, specifying that objects should
| | 00:23 | move over time. Applications like
Flash or After Effects, for example, have
| | 00:27 | timelines in them that help designers
define movement. But here in Illustrator
| | 00:31 | there is no timeline. But if we take
a closer look at understanding what
| | 00:34 | animation really is, we'll see that we
can actually define movement inside of
| | 00:37 | Illustrator without the use of a timeline.
| | 00:39 | Now what exactly is an animation? Flash,
the application, uses something called
| | 00:44 | frame based animation. Basically, by
having a whole bunch of individual frames
| | 00:48 | and then playing back those frames
very quickly, that appears as if something
| | 00:51 | is moving. As we said, Illustrator
doesn't really have any frames, but
| | 00:55 | Illustrator does have layers. And
what we can do inside of Illustrator is
| | 00:59 | export a SWF file and in that process
automatically convert all of our layers
| | 01:04 | into frames. Doing so creates an animation.
| | 01:07 | So the most important thing to realize
when you're building a Flash animation
| | 01:10 | inside of Illustrator is you want
to make sure that you're paying close
| | 01:13 | attention to how you structure the
layers in your document. Now as you'll see
| | 01:16 | in this example right here I have four
different layers. I have a Background
| | 01:19 | layer, a Surfer layer, the Groundswell
logo is on its own layer and I also have
| | 01:24 | this Sign Up button.
| | 01:25 | Let me turn off all the layers here,
for example. We'll find that that when we
| | 01:29 | play animations out of Illustrator by
default, the bottommost layers play
| | 01:33 | first and then each additional layer
that appears on top of that appears in
| | 01:36 | successive motion.
| | 01:37 | So when I play this animation back,
I'll first see the Background layer appear.
| | 01:41 | Then I'll see the Surfer layer
appear, then the Groundswell and then
| | 01:45 | finally the Sign Up one. So for example,
if I wanted to create some kind of an
| | 01:48 | animated banner, this might be a way to do that.
| | 01:52 | To actually see this working, I'm going
to go over here to choose File and then
| | 01:55 | I'll choose Save for Web and Devices.
Let me resize my window just a little bit
| | 02:00 | so I can see them stack on top of each
other. For the bottom option right here
| | 02:03 | I'm going to choose SWF for my Export format.
| | 02:06 | Now rather than convert my entire
Illustrator file to one overall SWF file,
| | 02:10 | I'm going to choose this option.
Convert my Illustrator layers to Flash frames,
| | 02:14 | which in effect creates an animation.
I can specify that that animation loops,
| | 02:19 | meaning it just repeats
itself over and over again.
| | 02:21 | I'm also going to set my frame rate
right now to 1 second. That means that each
| | 02:25 | frame is going to be on my screen for
one second. I'm doing this purposely
| | 02:28 | because I want to be able to slow
it down so we can see exactly what's
| | 02:30 | happening here.
| | 02:31 | I use the Preview in Browser feature
over here and now let's see exactly how
| | 02:34 | that animation plays. I'll see first
the Background, then the Surfer layer,
| | 02:39 | the Groundswell logo and then
the button that appears there.
| | 02:42 | What's important to note about how
Illustrator is doing this is that right now
| | 02:45 | each of the layers are basically
appearing and then completely disappearing. So
| | 02:49 | if I have some elements, for example,
on the Background, if I want that
| | 02:52 | Background layer to appear in every
single frame of my animation, I would need
| | 02:57 | to actually duplicate that exact
background and copy it to all the four layers in
| | 03:01 | my document.
| | 03:02 | But don't worry about it. We're just
here in the beginning talking about how
| | 03:04 | we're creating an animation inside of
Illustrator. We'll soon find other ways
| | 03:08 | to be more efficient when
we build our animations.
| | 03:10 | Now that we understand how important
layers are inside of Illustrator, we can
| | 03:14 | start to think of other ways to
make our animations even better.
| | Collapse this transcript |
| Working with blends| 00:00 | So we know that in Illustrator, in
order to create what looks like an
| | 00:03 | animation, we need to have frames and
we can basically take our layers and turn
| | 00:07 | those into frames. However, there is
yet another way to create frames for an
| | 00:11 | animation and that's using a feature
inside of Illustrator called Blends.
| | 00:14 | I actually find that somewhat ironic
because blends predate gradients.
| | 00:18 | Back in the day when Illustrator first came
out and you wanted to create a gradation
| | 00:21 | of color, say from yellow to blue,
you would take a yellow and a blue object
| | 00:26 | and blend them into each other.
| | 00:28 | Now when creating interactive content
for the web, we can use that same Blend
| | 00:31 | feature to create an animation. Let's
take a look at how that's done. I'm going
| | 00:35 | to take this shape right over here,
which is right now a symbol, this surfer
| | 00:38 | dude. I'm going to hold down the
Option key or the Alt key on Windows and
| | 00:41 | create a copy and drag it somewhere over here.
| | 00:44 | So now I have two of these particular
symbol instances. I'm going to hold down
| | 00:48 | the Shift key and now I'm going to
click to select both of them. So now I have
| | 00:51 | both instances, the one over here and
the one over here selected. I'm going to
| | 00:55 | go to the Object menu, I'm going to
choose Blend and then I'm going to choose Make.
| | 01:00 | In doing so, Illustrator automatically
adds the individual steps that appear
| | 01:04 | between these two shapes. If you're
using Flash, you may know of a term called
| | 01:09 | a tween. Basically, these are the
steps that appear in between the start and
| | 01:13 | the end point of a blend. In this way,
I can easily establish the points that I
| | 01:17 | need in order to create an
animation inside of Illustrator.
| | 01:20 | Now, once I've created by blend,
there are a couple of things that I can do
| | 01:22 | with it. For example, I have the
ability to go to the Object menu here and I'll
| | 01:27 | choose Blend and I'll choose Blend
Options. Now it's important to realize that
| | 01:31 | a Blend itself is made up of three
separate objects. I have the start object,
| | 01:35 | the end object and then a line that
gets created automatically. That line is
| | 01:39 | what we refer to as the spine of the blend.
| | 01:41 | Basically, Illustrator makes sure that
the artwork follows along the path as it
| | 01:45 | creates the blend. Now right over here
where it says Spacing, it's set right
| | 01:49 | now to Smooth Color. But I can change
that and choose Specified Steps. For
| | 01:53 | example, say I want that
to be ten steps of my blend.
| | 01:56 | Now in the case of working with
Illustrator and creating animations, the more
| | 02:00 | steps that I create, the smoother my
animation will be. But at the same time it
| | 02:03 | could slow down performance and how
that plays back on a computer screen.
| | 02:07 | Since I'm working with symbols here
inside of Illustrator, I really don't have
| | 02:10 | to worry about adding to file size but
just by adding more steps. I'll go ahead
| | 02:14 | and I'll click OK. Now as you can see,
the surfer basically is going to start
| | 02:17 | from this point and then slowly
animate towards this side of the banner.
| | 02:20 | But I want to make it look like there
is some motion in the waves here. Let's
| | 02:23 | make the surfer kind of bobbing up
and down on the waves. So what I can do
| | 02:27 | inside of Illustrator with a blend is
rather than using just a straight line, I
| | 02:30 | could actually substitute that
straight line for a curve line.
| | 02:33 | In fact, in this file over here if
I open up the Surfer layer, I can see that
| | 02:37 | there is a path here which I've turned
off basically. I'm going to turn that on
| | 02:40 | right on and you can see the path
that I created right over here. I use my
| | 02:44 | Regular Selection tool to select that
path and I'll hold down the Shift key to
| | 02:47 | select the blend.
| | 02:49 | With those two objects selected, I can
choose Object > Blend, and then I could
| | 02:54 | choose Replace Spine. In doing so
you can see that right now this surfer
| | 02:58 | follows that path that I just used.
| | 03:01 | At this point, we have created a blend
but we haven't turned them into layers yet.
| | 03:04 | But now that you know how to
create your blends, you understand the basic
| | 03:07 | functionality of creating
animation inside of Illustrator.
| | Collapse this transcript |
| Releasing to layers| 00:00 | So we have created a Blend here inside
of Illustrator, but what we haven't done
| | 00:03 | is converted them to layers, so that
they will actually be animated when we
| | 00:06 | export the file.
| | 00:07 | So how do I get this Blend that has all
these steps in it to turn into a whole
| | 00:10 | bunch of layers? I don't want to use a
manual process. I don't want to have to
| | 00:14 | expand the Blend and then basically
take each of these individual objects,
| | 00:17 | create a whole bunch of layers, and add
them manually to those layers. Instead,
| | 00:21 | I will use a feature inside of
Illustrator called Release to Layers.
| | 00:24 | I will show you what I mean. What I am
going to do is I am actually going to
| | 00:27 | take the Blend and turn them into layers
but without touching any artwork on my page.
| | 00:31 | I am going to come over here to the
Layers panel and in the Surfer layer. I am
| | 00:34 | going to click on the word Blend. By
selecting the Blend in this way, I have
| | 00:38 | basically selected the Blend layers
but I have not touched any artwork on the
| | 00:41 | screen itself. The function called
Release to Layers applies to the Layers
| | 00:44 | panel and not to the artwork itself.
| | 00:46 | So with the Blend highlighted, I am now
going to come to the flyout menu of the
| | 00:50 | Layers panel, I am going to choose
an option called Release to Layers.
| | 00:53 | Now, Release to Layers comes in two
different flavors: Sequence and Build. The
| | 00:58 | Build option basically adds each of
the surfers one after the other. However,
| | 01:02 | Sequence will make it appear as
if he is moving across the screen.
| | 01:04 | So I will choose the Release to
Layers (Sequence) option, and you will see
| | 01:07 | right away that Illustrator created all
these layers for me. It basically broke
| | 01:11 | apart the Blend for me
and put them on to layers.
| | 01:13 | So now I am ready to see the animation.
I go to the File menu. I will choose
| | 01:17 | Save for Web & Devices. I will choose
SWF for File Format, and I will make sure
| | 01:22 | that my layers are being
converted to SWF frames.
| | 01:24 | Let's change my Frame Rate to something
smaller, like 3 Frames per Second. Then
| | 01:27 | I will go ahead and I will choose to
Preview in Browser. Here you can see that
| | 01:31 | that Blend now got turned into an
animation. You will also notice by the way
| | 01:34 | that the surfer is going backwards.
| | 01:36 | Let's take a look at how we can
correct that. I am going to have it come back
| | 01:39 | into Illustrator; let's Cancel out of
Save for Web. I am going to press Undo
| | 01:42 | once to go back right before I applied
the Release to Layers command. I will
| | 01:46 | simply come over here and select the
Blend one more time. I go to the Object
| | 01:49 | menu, and I will choose Blend, and then
I will choose Reverse Front to Back. In
| | 01:54 | this case I have now basically told
the Blend to go in the other direction.
| | 01:57 | Rather than ask to repeat the steps
that I just showed you before, let me show
| | 02:01 | you yet another way that you can
actually convert a Blend into an animation.
| | 02:05 | The beauty of the method that I am
about to show you right now is that it does
| | 02:07 | not require you to expand the Blend
at all. So we are not going to use the
| | 02:10 | Release to Layers feature. In doing so,
I will always have a live Blend that I
| | 02:14 | can work with. So not if, but when my
client request changes, I can easily make
| | 02:18 | those changes.
| | 02:19 | Let me deselect my artwork here, and
rather than choose the Save for Web
| | 02:23 | command, I am going to go to the File
menu, and I will choose Export. From this
| | 02:27 | menu where it says Format, I am going
to choose Flash or SWF, and I will choose
| | 02:31 | to export that and I get this dialog box.
| | 02:34 | Here I can choose to export my file,
not only as a regular static Flash file,
| | 02:38 | but I can convert all of
my layers to SWF frames.
| | 02:41 | I will also Clip my artwork to the
Artboard Size, and I will click on the
| | 02:44 | Advanced button. Because I have
specified that I want to turn my layers into
| | 02:48 | frames, there are many different
options now available specifically for
| | 02:51 | animation that I can adjust.
| | 02:53 | For example, for Frame Rate, I am going
to go ahead and change that to 4 Frames
| | 02:55 | Per Second. I will set the animation
to Loop, and take a look at this option,
| | 03:00 | Animate Blends. That basically tells
Illustrator, hey, whenever you find a
| | 03:03 | Blend, just simply go in and animate it,
and in this regard, I don't need to
| | 03:08 | manually release them to layers. I will
choose to animate this in sequence, and
| | 03:12 | now I will click on the Web
Preview to see what that looks like.
| | 03:14 | So now you can see that I have actually
converted my Blend into an animation.
| | 03:18 | I have also reversed it, so that now
the surfer is going in the correct
| | 03:20 | direction, and I have created all the
elements that I need to create a really
| | 03:24 | cool Flash animation inside of Illustrator.
| | 03:26 | However, there are a few things
still missing. First of all, for example,
| | 03:29 | notice how it rotates between all the
different layers. I really would like
| | 03:32 | that Background layer to appear in
every single frame of my animation.
| | 03:35 | Likewise, I also will need to adjust
the timing of this animation. But don't
| | 03:39 | worry. That will all come in due time.
For now, you have the elements that you
| | 03:42 | need to create the animation that you want.
| | Collapse this transcript |
| Defining static layers| 00:00 | So in this file that I have right
here, which I am trying to turn into an
| | 00:02 | animated banner, it does have a blend.
So I will get the surfer dude that's
| | 00:06 | starts in the left side and then runs
across the screen towards the right.
| | 00:09 | It also goes from 0% Opacity to
100% Opacity in the process.
| | 00:13 | However, each of my layers in my file
are playing in successive order. But that
| | 00:17 | means my background layers plays first
and then it switches to the surfer and
| | 00:21 | during the surfer the background is no longer
visible. Same thing applies to all the other layers.
| | 00:25 | So what I really want to do is I want
to be able to have certain layers that
| | 00:28 | are visible in every single frame of
my animation. In Illustrator you can do
| | 00:32 | that by defining what's called Static
Layers. Now the only way to do this is
| | 00:36 | when you export a file as a SWF, so
you can't do this to Save for Web method.
| | 00:40 | So what I will do is I will start by
going to File menu and I will choose
| | 00:44 | Export. I will choose for my Format
to use the Flash or SWF format. I will
| | 00:49 | choose Export here and the first thing
I will do is I will choose to Export my
| | 00:52 | file as layers which are then
can be converted to Flash frames.
| | 00:56 | I want to Clip to Artboard size and
I will switch now to the Advanced settings
| | 01:01 | and I will make sure that my Frame
Rate, let's low it down a little bit to
| | 01:03 | about 3 frames per second. Again, just
to really see what's happening here I
| | 01:07 | want to loop that animation,
remember I want to animate my Blends also In
| | 01:11 | Sequence, but take a look over here.
I also have a setting here called Export
| | 01:14 | Static Layers.
| | 01:15 | If I click on that option right here,
you will see that I can highlight some of
| | 01:18 | these layers, any layer that I have
highlighted becomes visible in every single
| | 01:23 | frame of my animation and I can have
more than one layer specified as well. For
| | 01:27 | example, say I always want the
Background and also the Groundswell logo to be
| | 01:31 | visible in all the layers. I will hold
on the Command key; I am on a Mac here,
| | 01:34 | but if you are on Windows, hold
down the Ctrl key and then click on the
| | 01:37 | Groundswell layer as well.
| | 01:38 | So with these two layers selected
I will now go ahead and choose Web Preview.
| | 01:42 | And take a look at this the
Groundswell logo as well as the Background are
| | 01:46 | visible in every frame.
| | 01:47 | So now I am getting much closer to
what I really want to see inside of my
| | 01:50 | animation. What I want is I want the
surfer to kind of fly across the screen or
| | 01:53 | I should say surf across the screen
and then I want the logo in the far
| | 01:57 | left-hand corner to appear,
so that people can sign up.
| | 02:00 | So now I have the animation working
just the way that I want and again I can
| | 02:03 | only do this by exporting my files as
SWF files. I cannot do this through the
| | 02:07 | Save for Web dialog, because the SWF
Export is the only location inside of
| | 02:11 | Illustrator where I can access
settings for defining Static Layers.
| | 02:15 | In reality I sure wish it would be easy
enough to simply go to the Layers panel
| | 02:18 | click on a layer and turn on the
setting directing the Layers panel, but at
| | 02:21 | least here you now know how to create
these static layers. At this point though
| | 02:25 | there is really one thing that's
missing and that's timing. I mean the surfer
| | 02:28 | surfs across the screen really nice,
but there is really no time for me to look
| | 02:31 | at that particular logo as it simply
passes by. But now that we have strong
| | 02:35 | grasp on how to define our layers as
Static Layers, we can easily see that we
| | 02:39 | can create really cool animated Flash
content directly out of Illustrator.
| | Collapse this transcript |
| Adjusting timing| 00:00 | One of the most important aspects of
creating a great animation is getting the
| | 00:03 | timing just right. Now, here is a
big challenge inside of Illustrator.
| | 00:07 | We already kind of jumped through hoops
to find a way to find frames inside of
| | 00:11 | Illustrator. We turned our layers
into frames. Great! But there is no such
| | 00:15 | thing as timing inside of Illustrator
at any level whatsoever. So we are kind
| | 00:19 | of up against the wall over here. We
don't know have a Timeline. We are making
| | 00:21 | believe that our layers are frames,
and now we are faced with this timing issue.
| | 00:25 | Well, the tip that I am about to share
with you right now is kind of a hack.
| | 00:28 | It's a way for you to simulate timing
inside of Illustrator. But I will be
| | 00:32 | honest with you upfront that if you
find yourself struggling with trying to get
| | 00:35 | timing to be just right inside of
Illustrator, that might be a sign that it's
| | 00:39 | time for you to start learning how to use Flash.
| | 00:40 | Of course here at lynda.com you
have plenty of resources to learn that
| | 00:44 | application, but for now let's see how
to do, what I would call a poor man's
| | 00:48 | timing implementation inside of Illustrator.
| | 00:51 | So we already know that when I go
ahead and I export my SWF file out of
| | 00:54 | Illustrator, I am going to be
specifying my Background layer and my Groundswell
| | 00:58 | layer, aesthetic layers. Meaning that
those layers will appear on every single
| | 01:01 | frame in the animation.
| | 01:02 | Likewise, the Surfer layer currently
has a Blend inside of it, and that Blend
| | 01:06 | will automatically animate whenever
that layer plays. But what I really like to
| | 01:10 | happen though is that as soon as that
SIGN UP! Button appears, I would like
| | 01:13 | that to kind of pause for a little bit;
obviously to give some time for those
| | 01:16 | people to click on that button and do something.
| | 01:18 | So if you think about it, what
I really what to happen here is I want each of
| | 01:21 | these layers to play; first the
Background layer, then the Surfer layer, then
| | 01:25 | the Groundswell layer; these being
static of course. Because I have my settings
| | 01:29 | sets to about 3 Frames Per Second, each
of those particular layers will stay on
| | 01:33 | screen for that amount of time.
| | 01:35 | So what I really want is, though, that
for this one particular layer to stay on
| | 01:38 | screen longer. Because I can't specify
a timing for one layer, what I can do is
| | 01:43 | fool Illustrator to thinking that
that layer is there longer by actually
| | 01:47 | duplicating that layer.
| | 01:48 | So what I will do is I will take this
entire layer as it is here and drag it
| | 01:51 | directly to this button on the bottom
here, to actually duplicate that layer.
| | 01:55 | Now I have a layer called SIGN UP copy.
I will do the same thing about three
| | 01:58 | or four times.
| | 01:59 | So now if you think about it, even
though these layers will be playing in
| | 02:05 | succession, one right after each other,
since they are all the same, it appears
| | 02:09 | to the user as if it's
just pausing at that point.
| | 02:11 | Now let's go ahead and export the
animation and see what that looks like. I am
| | 02:14 | going to the File menu, we will choose
Export, again we will choose Flash or
| | 02:19 | SWF for our Export format. We will
convert our Illustrator file with our layers
| | 02:25 | into Flash frames. We will Clip to
Artboard Size. Let's jump over to Advanced.
| | 02:29 | We will make sure that our Frame Rate;
let's crank it up to around 5 Frames Per
| | 02:33 | Seconds so that moves just a little
bit faster. We will go ahead and we will
| | 02:35 | choose Looping. We will animate the
Blends in sequence, and we want to Export
| | 02:39 | Static Layers, just the
Background and the Groundswell layer.
| | 02:43 | Now, let's go ahead and turn on our
Preview. So we see that the surfer kinds of
| | 02:46 | flies across the screen and the logo
actually appears for a little bit longer.
| | 02:50 | So now we are actually able to
simulate timing inside of Illustrator, even
| | 02:54 | though we really haven't had any
timing settings at all to work with.
| | 02:58 | Now like I said before, when you are
working inside of Illustrator and you
| | 03:01 | really want to get timing to be just
perfect in a certain area, that may be
| | 03:04 | time for you to start learning Flash,
and based on information we have learned
| | 03:08 | in this title so far, you can easily
take the artwork that you created inside
| | 03:11 | of Illustrator, and then just bring
it in Flash to get all your timing and
| | 03:14 | animation correct.
| | Collapse this transcript |
|
|
12. Vector-Based Web Graphics: Working with Other ApplicationsWorking with Photoshop| 00:00 | I believe that one of the greatest
things about working with Illustrators,
| | 00:03 | specifically in web design is that
no matter how you need to deliver your
| | 00:06 | graphics, you always have other
applications that work well with Illustrator.
| | 00:10 | And what it also means is that if
you create your graphic inside of
| | 00:12 | Illustrator, you are secure and
knowing that if you ever need to deliver your
| | 00:15 | graphics to other developers or other
designers, no matter what application it
| | 00:19 | is they are using, you will still be
able to deliver that stuff to them in
| | 00:21 | a meaningful way.
| | 00:22 | For example, let's take Photoshop.
Photoshop is a very popular web design
| | 00:26 | application. But throughout this title
we have already seen so many different
| | 00:29 | ways that we can take advantage of the
benefits of using Illustrator. Well, if
| | 00:33 | the next step in your workflow is to
take your artwork into Photoshop, here is
| | 00:36 | the best way you have to do it.
| | 00:37 | I already have all my layers created,
I have text in my file, I have slices
| | 00:40 | that I have created. And what I would
like to do is just bring this as it is
| | 00:43 | right into Photoshop. The best way to
do that is to go to the File menu and to
| | 00:47 | choose Export and from the Format
pop- up list choose Photoshop .psd. I will
| | 00:53 | throw this on my desktop over here and
I will just choose to export this. And
| | 00:56 | a dialog box will appear asking me for
options of how I want that psd file to be
| | 01:00 | created. Now since this is for the
web, I can set it out to be Screen
| | 01:03 | resolution and rather than write out a
flat image, I want to write my layers.
| | 01:07 | That will preserve all of my
Illustrator layers and covert them to psd layers.
| | 01:11 | In addition I will also check these two
boxes: Preserve Text Editability, which
| | 01:15 | will make the text editable inside
of Photoshop, and Maximum Editability.
| | 01:19 | This setting will actually preserve things like
slices, transparency, masks, so on and so forth.
| | 01:24 | So I will go ahead and I will click OK.
Sometimes you may see this dialog box
| | 01:28 | appear. It says Some containers in
the Illustrator document have been
| | 01:31 | flattened. That usually happens when
there is a construct or some kind of issue
| | 01:35 | with the stacking inside of
Illustrator that forces certain layers to be
| | 01:38 | combined. I will click OK over here
and now after that Photoshop file gets
| | 01:43 | written, I will switch over to
Photoshop. Let me open up the file here inside
| | 01:46 | of Photoshop and I will choose to take
that psd file that I just wrote out of
| | 01:49 | Illustrator and open it up right here.
| | 01:51 | First if you take a look at Layers
panel, you will see that all of my
| | 01:54 | Illustrator layers came in and that
Live Text also came in as well. I will also
| | 01:58 | go ahead to the View menu and I will
choose Show and then I will turn on
| | 02:01 | Slices. And you will see that the
Slices that are defined and created inside of
| | 02:04 | Illustrator come into Photoshop as
well. So whether you are delivering your
| | 02:08 | content directly from the
Illustrator to the eeb or you are bringing your
| | 02:10 | artwork into Photoshop, exporting
your file as a Photoshop psd file from
| | 02:14 | Illustrator is certainly the way to go.
| | Collapse this transcript |
| Working with Acrobat Pro| 00:00 | Adobe PDF is an extremely popular way
to move documents around, especially so
| | 00:04 | on the web. And even more so, PDF files
can be interactive. Now unfortunately,
| | 00:10 | Illustrator itself does not have the
capability to author interactive PDF files
| | 00:13 | like say InDesign can. However,
it's really easy to add some basic
| | 00:17 | functionality directly inside of Acrobat.
| | 00:19 | To do so, start off inside of
Illustrator with your design, go to the File menu
| | 00:23 | and then choose Save As and for the
File Format choose Adobe PDF. I will put
| | 00:28 | this on my Desktop and I will choose Save.
A dialog box appears asking me how I
| | 00:33 | want to save my particular document.
I could choose this option here called
| | 00:36 | Smallest File Size. In doing so it will
actually make sure that it's set to the
| | 00:40 | screen resolution and that I can easily
email this or post this up on the web
| | 00:44 | for people to easily download.
| | 00:46 | I can also choose a few other
interesting options. I can choose over here, from
| | 00:49 | Compatibility, to choose a later
version of Acrobat. Let's do Acrobat 8 for
| | 00:53 | example. That just means that I will
have more capabilities or things that
| | 00:56 | I can do to that PDF file
once I bring it into Acrobat.
| | 00:58 | I will also choose View PDF after
Saving. That will actually open up Acrobat
| | 01:03 | and open up the file in Acrobat for me
to work with. And I can even choose this
| | 01:06 | option here, Create Acrobat Layers from
Top-Level Layers. I will show you in a
| | 01:10 | moment how important that can be.
| | 01:12 | Now let's choose the Save the PDF file.
I will click OK at this dialog box just
| | 01:15 | letting Illustrator know that I really
don't want to preserve the Illustrator
| | 01:18 | editing capabilities of this file.
And here we are inside of Acrobat.
| | 01:21 | First of all, take a look over here on
the left side. There is a button here
| | 01:24 | that allows me to access all the
layers of my file. Here, I can actually see
| | 01:27 | that I can turn these particular
layers on and off. This could be useful if I
| | 01:30 | want to show my client different
possible design ideas. The layers actually
| | 01:34 | show up and you can interact with
them even in the free Adobe Reader.
| | 01:37 | But for now, let's add some simple
interactivity to this document. For example,
| | 01:41 | maybe when I click on this Groundswell
logo I want it to be able to direct me
| | 01:44 | to a website. I can move over here to
the Tools menu. I will choose Advanced
| | 01:48 | Editing and then choose the Button
tool. Here I will simply click over to
| | 01:52 | create a button. I can also resize that
button as well to make it big enough to
| | 01:55 | cover the entire logo. I will double-
click on the button so that I can change
| | 01:59 | its settings.
| | 02:00 | First of all the Form Field itself,
I would like that to be hidden. I don't
| | 02:03 | want to see the particular button
that's there and for its Appearance,
| | 02:06 | I could set both the Border Color and
the Fill Color to none. Underneath Actions,
| | 02:10 | I will set it to that whenever a person
clicks on it and releases the mouse,
| | 02:14 | it should execute not a menu item, but
it should open up a web link, and I could
| | 02:18 | choose what that web link should be.
| | 02:19 | For example, over here I will type in
an URL to go to lynda.com. I will click
| | 02:24 | OK and I will close and just like that
I was able to add some interactivity to
| | 02:28 | my PDF file.
| | 02:29 | One really cool thing about Acrobat 9.0
is that you can also add multimedia to
| | 02:33 | your documents. For example, where
it says over here Flash tool, I could
| | 02:36 | actually click-and-drag and place Flash
content directly into my PDF document.
| | 02:41 | This allows others to be able to
open up a PDF file and see Flash content
| | 02:44 | playing directly inside of that window.
| | 02:46 | So while you may not think of PDF as
web graphics format, it certainly can be a
| | 02:51 | great medium for you to
deliver contents across the web.
| | Collapse this transcript |
| Working with Dreamweaver| 00:00 | One of the most popular development
tools for working with websites is Adobe
| | 00:03 | Dreamweaver. A favorite of web
developers, Dreamweaver allows you to manage
| | 00:07 | entire websites. Not just one page
or one graphic, but an entire website.
| | 00:12 | However, you may still need
Illustrator to deliver some of those graphics.
| | 00:15 | After all Dreamweaver is a Layout tool.
It's doesn't allow you to create the graphics.
| | 00:19 | Now what just still happens to be
that Photoshop and Dreamweaver enjoy a
| | 00:22 | certain amount of synergy where you
can create a smart object inside of
| | 00:25 | Dreamweaver and then easily update that
graphic back inside of Photoshop when needed.
| | 00:30 | Unfortunately that synergy does not
exist between Dreamweaver and Illustrator.
| | 00:35 | However, you can of course take
anything from Illustrator and bring that into
| | 00:38 | Photoshop as we have discussed
before. And in addition when it comes to
| | 00:41 | actually to laying out a web page you
can actually create an HTML page that has
| | 00:45 | some CSS inside of it to help
you get started with Dreamweaver.
| | 00:48 | So let's explore what that looks like.
In this document, I will actually turn
| | 00:52 | off all these layers here and I will
just turn on the Dimensions and the Slices
| | 00:55 | layer. Now I will go to the File menu
and I will choose Save for Web & Devices.
| | 01:00 | I don't really care what each of these
particular slices are being exported as.
| | 01:03 | Those are just going to be
placeholders for whatever I am going to put into
| | 01:06 | them when I bring them into Dreamweaver.
| | 01:08 | But by defining a grid as designer
I can lay things out inside of Illustrator
| | 01:12 | and then instead of starting from
scratch inside of Dreamweaver, I can have a
| | 01:15 | great starting point based on what
I have already inside of Illustrator. So I
| | 01:18 | will choose Save and I will
throw this on my Desktop here.
| | 01:22 | I want to create both HTML and Images
and I also want to make sure that the
| | 01:27 | slices I choose is All Slices. Finally,
I am going to come here to where it
| | 01:31 | says Settings and I am going to choose
Other. I want to create an XHTML file
| | 01:35 | and I am going to choose over here
where it says Slices and rather than
| | 01:38 | generate a table I am going to Generate CSS.
| | 01:41 | Now I will click OK and then I will
choose Save. Now let's trump over to
| | 01:46 | Dreamweaver. I will choose to open up
that file. I will go to my Desktop here
| | 01:50 | and choose surf_website_final.html
and open up right up here inside of
| | 01:55 | Dreamweaver. You can see that all those
areas came in, but more importantly if
| | 01:59 | I go to Code view right now, you will
see that because I exported this as CSS,
| | 02:03 | all the areas got defined as divs.
| | 02:05 | So as you can see I created a modern
CSS-based layout using Illustrator and
| | 02:10 | then quickly brought it into
Dreamweaver to get started with my web layout.
| | Collapse this transcript |
| Working with Flash Catalyst| 00:00 | So throughout the entire title, we've
seen that Adobe really has been striving
| | 00:03 | to make the process, at least the
way that designers and developers can
| | 00:07 | communicate with each other that much
better. We know we can take art from
| | 00:10 | Illustrator and bring it into Flash.
We know that we can also take artwork from
| | 00:14 | Illustrator bring it into
Photoshop and Dreamweaver.
| | 00:17 | What I am about to show you though is
taking you to the next level. Recently,
| | 00:20 | Adobe announced the brand new
application. Something called the Adobe Flash
| | 00:24 | Catalyst. At a very basic level, Flash
Catalyst is a graphical user interface
| | 00:29 | built on top of the Flex framework.
| | 00:31 | Flash Catalyst allows you to create
your artwork in any of the applications
| | 00:34 | that you already know how to use.
For example, Illustrator or Photoshop, or
| | 00:37 | even Fireworks. But then to bring
them directly into an application that
| | 00:40 | convert them to what Adobe refers
to as Rich Internet Applications;
| | 00:44 | it's the next generation of web design.
| | 00:46 | To aid in this process, Adobe actually
created a new interchange file format.
| | 00:50 | Something which is called FXG and you
will notice that if you go to the File
| | 00:53 | menu, you will see that if we choose
Save As, one of the file formats that you
| | 00:57 | can choose is something called FXG,
which stands for Flash XML Graphic.
| | 01:02 | By exporting your file in this
particular format, you can bring your artwork
| | 01:05 | into Flex Builder or into Flash
Catalyst, but really introducing just the new
| | 01:09 | file interchange format doesn't
really change much. I mean after all, a
| | 01:13 | designer still needs to learn to all
these technical details and all these
| | 01:15 | different file formats.
| | 01:17 | So instead, let's take a look at how
Flash Catalyst and Illustrator work
| | 01:20 | together to remove this divide. I will
click Cancel here. And we are just going
| | 01:24 | to simply take this artwork selected
inside of Illustrator and I will copy it.
| | 01:28 | Now I will switch over to Adobe Flash
Catalyst. I want to create a new Flash
| | 01:32 | Catalyst project. I am just going to
use the regular 800x600 setting right
| | 01:36 | here, and I will click OK.
| | 01:38 | Now I will simply choose Edit, and
then I will choose Paste and that graphic
| | 01:42 | from Illustrator comes right here on
my artboard. Now you may be thinking,
| | 01:46 | what's so special about that? You can
copy and paste from Illustrator into
| | 01:49 | Flash, you can copy and paste from
Illustrator into Fireworks, even into
| | 01:52 | Photoshop, as Smart Objects.
| | 01:54 | Well, here is the key thing. When
I pasted this into Flash Catalyst, what
| | 01:58 | really happened is that behind the
scenes Flash Catalyst turned that artwork
| | 02:02 | into Flex code. In fact, take a look.
When I go over here to where it says
| | 02:05 | Design. And I am going to switch to
the Code view. Much like in Dreamweaver,
| | 02:09 | you can design HTML pages in a visual
way but behind the scenes all the code
| | 02:13 | gets written for you.
| | 02:15 | Well from a graphic standpoint, what
I have done is I have actually drawn
| | 02:18 | something inside of Illustrator,
and simply by copying and pasting into
| | 02:21 | Catalyst, Catalyst now converted it
into Flex code for me. That means the
| | 02:25 | developers can go right in and start
making changes to my graphic or add into
| | 02:29 | interactivity. Even better yet,
I can add my own interactivity.
| | 02:32 | Let me choose to go back to my Design
view. I will actually click on that piece
| | 02:36 | of artwork right here and a little pop-
up shows over here which is referred to
| | 02:39 | as the HUD or the head up display.
I can convert that artwork to a component,
| | 02:44 | for example, a button. With one
click of a button, I have just created a
| | 02:47 | button. I can double-click on the
button over here and I can actually specify
| | 02:51 | Up, Over, Down, and Disabled states.
| | 02:53 | Let me double-click over here for a
second here and go back to my piece of
| | 02:56 | artwork. Here is the key thing about
what's happening here. Even though this
| | 02:59 | piece artwork right here has been
converted to Flex code or MXML, I can go over
| | 03:04 | here to the Modify menu and choose Edit
in Illustrator CS4. This actually takes
| | 03:09 | this piece of artwork and brings it
back into illustrator. So if I want to make
| | 03:13 | changes to the artwork, even though
it's really been converted to code, I have
| | 03:16 | the ability to work in my own familiar
design environment, Adobe Illustrator.
| | 03:19 | So let me zoom in on this for a
second here, and instead of using this blue
| | 03:23 | color, let's change this to something
else. I will go to the Color panel here,
| | 03:27 | maybe we will choose let's say a
yellow color. No, let's choose the bright
| | 03:31 | green instead. So now I have edited it,
I'll save that file. I am going to save it.
| | 03:34 | Notice it automatically saves it
in that interchange format called FXG.
| | 03:38 | I click OK.
| | 03:39 | I close the file, return back to Flash
Catalyst, choose Accept the Changes and
| | 03:44 | automatically, the button that
I have created now gets updated.
| | 03:47 | Remember it's still coded right now.
It already is a button, but I have already
| | 03:51 | managed to edit that back inside of
Illustrator. This is just a peek at some of
| | 03:54 | the things that you can now start to
do between Illustrator and Catalyst in
| | 03:58 | this way, but it's certainly exciting
to see how things are going to be down
| | 04:01 | the line in the future.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks for taking the time to learn
all about using Illustrator to create web
| | 00:04 | graphics. Whether you are creating
entire websites, whether you are creating
| | 00:07 | just individual web graphics here and
there, whether you are a dedicated web
| | 00:10 | designer or just a general graphic
designer that needs to create things once in
| | 00:13 | a while, you should give
yourself a pat on the back.
| | 00:15 | I mean after all, you now have all the
knowledge that you need to create these
| | 00:19 | wonderful web graphics using
Illustrator. More importantly, you see exactly
| | 00:22 | where Illustrator fits
within the entire web workflow.
| | 00:25 | Now that you have the knowledge that
you need in order to get your web graphics
| | 00:28 | done inside of illustrator, I will
leave you with this last bit of advice.
| | 00:32 | Have fun! I mean, after all, when you're
having fun while you are learning, I am
| | 00:35 | sure that you will find you'll be at
your creative best. Thanks again and
| | 00:39 | I will see you online.
| | Collapse this transcript |
|
|
