Learn to enhance your website wireframe by adding guides to your illustrator file, offering a detailed overview of key tools such as the selection tool, hand tool, and zoom tool. Understand the process of setting guides, leveraging rulers, and utilising grids for better placement of objects within your artboard.
Key Insights
- The selection tool, activated by the shortcut V on the keyboard, is used to select objects. Objects can also be selected by dragging a square for a selection.
- Guides can be set within the file by adding rulers. These guides, dragged out from rulers, assist in the placement of objects within the artboard. A guide can be added vertically and horizontally across the artboard to identify the center.
- Grids can be toggled on from the properties panel. They can be customized according to the requirements of the project, by changing the units of the grid within edit preferences. Grids can be beneficial for some projects while being distracting for others, therefore they can be toggled off if not needed.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
In this video we'll continue working on our website wireframe by adding guides to our illustrator file. Before we begin let's go over a couple key tools as a review.
We'll start first with the selection tool, shortcut V on the keyboard, and our selection tool is used to select objects. In addition we can also select objects dragging a square for a selection. Next let's go over the hand tool, shortcut H on the keyboard.
Our hand tool is utilized by clicking and dragging and we can change our perspective of the workspace by utilizing the hand tool. In addition we can also change our perspective by either scrolling up and down on the mouse or by holding CTRL on the keyboard as we scroll with the mouse, scrolling down to move to the right and scrolling up to move to the left. Throughout this course feel free to use whatever method of changing your perspective you'd prefer.
Next let's cover the zoom tool, shortcut Z on the keyboard. The zoom tool works by clicking in order to zoom in and holding ALT as we click in order to zoom out. I'll scroll down on the mouse to change our perspective and we can see if I click back in and scroll down I'll hold CTRL and scroll down we've now centered our perspective of our artboard.
Additionally we can also zoom in using CTRL PLUS (+) on the keyboard and CTRL MINUS (-) to zoom out. For me I typically use CTRL PLUS (+) and minus to zoom and CTRL scroll with the mouse to shift left right and up and down. Now let's begin by setting our guides.
In order to set guides within our file we first need to add rulers to our view. We can go to view, hover over rulers and select show rulers. Additionally if we hit v on the keyboard for our selection tool and go to our properties panel we can also toggle the ruler within our properties panel.
Rulers can be helpful to our artboard and our projects as we can drag guides out from rulers so that we can know where to place objects within our artboard. For example let's add one guide vertically and horizontally across our artboard so that they're centered and we can see where the center of our artboard is. To do this we'll go to our ruler and click and we can drag down knowing that our artboard is 1080 pixels by 1920 we'll want to release halfway from 1080 which is 540.
We could zoom in using CTRL PLUS (+) and line it up exactly at 540 or I'll zoom back out and I'll simply click the guide selecting it and I'll go to the top control bar where I can change the y value of this guide. I'll double click and simply type 540 and hit ENTER. This guide is now halfway down across our artboard.
Let's add the second guide for this guide we'll click from the left ruler and click and drag over however for this one I'm simply going to release far from the center here instead this guide we're going to move using the control bar again and changing the x value with it selected by clicking on it I'll go to the x value and we know that our artboard is 1920 pixels across so we'll need to divide that by two to get the measurements. In order to do this math we can actually do the math within the x value box so we'll simply double click and type 1920. We'll then hit slash 2 to divide it by 2 and hit ENTER.
We can see that the result is 960 or 1920 divided by 2 and we have our guide perfectly in the middle. We've now created two guides that show us where the center of our artboard is. Next let's discuss grids.
If we go to the right hand side within our properties panel we can also toggle on grids. If we click to show the grid we'll see that we have a large grid spreading across our entire artboard. We can actually change the units of this grid to make it more appropriate.
For this grid we'll go to change the units within edit preferences and we'll navigate to guides and grid. From here we'll see that we have grid options to change how many pixels across every grid line is. Because we have 1920 across let's change it to 192 pixels and we'll click ok.
As we can see we've now divided out our artboard into 10 sections across. While this can be helpful for some projects I sometimes find it distracting for others and in the case of this file while it's important to know about grids we won't necessarily be using it. Throughout the course if you find the grids helpful feel free to toggle the grid on and remember that grids and guides can be used together at the same time.
For now I'll toggle off the grid and we can see that we simply have our artboards and our guides. In the next video we'll be creating a space on the top left hand side for our logo. See you there!
DAC221-03-Guides-Grids
In this video we'll continue working on our website wireframe by adding guides to our illustrator file. Before we begin let's go over a couple key tools as a review.
We'll start first with the selection tool, shortcut V on the keyboard, and our selection tool is used to select objects. In addition we can also select objects dragging a square for a selection. Next let's go over the hand tool, shortcut H on the keyboard.
Our hand tool is utilized by clicking and dragging and we can change our perspective of the workspace by utilizing the hand tool. In addition we can also change our perspective by either scrolling up and down on the mouse or by holding CTRL on the keyboard as we scroll with the mouse, scrolling down to move to the right and scrolling up to move to the left. Throughout this course feel free to use whatever method of changing your perspective you'd prefer.
Next let's cover the zoom tool, shortcut Z on the keyboard. The zoom tool works by clicking in order to zoom in and holding ALT as we click in order to zoom out. I'll scroll down on the mouse to change our perspective and we can see if I click back in and scroll down I'll hold CTRL and scroll down we've now centered our perspective of our artboard.
Additionally we can also zoom in using CTRL PLUS (+) on the keyboard and CTRL MINUS (-) to zoom out. For me I typically use CTRL PLUS (+) and minus to zoom and CTRL scroll with the mouse to shift left right and up and down. Now let's begin by setting our guides.
In order to set guides within our file we first need to add rulers to our view. We can go to view, hover over rulers and select show rulers. Additionally if we hit v on the keyboard for our selection tool and go to our properties panel we can also toggle the ruler within our properties panel.
Rulers can be helpful to our artboard and our projects as we can drag guides out from rulers so that we can know where to place objects within our artboard. For example let's add one guide vertically and horizontally across our artboard so that they're centered and we can see where the center of our artboard is. To do this we'll go to our ruler and click and we can drag down knowing that our artboard is 1080 pixels by 1920 we'll want to release halfway from 1080 which is 540.
We could zoom in using CTRL PLUS (+) and line it up exactly at 540 or I'll zoom back out and I'll simply click the guide selecting it and I'll go to the top control bar where I can change the y value of this guide. I'll double click and simply type 540 and hit ENTER. This guide is now halfway down across our artboard.
Let's add the second guide for this guide we'll click from the left ruler and click and drag over however for this one I'm simply going to release far from the center here instead this guide we're going to move using the control bar again and changing the x value with it selected by clicking on it I'll go to the x value and we know that our artboard is 1920 pixels across so we'll need to divide that by two to get the measurements. In order to do this math we can actually do the math within the x value box so we'll simply double click and type 1920. We'll then hit slash 2 to divide it by 2 and hit ENTER.
We can see that the result is 960 or 1920 divided by 2 and we have our guide perfectly in the middle. We've now created two guides that show us where the center of our artboard is. Next let's discuss grids.
If we go to the right hand side within our properties panel we can also toggle on grids. If we click to show the grid we'll see that we have a large grid spreading across our entire artboard. We can actually change the units of this grid to make it more appropriate.
For this grid we'll go to change the units within edit preferences and we'll navigate to guides and grid. From here we'll see that we have grid options to change how many pixels across every grid line is. Because we have 1920 across let's change it to 192 pixels and we'll click ok.
As we can see we've now divided out our artboard into 10 sections across. While this can be helpful for some projects I sometimes find it distracting for others and in the case of this file while it's important to know about grids we won't necessarily be using it. Throughout the course if you find the grids helpful feel free to toggle the grid on and remember that grids and guides can be used together at the same time.
For now I'll toggle off the grid and we can see that we simply have our artboards and our guides. In the next video we'll be creating a space on the top left hand side for our logo. See you there!