IntroductionWelcome| 00:04 | Hi there! My name is Justin Seeley, and I'm
a staff author here at lynda.com.
| | 00:07 | I want to welcome you to this
course on Illustrator for Web Design.
| | 00:10 | We are going to start off by covering some
core concepts about web design, including
| | 00:14 | how to set up documents for various
web and mobile application designs.
| | 00:18 | Once we've laid the groundwork, we'll take a
deeper dive into things like color management,
| | 00:21 | working with layers, creating wireframes and
mockups, and even developing user interface elements.
| | 00:27 | Once we've created our web graphics, I'll
walk you step by step through optimizing and
| | 00:31 | exporting your images to the web, so that
you can get the highest-quality files with
| | 00:35 | the smallest file size possible.
| | 00:37 | Hopefully, by the end of this course, you'll
have a firm grasp on the web design process
| | 00:41 | and how you can use Adobe Illustrator to
create graphics for any screen-based design.
| | 00:44 | Well, we've got a lot to cover, so if you
are ready, let's begin our look at Illustrator
| | 00:48 | for Web Design.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the lynda.com
online training library, or if you are watching
| | 00:04 | this course on a DVD, you have access
to the exercise files for this course.
| | 00:08 | Once you've downloaded them to your computer,
you can access each chapter from its individual
| | 00:12 | folder inside of the Exercise
Files folder like you see here.
| | 00:16 | If you are not a Premium member, that's okay.
| | 00:18 | You should still be able to follow
along using your own files with no problem.
| | Collapse this transcript |
|
|
1. Core ConceptsDesigning for screens| 00:00 | The web is an ever-changing landscape.
| | 00:02 | As designers, we now have to be cognizant
of all of the new screen sizes and devices
| | 00:06 | that are constantly flooding the market.
| | 00:09 | The days of designing a basic desktop version of a
web site are over, and as designers, we must adapt.
| | 00:15 | In my opinion, the web isn't necessarily a
target by itself anymore; instead, it's becoming
| | 00:21 | more of an overarching category that now
encompasses many targets that we must design for.
| | 00:26 | So what's the one thing that all
of these targets have in common?
| | 00:30 | Screens. Whether it's a desktop, a laptop,
an iPad, or a playbook, we have to know and
| | 00:36 | understand the screens on which our designs
are being viewed, so that we can provide a
| | 00:40 | better user experience for the end user.
| | 00:43 | If you're making the jump from traditional
or print design into the world of web, don't
| | 00:47 | be scared. Sure, the web might be something new, but
it's also full of new and exciting possibilities.
| | 00:54 | We're able to do things on the web that we
never even thought about doing in a print design.
| | 00:58 | That's what makes the web
so amazing. Also, in print,
| | 01:01 | there are rules--on the web, not so much.
| | 01:04 | Sure, there are guidelines and best practices,
but for the most part it's the wild, wild west
| | 01:09 | out here for us designers.
| | 01:11 | As they say, with great power comes great
responsibility, and in web design, it's no different.
| | 01:16 | Throughout this course, I'm going to reference
various ways that you can enhance your designs
| | 01:20 | to be more screen-friendly, and I'll also be
discussing things like high-resolution displays--
| | 01:25 | or Retina graphics--touch
interfaces, and mobile layouts.
| | 01:29 | Remember, the game is changing and as
designers, we have to keep up so we aren't left behind.
| | 01:35 | So I wanted to take a moment to discuss
with you the premise of designing for screens,
| | 01:39 | because as I said, we're no longer just
designing for the web; we're designing for individual
| | 01:44 | ecosystems and experiences that our users
are going to take going forward using many
| | 01:49 | different devices, and if you're not up to
speed with everything that's going on, you're
| | 01:53 | going to leave both yourself
and your users out in the cold.
| | Collapse this transcript |
| Decoding screen size and resolution| 00:00 | Before we start learning how to create web
graphics, we need to first understand the difference
| | 00:04 | between something called
pixel dimension and resolution.
| | 00:07 | For many years people I have referred to web
graphics as being 72 PPI, or Pixels Per Inch,
| | 00:12 | and we as designers have just come to accept
that number as the standard by which we create
| | 00:16 | our screen graphics.
| | 00:17 | However, in reality monitors today far exceed
the limits of 72 pixels per inch, and devices
| | 00:22 | like Apple's iPhone and iPad even have
something called a Retina display, which displays in
| | 00:27 | excess of 300 pixels per inch.
| | 00:29 | In today's world, we don't need to concern
ourselves with the PPI settings of our graphics
| | 00:33 | anymore; instead, we should focus on the actual
pixel dimensions of the graphics we're creating.
| | 00:39 | By this I mean the actual physical space,
width, and height values that our graphics
| | 00:43 | take up onscreen.
| | 00:45 | For example, take a look at my screen here.
| | 00:47 | I have a standard banner ad which is 468
pixels by 60 pixels tall, and it's sitting
| | 00:53 | right now on a square that's 1024 x 768.
| | 00:56 | So imagine this is a monitor at 1024 x 768.
Notice how much space the banner ad takes up.
| | 01:02 | It's a pretty significant amount of screen
real estate if you are looking at it on a
| | 01:05 | monitor this small.
| | 01:06 | However, if I turn this layer off and
activate the 1440 x 900 layer, you'll see that the
| | 01:11 | same banner ad at the same size looks
significantly smaller on the 1440 x 900.
| | 01:18 | But this banner ad is actually taking up the
same amount of physical space that it was before;
| | 01:23 | it's just the different resolution and
different size makes it appear smaller.
| | 01:26 | The same holds true for
this 1600 x 1200 resolution.
| | 01:29 | The banner ad looks really, really tiny, but
it's taking up the same amount of physical space.
| | 01:36 | Even if an object is displayed on different
monitors with different resolutions, it will
| | 01:40 | always occupy the same
amount of physical space.
| | 01:43 | But it may look larger or smaller depending
on the resolution of the monitor on which
| | 01:46 | it's being displayed.
| | 01:48 | Take a look at this
real-world example I have here.
| | 01:50 | I have two identical laptop computers here.
The one on the left is set to 1024 x 768,
| | 01:56 | and the one on the right
has been set to 1680 x 1050.
| | 02:00 | Both of these laptops are
displaying the lynda.com homepage;
| | 02:03 | however, with the laptop on the right set to
the higher resolution, the graphics appear
| | 02:07 | much smaller, but I am also able to see a
lot more content on the homepage than I am
| | 02:12 | on the monitor on the left.
| | 02:14 | The monitor on the left, the graphics appear
larger, but I am not able to see as much content.
| | 02:19 | So as you can see, the resolution of
these graphics is pretty much irrelevant.
| | 02:22 | The one thing that really does matter is how
much physical space the objects take up on-
| | 02:26 | screen, and how legible it
will be at any given resolution.
| | 02:30 | The choice ultimately is yours, so you need
to test your designs extensively on multiple
| | 02:35 | monitors and multiple resolutions
to get the optimal user experience.
| | Collapse this transcript |
| Exploring the Illustrator to HTML workflow| 00:00 | If you are new to the world of web design
or simply new to using Adobe Illustrator as
| | 00:04 | a web design tool, I wanted to take a moment
to explain to you the process through which
| | 00:08 | your designs will go through
before they make it out onto the web.
| | 00:11 | It's important to understand this process
because it will help you streamline your workflow
| | 00:14 | and also allow you to pinpoint areas that you
might need for improvement, or it may simply
| | 00:18 | get your brain thinking in more of a
workflow-oriented way, which is very important.
| | 00:22 | It should be noted that this is just my
personal workflow and there is no right or wrong way
| | 00:26 | to do any of this.
| | 00:27 | Everyone is different, but this is
something that works well for me.
| | 00:31 | All web projects start as a idea.
Whether it's something that you sketched on a napkin
| | 00:35 | or a quick drawing you created on your iPad,
ideas are the building blocks for what we
| | 00:39 | create in our little web world.
| | 00:41 | Finding a way to get these ideas out of
your head and into a workable form is the key.
| | 00:44 | I use tablet apps like Adobe Ideas to quickly
sketch things that pop into my head, and then
| | 00:49 | I export those to use them as a starting point
once I am inside of an app like Illustrator.
| | 00:53 | No matter how you do it, it's best to get the
ideas out and into some visual form so that A,
| | 00:58 | you don't lose them, and B, you can share them
with others and refine them into something awesome.
| | 01:03 | Once you have your idea down,
it's time to create a wireframe.
| | 01:06 | Wireframes are the skeleton on which we
build our mockups, and in the end, full web sites.
| | 01:11 | These wireframes can contain object
placeholders and guidelines that will serve as a blueprint
| | 01:15 | of our entire design.
| | 01:16 | In my opinion, this is the most important step of
the design process, because it's the foundation
| | 01:21 | of the project itself.
| | 01:22 | And we all know what happens to
houses with shaky foundations, right?
| | 01:25 | In the end, they all fall apart.
| | 01:27 | After you have your foundation in place,
it's time to put on a coat of paint.
| | 01:31 | This is the part of the process
where your creativity can shine through.
| | 01:34 | You'll need to aggregate content like logos,
colors, fonts, et cetera, but most of that
| | 01:39 | can be obtained from a client
or created from your own mind.
| | 01:42 | Either way, having a large group of assets from
which to build your design is absolutely essential.
| | 01:46 | Your mockup should look as close as possible to
the finished product, minus any crazy animation
| | 01:51 | or media that might be required of course.
| | 01:53 | This will also serve as a roadmap for the
development stage, which will either be handled
| | 01:57 | by a web developer or, if you are a hybrid
like me, you can be your own developer.
| | 02:01 | In any case your file should be as
"developer-friendly" as possible, so at the end of the process
| | 02:07 | goes even smoother. Don't worry.
| | 02:09 | I'll give you several tips throughout this course on
how to speak geek and create these types of files.
| | 02:14 | When the mockup is complete you
might consider slicing up your design.
| | 02:18 | We cover this in depth in a later chapter,
| | 02:20 | but just know that slicing in the
traditional sense refers to breaking your design into
| | 02:24 | multiple pieces or images which can be
placed back together later using HTML and CSS.
| | 02:29 | In a modern workflow, slicing is mainly used
to define different content areas which can
| | 02:33 | then be rendered out by a
developer using coding techniques.
| | 02:36 | As I said, we'll discuss this
at length a little bit later on.
| | 02:39 | Once your mockup is all sliced and diced,
it's time to hand it off to the development stage.
| | 02:43 | If you are a front-end person--meaning you
don't touch the code side of things--your
| | 02:47 | job now is to work with the developer to ensure
your creative vision is realized by the end product.
| | 02:52 | Remember, a developer is your friend.
| | 02:54 | They are the ones that take the
wooden puppet and turn it into a real boy,
| | 02:58 | so learning how to communicate and work with
them is an essential part of the design process.
| | 03:03 | If you are your own developer, congrats;
you've achieved a level of mastery that very few
| | 03:07 | can lay claim to.
| | 03:09 | The final step of this
workflow is to deliver the goods.
| | 03:12 | This could mean handing the finished product
off to the client or simply uploading it to
| | 03:15 | your server for your own needs.
| | 03:17 | In any case, there is no better feeling than
when a project comes to fruition and the final
| | 03:21 | pixel has been pushed.
| | 03:22 | If you make it this far, congratulations;
you've just completed your first web design project.
| | 03:27 | As I said, this is merely my personal workflow.
| | 03:30 | Take from it what you will, but hopefully
I gave you some insight on how the design
| | 03:33 | process works in a web-based scenario, and
also gave you a little bit of clarity if you
| | 03:37 | are wondering how your designs go from
something like Adobe Illustrator to the World Wide Web.
| | Collapse this transcript |
| Setting up Illustrator for web work| 00:00 | As you continue to evolve your workflow
inside of Adobe Illustrator, you may find that you
| | 00:04 | need to get a hold of some tools a little
bit more quickly, or that you might find that
| | 00:08 | the panel arrangements just don't suit
your eye for your particular workflow.
| | 00:12 | In this movie, I am going to be exploring how to
set up Illustrator for a web workflow environment.
| | 00:17 | The first thing I am going to do is create
a new document by going to File > New.
| | 00:20 | And I'll just accept the defaults by hitting Enter
or Return. It does not matter what size document
| | 00:24 | I am working on; I just want to be able to
see all of the active panels and tools here
| | 00:28 | inside of the Illustrator environment.
| | 00:30 | Once I have this open, I am then going to
come up here to the top-right corner and I
| | 00:33 | am going to find the workspace jump menu.
| | 00:36 | And as is the case with all of the Creative
Suite applications, you have various workspaces
| | 00:40 | that you are able to jump to from this menu.
| | 00:42 | You can also go to the Window menu and choose
Workspace and find one of the workspaces there.
| | 00:47 | Now anytime I open up an application, whether
it be Photoshop or Illustrator, for the first
| | 00:51 | time, I always go through to see if they've
added any workspaces so that I can then take
| | 00:56 | those and use them as jumping-off
points for my own personal workflow.
| | 01:00 | In this case Illustrator
does ship with a Web workspace.
| | 01:03 | And if I click on the Web workspace, it's going
to create a lot of different things on my screen.
| | 01:08 | For instance, you are going to notice that
I get a lot of different icons here docked
| | 01:11 | on the left-hand side.
| | 01:12 | I also get access to my
symbols and things like that.
| | 01:16 | These are all things that Illustrator
believes correspond to a web design workflow.
| | 01:21 | So let's take a look at some of these and
customize it a little bit to suit our needs.
| | 01:24 | First up here, we have the Stroke, the Gradient,
and of course the Transparency panel. These
| | 01:29 | are all things that I need
quick access to at all times.
| | 01:32 | I don't want to find them over here in the
tabs hidden, or have to go to the Window menu,
| | 01:36 | so I am very comfortable with those
being right there, very easily accessible.
| | 01:40 | Directly beneath that you are going to see
some type options like Character and Paragraph,
| | 01:44 | also the OpenType, which is also
a great thing to have a hold of.
| | 01:48 | So these three, those can
stay right where they are.
| | 01:50 | We have the Links panel.
| | 01:52 | If you're going to be working with other
documents like Photoshop documents, JPEGs, TIFFs, PNGs,
| | 01:57 | whatever they might be from other applications,
the Links panel is going to be an essential
| | 02:01 | part of your workflow, so you
might want to leave that up.
| | 02:03 | If you are going to be creating exclusively
inside of Illustrator, or you are not going
| | 02:06 | to be using any raster graphic from Photoshop,
for instance, you can actually get rid of that.
| | 02:11 | If you want to get rid of this, all you have
to do is just undock it like this and then
| | 02:15 | click the little X like
that, and it will go away.
| | 02:17 | I will click it away for now, just so
we can have something to customize.
| | 02:21 | Right here we have the Attributes. If you
open that up, that's going to be things like
| | 02:24 | Overprint Fill and Overprint Stroke, things like
that. It's also got some things for image mapping.
| | 02:28 | Now in this case I am not going to be using
this very much at all, so I am also going
| | 02:32 | to drag that out and just
delete it, just like that.
| | 02:35 | I also have variables.
| | 02:36 | If you are going to be working with any sort
of data-driven graphics inside of Illustrator,
| | 02:41 | you can use the Variables section. I am not
going to be using those, so again I'll drag
| | 02:44 | those out and close them up.
| | 02:46 | Then we have the Actions panel.
| | 02:47 | If you don't know what actions are, basically
they are a way of recording repetitive steps
| | 02:51 | that you find yourself doing inside of Illustrator, and
then playing them back on different objects and documents.
| | 02:56 | It's a great way to streamline your workflows.
| | 02:59 | Now I've got some other things up here that I
want to rearrange, for instance the Transform
| | 03:03 | panel. I am not going to be using that a whole
lot, so I am actually going to drag that over
| | 03:07 | to the right, and I am going
to make the Info panel active.
| | 03:10 | I use the Info panel constantly to let me
know exactly where I am in my document for
| | 03:14 | X and Y coordinates.
| | 03:15 | It's also great for resizing objects.
| | 03:17 | You get the Width and
Height properties right here.
| | 03:19 | Great to have that prominently displayed.
| | 03:21 | Swatches, I use swatches all the time, so I
like to leave those right where they are.
| | 03:25 | The color, same thing.
| | 03:27 | Symbols, I use symbols quite a bit in my web
design workflow, and you might want to check
| | 03:31 | out the chapter that I have on symbols as
well a little bit later on, because that's
| | 03:35 | going to cover a lot of different things on
how to utilize symbols in your web designs.
| | 03:40 | Another great panel to have prominently
displayed in your workspace is the Appearance panel.
| | 03:44 | The Appearance panel is like a book that
refers to every single piece of your document, and
| | 03:50 | if you can learn to read the Appearance panel
and use it to its fullest potential, you won't
| | 03:54 | even have to use a lot of the
panels that I have already pointed out.
| | 03:57 | The Appearance panel has
some amazing capabilities.
| | 04:00 | If you want to know more about the
Appearance panel, I would suggest going and watching a
| | 04:04 | course on lynda.com called
Illustrator: Rethinking the Essentials by Mordy Golding.
| | 04:09 | Mordy goes through the Appearance panel, how
you can use that to analyze documents and
| | 04:13 | also edit documents all from this one panel.
| | 04:15 | It's an amazingly efficient way for working
in Illustrator, and I highly recommend it.
| | 04:20 | The Appearance panel here I think
needs to be a little bit more prominent,
| | 04:22 | so I am actually going to resize it a
little bit to give it a little bit more space.
| | 04:26 | Now, I am also going to be working a lot with
responsive designs and multiple screen size
| | 04:32 | designs, like mobile sites,
applications, things like that,
| | 04:35 | so I am going to need
access to Artboards panel.
| | 04:37 | The Artboards panel is actually
collapsed by default right here.
| | 04:40 | So what I am going to do is I am going to
drag that out on its own, and I just did that
| | 04:43 | by clicking on the tab and dragging it out.
And then I am going to take Artboards, I am
| | 04:46 | going to drag it right here, and I am going to drop
it right beneath the Actions button right there.
| | 04:50 | So I have always got my Artboards
easily accessible from right there.
| | 04:54 | The Layers panel, I use layers a lot, so I am
actually going to resize that a little bit as well.
| | 04:58 | You'll notice that the
Appearance panel has collapsed on me.
| | 05:00 | If yours collapses, just double-click the
word Appearance and it should open back up, and
| | 05:04 | you can expand it back up like that.
| | 05:06 | If you want to, you can also collapse the
Symbols. So just double-click on Symbols; that will
| | 05:11 | collapse that and give it a little bit more space.
And then clicking Layers will expand that out.
| | 05:15 | So now I have Appearance and Layers.
| | 05:17 | Symbols are still active, but
it's just collapsed at the moment.
| | 05:20 | If you wanted to, you can dock those right
here along the left-hand side. As a matter
| | 05:23 | of fact, I think I'll do that.
| | 05:24 | Let's go ahead and drag Symbols
down here, Brushes right beneath that.
| | 05:28 | I use brushes occasionally, not much.
And then Graphic Styles, I do use graphic styles
| | 05:32 | quite a bit, so there we go.
| | 05:34 | And so now I have my big panels that I need to
see all of the time, which are Info, Appearance,
| | 05:39 | and Layers, all right here,
all prominently displayed.
| | 05:42 | I also have easy access to
Color and the Color Guide.
| | 05:45 | I have access to Transform. And then all the
things that I use a lot, but I don't necessarily
| | 05:49 | need open all the time are displayed
right here in this little Side Dock.
| | 05:53 | Now I have modified the original Web
workspace here inside of Illustrator, so what I need
| | 05:58 | to do is go up to the Workspace drop
menu, go down and choose New Workspace.
| | 06:02 | I am going to call this Justin's Web Workspace.
| | 06:06 | You can call it whatever
you want and then hit OK.
| | 06:08 | And so now I am working in Justin's Web
Workspace. Anytime I need to get back to that, I can
| | 06:12 | go back up to the jump menu and choose that.
| | 06:15 | If I make a mistake or rearrange something,
I can always go back and reset it. I can do
| | 06:19 | anything I need just like that.
| | 06:21 | If I need to jump into
another workspace, no problem.
| | 06:23 | Let's say I'm working on a brochure and I
need to go to Printing and Proofing.
| | 06:26 | I can hop right into that, and then instantly
jump back into Justin's Web Workspace right
| | 06:31 | there at the top, and it switches me right back.
| | 06:34 | Now right now you maybe thinking that you
simply don't know enough about your own personal
| | 06:38 | workflow to know what you
need and what you don't.
| | 06:40 | And that's okay. I just wanted to give you
an idea of how to rearrange and reorganize
| | 06:44 | everything inside of Illustrator so as you
continue to collect information about the
| | 06:48 | tools and options that you use most often,
you'll be able to then put those in play and
| | 06:52 | create your own workspace
whenever you feel comfortable.
| | Collapse this transcript |
| Creating a new document for web| 00:00 | Before we can actually get started creating
our web design here inside of Adobe Illustrator,
| | 00:04 | we have to first create a new document,
| | 00:06 | and in this movie I am going to be exploring how to
create a new document for the web using Illustrator.
| | 00:11 | Let's go up to the File menu and choose New,
or you can hit Command+N or Ctrl+N on your keyboard.
| | 00:15 | When you first open up the New Document
dialog box, you are going to be able to name your
| | 00:18 | project. In this case let's say that I am doing
a blog design, so I'll just call it Blog Design.
| | 00:24 | And directly underneath that, you are going
to have access to Profiles, and by default
| | 00:27 | it probably is going to show you
something like the Print profile.
| | 00:29 | The Print profile is great if you are
creating a business card or a poster or even some
| | 00:33 | letterhead, but for a web design, not so much.
| | 00:36 | So we need to drop that down and then take a look
at the other options that we have available to us.
| | 00:41 | We do have a Web option, so if I select that,
you are going to notice that it also gives
| | 00:46 | me some size options down here at the bottom.
| | 00:48 | The size options, although they've gotten
better over the course of the last few versions of
| | 00:52 | Illustrator, they're still not quite
hitting the optimal targets, in my opinion.
| | 00:56 | Let's take a look at those.
| | 00:57 | We have 640 x 480, 800 x 600,
960 x 560, 1024 x 768, and 1280 x 800.
| | 01:05 | The only acceptable sizes in here are
1024 x 768 and 1280 x 800 in my opinion, because
| | 01:11 | screen sizes just simply aren't this small
anymore unless you are talking about other
| | 01:15 | devices like a tablet
device or something like that.
| | 01:17 | I am going to discuss mobile document
development in an another movie, but in this case let's
| | 01:22 | say that I wanted a blog design.
| | 01:23 | Well, I don't really see anything that fits that
for me here, so I am going to have to create my own.
| | 01:28 | So I am going to first select a width.
And this is going to be in pixels, so you have
| | 01:32 | to make sure your units are in pixels.
| | 01:34 | And so I am going to do 1280 for the Width.
| | 01:37 | I want it to be 1280 pixels wide. And then
for the height a blog design is actually pretty
| | 01:41 | big depending on how much stuff
you are trying to put in there.
| | 01:44 | For this particular one, I want a header. I want
a big content area to show several blog posts.
| | 01:48 | I want to be able to show
widgets, and a big footer.
| | 01:50 | So, I usually go about 2000 pixels for the
length, so 1280 x 2000 is a pretty big document.
| | 01:57 | I want to make sure that this is a portrait
orientation, so the little man standing up
| | 02:01 | on a straight piece of paper. You could also
go horizontal if you want it to, but in this
| | 02:05 | case I want it to be vertical.
| | 02:07 | You do not have to worry about Bleed
because we're on the web; there is no bleed.
| | 02:10 | You can also see here that we
are set to a Color mode of RGB.
| | 02:13 | Pixels Per Inch is set to 72.
| | 02:15 | Now in Illustrator, we are working in a resolution-
independent environment, but when we go to save these
| | 02:21 | out or we have effects that need to be
rasterized upon output, this is the resolution at which
| | 02:25 | those are going to be rendered.
For now 72 pixels per inch is okay.
| | 02:29 | Now it also is going to align objects to the
Pixel Grid, meaning that everything is going
| | 02:33 | to snap to a Pixel Grid, making it easier to
make "Pixel Perfect designs," and so I absolutely
| | 02:40 | want to leave that on.
| | 02:41 | Now here is the tricky
part about Adobe Illustrator:
| | 02:44 | I cannot come up here and choose
to save a new document profile.
| | 02:48 | There is no way to do that.
| | 02:49 | So what I have to do is save this out as
a template file and then go from there.
| | 02:54 | So, what I am going to do is simply hit OK,
and that will create a new blank document
| | 02:59 | for me called Blog Design. And now I want
to save this out as a template, so I'll go
| | 03:02 | to File and I will choose Save as Template,
and that will take me to my Templates directory.
| | 03:08 | And I am actually going to create a new
folder inside of my Templates directory and I am
| | 03:11 | going to call this Web Design and hit Create.
| | 03:15 | Once I do that, I'll change this
just to be blog and I'll hit Save.
| | 03:19 | So now that's saved as blog.ait or Abode
Illustrator Template. And so I'll close this because I
| | 03:24 | don't need to save it.
| | 03:26 | And I'll go to the File menu and choose New.
| | 03:28 | Now anytime I want to utilize that template
I just go right here to the Templates, find
| | 03:33 | Web Design and select blog.ait. Then I would
hit New and my document is created. Pretty easy.
| | 03:40 | Let's close this up.
| | 03:41 | Let's take a look at some other common sizes
of things we might be asked to create inside
| | 03:44 | of Illustrator.
That's a blog or a web site template.
| | 03:48 | Let's go to File > New and let's
explore something like a banner ad.
| | 03:51 | This is something that web designers are
constantly asked to do, design a web banner for something,
| | 03:56 | an ad that's going to be displayed somewhere,
something that they are going to turn over
| | 03:58 | to a Flash developer. Any number of things
can be asked of a "web designer" these days,
| | 04:03 | so we need to take a look at
some common sizes for those.
| | 04:06 | So in this case I am going to change the Width
to something like 728 pixels, and I will change
| | 04:12 | the height to 90 pixels.
| | 04:15 | And it automatically adjusts to a
landscape display, and that's fine.
| | 04:19 | And so now I am going to hit OK.
| | 04:20 | There you see my banner ad that I've got.
And I'll go to File > Save as Template.
| | 04:26 | I am going to save it in my Templates
directory inside of the Web Design folder, and I am
| | 04:30 | going to call this Leaderboard, so
that's the type of graphic I just created.
| | 04:36 | It's saved, and I'll close this.
| | 04:37 | I am going to create a few more. And I am just
hitting Command+N or Ctrl+N each time to get
| | 04:41 | into the new document dialog box, this time
changing the Width to 468 and the Height to 60. Hit OK.
| | 04:50 | And if I view this at 100% by hitting Command+1 or
Ctrl+1 on my keyboard, you will see just how small it is.
| | 04:57 | And I will go to File > Save as Template,
put it in my Web Design folder, and we'll call
| | 05:02 | this just a Banner.
| | 05:05 | Now I'll go ahead and close
this, and let's do one more.
| | 05:07 | File > New, change the Width here to
300 pixels and the Height to 250 pixels.
| | 05:15 | There we go. Hit OK.
| | 05:17 | Command+1 or Ctrl+1 so you can see the full
size of that, and then I'll go to File > Save
| | 05:22 | as Template. And I am going
to call this Medium Rectangle.
| | 05:27 | Save it in my Web Design folder and hit Save.
| | 05:30 | So now in just a few minutes I've created
several different web design templates that
| | 05:34 | I can then easily jump into anytime I need it.
| | 05:37 | So let's say the client comes to me and he
says "Okay, I need a Leaderboard graphic for
| | 05:42 | my next web site that I am getting ready to launch
and I need this at a specific size, 728 x 90 pixels."
| | 05:48 | Well, that's easy. Just go to File > New and
I can choose Templates\Web Design, and I'll
| | 05:54 | find the Leaderboard and hit New, and there we
go; it instantly jumps me into the Leaderboard.
| | 05:58 | Or I could do a blog design, or I could do
the banner ad or any number of those templates
| | 06:02 | that I've set up.
| | 06:03 | So does it take some time
to set up these templates?
| | 06:06 | Yes, it does, but it is going to save you a
ton of time in the long run because you'll
| | 06:10 | have all of these built up and saved so that you
can easily jump into any project at any given time.
| | 06:16 | So the next time you go to create a new
document for the web, keep in mind the dimensions and
| | 06:20 | things that you are setting up, and then save
that out as a template so you can easily get
| | 06:23 | back to it anytime you need it.
| | Collapse this transcript |
| Creating a new document for mobile| 00:00 | As the mobile device ecosystem continues to
expand, we have to keep up with that and we
| | 00:05 | have to be able to create documents that
correspond to the various screen sizes that we're going
| | 00:09 | to encounter with all of these devices.
| | 00:11 | So in this movie, we are going to be exploring
how to create a document for a mobile device.
| | 00:15 | I'm going to start by going up to the File
menu and choosing New, or you can hit Command+N
| | 00:19 | or Ctrl+N on your keyboard.
| | 00:21 | And let's go up here to the Profile section.
And new to Illustrator CS6 is this Devices
| | 00:26 | section, and when I do that, it's going to
dropdown and give me some sizes down here
| | 00:32 | that correspond to different devices, things
like iPad, iPhone, Xoom, Fire/Nook, and Galaxy S.
| | 00:38 | Now when I switch to the iPad, you're going to
notice that it changes everything to be 1024 x 768.
| | 00:44 | If I switch to the iPhone,
it gives me 320 x 480.
| | 00:48 | I'm going to discuss why this is
a little tricky here in a moment.
| | 00:52 | And we have the Motorola
Xoom, which is 800 x 1232.
| | 00:56 | We have a Fire or Nook tablet,
which is 600 pixels wide by 1024 tall.
| | 01:01 | And then finally, we have a Galaxy S,
which is an Android device which is 480 x 800.
| | 01:06 | Now most of these sizes do cover the full
gamut of devices that you're going to see,
| | 01:11 | but there are occasionally going to be some
oddball sizes that you're going to have to
| | 01:15 | create on your own.
| | 01:17 | For instance, when I look at the iPhone document,
it tells me that the Width is 320 pixels and
| | 01:21 | the Height is 480 pixels.
| | 01:23 | That may have been true for the first-
generation iPhone, but the newest iPhones--the iPhone
| | 01:27 | 4 and 4S--both utilize a 640 x 960 dimension.
| | 01:32 | So I have to be able to account for that.
| | 01:34 | Unfortunately, I can't do that from right here.
| | 01:36 | So what I need to do is actually
create a new document based on that size.
| | 01:40 | So I'll go with 640 pixels wide by 960
pixels tall. Everything else remains the same.
| | 01:49 | Now in this case, it's telling me
not to align it to the Pixel Grid.
| | 01:52 | I'm going to drop that down, and I am going to
align the new objects to the Pixel Grid. Why?
| | 01:57 | Because I want everything to be
"pixel perfect" as I'm designing it.
| | 02:00 | I don't want any weird anti-
aliasing or anything like that.
| | 02:03 | I want everything to snap into place
and be right aligned with the Pixel Grid.
| | 02:07 | So I'm going to close that back
up and now I'm going to hit OK.
| | 02:11 | So now I have a 640 x 960 document
corresponding to the iPhone 4 and 4S.
| | 02:16 | And I'm going to go to the File
menu and choose Save as Template,
| | 02:20 | because I cannot save a new document profile so
I have to go ahead and save a template to use.
| | 02:24 | It will jump me into my Templates directory.
I'm going to call this iPhone4, and I'll hit
| | 02:31 | New Folder, and I'm going to create a folder
called Mobile and hit Create. iPhone4, I'll hit Save.
| | 02:39 | Now I have that. I can close it, and in any time I need to get back
to that I can go to the File menu and choose New.
| | 02:45 | And then if I need that template, I can go
to Templates, select Mobile, and grab iPhone4.
| | 02:52 | So anytime a client comes to you and has to
have a graphic or a design for a specific
| | 02:57 | screen size for a mobile device that isn't
listed inside of the default sizes, like iPad,
| | 03:03 | iPhone, et cetera, you can just come in, set
the size to the pixel dimensions that you
| | 03:07 | need, and then save it out as a template to
easily get back to that device at any given time.
| | 03:12 | In any case, the devices that are listed here
inside of Illustrator do give you decent break
| | 03:17 | points and cover a wide enough gamut of
device sizes that you should be okay for now.
| | 03:23 | But in the event that the client comes to
you with something oddball at least now you
| | 03:26 | know how to do it.
| | 03:27 | And then once you are finished, hit OK,
and you're ready to continue working.
| | Collapse this transcript |
| Using artboards for responsive layouts| 00:00 | No matter if you are a seasoned web
professional or simply someone who is dipping their toe
| | 00:05 | for the first time into the web design pool,
you are going to run across this buzzword
| | 00:09 | called responsive web design.
| | 00:12 | It is everywhere today.
| | 00:14 | Everybody wants their site to be responsive.
| | 00:16 | So in this movie I'm going to be exploring
how to create a responsive design template,
| | 00:20 | but I want to first address exactly what
responsive design, is in case you are not aware.
| | 00:25 | Traditionally when we think about designing
web sites for mobile and tablet and desktop
| | 00:30 | experiences, designers have created, in
fact, three different versions of the site.
| | 00:35 | There was a mobile site, a tablet site, and
a desktop site, or maybe just a mobile site
| | 00:39 | and a desktop site.
| | 00:41 | Responsive design looks to throw away the
traditional model of creating individual sites
| | 00:46 | for individual targets and rather makes this
one singular site adaptive so that no matter
| | 00:52 | what different screen size it's being
displayed on, it always looks to be properly designed
| | 00:57 | for that particular medium.
| | 00:59 | A responsive design is the single web site
that changes its appearance and rearranges
| | 01:05 | itself and displays different content based
upon the screen size in which it is being
| | 01:09 | viewed, and it does so via
something called CSS media queries.
| | 01:14 | And if you're interested in CSS media queries
or responsive web design, my suggestion would
| | 01:18 | be to take a look at James
Williamson's CSS courses on lynda.com.
| | 01:22 | James covers a lot of different ways to utilize
CSS for media queries and also some responsive
| | 01:28 | web design in his courses,
and they're fantastic.
| | 01:31 | Now, how do we set up a responsive
design template in Illustrator?
| | 01:35 | Well, Illustrator is actually a great
candidate for setting up a responsive design, unlike
| | 01:40 | other programs like Photoshop.
| | 01:41 | In Photoshop, I would actually set up three
separate documents or use a funky grid system
| | 01:46 | that maybe didn't make a whole lot of sense,
| | 01:48 | but in Illustrator I can actually create one
single document that contains multiple artboards
| | 01:53 | that mimic a responsive layout.
| | 01:55 | So let's take a look at how we can do that.
| | 01:57 | The first thing I'm going to do is
I'm going to create a new document.
| | 02:00 | I'll do that by going to File > New.
| | 02:03 | When I go to File > New, I'm going to
drop down from the Profile section and I'm going to
| | 02:07 | choose Devices. And once I select Devices,
I am going to go down and I can pick iPhone,
| | 02:12 | because the iPhone, the traditional iPhone,
is 320 x 480. That is a traditional mobile-
| | 02:17 | phone-size screen.
| | 02:19 | And so that's going to be basis of my
overall design, because in most cases people need
| | 02:24 | to think in terms of mobile first.
| | 02:26 | Mobile first indicates that you are only going
to be focusing on the most important content
| | 02:30 | and displaying that prominently to the user,
and then as you start to go bigger, like to
| | 02:35 | tablet size or desktop size, start to add
in a little bit more of the extra content,
| | 02:40 | the eye candy if you will. So mobile
first is what we need to focus on.
| | 02:44 | So I'm going to start with an iPhone
screen, and I'm simply going to hit OK.
| | 02:48 | I don't need to create any extra artboards or
anything like that right off the bat because
| | 02:51 | I've got my basic design all ready to go.
| | 02:54 | Now I'm going to hit Command+1 or
Ctrl+1 so I can see the exact size of this.
| | 02:58 | That's just going to back this up to 100%.
| | 03:00 | And then I'm going to temporarily hold down my
Spacebar key and just kind of pan this over like so.
| | 03:07 | So there is my first document right there.
| | 03:09 | I'm then going to go over here to my Artboards,
and if you can't see your Artboards, you can
| | 03:13 | go to the Window menu and bring up Artboards.
| | 03:16 | And if you are using the Essentials workspace,
your Artboards are going to be down next to
| | 03:20 | the Layers workspace.
| | 03:21 | I am actually using my custom
workspace that I created in a previous movie.
| | 03:25 | And so in the Artboards panel, I'm just going
to click on the New Artboard icon right here.
| | 03:30 | That's going to add another
artboard right here next to it.
| | 03:32 | So that's going to be my tablet layout.
| | 03:34 | And so once I have that done, I'm going to
collapse the Artboard panel for a moment,
| | 03:38 | and I'm going to come over here and
I'm going to grab the Artboard tool.
| | 03:41 | And with the Artboard tool selected,
what I'm going to do is actually change the size
| | 03:46 | of this artboard.
| | 03:47 | And I can do so simply by clicking
and dragging this out a little bit.
| | 03:51 | So I'm going to click and drag this to the
right, and I'm going to keep dragging it out
| | 03:55 | until I get to 768 pixels. And you see that
little heads-up display that I'm getting right there.
| | 04:00 | It tells me exactly how wide I'm going.
| | 04:03 | And when I release, it does so just like that.
You could have also come up here to the control
| | 04:06 | panel and just typed in 768.
| | 04:09 | Now for the Height, I'm going to change
this to be 1024 and hit Enter or Return.
| | 04:16 | And then I'll switch to my Selection
tool, and I'm going to zoom out quite a bit.
| | 04:20 | There you can see I've got
my mobile and now my tablet.
| | 04:24 | Now if you wanted these to be aligned at
the bottom, you could certainly do that.
| | 04:27 | I can grab my Artboard tool again, click on
this, and then just shift it up till it meets.
| | 04:33 | Something like that.
| | 04:34 | Now I've got this Artboard created, so I'm
going to open the Artboard panel again, and
| | 04:38 | I'm going to click on the new Artboard
icon one more time to add another artboard.
| | 04:43 | Depending on the artboard I have selected,
it automatically duplicates that size and setting.
| | 04:47 | So I'm good to go there.
| | 04:48 | So now I'm going to move over to the right,
and I'm going to drag this out just a little
| | 04:54 | bit, so I'm going to drag
this out to about 1200.
| | 04:57 | And if I wanted to keep this in line with my
blog design template that I usually create,
| | 05:02 | I'm going to stretch this out to about 1280.
| | 05:04 | If you can't get it right
on the money, that's okay.
| | 05:06 | You can just come up here to the control panel
and type in "1280" and then hit Enter or Return.
| | 05:12 | And then for the height on this one, I'm just
going to zoom out a few times and I'm going
| | 05:16 | to stretch this up until it gets to about
2000 pixels tall, once it hits 2000. There we go.
| | 05:24 | And if it's got a little decimal point on it,
you can just take that off, just like so.
| | 05:28 | There we go.
| | 05:29 | And so now I have three artboard--a mobile,
a tablet, and a desktop--all ready to be used
| | 05:35 | in this responsive layout.
| | 05:37 | Now if they're too close to one another, which
these seem to be for me, you can always take
| | 05:40 | the Artboard tool and move them around.
| | 05:42 | So I'll take this artboard and I'll hold
down Shift and just kind of nudge it over with
| | 05:45 | my arrow keys to create some space.
| | 05:49 | Same thing with this one. Select it and then
I'll just hold down the Shift key and hold down
| | 05:52 | the arrow key until I get some
space that I like. There we go.
| | 05:57 | And if you wanted to, you could also rename
the artboards by going into the Artboards
| | 06:01 | panel. And so Artboard 3, that's this Artboard here,
I can double-click and I can call this Desktop.
| | 06:07 | Artboard 2, that's the one in the middle.
| | 06:08 | If I double-click, on that
I can call this Tablet.
| | 06:11 | And then Artboard 1, double-click on that,
and I'll call this Mobile. Here we go.
| | 06:16 | So I've got all three artboards ready to go.
Anytime I double-click on the artboard, it
| | 06:20 | automatically switches over to zoom in on it.
| | 06:22 | It allows me to do that.
| | 06:24 | I can also rearrange them any way I want.
| | 06:26 | Now I've got my responsive design all set up.
So my site is going to look this way on
| | 06:31 | a mobile device, this way on a tablet,
and this way on a desktop, theoretically.
| | 06:35 | And so I want to save this so I can
instantly have this set up anytime I need it.
| | 06:39 | I'm going to go to the File
menu and choose Save as Template.
| | 06:42 | I'm going to call this responsive and
I'll save it into my Web Design folder.
| | 06:47 | You can just save it any folder you want if
you don't have the Web Design folder created.
| | 06:51 | And so now anytime I need a responsive design
with these three breakpoints or screen sizes,
| | 06:57 | all I have to do is go to the File menu,
choose New, Templates\web design\responsive, and hit
| | 07:04 | New, and there we go.
| | 07:05 | I get three artboards, each one representing
the different screen size target that I'm
| | 07:09 | trying to hit. And then in my Artboards I have
Desktop, Tablet and Mobile, each and every time.
| | 07:14 | It should be noted that you should take some
time to understand responsive web design as
| | 07:19 | well as the different break points that you
might want to design for, and by break points
| | 07:23 | I mean screen sizes that
you're trying to target.
| | 07:26 | You may target different screen
sizes than I have here, and that's okay.
| | 07:29 | The beauty of responsive web
design is there are no real set rules.
| | 07:33 | It's all up to you.
| | 07:34 | So you make your web site respond to any screen
size that you want and set up your own templates
| | 07:39 | and make your workflow that much easier.
| | Collapse this transcript |
| Creating email newsletter documents| 00:00 | In addition to the traditional sizes of
documents like web sites and mobile applications that
| | 00:05 | we're designing inside of Illustrator, we also
need to take into account email newsletters,
| | 00:09 | because as a designer inevitably you are
going to be asked at some point, can you design
| | 00:13 | an email newsletter?
| | 00:15 | And your response better be yes or
you're probably going to lose that client.
| | 00:19 | So in this movie I'm going to be exploring
some best practices for setting up a new email
| | 00:23 | newsletter document.
| | 00:25 | So in order to do that, I'm going to hit
Command+N or Ctrl+N on my keyboard to bring up the New
| | 00:28 | Document dialog box, and once I have that
up, I'm going to make sure that I'm working
| | 00:32 | on the Web profile.
| | 00:34 | That's very important because we want everything to
be web-design-oriented inside of this dialog box.
| | 00:39 | The size, none of these sizes that are listed
here correspond to a traditional email newsletter
| | 00:45 | template, so let's just get that out of the way.
The width of your email newsletter template,
| | 00:49 | my recommendation is that you don't go over
600 pixels in Width, because many people don't
| | 00:55 | actually open their email; instead they
view their email in some sort of Preview panel
| | 00:59 | or in a smaller window docked to
the side of their mail application.
| | 01:03 | And on average, the smallest Preview panel
for that size is around 600 pixels. So if
| | 01:08 | we always design around that specific number,
we ensure that most of our viewers will be
| | 01:14 | able to see the full width and content of
our designs. Unless you don't want people
| | 01:18 | to view everything that's in your newsletter,
which I'm sure you do, then I would stick
| | 01:22 | to around 600 pixels, so let's go
ahead and mark that down, 600 pixels wide.
| | 01:26 | The height, this can be as high
or as low as you want it to be.
| | 01:31 | It depends on the content of the newsletter.
How much stuff are you actually putting in here?
| | 01:34 | I usually use a round number like 1000 pixels,
and if I don't need it, I can always crop
| | 01:39 | the artboard down to any size I need after
the fact, but 1000 pixels gives me plenty
| | 01:44 | of room to work with, and it's a great
round number to start off with on a template.
| | 01:48 | So I'm doing 600 pixels wide, 1000 pixels
tall, and hit OK. And once I do that, you're
| | 01:52 | going to see, this is my email newsletter, and
if I zoom into 100% with Command+1 or Ctrl+1,
| | 01:57 | this is the full size that I'm working with.
| | 02:00 | Now I do want to add in some guides here to
make it a little bit easier to determine like
| | 02:04 | my margins and things like that.
| | 02:06 | So in order to that, what I'm going
to do is grab the Rectangle tool.
| | 02:09 | This is sort of an unorthodox way of doing
this, but I'm just going to show you my little
| | 02:12 | trick for getting faster.
| | 02:14 | What I'm going to do is I'm going to click one
time with the Rectangle tool out on the canvas.
| | 02:19 | Now remember, my Width is going to be 600
pixels wide for the entire document, and my
| | 02:23 | Height is at 1000 pixels.
| | 02:25 | Let's say that I wanted a 20-pixel margin
all the way around the outside of that, so
| | 02:30 | I need 20 pixels on the left, 20 pixels on the right,
20 pixels on the top, and 20 pixels on the bottom.
| | 02:35 | In order to do that, I just need to subtract
40 pixels from the overall Width and the overall Height.
| | 02:40 | So the Width is 600; subtract 40, we get 560,
The Height is 1000; subtract 40, we get 960.
| | 02:50 | Once I do that, hit OK, then I'm going to
come up here to the Alignment options and
| | 02:55 | I'm going to choose Align to Artboard, and I'll
just center it horizontally and vertically.
| | 03:02 | Now if you are unable to see that up there,
you probably don't have your selection tools selected.
| | 03:06 | I did that by hitting the letter V on my
keyboard and then going up and hitting those buttons.
| | 03:10 | You could also just click on the Arrow
and make sure you have that selected, okay?
| | 03:14 | So now I have my guideline
shape out on the artboard.
| | 03:17 | I want to use some guides, so I'm going to
use Command+R or Ctrl+R to bring up my rulers
| | 03:21 | and then I'll just drag out guides that snap
to these dimensions. I'll just drag that
| | 03:26 | down and snap there, drag this out, and I'll
scroll down to the bottom, and snap it there.
| | 03:35 | Now I've got my guides.
| | 03:36 | I can click on my shape and delete it, and
my guides are all in place, giving me an even
| | 03:40 | 20-pixel margin all the way around the outside,
Isn't that a lot easier than doing math and
| | 03:46 | trying to drag out guides to a
precise pixel location? I think so.
| | 03:50 | Once we get that done, we'll go to the
File menu and we'll choose Save as Template.
| | 03:54 | In my Templates section, I'm going
to go down to my web design folder.
| | 03:57 | You can just create a new folder if you don't
have a web design folder yet, and I'm going
| | 04:01 | to choose to call this newsletter and hit Save.
| | 04:05 | So now anytime I need to create an email newsletter,
I have a template already set up with guides and everything.
| | 04:11 | So if I go to the File menu, choose New from
Template, go to Web Design, and select newsletter,
| | 04:18 | I get this template that I just created with my
guides and everything ready to rock and roll.
| | 04:23 | So the next time you're asked to create an
email newsletter template, follow the simple
| | 04:26 | guides that I've given you here, create your
new document, and you'll be ready to rock and roll.
| | Collapse this transcript |
| Working with Pixel Preview and anti-aliasing| 00:00 | One of the things that makes it so great
about working inside of Adobe Illustrator is the
| | 00:05 | fact that it's a vector drawing program and
all of the artwork that we create inside of
| | 00:08 | Illustrator always looks
crisp, clean, and sharp.
| | 00:12 | However, when we are delivering graphics to
the web or to different screens, our artwork
| | 00:17 | is not always going to look crisp, clean,
and sharp, especially when they zoom in and
| | 00:21 | zoom out on it using a
tablet or a mobile phone device.
| | 00:24 | So we have to sort of get around that and
find a way for Illustrator to give us accurate
| | 00:28 | previews of everything that's
happening inside of our document.
| | 00:31 | So in order to do that, we have to work with
something called anti-aliasing, and we also
| | 00:36 | have to work with
something called Pixel Preview.
| | 00:38 | The first thing I'm going to
talk about here is anti-aliasing.
| | 00:41 | Anti-aliasing refers to something that happens
on computer screens where two areas of color
| | 00:47 | are blurred together in
order to simulate smooth edges.
| | 00:51 | If we didn't have anti-aliasing, everything
on your computer screen would look really
| | 00:55 | jagged and just not good.
| | 00:57 | So in Illustrator this is automatically
applied to artwork that you have on your artboard.
| | 01:01 | If I zoom in on this particular piece of artwork,
you'll see that no matter how far I zoom in,
| | 01:06 | every line and every curve
looks really clean and sharp.
| | 01:10 | However, if I zoom in quite a bit on this
and especially if I kind of hover over it,
| | 01:15 | you can start to see this little jagged outlines
that go around the outside of it. That's because
| | 01:19 | I'm actually seeing the physical
pixels that are on my monitor.
| | 01:22 | But Illustrator does a great job of hiding
those from me so that it appears that my artwork
| | 01:27 | is always clean and crisp.
| | 01:29 | So if I zoom back out, to like 200%,
you can see here that everything looks fine.
| | 01:34 | However, what happens when
we turn anti-aliasing off?
| | 01:36 | Let's take a look at that.
| | 01:38 | I'll press Command+K or Ctrl+K on my
keyboard to bring up the preferences dialog box.
| | 01:42 | And I'm simply going to
uncheck Anti-aliased Artwork.
| | 01:45 | And when I do that, you are going to notice
that my artwork looks really chunky, and nothing
| | 01:49 | looks smooth. You can barely read the text.
The logo looks awful inside the robot. His
| | 01:54 | eyes look like they were kind of gouged
out, as opposed to being seamlessly cut.
| | 01:58 | So anti-aliasing really does wonders for our artwork,
in terms of how it appears on the computer screen.
| | 02:05 | But it doesn't do wonders for us in terms
of what it's going to look like when it goes
| | 02:08 | to the web, because even though anti-aliasing
does happen on the web, we don't necessarily
| | 02:13 | need to see it at all
times inside of Illustrator.
| | 02:16 | So let's turn this back on, and let's see
how we can work with our artwork in a more
| | 02:23 | realistic fashion.
| | 02:24 | I'm going to zoom out to 100% by
hitting Command+1 or Ctrl+1 on my keyboard.
| | 02:28 | So I've got this logo here, and I want to see what
this would look like if it was actually on the web.
| | 02:32 | In order to do that, I'm going to
utilize something called Pixel Preview.
| | 02:36 | I'm going to go up to the View
menu and choose Pixel Preview.
| | 02:38 | And when I do that, you're not going to see
a big change right off the bat, because of
| | 02:42 | the fact that I'm zoomed to 100% and at
100% my artwork looks just as it should.
| | 02:47 | But what happens if I start to zoom
in on my artwork? Check this out.
| | 02:51 | I'll do Command+Plus or Ctrl+Plus.
| | 02:53 | You can see it gets a little bit jagged.
Command+Plus or Ctrl+Plus, a little bit worse; Command+Plus or
| | 02:58 | Ctrl+Plus, a little bit worse; and that's
because I have it actually representing what this
| | 03:03 | would look like in pixels on a screen.
| | 03:06 | So if I were zoomed in to 400% on this
graphic online or using a tablet or mobile device,
| | 03:11 | this is what it would like, because of
the fact that it's made up of pixels.
| | 03:16 | So any time you want to get an accurate
preview of what your graphics are going to look like
| | 03:20 | on the web, simply go up
and turn on Pixel Preview.
| | 03:24 | Now one thing that you're going to notice
about your graphics, especially when you're
| | 03:27 | working with anti-aliasing, are these little
things that I call ghosts. And if I zoom in
| | 03:32 | a little bit more on this document,
you'll see exactly what I'm talking about.
| | 03:35 | Now in traditional design, when we're
working inside of Illustrator, anytime I create a
| | 03:40 | square, like this, I would
see a nice sharp, crisp line.
| | 03:44 | And I do see that right here on the edge of
his face and up here at the top of his head,
| | 03:48 | but I do not see that over here or
over here or on the ear on the left.
| | 03:53 | I see these little ghosted
areas of gray. Now why is that?
| | 03:57 | That is because my artwork is actually
misaligned from this Pixel Grid, and so the anti-aliasing
| | 04:05 | is kicking in to sort of make it blend in
with the other objects around it to sort of
| | 04:10 | smooth it out because it doesn't know what
to do since it's not aligned to that grid.
| | 04:14 | So if I zoom out a little bit, you can
actually see more of the ghosts around it.
| | 04:18 | So how do I get rid of that?
| | 04:19 | Well, I have to make sure that my artwork
is aligned to this Pixel Grid in order to
| | 04:23 | snap it back into place.
| | 04:25 | And that's why when you're creating a new
document in the New Document dialog box, File >
| | 04:29 | New, you always want to make sure
that Align to Pixel Grid is set to Yes.
| | 04:34 | If this is set to No, you want to go to the
Advanced setting and you want to go ahead
| | 04:37 | and check this box right there.
| | 04:40 | So if this is not checked,
you're kind of in trouble.
| | 04:43 | So I'll hit Cancel, and now how do I fix artwork
that's already inside of Illustrator like this?
| | 04:47 | Someone sends me this, and they open it up, and
it looks like this when zoom in. How do I fix it?
| | 04:52 | Pretty simple actually.
| | 04:53 | I'm going to hit Command+A or Ctrl+A on my
keyboard to select it all, and you can actually
| | 04:58 | see when I select it that the path sort
of goes in between this little pixel.
| | 05:03 | The grid that you're seeing is the individual pixels,
and so this one falls right in between these pixels,
| | 05:08 | this one is misaligned in
this pixel, and so forth.
| | 05:11 | And so what I need to do is snap that into
the grid so that this creates a nice crisp,
| | 05:16 | clean graphic to then go on the web.
| | 05:19 | So what I'm going to do is I'm
going to bring up the Transform panel.
| | 05:22 | And if you don't have the Transform panel out
in your workspace, you can go to the Window
| | 05:25 | menu and find Transform in the list,
and it should look something like this.
| | 05:31 | I'll drag this out so you can
actually see what I'm doing.
| | 05:34 | With the Transform panel open, you simply
want to have the artwork selected--and in this
| | 05:38 | case I have everything selected--
and I'm going to just click this box.
| | 05:42 | And watch what happens right here
on the edge of the robot's face.
| | 05:47 | It snaps automatically to be nice, clean,
and crisp, with no ghosting whatsoever.
| | 05:53 | And so if I undo that, there is the ghost,
and if I redo it, the ghosts go away.
| | 05:59 | So now my artwork is
completely aligned to the Pixel Grid.
| | 06:02 | It's going to be "pixel perfect,"
once I'm ready to send it out.
| | 06:05 | And anytime I need an accurate preview of what
that's going to look like, I turn on Pixel Preview.
| | 06:10 | So hopefully by now you have a better
understanding of what anti-aliasing is, what it does, and
| | 06:14 | how it helps you, but also how to turn it
off and work with your graphics in their true
| | 06:18 | form by checking out Pixel Preview.
| | 06:20 | Just remember to always go back and turn it
off so that when you're zooming in and out
| | 06:23 | of your artwork, you don't create those
nasty headaches from trying to see those blurry graphics.
| | Collapse this transcript |
|
|
2. Working with ColorAdjusting color settings| 00:00 | Although it's not the most fun topic in the
world to discuss, we need to take a moment
| | 00:04 | and talk about the color management
settings inside of Adobe Illustrator.
| | 00:08 | We already know that when designing for the
web we need to use the RGB color space, but
| | 00:12 | that doesn't necessarily refer to the color
management setting or profile that we should
| | 00:15 | be using for our graphics.
| | 00:17 | In any case, you need to be aware of the fact
that even if you take the time to meticulously
| | 00:21 | tweak your color management settings and
really dial in your artwork colors, the chances
| | 00:26 | are they are still going to look
different on every screen that accesses them.
| | 00:30 | This is the thorn that is forever
wedged in the web designer's side.
| | 00:34 | Different devices have different gamma settings and
different ranges of color which they can display.
| | 00:38 | This makes color management for
the web basically a crapshoot.
| | 00:41 | However, we can put some things in place to
help alleviate this pain and ensure that our
| | 00:45 | graphics look as close to our
original design as humanly possible.
| | 00:48 | As I said before, I'm not really talking about
just RGB versus CMYK; in fact, there are several
| | 00:54 | variants of each one.
| | 00:55 | For instance, we have variants like Adobe
RGB, which has a very wide gamut of color,
| | 00:59 | and we also have something called
sRGB, which is somewhat limited.
| | 01:03 | sRGB is the gamut that is most widely
used when it comes to color on the web,
| | 01:07 | so by working in the sRGB space, you can take
comfort in the fact that your graphics will
| | 01:11 | appear as close as they can to your original
when they're viewed on someone else's screen,
| | 01:15 | providing of course that the device and/or
browser that they're using actually uses some
| | 01:19 | sort of color management policy.
| | 01:21 | In some browsers and devices, that's simply not the
case, and there's nothing really we can do about it.
| | 01:26 | Illustrator automatically converts web
graphics to the sRGB space upon output, but
| | 01:31 | it's a good idea to work in that space
throughout your design process so as not to cause any
| | 01:34 | color shifts down the road.
| | 01:37 | Another school of thought states that we
shouldn't color manage our graphics at all, but simply
| | 01:40 | rely on our monitor preview with no color
management settings whatsoever, so that our
| | 01:44 | graphics appear identical
when we view them on the web.
| | 01:47 | In the end, it's up to you, but the sRGB
space is probably the safest way to go.
| | 01:52 | Let's take a look at both of these and how we would
change the color settings in Illustrator to match.
| | 01:56 | So let's say that I wanted to stick with
the sRGB space because I'm playing it safe.
| | 02:00 | In order to change the color settings
inside of Illustrator to match sRGB, you need to
| | 02:03 | go to the Edit menu and
go down to Color Settings.
| | 02:07 | Once you go into Color Settings, you'll have
the ability to choose a settings profile from
| | 02:11 | the top, and once you choose this, you can
actually pick one that's called North America
| | 02:15 | Web/Internet.
| | 02:17 | When you choose that, it's going to say RGB
and it's going to be set to sRGB and then
| | 02:21 | a few letters and numbers after that.
| | 02:24 | When you hover over that, it's going to
tell you at the bottom in the description that
| | 02:27 | this reflects the
characteristics of the average PC monitor.
| | 02:31 | This is the default color space for many
scanners, low-end printers, and applications.
| | 02:35 | It's recommended for web work, but not
pre-press work because of its limited color gamut.
| | 02:40 | So, sRGB, probably the safest way to go when it
comes to color, but not necessarily a guarantee
| | 02:45 | that you'll get the same results out on the web as
you do when you're looking at it inside of Illustrator.
| | 02:51 | Also, when you choose the North American web
and Internet setting, it's going to automatically
| | 02:54 | change your color management policy so that
when you open up a document inside of Illustrator
| | 02:59 | it will convert that
document to the working space.
| | 03:02 | So if something is using Adobe RGB or not color
managed at all, when you open it up and you
| | 03:07 | have your working space set to this with this
color management policy in place, Illustrator
| | 03:11 | will automatically convert
that document over to sRGB.
| | 03:15 | This is where you're going to see some
really big color shifts if you're not careful.
| | 03:19 | So if you open up a document that somebody
sends you that they created using Adobe RGB,
| | 03:23 | and it opens up inside using sRGB, and
you've got it set to convert over without asking,
| | 03:28 | then you're going to have a big problem,
because you're not going to be seeing the true color
| | 03:31 | that they gave you.
| | 03:32 | That's why profile mismatches come in handy.
| | 03:35 | So if the profile doesn't match the profile
of the working space, do I get asked when
| | 03:40 | I'm opening a file. Do I get
asked when I'm pasting a file?
| | 03:44 | I would leave these checked so that anytime
you encounter a file that is not of the same
| | 03:48 | working space, you can tell it exactly what
to do: either convert it to the profile, or
| | 03:53 | keep the old profile or discard
all color information, et cetera.
| | 03:56 | That way, you ensure that you can view the colors
as they were intended to be viewed from the start.
| | 04:02 | You'll also see this Missing
Profiles link down here at the bottom.
| | 04:05 | This refers to files that don't have any
color management policies on them at all. What do
| | 04:08 | you do with them?
| | 04:09 | Well, in this case, it would just convert
it to the working space without asking, and
| | 04:13 | that's probably the best
things to do for that as well.
| | 04:15 | Anytime you get confused in this dialog box,
just hover over something and it will explain
| | 04:18 | it to you down there in
that description box. Okay.
| | 04:21 | So in order to use the sRGB
space, this is all we need to do.
| | 04:24 | So now if I hit OK, I'm now
working in the sRGB space.
| | 04:28 | Anytime I open something that is not in the sRGB
space, it will automatically pop up and say, hey!
| | 04:33 | This doesn't match your current
profile. What would you like to do?
| | 04:36 | And then you can work from there.
| | 04:37 | Now, I said there was another school
of thought where we don't color manage.
| | 04:41 | So if you don't want to do color management,
you don't want to play it safe with sRGB because
| | 04:45 | of the limited color gamut or whatever,
| | 04:47 | you can actually set it up this way.
| | 04:49 | So go into Edit > Color Settings, and underneath
Settings, choose Monitor Color. And basically
| | 04:56 | this is going to mean what you see on your
monitor using your monitor profile is what
| | 05:00 | you're going to get out of Illustrator.
| | 05:02 | At the bottom here, Profile Mismatches, I would
turn that off, because if you don't turn that
| | 05:06 | off, it's always going to pop up and say
that this doesn't match, because most graphics
| | 05:10 | you open are going to have some sort
of color profile associated with them.
| | 05:14 | So now, we are not color managing at all.
| | 05:16 | We are not going to convert it to a space.
| | 05:17 | We're just going to use the
monitor preview for this.
| | 05:20 | So what I see on my monitor should
be what I get out, theoretically.
| | 05:24 | This is what a lot of people have started
doing because of the fact that most of these
| | 05:27 | applications automatically convert our
graphics to sRGB upon output, and so they're seeing
| | 05:32 | a color shift, and by doing this and turning
off the sRGB export, they feel like they're
| | 05:37 | alleviating this pain of the color
shift that they see in the web browser.
| | 05:41 | So if you want to do it this way,
set it up, hit OK. But you're not done yet.
| | 05:45 | Go up to the View menu, and once you have a
document open, you'll need to go down to Proof Setup.
| | 05:50 | So let's just create a new document really
quick. It doesn't matter how big. Go to the View
| | 05:55 | menu, choose Proof Setup, and you want to
make sure this is set to Monitor RGB so you're
| | 06:00 | viewing everything as it is
with the monitor preview.
| | 06:03 | And then finally the last step if you're wanting
to use no color management policies whatsoever
| | 06:07 | is to go to File > Save for Web.
| | 06:10 | And once you're inside Save for Web,
you want to make sure you come in and depending on
| | 06:15 | the file that you're optimizing,
you can uncheck convert to sRGB.
| | 06:19 | I'm going to cancel that and get back out,
and I'm going to stick with the sRGB policy.
| | 06:24 | So in order to switch that back, I'll just
to go Edit > Color Settings, and I'll switch
| | 06:28 | this back to North America
Web/Internet. Hit OK.
| | 06:32 | So, hopefully by now you have a better
understanding of how to edit the color setting inside of
| | 06:37 | Adobe Illustrator and also how to play it
safe and how to sort of be a cowboy, if you
| | 06:42 | will, and when it comes to managing the
color in your artwork for display on the web.
| | Collapse this transcript |
| Understanding web color| 00:00 | As we start to explore working with color
on the web, we have to understand that color
| | 00:04 | on the web is displayed and interpreted in a
different way that you might not have seen before.
| | 00:09 | In traditional design, we think of color as
being a formula that's comprised of different
| | 00:13 | values of channels, like RGB for red, green, and
blue; or CMYK for cyan, magenta, yellow, and black.
| | 00:20 | On the web, it's still RGB color, but it
utilizes a system known as hexadecimal codes in order
| | 00:26 | to display the color.
| | 00:27 | Hex codes are six-digit values that range
from 0 all the way to the letter F, and it
| | 00:32 | refers to the amount of color present
in the overall appearance of the object.
| | 00:37 | Zero is the smallest representation of a color.
| | 00:39 | It's almost a total absence of color.
| | 00:41 | The letter F is 15 times the
intensity of the color zero.
| | 00:45 | Combinations of these digits create
different shades of a particular color.
| | 00:49 | Double zero is equal to the zero Hue.
| | 00:52 | Double F is equal to pure color.
| | 00:54 | Think of it this way:
| | 00:55 | if you have double zeros,
I mean you have nothing.
| | 00:57 | You are broke; no color exists.
| | 01:00 | If you have two Fs, you are full. F for full.
| | 01:03 | So you are full of whatever color that maybe.
| | 01:06 | So zero means nothing and F means full, and
anything in between is just a varying degree
| | 01:11 | of how full you are on that particular color.
| | 01:15 | This color representation is done three times:
once for the red, once for the green, and
| | 01:20 | once for the blue, in that specific order.
| | 01:23 | So as you can see here on the screen in my
example I have a black square in the background,
| | 01:26 | and the hex code value for this is 000000.
| | 01:32 | So I have no red, no green, and no blue.
| | 01:36 | So I have the total absence of
color, which translates to black.
| | 01:39 | If I wanted to go to the opposite side of
the spectrum, I could type in all Fs and I
| | 01:43 | would get the color white.
| | 01:45 | Let's jump into the color picker
and show you some more examples.
| | 01:48 | First thing I'm going to do is default my
background colors by hitting the letter D on my keyboard.
| | 01:52 | That's just going to set my fill and
stroke back to the default of white and black.
| | 01:55 | I'll then double-click on the
fill to open up the color picker.
| | 01:59 | Once inside of the color picker, let's go
down to this little corner area here, and
| | 02:02 | let's start to mix up some hex codes.
| | 02:05 | Let's see that I wanted pure red.
| | 02:07 | Well, remember, in order to be full on a
color, I need to type in the letter F.
| | 02:11 | So the red comes first, so
that will be two Fs: FF.
| | 02:16 | I don't want any green, so that will be
two zeros, and I don't want any blue.
| | 02:20 | That will be two zeros.
| | 02:21 | Now, when I press the Tab key, you should see my
color picker switch to completely red, just like so.
| | 02:27 | Now, let's say that I wanted full-on green.
| | 02:30 | Well, that's zero reds, full-on green,
and zero blue. Press the Tab key.
| | 02:36 | There's my 100% green.
| | 02:38 | Same thing for blue. That's zero reds, zero greens,
and full-on blue. Press Tab and there you have it.
| | 02:46 | Now, are you going to be able to
remember every single hex code under the sun?
| | 02:50 | No, it's not possible, but you don't have to.
| | 02:53 | Inside of Illustrator, all you have to do is
pick your color inside of the color picker
| | 02:57 | and it will automatically write up the hex
code for you, which you can then take and
| | 03:01 | send off to your developer or use it in any
other designs or CSS that you might be composing.
| | 03:06 | Let's take a look.
| | 03:07 | Let's say I wanted some sort
of orange color, like this.
| | 03:11 | As soon as I set the color picker to a specific area,
it automatically gives me the hex code right here.
| | 03:17 | All I have to do now is copy that and then
send it off to the developer or paste it into
| | 03:22 | my Dreamweaver document or wherever I might
be working with CSS, and I've automatically
| | 03:26 | got that color ready to
be assigned to anything.
| | 03:29 | So, let's escape out of here
and go back into my document.
| | 03:32 | Remember, zero means you have no color,
F means you are full-on with that color.
| | 03:37 | So, hopefully by now, you have a better
understanding of what hex code colors are, why they are
| | 03:42 | used on the web, and how you can use
them to implement color in your next project.
| | Collapse this transcript |
| Creating a color palette| 00:00 | There may come a time in your creative process
where you just hit a roadblock when it comes
| | 00:05 | to developing color.
| | 00:06 | Now, chances are the client is going to be
very specific about what type of color they
| | 00:10 | want in their design.
| | 00:11 | But just in case they give you a little
creative freedom, you might find it a little difficult
| | 00:16 | to come up with color combinations.
| | 00:17 | And that's okay, because there are several
tools out there that will help you develop
| | 00:22 | your own color palettes.
| | 00:24 | My favorite is something called Kuler,
and it's available for free by Adobe.
| | 00:28 | So, just go to kuler.adobe.com, and you
can sign in using your free Adobe ID.
| | 00:34 | If you don't have an Adobe ID, you can
register, like I said, for free on adobe.com.
| | 00:39 | Once you have your Adobe ID, log in to Kuler,
and you can start accessing all of the different
| | 00:44 | things that are available to
you on this community site.
| | 00:47 | As I said, Kuler is a community about color.
| | 00:50 | And so you can come here and take a look at
all of the different color combinations that
| | 00:54 | other people have created.
| | 00:55 | You can also create your own
and share them with other people.
| | 00:58 | You can download color palettes for use in
different applications like Photoshop and Illustrator.
| | 01:02 | It's a very powerful tool, and I
really think that you should use it.
| | 01:06 | So, let's say, for instance, that I have a client
that came to me and said "I need you to build
| | 01:10 | me a web site for this fall
festival that I'm getting ready to put on."
| | 01:13 | I say okay, and we get to the point where
we're talking about colors and they don't
| | 01:17 | really have anything in mind, and I
don't necessarily have anything in mind.
| | 01:20 | I can bring up Kuler, and I can come right
here to the search box, and I can just type
| | 01:24 | in "fall" and hit search.
| | 01:28 | Once I do that, it's going to return several
different options available to me with that keyword fall.
| | 01:34 | I can search through them and page through the
results just like this until I find something that I want.
| | 01:40 | Once I find something, like maybe
this one here, I can click on it.
| | 01:44 | When I click on it, it shows real
big across the top, just like this.
| | 01:48 | I also get some information about it here.
| | 01:50 | I can see that it's got brown, burnt,
chocolate, fall, green, all these different keywords
| | 01:54 | associated with it.
| | 01:55 | I can see when it was created. I can see if
it has any votes, how many times it's been
| | 01:59 | downloaded, so I can see if
it's in play anywhere else.
| | 02:02 | I can also view more info like this, get a
direct link to it if I need to. I could copy
| | 02:07 | that and then send it to my client, say hey!
| | 02:09 | What do you think about these colors?
| | 02:11 | I can also use this button here to download
the theme as an Adobe Swatch Exchange file
| | 02:17 | or a .ase file. .ase files can be loaded
into almost every single Adobe application, so
| | 02:24 | that you can then use those
swatches in your designs.
| | 02:26 | So, for instance, if I were to download this--
and I'll just save it to my desktop--I could
| | 02:32 | then go back into Adobe Illustrator.
| | 02:34 | I will go to File > New and
just create a blank document.
| | 02:37 | It doesn't matter what document you create.
| | 02:40 | I'll bring up my Swatches panel and drag it
out so you can see it. And I'll go here, and
| | 02:44 | I'll choose Open Swatch Library, and I'll go
to Other Library, go to my Desktop, choose
| | 02:52 | Fall Fall.ase, hit Open, and there it is.
| | 02:56 | It loads right in there for me.
| | 02:58 | I can then use all of these colors in
my design if I want to. Pretty simple.
| | 03:03 | If I go back over to Kuler, I can see
that I can also create my own swatches.
| | 03:08 | So if I go to Create, it's going to jump me here
to an image, but I'm going to say From a Color.
| | 03:13 | So let's say that I have a color--and I'll
just mix one really quickly here like that,
| | 03:19 | just mix this kind of purple color.
| | 03:21 | I can then go up here and select different
rules, like Analogous, Monochromatic, Triad,
| | 03:29 | Complementary, Compound,
Shades, and even Custom as well.
| | 03:35 | Now, you notice as I hover over these it
gives you a little pop-up menu indicating
| | 03:39 | what's going to happen when you do this.
| | 03:41 | So, when I click Shades, it's going to
create subtle variations of the base color's hue.
| | 03:46 | So, that's what it looks like. Compound: combine
interesting colors from multiple hues. Complementary:
| | 03:53 | oppose two colors on the wheel for a
simple theme based on two hues, just like this.
| | 03:57 | Triad: space your colors in a triangle around
the wheel, and see it forms that little shape.
| | 04:03 | Monochromatic focuses on one color with
varied intensity and lightness in a single hue of
| | 04:08 | a color. And then we have Analogous:
Match colors with adjacent hues.
| | 04:12 | So, for this one, I think that Monochromatic
is probably the way I want to go, and so I
| | 04:17 | can go over here, give it a title,
just call this My colors, and hit Save.
| | 04:25 | Once I do that, it jumps me over into Mykuler
and Themes, and there's My Colors right there.
| | 04:30 | I can then download these which I just created
as an ASE file. I will download it to my desktop,
| | 04:36 | and then I can hop right
over into Illustrator, again
| | 04:38 | go to the Window menu and bring up my Swatches
panel, and I can click here; Open Swatch Library >
| | 04:45 | Other Library, and on my desktop should be
My colors. Open it up and there they are.
| | 04:52 | So, the next time you get stumped creating
a color palette for your designs, check out
| | 04:57 | kuler.adobe.com and mix and match your
own colors to see what you can come up with.
| | Collapse this transcript |
| Creating custom swatches| 00:00 | As you continue to work with clients in
your web design business, chances are they are
| | 00:04 | going to be throwing assets at you left
and right, especially when it comes to color.
| | 00:08 | Inevitably, you will get something sent to
you by a client that was clipped out of a
| | 00:11 | magazine or scanned into their computer, or
even like me, someone once sent me the patch
| | 00:16 | off of a hat that I had to sample colors
from in order to create a logo. It was crazy.
| | 00:20 | So as you start to get these assets into
Illustrator, we need to learn how to sample those colors,
| | 00:26 | and turn them into usable swatches which we
can then share with other designers and other
| | 00:29 | applications to use a consistent
color palette across the board.
| | 00:33 | In this movie, I'll be exploring how to
create those custom swatches and also how to save
| | 00:37 | them out as an .ase file, or Adobe Swatch
Exchange file, for use in other applications.
| | 00:43 | So I've got this file open here, and let's say
that this color strip was sent to me by a client.
| | 00:47 | They copied it out of the magazine.
| | 00:49 | They just put some things on paper,
scanned it in, and sent it to me. So here it is!
| | 00:53 | And so what I need to do is get these
swatches into my Swatches panel and then I need to
| | 00:57 | be able to save those out in order to use
them in other applications and share them
| | 01:00 | with other people in my workgroup.
| | 01:02 | So the first thing I'm going to do is start
sampling the colors with the Eyedropper tool.
| | 01:05 | So I'm just going to hit the letter I on my
keyboard, and that's instantly going to give
| | 01:08 | me the Eyedropper tool.
| | 01:10 | Then I'm simply going to move right here
and click, and that's going to automatically
| | 01:13 | set my fill color to the color that I click on.
| | 01:17 | So, once I have that done, I can come over
here into my Swatches panel--and I'll actually
| | 01:21 | drag it out so you can see it--and I'm going
to click on the New Swatch icon, just like so.
| | 01:27 | And once I do that, I'm just going to
name this Client Dark Purple. Hit OK.
| | 01:33 | There it saves it right there.
| | 01:34 | If I hover over that color,
it says Client Dark Purple.
| | 01:37 | Sample this, create a new swatch,
Client Blue Green. Hit OK. It adds that in.
| | 01:44 | I always hover over these, just to make
sure that it's getting them correct.
| | 01:48 | Sample the next, Client Light Yellow, hit OK;
sample this one, Client Burnt Orange, hit OK.
| | 02:00 | And then finally, this one is just white,
but I'm going to sample it anyway, just in
| | 02:03 | case there's any values that I
don't see in there. Client White.
| | 02:10 | And each time I'm creating this new swatch,
I'm careful to make sure that my Color Type
| | 02:13 | is set to Process and that my Color mode is
always on RGB, because when we are working
| | 02:17 | with the web, we want to
work in RGB color. So I hit OK.
| | 02:20 | So once I do that,
it's going to add it up there.
| | 02:23 | I can always move it.
| | 02:24 | I just click and drag it
down to these right here.
| | 02:26 | If I want these in their own
color group, that's easy to do.
| | 02:29 | I'll just come here, create a new color group, and
I'll call this Client Swatches, and I'm going to hit OK.
| | 02:36 | Now it threw a color in there for me already.
| | 02:38 | What I'm going to do now is just remove that.
| | 02:42 | Then I'll come here and select each one of
these by Shift+Clicking, and then I'll drag
| | 02:46 | them down and I'll just put them right next
to the group. And I'll undo that so you can
| | 02:50 | see exactly how I did this again.
| | 02:51 | I'm going to select, hold down Shift, and
then I'm going to drag these down, and watch
| | 02:55 | the little blue line that
appears right next to the folder.
| | 02:59 | It's hard to see with my mouse in the way,
but once I see that little blue line appear,
| | 03:02 | I let it go, and there we go.
| | 03:04 | Now, I can select the group, and it selects
all of them just by clicking the folder, and
| | 03:08 | then I can save this out as
an Adobe Swatch Exchange file.
| | 03:11 | So in order to do that, what I'm going to do is get
rid of all the colors that I'm not using currently.
| | 03:15 | So I'm just going to come here, hold down
Shift, and go all the way to the top, like this,
| | 03:20 | and click to get rid of all these colors.
| | 03:23 | I'll just trash them out, just like so.
| | 03:26 | So now I've got only my color group left.
And I'll go to the right-hand side of the
| | 03:30 | Panel menu, and I'm going to go down to Save
Swatch Library as ASE, Adobe Swatch Exchange.
| | 03:37 | I'll put this on to my desktop, and I'm just
going to call this Swatches.ase and hit Save.
| | 03:43 | It's going to warn me that swatches containing gradients or
patterns are not currently exchangeable, and that's okay.
| | 03:48 | These are all solid colors, so you
have nothing to worry about here.
| | 03:51 | I'll hit OK to that.
| | 03:52 | And so now, I can close up this
document because I've saved it out.
| | 03:56 | I don't need it anymore.
| | 03:56 | I can hit Don't Save.
And I'll create a brand document.
| | 04:00 | Let's say that I wanted to create a
brand-new document for this client.
| | 04:03 | You'll notice when I start this new document
that none of those swatches I just created
| | 04:07 | are available to me.
| | 04:08 | I have to go down to this little library icon,
go down to Other Library, navigate to my desktop,
| | 04:14 | and you'll see swatches.ase
down here at the bottom.
| | 04:17 | I'll hit Open and instantly come in all of
my swatches that I had before: Client Dark
| | 04:22 | Purple, Blue Green, Light Yellow,
Burnt Orange, and Client White.
| | 04:28 | So all of those are now available to me
anytime I need them in any application that supports
| | 04:33 | ASE files, whether that be Photoshop,
Indesign, Illustrator, whatever.
| | 04:37 | So the next time a client sends you some
sort of wacky color combination, now you should
| | 04:42 | be able to sample those colors, turn them
into swatches, and then export them out for
| | 04:46 | use in other applications or to
distribute across your workgroup.
| | Collapse this transcript |
| Working with fills and strokes| 00:00 | Now that we've seen how to effectively create
color inside of Adobe Illustrator, it's time
| | 00:04 | now to learn how to apply it to
various objects that we might encounter.
| | 00:07 | In this movie I'll be exploring the differences
between fills and strokes, and how to use them
| | 00:12 | inside of Adobe Illustrator.
| | 00:13 | So I have opened here a document, and I
want to first go to the finished product.
| | 00:17 | So I'm going to jump over to my Artboards
panel--and you can do that by going to Window
| | 00:21 | and selecting Artboards or just
finding it over here on the right.
| | 00:24 | And I'm going to double-click on where it
says Artboard 2, and when I get to Artboard
| | 00:29 | 2, it should jump me to this.
| | 00:30 | So this is the finished
product that we are working on here.
| | 00:33 | It's a robot logo that is going to come into
play later in the course, but for now we are
| | 00:36 | just getting the outline of it going.
| | 00:38 | And so I have a circle with two other circles
on top of it, just like this. And the appearance
| | 00:44 | of these objects is controlled
through something called fills and strokes.
| | 00:48 | The rings that surround the orange circle
have a stroke applied to them, and a stroke
| | 00:53 | is nothing more than a border that goes on
top of a shape and surrounds the outside of it.
| | 00:59 | You can see here, when I click on one of
those, the fill is actually set to None.
| | 01:03 | You can tell it's set to None because it's got
a white and a red line through it, indicating
| | 01:06 | there's nothing there.
| | 01:07 | And then the stroke is behind it right
there, and the stroke is this light gray color.
| | 01:12 | If I want to work on the stroke, I have to
click on it. The stroke then comes forward
| | 01:16 | and I'm now working directly on the stroke.
| | 01:18 | If you want serious options when it comes
to controlling the stroke, you need to go
| | 01:22 | up to the control panel and either click here
on the Stroke panel to activate it, or go over
| | 01:27 | to the right-hand side and find your Stroke
panel in your workspace and you'll have access
| | 01:31 | to all the controls for strokes as well.
| | 01:33 | Inside of the Stroke panel you have access
to things like the weight of the stroke.
| | 01:37 | The weight of the stroke refers to how thick
or thin the stroke actually is. In this case
| | 01:41 | I've got it set to 7 points.
| | 01:42 | If I wanted to push that up to a
nice even number like 8, I could do so.
| | 01:46 | Then I could click on the
other one and up it to 8 as well.
| | 01:50 | You can control the cap, whether or not
there's a Butt Cap, Round Cap or a Projecting Cap.
| | 01:55 | Again, this is totally up to you.
| | 01:57 | The corners, you can say whether or
not that they are rounded or beveled.
| | 02:01 | You can align the stroke to different areas,
like Align the Stroke to the Center--that means
| | 02:05 | that half of the stroke will be on the
inside, half of it will be on the outside.
| | 02:08 | You can align it all to the inside.
| | 02:10 | When I click this, you'll notice
the stroke shifts inside the path.
| | 02:14 | If I click the Outside button,
it shifts to the outside of the path.
| | 02:17 | Again this is totally up to you and how
your artwork is supposed to look in your eyes.
| | 02:21 | So for this one I actually think that aligning
the stroke to the inside looks a little better.
| | 02:25 | It makes it look a little cleaner.
| | 02:26 | And I'll select the other one and
I'll set that to the Inside as well.
| | 02:29 | You also have the option to add
in dashed lines if you want to.
| | 02:33 | When you add in dashed lines, you can then
add in dashes and gap widths, but we are not
| | 02:37 | going to worry about that for now.
| | 02:38 | The circle in the background actually has
no stroke, but it has a fill applied to it.
| | 02:43 | When I see that, I can click on the gill here
to make it active. That just means that the
| | 02:47 | interior portion of it is filled with a solid
color and there's no border around the outside of it.
| | 02:51 | You don't get any options in the
Stroke panel for this necessarily.
| | 02:55 | You don't really get any options period for
this, other than applying the color or the
| | 02:59 | overall opacity of it.
| | 03:01 | But in order to select a fill, you just select
the object and then go to your Swatches panel
| | 03:05 | and pick a swatch or go to the color picker
and double-click and select your color there.
| | 03:11 | I'm going to now navigate back to my
Artboards and I'll double-click out to the right-hand
| | 03:14 | side of Artboard 1. And Artboard 1 may
appear to be blank to you, but if you go and mouse
| | 03:20 | over it, you'll see that
the shapes are indeed there.
| | 03:22 | And if I drag out a selection with my
Selection tool, you can actually see, this is the blank
| | 03:27 | logo that we had over there on the right.
| | 03:29 | So what I'm going to do is I'm going to come
out here and I'm just going to find one of
| | 03:32 | the circles and find the other one and
hold down shift and click it as well.
| | 03:36 | You have to do that with your Selection tool.
And once I have both of those selected, I'm
| | 03:40 | then going to target the stroke of both of
those simultaneously by clicking on the stroke
| | 03:44 | here and then I'll come over to the Swatches
panel, I'll select the light gray color--it doesn't
| | 03:49 | matter which gray you select--
| | 03:51 | and then in the Control panel, I'll increase
the size to 8 points, just like I did before.
| | 03:57 | I'll open up the Stroke panel,
set the stroke to Inside.
| | 04:00 | So I'm doing all of the things I talked about
earlier but just in one fell swoop right here
| | 04:04 | in this little box.
| | 04:05 | Then when I'm finished with it, I can click
away, and it will close the box and then I can
| | 04:09 | come in and I'll click away from these.
| | 04:12 | Then I'll find the circle. And by the way,
if you don't see the circle when I'm mouse
| | 04:16 | over it like this, you don't see that,
| | 04:17 | that means you have Smart Guides turned off.
| | 04:20 | And so you may want to go up to the View
menu and go and make sure there's a check mark
| | 04:24 | next to Smart Guides, because that's going
to enable you to see these little shapes.
| | 04:28 | So once I have the shape selected, remember
no stroke here, so we are just going to click
| | 04:32 | on the fill to activate it.
| | 04:33 | Go over to the Swatches and I'll pick a
nice burnt orange color just like that.
| | 04:38 | And so now if I compare the two, I'll zoom
out a little bit, pan over, it looked pretty
| | 04:44 | good, almost exactly the same.
| | 04:46 | I think the gray on the right-hand side is a little
lighter than the one on the left, but that's okay.
| | 04:50 | So hopefully by now you have a better
understanding of what fills and strokes are and how you
| | 04:53 | can easily apply them and modify them using
the tools that are available to you inside
| | 04:58 | of Adobe Illustrator.
| | Collapse this transcript |
|
|
3. Working with LayersExploring the Layers panel| 00:00 | Layers are an essential part of any
composition, but when it comes to web design and all of
| | 00:04 | the small intricate pieces that go
into even the simplest of mockups,
| | 00:08 | there's no panel more
important than the Layers panel.
| | 00:12 | The Layers panel is your window into your
document, instantly giving you a bird's-eye-
| | 00:15 | view of everything that's
happening within your file.
| | 00:19 | Let's open up the Layers
panel and take a closer look.
| | 00:22 | To access your Layers panel, just come over
to the right-hand side and find it down at
| | 00:25 | the bottom, or you can go to the Window menu
and choose Layers to make sure that it's turned
| | 00:29 | on, or hit the F7 key on your keyboard.
| | 00:32 | I'm going to drag my Layers panel out so you
can actually see it a little better, and I'll
| | 00:36 | expand it down so we can get a good look at it.
| | 00:38 | So right now in this document, you see here
at the bottom it's telling me I have 1 layer
| | 00:42 | available to me, and that's
just a background layer.
| | 00:46 | That's because this has not been
spread out into multiple layers yet.
| | 00:50 | But the Layers panel itself gives me a
great deal of information about this file.
| | 00:55 | If I expand out this little triangle next to
this, I can actually see all of the different
| | 00:59 | sublayers that are available to me.
| | 01:01 | And each one of these sub-layers has actually
been named, so I have things like the buttons,
| | 01:05 | the Logo Text, Clouds, the Robot Logo, Rays
of Light and the Background element as well.
| | 01:11 | The great part about someone who names their
layers and their sublayers is the fact they
| | 01:15 | give you a roadmap to your file.
| | 01:18 | And if you are going to be sending your
designs off a developer or someone else to review
| | 01:23 | or anything like that, you need to get in
the habit of naming your layers in such a
| | 01:28 | way that makes sense to them and to you so you
can easily find anything that you are looking for.
| | 01:33 | Let's take a look at some of the other
options that we have available to us.
| | 01:36 | To the left-hand side you are going to see
this small visibility icon. It looks like a little
| | 01:40 | eyeball. Turning this off by clicking means you
just deactivate everything that's on the layer.
| | 01:45 | It's not gone, it didn't get thrown
away; it's just temporarily hidden.
| | 01:49 | If I turn it back on,
everything comes right back.
| | 01:51 | You can turn off individual elements as well
by going next to them and clicking the small
| | 01:55 | icon. As you can see, I can turn off individual
elements one at a time as I go through pretty easily.
| | 02:03 | At the bottom of the Layers
panel we have other options as well.
| | 02:05 | We have a Locate Object command.
| | 02:07 | We have Make/Release Clipping Mask, Create
a New Sublayer, Create a New Layer, and then
| | 02:14 | Delete Selection.
| | 02:16 | Right now I don't have anything
selected, so that is grayed out.
| | 02:19 | I don't have any objects selected either, so
this is grayed out for Locate Object as well.
| | 02:23 | If you need to resize the Layers panel,
you can go right here to this little rough-edge-
| | 02:27 | looking thing in the bottom right-hand
corner and you can drag that in and out to resize
| | 02:31 | it, to give it a little bit more room;
that way you can read more of the things in here.
| | 02:35 | To the right-hand side you have what I call
the target dots, and the target dots allow
| | 02:39 | you instantly click on
something and target that element.
| | 02:43 | We're going to go over that in its
own movie a little bit later on.
| | 02:46 | You also have access to the Layers panel
menu, which is a very powerful command.
| | 02:51 | And so inside of the Layers panel menu you
can create a new layer, create a new sublayer,
| | 02:55 | you can duplicate this layer.
| | 02:58 | You can also delete a selection.
| | 02:59 | You can go under the
Options for a specific layer.
| | 03:03 | If you click on that, it brings up the
Layer Options, which you can then rename.
| | 03:06 | You can change the color of the layer.
| | 03:08 | You can say whether or not it is a template
layer, whether or not it's locked, whether
| | 03:11 | or not you should show it, whether or not
it prints, whether or not you should preview
| | 03:14 | it, and whether or not you should dim the
images on this layer to a specific value.
| | 03:19 | So if you are working on let's say a
template that you are trying to create for someone,
| | 03:23 | you might dim the images on that template
to 50% or 30% and also make that a template
| | 03:28 | layer so that you can easily convey that
message to them that this is the template that you
| | 03:31 | need to be working on.
| | 03:33 | For this, there's no real template.
| | 03:34 | It's just the design, so I
don't have to worry about that.
| | 03:36 | But all of these options are available to you.
| | 03:39 | The color of the layer refers
to the color that you see here.
| | 03:42 | If I were to change that from light blue to,
say, green and then hit OK, you will notice
| | 03:46 | that the green automatically
appears right next to the overall layer.
| | 03:50 | It does not appear to the sublayers necessarily,
because you'll have to individually change those as well.
| | 03:56 | Sublayers are a separate entity from the
overall layer that they're sitting on.
| | 04:01 | So the Layers panel is, like I said,
a roadmap into your document, and you should use the
| | 04:06 | Layers panel as much as you can to locate
smaller objects that might be hard to discern
| | 04:10 | exactly what they are on the screen.
| | 04:13 | For instance, let's say that I wanted to find the
clouds, but I didn't know exactly where they were.
| | 04:19 | So I click on this, and then I choose the
Locate Object, and it's going to automatically
| | 04:23 | drill down to show me the paths within that.
| | 04:27 | Now I can also do that by coming out here.
| | 04:29 | Let's say that I didn't have any of these
expanded whatsoever, and now I wanted to find
| | 04:33 | this ROBOT text at the top.
| | 04:36 | I wanted to find that in the Layers panel.
That's easy to do.
| | 04:39 | Even without anything expanded I can select
the text here and then I can go and I can
| | 04:43 | click on the Locate Object.
| | 04:44 | It automatically goes and expands everything
down and finds exactly what I'm looking for
| | 04:50 | in the Layers panel.
Really, really nice to have that.
| | 04:54 | Collapse that back up and
click away to deselect.
| | 04:58 | So in the end, the Layers panel is your
roadmap into your document, and you should use it as
| | 05:02 | much as possible to locate objects and
organize objects so that when you are sending this
| | 05:08 | off to a developer or anyone else that you
might be working with, they know exactly what
| | 05:13 | you were thinking while
you were creating your file.
| | 05:15 | Because the last thing you want to do as a
designer is make the developer mad at you. Trust me on that.
| | Collapse this transcript |
| Renaming and grouping layers| 00:00 | In the previous movie we discussed the
importance of the Layers panel and how it can be used
| | 00:04 | as an organizational tool for you and
the other people that you work with.
| | 00:07 | In this movie, I am going to be exploring
more of the Layers panel and how we can actually
| | 00:11 | start to rename and group layers together to make
sense and create what I call developer-friendly files.
| | 00:17 | So the first thing I need to
do is open up my Layers panel.
| | 00:20 | So I am going to the Window menu and make
sure Layers is checked, and it is, and so that
| | 00:23 | should be down here in the bottom right-hand
corner. And I can drag that out to see more
| | 00:28 | of it. And I'll expand this down because
there is going to be lot of information in here.
| | 00:31 | And I am going to come right here to
this little triangle and expand it down.
| | 00:35 | When I expand this down you are going to see
a series of sublayers called Group and Path
| | 00:40 | and things like that.
| | 00:41 | And just by opening up and looking at this,
this makes absolutely no sense whatsoever.
| | 00:47 | If I were to hand this off to a developer,
they wouldn't be able to make heads or tails
| | 00:50 | of this, probably, because they would have to
go through and individually select things
| | 00:54 | to see exactly what they are and where they
are and everything like that, and they don't
| | 00:58 | want to spend the time doing that. Trust me.
| | 01:00 | They want to be able to go in here, look at
the layers that you have, and say, okay here
| | 01:04 | is the button, okay here is the header.
| | 01:06 | Here is the text.
| | 01:07 | Here is the logo, et cetera.
| | 01:09 | And so you have to make your files organized
in such a way that allows them to do that.
| | 01:14 | So what we are going to do in this little
exercise here is we are going to actually
| | 01:17 | go through and select different objects and
we are going to then group them together and
| | 01:21 | then place them on their own separate layers.
| | 01:24 | That way we can easily turn things on and off.
| | 01:26 | We can select things, move
them around, all as one.
| | 01:30 | So the first thing I am going to do is I am
going to locate the background of this design,
| | 01:33 | and the background is probably this thing
called Path down here at the bottom with the
| | 01:36 | light blue color.
| | 01:38 | And when I select it--and I can do so by
targeting it right there--I see it does, the bounding
| | 01:43 | box goes all the way around the outside,
and the fill color is set to that color,
| | 01:47 | so I know that's the background.
| | 01:48 | So the first thing I am going to do is to
rename this, so I am going to double-click
| | 01:51 | where it says Path and I am just going
to call this Background. There we go.
| | 01:56 | Now I have already got a layer
called Background, and that's okay.
| | 01:59 | This is just going to live on that layer.
| | 02:01 | Now I also need to find out where these rays
of light are, these little things that shoot
| | 02:06 | up from the back.
| | 02:07 | So I am going to click on one, and that
should select the entire group, and when I do that,
| | 02:11 | you'll see a little box pops up next to this
group here. And so I can then call this Rays
| | 02:17 | of Light, and I am just double-
clicking the name and changing it.
| | 02:20 | I'll expand this out a little bit so you
can see all the names that I am doing here.
| | 02:23 | I am just going to continue to go up, and I
am going to use the little target dots over
| | 02:27 | here on the right-hand side in
order to access individual pieces.
| | 02:30 | That way I don't accidentally select something.
| | 02:32 | So I am going to click here,
and we'll see exactly what this is.
| | 02:35 | This is actually a path that's behind the
robot's face and if I turn off the visibility,
| | 02:40 | you'll see exactly what it does.
| | 02:41 | It basically just keeps his face from
being hollow. And so that's a part of his face.
| | 02:45 | I am going to hold down Shift and select the
next one, because I can see that's his whole
| | 02:49 | face right there.
| | 02:51 | And so with both of those selected now--and I
did that, again, I selected this Path first,
| | 02:56 | I did that by clicking the target dot,
hold down shift, click this target dot,
| | 03:00 | they both become selected, and now I am
going to use Command+G or Ctrl+G on my keyboard
| | 03:06 | to group those together.
| | 03:07 | It turns them into a group.
| | 03:08 | You can see here. And I can double-click
the name Group, change this to Robot Head.
| | 03:13 | Select the next one.
| | 03:14 | This is going to be the body of the robot,
so I am going to double-click where it says
| | 03:18 | Path and call this Robot Body.
| | 03:20 | And now I am going to create a brand-new layer,
so I am going to click on Background here
| | 03:25 | at the top and create a new layer.
| | 03:28 | This new layer is going to be called Robot.
| | 03:32 | So I am going to take the Robot Head,
Shift+Click to select the Robot Body.
| | 03:36 | I actually need to select the layers here,
so let's select Robot Head and Robot Body
| | 03:40 | by clicking here, and then I'll drag those
up. Notice the little indicator telling me
| | 03:45 | where I am going to drop them.
| | 03:46 | I'm going to drag them right until I see the
highlight appear on Robot and then I'll drop them in.
| | 03:51 | Now at first it's going to appear that these
are on top of everything, and they are for
| | 03:55 | now, and that's okay.
| | 03:57 | So what am I going to do is I am going to
temporarily lock them so that we can't make
| | 04:01 | any modifications and then I am going to
disable their visibility so that we can't see them.
| | 04:06 | That way that layer is just off chilling by
itself and we don't need to mess with it anymore.
| | 04:10 | Now let's come back down in my original layer, the
Background layer, and let's select this Path here.
| | 04:15 | That turns out to be Clouds.
| | 04:16 | I'm going to hold down Shift
and click the next target dot.
| | 04:19 | That's another set of clouds.. Hold down Shift,
another target dot, and that is going to be
| | 04:24 | all of the clouds.
| | 04:25 | So in order to put these all together,
I am going to group them. Command+G or Ctrl+G
| | 04:30 | groups them together. Then I am going to
double-click Group and call these Clouds. There we go.
| | 04:36 | Now I am going to come up
and click on the Robot layer.
| | 04:38 | I am going to add a new layer on top of it.
| | 04:41 | We'll double-click and call these Clouds.
| | 04:43 | Then I'll take the Clouds group,
drag, and drop it right there.
| | 04:48 | Again, it's going to look like it's
going on top of everything, and that's okay.
| | 04:51 | So we'll lock it, we'll
hide, and we'll keep going.
| | 04:55 | Now I'll come down here and
I'll grab the target dot next to this.
| | 04:58 | Okay, that's the Robot text
at the top. Hold down Shift.
| | 05:01 | That's the second part of the Robot text.
| | 05:02 | There is actually a silhouette back in there.
| | 05:04 | Then I need the Toy Company underneath there,
so I am going to Shift+Click the next one.
| | 05:08 | That should be the Toy Company. There we go.
| | 05:10 | And so I am going to group these together,
Command+G or Ctrl+G, double-click the word
| | 05:15 | Group, change this to Logo Text.
| | 05:18 | Now I am going to take this and I
am going to put it on its own layer.
| | 05:20 | So I'll click Clouds, create a new layer on
top, double-click, call this Logo Text, and
| | 05:27 | we'll take this and we'll
move it up, just like so.
| | 05:30 | Now it's going to be sitting on top
of everything anyway, so that's okay.
| | 05:33 | It's right where it needs to be.
| | 05:34 | I am going to be lock it and temporarily hide it,
just so I know what I have left to work on.
| | 05:39 | So it looks like the only thing I have left
to work is going to be these two buttons down
| | 05:42 | here, because we already have the Rays of
Light and the Background taken care off.
| | 05:47 | So now I just have to be careful
on how I group these two together.
| | 05:49 | So now I am going to click to select this group
here and that's going to be the button on the left.
| | 05:53 | Hold down Shift. Click the next one up.
| | 05:55 | That's going to be the glossy part of the icon.
| | 05:57 | And if you want to rename these
as you go, you certainly can.
| | 06:00 | For instance, I could call this Orange
button and then this Path could be Orange Gloss.
| | 06:08 | That way these make a little bit more sense to
you. And then we can Shift+Click the next one.
| | 06:12 | That's going to grab the text.
| | 06:14 | So I'll just double-click here and
I'll call this Log In. There we go.
| | 06:19 | And so with all three of these now selected,
I can group them, Command+G or Ctrl+G, and I'll
| | 06:24 | double-click to rename this
Login button, just like that.
| | 06:28 | Now the only one is left should be the one
on the right, but I am also going to rename
| | 06:32 | these, so I am going to call this Orange button.
| | 06:36 | The next one should be glossy part.
| | 06:37 | Let's select it to make sure; it is.
| | 06:39 | So we'll double-click Orange
Gloss. Click the next one.
| | 06:44 | That should be the text.
| | 06:45 | So we'll call this Sign Up. And then we can
select all three of these, group them together,
| | 06:51 | Command+G or Ctrl+G, and call
this Sign Up button. There we go.
| | 06:58 | So I now have these two buttons.
| | 06:59 | I am going to click Logo Text, create a new
layer, call it buttons and then I'll select
| | 07:05 | both the layers, like this. And we have to click on
the actual layer and highlight it and drag it up.
| | 07:11 | Drop it on the buttons layer.
| | 07:13 | They are now on their own separate layer.
And I'll lock those, temporarily hide them
| | 07:17 | just to make sure I didn't
miss anything. That's all good.
| | 07:20 | And so now the only thing left to do
is collapse the Background layer up.
| | 07:23 | I am going to lock it because I
never want to make changes to that.
| | 07:26 | Then I am going to unlock all of the layers
that I just created and turn their visibility
| | 07:31 | back on one at a time.
| | 07:34 | And there we have our fully assembled developer-
friendly file with individual layers and everything
| | 07:40 | named appropriately, organized, and ready to go.
| | 07:43 | So from here I would just save this out.
All of my layers would then be intact each and
| | 07:47 | every time I open up this file, and it makes
it so much easier on anybody else that I work
| | 07:51 | with or if I happened to
send this off to a developer.
| | Collapse this transcript |
|
|
4. Working with Shapes and SymbolsDrawing simple shapes| 00:00 | Although there are ways to create really complex
shapes and artwork inside of Adobe Illustrator,
| | 00:06 | some of the most useful tools happen to be the
ones that create the most simple of artwork.
| | 00:11 | And so in this movie I am going to
exploring how to create basic shapes inside of Adobe
| | 00:15 | Illustrator, and I am going to try to
explain to you why creating these basic shapes is
| | 00:20 | such a useful thing inside of Illustrator,
especially when it comes to a web design process.
| | 00:26 | So I am going to create a New Document by
going to File > New, and once I create this new
| | 00:30 | document, it doesn't matter how big or how
small it is, in this case I am going to do
| | 00:34 | 1024 x 768, and I'll just hit OK.
| | 00:37 | I am going to then open up all of the shape
tools; I am going to do that by coming right
| | 00:40 | underneath the Type tool,
| | 00:41 | I'll click and hold to open up this toolbox,
and then I am just going to separate these
| | 00:45 | into their own floating tool panel by
clicking this little arrow. And then I'll move them
| | 00:49 | out just like this.
| | 00:51 | And so I'll select a Rectangle tool.
With the Rectangle tool selected, I can actually
| | 00:54 | come out here and start to develop
lot of different assets pretty easily.
| | 00:59 | And so if I click and I do something like 468 x 60
and hit OK, that's a standard web banner size.
| | 01:09 | I have just created a small mockup for a web
banner. Or if I click and do 300 x 250, again,
| | 01:16 | another standard web banner size.
| | 01:18 | We can come here do 125 x 125.
| | 01:22 | It's a small graphic size for the web, an
advertisement. And again, we'll do 125 x 125,
| | 01:29 | hit it again. It puts it in play.
| | 01:32 | If I want to line that up, I can kind of move
it just like that, so now I've got a graphic
| | 01:41 | here, two on the right, one in the middle.
Pretty easy stuff. I just created a web banner
| | 01:46 | package, essentially, right there,
which I can in design on top off.
| | 01:50 | I could also do something like buttons, so
let's do a rounded rectangle here. And I'll click
| | 01:55 | somewhere over here to the right, and I'll
do something like 200 pixels Wide x 45 pixel
| | 02:00 | Tall, a Corner Radius of about 6. Anywhere between 4
and 8 is going to be good for rounded rectangles
| | 02:06 | for buttons and things like that.
| | 02:08 | So, go and hit OK and that
creates a button for me.
| | 02:12 | And if I want to do another one, that's easy
enough. Just click, hit OK, and I am just lining
| | 02:17 | these up with Smart Guides.
| | 02:17 | If you don't have Smart Guides turned on,
just go View, and enable Smart Guides and they'll
| | 02:22 | come right back on for you.
| | 02:23 | And then once you are out here drawing, you'll
see these little green lines appear and you
| | 02:27 | can easily line things up and create them.
| | 02:31 | So there are a few buttons that I have created.
| | 02:33 | I can also do some round buttons, so let's line
these up here and let's do 100 x 100. There we go.
| | 02:39 | And line this up.
There we go, 100 x 100. There we go!
| | 02:43 | And so you can see just how quick you can
start to mock things up simply by employing
| | 02:48 | these basic shapes that you might have otherwise
thought were just too primitive to use in anything.
| | 02:53 | But the faster you get with creating these
shapes, the faster you can get into the creative
| | 02:58 | process of adding things to these
shapes to make them look like something.
| | 03:02 | And then you can hand these off to a
developer or code them yourself into working HTML and
| | 03:08 | CSS Objects, which can then
be interacted with on the web.
| | 03:11 | It's a really cool process if you think about
it, because you go from these little skeleton
| | 03:16 | pieces that we have created into a full-blown
working prototype in a very short amount of time.
| | 03:21 | But until you can get the speed and precision
down of creating these graphics, you may not
| | 03:25 | be able to crank through
this process quite as fast.
| | 03:28 | So learn to use these tools. The point-and-
click method is by far the best, in terms of
| | 03:33 | creating web graphics, in my opinion,
because if I were to try to utilize the Rectangle
| | 03:37 | tool to create something and I had to click
and drag, I would have to wait until the pixel
| | 03:41 | count got just perfect and I couldn't really
get that each and every time. I may have
| | 03:46 | to go up and change some stuff in the Control
panel, and so using this point-click-and-entering-
| | 03:52 | in-values method is a great way to create
precise wireframe graphics really quickly
| | 03:57 | and really easily.
| | 03:59 | So hopefully by now you have a better
understanding of the basic shape tools that you have available
| | 04:03 | to you inside of Adobe Illustrator, and then
how to use those to quickly create these skeleton
| | 04:09 | pieces which we can then start to throw a
little bit of creativeness on top of to create
| | 04:14 | some really stunning web graphics.
| | Collapse this transcript |
| Working with Pathfinder| 00:00 | In the previous movie we talked about
utilizing basic shapes inside of Illustrator to mock
| | 00:05 | up things like web
banners and things like that.
| | 00:08 | In this movie I'm going to be exploring how
to take those basic shapes even a step further
| | 00:12 | to create some more complex shapes
utilizing something called the Pathfinder panel.
| | 00:17 | Now this is something that a lot of people
don't really understand, and I think it's very
| | 00:21 | highly underused. So let's take a look at
it now and see how we can turn these basic
| | 00:25 | shapes, and that's all they are--
| | 00:26 | it's just shapes, you can see--
| | 00:28 | and we're going to take these
shapes and turn them into a robot.
| | 00:32 | So I'm going to go to the Window menu and I'm
going to bring up Pathfinder and Pathfinder
| | 00:36 | comes up here. and I think what gets people a
little thrown off is the fact that the path
| | 00:41 | finder has all of these different buttons
associated with it, and really no descriptors
| | 00:45 | as to what these buttons do, and the little
icons don't make a whole lot of sense when
| | 00:49 | it comes to exactly what's going to happen.
| | 00:52 | But if we take a look at the shape modes up
at the top, when you hover over them, they
| | 00:55 | do give you somewhat of an idea of what's
going to happen. So Unite, it's going to create
| | 01:00 | a compound shape and add to shape area.
| | 01:03 | You can minus the front.
| | 01:04 | That means whatever object is in front of
the object that you have currently selected,
| | 01:07 | as long as you have both of them selected at
the same time, it's going to be subtracted,
| | 01:11 | or cut out, from the back object.
| | 01:13 | Then you can also intersect, which means
it's going to keep the intersected area of the
| | 01:19 | shapes. And then of course we have the
Exclude option, which means wherever they overlap,
| | 01:24 | exclude that area please.
| | 01:26 | And basically the ones that I use
most often are Unite and Minus Front.
| | 01:31 | We also have Pathfinder operations underneath
here which can divide things into separate
| | 01:36 | pieces, trim them, merge them together, crop
them, outline them, and also minus the back.
| | 01:44 | So we have Minus Front.
Here we have Minus Back down here.
| | 01:47 | So totally up to you which one you use, but in this
case I'm going to be utilizing Unite and Minus Front.
| | 01:54 | So the first thing I'm going to do is I'm going
to start building the basic shapes of the
| | 01:58 | robot. And so the shapes that aren't going
to change necessarily are going to be the
| | 02:01 | body, and I have to make the decision on if
I want the body and the neck to be the same
| | 02:07 | color. In this case I don't, so what I'm going
to do is just keep the body as its own separate
| | 02:11 | piece, and then I'm going to select the neck
pieces by just click and dragging the selection
| | 02:16 | around them, like so.
| | 02:18 | Once I do that, I can then unite those into
one single shape by clicking the Unite button,
| | 02:24 | and when I do that, they turn into
one single shape, just like so.
| | 02:28 | I'm then going to select the head, I'll hold
down Shift, and I'll select the ears on either side.
| | 02:33 | I'm also going to select this circle up top,
the stem of the antenna, the little ball on
| | 02:39 | top of the antenna, and I'm
going to unite those as well.
| | 02:43 | Now, it's going to appear that these come forward,
and they do, in the stacking order. That's okay.
| | 02:48 | You can right-click, choose Arrange, and you
can say Send to Back and they'll go right back
| | 02:55 | where they came from, just like so.
| | 02:58 | Then I'm going to select the
mouth, and I'll select the head.
| | 03:03 | I want the mouth to be a cutout from the
head, so I'm going to choose Minus Front.
| | 03:07 | Now, again, this is going to look
like it jumped forward, and it did.
| | 03:11 | If you want to easily send this backwards,
just hold down the Command key on Mac, the
| | 03:15 | Ctrl key on PC, and press
the left square bracket key
| | 03:19 | until it goes all the
way back, just like so.
| | 03:23 | Now we'll take the eyes. And I'm going to do
these individually, so I'm going to select
| | 03:27 | the eyes like this, and
I'll choose Minus Front.
| | 03:31 | That's just going to leave a hole right there.
| | 03:33 | Do the same thing over here,
Shift+Click. Minus Front. Here we go.
| | 03:39 | And so now I've got just the rings of the
eyes, got the mouth, got that and the body
| | 03:45 | all ready to go. So let's add some color to
this and see exactly what we've come up with.
| | 03:48 | So I'm going to click the body down here at
the bottom and I'll give it an orange color.
| | 03:54 | Turn the Stroke off. Here we go.
| | 03:55 | The neck, I'm going to give it sort of a dark
gray. And you can pick whatever colors you want.
| | 04:06 | The top, the head piece, I'm going to give
this no stroke, and sort of light gray, like this.
| | 04:15 | You can see kind of how it's come
together. And now the last piece is the eyes.
| | 04:22 | Give those no stroke, and maybe we could
fill those with a darker gray like so.
| | 04:29 | And so there we have a nice little robot shape
that we've created, and now all of this stuff
| | 04:33 | is selectable and able to be moved and scaled
individually from each other, and the pieces
| | 04:38 | that needed to be united are united.
And it's a very awesome way to crate complex artwork
| | 04:43 | using just the basic shapes.
| | 04:45 | If I hadn't used Pathfinder, I would
have known how to draw all of this stuff with
| | 04:49 | either the Pen tool, the Pencil tool, or some
other method. And I find it a lot easier just
| | 04:55 | to use basic shapes and then combine them
using something like the Pathfinder panel
| | 04:59 | to create even more complex artwork.
| | 05:01 | It makes it look like I did a
lot more work than I actually did.
| | Collapse this transcript |
| Using the Shape Builder tool| 00:00 | In the previous movie we discussed how to
create more complex shapes by utilizing something
| | 00:04 | called the Pathfinder panel.
| | 00:05 | In this movie, I'm going to take that one
step further and show you a method that's
| | 00:08 | even easier, and also a lot more visual, for
creating complex shapes with very little effort.
| | 00:14 | So I've got the same file open here.
| | 00:16 | I'm going to close the Pathfinder
panel because I don't need it anymore,
| | 00:19 | and I'm going to start building this robot
the same way I did before, but this time I'm
| | 00:23 | only going to use one tool.
| | 00:24 | I don't even need to open up a panel.
| | 00:26 | I'm going to use something called the Shape
Builder tool, and the easy way to use the
| | 00:29 | Shape Builder tool is to press Shift and the
letter M on your keyboard, or you can find
| | 00:34 | this icon right here, Shape Builder tool.
With the Shape Builder tool selected, when
| | 00:38 | you first bring it out on the canvas, if you
don't have anything selected, you're going
| | 00:41 | to notice that you're not able to do anything.
| | 00:43 | I'm clicking and dragging right now
and I can't get it to do anything.
| | 00:47 | So what we need to do is we need to select
some things and then use the Shape Builder
| | 00:52 | tool to allow us to build shapes with it.
| | 00:54 | So I'm going to grab my Selection tool
and I'm going to start off with the neck,
| | 00:59 | just like I did in the previous movie, just
like this, to select that. And I'll press Shift+M
| | 01:04 | to select the Shape Builder tool. And I want
to use all of these as a single shape, I want
| | 01:10 | to unite them as a single shape, so I'm
going to hold down the Shift key, click and drag
| | 01:15 | out a selection until all
of them turn gray, like this.
| | 01:19 | And once I release my mouse,
they are united into one single shape.
| | 01:24 | And if I click away from it,
you can see one single shape.
| | 01:28 | Now I'm going to do the
same thing for the head.
| | 01:29 | So I want the head up here.
| | 01:31 | I want that to be united with this top part
here, the stem, and the top of the antenna,
| | 01:36 | and I'm going to include
the ears in this as well.
| | 01:40 | And so then I'm going to press Shift+M on
my keyboard to access the Shape Builder tool
| | 01:45 | again, and this time I'm
going to simply draw across.
| | 01:52 | And when I draw across, you're going to
notice that it tries to get everything, but it has
| | 01:55 | trouble getting everything, so I'm going to
let go somewhere outside of it so it doesn't
| | 02:01 | do anything and then from here I'm going to
come up to the top-left corner, hold down
| | 02:04 | the Shift key, click and drag a
selection out, and unite those shapes that way.
| | 02:10 | When you click and drag with the Shape Builder
tool, it allows you to create a shape, as long
| | 02:14 | as it's within the eye line of that straight
line, but if you hold down Shift, you can make
| | 02:18 | a selection with it.
| | 02:20 | With this object selected, I'll switch back
to my Selection tool and then I'll use Command
| | 02:24 | or Ctrl and the left bracket key
to place that back behind everything.
| | 02:31 | Now I'm going to select the eyes, the one on the
left first, Shift+M. And so remember, we want
| | 02:37 | to take out the middle part of the eye, so
in order to do that, I'm going to hold down
| | 02:41 | the Option or Alt key on my keyboard.
| | 02:42 | You'll notice when I do that the plus sign
turns into a minus. And when I click, it just
| | 02:47 | removes that portion from that shape.
| | 02:51 | So now this shape is just like a donut.
| | 02:55 | Let's do the same thing over here.
| | 02:58 | I'll Shift+Click to select both of these,
Shift+M to bring up the Shape Builder tool,
| | 03:04 | go to the middle, hold down the Option or
Alt key, click, and remove the middle piece.
| | 03:10 | Last part here, I'm going to select the head,
select the mouth, and just Shift+Clicking to select it.
| | 03:16 | I'm going to grab the Shape Builder tool one
last time, go to the mouth, hold down Option
| | 03:21 | or Alt, click, and now the mouth
has been subtracted from that.
| | 03:26 | And I can then add the color in, like I did
before. So now I'll just come over here, give
| | 03:30 | this a no Stroke, go to the Swatches panel,
give this a light gray, select both the eyes,
| | 03:38 | no Stroke, dark gray, the neck,
and here's a cool trick here:
| | 03:45 | If I want this to look just like the eyes,
I'll just grab the Eyedropper tool and click
| | 03:50 | on one of the eyes. It automatically changes it
over to look just like that. And then we'll select the body,
| | 03:55 | no stroke, and an orange body, like so.
| | 04:02 | So there you have it. We have designed this
little robot icon here in just a few short
| | 04:07 | measly steps by utilizing the Shape
Builder tool inside of Illustrator.
| | 04:11 | It makes it so much easier to design in a visual
way and combine shapes without having to worry about,
| | 04:17 | well, what does this Pathfinder operation
mean, or what does this Shape tool mean?
| | 04:21 | All you have to do is know how to draw basic
shapes, overlap them on top of one another,
| | 04:25 | and then either subtract or add them
together using the Shape Builder tool, and you can
| | 04:29 | create some amazing
artwork with very little effort.
| | Collapse this transcript |
| Creating symbols| 00:00 | Over the course of your design career,
you will accumulate a countless number of assets
| | 00:04 | that you can repurpose for other projects.
| | 00:06 | The hard part is keeping track of all of them.
| | 00:09 | One method that I have used that has served
me really well over the last few years is
| | 00:12 | creating symbol
libraries inside of Illustrator.
| | 00:15 | Take these icons for instance.
| | 00:17 | These are just basic social media icons that
I created inside of Illustrator, but I want
| | 00:22 | to repurpose them and use them in
various designs that I might have.
| | 00:25 | A year from now I don't want have to go find
this file somewhere backed up on a different
| | 00:29 | drive or something like that.
| | 00:30 | I want to be able to quickly get a hold of
all of these icons so I can drag and drop
| | 00:34 | them into any project
that I might be working on.
| | 00:37 | The answer to that is symbols.
| | 00:40 | So in this movie we are going to take these
icons and we are going to turn them into a symbol
| | 00:43 | library which we can then use in
any project we want going forward.
| | 00:47 | In order to do this, I need to first bring
up my Symbols panel, and my Symbols panel is
| | 00:51 | actually located right over here in this
little docked area of icons, and it's got a little
| | 00:55 | clover on it that says
Symbols when I hover on it.
| | 00:58 | If you can't see your Symbols panel, just go
to the Window menu and choose Symbols, and
| | 01:03 | it should pop up wherever it is.
| | 01:05 | And so basically what we need to do here is
we need to create a new symbol for each one
| | 01:11 | of these icons, and that's very easy to do.
| | 01:13 | So what I am going to do is just select
something like the Twitter icon here, and I can take
| | 01:17 | this and I can just drag it over into the
symbol library and once I see that little
| | 01:21 | plus sign, I can drop it in.
| | 01:24 | And so the name of the symbol in this case
is going to be Twitter icon. And in this case
| | 01:29 | I am just going to make it a graphic; I am
not going to take this into Flash or anything
| | 01:33 | like that, so I don't have to worry about this.
| | 01:34 | These are all Flash options
that we are talking about.
| | 01:37 | And you can see that down here at the bottom
it tells me "'Movie Clip' and 'Graphic' are tags
| | 01:40 | for Flash Import.
| | 01:41 | There is no difference between these two symbols in
Illustrator," so you don't have to worry about it.
| | 01:45 | Registration, I am going to
keep that right in the center.
| | 01:47 | We want to enable guides for 9-slice scaling.
Again this is something that has to do with
| | 01:52 | a lot of motion and things like
that, so don't worry about that now.
| | 01:55 | I am going to align it to the Pixel
Grid though, and I am going to hit OK.
| | 02:00 | And so that creates a new
Twitter icon symbol for me.
| | 02:02 | I am going to do the same thing for Facebook.
| | 02:09 | Set this to your graphic, Align to Pixel Grid,
OK, and I am just going to do this for each
| | 02:13 | one of the icons.
| | 02:14 | I am just dragging them over, setting them
to a graphic. Again, it doesn't matter which
| | 02:20 | one you do, but in case I wanted to move these
over into Flash, I am just going to use these
| | 02:23 | as graphics, so Align the
Pixel Grid. There we go!
| | 02:27 | And I'll just drag this one over.
| | 02:30 | This is for Forrst, another
design social network. We'll drag this over.
| | 02:39 | This is for Vimeo, a video sharing platform.
| | 02:45 | And of course, we all know YouTube.
| | 02:50 | Now we'll drag over just the RSS icon,
so if you have a blog or something, you could
| | 02:54 | use this to let people subscribe to your blog.
| | 02:58 | Google+, that's the new kid on the
block when it comes to social networks.
| | 03:07 | And you'll notice there that I
actually made a mistake with my Google+ icon.
| | 03:10 | I didn't select a part of it, so what I am
going to do is undo that and go back and try
| | 03:15 | to select all of it.
| | 03:16 | There we go, and then I'll
drag it over and redefine it.
| | 03:22 | Here we go. Align it to
the Pixel Grid. Here we go.
| | 03:28 | LinkedIn, and we'll grab Skype. This one will belong
to Flickr, and the last one is another design
| | 03:42 | social network called Behance.
| | 03:43 | Here we go, and hit OK.
| | 03:49 | And so now I have all of these symbols
loaded up over here. Any time I need to use them,
| | 03:54 | I can use them and I can just drag
out a new instance of that symbol.
| | 03:57 | So let's say I was working on a project.
| | 03:59 | I could then say, oh, I need a
Twitter icon here. That's okay.
| | 04:01 | I have one.
I'll just drag it out, boom.
| | 04:04 | There is a Twitter icon.
I need Facebook too. Okay. Here we go.
| | 04:07 | There is Facebook.
| | 04:08 | And we can line those up and,
you know, move them around.
| | 04:11 | So as of right now, these exist, but they
only exist here inside of this document.
| | 04:15 | So what I need to do now is I need to take
these and save them out as their own symbol
| | 04:19 | library so that I can then load them up
into another document at any given time.
| | 04:25 | So in order to save them out as a symbol library,
I am just going to first come over here and
| | 04:28 | I am going to select the symbols that are in here
by default, and I just did that with Shift+Clicking.
| | 04:34 | I am going to remove those, because I only
want these to be inside of the symbol library.
| | 04:39 | And then instead of the Symbols panel,
I'll undock that, so you can actually see it.
| | 04:43 | I'll go here, I'll down to Save Symbol Library,
and then I would just go out to the Desktop,
| | 04:49 | and I'll call this Social
Symbols and I'll hit Save.
| | 04:56 | And so now those have been saved to my Desktop.
| | 04:59 | If I close this document, I am not
going to save any changes. I don't have to.
| | 05:03 | I'll create a brand new document.
| | 05:04 | It doesn't matter what size. And when I do that you
are going to notice the default symbols come back in.
| | 05:09 | Those aren't the social symbols that I was just
working on, so I need to go down to the library icon,
| | 05:14 | I need to go Other Library, go out to my
Desktop, and select Social Symbols, and hit Open.
| | 05:22 | Once I hit Open, those will appear, and close
this Symbols Library. And now if I need Twitter,
| | 05:27 | drag it out; Facebook, drag it out; Google+;
LinkedIn; any one that I want, I can drag it
| | 05:34 | out from the symbols library and use it.
| | 05:37 | These are still scalable vector artwork, so it
does not matter how big or how small I make them;
| | 05:44 | they are always going to be scalable vector
arts, so I can use them in any way, shape,
| | 05:48 | or form that I need, but I now have this
library saved anytime I need it to go back and use
| | 05:53 | it any project going forward.
| | 05:55 | So I do this for things like client logos.
| | 05:57 | I also have a lot of brand logos that I use
when I do sponsorships and things like that
| | 06:02 | on different client web sites, so I
bring in some sponsor symbol libraries.
| | 06:05 | I have a social icon set like this;
actually, I have several of those.
| | 06:09 | Anything that you think you can repurpose
for further use, try saving it as a symbol
| | 06:14 | library, keep those symbols somewhere in a
safe place on your computer, and then load
| | 06:18 | those up quickly and easily each and every
time you need them, and you workflow will go
| | 06:21 | so much smoother and so much faster.
| | Collapse this transcript |
| Editing and replacing symbols| 00:00 | One of the great benefits of working with
symbols is the fact that you can instantly
| | 00:03 | update and refine your artwork with very
little effort, and that also makes it easy for you
| | 00:08 | to update multiple instances of
symbols inside of your document as well.
| | 00:12 | Let's take a look at what I mean.
| | 00:14 | Inside of this document here I have a symbol
on my artboard, and so I could actually create
| | 00:18 | multiple instances of this symbol and then
change it and it would automatically update
| | 00:23 | any of those symbols that
I need at any given time.
| | 00:26 | I can also edit this
symbol anytime I want as well.
| | 00:29 | If I look in the Symbols panel, I'll see this
symbol right here, and I can double-click it
| | 00:35 | to enter what's called Isolation mode
and makes changes to it any way I see fit.
| | 00:39 | So for instance, if I wanted to change the
color of this to a different color, I could
| | 00:43 | do so very quickly and easily, just by
selecting the individual pieces and then making the
| | 00:47 | change. And so you see there I've got all
these different colors to work from here.
| | 00:52 | So let's say I want to change this
to a variation of, let's say red.
| | 00:55 | I'll select this here and I'll grab a
dark-red color, select this one and make this sort
| | 01:02 | of a lighter red.
| | 01:04 | This one, I'm running out of reds in my
Swatches panel, so I'll just go here and I'll go all
| | 01:09 | the way down to like pure red, and then I'll
just step backwards through. Here we go.
| | 01:17 | Start off here. And I'll actually just hit the
letter I and sample that color and double-click
| | 01:24 | here, go a little bit lighter, sample that
color, double-click, a little bit lighter,
| | 01:36 | until finally we get to the lightest one at
the very end. Double-click and there we go.
| | 01:43 | So now I've changed that symbol and if I
wanted to, I could exit Isolation mode by clicking
| | 01:48 | here or simply by double-
clicking in the blank space here.
| | 01:51 | When I do that, you're going to notice, the
symbol updates in the Symbols panel, and also,
| | 01:55 | if I zoom out, it updates here as well.
| | 01:57 | So now my loader is red,
as opposed to the default black and gray.
| | 02:03 | If I want to undo that, just Command+Z or
Ctrl+Z and I can step back and undo all those
| | 02:08 | changes I made. And then once I Command+Z
or Ctrl+Z back, it goes right back into my
| | 02:14 | document like so.
| | 02:15 | If I wanted to resize the symbol, I can just
drag it back up to resize it, and there you go.
| | 02:22 | And so I can also do things like replace
symbols, in addition to just editing them. And the
| | 02:28 | easy way to replace a symbol is to first
have something you want to replace it with, and
| | 02:32 | then use something called the Replace command.
| | 02:33 | So I'm going to open up a symbol library
that exists inside of Illustrator already, and
| | 02:38 | so let's go down to Web Buttons and Bars
inside of the Symbol library, and you can see here
| | 02:43 | is the loaders that I got earlier.
| | 02:45 | Let's say my client doesn't like this
loader animation that I've created here.
| | 02:48 | They want to use something else, something a
little bit more traditional. So I can select
| | 02:51 | one of these and replace this one with it,
and so in order to do that, what I'll do is
| | 02:57 | come up to the Replace dialog box here, and
look. Well, I don't have any of these listed
| | 03:02 | here right now, so what I have to do is
actually select one of these--and let me drag this out,
| | 03:06 | so you can actually see what I'm doing.
| | 03:07 | I'll close the Symbols panel for now.
| | 03:10 | And once I click on one,
it adds it to my Symbols panel.
| | 03:13 | So now I've got that loaded as something I can
use in my document and if I go up to replace
| | 03:18 | again, it should be listed
there. And watch what happens.
| | 03:20 | If I click, it automatically switches over
to give me that symbol instead of the one
| | 03:25 | before that. And I could do this as many
times as I want. Say I wanted to replace it with
| | 03:28 | the Home icon. I can do that, or switch it
back to the original. I can do that as well.
| | 03:34 | So using symbols inside of Illustrator is
a great way to ensure that you can easily
| | 03:38 | switch objects in and out, and change multiple
objects all at once, simply by using a symbol
| | 03:44 | that you save into your symbols library and
then load up in any document that you wish.
| | Collapse this transcript |
|
|
5. Creating WireframesPlanning your project| 00:00 | The step in any web design process
is to plan out the project itself.
| | 00:05 | This means determining exactly what you are
building, where it's going, and who the intended
| | 00:09 | audience will be.
| | 00:11 | Going forward, that will be your driving
force throughout the entire design process, and
| | 00:15 | the planning stage is very important, although
it might be a little bit tedious. But it can
| | 00:19 | also be really simple.
| | 00:21 | Take this example that I have
here onscreen for instance.
| | 00:23 | I made this small sketch markup using a tablet
application called Adobe Ideas, which is available
| | 00:29 | from the Apple App Store.
| | 00:31 | This is a great application which allows me
to free-hand draw using my finger or a stylus
| | 00:35 | and easily mark up ideas as they come to me.
| | 00:38 | I can then export those out and place them
into file in Illustrator and then use that
| | 00:42 | as basis for my design going forward.
| | 00:45 | Let's assume here that I am designing a
WordPress theme inside of Adobe Illustrator.
| | 00:49 | As you can see in this markup, I have a header
piece; I'll have a content slider, several video
| | 00:55 | thumbnails, a bit of text, an image flush
right, and then a footer at the bottom.
| | 01:01 | Now this isn't the end of the planning stage.
| | 01:03 | Once I get the sketch into Illustrator, I have
to determine a lot of things about the project.
| | 01:08 | How wide is the overall web site I going to
be? How much space does the slider take up
| | 01:12 | in the overall scheme of things?
How big are the thumbnails?
| | 01:15 | Does the text overtake more of the image,
or does the image overshadow the text?
| | 01:19 | The footer, is it full-width footer?
Does it just encompass the area of the theme?
| | 01:24 | I have a lot of things that I have to decide,
but at least I have this sketch to go from
| | 01:28 | in order to keep things organized in my mind.
| | 01:31 | Once I have a sketch inside of Illustrator,
I keep it open, but then I start to create
| | 01:35 | a brand-new document.
| | 01:36 | That document then turns into my mockup,
which then becomes my full-blown design.
| | 01:41 | So without this starting point here, I
might not ever get where I need to go.
| | 01:46 | Again, the planning phase is
totally up to you on how you do it.
| | 01:49 | You can sketch things out on paper, you can
use a tablet application. Whatever you do,
| | 01:54 | find something that allows you to get the
ideas out of your head and into usable form,
| | 01:59 | so you can bring it in the Illustrator and then
start mapping out the remaining parts of your project.
| | 02:03 | So now, I am ready to create a new document.
| | 02:05 | I'll go to the File menu and choose New.
| | 02:08 | Once I am inside the New Document dialog box,
I am going to call this Blank Mockup.
| | 02:14 | For the Size I am going to leave Width at 1280.
For the Height I am going to increase this to 2000 pixels.
| | 02:22 | I want to make sure that my color mode is
RGB, PPI is 72, and Align to Pixel Grade is
| | 02:27 | set to Yes, so that
everything is nice, crisp, and clean.
| | 02:31 | Once I have that done, I will hit OK.
| | 02:33 | I now have a new blank document which I can
go and use throughout my entire design process
| | 02:39 | for the rest of this WordPress
theme that I might be mocking up.
| | 02:42 | From here, my task is to define the overall
size and dimensions of all of the different
| | 02:46 | aspects that are within this
sketch that I created earlier.
| | 02:50 | In order to do that, I am going to utilize
shapes, grids, and even some guides here inside of Illustrator.
| | Collapse this transcript |
| Using guides and rulers| 00:00 | Two of the most important things that you
will use when you're creating a mockup inside
| | 00:04 | of Illustrator are guides and rulers.
| | 00:06 | If you're not familiar with the ruler system
inside of Adobe Illustrator, in order to turn those on,
| | 00:11 | there are two ways.
| | 00:12 | You can use Command+R or Ctrl+R on your
keyboard or simply go to the View menu, choose Rulers,
| | 00:17 | and click Show Rulers.
| | 00:19 | Once you have rulers turned on, you'll notice
the 0 points correspond to the top left-hand
| | 00:23 | corner, and you're able to then use the
rulers to create guides in your document as well.
| | 00:28 | In order to create a guide, simply click and drag
out from the left or from the top, just like so.
| | 00:35 | If you want to get of rid of those guides,
you can actually click on them and press the
| | 00:38 | Delete key on your
keyboard and they will go away.
| | 00:40 | Once you have your guides in place in the
areas that you need them to be, you can lock
| | 00:44 | them down, and I'll show you how to
do that towards the end of this movie.
| | 00:48 | Once you've got a new document created for
your mockup, it's time to determine the overall
| | 00:51 | size and dimensions of the design
that you're going to be working on.
| | 00:55 | In this case I think that I'm going to
determine that the overall width of the WordPress theme
| | 00:59 | that I'm working on is
going to be 960 pixels wide.
| | 01:03 | So I'm going to grab the Rectangle tool, and I'm just
going to click somewhere in the middle of the artboard.
| | 01:08 | I'm going to type in "960" for the Width.
The Height really doesn't matter. I'll hit OK.
| | 01:13 | And then I'll switch to the Selection tool.
And I want this to be directly in the center of my document.
| | 01:19 | The easiest way to do that is
to utilize the Align panel.
| | 01:22 | So I'm going to go to Window, bring up Align.
| | 01:26 | I'm going to go to the top right-
hand corner and choose Show Options.
| | 01:30 | And I'm going to make sure that this is aligned
to the artboard instead of Align to Selection.
| | 01:34 | That way when I click Horizontal Align Centers,
it snaps right to the center of the artboard.
| | 01:39 | Now you may be wondering why I put the
shape out in the middle of my artboard.
| | 01:43 | Let me close the Align panel and show you.
| | 01:45 | Essentially, I've cheated. Because I don't
like to do math, basically what I have now
| | 01:50 | is a 960-pixel-wide area which I can then
define with guides and then get rid of the shape.
| | 01:56 | It just saves me the trouble of having to
calculate how far I've brought in each guide.
| | 02:00 | So I'm going to color this rectangle.
| | 02:01 | It doesn't matter what color it is.
| | 02:02 | I just want to be able to see it.
And then I'm also going to zoom in quite a bit, like so.
| | 02:07 | And then I'm going to take a guide and
drag it out from the left-hand side.
| | 02:11 | It should snap to that edge.
| | 02:14 | I'll take out another guide,
and it may not snap to this edge.
| | 02:19 | That's okay. Just drag it out close to it
and then when you drag it closer the second
| | 02:22 | time, it may snap in place, sort of like this.
| | 02:25 | And if it doesn't, you can always just kind of
nudge it around until it snaps on, something
| | 02:28 | kind of like that.
| | 02:29 | So now I have a 960-pixel-
wide web site that I've defined.
| | 02:35 | I can delete this, and I'll
zoom back out a little bit.
| | 02:37 | I'm now going to define some
content areas inside of my document.
| | 02:42 | In order to do this, I'm going to use guides.
And so let's say that I want the header to
| | 02:45 | start at the very top of this,
and I'll click and drag a guide down.
| | 02:50 | As I start to drag it down, I can let go
anytime I want, and you can see over here in the Info
| | 02:56 | panel where this is.
| | 02:58 | And as I click and drag it now,
the Info panel actually reacts to that.
| | 03:02 | So if I wanted this to be 100 pixels tall,
I'll just drag it until it gets to about 100
| | 03:07 | pixels. If you can't get it exactly at 100--
like I'm having trouble here--just zoom in
| | 03:11 | a couple of times, Command+Plus or Ctrl+Plus on
your keyboard, and you should be able to grab
| | 03:15 | that and then easily reset it
to 100 pixels. There we go.
| | 03:23 | Now I'm going to drag down and
create a guide for the footer as well.
| | 03:27 | This one is going to be a little bit tricky.
I'm going to have to do some substraction here.
| | 03:31 | As I drag down, you'll notice that the numbers are
really high because this is a 2000-pixel-tall document.
| | 03:40 | So let's say I wanted the
footer to be 300 pixels tall.
| | 03:42 | I need to take that to about 1700, so
I'll just drag this until it reaches 1700.
| | 03:47 | And I'm just looking in the Info panel, right up
there in the right-hand side and when it hits that,
| | 03:53 | I'll let it go. About 300 pixels.
| | 03:56 | And I can always fix this with my shape layers
layer, but for now I'm just defining content areas.
| | 04:03 | And so from here I want to add in some margins,
so I'll zoom back in, Command+Plus or Ctrl+Plus and
| | 04:10 | I'll drag out a guide from the top.
So that's going to snap to this, and I can drag this
| | 04:15 | out a little bit more.
| | 04:19 | I want this to be about 30 pixels from the
top, so we'll drag that down to about 130.
| | 04:25 | There we go. It creates about 30 pixels of space.
| | 04:29 | So now my header is going to be up here, going
all the way across the top, and I have about
| | 04:32 | 30 pixels of space before I get
to the actual content of the site.
| | 04:36 | Same thing for the footer.
| | 04:37 | I want about 30 pixels of padding between
the footer and the next bit of content, so
| | 04:43 | I'm going to drag that down.
And this needs to go about 1640. Here we go.
| | 04:52 | It's about 30 pixels of space.
| | 04:55 | Actually, that's a little bit more than 30
pixels, so let's adjust that a little bit.
| | 05:00 | It needs to be about 1670.
| | 05:03 | Here we go, and that's about 30 pixels space.
| | 05:10 | So now if I zoom out, I can do Command+0 or
Ctrl+0 to see all of the document, and so
| | 05:14 | now I've got my header
area defined here at the top.
| | 05:17 | I've got my padding or margin
between the header and the content area.
| | 05:22 | I've also get some padding at the bottom
above my footer area, which I've defined as well.
| | 05:27 | And I did that with all of these
guides that I drug out from the rulers.
| | 05:31 | Now once I have my guides in place and
they're exactly where I need them to be, I need to
| | 05:34 | lock them down, because as of right now,
I can still click on these and move them around.
| | 05:39 | So what I'm going to do is go to the View
menu and I'm going to choose Guides and choose
| | 05:43 | Lock Guides, and once I lock the Guides,
I can no longer click and drag them around.
| | 05:48 | They are just there as informational pieces for
me, so that I can use them while I'm assembling
| | 05:54 | the rest of my mockup.
| | Collapse this transcript |
| Developing a layout with shapes| 00:00 | Once you have all of your guides in place
inside of your Illustrator document, it's
| | 00:04 | time to start mocking things
up by utilizing shape layers.
| | 00:07 | I'll go over to the left-hand side of my
Tools panel and I'll grab the Rectangle tool.
| | 00:11 | And I'm simply going to use the point-and-click
method to start developing a mockup. Watch
| | 00:15 | how quickly I can go through this and create what
looks to be almost like a functioning prototype.
| | 00:19 | I'm going to go ahead and click one time,
and I want this to be 1280 pixels wide.
| | 00:24 | That's the full width of the design. And then
I define my header as being 100 pixels tall,
| | 00:29 | so I want that to be 100
pixels tall, and I hit OK.
| | 00:32 | So once I do that, this goes into place.
I'm going to give this a dark-gray color so that
| | 00:35 | I can actually see it, and then I should be
able to just move it right up there into place.
| | 00:41 | And if it doesn't fit right in there where
it's supposed to, you can kind of zoom in
| | 00:44 | and nudge it or simply use
the alignment options here.
| | 00:47 | I'll align it to the center and I'll
align it to the top edge, just like so.
| | 00:51 | Here is my header.
| | 00:52 | Now I'm going to define the content carousel
underneath here, so I'm going to go ahead and click.
| | 00:58 | I want this to be the full width of the
design. The design is 960 pixels wide, so 960.
| | 01:07 | And we're going to make this
about 300 pixels tall. Hit OK.
| | 01:12 | And now I'll just center this in between the
two guides, just like so. And I'll make it
| | 01:17 | flush with this top guide here.
| | 01:20 | There is my content carousel, and that may
actually be a little bit small, so let's expand
| | 01:25 | that down a little bit to
be about 400 pixels tall.
| | 01:29 | And if you can't get it exactly 400 pixels,
that's okay. You can simply come over here
| | 01:33 | to the Transform panel and you can make it
400 pixels tall, just like so, And then you
| | 01:40 | always want to make sure you center it back
up and flush it against that guide at the top.
| | 01:45 | There we go.
| | 01:47 | Now I'm going to create some thumbnails
underneath there. So I'll just come right here, click.
| | 01:53 | And I want these thumbnails to be about 300
pixels wide, about 250 pixels tall, and hit OK.
| | 01:59 | Again, these numbers are up to you.
| | 02:01 | I'm just doing this as a mockup right now.
| | 02:03 | So I'm going to go ahead and
move these up a little bit.
| | 02:06 | Here we go. And I'll copy this with
Command+C or Ctrl+C on my keyboard.
| | 02:10 | Then I'm going to use Command+F or Ctrl+F
to paste it in front, and I'll do Command+F
| | 02:16 | or Ctrl+F again to paste another one in front,
so now I have three copies of this, all on
| | 02:20 | top of each other.
| | 02:21 | I'll then take this top copy. Keeping it in line
with the other two, I'll snap it over here to this.
| | 02:27 | Then I'm going to select this, hold down
Shift, and select both of these. And now I'm going
| | 02:32 | to use the Align panel. Mine is actually
hidden in the Control panel, because I don't have
| | 02:37 | enough space up here, so I
have to click this link.
| | 02:39 | You can also go to the Window menu
and bring up the Align panel this way.
| | 02:43 | And so I'm simply going to distribute those
along the horizontal center, and when I do
| | 02:48 | that, it's going to
distribute them across the artboard.
| | 02:51 | That's not what I want, so let's undo that,
Command+Z or Ctrl+Z. And I need to change
| | 02:54 | this option down here, to Align to Selection,
and then distribute across, and it distributes
| | 03:00 | them just like so.
And I'll close this up.
| | 03:03 | Now I'll take these.
| | 03:04 | I'll copy them, Command+C or Ctrl+C, paste
them in front, Command+F or Ctrl+F, and then
| | 03:11 | I'll simply move them down using
my arrow keys, like so. Here we go.
| | 03:19 | So now, if I zoom out a little bit,
you can see my mockup is taking shape.
| | 03:24 | I've got a header, big content carousel.
| | 03:26 | I've got the thumbnails underneath.
| | 03:28 | Now I'm ready to add in some text down here
towards the bottom, so I'll just click to
| | 03:33 | draw out a text box.
| | 03:38 | And it doesn't really matter
how big this is right now;
| | 03:40 | I'm just going to click to draw one and then
grab the selection tool and I'll move it into
| | 03:44 | place--something like this--and
adjust the size accordingly. Here we go.
| | 03:53 | Now if you want to put some text in here,
you certainly can. I'm going to jump over
| | 03:57 | into my web browser now, and I'm going
to go to a site called baconipsum.com.
| | 04:03 | It's a really neat little site that allows
you to get some lorem ipsum text, or filler
| | 04:07 | text, based upon bacon, which is one of my
favorite foods. And so I'm going to get just
| | 04:12 | one paragraph of Bacon Ipsum and
I'm going to say Give me bacon.
| | 04:17 | Once it gives me the bacon, I just
simply select the paragraph that it gives me.
| | 04:21 | I'll copy it, Command+C or Ctrl+C, jump back
over into Illustrator, and then I'll grab my
| | 04:26 | Text tool and click right in there.
| | 04:29 | I'll grab my Text tool by hitting the letter
T on my keyboard and then just choose Edit,
| | 04:34 | and we'll choose Paste, or
Command+V or Ctrl+V on the keyboard.
| | 04:39 | Now if you want to add in some
more text there, that's fine.
| | 04:41 | I'll just paste in a couple more instances
of that text, just to give you an idea of
| | 04:46 | what it looks like.
There we go. Zoom in.
| | 04:50 | Now I'll grab the Rectangle tool here and
I'll draw out another rectangle, this one
| | 04:55 | about 390 pixels x 270 pixels tall.
| | 04:58 | Again, this is totally up to you how big or
how small these things are. And then finally,
| | 05:03 | I'm going to draw my footer, and I'm going to do
this in a precise way, just by pointing and clicking.
| | 05:07 | I'll do 1280. I want this to be full width,
and I want the height to be 300 pixels, and
| | 05:12 | I'll hit OK. And once I do that,
it should snap right into place.
| | 05:16 | If it doesn't, you can just go up to the
Align panel--Window > Align--and you can make sure
| | 05:22 | it is aligned to the artboard and then align
it flush left, and flush to the bottom, just
| | 05:29 | like so. I've got that padding at the bottom there.
And now let's go Command+0 or Ctrl+0 to see
| | 05:34 | my entire design.
| | 05:36 | Close the Align panel, and as you can see,
in just a few moments here I have created
| | 05:41 | a full mockup of the homepage of what could
be a WordPress theme that I'm developing here
| | 05:47 | inside of Adobe Illustrator, and I did that
simply by adhering to the guides that I set up
| | 05:51 | first, and then utilizing basic shape layers to
determine areas of content, or content blocks,
| | 05:57 | that can then be turned into divs or even
have pictures inserted in place so that they
| | 06:01 | look like a fully functional web site.
| | 06:04 | So as you continue to evolve your design process,
you'll find your own way of creating mockups,
| | 06:08 | but I just wanted to give you an insight
into my personal workflow on how I start my own
| | 06:13 | projects, so you can see how easy it is to
get these ideas out of your head and into
| | 06:18 | a functioning, working
environment like Illustrator.
| | Collapse this transcript |
| Using a grid system| 00:00 | Another way to plan and mock up a project for web-based
design is to utilize something called a grid system.
| | 00:06 | The most famous of these systems is something
called the 960 Grid System, and you can access the
| | 00:11 | 960 Grid System by going to your web browser and
going to 960.gs, for Grid System.
| | 00:20 | The 960 Grid System is a method of laying
out web sites by using a grid that is 960
| | 00:24 | pixels wide and evenly spaced using columns.
| | 00:29 | So what's up with the number 960?
| | 00:30 | Well, it's actually because using a number
like 960 lends itself to much cleaner
| | 00:34 | divisions numerically when dividing things
into columns, and it also nicely fits on most
| | 00:40 | computer monitors.
| | 00:41 | Now when you download the grid--and you can do
so by going to the 960 Grid System web site;
| | 00:45 | you just click the big ol'
Download button as it says--
| | 00:48 | you'll get several different templates for Acorn,
Fireworks, Flash, InDesign, GIMP, Inkscape,
| | 00:54 | Illustrator, OmniGraffle, Photoshop. You name it,
they've pretty much got a 960 Grid System template for it.
| | 01:00 | Take some time and go
through the 960 Grid web site.
| | 01:02 | It's going to be a great learning tool for
you going forward if you really want to get
| | 01:05 | into grid-based design.
| | 01:07 | But for now, let's go back and Illustrator
it for a moment and take a look at the grid
| | 01:10 | that we have open here.
| | 01:11 | The Grid System comes in two basic
setups: a 12-column and 16-column grid.
| | 01:15 | The 12 column, which is what we are looking
at here, contains columns that are 60 pixels
| | 01:20 | wide. So these little light red areas that
you see here are 60 pixels in width, and they
| | 01:25 | lend itself to a great even
division across the board here.
| | 01:29 | If I wanted to use this to create a mockup,
what I would do is startup by grabbing the Shape
| | 01:34 | tool and then using the guides to
tell me where to place my content.
| | 01:38 | So for instance, if I want a header that goes
all the way across the top here, I can just
| | 01:42 | click and drag until I get to right here,
and you see that's 940 pixel wide. And let's
| | 01:49 | say I wanted it to be about 100 pixels tall.
| | 01:51 | There we go, and there is my header.
| | 01:54 | And then let's say I wanted something that
goes about halfway across, so I'll take this
| | 01:59 | and I'll click right up against that guide, drag
it out. You can see the numerical values tell
| | 02:05 | me where I am at at all times, and
they snap right to these guides as I go.
| | 02:08 | So about 460 should be about enough, and let's
do something like 200 pixels tall. There we go.
| | 02:16 | And so if I want to duplicate this, I'll just
Command+C or Ctrl+C, Command+F or Ctrl+F on my keyboard.
| | 02:21 | That puts it right on top of it.
| | 02:23 | I'll switch to my Selection
tool and just move it over.
| | 02:28 | And it should sit nicely, just like that,
evenly spaced. And so now I'll take this.
| | 02:34 | Let's say I wanted three columns down here
at the bottom, and so I'll do something like
| | 02:41 | 300 pixels across, something like that.
And we'll do something like 150 tall like that,
| | 02:48 | and I'll copy, and that's Command+C or
Ctrl+C. And then I'll Command+F or Ctrl+F twice.
| | 02:57 | I'll take this with the Selection tool and just
move this one over, until it meets right there.
| | 03:04 | Take this one over, and as long as I stay
within the grid, I can evenly space things out.
| | 03:10 | I don't have to worry about
alignment or anything else.
| | 03:12 | I can just utilize the
Grid System as it goes here.
| | 03:16 | If I were to go to the View menu and turn
off the guides for a moment, you can see I
| | 03:21 | am creating a web site mockup just by using
these squares, and I am using even divisions
| | 03:26 | across, and I am also getting great pixel
values so that when I hand this off to a
| | 03:32 | developer, they can easily determine
how big the blocks of CSS need to be.
| | 03:36 | For instance, if I select this one, and look at the
Info panel, I know that it's 460 pixels wide x 200 tall.
| | 03:43 | If I grab this one, 940 pixels tall;
grab this one 300 pixels wide; et cetera.
| | 03:48 | Now in this case I have made mistake.
| | 03:50 | I kind of dragged it past
300 pixels. That's okay.
| | 03:52 | I can fix that just by using the Transform panel
and changing that back to 300 instead of 301.
| | 03:58 | So anytime you make a mistake, you can alter
that, but using a grid system is a great way
| | 04:03 | to get faster at prototyping or mocking up
whatever it is that you are trying to build.
| | 04:09 | And utilizing a system like this and
implementing it into your day-to-day workflow is really
| | 04:13 | going to take you a long way in terms of getting
faster and more efficient. And also, the developers
| | 04:18 | that you work with are really going to like
the fact that you are using a standardized
| | 04:22 | system like 960 in order to develop your web
sites, because then they can easily implement
| | 04:27 | this system if they already know it, and they can
easily translate your designs into functioning HTML and CSS.
| | 04:34 | So take some time, go to the 960.gs web site,
and take a look at it. Download the templates
| | 04:39 | and start to play with it.
| | 04:40 | I have included the 960 grid with 12 columns here,
but you might want to play around with the 16 column.
| | 04:45 | There is even a 24 column as well if you need
that little small level of control over your grid.
| | 04:51 | So, like I said, take some time, explore
this, see if you like it as a mockup tool.
| | 04:55 | If you do, it can really go a long way to
help you get faster; if not, you can just
| | 04:59 | go back to your conventional way of creating
your own mockups, but I just wanted to give
| | 05:02 | you an idea of how this system works so that
you could better understand it and hopefully
| | 05:07 | use it and implement it into your work.
| | Collapse this transcript |
|
|
6. Working with TextExploring the rules of typography| 00:00 | When it comes to typography, there aren't
necessarily any concrete rules that we have to follow;
| | 00:05 | however, in order to provide the best
experience for your users, you should try to implement
| | 00:09 | some best practices when you are
crafting your type for the web.
| | 00:13 | In this movie, I'll be exploring some of rules
of typography and discuss various ways that
| | 00:18 | you can implement them in your
workflow to get better result for your type.
| | 00:21 | Rule #1: readability trumps creativity.
| | 00:25 | One of the first considerations you will
make when designing with type is which typeface
| | 00:29 | you are going to use for your project.
| | 00:31 | While the type should reflect the tone of the
content you are creating, you should always
| | 00:34 | focus on making the type readable.
| | 00:37 | There are literally thousands
of typefaces available today,
| | 00:39 | so you are not stuck with
Arial or Helvetica necessarily.
| | 00:42 | But when it comes to web typography, we have
to walk a very thin line when it comes to
| | 00:46 | the readability of our text.
| | 00:51 | Rule #2: size does matter.
| | 00:54 | Your text should be large enough to be read
on any monitor or device, but not so big that
| | 00:58 | it appears out of place or
screaming at your end user.
| | 01:01 | In most cases, your body text will need to
be set between 12 and 16 pixels. Of course,
| | 01:06 | this is ultimately up to you.
| | 01:08 | But I tend to skew more towards the 16
pixels end of things, for optimal readability,
| | 01:12 | especially on newer devices and
displays with higher resolutions.
| | 01:16 | Remember, we are not just
designing for one screen anymore;
| | 01:19 | these days we have cover the full range of
devices that are accessing our content.
| | 01:23 | Nobody wants to have to pinch and zoom 10 or
15 times just to read your blog post, trust me.
| | 01:29 | Rule #3: scale it up.
| | 01:32 | Once you have chosen your base font size,
you should then think about the scale and
| | 01:36 | hierarchy of the remaining typographical
elements, like headings, subheadings, and menu items.
| | 01:41 | After you've defined a scale, you should stick
with that scale throughout your entire design.
| | 01:46 | This will make it much easier on whoever is
responsible for converting this design into
| | 01:50 | HTML and CSS later on down the road.
| | 01:52 | And it will also create a nice unified
appearance throughout your design as well.
| | 01:56 | You can create your own scale, but an example
might be starting at 14 pixels for your body text,
| | 02:01 | you could go up to 16 for your first heading, 18
pixels for your second, 21 for your third, and so on.
| | 02:08 | I usually define two points.
| | 02:10 | I call them Anchor Points.
| | 02:11 | I setup my body text size and
also my largest header first,
| | 02:16 | and then I fill in the numbers in between.
| | 02:18 | These two anchor points allow me to evenly
distribute my scale throughout the range of
| | 02:21 | type elements on my page.
| | 02:23 | Now let's move on to rule# 4.
| | 02:26 | Emphasis is an important thing. Occasionally
it will be necessary to emphasis a piece of
| | 02:30 | text in order to draw the user's attention to
some important element or piece of content.
| | 02:35 | This usually entails using both bold and
italics, but it can also mean using things
| | 02:39 | like all caps, extra bold, color
differences, and even underlining.
| | 02:44 | Whatever your choice for emphasizing your
content, stick with that choice throughout
| | 02:47 | your entire design; otherwise, your type
will look messy and not well thought out.
| | 02:52 | This also makes it easier when coding this
type via CSS, so the developer doesn't have
| | 02:56 | to create multiple emphatic styles.
| | 02:59 | The final rule revolves around whitespace.
| | 03:02 | The use of white- or negative space between
objects and type is a very powerful thing.
| | 03:07 | This empty space allows your elements to
breathe and has a way of creating its own emphasis
| | 03:11 | without the use of any extra tricks.
| | 03:13 | One of the big trends on the web today
is something called minimalist design.
| | 03:17 | Doing a quick Google search will give you
a better idea of what I am talking about,
| | 03:20 | but with these designs you see plenty of
whitespace throughout most of the compositions.
| | 03:25 | websites with good use of whitespace tend
to be easier on the eyes and invite the user
| | 03:29 | to casually browse without feeling rushed,
to see all of the content that's been simply
| | 03:33 | just jammed together.
| | 03:34 | Keep that in mind as you
begin to put your type together.
| | 03:37 | The only other rule that exist in typography
is the unwritten rule that allows us to break
| | 03:41 | all of the other rules I just talked about.
| | 03:43 | As long as you are providing a unique experience
for your user that both serves creative message
| | 03:48 | and delivers information, you are free to do
whatever you want when it comes to typography.
| | 03:53 | And with the advent of things like web fonts and
services like Adobe Typekit, the possibilities
| | 03:57 | for web typography are
only going to continue to grow.
| | Collapse this transcript |
| Using text as text vs. using text as an image| 00:00 | As you know, regular type is somewhat limited
when it comes to the web. Unless we employ
| | 00:04 | something like Google Web Fonts or Adobe
Typekit or know how to use JavaScript, our options
| | 00:09 | pretty much consist of regular old serif and
sans serif typefaces like Helvetica and Georgia.
| | 00:15 | For a while now, designers have been
circumventing this problem by simply saving out their fancy
| | 00:19 | text as an image and placing it
somewhere on their web page and it worked.
| | 00:23 | However, this method
isn't without its problems.
| | 00:26 | Let's take a look.
| | 00:27 | I have here on my screen two examples of text,
and just by looking at them you would think
| | 00:30 | that they are identical.
| | 00:32 | The one on top says Text as Text and the one
on bottom says Text As an Image. And so if
| | 00:37 | I were to select this piece of text on top,
you would notice that this is actually a live
| | 00:41 | text object inside of Illustrator, whereas,
if I select the one on the bottom, it has
| | 00:45 | a somewhat different appearance,
because it is simply a placed PNG file.
| | 00:49 | So let's assume that I used some sort of
fancy typeface down here and I had to place this
| | 00:54 | somewhere on my web page.
| | 00:56 | Well, the same holds
true inside of Illustrator.
| | 00:58 | I have some serious
problems with this. Number 1,
| | 01:00 | I'm struck at the static size that I have here.
| | 01:04 | If I were to try to resize this up, for instance,
the text really starts to get chunky and choppy
| | 01:11 | and I don't like it.
| | 01:12 | I've got a lot of artifacts.
| | 01:13 | That's because scaling bitmap images up
generally doesn't work all that well.
| | 01:17 | Now let's say, for instance, that I needed to
change the text. Well, that's easy, right?
| | 01:20 | Just double-click. Oh wait, that jumped me into
Isolation mode. Oh, that's right.
| | 01:26 | It's because it's not an actual piece of text.
| | 01:29 | So in order to change this text, I would have
to go back in another program that I created
| | 01:33 | it with and make the change, save out a new
graphic, and then replace it into this file
| | 01:38 | here or re-upload it to the web
site or wherever it might be sitting.
| | 01:42 | So again, sort of a problem.
| | 01:44 | Let's take a look at this text here. This
text here, easily editable: all I have to
| | 01:49 | do is double-click and I can change it.
| | 01:55 | I can select the Selection tool and I
can scale it up and down any way I want.
| | 02:01 | It always stays crisp and clean no matter
what. And let's assume that I was using this
| | 02:06 | as a regular text on a web page.
| | 02:08 | This would actually be selectable text that
people could copy and paste from my web site.
| | 02:13 | It would also aid in something called SEO,
or search engine optimization, so that when
| | 02:18 | my page is being crawled by search engines,
it would automatically pick up these words.
| | 02:23 | Whereas, if it was just an image,
there's nothing to pick up
| | 02:26 | because it's image data, unless of course you added
something like an alt text tag to it or something.
| | 02:30 | But if don't know how to do things like that,
you're pretty much stuck with just a plain old image.
| | 02:35 | So in the grand scheme of things, I think it is
definitely a better idea to use live editable
| | 02:40 | text whenever possible in your designs and
on web pages in general, because we want the
| | 02:45 | user to be able to select this
text, interact with this text.
| | 02:49 | Let's say they have some sort of disability.
| | 02:51 | We want them to be able to blow this
text up and still be able to read it.
| | 02:54 | There are a ton of reasons to create live
editable text on a web page versus using an
| | 03:00 | image, and I think they far outweigh the
creative possibilities that are enabled by utilizing
| | 03:06 | images versus text.
| | 03:08 | So, as you start to create the text elements
in your web designs, my recommendation is
| | 03:13 | to keep them as simple as possible, unless
of course you know that you can implement
| | 03:17 | these via web fonts or a service like Typekit.
| | 03:20 | Otherwise, keep them as simple as you can.
| | 03:23 | Get creative with spacing, line height,
whitespace, color combinations, emphasis, and things
| | 03:28 | like that, and you'll be glad you did, because
in the end you'll have a much more user-friendly
| | 03:32 | web site that can be accessed by
more people or more devices a lot easier.
| | Collapse this transcript |
| Understanding web-safe fonts| 00:00 | As we continue our look at typography for
our web graphics, it's a good idea to have
| | 00:03 | a firm grasp on the concept
of what web-safe fonts are.
| | 00:08 | So, what are these fonts exactly?
| | 00:09 | Well, the term web-safe fonts refers to fonts that
are generally available on any computer or device.
| | 00:15 | These are the safest choices for fonts that
will help you create a consistent user experience
| | 00:19 | for anyone viewing the content.
| | 00:21 | Designing with these fonts also makes it
easier on your web developer because they won't
| | 00:24 | have to use any web font trickery in order to
get things to get things to display properly.
| | 00:28 | In any case, you should be aware that just
because most computers contain these fonts,
| | 00:32 | it doesn't necessarily mean that all computers
do, and you should also know that each browser
| | 00:36 | renders text in its own unique way, so there
is no way to control the type completely when
| | 00:41 | it comes to the web.
| | 00:42 | However, by designing with these web-safe
fonts, you give yourself the best choice to
| | 00:46 | maintain the fidelity of the design
on as many destinations as possible.
| | 00:50 | When we talk about these web-safe fonts, we classify
them into three groups: serif, sans serif, and monospaced.
| | 00:57 | In the serif group, we find fonts like
Georgia, Palatino Linotype, and Times New Roman.
| | 01:03 | In the sans-serif fonts, we have things
like Arial, Helvetica, and Verdana, and then in
| | 01:08 | the monospace section, we have
Courier New, and Lucida Console.
| | 01:12 | Now these aren't the only options that are
available to you in these respective categories,
| | 01:16 | but they are the most common fonts, in my
opinion, that exist on the most computers.
| | 01:20 | So if you stick to these, you should be okay.
| | 01:22 | But as I've said before, you don't always
have to use a web-safe font; there are plenty
| | 01:27 | of ways around that.
| | 01:28 | If you're interested in those alternative
methods, you should probably check out James
| | 01:31 | Williamson's course on Up and Running with
Typekit or his Web Fonts First Look course,
| | 01:36 | both of which will give you a better idea of
how to implement rich typography into your
| | 01:39 | web site design projects.
| | 01:41 | But until you're ready to take that step,
stick with these safe fonts, and you should be okay.
| | Collapse this transcript |
| Creating and using paragraph styles| 00:00 | When you are creating layouts inside of
Illustrator that require you to use a lot of type, you
| | 00:04 | may find it useful to create what are
called paragraph styles to enable you to easily
| | 00:09 | style various elements of text
throughout your design quickly and easily.
| | 00:13 | In this movie, I am going to be exploring the
Paragraph Styles panel inside of Adobe Illustrator
| | 00:16 | and how you can use that to
expedite your type-styling process.
| | 00:19 | So the first thing I am going to do is zoom
in on this top paragraph in my design here.
| | 00:23 | So let's zoom in so I can see it a little
bit better. And so what I am going to do is
| | 00:27 | style this paragraph and create my paragraph
styles off of it, and then I'll be able to
| | 00:31 | quickly style this
paragraph underneath it to match.
| | 00:35 | So I am going to first select my Type tool, and I
am going to first select this heading right here.
| | 00:40 | I am just going to click and drag across it
to select it. And then I am going to go to
| | 00:43 | my Window menu and I'll scroll down until
I find the Type submenu, and I am going to
| | 00:47 | find something called Paragraph Styles.
| | 00:50 | And the Paragraph Styles panel should
appear onscreen. And right now it is telling me
| | 00:54 | that I am using the normal paragraph style,
and it's also got a little plus sign next to it.
| | 00:58 | Any time you see a plus sign applied to
something that means that there is a style override
| | 01:01 | happening at the moment.
| | 01:03 | So the first thing I am going to do is just
select this text and I am going to clear the
| | 01:07 | override, and I am going to do that by holding down
the Option or Alt key and clicking that plus sign.
| | 01:13 | And once I do that, the override goes away,
and this should just be back to the plain
| | 01:16 | old regular paragraph style that we have here.
| | 01:19 | I am going to select this heading and I am
going to start making some changes to it.
| | 01:23 | So this is a heading so it
needs to be a little bit bigger.
| | 01:25 | I am also going to change the font as well,
so I am go up here to the Character dropdown
| | 01:29 | and I am going to change this to
a nice web-safe font, Georgia.
| | 01:33 | I am going to blow up the size to something
like 24 points, and then I'm going to go into the
| | 01:42 | Paragraph options. You can get to that from
your Paragraph icon here or in the control
| | 01:45 | panel, either way.
| | 01:47 | Once I get into the Paragraph options, I can
start to do things like indentation. I can change
| | 01:51 | all different types of things here.
| | 01:53 | I am going to turn off hyphenate and I am
also going to add some space after the paragraph
| | 01:57 | to create some space, so I am going to
click right here. 10 points should be enough.
| | 02:02 | There we go, and we'll click away from that.
| | 02:05 | And I am also going to assign a color to
this, so let's grab orange for the color.
| | 02:11 | Here we go, and now once I have that all set up,
I am going to click New for Paragraph Style,
| | 02:17 | and that creates a new style called Paragraph
Style 1. And once I do that, I can then double-click
| | 02:23 | on it and I can rename it to Heading.
| | 02:25 | And if I want to see this style, I can double-
click to the right of it and it will open it up,
| | 02:31 | and it should tell me okay, Font Family Georgia,
Font Style Regular, Font Size 24, Space after
| | 02:37 | set to 10, Character Color is set to
orange, so that's good, and so now I hit OK.
| | 02:44 | So I have got the heading set up.
| | 02:45 | Now let's work on the paragraph underneath.
| | 02:48 | So I'll select the paragraph here, and the
paragraph underneath I am going to change
| | 02:52 | this font in the Character menu,
| | 02:55 | I am going to change this to be
Helvetica. I want this to be a light weight.
| | 03:02 | I want it to be 14 points.
| | 03:04 | I am going to open up the Character panel here
and I am going to adjust the leading a little bit,
| | 03:12 | make it about 24 points of leading,
make it a little bit more readable.
| | 03:17 | I am also going to change the color to this
light gray, and I am going to add some space
| | 03:24 | after it as well. So I am going to click the Paragraph
link here and add in a little bit of space after
| | 03:29 | something like 5 points, just like so.
| | 03:33 | Once I do that, I am going to go back over
to my Paragraph Styles panel, click the New
| | 03:36 | button. It creates Paragraph Styles 2.
| | 03:38 | I can double-click it and then
call this Body Copy and hit Enter.
| | 03:44 | I'll double-click out to the right of it to
make sure that I am creating everything correctly,
| | 03:47 | so the Font Family, Helvetica, Font Style
is Light, Font Size 14, the Leading was set
| | 03:52 | to 24, Space after is 5, and Character Color is
that neutral gray color I selected, so I hit OK.
| | 03:59 | So now I'll switch to my Selection tool.
And my box got a little too big here, so I am
| | 04:04 | just going to shrink it up
a little bit. There we go.
| | 04:06 | And once I do that, I have got my styles set up,
and now those are available to me anytime
| | 04:11 | I need them in this document. And if so I
select this text here, I can double-click
| | 04:15 | to make edits, and I'll select this paragraph.
| | 04:18 | This is a heading, and I'll
click heading, and it changes it.
| | 04:22 | Then I'll select this paragraph here and it
changes it to the Body Copy, automatically for me.
| | 04:27 | Now I am noticing that there is a style
override being applied to this, and so I can change
| | 04:31 | that by holding down Option or Alt key and
clicking that plus sign and it goes away.
| | 04:35 | I am not sure what the style override was,
but just getting rid of it ensures me that
| | 04:39 | I am using the correct paragraph style.
| | 04:41 | And so you can imagine, if you were styling
up multiple pieces of a web site mockup, how
| | 04:46 | much time this would save you.
| | 04:48 | It's going to take a little bit of time to
set these up initially, like the heading style
| | 04:52 | and the paragraph styles and things like that,
but it's going to avoid you having to do this
| | 04:55 | multiple times throughout your design.
| | 04:57 | So if you are setting up something like blog
posts or news, or if you are doing an About
| | 05:01 | page with lots of headings and lots of biographical
information and things like that, using something
| | 05:06 | like paragraph styles is a very powerful
way to expedite this process and get you back
| | 05:12 | to designing, rather than focusing on
changing up all of these type options.
| | Collapse this transcript |
| Creating and using character styles| 00:00 | In addition to using paragraph styles for
large blocks of text in our designs, we can
| | 00:05 | also use something called character styles to
enhance individual aspects of our topography.
| | 00:11 | One classic example of this is hyperlinks.
I use this all the time inside of my designs
| | 00:15 | to simulate where I want links to go
and also what I want them to look like.
| | 00:19 | So in this movie, I'm going to be exploring how to use
character styles to style up individual pieces of text.
| | 00:24 | So I'm going to zoom in on this top
paragraph here and once I do that, I'm also going to
| | 00:31 | bring up the Character Styles panel.
| | 00:33 | I can do that by going to the Window menu,
going down to Type, and selecting Character
| | 00:38 | Styles; that brings them up.
| | 00:39 | They're going to live in the same box as
paragraph styles, so if you already had paragraph styles
| | 00:43 | open like this, just simply move over to
Character Styles and you'll see it just like this.
| | 00:47 | The first thing I need to do after I get
that open is to select a piece of text,
| | 00:50 | so I'm going to come right here in this
first paragraph and simply double-click to start
| | 00:53 | editing and then select this last bit of text
here. And so once I have this last bit selected,
| | 00:59 | I'm going to start making changes to it.
And so hyperlinks in general have a different
| | 01:03 | color. They might actually have an underline.
| | 01:04 | They might be bold. Any number of things
could happen when it comes to hyperlinks, so I'm
| | 01:08 | just going to add in some things here.
| | 01:10 | So I want to stick with the color
scheme that I've got going on here.
| | 01:13 | I've got the orange and the light gray,
so I'm going to make the hyperlink orange.
| | 01:17 | So I'm just going to select orange from here.
| | 01:19 | You'll see as soon as I do that, a little plus
sign appears, indicating that I'm overwriting
| | 01:22 | the normal character style, and that's okay.
| | 01:24 | I'm also going to make this bold, and so in
order to do that, I'm going to come up to the
| | 01:30 | Character panel here for just a moment, and once
I do that, I'm going to change from light to bold.
| | 01:37 | There we go. And then I'm also going to add an
underline, and I can do that from the Character
| | 01:42 | panel as well. So let's go back up to the Character
panel here and I'll just click Underline right there.
| | 01:49 | So now that I have all of this created,
I can click on the new Character Style button.
| | 01:53 | It's going to create Character Style 1.
| | 01:55 | I can double-click that and I'll call this
hyperlink and hit Enter, and now I have that
| | 02:01 | style saved. And I'll click away from it and
switch to my selection tool, and I'll pan
| | 02:06 | down here, temporarily holding down my Spacebar key to
do that, and I'm going to double-click inside of this.
| | 02:12 | I'll select this last bit of text as well,
and let's apply the hyperlink style. And once
| | 02:16 | I do that, you'll see it becomes bold, it changes
the color to orange, and if I grab my selection
| | 02:21 | tool, it looks just like the one above it.
| | 02:25 | So I've now created a character style that I
can then use to simulate hyperlinks anywhere
| | 02:29 | in my designs and. So now that I have this
saved, I can use this as many times as I want
| | 02:34 | inside of this design of this design.
| | 02:36 | I could create new artboards to stimulate
pages and still use this character style across
| | 02:40 | the board for everything. It helps me create
a unified appearance throughout, and it also
| | 02:45 | saves me a ton of time from having to set up
all of those options like the bold, underline,
| | 02:49 | and color change each and every time.
| | 02:51 | Now I just double-click, select a piece
of text, click on the character style,
| | 02:56 | it applies it, and I'm done. It saves me so
much time in the long run, and I think it's
| | 03:00 | going to save you a lot of time too.
| | Collapse this transcript |
| Simulating the CSS box model| 00:00 | Regardless of whether or not you are adept
at writing your own CSS and HTML, it is very
| | 00:06 | important for you as a web designer to understand
how both of those technologies work, especially
| | 00:12 | when it comes to CSS. And so in this movie
we're going to be exploring something called
| | 00:16 | the CSS box model and how you can
simulate that inside of Adobe Illustrator.
| | 00:21 | And so here on my screen I have a little
mockup of the CSS box model, and so basically what
| | 00:26 | we're seeing here is how objects
are interpreted on the web as CSS.
| | 00:31 | These are something that we call divs, and
when you create a div on the Internet you have
| | 00:36 | three basic areas that apply to that div.
You have the inner portion here, which contains
| | 00:41 | the content as you can see.
| | 00:43 | We also have the out portion, which is
something called padding, which helps create a little
| | 00:48 | bit of space inside of the div
to sort of cushion the content.
| | 00:50 | That's why you can think of it as padding, it
gives you cushion. And then on the outside,
| | 00:55 | this red area here is called the margin area.
| | 00:57 | This is the area that separates the
content from other surrounding content elements.
| | 01:02 | So when we're defining objects on the web we
define them as a content area with a width
| | 01:06 | and a height value.
| | 01:07 | We define a padding value to give
them a specific amount of padding.
| | 01:12 | Then we define a margin to determine how far
other objects will be from this particular object.
| | 01:17 | Now you're also noticing that I have a
black stroke right here on this object.
| | 01:22 | That indicates the border.
| | 01:23 | You can also add a border to the element.
The border of the element lies on the padding
| | 01:29 | element only though.
| | 01:30 | If you have no padding applied, the border
will apply itself directly to the content area.
| | 01:35 | Applying a border to something with
padding applies it on the inside, like this.
| | 01:39 | The border will not go on the
outside of the margin area.
| | 01:43 | In most cases, the margin area will actually
be a transparent area that is defined simply
| | 01:48 | by a pixel value, so in all actuality all
you would probably see if this were a true
| | 01:53 | piece of CSS or an object in CSS, you would
actually just see everything up into the border
| | 01:59 | and the red background would not exist.
| | 02:02 | Let's take a look at how we can start to
simulate this box model inside of Adobe Illustrator
| | 02:07 | to make it a little bit easier for us to
translate our designs over to the development side.
| | 02:12 | I have open here an example of some sidebar
content that I want to include on a blog design
| | 02:16 | that I'm working on. And so what I need to
do here is define a content area and then
| | 02:21 | also add some padding to it, add in some colors,
and then if I want to, I can also define margins
| | 02:26 | a little bit later. But in this case I
think I'm just going to define the content area
| | 02:31 | and the padding to get a
better idea of how that works.
| | 02:34 | So the first thing I need to do is
select the object with my Selection tool.
| | 02:37 | With that done, I'm going to go up to the
Type menu and go down to Area Type Options.
| | 02:43 | Once I get into the Area Type Options dialog
box, I have an option down here at the bottom
| | 02:47 | called Offset and then inside
of Offset I have Inset Spacing.
| | 02:51 | And Inset Spacing basically allows you to
add padding around the outside of whatever
| | 02:56 | text object you're working on. And if I click
Preview and then start to increase the Inset
| | 03:01 | Spacing, watch what happens.
| | 03:05 | I'll crank that all the way up to 20,
and you'll notice as I'm doing this the overall
| | 03:10 | width and height of the box remains the same.
It's just adding the padding inward. And that's
| | 03:15 | what padding actually is; it's inset spacing.
| | 03:18 | And so it's also caused my text to sort of
overflow and that's okay. I can rearrange this
| | 03:23 | after I get out of this box. But let's say
that I wanted to add 20 pixels of space all
| | 03:27 | the way around the outside. Then I enter
an Inset Spacing of 20 and I'm ready to go.
| | 03:32 | Now it should be noted here that you can add
different amounts of padding when you're working with CSS.
| | 03:37 | You can different padding to the top, left,
right, and bottom, but in Adobe Illustrator,
| | 03:41 | you can only simulate the padding through
Inset Spacing and that's just a one-shot deal.
| | 03:45 | You get one increment to go
all the way around evenly.
| | 03:49 | And so once I do that, I'm going to go ahead
and click OK. And if I need to resize this,
| | 03:53 | I just take this and drag it down and it
resizes without any problem. You notice the inset
| | 03:58 | spacing remains the same all
the way around, so, pretty neat.
| | 04:03 | Now what if I wanted to add a color to the
back of this, because it's going to be a sidebar
| | 04:07 | element, almost like a widget for instance.
| | 04:09 | So let's add some color to the background.
| | 04:11 | I'm going to have to use something called
the Appearance panel in order to do this,
| | 04:14 | so I'm going to go up to the Window menu
and make sure Appearance is checked. It is.
| | 04:18 | That means it should somewhere over here.
And so if I find that I can drag it out into
| | 04:22 | my workspace, and I can start to work with it.
| | 04:25 | You'll notice that as I have this entire object
selected that I get this indicator here indicating
| | 04:30 | I have a type object selected,
and that's exactly right.
| | 04:33 | You should think of type objects as a group
of things, because this is merely a group
| | 04:36 | of characters together.
| | 04:38 | If you were to double-click on the word "characters,"
it would actually switch you to the Type tool
| | 04:42 | and allow you to edit the type individually.
| | 04:45 | So by clicking on that Type section, you're
actually targeting the entire group. So I'll
| | 04:50 | switch back to my selection tool for a moment
and then click on the type to make sure I'm
| | 04:54 | targeting that. And then once I have that
selected, I'm going to then add a new fill on top of it.
| | 05:00 | So I'll click this to add a new fill, and
you'll notice when I do that it adds a new
| | 05:03 | black fill on top, and my text actually went from
the brownish color that it was to this black fill.
| | 05:09 | Well, the problem with that
is it's applied to the text;
| | 05:12 | it's not actually applied to the box.
And so what I need to do is change this fill to
| | 05:16 | be applied to the overall rectangle.
| | 05:18 | First of all, I'm going to collapse this
up, so I get a little bit easier to read.
| | 05:21 | I'm going to make sure the fill is selected, and
you can tell that because it will be highlighted.
| | 05:26 | And then I'll come down here to the fx icon
and when I get to the fx icon, I can go all
| | 05:31 | the way up here to Convert to Shape and
select Rectangle. And once I do that, I'll click
| | 05:37 | Preview, and you can see
exactly what's going on in here.
| | 05:41 | By default, it's going to give me a relative
option here to say extra width and extra height,
| | 05:46 | and that's going to add some extra space on the
outside of the padding area that we defined earlier.
| | 05:52 | Now, this is a great way to simulate margin,
but if you want the color to simply be maintained
| | 05:58 | within the padded area and not outside in
the margin area, then you would actually need
| | 06:03 | to set this to zero. So I'm going to set
this back all the way down to zero, and you can
| | 06:08 | click or you can simply enter in the
value zero. No big deal either way.
| | 06:12 | And so now this is constrained within the
padded area and I've got the shape set to
| | 06:17 | rectangle. Everything looks good.
| | 06:18 | I'll hit OK. And now I need this fill to be behind
the text, because right now it's overflowing the text.
| | 06:25 | So what I'm going to do is click here and
drag this down until I see a little white
| | 06:29 | line appear underneath
characters, and then I will release.
| | 06:32 | Once I release that,
the text pops back up on top.
| | 06:34 | I can then change the color of the fill by
clicking to access this. And let's say I wanted
| | 06:39 | to make this sort of a yellowish color,
something like this. Click away, and there we go.
| | 06:46 | So now I can bring my Appearance panel back
over here and dock it on the right, and I've
| | 06:50 | got a really nice representation of what this
div would look like in CSS. And so theoretically,
| | 06:57 | this div would be X amount tall by X amount wide,
with 20 pixels of padding all the way around it.
| | 07:03 | Now what if we're working in Illustrator
and we feel the need to resize this box?
| | 07:07 | Well, if I click and drag out to the right,
you'll notice that the box resizes without any problem.
| | 07:12 | If I click and drag down to the left,
it resizes without any problem as well.
| | 07:17 | So you can actually control the width and
height of the box without skewing the text,
| | 07:23 | simply by clicking and dragging around just
like you would any other object. That inset
| | 07:28 | spacing remains the same no
matter what you're doing.
| | 07:31 | So this is a great way to sort of simulate the
actual CSS layout inside of your Illustrator
| | 07:38 | mockups by utilizing inset spacing and also
converting these fills to the shape of a rectangle
| | 07:45 | to add a little bit of color or even add
some margin space to the outside as well.
| | 07:49 | So the next time you are mocking up things
inside of Illustrator, try to utilize this
| | 07:53 | technique to simulate this box model, and
you'll be really glad you did, especially when you
| | 07:57 | start to take this into your CSS. Or if you
hand it off to a developer and they take a
| | 08:02 | look at it, they'll be able to say "oh,
okay he's got 20 pixels of inset spacing.
| | 08:06 | That equates to 20 pixels of padding." It just
makes it easier for everybody all the way around.
| | Collapse this transcript |
|
|
7. Using Live EffectsUnderstanding object appearance| 00:00 | As you begin to create and work with more
complex artwork inside of Adobe Illustrator,
| | 00:04 | it becomes increasingly more important for you
to understand something called object appearance.
| | 00:09 | In this movie, I'm going to be exploring how
to decode object appearance and also how to
| | 00:14 | use something called the Appearance panel to
gain a better understanding of what's going
| | 00:17 | on inside of your document.
| | 00:19 | So the first thing I'm going to do is create
a new document, just going to File > New.
| | 00:22 | And again, the size does not
matter, so you just hit OK.
| | 00:25 | And so once we do that, I'm just going to
draw out a shape onto my artboard. In this
| | 00:30 | case, I'll draw a circle.
| | 00:32 | Once I have the circle on my artboard,
I'm going to add some things to it. So I'm going
| | 00:36 | to add a gradient fill, and I'll switch to
target the stroke, and I'll increase the size
| | 00:42 | of the stroke to something like 10 points.
And I'll go up to the Effect menu, add a quick
| | 00:50 | drop shadow, and I'll also go up to the
Effect menu, and I'll choose Stylize, and let's do
| | 00:59 | an Outer Glow. Preview that, change
the color, something crazy like green.
| | 01:06 | There we go. So I've got several
different things applied to this object.
| | 01:12 | At its core, it is still nothing more than
a vector ellipse or circle shape, but it
| | 01:16 | has several different layers of appearance
applied on top of it. And so if I open up the
| | 01:22 | Appearance panel--and that's over here on the
right-hand side; you can also go to Window
| | 01:25 | and hit Appearance to bring it up--
| | 01:27 | you'll notice that I get a laundry list of
everything that's going on inside of this
| | 01:32 | shape. So I see here that
it's got a ten-point stroke,
| | 01:36 | it's got a fill applied to it, it's got a
drop shadow, an outer glow, and then the default
| | 01:40 | opacity at the bottom.
| | 01:42 | So when you open up a document, the first
thing you should do when you're looking at
| | 01:46 | different things that--especially when
other people have created the artwork, you should
| | 01:49 | be clicking on those objects and then looking
at the Appearance panel to gauge exactly what's
| | 01:53 | going on, so you can see how to effectively
alter or change the objects that are on screen
| | 01:58 | and you can also understand why
certain objects look the way they do.
| | 02:02 | You have the ability, through the Appearance
panel, to target these individual objects by
| | 02:06 | clicking on them and then
making changes like so.
| | 02:10 | For instance, if I wanted to change the fill,
I could just target like this, go in and change
| | 02:15 | the fill to something like
this pattern fill like this.
| | 02:18 | If I wanted to change the outer glow,
I just click on Outer Glow to make it active, and
| | 02:22 | then this little hyperlink here allows me to edit
the Outer Glow as well, so I can make a change.
| | 02:27 | Let's say I wanted to change the color to
something like a blue. Hit OK and I can hit Preview
| | 02:33 | to see it, hit OK. There we go.
| | 02:35 | I could also change the stroke from here.
| | 02:37 | Let's shrink it down a little bit. And we'll
change the color as well, something like bright
| | 02:42 | green. And I can click away and it will close.
| | 02:46 | You can add other attributes
from the Appearance panel as well.
| | 02:49 | Let's say for instance, that I wanted to put
another fill on top of this for whatever reason.
| | 02:54 | I could come down here and
click to add a new fill.
| | 02:56 | It adds a new fill on top.
Every time you add a new object,
| | 02:59 | it automatically adds it on top of the
other objects that you're working on, so once I
| | 03:03 | do that, I could select this fill here.
And you notice it goes over the top of it, this
| | 03:08 | gradient which goes form pink to transparent.
| | 03:11 | I can then also add another stroke to this
if I want to, by clicking here, so that adds
| | 03:15 | another stroke to it.
| | 03:17 | When I go into the Stroke panel here,
I could change how that stroke is aligned.
| | 03:22 | I can then change the stroke color to
be a different color inside of there.
| | 03:27 | So you can really do some cool things with
the Appearance panel, but you have to first
| | 03:32 | understand how to read what's going on in here.
So when I first open this up, if I clicked
| | 03:36 | on this object, I would say, okay its got a
9-point stroke set to the inside with this color.
| | 03:41 | It's got a gradient fill right here on top
of that. It's got another stroke underneath
| | 03:45 | there which is five points and set to
the default. It's got a pattern fill here.
| | 03:49 | It's got a drop shadow and an outer glow.
And so anything that I want to change, I just target
| | 03:54 | that specific attribute, make any changes I
want, and then I can go from there. You can
| | 03:59 | also remove things from the
Appearance panel as well.
| | 04:02 | Let's say I don't like
that extra stroke I added.
| | 04:04 | I'll just target it and click
the trashcan to throw it away.
| | 04:07 | You don't like the original stroke?
| | 04:09 | That's okay. You can toss that away too.
| | 04:10 | If you don't like this new fill, that's all right;
just toss that away. And then I can change
| | 04:15 | this fill back to just a regular color, I
can select the drop shadow and the outer glow,
| | 04:23 | and now in just a few clicks,
I'm right back to a normal shape.
| | 04:26 | I didn't have to go in and find those anywhere;
| | 04:29 | they're all located right there in the
Appearance panel. So the more that you pay attention
| | 04:33 | to what's going on in the Appearance panel
each and every time you select an object,
| | 04:37 | the more you'll understand about your
document and the easier it'll be for you to change
| | 04:41 | things going forward.
| | Collapse this transcript |
| Applying and editing live effects| 00:00 | One of my favorite things to use inside of
Adobe Illustrator has got to be the Live Effects.
| | 00:05 | Live Effects allow you to nondestructively
edit artwork and easily change that edit
| | 00:11 | any time you need to on the fly.
| | 00:13 | Live Effects are a great way of
manipulating your artwork into different shapes, also
| | 00:17 | adding specific effects like drop shadows,
glows, warps. Anything you want to do to your
| | 00:22 | artwork you can pretty
much do with a Live Effect.
| | 00:24 | And like I said, the best
part is they're nondestructive.
| | 00:27 | You can always turn them on, turn them off.
| | 00:28 | You can change them anytime you want.
| | 00:29 | It's almost like a layer style in Photoshop.
| | 00:31 | It's very, very useful.
| | 00:33 | And so inside of Illustrator we have access
to several different effects in the Effect
| | 00:37 | menu, and the ones that are listed underneath
Illustrator Effects are the ones that I'm talking about.
| | 00:41 | We have things like 3D; Convert to Shape;
Distort & Transform; Path operations, Pathfinder;
| | 00:48 | Stylize, which includes your drop shadows,
your feathers, your glows, that kind of thing;
| | 00:52 | SVG Filters; and of course the
most widely used one, the Warp.
| | 00:57 | In this movie, I'll be exploring how to
utilize these Live Effects and also how to edit them
| | 01:01 | in a moment's notice in case the client
comes back and says "I need it to be
| | 01:05 | a little less warped" or something like that.
| | 01:07 | And we all know that clients do
come back and say things like that.
| | 01:10 | So I'm going to select this little banner
piece of the robot logo, and basically what
| | 01:15 | the client has told me is that they
need this to be in an arch shape.
| | 01:19 | They need it to be arched
right up in this area here.
| | 01:22 | And so in order to do that, I could just
re-create the shape using the Pen tool or I could try
| | 01:26 | to use the Converter Anchor Point tool to
turn corner points into curves, et cetera,
| | 01:30 | but I think adding a live
effect is a lot easier.
| | 01:33 | So with the object selected, I'm going to
go to the Effect menu, I'll go down to Warp,
| | 01:38 | and I'm going to select Arc.
| | 01:42 | With that selected, I'm going to turn Preview
on so you can see exactly what's happening
| | 01:45 | here, and when I do that, you can see that
I get a real live preview of what this is
| | 01:49 | going to look like when it's finished.
| | 01:50 | I can drag this up or down to control the
amount of the arc so if the client wants it
| | 01:55 | to be arced up, I do like this;
if they want it to be down, I do it like this.
| | 02:00 | So in this case, I think we'll need to do
it about 10. And I may actually change this
| | 02:04 | from Arc to Arch, just to keep it a little even
on each side. It makes it a little cleaner-looking.
| | 02:10 | And I'm going to increase the Bend
amount to something like 20. There we go.
| | 02:16 | And once I hit OK, that is now applied.
| | 02:19 | In other programs, like Photoshop for
instance, you might apply a filter to something and
| | 02:24 | you are stuck with it.
| | 02:25 | Well that's not the case inside of Illustrator.
| | 02:27 | All of these effects that you apply get
recorded inside of the appearance panel, as I could
| | 02:31 | see when I bring the
Appearance panel, Warp is right here.
| | 02:34 | It says Warp: and then the word Arch,
letting me know which warp is being applied.
| | 02:39 | Anytime I want to get into modify that, like
let's say the client comes back and says
| | 02:43 | "No that's arched up too high.
| | 02:44 | We need it to be a little bit more shallow."
That's okay. Just click on Warp and then take back the Bend.
| | 02:50 | Let's take that back to about 10.
| | 02:52 | I'll preview it first to see it.
| | 02:53 | It's just kind of slight bend;
that's okay. Hit OK, and we are good.
| | 02:58 | If the client says "No, I
don't want it to be warped at all.
| | 03:01 | I needed this to be straight again," just
take that, throw it away, and you have a really
| | 03:06 | straight object once again.
| | 03:08 | So applying these live effects is going to be
a great way for you to enhance your workflow
| | 03:13 | because of the fact that you can get in and
change them at anytime, you can throw them
| | 03:16 | away at anytime, and they're
nondestructive to your artwork.
| | 03:21 | So the next time you have to do things like
warp or change an object, my suggestion would
| | 03:25 | be to explore the Live Effects panel versus
trying to do it some other way, and see what
| | 03:29 | you can come up with.
| | 03:31 | And then anytime you need to make a
change, just hop right in and do it.
| | Collapse this transcript |
| Creating and using drop shadows| 00:00 | Drop shadows have become an essential part
of any web designer's toolkit, and these days
| | 00:06 | it's even easier to implement drop shadows
through things like CSS, but you also need
| | 00:10 | to know how to simulate them in a program
like Adobe Illustrator so that when you go
| | 00:14 | to convert these out to CSS, or your developer
takes over, they will know exactly how this
| | 00:20 | is supposed to look in the grand scheme of things.
| | 00:22 | So in this movie I'm going to be exploring
various ways that you can apply drop shadows
| | 00:26 | to your objects here inside of Illustrator.
| | 00:28 | So the first thing I'm going to do is
select an object on my screen, and I'm just going
| | 00:32 | to select this back portion of
the ad that we are working on.
| | 00:35 | This is a 300 pixel x 250 pixel ad that's
going to go on the sidebar of a web site,
| | 00:40 | and so I want this to look almost like
it's three-dimensional, like it's coming off the page.
| | 00:44 | But in order to do that, I need to create
some depth between it and the background.
| | 00:47 | And simulating depth is very easy when
you use something like a drop shadow.
| | 00:52 | So with this object selected, I'm just going
to go up to the Effect menu and choose Stylize
| | 00:56 | and select Drop Shadow.
| | 00:58 | And when the Drop Shadow box opens, I'll go ahead and
click Preview so we can see exactly what's going on.
| | 01:03 | And I'm going to do a little bit of
maneuvering around with the settings in here.
| | 01:08 | The first thing I'm going to do is
take the Opacity down to about 40%.
| | 01:15 | And once I get the opacity down
to about 40%, it should be okay.
| | 01:19 | And now I'm going to increase the Offset of
this as well, so we'll go 2 pixels on the X Offset
| | 01:22 | and 2 pixels on the Y Offset.
| | 01:24 | I'm also going to increase the Blur amount
a little bit, so let's do that to about 5
| | 01:28 | or 6 pixels, depending on
your personal preference.
| | 01:32 | And then I'm also going to change the color
as well. So the color for this, I'm going
| | 01:36 | to lighten it up, just a tad.
| | 01:38 | I don't want it to be quite as dark, hit OK.
| | 01:40 | And so now I get a preview what this looks like and
if I hit OK, it's going to be applied to that object.
| | 01:46 | I can click away from it to get the full
preview of what it's going to look against a white
| | 01:50 | background, and it looks pretty good.
| | 01:52 | It looks like it's setting there, kind
of extruding off the page a little bit.
| | 01:55 | If I am not happy with that drop
shadow, it's very easy to correct that.
| | 01:58 | I can just click on the object again, find
that drop shadow in the Appearance panel, and
| | 02:02 | click it, and that opens up with the Drop
Shadow properties and I can then make a change.
| | 02:07 | So for instance, if I think the shadow needs
to be darker, I can increase the Opacity to
| | 02:11 | something like 50%.
| | 02:12 | I can also back off the Blur amount a little
bit to kind of solidify it up a little bit,
| | 02:17 | so let's back that down to
something like 3 pixels.
| | 02:20 | If I turn on the Preview, you'll actually
see that snap in place and I can hit OK
| | 02:24 | to commit, and once I click away, you can
see now it's got more of defined box shadow.
| | 02:28 | It looks a lot better.
| | 02:30 | And when someone goes to re-create this inside
of CSS, it'll actually be pretty easy to do
| | 02:34 | that, because I've already given them the X
and Y Offset values. I have also given them
| | 02:38 | the Opacity and Color values for the shadow,
and I've also given them the Blur amount.
| | 02:42 | And when you are talking about drop shadows
in CSS, those are the most important things
| | 02:46 | you need to worry about.
| | 02:47 | You need to worry about color,
opacity, offset, and blur.
| | 02:50 | Those are the main factors that go into
making a CSS box shadow, and that's exactly what
| | 02:55 | we've re-created here inside of Illustrator.
| | 02:57 | So anytime I need to apply a drop shadow,
I pay attention to those specific numbers
| | 03:02 | and I might even write them down, so that I
can then share those with my developer or
| | 03:05 | keep them as notes if I'm the developer, so
that I can easily implement this drop shadow
| | 03:10 | into workable CSS later.
| | Collapse this transcript |
| Creating more flexible rounded rectangles| 00:00 | Rounded rectangles are an essential part of
any web design. We use these things for anything
| | 00:05 | from a button all the way up to a banner ad,
even in logos and icons and things like that.
| | 00:10 | The problem with Adobe Illustrator's Rounded
Rectangle tool is the fact that it is so inflexible,
| | 00:15 | meaning there's no way to really
change the corner radius once it's been set.
| | 00:20 | Let me show you an example of what I mean.
| | 00:22 | I'm going to go to the File menu and choose
New, and once I create a new document--it does
| | 00:26 | not matter size--I'm going to come over to my
tools panel, click and hold on the Rectangle
| | 00:30 | tool, and find Rounded Rectangle.
| | 00:32 | Once I have the Rounded Rectangle tool selected,
I can then click and drag to start drawing
| | 00:37 | out a rounded rectangle.
| | 00:39 | Now, I can change the corner radius simply by
tapping my down and up arrow keys on my keyboard.
| | 00:45 | As I do this, you can see
that the corners get more round.
| | 00:47 | I'm just holding down the up arrow key
right now. Holding down the down arrow key will
| | 00:53 | square them back up.
| | 00:55 | The problem I have with this tool is that
once I let go of the mouse, I'm stuck with
| | 01:01 | whatever corner radius I've chosen, unless
I want it go and grab the Direct Selection
| | 01:06 | tool and move anchor points around and
things like that. I don't want to do that.
| | 01:09 | I want to quickly and easily be able
to change the corner radius on the fly.
| | 01:15 | And lucky for us, we are not stuck with this.
| | 01:18 | In other applications like Adobe Fireworks
for instance, they have something called Smart
| | 01:21 | Shapes, and in Illustrator we don't have those, but
we can simulate them. So let me show you what I mean.
| | 01:26 | I'm going to delete that and I'm just
going to bring up the Regular Rectangle tool.
| | 01:31 | And I'm going to select no stroke, and I'm
going to give this an orange fill so you
| | 01:38 | can really see what's going on.
| | 01:39 | And so I'm just going to click and draw out
what might be a button. And so I'll put that
| | 01:44 | out on the artboard, and so now what I want
to do is round the corners on this, and in
| | 01:49 | order to that I'm going to use a Live Effect.
| | 01:51 | So I'm going to go up to the Effects menu,
I'm going to go down to Stylize, and I'm going
| | 01:55 | to choose Round Corners.
| | 01:58 | And once I choose Round Corners--
I'll move this up so you can see it--
| | 02:01 | I'm going to turn Preview on. And it maybe a
little hard to see, but if I really round
| | 02:05 | this up, you'll start to see the corners
rounding in. See that? And if I drag this back down,
| | 02:09 | I can do something like let's say
20 pixels for instance, and hit OK.
| | 02:14 | I have a nice rounded rectangle.
| | 02:17 | The best part about this is, though, if I use
the Appearance panel, I can select this at
| | 02:22 | any time, even if I've saved it, closed it,
and open it back up; it does not matter. I can
| | 02:26 | select this anytime.
| | 02:27 | In my Appearance panel, I simply find the
Round Corners effect, I click on that, and
| | 02:32 | then I can change the Radius to let's
say 10, hit OK, and it changes it to 10.
| | 02:39 | If my client comes back and
says, "No, we need it to be more round,"
| | 02:42 | that's okay. Select the object, Round Corners,
crank it back up, something like 25 pixels.
| | 02:48 | You can turn Preview on to get an idea
of what it's going to do, and then hit OK,
| | 02:52 | and it automatically
applies it as soon as you hit OK.
| | 02:56 | So as you start to create rounded rectangles--
and I'm sure you will, because they are everywhere
| | 03:01 | on the web today--
| | 03:02 | try using this effect on a standard rectangle,
versus using the standard Rounded Rectangle
| | 03:07 | tool inside of Adobe Illustrator.
| | 03:09 | You'll be glad you did, because it creates
much more flexible graphics that are easily editable
| | 03:13 | by you or anybody else who
might be working on the project.
| | Collapse this transcript |
| Saving appearance as graphic styles| 00:00 | Another great way to expedite your design
process and really enhance your workflow is
| | 00:04 | to use something called graphic
styles inside of Illustrator.
| | 00:08 | If you are familiar with layer styles in
Photoshop, this should be a snap for you, because layer
| | 00:13 | styles and graphic styles are
essentially the same thing.
| | 00:16 | You are saving the appearance of an object
as a reusable state, which you can then apply
| | 00:21 | instantaneously to
different parts of your design.
| | 00:24 | So in this movie we are going to cover how to
create graphic styles here inside of Illustrator,
| | 00:27 | and then also how to save them out so
you can use them in other projects as well.
| | 00:32 | The first thing I'm going to do is zoom in on
this play button here, and we are going to
| | 00:36 | create a graphic style for
the background of this button.
| | 00:39 | So I'll select it first with my Selection tool and
then I'm going to add a stroke to it, first of all.
| | 00:44 | So I'll just come up to the Control panel,
and I'll click a few times to add a 5-point stroke.
| | 00:50 | Then I'm going to make sure that
I'm working in the Appearance panel.
| | 00:53 | The Appearance panel and the Graphic Styles
panel are both going to be essential for this
| | 00:57 | exercise, so I'll drag this over
to the left, so I have it out.
| | 00:59 | And I'm also going to find the Graphic Styles
panel, which is here. You can also go to Window
| | 01:03 | and select Graphic Styles to bring it up.
| | 01:05 | And I'll dock it right underneath the
Appearance panel. That way I can see it.
| | 01:10 | And so, once I have both of those out there,
I have everything I need to sort of construct
| | 01:14 | this appearance that I'm working on.
| | 01:16 | So with that selected, I'm going to make sure
that I'm targeting the stroke, so I'll select
| | 01:21 | that to make sure the stroke is the active
part that I'm targeting, and then I'm going
| | 01:24 | to come over to the Swatches panel.
| | 01:25 | I'm going to add a gradient stroke.
| | 01:27 | Now it should be noted that this is only
available in Adobe Illustrator CS6, so if you have CS5
| | 01:32 | or earlier, you will not be able to
assign a gradient stroke to your object.
| | 01:36 | You can just assign a regular color stroke, no
big deal. I'm going to assign the gradient to this.
| | 01:42 | Then with that selected, I'm going to go to the
Gradient panel, change the Angle to something
| | 01:47 | like -90, and then I'll target the black color
stop, and I'll change that to a lighter gray
| | 01:54 | by dragging over. And once I see the big green
plus, release, and it changes the color for me.
| | 02:00 | And once I have that done, I'm going to come
back over to the Appearance panel and make
| | 02:03 | sure I'm targeting the full path and I'm going
to add a drop shadow to it. So we'll go to Effect >
| | 02:08 | Stylize > Drop Shadow.
| | 02:10 | I'll turn on my Preview. And so I'm going
to reduce the X Offset and Y Offset to 0;
| | 02:18 | the Blur radius, I'm going to crank that up
to about 4; and the Opacity, I might back
| | 02:22 | that down to about 85.
| | 02:24 | I want a nice definition between the
foreground and background though, make it look a little
| | 02:27 | bit more 3D. And I'll hit OK.
| | 02:30 | You'll notice as I do this that everything
is being recorded in my Appearance panel,
| | 02:34 | I've got the stroke, I've got the fill,
I've got the drop shadow; everything is coming
| | 02:38 | into place just like I need it to be.
| | 02:40 | Now the last part of this puzzle is to
change the fill opacity, so I'm going to the fill
| | 02:44 | here, toggle down the little triangle, and
click on the Opacity for that, and change
| | 02:49 | that to about 80.
| | 02:51 | And by doing that, that's going to reduce
the overall opacity of the design, so I can
| | 02:55 | see through it a little bit.
| | 02:56 | Now with the drop shadow applied, it's a
little bit a harder to see, so I'm might actually
| | 02:59 | crank that back down a little bit
more. Something like 60% looks nice.
| | 03:04 | So now I'll collapse that back
up and toggle the fill closed.
| | 03:09 | And so basically what I have done is added
a gradient stroke, changed the opacity of
| | 03:13 | the fill, and added a drop shadow to this.
| | 03:16 | And so what I need to do now is save
this as a reusable graphic style.
| | 03:20 | So I will come down to Graphic Styles
panel and I'll click New Graphic Style.
| | 03:25 | That creates a brand-new graphic style for
me here, and I can double-click it and call
| | 03:29 | this Button Style. Hit OK.
| | 03:33 | It allows me to rename it. And now I want
to add a style for the play button as well,
| | 03:39 | and so in order to do that, the first thing
I'm going to do is look in the Appearance
| | 03:42 | panel and I'm going to add a new fill on top
of it, and I'm going to change the fill to
| | 03:47 | be a gradient fill.
| | 03:49 | You can do this from Swatches panel or from the
little dropdown menu right here; either one works.
| | 03:54 | I'm then going to target the gradient here,
change this to even a lighter gray, something
| | 04:00 | like that, maybe a little bit darker,
just to give it a little bit of definition.
| | 04:05 | So we've got that taken care of.
| | 04:07 | And I'm going to go to Effect
and I'll choose Apply Drop Shadow.
| | 04:10 | I want it to have the drop
shadow effect as the previous piece.
| | 04:14 | And so now I'll go down and
click Create New Graphic Style.
| | 04:18 | It creates a graphic style to match.
I'll double-click and call this Control Style.
| | 04:24 | So two styles I've created now. And I'm going
to reset my workspace really quickly and zoom
| | 04:30 | out with Command+0 or Ctrl+0.
And my Graphic Styles are right here.
| | 04:34 | I'll just keep those open and watch what happens.
Watch how easily I can apply styles to everything
| | 04:38 | on this page. So I'll select this button,
give it this graphic style, select the controls,
| | 04:43 | give those the graphic style, this button,
select these individual control points. There we go!
| | 04:50 | Select this, boom!
And the last one, just like so.
| | 04:55 | When I click away, you can see I've created
some nice three-dimensional-looking buttons, all by reusing
| | 05:00 | that graphic style that I created for
each one of those individual controls.
| | 05:05 | And so now if I wanted to make these
available to other projects or even share these with
| | 05:09 | people in my workgroup,
it's very easy to do that as well.
| | 05:12 | What I'm going to do now is make sure I
don't have anything selected on my canvas.
| | 05:15 | I'm going to come over and select a few of
these graphic styles, the ones that are in
| | 05:18 | here by default, because I don't need them.
| | 05:22 | And I'm just Shift+Clicking those, and I'll
click the little trashcan, say Yes to delete
| | 05:25 | those, and so I now have
just the two that I had there.
| | 05:29 | And so if I want to save those out as our own
library, I'll just go to this little panel menu.
| | 05:33 | I'll choose Save Graphic Style Library.
| | 05:36 | It's going to bring me to the Graphic Style library
folder, and I'll call this button_styles and hit Save.
| | 05:44 | And so now, even if I create a new
document--File > New, here we go.
| | 05:48 | Let's say I wanted to create a button, so I'll drag
this out, and create just a blank button like so.
| | 05:57 | If I wanted to apply that same graphic style
in a brand-new document, I'll go to the Graphic
| | 06:01 | Styles panel--notice it's not available to
me, so I have to go to the little library
| | 06:06 | icon here--go to User Defined and
select button_styles. They pop up for me.
| | 06:11 | I can then click and it adds on that graphic style,
just like it would in the other document as well.
| | 06:18 | So hopefully by now you have a better
understanding of what graphic styles are and how you can
| | 06:22 | use them on your designs, and also how you
can save those out and share them with other
| | 06:26 | people in your workgroup or other
projects that you might be working on.
| | Collapse this transcript |
|
|
8. Creating a Web Site MockupStarting with a wireframe| 00:00 | Web site mockups just don't magically create
themselves; we actually build them from a
| | 00:05 | skeletal system known as a wireframe.
| | 00:08 | If you need a little bit more help with creating
wireframes, like the one you see here, I would
| | 00:12 | suggest going back and watching chapter 5
of this course, where I explained in depth
| | 00:16 | on how I create basic mockups by
utilizing shapes inside of the Illustrator.
| | 00:20 | And so once you get a wireframe completed
or someone sends you a wireframe and says
| | 00:25 | "hey, build a web site mockup out of this,"
| | 00:28 | where do you go from there?
| | 00:29 | Well, you start off with the mockup like the
one you see here on my screen, and the first
| | 00:33 | thing you need to do is start building in
an organizational structure for the mockup
| | 00:38 | that you are going to be creating.
| | 00:39 | Now in this case there are some placeholders in
place here that tell me where certain aspects
| | 00:44 | of the web site are going to go.
| | 00:46 | And so what I need to do is first put those
in a logistical order so that as I start
| | 00:50 | to build objects around them, it makes a little bit
more sense. So that's what I'm going to do first.
| | 00:55 | In order to do that, I'm going to
bring up the Layers panel here.
| | 00:59 | And when I create any sort of web site mockup,
I go ahead and I create three layers: I create
| | 01:04 | a header layer, a footer layer and
then what I call a content layer.
| | 01:08 | The header and footer layers are what I call
anchor content, because that's pretty much
| | 01:12 | going to say the same throughout the entire
design. And usually what I'll do once I get
| | 01:16 | those completed is I'll lock them down.
| | 01:17 | But I'll discuss more about that as I talk
about adding master elements to your pages.
| | 01:22 | Once I create these three layers, I now
have a basic organizational structure in place
| | 01:26 | where I can put different things as I work.
| | 01:29 | So I'll go ahead and create a new layer here
and I'll call this layer Header; I'll create
| | 01:34 | another new layer, double-click to rename it,
call it Footer; and I'll create another
| | 01:40 | new layer and I'll call it Content.
| | 01:42 | I'll usually put my Header layer at the top,
like so, Content in the middle, Footer right there.
| | 01:48 | I'm also going to add a background layer to
this, because particular site that I'm going
| | 01:52 | to be working on has a really elaborate
background image. So I'm going to create another new
| | 01:56 | layer, in this case it will say layer 5, and
I'll call this Background. And I'll move it
| | 02:01 | all the way to the bottom.
| | 02:03 | I'm going to open the layer 1 down here at
the bottom, and I'm going to start moving
| | 02:07 | pieces of this around.
| | 02:09 | So first I need to find the
elements that I need to move around.
| | 02:12 | For instance, this right down here is the
Footer. Once I click on that, I'll be able
| | 02:16 | to see it right there. There it is. And so
I can actually move this up in the order,
| | 02:22 | and I want to move it up all the way until I get
right on the Footer layer, and I'll drop it right there.
| | 02:27 | So it drops right in on
the Footer layer by itself.
| | 02:30 | And for now I'm just going to lock that layer,
because it's the only thing going on in that layer right now.
| | 02:35 | I'm also going to select
this big piece of content here.
| | 02:38 | This is the background for the page elements.
And so this is going to live on the Content
| | 02:42 | layer, so I'm going to drag that up
and I'll drop it on the Content layer.
| | 02:48 | Even though this strip right here and this
big logo are technically a part of the header,
| | 02:53 | they're going to be at the top
of every single content piece,
| | 02:56 | so I'm also going to put those
on the Content layer as well.
| | 02:59 | So I'm going to select one, hold
down Shift, and select the other.
| | 03:03 | It should be displayed down here. And I'll
take this one and drag it up and I'll drop
| | 03:09 | it right on the Content layer like so, and
go back and get the second one, and I'll drop
| | 03:13 | it on the Content layer as well. Oops!
| | 03:16 | It didn't drop it quite good enough.
| | 03:18 | Let's drop it this time right there on the
Content layer, and they should appear on top
| | 03:22 | of it just like this.
| | 03:23 | And so I'm going to go ahead now, I'll toggle
this open, and I'm going to lock those two layers.
| | 03:29 | I'll lock everything that's not going to
change from page to page. This makes it easier to
| | 03:34 | create what I call Anchored
Content, content that never moves.
| | 03:38 | And so I'll toggle that back up. I have now
got my content and my footer area in place
| | 03:42 | and I'm ready to put my header
objects where they need to go.
| | 03:45 | So this is going to be a top navigation bar
followed by the background, so I'm just Shift+Clicking
| | 03:50 | on this. And then to the right, this will be
a little search field. And so all of this
| | 03:54 | stuff is down here, and I'll
select the layers that I need.
| | 03:59 | I'm just Shift+Clicking. And then this bottom
one here, I'll Command click on that to grab
| | 04:03 | it, and then I'll just move these up and
I'll drop them on to the Header layer, like so.
| | 04:08 | Now the rest of these layers are nothing
more than guides down here at the bottom, and
| | 04:12 | so what I'm going to do now is go to View
and I'm just going to choose Guides, and make
| | 04:17 | sure Lock Guides is turned on, and it is.
| | 04:20 | And so I'll toggle this up and I'll go ahead
and double-click and rename this Guides, and
| | 04:26 | I'll lock that layer down.
| | 04:27 | That way I can't select
anything on it or anything else.
| | 04:30 | And so now I have all of the
basic pieces in place for my mockup.
| | 04:34 | I have got my header area defined.
| | 04:35 | I've got this big square
where my logo is going to go.
| | 04:38 | This is another navigational area.
| | 04:40 | This is going to be the main body of my page,
and in the bottom we've got a footer that
| | 04:44 | goes all the way across.
| | 04:46 | And so I've taken the mockup that was either
given to me, or I quickly did up here inside
| | 04:50 | of Illustrator, and I have given it some
organizational structure that makes sense to me.
| | 04:54 | I've divided it up into a header, content,
footer, and background layers, so that I can
| | 04:59 | easily distribute objects as I
continue to make my design going forward.
| | 05:04 | So once you have your mockup open inside of
Illustrator, go through, organize it as you
| | 05:08 | see fit, and then once you have everything
organized, start to move the content around
| | 05:13 | in a logistical way that makes sense to you,
and then once you get everything moved into
| | 05:17 | place, it's time to start adding what I
call master or anchor objects to your designs.
| | Collapse this transcript |
| Adding master elements| 00:00 | When I'm designing any new web site, I tend to
work in a modular fashion, meaning I work
| | 00:04 | on individual pieces of the web site one at
a time and then I aggregate those pieces
| | 00:09 | together in my final mockup to present it
to clients, or to send it off to a developer
| | 00:13 | in order to change it into a working prototype.
| | 00:16 | So in this movie, I'm going to be discussing
how to bring in those anchor or master objects
| | 00:21 | into your mockup so that you can
start to bring this thing to life.
| | 00:24 | As you can see here, I've got my mockup open.
I've also got several other elements that
| | 00:29 | I've been working on in my design ready to go.
| | 00:32 | And so I'm just going to start pulling
these over from here into my mockup.
| | 00:37 | And so I'm going to do that one at a time.
The first thing I'm going to do is I'm going
| | 00:39 | to work on the background layer, but I need to
get this part of the document ready for that.
| | 00:43 | So I'm going to turn off the visibility for
every layer except for the background layer.
| | 00:50 | And the background layer, I'm going to make
sure it's selected, and then I'm going to
| | 00:53 | go into my background, or bg, .ai file.
| | 00:56 | I'm just going to select this, and this is
a just background that I created. And I'll
| | 01:01 | copy it--Command+C or Ctrl+C--and then I'll
move over into my master objects document
| | 01:08 | and I'll paste it in, just like so.
| | 01:12 | And then I can kind of move it into place
so that it snaps up against the boundaries
| | 01:18 | of the document. And then I'll use Command+0
or Ctrl+0 to make sure I'm viewing it all.
| | 01:21 | And so since this is the background element,
it's not going to move or change at all.
| | 01:26 | So I'm going to go ahead and put a little
lock next to that so I that I can lock it down.
| | 01:29 | That way I can't do anything to it.
| | 01:31 | I can't move it or anything like that.
| | 01:33 | I'm also going to turn back on the footer.
The footer is exactly as I need it to be.
| | 01:38 | It's got the right color and everything.
| | 01:39 | So the footer is actually pretty
much done, so I can leave that alone.
| | 01:43 | The content area is a little bit of a different
story. The content area right now just consists
| | 01:47 | of these abstract rectangles, and I need to
actually bring some stuff in in order to use this.
| | 01:52 | So what I'm going to do is jump over into my
navigation bar. I use Command+0 or Ctrl+0,
| | 01:59 | so you can see the whole thing, and basically
this is just the navigation bar that stretches
| | 02:02 | across the top of the document.
| | 02:03 | I'm going to select it all and copy it,
and then I'm going to go back over into this document.
| | 02:08 | And in the content area, I'm going to unlock
the menu bar and I'm going to select it and
| | 02:17 | then I'm going to delete it,
because I don't need it anymore.
| | 02:20 | And then I'll choose Edit and I'll choose Paste,
or you can give Command+V or Ctrl+V--either one.
| | 02:26 | And then once you get that there just kind of
move it in so that it fits in those guides
| | 02:31 | right there, and you can zoom in couple of
times with Command+Plus or Ctrl+Plus to make sure
| | 02:34 | it's in the right place.
| | 02:36 | And then once you get that in place,
what you want to do is group these objects together
| | 02:42 | by going to Object > Group, or you can do
Command+G or Ctrl+G--either one. And so there's
| | 02:49 | my group right there in my Layers panel.
| | 02:50 | I'll double-click and I'll call this Menu Bar.
| | 02:53 | And then I'm going to lock it down.
Again, that's something that's not going to change.
| | 02:57 | Now I've got this item here, the big square.
| | 03:00 | That's going to be logo that goes across the
top. And so what I'm going to do is unlock
| | 03:04 | that layer temporarily, and I'm going to
select it, and then I'm going to go to the Transform
| | 03:08 | panel. And I'm noticing here that it's 250
pixels wide by 260 pixels tall, so that's
| | 03:14 | how big I need my logo element
to be when I bring it in here.
| | 03:17 | And so what I'm going to do is I'm going
to over robot logo, and I'll use Command+0
| | 03:22 | or Ctrl+0 so I can see the whole thing, and
then I'll select this whole element here.
| | 03:27 | I'll group it with Command+G or Ctrl+G.
| | 03:30 | Then I'm going to go to the Transform panel,
I'm going to make sure the Constrain Width
| | 03:34 | and Height is selected, and then I'm going
to type in "250" for the Width. And it gets
| | 03:40 | to about 260, around about for that, so
I'll just hit Enter to commit to that.
| | 03:44 | And then I'm just going to copy it--Command+C or
Ctrl+C--bring it back over, and I'm going to paste it in.
| | 03:49 | And then I'll just move that until it's in
the center, something like this. I might
| | 03:58 | move it just a little bit more.
| | 03:59 | I want to make sure that it's lining up
with these guides here, so once I get it right
| | 04:04 | there in place, I can then select the path
behind it by targeting that, and I can press delete.
| | 04:10 | And so now I have my logo in place, I have a
menu bar behind it, and it's looking pretty good.
| | 04:18 | The last thing I have to do is go grab the top
header. And so I'm going to go into the header
| | 04:23 | and turn the visibility on for that layer,
| | 04:25 | and then I'm going to grab these items here,
and I'll delete those, and I'll also delete this.
| | 04:33 | The header color is the right color,
so I'm going to leave that alone.
| | 04:36 | You can also change that if you needed to,
but in this case, I'm using a dark gray for
| | 04:40 | the header and footer.
| | 04:41 | So I'll go over to top header. And I've
already got some stuff here, so I'm just going to
| | 04:44 | select this. And this is just a text layer
and some shapes to create the search bar
| | 04:49 | and the navigation.
| | 04:50 | So we'll go back over to Master Objects >
Edit > Paste, and then we'll just move these up
| | 04:56 | and I'll line them up in between the guides,
right where they're supposed to go, kind of center
| | 05:01 | them up and click away.
| | 05:03 | So I've got a search bar and a
navigation bar up in the top.
| | 05:06 | I can lock down the header.
Again, that's an area that's not going to change.
| | 05:10 | The only thing they I have left is the main
body of content here, and the body of content
| | 05:16 | needs to be a different color.
| | 05:18 | I could just make it white, but the client has come
to me and said, "No, we want it this specific color."
| | 05:22 | Luckily I've saved out a .ase file that I
can then load into this Illustrator document
| | 05:27 | to get the right color.
| | 05:29 | So in order to do that, I may go over
to my Swatches panel and go right here.
| | 05:33 | I'll go to Open Swatch Library, I'll go to
Other Library, I'll go to my Desktop, and I'm
| | 05:39 | going to look inside of my Chapter 08
folder, and there's a robot_colors.ase file.
| | 05:45 | I'll open that up, and there's my robot colors.
| | 05:48 | They wanted it to be this kind of off-white,
yellow color right here, so I'm going to select
| | 05:51 | this object first, then click on that,
transforms it to the right color for me.
| | 05:57 | I can then load these colors over into my
color palette to keep them over there, or I
| | 06:01 | can just lead this panel up.
It doesn't matter.
| | 06:03 | For now I'll close it and I'll reset my workspace.
And if I use Command+0 or Ctrl+0 to see everything,
| | 06:10 | you can see now that I've taken this
wireframe and turned it into a shell that I can then
| | 06:16 | use going forward to
design any page that I want to.
| | 06:19 | So I've laid out all of the master elements
inside of my page, or the anchor elements, that
| | 06:24 | are never going to change.
| | 06:25 | That's the header, the search bar, this
navigation bar across the top, the logo element, the
| | 06:30 | page background, the footer, and of
course the rays of light in the very back.
| | 06:36 | And so now that I've got this all set up,
I'm ready to start adding various bits of
| | 06:40 | content to this design to
really make it a true web site mockup.
| | Collapse this transcript |
| Creating navigation buttons| 00:00 | An essential part of any good web site design is
going to be to have a really nice navigation system.
| | 00:07 | And you can really mock up some great-looking
stuff inside of Illustrator by utilizing just
| | 00:12 | basic shapes that really translate
well into a navigational system.
| | 00:17 | What you have to understand is that these
navigation systems are not just going to be
| | 00:21 | accessed via the web with a mouse
or a tablet or something like that.
| | 00:26 | They're going to be accessed with mobile phones,
tablet devices, different things like that,
| | 00:30 | where people will be interacting with them
not just with a mouse, but also their finger
| | 00:33 | and a stylus and things like that.
| | 00:35 | So, when we're creating navigation for any
type of web site, we need to make sure that
| | 00:40 | it's both desktop- and touch-friendly.
| | 00:42 | So, in this movie, I'm going to be exploring
how to create a basic navigation system mock-
| | 00:47 | up, and I'm also going to touch on several
different ways that you can make this a little
| | 00:50 | bit more touch friendly.
| | 00:53 | So let's get started.
| | 00:54 | I'm going to go ahead and go to the File
menu and choose New, and inside of this dialog
| | 00:58 | box, I want to make this about 960 pixels
wide, and let's make it about 500 pixels tall.
| | 01:06 | It doesn't matter how tall it is necessarily.
| | 01:08 | I'm mainly concerned with
the width of the document.
| | 01:11 | So I'm going to go ahead and hit OK.
| | 01:12 | Let's assume that this is going to be for a
960-pixel-wide web site, and this is going
| | 01:17 | to be something that lives at
the very top of the web site.
| | 01:20 | So, the first thing that I do when I'm
designing a navigation system is I determine what type
| | 01:25 | of navigation system I'm going to create.
| | 01:27 | Is this going to be something that goes
horizontal, is this something that goes vertical?
| | 01:30 | It is going to have dropdown menus inside of
it or are all the navigational items going
| | 01:34 | to be included in this
horizontal or vertical layout?
| | 01:37 | That's all up to you.
| | 01:39 | For this project, I'm going to do a
horizontal menu with some dropdowns.
| | 01:42 | So, the first thing I'm going to do is I'm
going to draw out a rectangle and when I'm
| | 01:45 | drawing out this rectangle, I'm going to keep
in mind that this needs to be a touch-friendly
| | 01:50 | graphic, meaning that it needs to be big enough
so that when someone taps on it with their finger,
| | 01:54 | it will be selectable.
| | 01:55 | And so the desired size for most touch-
friendly aspects of a web site is generally around
| | 02:01 | 35 to 40 pixels in height.
| | 02:04 | So just keep that in mind. It needs to be at
least 35 to 40 pixels in height, and I would
| | 02:08 | say I wouldn't go any smaller than
about 50 or 60 pixels in width either.
| | 02:12 | So in this case, I'm going to make all of
my buttons the exact same size, and I'm just
| | 02:16 | going to distribute them across the page.
| | 02:19 | So let's say that I wanted to have five
buttons that go across the page. Then I would need
| | 02:25 | to take 960 pixels and divide that by 5,
which makes this about 192 pixels apiece.
| | 02:33 | So in order to create these things as
precise as possible, I'm just going to click once,
| | 02:38 | and I'm going to type out 192 for the width,
and then I'm going to type out about 40 pixels
| | 02:45 | for the height and I'll hit OK.
| | 02:47 | So, once I do that, there is the basic
setup for my first button. And I'm going to grab
| | 02:52 | the Selection tool and I'm going to
flush it over to the left, just like so.
| | 02:56 | And if you really want to make sure it's right
up against the edge of the artboard, you can
| | 03:00 | come up to your Control panel and choose
Align to Artboard, and then hit this first button
| | 03:04 | here to align it right to the left side.
| | 03:06 | Now, I'm going to copy this and then I'm
going to paste it on top of itself four times:
| | 03:14 | one, two, three, four.
| | 03:16 | That gives me five total copies.
| | 03:19 | So now if I select all of these by clicking
and dragging across, I can align them and
| | 03:25 | go to Horizontal Distribute. And since I had
that aligned to the artboard, those automatically
| | 03:31 | distributed across, like so.
| | 03:33 | So there is the basis for my navigation system.
| | 03:36 | I need to determine what
these are going to look like,
| | 03:38 | so I'm going to focus on one button at a
time and then I'll just copy the appearance to
| | 03:42 | the rest of the buttons.
| | 03:42 | So, let's go ahead and select this button
here, and we'll start on this one first.
| | 03:49 | So I want this to be an orange color,
| | 03:51 | so we'll make it orange. And I'm going
to give it no stroke, just like that.
| | 03:57 | I want to make sure that these are all fitting
in the right area, so I'm going to flush that
| | 04:02 | left. And I can realign these after the fact.
| | 04:05 | It's the stroke that kind of
threw it off, while I go.
| | 04:07 | That's no big deal.
| | 04:08 | We've got that selected.
| | 04:09 | I also want to bring up the Appearance panel.
| | 04:12 | I can do that by going to Window and
selecting Appearance. And if it's already onscreen,
| | 04:17 | you should just be able to locate it,
and I'll find mine and drag it out.
| | 04:20 | I'm going to add something to the top of
this, just to give it a little bit of something
| | 04:23 | extra, so I'm going to add a fill.
| | 04:25 | So, I'll select the fill that's already there,
and then I'll go down and hit Add New Fill.
| | 04:30 | And I'm going to select a
gradient, just like this.
| | 04:36 | Once I have that gradient selected,
I'm going to toggle open that fill.
| | 04:39 | I'm going to change the opacity of this
gradient by going to the blend modes here on the left,
| | 04:45 | and I'll change this to Soft Light.
| | 04:47 | Then I'll find the Gradient panel and
change the angle to something like 90 degrees.
| | 04:56 | And if you don't like that, you might want to
switch it over to something like -90. There we go!
| | 05:02 | The final thing I'm going to do is I
am going to add a stroke to this.
| | 05:04 | So, let's go up to the Stroke panel, open
it up, and I'll add a 1-point stroke to it.
| | 05:11 | I'm going to make sure that it
is aligned to the inside of this.
| | 05:17 | Then I'm going to go to the color, and I'm going
to pick kind of a darker reddish-orange color.
| | 05:22 | I may even go a little bit darker than that.
| | 05:25 | And if you want to get real custom with it,
you can just go down here, target the stroke,
| | 05:30 | double-click, and kind of mix your own.
| | 05:32 | In this case, I'll use a dark orange like this.
| | 05:35 | The hex code for this is 824106.
So, I hit OK. That looks better.
| | 05:42 | So, that's the overall appearance
that I want for each one of my buttons.
| | 05:46 | So, the easy way to do this is to
save it as a graphic style of course.
| | 05:50 | So, what I'll do is bring up the Graphic
Styles panel by going to Window > Graphic Styles,
| | 05:54 | and I'll open those up. And I'll make sure
I have this button selected, create a new
| | 05:58 | graphic style just like that.
| | 05:59 | I don't have to worry about naming it right
now. I'm going to reset my workspace.
| | 06:05 | Use Command or Ctrl+0, and I'll just select
all of these at once, bring up the Graphic
| | 06:11 | Styles panel, and apply
that graphic style to them.
| | 06:15 | And with all those still selected, I can
then go back to the Align panel and I can align
| | 06:19 | them with the artboard again,
making sure they're all ready to go.
| | 06:25 | So there you have it!
There is a basic navigation style.
| | 06:30 | So now what you want to focus
on is adding some text to this.
| | 06:33 | It's a mockup after all, so we
need to know what it's going to say.
| | 06:35 | So I'm going to grab the Text tool,
and I'll just type out "HOME," in all caps.
| | 06:39 | Once I have that typed out, I'll select the
text. And I'm going to increase the font size
| | 06:44 | just a little bit,
| | 06:44 | so maybe something like 14 pixels.
That might be a little small for this,
| | 06:49 | so I may even bump that
up to something like 16.
| | 06:53 | Then I'm also going to hold down the Option
key on the Mac, the Alt key on a PC, and tap
| | 06:58 | the right arrow key a few times to kind of spread
that out a little bit, add some tracking in there.
| | 07:04 | Once I do that, put that
right on top of that button.
| | 07:08 | I can select this button here, and then I'll
change the alignment to the selection and
| | 07:17 | align those to each other's
center point, just like that.
| | 07:21 | I can also align them to
the vertical center as well.
| | 07:26 | I'll just move that back into place.
| | 07:27 | If at any time your buttons get out of place
like this, you can just realign them by moving
| | 07:33 | them around. Select that
and just kind of move it down.
| | 07:38 | If you zoom in closer, you'll get a
better level of control on these.
| | 07:41 | Let's do that. And you can always move
these around and change them any way you want.
| | 07:46 | It's okay that those are misaligned for now.
| | 07:47 | I can fix that later.
| | 07:50 | So I've got my HOME button ready to go.
| | 07:51 | I'm going to change the color
of the text, though, to white.
| | 07:55 | The next thing that I try to do is I try to
figure out if these buttons are going to have
| | 08:00 | hover states or over states, and once we do
that, we need to figure out what those are
| | 08:05 | going to look like.
| | 08:06 | The easiest way to do that is to just take
what you've created so far and duplicate it.
| | 08:11 | So what I'm going to do is
take this button and select it.
| | 08:15 | I'll copy it--Command or Ctrl+C--and
then paste it--Command or Ctrl+V.
| | 08:21 | That just puts it right there,
and I'll put it right underneath it.
| | 08:24 | So this way you can kind of see the
over and regular state of the button.
| | 08:30 | So, I'll take this button, and all I'm going
to do here is go into the Appearance panel
| | 08:34 | and I'll bring that out so you can see it.
| | 08:37 | I'm going to target the gradient fill so that
I'm working on that gradient fill, and I'll
| | 08:42 | go to the Gradient box here
and I'll change that angle to 90.
| | 08:46 | So, when somebody hovers over
this, the gradient will change.
| | 08:51 | So, that's what I'll tell the developer is
okay, this is the up state, this is the over
| | 08:55 | state, et cetera.
| | 08:56 | And the easy way to get through this, where
this makes sense for your developer, is to
| | 09:00 | select something like this, group it with
Command or Ctrl+G, and then use your Layers panel.
| | 09:07 | So, I'll do this. And I'm working on this
group right here, so I'll call this Home Up.
| | 09:14 | So that's the up state.
| | 09:15 | If you can't see this,
you can expand it out a little bit.
| | 09:18 | I'll select this. Command or Ctrl+G gives
me this group. Double-click and I'll call
| | 09:23 | this Home Over, and then I will move it
until it's right on top of it, like so.
| | 09:32 | So now anytime I want to see
what it's going to look like--
| | 09:34 | I'll just turn off the over state for now--
| | 09:36 | so there is the up state, and if I want to
see what it looks like rolled over, just click
| | 09:40 | that on, just like that.
| | 09:42 | So it looks like I'm actually
hovering over it right now.
| | 09:44 | So that's a great way to show interactivity
to your clients and also to the developer.
| | 09:47 | I am going to rest my workspace really quick.
| | 09:50 | So, the easy thing to do here would be just to
copy this and paste it as many times as you want.
| | 09:57 | But we have one final thing we need to do.
| | 09:59 | We need to do a dropdown, because we need to
see exactly what that's going to look like.
| | 10:02 | So, I'm just going to grab my Rectangle
tool again, come right to the intersect point,
| | 10:07 | and we'll do 192 x 40 again.
| | 10:11 | We'll keep this the same, except this time
| | 10:14 | I'm going to make sure it is a solid fill, just
like this, and there is no stroke, like that.
| | 10:22 | So that's my dropdown.
| | 10:24 | And I'll copy that, and I'll paste in front,
Command or Ctrl+F. Then I'll move it down
| | 10:30 | till it intersects, just like this.
And we'll copy it again, paste it again, Command or
| | 10:37 | Ctrl+F, and we'll put it down like that.
| | 10:40 | So that's going to be my
dropdown whenever I roll over this.
| | 10:45 | So now what I need to do is give this a
little bit of a differential I think.
| | 10:48 | So, I'll select all three of them at once,
and I'm just going to add sort of a lighter
| | 10:53 | gray stroke. And we'll align this
to the inside, like so. There we go!
| | 11:01 | Kind of a little panel-like dropdown, and I can
move that up so it's flushed with the rest of it.
| | 11:08 | Then I can take this HOME text and I'll double-
click until I get a hold of the HOME text, and I'll
| | 11:13 | copy that, double-click to exit.
| | 11:17 | Then I'll select this, and I'm going to
group this together--Command+G or Ctrl+G.
| | 11:23 | Then in my Layers panel--I'll bring this
out so you can see it--double-click, and I'll
| | 11:27 | name this DropDown, just like so.
| | 11:31 | So, with this selected now, I'll double-
click to enter in Isolation mode for the group
| | 11:34 | so I'm only working in the group.
| | 11:36 | I'll paste, get that lined up.
| | 11:39 | And again, it doesn't matter what these words
say, because they're always going to change
| | 11:43 | based on whatever button you're working on,
but this just gives the developer, or whomever
| | 11:47 | is creating this, an idea of what this is going
to look like. And so I'll just copy and paste
| | 11:52 | in front--Command or Ctrl+F--and then I'll
move this down till it gets about in the center
| | 11:56 | there, Command or Ctrl+F,
keeping that in line, just like so.
| | 12:01 | So there is my dropdown.
| | 12:05 | Then we can double-click the canvas to exit.
| | 12:08 | So really, I don't even need these
extra ones over here on the side.
| | 12:12 | I can actually get rid of these if I wanted to and
just use this. I'll just move this to the center.
| | 12:18 | If you wanted to create the entire thing, you
could, but in this case, I think one example
| | 12:21 | works really well.
| | 12:23 | And if I go to the Window menu and bring my Layers
panel back up, you can actually see what I've got.
| | 12:27 | I've got the Home Up, I've got the Home Over,
and I've got the dropdown all set there, so
| | 12:31 | if I wanted to turn on the over state for this,
I can do that. And it's actually over here.
| | 12:37 | I need to move that with it, so I'll just move
that back over till it lines up, just like that.
| | 12:46 | So, if I were to send this to somebody,
I can say, okay, this is what your navigation
| | 12:50 | is going to look like. And I'll turn off
the dropdown and turn off the over state.
| | 12:54 | This is what it looks like normal.
| | 12:56 | This is what happens when I hover
over it and when the dropdown appears.
| | 13:00 | So you can turn those off to show the
regular button state after the fact.
| | 13:04 | As you continue to develop your navigational
style, you may find that vertical navigation
| | 13:09 | works best, horizontal works best.
| | 13:10 | It's just totally up to you which one works
best for whatever design you're working on.
| | 13:15 | Also, the dropdowns and things like that are
always going to be different for each design
| | 13:19 | that you work on, but hopefully this gives
you a better idea of how to create these things,
| | 13:23 | how to mock them up, how to showcase them
to a developer or a client, and also, how
| | 13:28 | to make them touch friendly, so that they
can be used effectively on any device or screen.
| | Collapse this transcript |
| Working with photographs| 00:00 | In addition to working with vector artwork
inside of Illustrator, you can also work with
| | 00:04 | and manipulate photographs as well.
| | 00:07 | Although Illustrator is not the best program
for manipulating raster-based graphics like this--
| | 00:12 | that's better served in a
program like Photoshop--
| | 00:15 | it can handle raster graphics.
| | 00:16 | You can actually place them in here much
the same way you can in Adobe InDesign.
| | 00:20 | So, in this movie, I'm going to be exploring
how to bring photographs and other artwork
| | 00:25 | into Illustrator that might
be of a raster-based nature.
| | 00:27 | So I'm going to do that by going to
the File menu, and choosing Place.
| | 00:31 | So, let's pretend here that I'm bringing in
some product shots that I'm going to be selling
| | 00:35 | here on the Robot Toys web site, and I'll just go out
and grab inside of my Chapter 8 exercise files folder,
| | 00:41 | there's a folder called Assets, and
then there's a folder called robot photos.
| | 00:44 | I'm going to select car_bot1, and I'll
place that in. And you can see it comes in just
| | 00:49 | as a regular object.
| | 00:51 | Go to File > Place, bring in green_bot2,
hit Place, and I'll make sure these line up. And
| | 00:59 | I'll put this one sort of in the center.
And then finally File > Place and we'll get red_bot1,
| | 01:05 | place that in, and line him up,
something kind of like that.
| | 01:10 | Then I'll grab all three and I'll make sure
they're aligned up by aligning to the vertical
| | 01:15 | center just like this.
| | 01:16 | I want to make sure that my
settings are set to Align to Selection.
| | 01:21 | Then I will horizontally distribute them
evenly across each other. And now I'm going to copy
| | 01:26 | those, and I'll paste them on top of each
other with Command+F or Control+F, and then
| | 01:33 | move them down just to create another row.
| | 01:35 | So there are my products.
| | 01:36 | It should be noted that each time you place
a file into Illustrator it is linked to the
| | 01:42 | original file, and if you happen to move
this document or the original document, you'll
| | 01:46 | get a warning box from Illustrator open saying
that the file is missing and needs to be replaced.
| | 01:52 | In order to alleviate that, what you can do
is select an object like this and you can
| | 01:55 | choose to embed it into the document.
| | 01:57 | The problem with that is embedding raster-
based graphics, especially high-res graphics or
| | 02:01 | Photoshop documents with a lot of layers, is
that you increase the file size of the Illustrator
| | 02:06 | document immensely, and that might not be such
a good thing if you are sharing things across
| | 02:10 | a network or trying to show things to
clients or even someone in your own workgroup.
| | 02:14 | So you might want to think
twice before doing that.
| | 02:16 | My suggestion is to open the
high-resolution photographs that you have up in a program
| | 02:21 | like Adobe Photoshop, open them up, crop them,
optimize them, save them for the web, and
| | 02:26 | then place them into this document.
| | 02:28 | It makes the file size a lot more manageable.
| | 02:30 | If you'd like more information on how to crop
and optimize images for the web and Photoshop,
| | 02:35 | you might want to check out my Photoshop for
the Web course that is now available in the
| | 02:39 | lynda.com online training library.
| | 02:42 | Once you have your documents in here like
this--these are just JPEGs--you can manipulate
| | 02:47 | them, move them around just like
you can any other Illustrator object.
| | 02:50 | There's no difference between them other than the
fact that they are not scalable vector artwork.
| | 02:55 | They're just standard raster-based graphics.
| | 02:57 | In addition to the JPEGs, you can also
place Photoshop files in here as well.
| | 03:02 | So, if I go to the File menu and choose Place,
I can navigate out to my Chapter 08 folder,
| | 03:09 | and there's a repairbot.psd file in there.
| | 03:13 | I can place that in, and that comes in just
like this. And I can move it up into place,
| | 03:19 | something like that.
| | 03:20 | You can see here that it needs
to be actually behind the logo.
| | 03:24 | The logo needs to overlap that a little bit.
| | 03:26 | So in order to do that, what I'm going to
do is toggle open the content layer, and I'll
| | 03:31 | move the Layers panel out so you can see it.
| | 03:34 | I will move the logo to the top of the
stacking order like so, and then I can just reset my
| | 03:41 | workspace, and there we have it.
| | 03:43 | I'll zoom in a little bit so you
can see exactly what's going on.
| | 03:46 | So this is just a banner ad that I've
created for their REPAIRBOT service, repairing the
| | 03:50 | broken robots. And this is
nothing more than a Photoshop document.
| | 03:55 | And anytime I want to make a change to this,
I can select and hit Edit Original. Adobe
| | 04:00 | Photoshop will launch and
that document will open.
| | 04:04 | When I open this up, it may give you a
warning saying that some text layers contain fonts
| | 04:09 | that are missing. That's okay.
| | 04:10 | I'm not going to be changing any
of the fonts, so I'll just hit OK.
| | 04:14 | So, once I'm in here, I can
make any changes to this I want.
| | 04:17 | So if I needed to move the robot a little
bit, I could select layer 1 and just kind
| | 04:20 | of move him over a little bit to the left.
| | 04:23 | Then I'll save that.
| | 04:24 | If I can go back into Illustrator,
it's going to tell me that some files were modified.
| | 04:28 | Would I like to update them? Yes, I would.
| | 04:30 | See, the robot moves over to the right.
| | 04:33 | And so anytime I make a change to that
outside of Adobe Illustrator, Illustrator is going
| | 04:37 | to know that and it will automatically update.
| | 04:39 | But, as I said before, placing big Photoshop
documents into your Illustrator file really
| | 04:45 | increases the file size, especially if you
embed them in there, so you might want to
| | 04:49 | be cautious when you are
working with files like that.
| | 04:51 | In this case, it's not that big of a file,
and I could always go back in later and save
| | 04:56 | this out for the web inside of Photoshop and
then bring it back into Illustrator as a flattened
| | 05:01 | JPEG or something. But for now, for the mockup
purpose, I think this works pretty well. Maybe
| | 05:05 | the client is still working on it
and would need to make changes.
| | 05:08 | So it keeps it flexible by
leaving it as a placed PSD.
| | 05:12 | So, hopefully by now you have a better
understanding of what Illustrator's capabilities are when
| | 05:16 | it comes to placing images into your web
design mockups, and also the best practice for how
| | 05:22 | to get them in here, as far as opening them up
somewhere else and optimizing them ahead of time.
| | 05:27 | And even though we try to incorporate as
little imagery as possible into our web designs so
| | 05:33 | that things load a little bit faster, on the
web, you still can't get around using graphics
| | 05:38 | altogether. Not everything can
be replicated through HTML and CSS.
| | 05:42 | You can't replicate photos that way.
| | 05:44 | You have to use some sort of photographs,
and so this is the quickest and easiest way to
| | 05:48 | do just that.
| | Collapse this transcript |
| Simulating pages with artboards| 00:00 | Throughout this course you have seen me use
artboards for everything from creating a responsive
| | 00:04 | web design to laying out an image
sprite grid and all the things in between.
| | 00:09 | But one of my favorite uses for artboards,
especially when it comes to web design, is
| | 00:13 | to stimulate multipage layout.
| | 00:15 | In Illustrator we don't have the ability to
create multiple pages, just like we don't have
| | 00:19 | the ability to do that inside of Adobe Photoshop,
but we do have the ability inside of Illustrator
| | 00:24 | to create these artboards which allow us to
mimic a multipage layout, and that's exactly
| | 00:28 | what I use them for most often.
| | 00:30 | So in this movie I'm going to show you how
to quickly and easily manipulate the artwork
| | 00:35 | that you've already created and turned it into
a multipage layout faster than you probably
| | 00:39 | thought was possible.
| | 00:40 | So I need to have my Artboards panel open
and if you need to find that, it is in the
| | 00:43 | Window menu, underneath Artboards.
| | 00:46 | And there are a couple of
ways that you can do this.
| | 00:48 | I'm going to show you first the long
way and then I'll show you the easy way.
| | 00:52 | The long way would be to just come
down here and create a new artboard.
| | 00:55 | It would automatically clone the same artboard
to the right. And then I could select all the
| | 01:00 | images here and paste them over here and that way I
could duplicate all the master elements that I need.
| | 01:06 | But that's not exactly how I like to do it,
so let's take a look at how I like to do this.
| | 01:12 | I'll delete this artboard here, and I'm going
to zoom out quite a bit. And once I zoom out,
| | 01:19 | I'm going to lock the Guides
layer so that I can't touch those.
| | 01:22 | And then I'm going to select everything on the
screen and I'm going to grab my Artboard tool.
| | 01:27 | You can do that with Shift+O on your
keyboard or simply by clicking the Artboard tool.
| | 01:31 | And then watch out easily I
can duplicate this entire thing.
| | 01:33 | I'm going to hold down the Shift key,
the Option key on Mac, the alt key on PC, and then
| | 01:38 | click and drag this to the right.
| | 01:42 | And then I'll release my mouse and release
the keyboard keys, and now I have duplicated
| | 01:47 | that spread, just like that.
| | 01:49 | Let's say I wanted another page.
That's no big deal.
| | 01:52 | I'll just Shift, Option or Alt, click, drag,
release my mouse, release the keyboard keys.
| | 02:00 | Let's create some down
here: Shift, Option or Alt.
| | 02:04 | If you can't get the snap in the right place,
let go over the Shift key temporarily, and
| | 02:08 | then we'll snap in place then let go of your
mouse, then let go of your Option or Alt key,
| | 02:12 | then Shift+Option+Alt. And one more.
| | 02:18 | I've now created six pages which I can start
putting content on. And I can name those pages
| | 02:23 | anything I want, so the first one
of course would be the Home page.
| | 02:26 | And then we could go to Artboard
2. Let's say that's going to About.
| | 02:31 | And this will be my Store page.
| | 02:35 | This could be my Blog. The next one could be Support,
and the last one could be Contact. Just like that.
| | 02:46 | You will notice something else.
As I zoom in on Artboard 1--
| | 02:49 | I'll double-click Home to zoom in--
| | 02:52 | there are couple of things that are missing.
| | 02:54 | Most notably the navigation bar. Why is that?
| | 02:57 | If I look in the Content, chances are you
are going to see that the menu bar was locked,
| | 03:05 | and so what I need to do is unlock that, select
it, copy it, double-click About, Edit > Paste
| | 03:13 | in Place, and then I can simply maneuver it
back by using the Command or Ctrl key and
| | 03:19 | the left bracket key on my keyboard, and I'll move it
back to where it needs to go, back behind the logo.
| | 03:26 | I'll go to the Store page, double-click, Edit > Paste
in Place, and I'll send it backwards, just like so.
| | 03:35 | I'll go to the blog. This time I'm just going to
hit Shift+Command+V or Shift+Ctrl+V on the
| | 03:40 | PC and send it back. Double-click Support,
Shift+Command+V, move it back a few times
| | 03:49 | until it goes behind a logo
and again that's just Command+left bracket key.
| | 03:54 | Double-click to Contact page and again Shift+Command+V,
and then Command+left bracket or Ctrl+left bracket.
| | 04:01 | And then once I get that in place, I now
have a six-page layout all ready to go.
| | 04:06 | I could add in my guides for the rest of these
pages as well, but this is by far the quickest
| | 04:11 | and easiest way to duplicate your elements
into multiple pages inside of Illustrator,
| | 04:16 | and really set up a fully functioning
mockup/prototype that you could showcase to your
| | 04:21 | clients or the other
developers in your work group.
| | Collapse this transcript |
|
|
9. Creating UI ElementsCreating video placeholders| 00:00 | Chances are, given the culture that we live
in today, that your design aren't just going
| | 00:04 | to include pictures and text.
| | 00:08 | Most of the time they are going to contain
some things called rich media elements like video.
| | 00:12 | And so in this movie we are going to be exploring
how to create something called a video placeholder
| | 00:17 | inside of Adobe Illustrator.
| | 00:18 | And I am also going to show you how to build
up a library of those so you easily insert
| | 00:22 | videos of any size into the
projects that you might be working on.
| | 00:25 | So I am going to first go up to the File menu
and choose New, and I am going to use a size
| | 00:30 | of 1280 x 800, just to give me a little
bit of working space, and I'll hit okay.
| | 00:35 | And so when you talk about video on the web
you have to understand that there are two
| | 00:38 | types of video that we are going to be seeing.
We are going to be seeing video that is an
| | 00:42 | 4 x 3 aspect ratio and
also a 16 x 9 aspect ratio.
| | 00:48 | Let me show you the differences between these.
| | 00:50 | If I grab a rectangle tool and click,
I'll just add in 640 x 480 and hit OK.
| | 00:58 | This is a standard 4 x 3 size. And if I click
and add another one, 640 x 360, hit OK, this
| | 01:08 | is a standard 16 x 9 size.
| | 01:11 | So you can see that the 16 x 9
is wider. 4 x 3 is traditional.
| | 01:15 | This is the widescreen variety down here.
| | 01:18 | And so when we talk about aspect ratios
I try to separate my libraries that I build
| | 01:23 | up a video placeholders into
to these two aspect ratios.
| | 01:26 | So I'll create one library for
4 x 3 and one library for 16 x 9.
| | 01:30 | Totally up to you how you split them up,
but it make sense to me to divide them into the
| | 01:34 | aspect ratio sizes.
| | 01:36 | So the first thing I would do is open up a
brand-new document like I have here and I
| | 01:39 | then I'd just start
clicking to create some stuff.
| | 01:41 | I am going to create the largest one
first, and I'll tell you why in just a moment.
| | 01:46 | I'll go ahead and create a brand-new rectangle,
just click. And the biggest size that I am
| | 01:51 | probably going to encounter on the web is
probably 960 x 540, assuming that we are going
| | 01:56 | to be using 16 x 9 first.
| | 01:58 | So I'll hit OK, and there is my 960 x 540.
| | 01:59 | And so now I am going to center this on the
page so you can see it, and I am also going
| | 02:08 | to switch the fill and stroke color so that
the background is black and there is no stroke.
| | 02:14 | There we go. So now it's just this plain
old black rectangle in the middle.
| | 02:19 | So once I have that ready to go,
I can stylize this in any way I want.
| | 02:23 | But I try to keep these as basic as possible so
that they can fit into any mockup that I create.
| | 02:29 | Now I might actually change the color of
this to something like a dark gray, just to make
| | 02:33 | it a little bit more neutral. Black tends
to kind of draw the eye in whereas gray sort
| | 02:38 | of blends in with the surrounding area,
and that's what we want these to do.
| | 02:40 | If they are media placeholders,
we want them to blend in with it;
| | 02:44 | we don't want to distract
from the overall design.
| | 02:46 | And so I've got this created. The other thing
that I do usually is I add some sort of play
| | 02:52 | indicator on top of it
indicating that's going to be a movie.
| | 02:54 | You could also do a little
filmstrip icon or whatever you wanted to do.
| | 02:57 | So in this case let's do a small
filmstrip icon to put over the top of this.
| | 03:02 | So in order to do that, what I'll do is grab
the rectangle tool again, and this time I am
| | 03:08 | just going to draw out a rectangle.
It does not matter how big necessarily.
| | 03:13 | And then once I draw that out,
I'll zoom in on it so we can see it.
| | 03:17 | I'll move it just a little
bit to create some space.
| | 03:20 | So this is going to be my
little filmstrip icon.
| | 03:22 | And so the first thing I'll do is create some
squares to go on this, and so I'll just click
| | 03:29 | and drag out a square like so.
| | 03:31 | I'll make sure it's white so I can see it.
And then I am going to copy it and I'll paste
| | 03:36 | it on top itself a few times,
something like four or five times.
| | 03:40 | So Command+F or Ctrl+F, one, two, three,
four, and then the last one I'll just make sure
| | 03:48 | I have my Selection tool selected and I'll just
use my arrow keys to send it downward like so.
| | 03:53 | And so now what I am going to do is keep
that selected. Then I'll hold down the Shift key
| | 03:58 | and click and drag a selection
out to select the rest of them.
| | 04:01 | I'll also be grabbing the background, so I
need to click once to let go of that, and you'll
| | 04:05 | see the bounding box snaps to only these.
| | 04:08 | Then I am going to go to the Align panel, and
in the Align panel I am going to drop this
| | 04:12 | down and say Align to Selection. Then I am
going to vertically distribute across the
| | 04:16 | center, just to give these a little bit
of even space all the way up and down.
| | 04:20 | Now with all these still selected, I'll copy
them and paste them on top of each other,
| | 04:25 | by doing Command+F or Ctrl+F, and then I'll
just move them over with my arrow keys till I
| | 04:30 | get something like that.
| | 04:32 | Then I the last thing that I do, I usually
add a little play control right here in the
| | 04:35 | middle, so I'll just go ahead
and grab the Polygon tool.
| | 04:39 | And mine's already set to be three-sided.
| | 04:42 | If yours looks like this, just tap the down
arrow key until you get a triangle. There we go.
| | 04:48 | And once I get my triangle, I can just put
that right in place, something like that. And
| | 04:53 | so there is my little movie
placeholder graphic that I've created.
| | 04:57 | Now I want to turn this
into a shape all by itself.
| | 05:00 | So I am going to select all of these, hold
down Shift+M on my keyboard, and that's going
| | 05:05 | to automatically give me the Shape Builder.
| | 05:07 | And so what I'm going to do is just bring
the Shape Builder tool in here, and I am just
| | 05:09 | going to hold down the Option or Alt key and
remove all of these little squares from it.
| | 05:14 | I am careful to just get right on top of them
when they turn gray; that's when I know I am
| | 05:18 | subtracting them out. And I'll
also subtract out the middle.
| | 05:22 | Remember, hold down your Option or
Alt key while you're doing that.
| | 05:25 | Now you've got this selected, and you should
be able to change the color, just like so.
| | 05:30 | I'll change this to white, and then I'm going
to go back up here to the Align, change that
| | 05:35 | to Align to Artboard.
| | 05:37 | You could do that in the Align panel as well.
| | 05:39 | And then I am just going to align it to the
Horizontal Center, Align it to the Vertical,
| | 05:43 | hit Command+O or Ctrl+0, and there we go.
| | 05:46 | So I've got my little video placeholder.
| | 05:47 | I've got my background ready to go.
| | 05:49 | So I am going to select both of
these and I'll group them together.
| | 05:54 | And so this is going to be my 960 x 540.
And so I will open up my Symbols panel, and the
| | 06:01 | first thing I am going to do is get rid of all of the
existing symbols that are in there, Hit Delete, yes.
| | 06:07 | It doesn't actually get rid of them from your system;
it just remove them from the Symbols panel right now.
| | 06:12 | And then we'll take this symbol, create a new one.
We'll call this 960 x 540 Placeholder, and hit OK.
| | 06:21 | I want to make sure it's aligned to the
pixel grid though. Hit OK, 960 x 540.
| | 06:26 | So I told you earlier that I was going to
start with the biggest one first, and I am,
| | 06:30 | and I am just going to resize this
and create the sizes after that.
| | 06:34 | So I am going to come to one of the corners,
hold down the Shift key and the Option key
| | 06:37 | on the Mac, the Alt key on
the PC and shrink it down.
| | 06:40 | And I am going to take this down to about
854 pixels. 854 x 480 is another common size.
| | 06:47 | If you can't get it right on the money by doing
that, just come out to the Transform panel
| | 06:51 | and you can make the adjustment there.
| | 06:52 | I'll just type in 854.
| | 06:54 | And make sure that this
chain link is turned on.
| | 06:57 | If this chain link is turned on you can hit
Enter or Return and it should snap it to 854 x 480.
| | 07:03 | And so now I'll go back to my
Symbols and I'll create a new symbol.
| | 07:08 | I'll call this 854 x 480 placeholder,
and that creates another new one. And I'll take this
| | 07:16 | again and we'll size it again, transform.
| | 07:20 | Another common size is going to be 768 x 432,
so 768, 432. Open up the Symbols, drag it
| | 07:30 | over, 768 x 432 Placeholder.
| | 07:36 | And you get idea. Some other common sizes
are going to be 640 x 360, 512 x 288,
| | 07:43 | 320 x 180 and even as small as 256 x 144.
| | 07:48 | So you can build up an entire library of these
and then when you are finished, come here choose,
| | 07:53 | save Symbol Library, and in your Symbols,
just call this 16 x 9 video. Hit save.
| | 08:03 | And so now anytime I create a new document
and I need one of those placeholders, I just
| | 08:08 | go down to the Library icon, choose
User Defined, 16 x 9 video, bring it up.
| | 08:13 | Let's say I needed a
768 x 432. Find it, there it is.
| | 08:19 | If I needed 854, bring that out, just like so.
| | 08:24 | If I needed 960 x 540, bring that out.
| | 08:28 | So you can create a whole library of these
different sizes to easily implement into any
| | 08:32 | mockup that you want.
| | 08:34 | Now you can do the same thing for 4 x 3.
And I'll just show you a couple of quick examples
| | 08:38 | here, so I'll just take the
rectangle tool and I'll do 640 x 480.
| | 08:43 | That's not the biggest that you'll ever see,
but it is one of the most common that you'll
| | 08:47 | see when it comes to you 16 x 9.
| | 08:49 | And so I'll take the stroke away. Swatches,
make this a dark gray, something like that.
| | 08:56 | I will line it to the center of the artboard.
| | 08:58 | And I am going to go back
over here to my other document,
| | 09:01 | and I am just going to double-click.
| | 09:03 | It's telling me I am editing a
symbol definition. That's okay.
| | 09:08 | I am just going to go in and double-click
until I get a hold of this little guy right here.
| | 09:14 | And once I have a hold of that, I'll move
back over and I'll paste it right in the center.
| | 09:19 | That way that pastes right on top.
| | 09:21 | And then I'll take these, group them together.
| | 09:24 | Again I'll take this symbol library, delete
them all out. Yep, take this, drag and drop
| | 09:29 | it over, and I'll call
this 640 x 480 placeholder.
| | 09:34 | Align it to the pixel grid, hit OK.
| | 09:38 | And then I would build up a set
based on those. Some other common sizes
| | 09:41 | here it would be 512 x 384, 480 x 320, and
then the smallest one will be 320 x 240, and
| | 09:49 | then you could take those, save the symbol
library. I would call these 4x3_video. Hit Save.
| | 09:59 | And then anytime you needed those you would
just go down to your library icon, User Defined,
| | 10:04 | 4x3_video would be there. You could select
that and then drag out an instance of that
| | 10:09 | 640 x 480 or whatever size you needed for
that and you could instantly have a video
| | 10:14 | placeholder in your mockup.
| | 10:17 | So as you continue to evolve your workflow,
you are going to find several different things
| | 10:21 | like these media placeholders that you can use
as symbols and then reuse in other projects.
| | 10:25 | It's a great way to help you to speed things up
and if you build up enough of these libraries,
| | 10:29 | you are really going to save
yourself a lot of work in the long run.
| | Collapse this transcript |
| Creating buttons| 00:00 | In this movie, I'll be exploring how to create
buttons inside of Adobe Illustrator and also
| | 00:04 | how to make them touch friendly.
Towards the end of the movie, I'll also talk about
| | 00:09 | how I comprised a large library of buttons
which I can then reuse at any given time.
| | 00:15 | So let's go to the File menu and let's choose
new, and I'm just going to pick the Web preset,
| | 00:21 | and I'll select something like 1024 x 768.
| | 00:23 | It does not matter how big this is.
I'll just hit ok.
| | 00:28 | And so now what I'm going to do is I
am going to create a series of buttons.
| | 00:31 | So I am going to do that by grabbing the
Rectangle tool, and I'm just going to start clicking
| | 00:36 | to create some buttons here.
| | 00:38 | So the first one, we are going to
make this is a fairly large buttons,
| | 00:40 | so we are going to do 300 pixels.
| | 00:42 | The width of buttons is totally up to you,
but the height of buttons needs to stay within
| | 00:46 | a specific range. Most of the time we are
targeting desktop devices, but as we know,
| | 00:51 | our content is not only being
accessed by desktop machines anymore,
| | 00:54 | so we have to make these buttons that we
are creating touch friendly. In order to do
| | 00:59 | that, we need to stay between a range of
about 30 to 50 pixels, somewhere in there--some
| | 01:04 | people say even 35 to 50 pixels.
| | 01:07 | So it just depends on your personal level of
comfort and how big you really want the buttons to be.
| | 01:12 | In this case, I am going to make the height
of this button 40 pixels and once I do that,
| | 01:16 | I'll hit OK, and so there is my graphic.
| | 01:18 | And if I look at this 100% by going
Command+1 or Ctrl+1 on my keyboard, you can actually
| | 01:23 | see the physical size at which
this button is going to be displayed.
| | 01:27 | So I go ahead and turn off the stroke and
let's change the color to something a little
| | 01:32 | bit more fun, like green.
| | 01:34 | And so there is my first button.
| | 01:35 | That actually looks a little thin to me,
| | 01:37 | so I might actually increase the height of
this a little bit, and I can do that by just
| | 01:41 | clicking and dragging down.
| | 01:43 | So maybe I make that 50 pixels.
| | 01:44 | That's on the larger size
of a touch-friendly graphic,
| | 01:46 | but it does look a little bit better to me.
| | 01:48 | I tend to gravitate more towards beefy
end when it comes to creating buttons.
| | 01:54 | Anything that's easier to click on is also
going to be more likely to draw people's attention
| | 01:59 | to it, so if this were a Buy Now button,
I want that thing to be huge so people click on it.
| | 02:04 | This is one way to create a button, just clicking
and dragging out and drawing some mockup buttons.
| | 02:10 | However if you are really going to get
serious about these and you are going to be turning
| | 02:13 | these over to a developer, you need to think
in terms not only of just what the button
| | 02:17 | looks like on the surface like this, but you
also need to think in terms of states of the
| | 02:23 | button, because when you go and interact
with the button on the web, you are going to run
| | 02:26 | into different states.
| | 02:27 | When you first look at a button you are
looking at what's called the up state.
| | 02:30 | This is the initial state that the button is
showing you and that up state is very important
| | 02:34 | because that's the main thing that
draws people to click on that thing.
| | 02:38 | You also need to worry about
something called an over state.
| | 02:41 | That's when someone hovers over this button.
What is it going to look like? What is it
| | 02:45 | going to do? Is it going to look
pressed in? Is it going to extrude out?
| | 02:49 | Is the text going to change,
is the color going to change?
| | 02:51 | Again, this is totally up to you, but that's
another piece of the puzzle that you have to think about.
| | 02:57 | You also need to think in
terms of an active state.
| | 03:00 | If this was a piece of navigation,
meaning I had several buttons going across the top,
| | 03:04 | do we have an active state indicating that
if I am sitting on this page, this particular
| | 03:08 | menu item is highlighted
telling me yes, you are here.
| | 03:12 | Sort of like at the mall when you are
walking past that big directory sign and there is
| | 03:15 | a little sticker in the
middle that says you are here,
| | 03:18 | that's what that is for.
| | 03:19 | The active state indicates
where you are at any given time.
| | 03:22 | Now the problem with these states is, when we
talk about accessing these pieces of content
| | 03:28 | from a device like an iPhone or an iPad or
an Android tablet, we don't necessarily have
| | 03:33 | the ability to hover with our finger,
| | 03:36 | so the active state becomes also what's known
as the click state or the down state so that
| | 03:42 | when someone punches that button with their
finger, they see some sort of interaction
| | 03:46 | indicating that they have
made contact with that button.
| | 03:49 | So you also need to think
in terms of that as well.
| | 03:52 | So when I am designing a button usually what
I'll do is I'll come into Illustrator and
| | 03:57 | I'll automatically set up three layers.
| | 04:00 | So layer one becomes the up state, and I'll
actually type that out, Up State, and I'll drag
| | 04:05 | my Layers panel out so you can see it.
| | 04:07 | So Up State. I'll create another new layer,
and I'll call this Over State, and I'll create
| | 04:12 | another new layer, and
I'll all this Active State.
| | 04:16 | You could also call this
Down State if you wanted to.
| | 04:19 | I'll move Up State to the top of the stacking
order, Over right there, and Active towards the bottom.
| | 04:24 | That's usually the order they go in.
| | 04:26 | And so once I have that done, I can then
start to build out each one of these states.
| | 04:31 | I usually lock the ones that I am not working
on currently, so if I working on the Up State,
| | 04:35 | I do that right there.
| | 04:37 | And so for this particular button here I am
going to make sure that it's aligned to the
| | 04:41 | center of the document, just so I get it
right in the center, and then I'll press Command+0
| | 04:45 | Ctrl+0 so I can see the whole thing.
| | 04:48 | And so you have two
different choices you can do here.
| | 04:51 | You can actually create multiple states that
lie on top of each other so it's easier for
| | 04:55 | you to toggle visibility and show sort of
the interactivity, or you can simply stack
| | 04:59 | them on top of each other visually on the
screen, so I like a button right underneath
| | 05:03 | it, a button right underneath that,
so you can see all of the states ones.
| | 05:06 | That's totally up to you as well.
| | 05:08 | I tend to like the stacking on top of each
other directly so that I can simulate the
| | 05:13 | interactivity when I'm showing this to clients.
| | 05:15 | So let me show exactly what I mean here.
| | 05:17 | I am going to start with Up State. I'll make
some changes to this, just so we can see it.
| | 05:21 | And I'll select it and I'll go into the
Appearance panel and I'll drag this out so you can see
| | 05:26 | it, and I'll add another new fill to the top
of it, and I'll change that fill to a gradient.
| | 05:33 | And I'll go into the Gradient panel, and let's
make that a radial gradient. Go into Transparency,
| | 05:41 | change the transparency to Soft Light.
And I'll also go up to the Effect menu > Stylize >
| | 05:48 | Round Corners. Again I don't use the
Rounded Rectangle tool in Illustrator.
| | 05:51 | It's just not flexible, so I use the
Live Effect. Hit Preview to preview that.
| | 05:58 | I can't really get a good preview because I'm
zoomed out so far, but five pixels is usually okay.
| | 06:02 | When I am doing rounded-rectangle buttons, I
generally stay between a range of three to six pixels.
| | 06:07 | Anything more than six generally tends to
make it look more like a circle, and I just
| | 06:11 | don't like to round it off that much.
| | 06:13 | But you can do it any way you want.
| | 06:15 | That's the beauty of web design;
it's totally a personal choice.
| | 06:17 | Hit okay, and once I do that, I'll click away
from it so you can actually see what I've got.
| | 06:22 | The last step I might do is click on that
and add a dark green stroke, just to give it
| | 06:26 | a little bit of definition around the edges,
and maybe increase the size to two or three points.
| | 06:32 | And so there we go. I've got my button all ready to go
and once I click away from it, you are going to notice
| | 06:39 | that I don't see the round corners, and the
reason for that is I accidentally applied
| | 06:42 | the round corners to the fill.
| | 06:44 | I was targeting the fill
and not the overall shape.
| | 06:47 | So what I'll do is select that and I'll move
the rounded corners up in hierarchy like that,
| | 06:55 | and once I do that, you'll see the
rounded corners take effect all over.
| | 06:59 | So now I'll collapse that back up, and so
there is my basic appearance for my Up State.
| | 07:04 | I am going to select this now, copy it, and
I am going to lock this layer and now I am
| | 07:12 | going to unlock the Over State and select
that layer and I'll do a Shift+Command+V
| | 07:17 | on the keyboard to paste it in place.
| | 07:20 | I am also going to temporarily hide the
visibility for the Up State; that way I am only seeing
| | 07:24 | the Over State right now.
| | 07:26 | And so what I am going to do is make some
changes to this, and I'll do that through
| | 07:29 | the Appearance panel. So in the Appearance
panel here I'll find that gradient fill and
| | 07:35 | make sure I am
targeting that by clicking on it.
| | 07:38 | I'll go to the Gradient panel, and I
am simply going to reverse the colors.
| | 07:47 | This is not obviously a great design choice,
but it is just giving you an idea of what
| | 07:50 | this is going to look like.
| | 07:51 | And so once I do that, I've reversed those
colors and I am also going to change the stroke.
| | 07:57 | I am going to click on the stroke here and change
the color something to a darker green. Click away from it.
| | 08:05 | What happens if I turn back on the visibility
for the Up State? There is the Up State.
| | 08:09 | So I can tell the client, this is what it
look like when the button is first accessed
| | 08:12 | in the web site. When you hover over the
button, it will look like this. And then you could
| | 08:17 | also do something like the active state
where you change the appearance again.
| | 08:20 | So you get the idea.
| | 08:22 | I usually stack these up; that way I can show
decent interactivity, simulate that for clients
| | 08:27 | or developers, whoever I am handing this off to.
| | 08:30 | But I always do these three layers when I am
working with buttons because every button
| | 08:34 | has this type of interactivity in it.
| | 08:37 | I am going to reset my workspace. And let's
talk about creating a button library, because
| | 08:43 | inevitably you are going to be able to reuse a lot
of buttons that you create inside of Illustrator.
| | 08:47 | So I am going to go and create a new document again,
and I'm just going to create a series of buttons.
| | 08:54 | And so I'll click here. Let's do 300 x 40.
That's fine. And I am going to make sure there
| | 09:00 | is no stroke and a black fill.
| | 09:03 | I am going to line this up.
| | 09:05 | Let's do another one.
Let's do 250 x 40. There we go.
| | 09:10 | Let's do 200 x 40.
| | 09:13 | I usually go back in 50-pixel increments.
| | 09:16 | There we go. I'll do 150 x 40, and then maybe one
more: we'll do 100 x 40. Here we go.
| | 09:24 | So there is my buttons, just like that. It's a
kind of scale of buttons that goes all the way down.
| | 09:28 | And I also select all of them, and I
apply the same effect to all of them as well.
| | 09:34 | So if I wanted this to be a rounded rectangle
set, I would go to Effect, and then I would
| | 09:39 | go to Stylize and I would go Round Corners
and I would then round the corner radius up
| | 09:44 | to like 6, hit okay. There we go.
| | 09:46 | They've all got rounded corners.
| | 09:48 | So these are just basic buttons. I could use
these in mockups or whatever I wanted, but
| | 09:52 | I can also stylize them up if I
needed to for full-on markup.
| | 09:56 | But I think that leaving them in a plain
state like this lends them a little bit more to
| | 10:01 | universal usability.
| | 10:02 | I can use them in multiple projects and then
I can just utilize the symbols that I create,
| | 10:07 | modify the symbol after the fact,
and change it to whatever I need it to be.
| | 10:10 | So here are all my buttons.
| | 10:12 | I am going to bring out my Symbols by going
to Window > Symbols. And the first thing I do
| | 10:19 | is I get rid of all these that in there right
now because I don't really use any of these, so
| | 10:23 | I'll just select them and hit trashcan to
delete them. And then I am going to start dragging
| | 10:27 | these over into the Symbol panel.
| | 10:30 | So I am just going to drag it over.
I am going to call this 300px Btn 6pxl corner.
| | 10:38 | I usually try to tell the width of the
button and how round the corners are.
| | 10:44 | The type does not necessarily matter unless
you are taking this into Flash. This has no
| | 10:48 | bearing on what this symbol is going to do
inside of Illustrator, so unless you are going
| | 10:52 | to be using this in Flash,
I wouldn't worry about that.
| | 10:55 | Same thing goes for 9-Slice Scaling.
| | 10:57 | If you don't want to worry about
that, you don't have to for now.
| | 11:00 | And so Align the Pixel Grid, absolutely. Hit Ok.
| | 11:05 | There is that. When I hover over it, it tells
me 300-pixel button for a 6-pixel corner.
| | 11:09 | I'll do the same thing for the rest of these.
| | 11:11 | I'll just drag them over, 250px Btn 6px corner.
| | 11:18 | Hit okay. Drag it over. 200px Btn 6px corner.
| | 11:28 | 150px Btn 6px corner. And the last
one, 100px Btn 6px corner. Hit OK.
| | 11:42 | And so now I've created this button set which
would be my 6-pixel corner set, and so I would
| | 11:47 | go up here to the panel menu,
| | 11:49 | I would choose save Symbol Library, and I
would call this 6px_corner_btn for button.
| | 11:57 | I would save it in my symbols. I could hit
Save. And so now any time I need these in
| | 12:01 | a mockup, I could just create a new document,
hit OK. They are not going to be in my Symbols
| | 12:07 | library by default, but if I go here, down
to User Defined, I have 6px_corner_btn. I can
| | 12:13 | load those up. And let's say that I needed a
series of those 300-pixel buttons. I could
| | 12:18 | just drag those out.
| | 12:20 | One, two, three, and I could close up the
library. I'll reset my workspace here. And so I could
| | 12:27 | line these things up, just like so,
and I could use those for an ad mockup.
| | 12:32 | That could be a web site navigation markup.
Any number of things I could use these for,
| | 12:37 | but it's just a great way to expedite the
whole process, to save your buttons as a library
| | 12:42 | which you can then reuse anytime you need.
| | 12:45 | So hopefully by now you have a better understanding
of how I create buttons here inside of Illustrator
| | 12:49 | and the different processes and things you
need to think about while you are creating
| | 12:53 | buttons, and also how to take your buttons
and create a library from them so that you
| | 12:57 | can reuse them in any project
that you might be working on.
| | Collapse this transcript |
| Creating form fields| 00:00 | Forms are an essential part of any web site.
| | 00:03 | Forms allow us to get contact
information from our customers.
| | 00:06 | They allow customers to buy things from us.
| | 00:08 | They allow us to interact with the other
people through polls and questionnaires and all types
| | 00:13 | of different things.
| | 00:15 | Inside of Adobe Illustrator, we can help
design the forms by creating markups that we place
| | 00:20 | inside of our web site designs which we can then pass
off to developers to turn into workable HTML and CSS.
| | 00:26 | In this movie, I'll be exploring how to
create a basic form field mockup and then how to
| | 00:30 | use that in a design like the one you see here.
| | 00:33 | So the first thing I need to do is
determine exactly where my form is going to go, how
| | 00:37 | big it needs to be, and all of the
information that I need to take down.
| | 00:42 | For our Contact Us page, for instance, you
would probably want the user's name, user's
| | 00:47 | email address, a subject
line, and then a message box.
| | 00:50 | But you may want some other things along the
way, too, and so what we're going to do is we're
| | 00:55 | going to develop that in its own document.
Then we're going to save that as a symbol
| | 00:59 | and then load it into this document here.
| | 01:02 | So once we've determined all of the fields
that we need, we also need to know how big
| | 01:06 | the form needs to be.
| | 01:08 | I'm going to select this bit of content
right here, the CONTACT US box, and I'm going to
| | 01:12 | go to the Transform panel, and I'm going to
look and see that it's 870 pixels wide.
| | 01:17 | So I really don't need to exceed 870 pixels wide
for the overall width of any of my form fields.
| | 01:24 | Most of them won't be even close to that,
but the message field where people type the
| | 01:28 | most information I may want to make it exactly
that wide so that they have a lot of room to type.
| | 01:34 | What I'm going to do is create a
brand-new document: File > New.
| | 01:37 | I'm going to choose to make it 870 pixels wide.
| | 01:41 | I'm going to chose to make
it about 900 pixels tall.
| | 01:43 | It does not matter how tall it is.
| | 01:45 | I can always add or
subtract space away from it later.
| | 01:48 | I hit OK, and so now I'm ready to start
designing my form. The thing with forms nowadays is
| | 01:53 | that you have to be aware is that most
people are going to be accessing them via desktop
| | 01:57 | computer when they're filling out forms,
but some people also access them via tablet and
| | 02:02 | mobile devices as well.
| | 02:03 | So we still have to keep that
touch-friendly thought in our head as we design these.
| | 02:08 | So again, in order to make things touch
friendly we need to make sure that they are at least
| | 02:12 | between 35 and 50 pixels tall so that when
someone taps on them with a finger, they
| | 02:17 | are easily accessible.
| | 02:19 | So the first thing I'm going to do is start
designing some of the form fields. So I'll
| | 02:22 | just click and grab the Rectangle tool, and
then start right up here and I'll just click
| | 02:27 | to start a new form field.
| | 02:29 | It depends on your personal choice how wide
these things are. In this case, I think I'm
| | 02:33 | going to go about 300 pixels for the width,
and for the height I'm going to make this
| | 02:38 | about 40 pixels tall and hit OK.
| | 02:41 | And if that looks good, I'll stick with it;
if not I can always change it later. But for
| | 02:45 | now I think I'm going to keep that and then I'm
going to copy it, select it with my Selection
| | 02:50 | tool, copy to the clip board and paste it in
front with Command+F or Ctrl+F, and then
| | 02:55 | I'll simply use the arrow keys to
move it over, something like that.
| | 03:00 | And so that's going to be my first name and
last name field, and then I'm going to go right
| | 03:04 | underneath there, align
these up, create a new one.
| | 03:07 | This one, I'm going to make it a little bit
longer in case somebody has longer email
| | 03:11 | address, so I am going
to give 400 pixels by 40.
| | 03:13 | That's going to be my email field.
| | 03:16 | And then I'll come down here, do another one.
| | 03:19 | This one might even be a little
bit longer, so maybe 450 x 40.
| | 03:24 | This is going to be the subject line.
Then we're going to add in a space for the message.
| | 03:31 | And the message, I'm going to make it 800 pixels
wide and I'm going to make it about 500 pixels
| | 03:37 | tall. Pretty big message window.
| | 03:40 | If you want to make that smaller, you can.
It looks a little big to me now that I've
| | 03:43 | brought it out there, so I'm going to shrink
that up, something to like 300 pixels tall.
| | 03:50 | So now I've got first name, last name, email
address, subject line, message box. Directly
| | 03:56 | underneath there I'm going to leave some
space because I'm going to add a couple of radio
| | 04:00 | boxes. I may even add a check box later on,
but I'm going to leave some space for that,
| | 04:05 | right up underneath this, and then towards
the bottom I'm going to add two buttons.
| | 04:11 | So I'll do 300 pixels by 40, again, sticking
with that same width that I have done there.
| | 04:20 | Move this over to the left, copy it, paste it over,
keep that inline, and do another one right like that.
| | 04:28 | So that's going to be my
Reset and Submit buttons.
| | 04:31 | So let's go ahead and style some of these up.
| | 04:33 | Select both of these, turn the
stroke off, and give them a dark color.
| | 04:39 | Those are my buttons.
| | 04:40 | I am going to make sure these don't have
too big of a stroke on them. I'll also make it
| | 04:48 | a light-gray stroke.
| | 04:49 | And I'll do that for all these, so I'll just select
all these simultaneously and give the same light gray.
| | 04:56 | And now if you wanted to add some text into
this so that you could actually see what
| | 04:59 | its supposed to say, just grab this and
I'll type out "first name." And I'll move this up
| | 05:07 | into the first name box and I'll increase
the size of the text by going to the Character
| | 05:12 | panel. About 14 pixels should be okay.
| | 05:15 | I'm going to change this to Helvetica,
maybe a little bit bigger since the form field's
| | 05:20 | a little bit larger.
| | 05:21 | So this is first name.
| | 05:23 | I'll copy that paste it on top of itself
Command+F or Ctrl+F, and then I'll move this into
| | 05:27 | place. Change that to last name. Then I'll
copy that and paste it in, move this here,
| | 05:40 | put Your Email, paste in another copy, Subject,
paste in another copy. And this time I'm going
| | 05:53 | to move this right here and then
move the message box down a little bit.
| | 06:01 | Your Message, there's the message window,
and then I may even add a couple of pieces
| | 06:05 | of text here and move it down there.
And I'll change this to reset, make that white--oops
| | 06:12 | I changed the stroke instead of
the fill--and you'll make that white.
| | 06:18 | Copy it, paste it, move it over, submit.
| | 06:27 | And so now I've got my basic form created
for this design that I've been working on.
| | 06:32 | And so I've left some space down here for
some radio boxes and check boxes so Are You
| | 06:36 | An Existing Customer, Are You Male, Female,
that kind of thing. So any type of demographic
| | 06:41 | information you'd like to
collect, you can do that from there.
| | 06:44 | But right now all I'm interested in are the
form fields, and so I'm pretty much ready to
| | 06:47 | go. So I'm going to select all of this
information that I've just created and I'm going to go
| | 06:53 | over to my Symbols panel. That's a little
clover right here. You could also go to Window and
| | 06:58 | select Symbols, and I'm going to select all
this information that's in here now and get
| | 07:02 | rid of it, and then I'm just going to click New
and I'm going to call this Contact form. Hit Ok.
| | 07:10 | Now I'll go to the top. And I could create
multiple forms, so I could an Order form.
| | 07:15 | I could create all different types, and then
load them into this library. Then I'll chose
| | 07:18 | Save Symbol Library, and I'll call those forms,
hit Save, and now when I go over into the Form
| | 07:25 | fields document, anytime I need to put that
Contact form out there, I'll just go down to
| | 07:30 | the library icon, User
Defined > Forms. There's my form.
| | 07:36 | I'll drag that out and I can position it
somewhere like this, move it into place.
| | 07:42 | If I zoom in a couple of times, you can see
what it looks like. I'll click away from it.
| | 07:47 | So I've got a full mockup of my form. Anytime I
need to make a change to that I could certainly
| | 07:52 | double-click the symbol and make a change
and then redefine the symbol, update it in
| | 07:56 | the library, whatever I need to do.
| | 07:58 | But you see how quick and how easy it can
be to create what looks to be like a complex
| | 08:03 | contact form, essentially is nothing more
than a set of shapes and some text put together
| | 08:08 | in such a way that it creates this mockup
that a developer could take and turn into
| | 08:12 | a working contact form.
| | Collapse this transcript |
| Creating radio boxes and checkboxes| 00:00 | In addition to standard form fields, you may
also find a need for creating something called
| | 00:04 | a radio button or a checkbox.
| | 00:06 | Now in most cases these items are rendered
by the browser by default and so controlling
| | 00:12 | the appearance of them isn't really necessary
because the browser takes care of that for you.
| | 00:16 | But you need a way inside of your mockup of
accurately reflecting where these objects are going to go.
| | 00:21 | So in this movie, I'm going to be exploring
how to create these things and how to make
| | 00:24 | them look as realistic as possible.
| | 00:26 | So the first thing we're going to do is
create a couple of radio buttons, and I'm going to
| | 00:30 | do that by coming over to the Tool panel and
selecting the Ellipse tool. And then I'm going
| | 00:34 | to zoom in quite a bit and then go
right down here in this blank space.
| | 00:40 | And so I'm just going to create
a couple of radio buttons here.
| | 00:42 | It doesn't really matter what they are for
right now; I'm just going to create them.
| | 00:44 | So I'm going to click once. And radio buttons
and checkboxes are usually between 14 to 18
| | 00:51 | pixels in width and height.
| | 00:53 | They are both the same on the height and width.
| | 00:55 | And so I'm going to do this a little bit on
the larger side of about 20 pixels. Just so
| | 01:00 | that my developer can see them a little bit
more, and just in case we do try to control
| | 01:04 | them through CSS, the 20 pixels by 20 pixels makes
them a little bit closer to being touch friendly.
| | 01:10 | And so I hit OK, and that
creates this little circle for me.
| | 01:12 | I'm going to grab the Eyedropper tool and
sample this color from the form up above and
| | 01:18 | when I click away, you can see it's just a
circle right there. And I'll grab my Zoom tool
| | 01:22 | and zoom in right on it so you
can actually see what I'm doing.
| | 01:26 | So now what I'm going to do is take this,
select it, copy it, and paste it in front
| | 01:33 | by using Command+F or Ctrl+F, and then take
this copy and shrink it down quite a bit.
| | 01:40 | Then I'm going to remove the stroke
from the copy and add a center, like this.
| | 01:47 | So that's what it's going to
look like when it's selected.
| | 01:50 | If I zoom out, you can kind of
see what I'm talking about.
| | 01:53 | You've all seen these little things.
| | 01:54 | They're just little things
that you click on to select.
| | 01:57 | So now I'll select back on these, and
I'm going to group this together.
| | 02:04 | And when I get to group together,
I'll copy it, paste it in front, Command+F or Ctrl+F,
| | 02:09 | and then I'll just move it
over, and so I've got another one.
| | 02:14 | Then I could add in some text.
So I could say Male, move that in.
| | 02:21 | Copy, paste it, move it over. And again, I'm just
using Command+F or Ctrl+F to paste in front, Female.
| | 02:30 | Here we go.
| | 02:34 | So we've got those two radio buttons created.
| | 02:36 | Now let's do some checkboxes.
| | 02:40 | Checkboxes are a little bit different because
they are rendered differently in each browser,
| | 02:42 | but in this case I'm just going to
come right here where they intersect.
| | 02:46 | I'm going to move it over to the right.
| | 02:48 | I'm just making sure it's lined up properly.
| | 02:49 | And I'll do 20 x 20 here as well, hit OK,
and then let's just move that over to the
| | 02:55 | right with my arrow keys.
| | 02:59 | I'll line it up with the
edge of this right there.
| | 03:02 | Again, I'll take my Eyedropper tool with the
letter I, sample the color of the form field
| | 03:08 | above it, making it somewhat the same color,
and then now I'm just going to create a check
| | 03:13 | mark. The easiest way to do that is to grab
a Pen tool. And I know a lot of people are
| | 03:16 | afraid of the Pen tool, but
it's pretty easy to work with.
| | 03:18 | I'll just grab the Pen tool here.
| | 03:20 | I'm going to start from the center point of
this and I'll just go right above it click,
| | 03:25 | click, click to extend that a little bit.
| | 03:28 | Here is my check mark.
| | 03:30 | Make sure it has no fill.
| | 03:31 | I'm going to give it a black stroke, increase
the size of the stroke quite a bit, so I'll
| | 03:35 | come over the Appearance panel.
| | 03:38 | Something likes that. There we go.
| | 03:40 | Then I can kind of move that down into place.
| | 03:43 | So there is my checkbox, just
like so. And I can select this,
| | 03:48 | I can group it together, copy it, and paste
it in front--Command+F or Ctrl+F--and then
| | 03:57 | move that to the left a little bit.
| | 04:01 | And then we could type out some more text.
| | 04:03 | We could just type out "Existing Customer?"
| | 04:09 | and move that down here.
| | 04:13 | Copy that to the clipboard, Command+F or Ctrl+F to paste it
in front. And then Newsletter Sign Up, move that just a little
| | 04:27 | bit further away from that, and I
may need to move these over as well.
| | 04:32 | That's okay, I'll just
select them and move them over.
| | 04:34 | And so now, zoom back out I've added
some checkboxes and some radio buttons here to
| | 04:40 | my form design, and I could then select all
of this, save it out as a new symbol to use,
| | 04:46 | but for now I would just save these
individually out as individual symbols.
| | 04:49 | That way I could drag and drop them out
anytime I needed a radio button or a checkbox, and
| | 04:54 | I could implement them in any
design that I have going forward.
| | 04:57 | So hopefully, by now you have a better
understanding of what a radio button and a checkbox is, and
| | 05:02 | how you can quickly mock one of those up for
use in multiple projects using some pretty
| | 05:07 | easy shapes and just a
little bit of Pen tool magic.
| | Collapse this transcript |
| Creating progress bars| 00:00 | In this movie, I'm going to be exploring how
to create your own progress bar mockups here
| | 00:04 | inside of Illustrator.
| | 00:06 | I've got one open that I've been working on
here, and you'll notice in the Layers panel
| | 00:09 | I have three distinct layers
that I start with each time.
| | 00:12 | The bottom layer is the Guides layer.
| | 00:14 | That's where I stick all the guides. And then
I have a Base layer, which is the background
| | 00:18 | part of the progress bar; and then I have a
layer called Progress, which contains each
| | 00:22 | individual piece of the progress bar
as it goes from 0% all the way to 100%.
| | 00:28 | For my progress bars I tend to break them
up into four pieces, 25% each. In this case
| | 00:33 | this is an 800-pixel-wide progress bar, so
each one of these separate sections is going
| | 00:38 | to be 200 pixels in width.
| | 00:40 | However, if you wanted to break this up into 30%
increments, 20% increments, it's totally up to you;
| | 00:47 | you just have to set the guides accordingly
and then break your sections up, as you see here.
| | 00:53 | Let me show you exactly what I'm talking about.
| | 00:54 | I'm going to open up my Layers panel so you can see
it here, and I'll toggle open the Progress layer.
| | 01:01 | And so I've got each one of these set on its
own individual sublayer, and so if I turned
| | 01:06 | off everything but the 25% layer,
you would see that it goes back to 25%.
| | 01:10 | If I turn this on, there is
50%, 75%, and then of course 100%.
| | 01:16 | So I keep all of those on
their own separate sublayers.
| | 01:19 | Then the Base layer is just the shape back here,
which could be any type of shape that you want.
| | 01:23 | It doesn't have to be this
rounded-rectangle shape like you see.
| | 01:26 | It could be just a straight rectangle.
| | 01:28 | It could be anything you want.
| | 01:29 | So I just use this as a way of conveying to the
developer that this is what I want it to look like.
| | 01:35 | This is what I want the
background to look like.
| | 01:36 | This is what I want each step in the
progress bar to look like, et cetera.
| | 01:41 | You can develop these all on your own,
just depending on your personal preference, but
| | 01:46 | now let's go ahead and see how I created this by
creating a brand-new document and walking through it.
| | 01:50 | I'm going to bring my Layers panel back down
to the bottom, and I'm going to create a new
| | 01:54 | document: File > New. And for this document
I'm going to choose a Width of 800 pixels,
| | 01:59 | just because that's easy divisible, and a
Height of 100 pixels, just to give me some space
| | 02:03 | to work with, and I'll hit OK.
| | 02:06 | And once I hit OK, I get a document that
looks just like the other one. And so the first
| | 02:10 | thing I need to do is set up my guide.
| | 02:11 | So I'm just going to double-click on layer 1
over here and I'm going to type out Guides.
| | 02:15 | Then I'll create a new layer on top of that,
double-click it, and I'll call that Base,
| | 02:22 | and another one on top of that,
and I'll call that Progress.
| | 02:26 | So I'm going to go ahead first and lock the
Progress and Base layer so I can't make any
| | 02:31 | changes to them yet, and I'm going to select
the Guides layer and I'll just start working
| | 02:35 | with some guides.
| | 02:36 | So the first thing I'm going to do is bring
up my rulers with Command+R or Ctrl+R on the
| | 02:39 | keyboard, and then I'm just going to draw
out a guide like so. And it doesn't matter
| | 02:45 | where I place it right now
because I can always re-place it.
| | 02:49 | If you find that you can't move your guides
by clicking and dragging, that means they're
| | 02:52 | locked, so go to the View menu, go down to
Guides, and uncheck where it says Lock Guides.
| | 02:57 | That way you can move them around.
| | 02:58 | So in this case I'll snap it
over here to the zero point.
| | 03:01 | Then I'll drag this out.
| | 03:04 | And notice as I drag it out I don't get a
little heads-up display indicating where I
| | 03:07 | am at all, so my Info panel on the top right-hand
portion of my screen is not showing me where I am.
| | 03:12 | So what I'm going to do is release
temporarily and then click again to drag it, and you'll
| | 03:16 | notice my Info panel
starts calculating where I am.
| | 03:19 | So as soon as this hits 200 pixels even, I'll
let go, and that places my guide exactly where
| | 03:25 | I need it to be. And then I'll drag this
one out to 400 pixels. So I'll just click and
| | 03:29 | release, and then click it again to drag it, out
and right there it should snap right to the middle.
| | 03:37 | Then I'll drag this one out around about
where I think it should it go, and this one needs
| | 03:41 | to go about 600 pixels.
| | 03:43 | So again, you could divide yours up any way
you wanted to, based on how big you want your
| | 03:47 | increments to be, how big you want your
progress bar to be, and ultimately that's going to
| | 03:51 | really be dependent on how
big your overall design is.
| | 03:54 | I'm just assuming that the design that I'll
be working on is going to be 800 pixels wide.
| | 03:57 | It might be 960, it might be 600; it just depends.
| | 04:00 | So you have to work from your original
mockup in order to make these things accurate.
| | 04:04 | I'm going to click and drag this out one last
time and I'll snap this guide to the very end.
| | 04:10 | That way I've got an end point as well.
| | 04:12 | And so I'm using these guides for a reason.
| | 04:15 | I'm going to use them in a minute to actually
separate out the shape into individual pieces.
| | 04:20 | So once I have the guides done, I'm going to
lock that layer down and then I'm going to
| | 04:23 | unlock the Base layer and select
it to make sure I'm working on it.
| | 04:27 | Now I'm going to grab my Rectangle tool.
| | 04:30 | Again, this is totally up to you.
| | 04:31 | It could be a rounded rectangle.
It could be a regular rectangle.
| | 04:34 | I'm going to come right here against this
guide and I'm just going to click one time.
| | 04:38 | I'm going to make this 800 pixels wide and
I'm going to make it about 30 pixels tall.
| | 04:43 | It doesn't matter how big it is, because
really and truly nobody is going to be interacting
| | 04:46 | with this with their mouse or their finger,
so it really doesn't matter how big, or even
| | 04:50 | what it looks like necessarily.
| | 04:52 | But in this case I'm going to go 30
pixels in Height, 800 pixels in Width, hit OK.
| | 04:55 | I'm then going to switch to my Selection tool,
and I can move it into the center of the document.
| | 05:01 | If you're not sure if it's in the center,
just come up to the top in your Control panel,
| | 05:04 | align it to the artboard, and then hit the
Align Horizontal Center and Align Vertical
| | 05:09 | Center to make sure it's
right there in the middle.
| | 05:11 | And once I do that, I'm going to give it a
light-gray color so I can actually see it.
| | 05:16 | So that's the base of my progress bar right
there. And I'm going to also round the corners,
| | 05:21 | but I'm going to do that
through the Effects menu.
| | 05:23 | So I'm going to select it one more time, go
up to the Effects menu, choose Stylize, and
| | 05:27 | go down to Round Corners. And I'll hit
Preview so I can see it and 15 pixels,
| | 05:33 | I'll take that back to
about 10 pixels and hit OK.
| | 05:37 | So now I've got my base.
| | 05:39 | One final thing is I am
going to add a stroke to it.
| | 05:41 | So I'll target the stroke, go over to my
Swatches, and I'll pick a darker gray. And then in my
| | 05:47 | control panel I'll just increase the size of the
stroke to something like three points, like so.
| | 05:52 | I'll click away so you can see it.
| | 05:53 | There is the base or the background for my
progress bar. And so now I'm going to select
| | 05:58 | it and copy it to the clipboard,
Command+C or Ctrl+C on my keyboard.
| | 06:03 | Once I have the Base copied, I can then lock
that layer down, and I'll unlock the Progress
| | 06:08 | layer and select it.
| | 06:09 | So now I'm ready to paste
on to the Progress layer.
| | 06:12 | So I'm going to Edit > Paste
in Place, or Shift+Command+V.
| | 06:15 | That's just going to paste
it directly on top of it.
| | 06:18 | First things first: I'm going to take
away the stroke and change the color.
| | 06:23 | It doesn't matter what color you choose right now.
| | 06:25 | I'm just going to choose something like a
green for right now, just to kind of give
| | 06:29 | it a little bit of a different look.
| | 06:30 | So there is my green progress bar.
| | 06:33 | And so now I need to divide
this into separate sections.
| | 06:38 | But in order to do that, I first need to
do something called expand the appearance.
| | 06:41 | Why am I doing that?
| | 06:42 | Because if I were to separate this into
separate sections, each section would have that Round
| | 06:47 | Corners effect applied to it and it wouldn't fit
evenly with each other at each stopping point.
| | 06:53 | So I'm going to go up to the Object menu and
choose Expand Appearance, and when I do that,
| | 06:57 | you'll see that the live editable path comes
up around the edges, indicating that the Round
| | 07:01 | Corners effect is now just part of the object.
| | 07:04 | So now I'm ready to break this
up into individual sections.
| | 07:06 | The easiest way to do that is
to use your Rectangle tool.
| | 07:09 | So I'll just grab my Rectangle tool, and I'll
just come right here where these intersect,
| | 07:13 | and this is where I use the guides.
| | 07:14 | I just click and draw.
| | 07:15 | I let it snap to that guide. And now I'll
just take the Selection tool by hitting the
| | 07:20 | letter V on my keyboard and I'll copy this,
Command+C or Ctrl+C, and Command+F or Ctrl+F
| | 07:27 | to paste it in front. And then I'll just move
it to the second section, Command+C or Ctrl+C,
| | 07:34 | Command+F or Ctrl+F to paste it.
| | 07:37 | Move it right there, each one just snapping in-
between these. Copy it and paste it one more time.
| | 07:43 | Again, it doesn't matter if these line up, as
long as they line up horizontally. It doesn't
| | 07:47 | matter vertically where they go.
| | 07:50 | So now I'll select all of these pieces.
| | 07:53 | I'm going to change the
color so I can see a difference.
| | 07:56 | So I'll change these to kind of a darker green.
And then I'm going to use Command key on the
| | 08:01 | Mac, Ctrl key on the PC and the Left Bracket key
one time to move them behind the progress bar.
| | 08:07 | I'm going to select the progress bar by
holding down the Shift key and clicking on it,
| | 08:11 | makes it active, and we're going
to bring up the Shape Builder tool.
| | 08:14 | That's the Shift key and the letter M, or you
can simply find it right here in the toolbar.
| | 08:20 | And so what I'm going to do is come right
here, hover over this part, click once, hover
| | 08:25 | over this part click once, this
part, click once, this part click once.
| | 08:31 | So I've created each
individual piece of the progress bar.
| | 08:35 | Now I'm going to come here and I'm just going to
Option+Click or Alt+Click the remaining pieces.
| | 08:41 | That removes these.
| | 08:42 | And if I want to make sure that I did this
correctly, I'll toggle open my Progress layer
| | 08:47 | and I should have four paths,
one for each portion of the progress.
| | 08:52 | So if I turn this one off, you see there
it is, turn this one off, and so forth.
| | 08:58 | And so I'll rename these.
| | 08:59 | So the first one here at the bottom is 25%.
The next one would be 50%. And this is where
| | 09:05 | They live in the relationship
to the 100% all the way across.
| | 09:09 | These are each individually 25%, but
this one lives at where 50% would be,
| | 09:13 | This one lives where 75 would be, et
cetera. So 75% and then finally 100%.
| | 09:22 | So now I can alter the appearance of these
any way I want, so make changes to them, add
| | 09:28 | gradients, whatever I might need to do.
| | 09:30 | But you get the idea of how this works.
Now all I have to do is toggle these on or
| | 09:33 | off when I want to show the progress,
either 25, 50, 75, or 100. And so I can turn this
| | 09:40 | over to my developer and say okay this is
the progress bar that I want to showcase at
| | 09:44 | the top of this form or whatever I might be
creating, and these are the increments I want to use,
| | 09:48 | these are the graphics that I need, and it's
easily translated into HTML and CSS or JavaScript
| | 09:54 | this way rather than just
saying "oh, I need a progress bar."
| | 09:57 | So the next time you need to create
something like this just set up a document.
| | 10:00 | You maybe want to set yourself up a template
similar to this for different sizes that you
| | 10:04 | might be working with, and then use this to
create your progress bars and it will be much
| | 10:09 | easier when you take it to the next step.
| | Collapse this transcript |
| Creating tabbed interfaces| 00:00 | In this movie, I am going to be exploring how
to create these little mockups here so that
| | 00:04 | you can easily insert them into any
project that you might be working on.
| | 00:08 | So I've got this finished product here, and
over in the Layers panel you'll see that I
| | 00:12 | have three sublayers: one called Tabs, one
called Content, and one called Background.
| | 00:16 | So the Background elements, if I target those, it
just selects this rectangle in the background.
| | 00:21 | The Content is actually this text right here,
and the text has been set up with some area
| | 00:26 | type options to simulate the CSS box model.
And if you'd like an in-depth explanation
| | 00:31 | of that, I suggest going back to chapter
6 and watching the CSS box model movie.
| | 00:36 | Once we have all this stuff in place, we can
then add the tabs at the top, and the tabs
| | 00:41 | at the top just correspond to
the different areas of content.
| | 00:43 | Now, I only have one content area here,
but you could have several different ones that
| | 00:47 | correspond to each tab if you want it to.
| | 00:50 | But in this case it's just for show;
| | 00:51 | it's not actually simulating any
functionality or anything like that,
| | 00:55 | so I just need this part of it.
| | 00:57 | So in order to re-create this, let's
create a new document. And 1024 x 768 is fine.
| | 01:02 | It doesn't really matter what size you make.
| | 01:04 | I'll just do that.
| | 01:05 | And the first thing I always do is I set
up the basic skeletal structure for this.
| | 01:10 | So the first thing is to create the background.
| | 01:13 | I'll grab the Rectangle tool and just click
somewhere onscreen, and I'll type out 300 x
| | 01:17 | 300, that's generally a widely
accepted size for these type of boxes.
| | 01:21 | They go usually in the
sidebar or something like that.
| | 01:23 | They can be as big or small
as you want them to be though.
| | 01:26 | And so once we have that done, it puts it
out there on the artboard for us. And then
| | 01:30 | I'll grab my Selection tool.
| | 01:31 | I am going to the Window menu bring up Align
panel just so I have that out, because I am
| | 01:35 | going to use that quite a bit in this sort
of exercise. And I am going to align it to
| | 01:39 | the artboard first, so I need to come here and
choose Show Options, align it to the artboard,
| | 01:44 | and then I am going to put it dead center
of the artboard by clicking Align Horizontal
| | 01:49 | and Align Vertical.
| | 01:50 | So once I have that in place, I need to set a
color for it, so I am going to set a light
| | 01:53 | gray, and the stroke,
we are going to do is somewhat of a dark gray.
| | 01:59 | I am going to increase the point size to 2
and change the stroke alignment to the outside.
| | 02:07 | That's going to be out basis for the
rest of the elements going forward.
| | 02:10 | So I've got that set up.
| | 02:12 | Now I'm going to set up the tabs at the top
Remember, this is a 300 x 300 pixel square,
| | 02:16 | so that means it's 300 pixels wide.
| | 02:18 | That means each one of my tabs, depending on
how many I need, need to be an equal width
| | 02:23 | all the way across.
| | 02:23 | So I want three tabs for this.
| | 02:25 | You could have four, five;
it doesn't matter.
| | 02:26 | But I want three tabs and so I
need three 100-pixel-wide tabs.
| | 02:32 | So I am just going to click.
With my Rectangle tool selected,
| | 02:35 | I'll type out 100 for the Width.
| | 02:37 | I want to make these about 35 pixels tall.
| | 02:40 | I want these to be touch friendly so I am
going to hit 35 pixel tall, hit OK, and then
| | 02:46 | I am just going to move this down into place
until it snaps in alignment with the original box.
| | 02:51 | If you can't get them to line up, just select
them both; in your Align panel change your
| | 02:57 | Align to to Selection; and then flush them
against each other on the left-hand side.
| | 03:01 | If they still don't line up, that's okay.
| | 03:03 | You can always adjust that later on, and I
could actually correct this by changing the
| | 03:06 | way the stroke is aligned. So going into the
Stroke changing the alignment to outside, that
| | 03:11 | should fix that right up.
| | 03:14 | And I may need also to move it up a little
bit so it doesn't look it's overlapping the
| | 03:19 | stroke. And I just nudge that
in place with my arrow keys.
| | 03:22 | Okay now, I'll pan over a little bit, select this,
I'll copy it, and then hit Command+F or Ctrl+F twice
| | 03:31 | to paste two copies of it on top of itself.
Then I'll move the last copy I created till
| | 03:37 | it snaps in place over here on the right.
Then I'll create a selection around all of them.
| | 03:42 | Make sure Align to is also set to selection
again, and then we will horizontally distribute
| | 03:46 | them across the center, just like that.
| | 03:48 | So there is my three tabs all the way across.
| | 03:51 | And so now in my Layers panel what I want
to do is, on the path at the very bottom, I
| | 03:56 | am going to rename this Background, and then
I'll target each one of these tabs to make
| | 04:01 | sure they are in the right spot.
| | 04:03 | This one needs to be in the middle, so I'll
move it to the middle of the stacking order.
| | 04:08 | And this one needs to go to the top, and then
this one needs to go back down to the bottom.
| | 04:13 | So theoretically, what I should have is the
top one here, middle, and the right-hand side.
| | 04:20 | So now I can name these Tab 1,
Tab 2, Tab 3, and so forth.
| | 04:29 | There we go: Tab 1, Tab 2, and Tab 3.
| | 04:31 | If you want to add some text to these
to indicate which one is which, you can.
| | 04:35 | I usually also change the color of the first
tab to indicate it's the active one. So in
| | 04:40 | this case we'll change the tab color to a darker
gray to indicate it is the active tab right now.
| | 04:47 | Now I am going to grab by Text tool
and I am just going to draw out a box.
| | 04:50 | It does not matter how big this is;
| | 04:52 | you can always change that later.
| | 04:53 | So I just going to draw out a text box and I
am going to fill that with some Lorem Ipsum
| | 04:58 | text, and I can do that by jumping over into
my other document and just selecting this
| | 05:03 | text here, copying it, and then
coming back over and pasting it in.
| | 05:08 | And in this case I need to change
the size of the box; it's overflowing.
| | 05:13 | So what I am going to do is switch to my Selection
tool, and I am going to go to the Transform panel.
| | 05:18 | I am going to change the size of this.
| | 05:20 | So I want this to be about 280
pixels wide and 280 pixels tall.
| | 05:25 | It looks about right.
| | 05:26 | I'll close this up.
| | 05:27 | I am going to close the Align
panel for now. I don't need it.
| | 05:30 | And I am going to go to the Type
menu, choose Area Type Options.
| | 05:34 | I am going to inset spacing a little bit to
create some space around the edges, so I am
| | 05:38 | just going to do 10 pixels all the way around.
| | 05:42 | If I turn on Preview, you can see what that
does: it just creates a little bit of space.
| | 05:45 | It's also known as padding when
you are dealing with the web.
| | 05:49 | And I may need to adjust
the Height. That's okay.
| | 05:50 | I can switch that back down to be 280, hit OK.
| | 05:56 | Now I'll move this back in.
| | 05:58 | It should snap right about around
the center point, so that's good.
| | 06:02 | Now we want to add that white background to
it, so we are going to do that through the
| | 06:05 | Appearance panel. So I am going to grab the
Appearance panel and bring it out so you can see it.
| | 06:10 | So I am going to make sure I am
working on the Type group here.
| | 06:12 | I am going to add a new fill on top of it.
| | 06:14 | And you are not going to see anything
right off the bat, and that's okay.
| | 06:17 | Change the fill color to white.
| | 06:18 | You are going to see the text
change. Watch what happens now.
| | 06:22 | I am going to make sure I'm
still working on that fill.
| | 06:24 | Go to the Effect menu.
| | 06:26 | I am going to chose Convert
to Shape, select Rectangle.
| | 06:29 | I am going to set both of these values to 0
because I don't want any extra height or extra
| | 06:35 | width, and then I'll hit OK.
| | 06:39 | Then I'll take the fill and drag it
beneath where it says Characters. Drop it in.
| | 06:43 | And so now I can reset my workspace,
and let's zoom out a little bit so we can see this.
| | 06:49 | And so there we have it.
| | 06:50 | There is our basic tabbed interface that we
can then save as a symbol in our symbols library
| | 06:56 | and then reuse anywhere we
need to showcase one of these.
| | 06:59 | So you could use different text if you
wanted to,. For instance, if I wanted to shrink up
| | 07:02 | the text--I think that's a little too big--
shrink that down to about 14 points.
| | 07:07 | That looks better, maybe even
decrease the tracking somewhat.
| | 07:11 | That looks a little bit more
like a real user interface.
| | 07:15 | I would save this as a symbol in one of my
symbol libraries, and then I could open it
| | 07:19 | any time I need it to, drag and drop it directly
into any mockup that I am working on, and really
| | 07:23 | have a nice tabbed interface that I can show
to a client or simply pass off to a developer
| | 07:28 | for them to code using HTML, CSS,
and probably some JavaScript.
| | Collapse this transcript |
|
|
10. Optimizing Web GraphicsUnderstanding slicing| 00:00 | In this movie we're going to be
talking about slicing inside of Illustrator.
| | 00:04 | Now, slicing in the traditional sense means
breaking up a mockup into multiple pieces
| | 00:10 | via HTML and CSS, or HTML and tables
| | 00:14 | that can then be reassembled.
| | 00:17 | In older times when we were working with
designs inside of Photoshop or Illustrator, we would
| | 00:21 | take multiple images in our document and we
would slice them up into smaller pieces so
| | 00:27 | that they would load faster when put
back together inside of a browser.
| | 00:31 | The traditional way has sort of gone by the
wayside because of the advent of things like CSS.
| | 00:36 | So I use slicing now more as an
informational tool rather than anything else.
| | 00:41 | I use the Slice tool to define areas of
content within my document so that the developer
| | 00:47 | knows exactly where I need things broken down,
and also it helps them define specific regions
| | 00:54 | like CSS divs and things like that.
| | 00:57 | Now on the file that I
have open here onscreen
| | 00:58 | I have several different examples of web banners
that I'm working on here inside of Illustrator,
| | 01:03 | and I want to define each one of these as its
own separate slice so it can then be exported
| | 01:08 | out individually.
| | 01:10 | The easy way to do this, especially if you're
working with a square or rectangle piece of
| | 01:15 | art, is to just select it, go to the Object
menu, and go down and choose Slice, and choose
| | 01:22 | Make, and it will
automatically create a slice for you.
| | 01:26 | I can also go here, select that one:
Object > Slice > Make; select this: Object > Slice >
| | 01:35 | Make; and then finally this
one: Object > Slice > Make.
| | 01:41 | And so now I've created individual slices
of each one of these if these had artwork
| | 01:46 | inside of them or whatever that would be
contained within that slice, and so anytime I go into
| | 01:50 | the File > Save for Web dialog box now,
I have these individual regions which I can
| | 01:56 | then select and optimize
individually with their own specific settings.
| | 02:00 | So if I needed one to be a PNG or one to be
a GIF or one to be a JPEG, I could do that
| | 02:05 | individually for each piece of artwork.
| | 02:08 | So not only does slicing allow me to define
different content regions, it also allows
| | 02:12 | me to define different
optimization regions as well.
| | 02:16 | So by doing this, I can create individually optimized
files that are then better suited for the overall design.
| | 02:23 | From here you would just click Save and then
save them out individually, or you can hit Cancel
| | 02:27 | and cancel out.
| | 02:28 | If you happened to have more than one slice
out on your document, you can actually use
| | 02:33 | the Slice tool or the Slice
Selection tool to manipulate those.
| | 02:37 | So the Slice Selection tool is located in
the toolbox, right there, and so I could select
| | 02:41 | this one, hold down
Shift, and select the others.
| | 02:44 | I could also select just a few slices.
| | 02:47 | I'll click away to deselect.
| | 02:49 | Let's say I wanted the big graphic here and
the banner ad. And I can go to the File menu
| | 02:54 | and I can actually choose Save Selected Slices,
and it's going to save out only those two
| | 03:00 | slices, Images Only, in a format that I
specify and once I click Save, I can go through that
| | 03:04 | process and I can save those out individually.
| | 03:07 | So using these slices is a great way to get
individual control over an artboard that might
| | 03:12 | have multiple pieces on top of it, and so
I really enjoy slicing for that reason.
| | 03:17 | The traditional means of slicing, like I said,
have kind of gone by the wayside, but it
| | 03:22 | still has its place if you
know how to use it properly.
| | Collapse this transcript |
| Slicing up a mockup| 00:00 | As I stated in the previous movie, I firmly
believe that slicing is more of an informational
| | 00:05 | tool more so than anything these days,
because it allows me to divide my designs up into
| | 00:11 | specified areas that I can
then tell the developer, okay,
| | 00:14 | this is a div for the content or this is an
image or whatever I might be trying to say.
| | 00:20 | This is the great way to divide a large
mockup into individual pieces which are going to be
| | 00:25 | exported out individually or simply used
as a roadmap for CSS and HTML development.
| | 00:30 | In this movie I'm going to be exploring how
I actually go about slicing a mockup, and how
| | 00:34 | you can also utilize something called Slice
options to refine your slices even more after the fact.
| | 00:41 | So the first thing I'm going to do is grab the
Slice tool, and you can grab that by pressing
| | 00:44 | Shift and the letter K on your keyboard or
by clicking it right here in the Tools panel.
| | 00:48 | And the first thing I'm going to do is just
come out and draw a slice along the top of
| | 00:53 | my design, like this.
| | 00:56 | And you can always refine your slices later
on after you draw them, or if you're not happy
| | 01:01 | with that, you can just Edit > Undo New Slice.
And the easiest way to create a slice is just
| | 01:06 | to select an object that encompasses the area you
want to slice and then choose Object > Slice > Make.
| | 01:12 | And so now I've created a slice of
that entire region up there at the top.
| | 01:16 | If I go now to the Object menu and go down to Slice,
I can also define something called Slice Options.
| | 01:23 | Inside of the Slice Options I am able
to tell it what type of slice it is.
| | 01:27 | I can say it's No Image or an Image,
or in some cases I could say HTML text.
| | 01:33 | We'll get into that in just a moment.
| | 01:35 | So now if I choose to name this--
I'll just call this header--
| | 01:39 | I could give it a URL if I needed to target or
be clickable, et cetera, I'll say Background,
| | 01:44 | None, and from here I'll hit OK.
| | 01:48 | Now I'll select this,
Object > Slice, and I'll choose Make.
| | 01:53 | That slices that up. Object > Slice > Slice
Options. And in this case I'll choose HTML Text.
| | 02:01 | Notice what happens here.
| | 02:02 | It gives me some CSS styling right here.
The font color is equal to, and then it also gives
| | 02:07 | me all of the text.
| | 02:08 | This means if I were to export this out as an
HTML web page, this would actually be selectable
| | 02:14 | text, so you can control that
from within then Slice Options.
| | 02:17 | So you can actually say this text is
HTML, and hit OK, and there you go.
| | 02:23 | And so you could take the time to break up
your entire document into individual pieces
| | 02:29 | and then use those as definitions for
whomever is coding this in HTML and CSS.
| | 02:34 | They could even copy the text
that you export out as well.
| | 02:38 | Now a little bit later on in this course when
you go into the Integrating with Other Apps
| | 02:42 | chapter you will be able to see how you can
actually get working HTML out of Adobe Illustrator,
| | 02:48 | but for now this is just the setup to that
workaround, which I'll show you a little bit later on.
| | 02:53 | As you continue to develop your mockups,
you might want to think about using slicing as
| | 02:57 | a way of defining these specified content
areas so that either you or your developer
| | 03:03 | has a roadmap to follow going forward.
| | Collapse this transcript |
| Understanding web file formats| 00:00 | When it comes to graphic file formats on the
web, we have three basic choices that we need
| | 00:04 | to be aware of and those are GIF, PNG, and JPEG.
| | 00:10 | In this movie, we're going to be exploring
the various web file formats that we can export
| | 00:15 | out of Adobe Illustrator and when
and why we should use each one.
| | 00:19 | So I've got a document opened here and I'm
just going to open the Save for Web dialog box.
| | 00:23 | We're going to go into the Save for Web
dialog box a little bit later in depth to explain
| | 00:27 | all the options that I have available to me
in here, but for now I just wanted to show
| | 00:31 | you the options that I have
in terms of file formatting.
| | 00:34 | So we have JPEGs, GIFs,
and PNGs available to us.
| | 00:38 | I'm going to start with JPEG. And so JPEG
is what we call a lossy file format, meaning
| | 00:43 | that when we compress an item with JPEG compression,
it does cause degradation and can cause pixelation.
| | 00:50 | The lower quality you set for a JPEG image,
the smaller the file size is going to be,
| | 00:54 | but the worse the image is going to look.
| | 00:56 | So for instance, if I happened to turn this
down to a low quality, you could start to see
| | 01:00 | some of that nastiness pixelation and
chunky artifacts that start to appear.
| | 01:04 | If you've ever done a Google image search,
you've probably seen this countless number of times.
| | 01:08 | The JPEG file format is not good if you always
want those good clean graphics, because depending
| | 01:13 | on the compression level,
you might not get such a nice result.
| | 01:16 | However, it is the best when you're saving
out photographs, because photographs need that
| | 01:21 | large continuous-tone image to be displayed
properly on the web, and JPEGs give you the
| | 01:25 | best color gamut for that as well.
| | 01:28 | When you're dealing with photographs on the
web, you need to save those as JPEGs. Also
| | 01:33 | if you have smaller graphics that can be
optimized at a higher compression rate without losing
| | 01:37 | that quality, you could save
those out as JPEGs as well.
| | 01:40 | But one thing that JPEGs
do not do is transparency.
| | 01:44 | You notice here that the background
of my graphic is completely white.
| | 01:48 | That's called a matte, and the matte behind this
graphic is being caused because I'm using the JPEG.
| | 01:53 | Normally, this would just be transparent, and
I could save this out and the logo could just
| | 01:56 | float wherever it needed to go.
| | 01:58 | But since I've chosen JPEG, no transparency
whatsoever, so this would actually be a huge
| | 02:03 | graphic in the long run.
| | 02:06 | The next file format that we're going to talk
about is GIF, and GIF is good for large areas
| | 02:12 | of broad color and graphics that have
really sharp, well-defined edges, without the need
| | 02:18 | of complex transparency.
| | 02:19 | Now I know that's a lot to swallow, but
just let me break it down in terms of this.
| | 02:24 | If you have small icons or big square
graphics with large bits of the same color, that's
| | 02:31 | where you need to save a GIF.
| | 02:33 | GIFs are not good for gradients.
| | 02:35 | They are not good for objects that use
multiple colors sort of close together.
| | 02:40 | They're also not to be used with any
graphics that require the use of complex, or what we
| | 02:44 | call absolute, transparency, things like
drop shadows, blurs, and things like that.
| | 02:49 | So in this case, it would actually work okay
with this graphic, because there's no drop shadow.
| | 02:53 | There is really clean defined edges around
this robot, and there's only two or three colors
| | 02:58 | being used, and they're in pretty
large blocks all the way across.
| | 03:02 | You do see some degradation around the logo
right there in the middle, but all in all,
| | 03:06 | a GIF would work okay for this graphic.
| | 03:09 | The other graphic that we have available to
us inside of Illustrator is something called
| | 03:13 | a PNG file.
| | 03:16 | And PNG files come in a variety of different
flavors, actually: you have something called
| | 03:20 | a PNG-8, a PNG-24, and
something called a PNG-32.
| | 03:26 | When you look inside of the Preset dropdown
you will not see an option for PNG-32, and
| | 03:31 | I'll explain that in a minute.
| | 03:32 | You do have the option
for a PNG-8 and a PNG-24.
| | 03:35 | The PNG-8 is essentially the
same type of graphic as a GIF.
| | 03:40 | It has the same rules and the same type of
things applied to it. No complex transparency,
| | 03:45 | large blocks of color, et cetera.
| | 03:47 | PNG-8 is going to give you in most cases a
smaller file size than a GIF, so you might
| | 03:51 | want to consider that, as long as you
don't have any complex transparency areas.
| | 03:55 | The PNG-24, that is the Mac Daddy of all
graphics when it comes to saving out for transparency,
| | 04:03 | because of the fact that it supports
something called true alpha transparency.
| | 04:08 | And the only difference between a PNG-24
and a PNG-32, which is not available inside of
| | 04:13 | Illustrator, is the name.
| | 04:15 | Think of a PNG in terms of bits.
| | 04:17 | So you have 8 bits for the red channel, 8
bits for the green, 8 bits for the blue, and
| | 04:21 | you also have 8 bits for the alpha channel.
| | 04:24 | You add up all those to together,
8 times four, that's 32 bits.
| | 04:28 | In Illustrator and other programs like Photoshop,
they simply ignore that last eight bits for the alpha.
| | 04:34 | They do include it.
| | 04:35 | It's in there, but they just
don't add it into the file format.
| | 04:39 | In an app like Adobe Fireworks you actually
get a PNG-32, which actually accounts for that
| | 04:44 | last bit of transparency.
| | 04:46 | So if you're in Photoshop or Illustrator and you
need something with super-complex transparency
| | 04:50 | that uses drop shadows, blurs, or something like
that or it's just a logo that really needs
| | 04:55 | to be absolutely crisp and
sharp, go with the PNG-24.
| | 04:59 | If you're in a program like Fireworks,
you could utilize the PNG-32 and it would work
| | 05:03 | perfectly as well.
| | 05:05 | So hopefully by now you have a better
understanding of what these file formats are for and how
| | 05:10 | they are used and why you should
use each one in a given scenario.
| | 05:14 | My suggestion would be to go through and
practice exporting out several graphics at different
| | 05:18 | file formats, take a look at the difference
between them, see which one suits your needs
| | 05:22 | the best, and then commit that to memory so
that each and every time you come into the
| | 05:26 | Save for Web dialog box you can easily
optimize your images accordingly, save them out, and
| | 05:31 | save yourself a ton of time.
| | Collapse this transcript |
| Exploring the Save for Web dialog| 00:00 | In this movie, we're going to be exploring the
Save for Web dialog box inside of Illustrator,
| | 00:05 | and if you're using an older version of
Illustrator, you'll probably see some differences between
| | 00:08 | the one that's available in CS6 versus the
one that's available in the older versions.
| | 00:13 | That's because in Adobe Illustrator CS6 they
have streamlined the Save for Web dialog box
| | 00:17 | to only include what they consider to be the
most essential pieces of a web designer's workflow.
| | 00:23 | So if you see some subtle differences, that's
okay. Most of the big-time functionality has
| | 00:27 | not changed whatsoever.
| | 00:29 | In order to access the Save for Web
dialog box, you can get there one of two ways:
| | 00:32 | you can go to the File menu and choose Save
for Web or you can simply hold down on the
| | 00:35 | keyboard, Shift+Option or Alt, Command or Ctrl
and the letter S, and that will automatically
| | 00:43 | open up the Save for Web dialog box for you.
| | 00:46 | Once inside of the Save for Web dialog box,
you're going to notice on the left-hand side
| | 00:49 | that you have several tools available to you.
| | 00:52 | You have a Hand tool that allows you to
pan and zoom around inside of your document.
| | 00:57 | You also have a Slice tool if you need to make
slices of individual pieces in your document.
| | 01:01 | You have a Zoom tool that allows you to zoom
in and out on various pieces of your document
| | 01:06 | at any given time.
| | 01:07 | If you want to zoom back out, you can hold
down the Option or Alt key and then click
| | 01:11 | to zoom back out.
| | 01:13 | You have an Eyedropper tool which allows you
to sample various colors, to check the colors,
| | 01:18 | and you can also toggle slice
visibility if you're working with slices.
| | 01:23 | At the top you'll be able to see things like
the original image, an optimized version of
| | 01:27 | it, and then you can also view a 2-up display
with the original image on the left and the
| | 01:32 | optimized version on the right.
| | 01:34 | This is a great way to check the fidelity
of your export to make sure that what you're
| | 01:37 | getting out of Illustrator
is exactly what you want.
| | 01:40 | So if you were to optimize this as a JPEG,
would it look just as good as the original,
| | 01:44 | or do I need to up the compression,
change the compression; what do I need to do?
| | 01:48 | You can also review things like the file size,
right here, 2.99 MBs, right over here 18.97K,
| | 01:54 | so a big difference there.
| | 01:57 | On the right-hand side, you're going to find
most of your presets. The presets can be located
| | 02:00 | here underneath where it says Name. You can
drop those down and you have presets for GIFs,
| | 02:05 | JPEGs, and PNGs. These are just mainly used
as jumping-off points though. Chances are
| | 02:10 | you are going to tweak the settings
individually for each graphic to make sure you get the
| | 02:14 | optimum amount of quality with
the smallest amount of file size.
| | 02:17 | So my suggestion would be just to pick one--
like for instance JPEG--and then go though
| | 02:21 | and make adjustments in these areas down
here until you get exactly what you're looking
| | 02:26 | for with the file size that you need.
| | 02:29 | Underneath that, you have Image Size controls.
The Image Size controls are really easy to
| | 02:34 | use. All you have to do is change them and
the link is already connected here, so they
| | 02:38 | will automatically change
Width and Height values for you.
| | 02:40 | You can also change
based on percentage as well.
| | 02:43 | If you do not want this to be clipped to the
artboard, you can uncheck this box and it will
| | 02:47 | clip it to the artwork that is on the artboard.
| | 02:51 | That makes it so much easier to export out
individual graphics, in my opinion, so I usually
| | 02:55 | go ahead and turn that off as soon as I get
in here to clip it right to the artwork that
| | 02:59 | I have on my screen. I can see the true size of the
artwork and then make adjustments.
| | 03:03 | For instance, if I needed this to be exactly 250
pixels wide, I just change that to 250, tab it down,
| | 03:09 | it makes the adjustment for me.
| | 03:11 | It also adjusts the percentage for me as well.
| | 03:14 | Once you are ready to save out of the Save
for Web dialog box, just come down to the
| | 03:18 | bottom right-hand corner and click Save.
| | 03:20 | It will automatically bring you to a Save
As dialog screen, and you can save this out
| | 03:25 | to your desktop or wherever you might be
trying to go. Hit Save and you're good to go.
| | 03:30 | That's a brief tour of the
Save for Web dialog box.
| | 03:33 | We're going to continue using this
throughout the chapter as we explore various ways to
| | 03:37 | export things like photographs and transparent
graphics, so you'll get your fill of the Save
| | 03:41 | for Web dialog box going forward.
| | 03:43 | I just wanted to give you a brief tour of
this so you understand exactly what's going
| | 03:47 | on in here as we
continue forward in this course.
| | Collapse this transcript |
| Optimizing photographs| 00:00 | In modern web design we try to stay away from
images as much as possible to alleviate the
| | 00:05 | load times on our web pages.
| | 00:07 | We design things using CSS and HTML
techniques to simulate what images would actually look
| | 00:13 | like, but we can never get away
from actually using photographs.
| | 00:17 | And so we need to be able to optimize our
photographs out of programs like Photoshop
| | 00:21 | and Illustrator to effectively display these
images on the web at the smallest file size
| | 00:26 | possible while still
maintaining a decent amount of quality.
| | 00:30 | That being said, when you start to bring
photos into Adobe Illustrator I recommend that you
| | 00:34 | optimize them ahead of time in a program like
Adobe Photoshop in order to minimize the size
| | 00:39 | of your Illustrator files as well.
| | 00:40 | However, if you do want to place
high-resolution graphics into your Illustrator files, that's
| | 00:45 | okay, because you can use the Save for Web
dialog box in order to optimize out your JPEG
| | 00:51 | images or photographs as well.
| | 00:53 | Let's go up the File menu here and let's go
to Save for Web. And let's say that I was going
| | 00:58 | to export out this picture
of a robot out for the web.
| | 01:02 | And the first thing I want to do is make sure
that I am exporting this out as a JPEG, because
| | 01:06 | remember, JPEGs are the best
file format for photographs.
| | 01:10 | And once I do that, I am going to select JPEG
High, first off, and when I select JPEG High,
| | 01:14 | you are going to see that the Quality setting
is set to High, the Quality is 60%, and you'll
| | 01:21 | notice down here at the bottom that the Size
is roughly 13.2K versus 146K of the original
| | 01:26 | file, and that's okay.
| | 01:28 | What I am going to do now is change the
setting, and I want you to watch closely right here
| | 01:32 | on the robot to see if you
can see any differences.
| | 01:34 | Let's go from High to Medium, and when I go
from High to Medium you shouldn't see too
| | 01:39 | much of a difference, but there is somewhat
of a degradation going on in here and some
| | 01:44 | more artifacts showing up.
| | 01:45 | If I zoom in a little bit and switch from
High to Medium, you see that extra little
| | 01:53 | bit of artifacting that goes on inside of that?
| | 01:55 | That's because you are compressing it a
little bit more and making the file size go down
| | 02:01 | roughly 6.97K, but you are also losing
a little bit of the quality of the file.
| | 02:07 | Since this is a smaller graphic--right now it
is only 150 pixels by 250 pixels--the Quality
| | 02:13 | setting doesn't matter all that much.
| | 02:15 | But this was a big photograph that we are
viewing in something like a lightbox or it
| | 02:18 | was a product shot or something like that,
we would probably want to crank the Quality
| | 02:22 | setting up a little bit.
| | 02:24 | If you take this down to Low, you'll really start
to see the chunkiness appear in your graphic.
| | 02:29 | That takes it down to 4K, but you are loosing
quality and getting some really blotchy spots
| | 02:35 | all over the whitespace as well.
| | 02:37 | So I think really you can get away with
using JPEG Medium or JPEG High depending on how
| | 02:43 | big you want your file to be.
13K is almost negligible.
| | 02:45 | I don't think that's a big deal.
| | 02:47 | But High is probably as high as I would go
for a web graphic and Medium is probably as
| | 02:51 | low as I would go, depending on the overall
quality of the file that you are getting.
| | 02:56 | Once you have your file set at the JPEG level
that you want, Quality setting that you need,
| | 03:00 | and everything else good to go, all you have
to do is click Save, and then I'll just save
| | 03:04 | this out to my Desktop and I'll
call this red_robot, and I'll hit Save.
| | 03:10 | And now that has been saved out to my desktop as
a JPEG and if I jump over into Adobe Photoshop,
| | 03:16 | I can hit Command+O or Ctrl+O to Open.
And I'll go to my Desktop and select red_robot,
| | 03:24 | open it up, and there it is.
| | 03:27 | And I can actually see here, if I open up the
Image Size dialog box, that it's 150 pixels wide,
| | 03:32 | 250 tall, and if I zoom in on it,
I can see the quality is not that bad.
| | 03:37 | So it was a pretty decent rendering. And if
you want to get really specific, you can launch
| | 03:41 | this up in a web browser. So if I go into
my web browser here, go to File > Open File,
| | 03:46 | navigate to my Desktop, and select red_robot,
| | 03:50 | I can actually see what this is
going to look like on the web.
| | 03:53 | And so judging from this distance
and everything, it looks pretty good.
| | 03:56 | It loaded relatively quickly. And if I upload
that to a server, I could really get an idea
| | 04:00 | of how fast it's going to load.
| | 04:02 | But this looks good.
| | 04:03 | I am satisfied with it, so
I'll take it from there.
| | 04:07 | So let's jump back into Illustrator. And so
like I said, Illustrator is probably not the
| | 04:11 | best place to optimize photographs; it's better
served in other programs like Photoshop and
| | 04:15 | Photoshop Lightroom. But if you want to
optimize photos in Illustrator, you certainly can.
| | 04:20 | Just make sure that you follow the guidelines of
saving it out as a JPEG, and make sure you
| | 04:24 | zoom in to check the quality so that you
are not getting artifacts and pixelation.
| | Collapse this transcript |
| Optimizing transparent graphics| 00:00 | When it comes to optimizing transparent
graphics, we have two basic choices to choose from:
| | 00:04 | we have a GIF and a PNG.
| | 00:07 | In most cases, you could probably get away
with a GIF, but in some cases when you need
| | 00:12 | that complex transparency, or what we call true
alpha transparency, you want to go with a PNG.
| | 00:18 | In the case of a logo, like the one you see
here on the screen, I would recommend going
| | 00:22 | with a PNG, simply because logos are your
calling card on the Internet and they need
| | 00:26 | to be at their best, especially if they have
transparent pieces, like this one here has
| | 00:31 | transparency in here between the arm and
a lot of transparency around the outside.
| | 00:36 | It's not just a square or a circle.
| | 00:38 | So, we need to optimize this in such a way
that we get good clean transparency all the
| | 00:43 | way around while still maintaining
good color fidelity and all that stuff.
| | 00:46 | So, let's go to the File menu and choose
Save for Web, and this is going to open up.
| | 00:51 | Yours may open up looking like this, and if
it does, just uncheck Clip to Artboard right
| | 00:56 | there, and that will snap it
down to where it's supposed to be.
| | 00:59 | So, let's take a look at this as a GIF first.
| | 01:01 | Let's do the GIF 128.
| | 01:04 | When I do that, you are
going to see that it looks okay.
| | 01:07 | There is a little bit of pixelation going
on in some of these smaller areas where the
| | 01:11 | colors seem to run together.
| | 01:13 | Remember, GIFs are good for large, broad areas
of color, not these little subtle areas that
| | 01:18 | run into each other.
| | 01:20 | So, we need to be careful with that.
| | 01:21 | You might get some dithering and some banding
issues, especially if you are using gradients.
| | 01:26 | So we took a look at the GIF.
| | 01:27 | Now let's take a look at the PNG.
| | 01:28 | I am going to go first to the PNG 24.
| | 01:32 | When I click on the PNG 24,
it looks much cleaner to me.
| | 01:35 | It might be hard for you to see onscreen,
but it does look much cleaner to me. The lines
| | 01:39 | look a little shaper,
colors are differentiated well.
| | 01:42 | I really like the way it looks with the PNG 24.
| | 01:45 | Let's check out PNG 8,
which is essentially a GIF.
| | 01:47 | I still see a little bit of degradation
around the edges and things like that.
| | 01:51 | I don't like the choppiness.
| | 01:52 | So I am going to switch it back to PNG 24.
| | 01:55 | Remember, in Photoshop and Illustrator both,
PNG 24 is essentially a PNG 32, which means
| | 02:01 | that it has 8 bits per channel and
also supports alpha transparency as well.
| | 02:06 | That's why we get that nice clean
transparency all the way around it.
| | 02:09 | Let me show you an example of why you would
use a PNG 24 over a GIF or a PNG 8 that makes
| | 02:15 | a little bit more sense.
| | 02:16 | I am going to hit Cancel right now,
and I am going to select this robot.
| | 02:21 | And with it selected, I am going to go up
to the Effect menu and I am going to chose
| | 02:25 | Stylize > Drop Shadow.
| | 02:28 | I'll turn on the drop shadow, and I am going
to set my Opacity to about 60%. X Offset,
| | 02:35 | let's change that to about 3, Y Offset to
about 3, Blur Radius to about 5. The color
| | 02:41 | could be black or dark grey--
it doesn't matter--and hit OK.
| | 02:45 | So now here is my object that's got
that subtle drop shadow applied to it.
| | 02:49 | I want to export this out for the web, and I
want that drop shadow to look pretty good.
| | 02:52 | So in order to do that, I need to go to File >
Save for Web. And so when I select JPEG, right
| | 02:59 | off the bat, you see this is not going
to work because the background is white.
| | 03:02 | I want the background to be transparent.
| | 03:04 | Let's change this to a GIF.
| | 03:06 | I do see the transparent areas,
but look when I zoom in on this.
| | 03:09 | You see the white band that goes
all the way around the outside of it?
| | 03:12 | That's because GIFs and PNG-8 both
use something called binary transparency.
| | 03:16 | They do not use alpha transparency.
| | 03:19 | So there is no alpha channel telling it
how to actually create this transparency.
| | 03:22 | It knows it's there,
but it just doesn't work well.
| | 03:25 | So what I need to do is change this to PNG 24.
| | 03:29 | Watch what happens when I change it.
| | 03:31 | I get true transparency, with that subtle gradient
in the background for the drop shadow. Everything
| | 03:37 | looks nice, clean and crisp around the edges.
| | 03:39 | If I zoom out to its true
size, it looks even better.
| | 03:43 | I'll change this to a PNG-8 just so you
can see that it is exactly like a GIF.
| | 03:49 | So we don't need to use that.
PNG-24, definitely the way to go.
| | 03:53 | So again, remember, anytime you have a lot of
gradients or drop shadows, blurs, any areas
| | 04:00 | of transparency that need to be really
extra sharp, try using the PNG-24 versus a GIF.
| | 04:06 | If you have small areas of transparency
where the precision is not really required, you
| | 04:10 | can probably save it out as a GIF.
| | 04:12 | But my suggestion would be to come in here
and actually play around with the presets.
| | 04:15 | If it looks fine with one
versus the other, then go with that.
| | 04:18 | The main thing you need to pay attention to
is how big the file is going to be and the
| | 04:22 | overall look of the file
over here in the window.
| | 04:25 | Once you are ready to go, just hit Save.
And I can save this out on my desktop as bot_logo,
| | 04:32 | and I'll hit Save, and there we go.
| | 04:34 | Now, anytime I want to use that inside of
one of my web site designs, I can do so and
| | 04:38 | it's a nice crisp and
clean PNG transparent graphic.
| | Collapse this transcript |
| Saving Retina display graphics| 00:00 | Whether we're talking about desktop design
or mobile application design, we have to
| | 00:05 | factor in something now called Retina displays.
| | 00:09 | The Retina display is something Apple started
with the iPhone 4 and has continued with its
| | 00:13 | iPhone and iPad line for
the last couple of versions.
| | 00:16 | They've also just released a laptop
computer with a Retina display as well.
| | 00:20 | The problem with these displays is the fact
that they are almost double the pixel density
| | 00:23 | of any display we've ever had to design for
before, and so therefore the graphics that
| | 00:28 | we design for them must in
turn be retina-capable.
| | 00:32 | Illustrator is the perfect tool for creating
these graphics because we can start at one
| | 00:36 | size, like you see here, and instantly
scale up without losing any quality.
| | 00:41 | So using a vector editing program like Adobe
Illustrator or even Adobe Fireworks is a great
| | 00:46 | way to go about creating
these Retina-style graphics.
| | 00:49 | In terms of using Retina graphics on your
web site or in an application that you might
| | 00:54 | be creating, that's a totally different story.
| | 00:57 | So you might want to do a little bit of
research on something that I found called Retina JS,
| | 01:02 | which is just Retina
graphics for your web site.
| | 01:04 | It is a open-source JavaScript that makes it
easy to implement Retina graphics on your web site.
| | 01:11 | So you download this, you install it into
your web site, and then it basically looks
| | 01:15 | for the high-res graphics and substitutes
them in whenever someone is looking at your
| | 01:19 | page on one of these
high-pixel-density devices.
| | 01:23 | It's really neat, so you might want to
check it out: retinajs.com.
| | 01:27 | Let's jump back into Illustrator, and let's
talk about how we get this document here into
| | 01:32 | a Retina display.
| | 01:35 | This is set at a standard 320 x 480
display size for most mobile devices.
| | 01:41 | However, the new iPhones are usually set to
960 x 640, which is significantly bigger than
| | 01:48 | this, and that's why most of the time when
you hear people talk about designing Retina
| | 01:52 | graphics, you hear the phrase 2x.
| | 01:54 | Apple did something very smart when
they designed the iPhone 4 display.
| | 01:57 | They actually just made it double the pixel
size of the original, so making it easy for
| | 02:02 | developers to just scale
up their designs to 2x.
| | 02:07 | And if you take a look at that Retina JS that
we just talked about, it actually looks for
| | 02:10 | a modifier at the end of the file name called
@2x, indicating that this is the same graphic,
| | 02:17 | just at two times the size.
| | 02:19 | So that's exactly what I'm going to do here.
| | 02:21 | I'm going to take this and I'm going to
save it out as a Retina graphic, but I need to
| | 02:25 | do that at twice the size.
| | 02:27 | In order to do that, you just take your
standard graphics like you have here and go to the
| | 02:30 | File menu and choose Save for Web.
| | 02:33 | Once you're inside of the Save for Web dialog
box, you'll pick the correct preset up here
| | 02:38 | at the top. Most of the time that's going to
be either a PNG or a JPEG; GIFs just don't really
| | 02:42 | cut it in this case.
| | 02:44 | Then right here where it says percent,
| | 02:46 | you can change this to 200%,
and then press the Tab key.
| | 02:51 | You'll notice when I do that, it goes from
320 x 480 to 640 x 960--exactly what we needed.
| | 02:58 | And if I look at this at 100%, you can see,
even though I've scaled this up, it still
| | 03:04 | looks really crisp and really clean.
| | 03:07 | And so what I would do now is take this file
and save it out. So this would be let's say
| | 03:12 | appmockup and then I would put @2x.
| | 03:17 | So I would save that out to my desktop and
then upload that to my web server, and then
| | 03:22 | if I use something like Retina JS or any other
number of ways to do that, it would automatically
| | 03:27 | pick that up and insert the Retina
graphic in place of this graphic.
| | 03:33 | The only other way around this Retina display
problem that we have is to use something called
| | 03:37 | SVG, and we'll explore exactly what SVG means
and how you can create those types of graphics
| | 03:44 | in the very next movie.
| | Collapse this transcript |
| Exporting SVG graphics| 00:00 | On the web today, we have to understand that
the devices which are accessing our content
| | 00:05 | no longer have just a
standard 72-pixel-per-inch screen.
| | 00:08 | In fact, many of them exceed even 300 pixels
per inch, such as the case with Apple's iPhone,
| | 00:13 | iPad, and even now the MacBook Pro.
| | 00:16 | One solution to this resolution dilemma is to use a
graphic format known as SVG, or Scalable Vector Graphic.
| | 00:23 | SVG offers us a truly resolution-independent
way of displaying our graphics on the web,
| | 00:28 | and it does so by using XML to define the
basic properties of the image, like paths,
| | 00:33 | shapes, fonts, and even colors.
| | 00:36 | This is perfect for UI elements, icons, logos,
patterns, or even backgrounds that need to
| | 00:41 | be scaled differently in order to
display correctly on a wide range of devices.
| | 00:46 | You design it once and use it
anywhere, at any scale, at any resolution.
| | 00:50 | How cool is that?
| | 00:52 | In addition to its scalability though, SVG
also has bandwidth-friendly files. No matter
| | 00:56 | how big the graphic becomes, the only data
that's actually transmitted to the browser
| | 01:00 | is the XML that's attached to the file.
| | 01:03 | This makes the file size much smaller
than any rendered graphic at that size.
| | 01:07 | There are some use cases where SVG cannot be
used, however, like photographs for instance.
| | 01:12 | This is because SVG simply can't match a
photograph pixel for pixel in terms of detail.
| | 01:17 | Anything else is fair game though.
| | 01:19 | When it comes to browser compatibility,
SVG is supported by the big ones, like Firefox,
| | 01:24 | Chrome, Safari, and Opera.
| | 01:27 | But you'll probably notice one big name
missing from that list. Yeah, that's right.
| | 01:32 | As usual, Internet Explorer does
not support SVG. But don't worry.
| | 01:36 | There are plenty of other ways around that,
which you can find through a quick Google
| | 01:40 | search, ways of using JavaScript, and other
methods to embed SVG files so that they work
| | 01:45 | properly inside of Internet Explorer.
| | 01:48 | As most mobile devices use some variation of
the WebKit browser, you're good to go when
| | 01:51 | it comes to that platform,
| | 01:52 | so don't worry about mobile.
| | 01:54 | Now, let's jump in here and take a look at how
we can export in SVG out of Adobe Illustrator.
| | 01:59 | In previous versions of Adobe Illustrator,
you were able to Save for Web directly to an SVG.
| | 02:04 | However, in Illustrator CS6, SVG has been
stripped out of the Save for Web dialog box and placed
| | 02:09 | simply in the Save As dialog box.
| | 02:12 | So if I go to the File menu and I choose Save As,
I'll select my desktop here, and underneath
| | 02:18 | the Format, I can choose SVG.
| | 02:21 | So, when I do that--
I'm just going to call this Robot.
| | 02:26 | And once I'm ready to save it, I'll click
Save, and it comes up with my SVG Options.
| | 02:31 | You'll get to pick between your SVG profiles
here at the top, and underneath that, you'll
| | 02:35 | get a description telling you this
specifies the desired SVG XML type documentation.
| | 02:41 | And here all you need to worry
about is just sticking with the default.
| | 02:45 | If you want to use an older version,
you can, but you don't have to do that at all.
| | 02:50 | In this case, I'm just
going to stick with this.
| | 02:52 | The Fonts, this is a little
bit of a different story.
| | 02:54 | When you hover over this, it says, "This font format
produces the best visual fidelity for displaying text.
| | 02:59 | The Adobe SVG Viewer can
display text using this format.
| | 03:03 | However, not all viewers support this format."
| | 03:06 | If you select SVG, it tells you here that
this is the standard W3C SVG font format.
| | 03:12 | It is supported by all of the
viewers, meaning all the browsers,
| | 03:15 | but it doesn't produce the best visual fidelity
for small text due to the lack of font hinting.
| | 03:22 | If you want to be compatible with
everything, you can, but you don't have to be.
| | 03:23 | Finally, Convert to Outline.
| | 03:28 | If you do that, this will convert all of the
active text in your document to outlines upon export.
| | 03:33 | It tells you here that even though the
visual fidelity of small outline text may not be
| | 03:38 | accurately preserved by choosing this.
| | 03:41 | So my suggestion would be to
experiment with this a little bit.
| | 03:45 | Try it out with the Adobe Viewer: export it,
and then open it up in all your browsers.
| | 03:50 | Try it with the SVG: open it up, test it in all your
browsers. And then finally, try converting it to outlines.
| | 03:57 | In most cases, you're going to be converting
your type to outlines before you render it
| | 04:00 | out anyway, especially if you've been
sharing this with other colleagues and clients, as
| | 04:04 | they might not have
those fonts in their system.
| | 04:06 | If you do that, you're pretty much good to go.
| | 04:08 | So in this case, I'm going to
keep it on Adobe CEF for now.
| | 04:12 | You can choose a subsetting if you want to.
| | 04:14 | You don't have to though.
| | 04:15 | Each time you hover over these, by the way,
it gives you a little description down at
| | 04:18 | the bottom on what that means.
| | 04:20 | Options, Image Location: this specifies the
locations of images referenced in the document.
| | 04:26 | Do you want to embed those images directly
inside of the SVG or do you want to link to them?
| | 04:30 | When you hover over the link, that tells you here
that link documents to images exported from
| | 04:35 | the original Illustrator file.
| | 04:37 | This is useful for multiple SVG
files that share common raster elements.
| | 04:41 | Images are saved as JPEGs with no alpha
channel or PNGs with an alpha channel.
| | 04:45 | In this case, I'm going to
choose to embed into my file.
| | 04:50 | If you would like to preserve Illustrator
capabilities, that just means that if you're
| | 04:53 | going to make future changes to this, preserving
Illustrator editing capabilities will be helpful
| | 04:59 | to you, because then you can open up the
SVG file and make changes to it later.
| | 05:03 | However, if you preserve Illustrator editing
capabilities, chances are you are going to
| | 05:06 | increase the file size a little bit as well,
| | 05:08 | so I'm going to leave that turned off for now.
| | 05:10 | If you want to see more options, you can click
here, and there are several different options
| | 05:14 | that you have available to you.
| | 05:15 | For now, I'm just worried
about the basic options though,
| | 05:18 | so I'm going to collapse
this by choosing Less Options.
| | 05:21 | And then finally, once I'm ready to this,
I can either launch my web browser to preview it.
| | 05:26 | So I'll click here, and that will launch my
browser, and there it is right there, and
| | 05:30 | if I were to move this or scale it
around, I can't really do that here.
| | 05:34 | But it looks pretty good from where I'm
standing, so I'm pretty happy with it.
| | 05:37 | I'll go back to Illustrator and I'll hit OK.
| | 05:39 | Now, that should have saved the SVG to my
desktop, and if I go in my web browser now
| | 05:46 | and open this up, I can select
it and open it, and there it is:
| | 05:51 | the SVG file just as it's supposed to be.
| | 05:54 | Now, if you're looking for some tips on how
to optimize your SVG graphics, Adobe's help
| | 05:58 | documentation on Illustrator SVG is very good
and very extensive, especially when it comes
| | 06:04 | to setting up your SVG files for proper
export and also applying different SVG effects, and
| | 06:10 | even adding interactivity as well.
| | 06:12 | So, if you want to check that out, that's
help.adobe.com, and go to the Illustrator
| | 06:16 | section and do a search for
SVG, Scalable Vector Graphic.
| | 06:21 | So, hopefully by now you have a better
understanding of what a SVG graphic is, how it works, why
| | 06:28 | it's useful, and how we can use that to better
display graphics on a wide variety of devices and screens.
| | Collapse this transcript |
|
|
11. Creating Image SpritesUnderstanding image sprites| 00:00 | One of the easiest ways to help speed up your
web sites, especially when it comes to images
| | 00:04 | rendering on the web site, is to
utilize a technique know as image sprites.
| | 00:09 | And in most cases we are going to talking
about these in terms of CSS, but they have
| | 00:13 | to be created somewhere, and so Adobe
Illustrator is actually really good for creating these
| | 00:19 | things called image sprites.
| | 00:21 | But first let's talk a look at
what exactly an image sprite is.
| | 00:24 | I have inside of this document two layers,
one of which is called window. And the window
| | 00:29 | layer is simply a compound shape that has a
48 x 48 pixel wide opening in the middle of it.
| | 00:38 | And underneath that, on layer 2, you'll see
there are several social icons. If I hide the
| | 00:42 | Window layer, you can actually
see all of the icons right there.
| | 00:45 | So I am going to temporarily leave the Window
layer hidden and just work on layer 2 for now.
| | 00:50 | You can see here I have all of these
different icons as one single group.
| | 00:55 | And that's basically what an image sprite is.
| | 00:57 | It's a group of images that are laid out in
a grid format that are easily displayed via
| | 01:02 | CSS in different ways and in
different positions throughout your web site.
| | 01:06 | So for instance, if I wanted to display the
Facebook icon as opposed to the Twitter icon
| | 01:11 | through CSS, basically what I would do, I would
set the window to be 48 x 48 pixels, just like
| | 01:17 | this, and then I would simply move the group so
that the Facebook icon is now present in the windows.
| | 01:25 | Now the Facebook icon is the only one you see.
| | 01:28 | The added benefit here is that all of the
rest of the images are actually rendered in
| | 01:32 | the background, so anytime you call upon those
images to be displayed, the load time is significantly
| | 01:37 | reduced because those images
have already been rendered.
| | 01:40 | So all they have to do is just pop into place.
| | 01:42 | So if I needed to get the Skype icon in the
right place, just maneuver it through CSS.
| | 01:48 | It pops up in the window,
instead of the Facebook icon.
| | 01:52 | So what you are able to do is take multiple
images, lay them out in a grid, and then call
| | 01:57 | them out based on their position in the grid to
be displayed in different areas of your web site.
| | 02:03 | Again, this is mainly for speed and
convenience factor so that you don't have a whole bunch
| | 02:06 | of images in your images directory and you
don't have to worry about loading individual
| | 02:11 | images across your site.
| | 02:13 | So if you do a Google search for "Image Sprite"
or even a specific one, like say "Facebook Image
| | 02:18 | Sprite," you'll see how this has being
employed on hundreds of web sites around the world.
| | 02:23 | And it's a really great technique for helping
you speed up the load time of your site and
| | 02:27 | also for the convenience factor.
| | 02:29 | The big thing here that you have to remember
is setting these up inside of a grid, making
| | 02:33 | sure that they are evenly spaced, and knowing
the overall location of each individual icon
| | 02:39 | so that when you toss this over the wall to a
developer they can easily use round numbers
| | 02:44 | for the positioning and it makes it a whole
lot easier when they are calculating the CSS.
| | 02:48 | So again a CSS image sprite, or an image
sprite in this case, is nothing more than big grid
| | 02:54 | full of images that you are going to use to
display in different areas through these little
| | 02:58 | windows of which you define
the size, shape, and location.
| | Collapse this transcript |
| Creating a sprite grid| 00:00 | When you begin to create image sprites inside
of Adobe Illustrator the first thing you need
| | 00:03 | to do is arrange the graphics that you are going
to be using inside of what's called a sprite grid,
| | 00:09 | and this movie I am going to
show you how to set up such a grid.
| | 00:12 | So the first thing I need to do is create
myself either a new document or a separate
| | 00:16 | artboard in the current document I am working
on to house all of the items that I am going
| | 00:21 | to put on the grid.
| | 00:22 | Now I could just resize the artboard that
they are sitting on, but it's much easier
| | 00:25 | to start from a clean
artboard over the right-hand side.
| | 00:28 | So the first thing I am going to do is click
on the Artboard tool and then I am going to
| | 00:33 | click somewhere out on the
canvas, somewhere like this,
| | 00:35 | and I am just going to draw out a new artboard.
| | 00:39 | Now I am paying close attention to there
numbers as I drag this grid out, because I want the
| | 00:44 | artboard to be precisely
sized to fit the icons.
| | 00:47 | Each icon is 32 pixels by 32 pixels,
| | 00:50 | so that means I need to have an artboard with a
width of 192 pixels and a height of 64 pixels.
| | 00:56 | So I will just push this back to 192, and
once I get it 192, I can then shrink it up to be
| | 01:02 | 64 pixels tall. And if you
can't get it precise, that's okay.
| | 01:06 | You can just come right up to the Control
panel and make the changes, so 64 pixels, 192.
| | 01:14 | And so there is my new artboard which is
going to be used for my sprite grid. Much
| | 01:18 | smaller than the original document that I have.
| | 01:20 | The next thing I am going to do is I am going
to turn on my grids, but first I need to make
| | 01:24 | sure that it's set to a
32 pixel by 32 pixel grid.
| | 01:28 | So let's go to Illustrator >
Preferences and let's go down to Guides & Grid.
| | 01:33 | On a PC you can just go to Edit >
Preferences and then jump into the Guides & Grid section.
| | 01:37 | And so down here in the Grid section I want to
make sure that it says Gridline every 32 pixels.
| | 01:42 | Yours may be set to something different.
| | 01:43 | I have been playing with mine
so it's set to 32. That's good.
| | 01:47 | So I want the 32 pixels. Every gridline will
be 32 pixels evenly spaced across. I'll hit OK.
| | 01:53 | And then I'll go to View and I'll click Show
Grid and when I do that, it automatically turns
| | 01:58 | on the grid for me. And you might notice
that the grid doesn't exactly line up with the
| | 02:01 | artboard, and that's okay.
| | 02:02 | You can just grab the Artboard tool and then you
can position this to line up with the grid like so.
| | 02:09 | And if you need to zoom in to do this,
it might make it a little bit easier.
| | 02:12 | I just want to snap that right in there to a gridline;
that way you get 32 pixels across, 32 pixels high.
| | 02:19 | And I'll switch to my Selection tool now.
| | 02:21 | And if it's still not exactly lined up like
it's supposed to be, you can grab the Artboard
| | 02:25 | tool again and just move it down
until it is in the right spot.
| | 02:30 | Switch to my Move tool, and now I've got 32
pixels down, 32 pixels across for each one
| | 02:35 | of those squares, so it's all good.
| | 02:37 | I'll zoom out a little bit, and now I can start
positioning my items inside of the sprite grid.
| | 02:43 | So I'll select the Twitter icon first, and
I'll move that over. And you might want to
| | 02:48 | zoom in so you can really get this in the
right position, just like so. So I'll position
| | 02:55 | the Twitter icon there, and then let's zoom
out, pan over. I'm just holding down
| | 03:01 | my Spacebar key, temporarily, with my
Move tool to pan and zoom around.
| | 03:06 | So I've got the Facebook icon and
we'll just kind of set that up in there.
| | 03:10 | There we go. And again, we are placing these
in the grid so that it makes it easier for
| | 03:17 | the developer to turn this into
functioning CSS a little bit later.
| | 03:21 | So I'll go ahead and take the Dribble icon now
| | 03:23 | and I am just going to cut it--Command+X or
Ctrl+X. Then I'll pan over and click inside
| | 03:30 | my artboard and paste. Command+V
or Ctrl+V puts that in there.
| | 03:35 | Then I'll come over here and I'll grab these.
| | 03:38 | And I could actually just grab
all of them at once if I wanted to.
| | 03:44 | Cut them all, move over, make sure I click
here, and they would paste in relatively close
| | 03:50 | to where they need to be.
| | 03:52 | And then I can just move them into place, so
there is Google+, LinkedIn, Skype, Flickr,
| | 04:03 | and there is Behance.
| | 04:07 | And if I've missed any, I can zoom out.
And the RSS icon is the only one I missed,
| | 04:13 | so now we'll zoom in--Command+O or Ctrl+0 so
I can see the whole thing, and there we go.
| | 04:19 | So once I have all of my images aligned
inside of my sprite grid, I am essentially ready
| | 04:23 | to take them from Illustrator and export them
out for the web so that they can then be used
| | 04:29 | inside of CSS to creatively position them
all over my web site and display these images
| | 04:33 | wherever I need them to pop up.
| | Collapse this transcript |
| Optimizing sprites for the web| 00:00 | Once you have all of your images loaded into
your sprite grid here inside of Illustrator,
| | 00:04 | it's time to take them and export them out for use
in an HTML/CSS editor, and to display them on the web.
| | 00:12 | So the first thing we need to do is go
to the File menu and choose Save for Web.
| | 00:17 | Once we have that done, we need to pick the
best type of export for our icons or whatever
| | 00:22 | it is that we might be exporting.
| | 00:24 | Now, this is going to be dependent on exactly
what type of graphics you've created. In this
| | 00:28 | case I've a lot of flat areas of
color and I don't have any transparency,
| | 00:33 | so I think the best thing to do
here would either be a GIF or a PNG.
| | 00:39 | So in this case I think
maybe PNG would serve me well.
| | 00:44 | PNG-24 might actually be the best, in terms of
quality, but it's also going to be a higher
| | 00:49 | file size. But in this case these are so
small, 4.5k, it's not that big of a deal.
| | 00:55 | And so once I pick this, I'll go ahead and
hit Save, and I'll go out to my desktop and
| | 01:00 | I'll just save this out as
social_icons, and hit Save.
| | 01:07 | Once I do that, I now have a PNG graphic
saved out to my desktop which I could then hand
| | 01:11 | off to my developer, and they could use that,
along with some creative positioning techniques
| | 01:16 | via CSS, to display these individual icons
anywhere that they need to on my web site,
| | 01:23 | but they would all load instantly in the background
because they're all a part of this one single image sprite.
| | 01:28 | If you would like more information about how to
optimize your graphics for the web, including
| | 01:32 | all types of web graphics with transparency,
photographs, et cetera, you want to go back
| | 01:37 | and watch chapter 10 of this course, because
that's where I cover all of the optimizing
| | 01:42 | web graphics and how to get your things out
of Illustrator at the highest quality for
| | 01:46 | the smallest file size possible.
| | Collapse this transcript |
|
|
12. Integrating with Other AppsPlacing Illustrator Smart Objects| 00:00 | Illustrator has a wide variety of tools that
can be used to do some really crazy stuff,
| | 00:05 | but in the end there are some things that
Illustrator simply can't do that we need to
| | 00:09 | use other applications for.
| | 00:11 | And in many cases I find myself taking
graphics from Illustrator and placing them into other
| | 00:16 | applications like Adobe Photoshop in
order to achieve some really neat effects.
| | 00:20 | In this movie I'm going to be exploring how to
place an Illustrator file inside of Photoshop
| | 00:25 | as something called a Smart Object, which
you can then run filters on nondestructively
| | 00:29 | to make changes to it.
| | 00:31 | So I've got here a blank document inside of
Photoshop, and what I'm going to do is place
| | 00:35 | an Illustrator file in there.
| | 00:36 | So I'm going to go to File > Place. Inside of my
Chapter 12 file folder there is a bg_place.ai file.
| | 00:42 | I'll click Place.
| | 00:45 | It's going to bring up the Place PDF dialog
box, and I want to crop it to the bounding
| | 00:48 | box of this, and I'm just going to hit OK.
| | 00:51 | It should come in full screen, and once it
pops in there, I'll hit Enter or Return to
| | 00:55 | commit to it, and there it is, on my background.
| | 00:58 | And so what I want to do now, let's say I
wanted to run a filter on this, like maybe
| | 01:01 | Photoshop new Oil Paint Filter.
| | 01:03 | I can just go up to the Filter menu.
Since this is a Smart Object, it allows me do that.
| | 01:08 | I'll go up here and choose Oil Paint.
| | 01:12 | That brings me in here, and I can maneuver
this around to change it in many different
| | 01:22 | ways till I get it exactly
like I like it. And I'll hit OK.
| | 01:30 | And once I commit to that, you can see that it
runs the filter right there on that Smart Object.
| | 01:35 | Now the best thing about placing an Illustrator
file into Photoshop is that I can double-click
| | 01:39 | on that Smart Object and it
will launch this in Illustrator.
| | 01:42 | It will tell me here that this document
has been modified out of Illustrator.
| | 01:45 | That's okay. What I'm going to do is
discard the changes for now and hit OK.
| | 01:50 | That opens it up.
| | 01:51 | You can see here it says Vector Smart Object.
| | 01:54 | And so now I'm just going to select
this background piece. And it's at 50%.
| | 02:00 | I'm going to change that to 100%.
There we go. Save that.
| | 02:03 | And once I save it and jump back into Photoshop,
you'll see the background update automatically,
| | 02:08 | and then I can also change the filter as well.
| | 02:11 | So I can double-click where it says Oil Paint.
| | 02:12 | It will bring me back into the Oil Paint dialog
box, and I can change. So I can reduce the Shine,
| | 02:21 | turn back the Cleanliness.
| | 02:23 | Let's up the Stylization a little bit.
There we go. And reduce the Scale, increase the
| | 02:32 | Brush Detail, hit OK.
| | 02:35 | Now I've got a nice background image that
I could use for an application or even for
| | 02:38 | a web site if I choose to, but I did that
all from just placing that Illustrator file
| | 02:42 | into the Photoshop document. And as long as
I keep this as a PSD file, the Smart Object
| | 02:47 | will exist there, and I can make changes to
it anytime I want simply by double-clicking,
| | 02:52 | making the change, saving it, and coming back in.
| | 02:54 | So the Adobe Illustrator to Photoshop
workflow is actually pretty seamless.
| | 02:59 | It works the same way if you wanted to take a
Photoshop document and place it into Illustrator as well.
| | 03:04 | All you would have to do is export out your
PSD file and then go into Illustrator and
| | 03:09 | choose File > Place and place the
PSD file into Illustrator as well.
| | 03:13 | So the next time you have a project that just
isn't quite getting it done inside of Illustrator,
| | 03:17 | try dropping it into another program like
Photoshop, running some filters, and see what you come up with.
| | Collapse this transcript |
| Sharing color swatches between apps| 00:00 | Many times you'll start a project in one
application, like Illustrator or Photoshop, but then finish
| | 00:05 | it off in another application.
| | 00:07 | And so in order to do that and maintain a
consistent look and feel for your project,
| | 00:12 | you'll need to be able to share color swatches that
you create inside of one application to the other.
| | 00:17 | Now if you go back and watch the color chapter in
this course, I explain exactly what a .ase file is--
| | 00:23 | it stands for Adobe Swatch Exchange--and I also go
through how to create your own custom color palette.
| | 00:27 | But in this case I'm just going to load up
an Adobe Swatch Exchange file and then show
| | 00:31 | you how that's interchangeable
between both Photoshop and Illustrator.
| | 00:35 | So inside of Illustrator, if I want to load
this up, I'll find the Swatches panel, I'll
| | 00:38 | just click the little Library icon, and I'll
go down to Other Library, and I'll navigate
| | 00:43 | out to my Desktop/exercise files/Chapter 12/robot_
colors.ase, open that up, and there are my robot colors
| | 00:50 | for this web site mockup that I created here.
| | 00:53 | And you could have just created
custom swatches from these as well.
| | 00:56 | Once you have a .ase file saved out of Adobe
Illustrator though, you can jump into another
| | 01:01 | program, like Photoshop. And then I'll just
create a new blank document; it doesn't matter
| | 01:06 | what the size is. And I'll bring out up
my Swatches panel here so you can see it.
| | 01:12 | And then I'll go right here, I'll choose Load
Swatches, find robot_colors.ase, open it up,
| | 01:20 | and those colors load in right there.
| | 01:22 | I actually had them loaded in previously.
| | 01:24 | You can see them right there as well. So if
I cut these out real quick, you can see just
| | 01:30 | the ones that I just loaded in right there.
| | 01:32 | And so easily exchanging these swatches between
applications ensures that I'm using a consistent
| | 01:37 | color palette for any design that I do, no
matter if it's in Photoshop, Illustrator, InDesign,
| | 01:42 | or even Adobe Fireworks.
| | 01:44 | I can create all this artwork with the same
colors, maintain a consistent look and
| | 01:48 | feel throughout, and make sure that when I
export this out and send it to the client,
| | 01:52 | everything looks good.
| | 01:53 | It maintains the same quality that they're
used to from one application to another.
| | 01:58 | So, take the time to set up your own color
swatches. And again if you need to, go back
| | 02:01 | and watch that chapter of this course and
then save them out as .ase files, and you can
| | 02:07 | easily exchange them from app to app.
| | Collapse this transcript |
| Exporting Illustrator artwork as a PSD| 00:00 | Many web designers use more than one
application to create their web site designs.
| | 00:05 | They don't just stick with something
specifically like Illustrator or Photoshop.
| | 00:09 | So we have to be able to move our
files from one application to the other.
| | 00:13 | And lucky for us, Illustrator has a built
in Export feature that allows us to share
| | 00:17 | our documents as other formats.
| | 00:19 | In this movie, I'm going to show you how to
move a file from Illustrator to Photoshop
| | 00:24 | by using the native PSD Export feature.
| | 00:27 | First things first: I need to go up
to the File menu and choose Export.
| | 00:31 | And once I do that, I'm going to
select a destination for this.
| | 00:34 | I'll just save this out in my Chapter 12
exercise files folder. And I'll save this out as a PSD
| | 00:39 | file, Photoshop document,
and I'll click Export.
| | 00:44 | Once I do that, I get to select a color model.
Of course this is a screen graphic, a web
| | 00:49 | site graphic, so I want to keep it on RGB.
| | 00:50 | You do have the option of doing CMYK or
grayscale, but in this case I want RGB.
| | 00:56 | Resolution, well since it's going to the web,
I think I'm going to stick with 72 pixels per inch.
| | 01:00 | Now, I can also choose
to do it as a flat image.
| | 01:03 | If I choose Flat Image, that means no layers.
| | 01:05 | So, if I want the layers to be preserved
going forward, I need to choose Write layers.
| | 01:10 | I need to also choose whether or not I want
to preserve text editability, so if I want
| | 01:14 | to be able to change that, and maximum
editability, meaning do I want objects to be able to be
| | 01:19 | edited and resized and scaled and
things like that if at possible? Yes.
| | 01:23 | Anti-aliasing. If you don't know what
this means, you can hover over this.
| | 01:26 | It tells you it's best suited for text objects.
| | 01:28 | Text anti-aliasing settings will be
honored, and so I try to leave that on.
| | 01:33 | Then whether or not you want to embed the
ICC profile, again, this is up to you and how
| | 01:37 | you manage your color in your applications.
| | 01:40 | In this case, I'm going to leave this
checked to embed the sRGB profile, because I want
| | 01:44 | to keep my color consistent from one
document to another. So I'll hit OK.
| | 01:48 | It will tell me here that some containers in
the AI document have been flattened. That's okay.
| | 01:53 | I'm going to hit Don't Show Again and hit OK.
| | 01:57 | That's going to write a Photoshop file for
me, and now if jump over into Photoshop and
| | 02:02 | hit Command+O or Ctrl+O to open up
a file, I'll go to Chapter 12,
| | 02:05 | there is my color_share.psd. And if I open
that up--I'll close my Swatches panel so you
| | 02:11 | can see it and bring my Layers panel out--
| | 02:13 | you can see I have my header layer, which
is turned into a Photoshop group; my content
| | 02:18 | layer, which is a Photoshop group;
| | 02:20 | I have my footer; my background; and then
of course my background group, which also has
| | 02:25 | the rays of light, and the rays of light have
actually been masked out using a layer mask
| | 02:30 | right here, which is absolutely awesome.
| | 02:33 | So I can actually select individual
pieces of content, move it around.
| | 02:36 | So if I want to go into the header, I could find
different pieces of the header and turn them on and off.
| | 02:40 | See there, I'm turning off the search box
at the top, turning off the menu bar at the
| | 02:45 | top, again, the header at the top there.
| | 02:48 | I can open up the content area and
see the different parts of that.
| | 02:51 | So, the logo, for instance, if I
wanted to move the logo, I can move that.
| | 02:54 | Every piece is independent just
as it was inside of Illustrator.
| | 02:58 | Now, do you lose some things in translation?
| | 03:00 | Absolutely. For instance, the shapes that
were once vector inside of Illustrator are
| | 03:04 | no longer vector inside of Photoshop.
| | 03:06 | Photoshop is a pixel-based application,
| | 03:08 | so I lose the scalability of these things.
| | 03:11 | That's why it's probably better to design
your mockup in one application or the other
| | 03:15 | and then use assets from a
particular application.
| | 03:19 | So basically, if I wanted to work in Photoshop,
I would create the shapes and all the stuff
| | 03:24 | inside of Photoshop first and then bring
in things like the logo, the rays of light,
| | 03:28 | and stuff like that, as Illustrator files
placed as Smart Objects, to maintain their vector
| | 03:32 | editability and scalability as well, because you
never know what you're going to have to change.
| | 03:37 | But if you needed to send this to somebody
who just absolutely had to work on this in
| | 03:40 | Photoshop, you could simply do that by using the
native PSD Export, sending it out to Photoshop,
| | 03:46 | and then they can open it and
manipulate it as they see fit.
| | Collapse this transcript |
| Importing artwork into Fireworks| 00:00 | If you are someone or know someone who works
inside of Adobe Fireworks, you can share your
| | 00:05 | Illustrator artwork with them with very little
problem, simply by sending it to them and allowing
| | 00:09 | them to open up the .ai file
inside of Adobe Fireworks.
| | 00:14 | Once you're inside of Fireworks, in order
to open up an Illustrator document, all you
| | 00:17 | have to do is go to the
File menu and choose Open.
| | 00:19 | Then navigate to the document that you want--
in this case, color_share.ai. Hit Open.
| | 00:25 | You'll get Vector File Options for this file:
the Scale at 100%, the Width and Height values,
| | 00:31 | you'll need to know that going in.
| | 00:33 | You will need to know Resolution because it
does rasterize these objects upon import.
| | 00:37 | You can tell it to remember layers or
convert layers to states or ignore the layers.
| | 00:41 | In this case, I want it to remember the layers.
| | 00:43 | Then you can say render as images, any groups
that contain over 30 objects or Tiled Fills
| | 00:49 | over 30 objects. And so I'm just going
to leave all the defaults and hit OK.
| | 00:54 | Once you do that, it's going to open up, and
inside of the Layers panel inside of Fireworks,
| | 00:58 | you'll notice that all of your
stuff comes in just as it did before.
| | 01:01 | So, you've got your Header, your Content,
and your Footer, as well as your Background,
| | 01:06 | all there, and also your Guides layers.
Anything that was locked inside of Illustrator will
| | 01:10 | be locked inside of Fireworks as well.
| | 01:12 | So, I can unlock these layers to make them
editable so I can actually grab a hold of
| | 01:16 | these things, and it's actually
a pretty decent way of working.
| | 01:21 | You'll also notice that a lot of the stuff coming
in will maintain its scalability, which is nice.
| | 01:27 | The things that don't maintain scalability of
course will be raster graphics and things like that.
| | 01:31 | But all in all, it's a pretty decent
conversion from Illustrator over to Fireworks.
| | 01:37 | If I zoom in quite a bit, you can see
that the design looks pretty good.
| | 01:40 | When I zoom in here on the logo though,
it gets a little bit choppy. Same thing for some
| | 01:44 | of these other elements here, and that's
because those were rasterized upon input.
| | 01:49 | Most of the things that were editable before, like
text, are still editable inside of Fireworks though.
| | 01:55 | So, take some time and open up your documents
inside of Fireworks and see exactly if you
| | 02:00 | like it or if you don't. Try handing this
out to somebody who works in Fireworks and
| | 02:04 | see if this is a usable scenario for you.
| | 02:07 | I tend to think that most people who
start in Fireworks tend to stay in Fireworks.
| | 02:10 | That's one of the unsung heroes of the Adobe
Creative Suite, especially when it comes to
| | 02:14 | creating web graphics.
| | 02:16 | But I do understand that other people use
other applications like Illustrator and Photoshop
| | 02:20 | and need to share them with Fireworks.
| | 02:22 | Lucky for us, Fireworks plays nice with most
of the applications in the Creative Suite.
| | 02:27 | So, the next time you have some artwork that
needs to be sent over to a Fireworks person,
| | 02:31 | just send it over in the .ai format.
| | 02:33 | Let them open it, take a look at it, see if
it works. Hopefully it will, and you'll both
| | 02:37 | be able to work in harmony
with your respective applications.
| | Collapse this transcript |
| Exporting HTML from Illustrator| 00:00 | One of the best ways to showcase any web
site mockup that you created for a client is to
| | 00:04 | export it out as a HTML for them to view and
actually maybe interact with a little bit.
| | 00:09 | Unfortunately, in Adobe Illustrator CS6 they
have actually removed the HTML export feature
| | 00:14 | from the Save for Web Dialog box.
| | 00:16 | In previous version of Illustrator, you could
just go to File > Save for Web and you can
| | 00:19 | actually choose in there to export out the
HTML and the images that you were exporting.
| | 00:24 | In this version of Illustrator though, that's simply
not possible, unless you know this little workaround.
| | 00:29 | So that's what I'm going to
show you how to do right now.
| | 00:32 | So the first thing I need to do is go to
the File menu and choose Save for Web.
| | 00:36 | And once I have this done, it's going to open
up, and it's going to load up all the slices
| | 00:40 | and individual objects and things like that.
| | 00:42 | Well, in order to get the HTML that I need
in order to make this work, I need to come
| | 00:47 | down here to the bottom
and I need to click Preview.
| | 00:49 | That's going to preview it in your default
browser. Mine happens to be Google Chrome.
| | 00:54 | And so when I open this up, you can
see it's a full rendering of this.
| | 00:57 | It's also got some information down
at the bottom, which you can ignore.
| | 01:00 | But for now, it's got basically
everything that I've rendered out as HTML.
| | 01:06 | In order to save this, I need to go to the
File menu and choose Save Page As. I am going
| | 01:10 | to navigate to my desktop. I'll create a new
folder and I'll call this Mockup, and then
| | 01:16 | I'll just save this.
| | 01:19 | Now I'm going to open that document.
| | 01:22 | So I go to File > Open, Mockup/color_share, open it
up. And when you open it up, it's going to look blank,
| | 01:29 | and that is because
there are no images in here.
| | 01:31 | It's actually referencing images
that have not been exported yet.
| | 01:34 | If I right-click and choose View Page Source,
you can see here that it's got all the divs
| | 01:38 | outlined and it's referencing images--PNG
files in fact--that have not been exported yet.
| | 01:44 | So what I need to do is go back into Illustrator,
into the Save for Web Dialog box, and export those out.
| | 01:49 | So in order to do that, I'm just
going to pick the PNG format.
| | 01:52 | You could pick any format you want, but you need
to stick with that format from beginning to end.
| | 01:56 | So when you first come in here, pick something
like GIF or JPEG. You don't have to individually
| | 02:01 | optimize these because this is
just for demonstration purposes.
| | 02:04 | This is not actually a web page.
| | 02:06 | And so once I'm done with this, I'll click Save.
| | 02:08 | It will ask me where you want to save it.
| | 02:10 | I'll put it in my desktop, inside
the Mockup folder, and hit Save.
| | 02:15 | Now changes are it's going to stick it in a
folder called Images, just like this, and if
| | 02:20 | I navigate out to my desktop,
you can see there is the Images folder.
| | 02:22 | I'm just going to take all of these
graphics and move them into the parent folder, just
| | 02:29 | like so, and then I'll
move that file to the trash.
| | 02:32 | I don't need that images folder anymore.
| | 02:34 | And now watch what happens
when I go back to my web browser.
| | 02:39 | And I'll refresh the color_share.html.
| | 02:43 | There it is. Everything is back in there.
You could then open this up in Dreamweaver
| | 02:47 | and remove this stuff from the bottom if you
wanted to, but it gives your client an idea
| | 02:52 | of exactly what their web page is
going to look like in an HTML document.
| | 02:55 | Again, there's no interactivity.
| | 02:57 | There's no way to click.
| | 02:58 | There's nothing really happening in here.
| | 02:59 | This is not even editable text, but this is
a great way to show your mockup as it would
| | 03:04 | be on the web in a nice easy-to-see format for
your client or whoever you might be working with.
| | 03:10 | This is also great to send this off to a
developer to say okay, this is what I would need it
| | 03:14 | to look like. Make this look correct
with the right HTML and CSS behind it.
| | 03:19 | And so once you've done that, that's how you
get around the no HTML export feature inside
| | 03:25 | of Adobe Illustrator CS6.
| | Collapse this transcript |
|
|
ConclusionTaking the next step| 00:00 | If you've completed this course on using
Illustrator for web design, you may be looking for other
| | 00:04 | ways to expand your knowledge and skill set.
| | 00:07 | If you're interested in learning more about
CSS you should check out James Williamson's
| | 00:10 | courses on CSS Fundamentals, CSS
Page Layouts, and CSS Core Concepts.
| | 00:17 | For more information on using web fonts
effectively, you should also check out James's course on
| | 00:22 | Up and Running with TypeKit, as well
as his Web Fonts First Look course.
| | 00:27 | If you would like to know more about web design
in general, including some basic HTML, check
| | 00:31 | out James's course called
Web Design Fundamentals.
| | 00:34 | For more info on Adobe Illustrator, be sure to
check out my Adobe Illustrator CS6 Essential
| | 00:39 | Training Course, as well as Deke
McClelland's Illustrator CS6 One-on-One Fundamentals.
| | 00:45 | And finally, if you'd like to take on a new
web project course, be sure to check out Ray
| | 00:49 | Villalobos in his weekly
series called View Source.
| | 00:53 | All of these courses can be found in
the lynda.com online training library,
| | 00:56 | so if I were you, I would add
them to my queue and get started ASAP.
| | Collapse this transcript |
| Goodbye| 00:00 | Well, that about wraps up our look
at Adobe Illustrator for Web Design.
| | 00:04 | Hopefully by now you have a better
understanding of web design in general and how you can use
| | 00:08 | Illustrator as an effective design
tool in your web-based workflow.
| | 00:11 | Thank you very much for
joining me for this course.
| | 00:14 | Again, my name is Justin Seeley,
and I hope to see you again real soon.
| | Collapse this transcript |
|
|
