Start learning with our library of video tutorials taught by experts. Get started

Illustrator for Web Design
Illustration by

Renaming and grouping layers


From:

Illustrator for Web Design

with Justin Seeley

Video: Renaming and grouping layers

In the previous movie we discussed the importance of the Layers panel and how it can be used as an organizational tool for you and the other people that you work with. In this movie, I am going to be exploring more of the Layers panel and how we can actually start to rename and group layers together to make sense and create what I call developer-friendly files. So the first thing I need to do is open up my Layers panel. So I am going to the Window menu and make sure Layers is checked, and it is, and so that should be down here in the bottom right-hand corner. And I can drag that out to see more of it. And I'll expand this down because there is going to be lot of information in here.
Expand all | Collapse all
  1. 1m 13s
    1. Welcome
      50s
    2. Using the exercise files
      23s
  2. 43m 51s
    1. Designing for screens
      1m 57s
    2. Decoding screen size and resolution
      2m 40s
    3. Exploring the Illustrator to HTML workflow
      3m 42s
    4. Setting up Illustrator for web work
      6m 55s
    5. Creating a new document for web
      6m 25s
    6. Creating a new document for mobile
      3m 31s
    7. Using artboards for responsive layouts
      7m 42s
    8. Creating email newsletter documents
      4m 31s
    9. Working with Pixel Preview and anti-aliasing
      6m 28s
  3. 25m 28s
    1. Adjusting color settings
      6m 47s
    2. Understanding web color
      3m 47s
    3. Creating a color palette
      5m 4s
    4. Creating custom swatches
      4m 50s
    5. Working with fills and strokes
      5m 0s
  4. 13m 15s
    1. Exploring the Layers panel
      5m 21s
    2. Renaming and grouping layers
      7m 54s
  5. 24m 5s
    1. Drawing simple shapes
      4m 16s
    2. Working with Pathfinder
      5m 4s
    3. Using the Shape Builder tool
      4m 33s
    4. Creating symbols
      6m 24s
    5. Editing and replacing symbols
      3m 48s
  6. 20m 22s
    1. Planning your project
      2m 56s
    2. Using guides and rulers
      5m 56s
    3. Developing a layout with shapes
      6m 21s
    4. Using a grid system
      5m 9s
  7. 25m 53s
    1. Exploring the rules of typography
      4m 1s
    2. Using text as text vs. using text as an image
      3m 37s
    3. Understanding web-safe fonts
      1m 46s
    4. Creating and using paragraph styles
      5m 16s
    5. Creating and using character styles
      3m 2s
    6. Simulating the CSS box model
      8m 11s
  8. 21m 17s
    1. Understanding object appearance
      4m 43s
    2. Applying and editing live effects
      3m 34s
    3. Creating and using drop shadows
      3m 13s
    4. Creating more flexible rounded rectangles
      3m 17s
    5. Saving appearance as graphic styles
      6m 30s
  9. 35m 57s
    1. Starting with a wireframe
      5m 23s
    2. Adding master elements
      6m 45s
    3. Creating navigation buttons
      13m 34s
    4. Working with photographs
      5m 50s
    5. Simulating pages with artboards
      4m 25s
  10. 54m 45s
    1. Creating video placeholders
      10m 33s
    2. Creating buttons
      13m 1s
    3. Creating form fields
      8m 15s
    4. Creating radio boxes and checkboxes
      5m 11s
    5. Creating progress bars
      10m 12s
    6. Creating tabbed interfaces
      7m 33s
  11. 35m 28s
    1. Understanding slicing
      3m 26s
    2. Slicing up a mockup
      3m 6s
    3. Understanding web file formats
      5m 33s
    4. Exploring the Save for Web dialog
      3m 50s
    5. Optimizing photographs
      4m 29s
    6. Optimizing transparent graphics
      4m 43s
    7. Saving Retina display graphics
      3m 46s
    8. Exporting SVG graphics
      6m 35s
  12. 9m 29s
    1. Understanding image sprites
      3m 4s
    2. Creating a sprite grid
      4m 36s
    3. Optimizing sprites for the web
      1m 49s
  13. 15m 29s
    1. Placing Illustrator Smart Objects
      3m 22s
    2. Sharing color swatches between apps
      2m 9s
    3. Exporting Illustrator artwork as a PSD
      3m 49s
    4. Importing artwork into Fireworks
      2m 41s
    5. Exporting HTML from Illustrator
      3m 28s
  14. 1m 19s
    1. Taking the next step
      1m 1s
    2. Goodbye
      18s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Illustrator for Web Design
5h 27m Appropriate for all Jul 30, 2012

Viewers: in countries Watching now:

This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.

Topics include:
  • Customizing a web workspace
  • Decoding the mysteries behind screen size and resolution
  • Working with Pixel Preview and anti-aliasing
  • Coloring web graphics
  • Renaming and grouping layers
  • Working with shapes and symbols
  • Creating wireframes on a grid
  • Styling text
  • Creating image sprites
  • Simulating web pages with artboards
  • Optimizing and exporting your work
Subjects:
Design Web Web Graphics Web Design Web Foundations
Software:
Illustrator
Author:
Justin Seeley

Renaming and grouping layers

In the previous movie we discussed the importance of the Layers panel and how it can be used as an organizational tool for you and the other people that you work with. In this movie, I am going to be exploring more of the Layers panel and how we can actually start to rename and group layers together to make sense and create what I call developer-friendly files. So the first thing I need to do is open up my Layers panel. So I am going to the Window menu and make sure Layers is checked, and it is, and so that should be down here in the bottom right-hand corner. And I can drag that out to see more of it. And I'll expand this down because there is going to be lot of information in here.

And I am going to come right here to this little triangle and expand it down. When I expand this down you are going to see a series of sublayers called Group and Path and things like that. And just by opening up and looking at this, this makes absolutely no sense whatsoever. If I were to hand this off to a developer, they wouldn't be able to make heads or tails of this, probably, because they would have to go through and individually select things to see exactly what they are and where they are and everything like that, and they don't want to spend the time doing that. Trust me. They want to be able to go in here, look at the layers that you have, and say, okay here is the button, okay here is the header.

Here is the text. Here is the logo, et cetera. And so you have to make your files organized in such a way that allows them to do that. So what we are going to do in this little exercise here is we are going to actually go through and select different objects and we are going to then group them together and then place them on their own separate layers. That way we can easily turn things on and off. We can select things, move them around, all as one. So the first thing I am going to do is I am going to locate the background of this design, and the background is probably this thing called Path down here at the bottom with the light blue color.

And when I select it--and I can do so by targeting it right there--I see it does, the bounding box goes all the way around the outside, and the fill color is set to that color, so I know that's the background. So the first thing I am going to do is to rename this, so I am going to double-click where it says Path and I am just going to call this Background. There we go. Now I have already got a layer called Background, and that's okay. This is just going to live on that layer. Now I also need to find out where these rays of light are, these little things that shoot up from the back. So I am going to click on one, and that should select the entire group, and when I do that, you'll see a little box pops up next to this group here. And so I can then call this Rays of Light, and I am just double- clicking the name and changing it.

I'll expand this out a little bit so you can see all the names that I am doing here. I am just going to continue to go up, and I am going to use the little target dots over here on the right-hand side in order to access individual pieces. That way I don't accidentally select something. So I am going to click here, and we'll see exactly what this is. This is actually a path that's behind the robot's face and if I turn off the visibility, you'll see exactly what it does. It basically just keeps his face from being hollow. And so that's a part of his face. I am going to hold down Shift and select the next one, because I can see that's his whole face right there.

And so with both of those selected now--and I did that, again, I selected this Path first, I did that by clicking the target dot, hold down shift, click this target dot, they both become selected, and now I am going to use Command+G or Ctrl+G on my keyboard to group those together. It turns them into a group. You can see here. And I can double-click the name Group, change this to Robot Head. Select the next one. This is going to be the body of the robot, so I am going to double-click where it says Path and call this Robot Body. And now I am going to create a brand-new layer, so I am going to click on Background here at the top and create a new layer.

This new layer is going to be called Robot. So I am going to take the Robot Head, Shift+Click to select the Robot Body. I actually need to select the layers here, so let's select Robot Head and Robot Body by clicking here, and then I'll drag those up. Notice the little indicator telling me where I am going to drop them. I'm going to drag them right until I see the highlight appear on Robot and then I'll drop them in. Now at first it's going to appear that these are on top of everything, and they are for now, and that's okay. So what am I going to do is I am going to temporarily lock them so that we can't make any modifications and then I am going to disable their visibility so that we can't see them.

That way that layer is just off chilling by itself and we don't need to mess with it anymore. Now let's come back down in my original layer, the Background layer, and let's select this Path here. That turns out to be Clouds. I'm going to hold down Shift and click the next target dot. That's another set of clouds.. Hold down Shift, another target dot, and that is going to be all of the clouds. So in order to put these all together, I am going to group them. Command+G or Ctrl+G groups them together. Then I am going to double-click Group and call these Clouds. There we go.

Now I am going to come up and click on the Robot layer. I am going to add a new layer on top of it. We'll double-click and call these Clouds. Then I'll take the Clouds group, drag, and drop it right there. Again, it's going to look like it's going on top of everything, and that's okay. So we'll lock it, we'll hide, and we'll keep going. Now I'll come down here and I'll grab the target dot next to this. Okay, that's the Robot text at the top. Hold down Shift. That's the second part of the Robot text. There is actually a silhouette back in there. Then I need the Toy Company underneath there, so I am going to Shift+Click the next one.

That should be the Toy Company. There we go. And so I am going to group these together, Command+G or Ctrl+G, double-click the word Group, change this to Logo Text. Now I am going to take this and I am going to put it on its own layer. So I'll click Clouds, create a new layer on top, double-click, call this Logo Text, and we'll take this and we'll move it up, just like so. Now it's going to be sitting on top of everything anyway, so that's okay. It's right where it needs to be. I am going to be lock it and temporarily hide it, just so I know what I have left to work on.

So it looks like the only thing I have left to work is going to be these two buttons down here, because we already have the Rays of Light and the Background taken care off. So now I just have to be careful on how I group these two together. So now I am going to click to select this group here and that's going to be the button on the left. Hold down Shift. Click the next one up. That's going to be the glossy part of the icon. And if you want to rename these as you go, you certainly can. For instance, I could call this Orange button and then this Path could be Orange Gloss. That way these make a little bit more sense to you. And then we can Shift+Click the next one.

That's going to grab the text. So I'll just double-click here and I'll call this Log In. There we go. And so with all three of these now selected, I can group them, Command+G or Ctrl+G, and I'll double-click to rename this Login button, just like that. Now the only one is left should be the one on the right, but I am also going to rename these, so I am going to call this Orange button. The next one should be glossy part. Let's select it to make sure; it is. So we'll double-click Orange Gloss. Click the next one.

That should be the text. So we'll call this Sign Up. And then we can select all three of these, group them together, Command+G or Ctrl+G, and call this Sign Up button. There we go. So I now have these two buttons. I am going to click Logo Text, create a new layer, call it buttons and then I'll select both the layers, like this. And we have to click on the actual layer and highlight it and drag it up. Drop it on the buttons layer. They are now on their own separate layer. And I'll lock those, temporarily hide them just to make sure I didn't miss anything. That's all good.

And so now the only thing left to do is collapse the Background layer up. I am going to lock it because I never want to make changes to that. Then I am going to unlock all of the layers that I just created and turn their visibility back on one at a time. And there we have our fully assembled developer- friendly file with individual layers and everything named appropriately, organized, and ready to go. So from here I would just save this out. All of my layers would then be intact each and every time I open up this file, and it makes it so much easier on anybody else that I work with or if I happened to send this off to a developer.

Find answers to the most frequently asked questions about Illustrator for Web Design.


Expand all | Collapse all
please wait ...
Q: Where can I learn more about graphic design?
A: Discover more about this topic by visiting graphic design on lynda.com.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.