Online Marketing

Adobe Illustrator – How to create Grids, Guides, and Gutters

It’s been a while, since I seen ya, but I got some new stuff to show you. So, let’s get right into this work today we are going to go ahead and create grids inside illustrator, we’re going to convert them into guides, and I’m going to show you how to like, adjust gutters and things like that stuff that you would use if you’re a Web developer and you wan na maybe instead of using Photoshop, maybe you want to use illustrator, so it’s a pretty cool tool and it’s got vector graphics, all that good stuff, so really really popular.

Let’s get right into this first step guys you want to go to file new once you’ve opened up illustrator CC, I’ve got it right here, file new and then for me just for tutorial purposes. I’m going to go to web right here and I’m going to go to common and I’m just going to click, create and you’re going to notice here on the right side before I do that that we’re creating an artboard, it says one artboard here are the width In height just to make sure if you’re not sure and I’m going to go ahead and drop this down to pixel preview mode, just because that’s the way it’s supposed to be for me, cuz, that’s what I like alright here we go.

So we’ve got our nice little artboard opened up and I’m going to zoom out and whoa holy zoomy zoomy. Let’s just get this zoom in a little bit picture. How about something like that? No okay! Well, anyways guys! I will zoom out a bit and yeah we’ll just Center that up alright. So here we go, I’m zooming in a bit and the first thing you want to do, I think for for doing grids and guides and stuff like that, is I create a rectangle.

So I just go over here to the rectangle tool and I create a rectangle around the whole artboard. Just like this, and then when you see I let go you’re going to see that it says in the right side. Here: width and height is 1366. 768. That’s what we’re working with to start so again we’re on the right track here. The next step is, I want to work with 15 pixel margins, or so I think that’s what we’re going to work with.

So I’m going to take the width down from 6 6 to 3 6 or when I do that and I hit Enter you’re going to notice here on the right side and the left side for that matter. There is a slight little yeah, a little bit of a gap there, a little bit of a margin. That is what we’re looking for. Alright continuing on we’re, going to go ahead now and start creating some some grids and some guides here. So the next step here is, you want to go up to our is an object path.

Here we go object path and then we want to go down on path part of me and where is it split into grid? Now we are creating the grid. The next step here guys is you want to make sure that this preview is checked, because you want to see your work as you go now, because this is a web we’re going to be working with columns instead of rows so because it’s web work, its column, Stuff, so if I have one column like I do now, if I hit up you’re going to see here, we got two: now we got three four five etc.

So, let’s just work with four just for the hell of it and again you’ll see the exact. Well, let’s go actually, let’s go down to three, because I wanted to show you with with whole numbers here so again you can adjust a number of columns, which is what we’re looking for and the next step is you want to change the gutter, so the gutter Is the space in between here? So if I up the gutter you’re going to see well that sounded weird.

If I go up to gutter for 15 pixels you’re, going to notice that there are 15 pixels space in between the different boxes, the different grids. That is also what we’re looking here for so again guys. This is how you go ahead and split things into a grid, I’m going to just increase it for the hell of it. Let’s go up and let’s create great 20 pixel gutter. Just to show you guys again, you guys do what you want for your own workflow in your own space, but that’s how you do that now.

If you want to make these into guides, the next step here is you want to go to view so click on View and then down at the bottom you’re going to see guides and then you’re going to see an option that says make guides if you left-click On that bang they go to light blue and the guides are created and if you start creating things inside here, you’re going to notice that if I create a little rectangle, it is going to snap to the guide.

Just like that. So it’s snapping snapping. It wasn’t a good one, so that guys is how you create get grids. That’s how you create guides, that’s how you adjust gutter links and that’s kind of how you work in the web side of things with Adobe Illustrator. Thank you for reading. I got tons more tutorials coming up, be back soon, Cheers


By Jimmy Dagger

Find out my interests on my awesome blog!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.