How to adjust vector shapes in Illustrator CC 2017

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Alright, in this video we're going to look at editing vectors that already exist, that we've downloaded, and we want to start playing around with, and kind of adjust them a little bit. We're going to do it to this simple arrow down here, we're going to change the stroke size, and adjust it a little bit along with the color. We're also going to mess around with them, make them kind of rounded, and do all sorts of fun stuff. Alright, let's go and do that now.

So let's start with editing a nice simple one. We're going to use this arrow that I've downloaded. I've got mine here in the library, because I've downloaded it from the market place, but I've got an example in the exercise files, that you can download. Go check it out, it's called Icon Arrow, which shouldn't be hard to find. Go to 'File', and place that in. Make sure it's vector. And we're going to use-- We've used the black arrow, remember, to move things around, and we've limitedly used the white arrow to do adjustments, so we're going to look at that. This is the white arrow, this is how you adjust existing vectors.

Let's say I want to make this a little shorter, so what I do is, I can click on this corner here, so first of all, click in the background. Make sure nothing is selected. Click in this anchor point that I want to move. These little dots in the corners are good anchor points. Now I want to select him, and I can move him around. I can adjust it, and say, "Yes, this is what I want to do." My lovely arrow! So you can make some basic adjustments with the white arrow. I'm going to undo that. 

Let's say I want to kind of tuck this in a little bit, so it's a shorter stroke on this, so I'm going to click on this first one. When I click in the background, click on the first one, and then hold down 'Shift', and that will add to your selections. You got two bits selected. I'm going to click and drag it down. And I'm just going to lower that stroke so it's a lot shorter. You can do the same to this. I can drag this guy in, I'm going to drag him in a little bit, grab this guy, drag him in a little bit. So I'm kind of adjusting my arrow.

Another thing you can do is, at the moment it's got sharp edges, I think I want that, so I'm going to leave that, so I'm going to make a copy of it, I'm going to go-- I'm using my black arrow, selecting it, copy, paste, I'll leave him up there. You'll notice that I'm working over here in this gray area, it's a really easy and nice place to work without being hindered by all the graphics, and guides, and stuff over here.

So, with this selected I'm going to go back to my white arrow, and what you'll notice is, can you see these little white dots here? These are how to round corners, so watch this, if I-- I'm going to zoom in a little bit. If I grab this guy down, and drag him in, because I have the corners selected, they all get rounded. That's how to round. It doesn't have to be an arrow, it could be a rectangle. Draw a rectangle, grab the white arrow, grab the corners, and you can round corners that way.

What you also might do is, say you want to round one of the corners, grab the white arrow, and click on-- It's called the direct selection tool, I keep calling it the white arrow because that's easiest to figure out, but it's called the direct selection tool, but if you click on one of them-- You can see I only got a dot on one of these, and I can kind of round this corner here, and this corner. Nobody loves these kind of teardrop type boxes. So, that's how to convert stuff into these rounded corners.

Another thing we're going to do is, we're going to look at converting them, because at the moment that's kind of like-- it's quite a unique rounded corner. What we're going to do is, let's grab this guy, we'll copy and paste him. And what I'd like to do is, start kind of adjusting in a bit more of a freehand style way, so when I grab my white arrow, I'm going to click on this corner here, and instead of just making it this rounded corner, which is really symmetrical, with it clicked, up here you can convert it from-- at the moment it's a corner, you can kind of tell, it's a nice sharp corner. You can click on this one here, this will smooth it out, it will give out anchor point for these handles. You can see the pastel actually goes through the anchor point. It was there, now it's kind of stretched out by these little handles here. Think of them as little gravity things, they're kind of-- 

The line still has to pass through the anchor point. These little handles are just how it passes through, and you can start playing around with it. They kind of give it a bit more of a free form shape. You can also break these, because at the moment they're kind of a see-saw, where you do one side it affects the other, so what you can do, is you want to snap them, hold down the 'Alt' key on your PC, or 'Option' key on a Mac. Watch this, when I click one of them, they kind of snap, so they're still bending like a line, but they are no longer doing this see-saw option. 

These are few little things we've learnt here. One is, we can round the corners by grabbing these dots, but if you want more of a free form shape, we click on the corner, and we say, "I'd like you to be a smooth one."  And if you want to break it, because at the moment it's kind of-- It's cool, smoothing out across, but there is an interaction between the two which keeps it smoothing, but say you don't want that, you can hold down the 'Alt' or 'Option' key, break them, and you can start messing around with these things a little bit more detailed.

The next thing I want to do is color it. Now, I've downloaded-- Normally you just click on your colors here, and it works, but this particular example-- and this is likely what you're going to get from Iconfinder, or from the market place. Watch this, if I click on it, and go, you, yes, my color. It will use these swatches down here, weirdly, it’s like a bug in Illustrator than anything. I'm undoing to get rid of the colors. You can do one of two things. One is, you can keep double clicking it, go inside this arrow, double click it again to go inside the path, and then I can color it. 

Weirdly it's this kind of like weird combination that somebody has saved. I'm going to undo that, come back out by double clicking the background. I find the easiest way is these color things here, I'm going to right click it, and go to 'Add to Swatches', and you'll notice down the bottom here, in my swatches panel, my pre-made little colors, is the colors. You can see little versions of that. And I click on this, and save down the bottom here, there he is there, the colors. Or keep double clicking it until you get right inside of it, and then change the color, but make sure you double click the background to come all the way back out here, and we're going to use this guy. So I'm going to copy him, I'll leave these guys over there, I'm going to zoom in, and I'm going to use this little arrow here. It's quite big, hold down 'Shift', remember, to scale proportionately, and what I'm going to do is, I'm going to scale it down, and I'm going to rotate it around. 

Now, there is a rotation tool, there he is there, you can click on that and just rotate it around. 

What most people do is they’re just using the black arrow. If I zoom in. If you hover above any of these--We’ve used the edges a lot for resizing, but watch this. If I have a hover just outside, you can see, there’s this, like no man’s land. So that’s scaling, rotation, nothingness. Rotation, scaling. You end the rotation with a little bent arrow. You can rotate it around. If you hold the 'Shift' key down while you're rotating it, can you see, it locks it into 45 degree angle, and that's going to work for my arrow. I'm going to go that way.

Alright, there's my little arrow, and I've customized it a little bit, not much, brought the stroke in, but we've learnt a little bit about customizing vector graphics that maybe we haven't created. We'll move on in the next episode and look at creating our own graphics. Alright, I'll see you in the next video. 

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024