(Last updated on November 18th, 2021)
Are you using grids and guides in your Photoshop projects? These two tools can significantly benefit you and your designs when you need to keep everything aligned and orderly. Find out everything you need to know about making them work in this in-depth tutorial.
Adobe Photoshop comes standard with a handful of templates for different templates. Try selecting a template for video, and you’ll be presented with a few options for different video sizes. Select one, and you’ll have something immediately in your workspace: guidelines.
The guidelines in these templates are present for a reason. They help the artist realize the limitations of how much can be fit in a frame and find where the eyes or a monitor may cut off in certain areas. The guides are present to help the artist think more like a video director.
This is just one use of guides. There are many more uses for such rulers, as well as the option of establishing a grid. These rulers can be used for everything from maintaining an alignment in your assembly process to keeping in mind areas that may not read as well on a printer.
Grids and guides are essential for design, whether you’re working on a brochure for the printers or a mock-up for a website. For that reason, it’s vital to figure out how to use them and when and where to use them.
The last thing you want is a messy Photoshop file filled with a grid too tight or guides too close that they throw off alignments. Such issues can make a design file nearly impossible to work with when cluttered with too many lines. So let’s go through the crucial components of grids and guides.
Turning On Grids And Guides
Let’s start with the very basics of turning on grids and guides. First off, we need to make sure that they’ll be viewable. Under View, select View > Show > Grid and View > Show > Guides, depending on which one you’ll want to see.
When placing a guide, the first thing we’ll need to do is turn on the rulers. Select View > Rulers, and you should notice measured rulers will appear on the top and side of your workspace area. These rulers not only help measure the guides and grids but apply them as well.
You can see how easy this is to create guides by merely clicking and dragging them out from any rulers. You can alternatively create guides by navigating to View > New Guide. This option should only be used if you want to enter exact horizontal or vertical orientation.
When using the dragging method, you can invert and snap your guides with simple shortcuts. To create a vertical guide when dragging down from the horizontal ruler, simply hold Option/Alt when pulling down. To create a guide that will snap to ruler ticks, hold Shift while dragging out a guide.
If you’re working with many guides, you’ll want to be sure to lock your guides once you’ve assembled the ones you need. This will ensure that you won’t accidentally nudge one of the guides when clicking around when working on a Photoshop project.
You can also enable what’s known as Smart Guides by navigating to View > Smart Guides. This will provide additional information and alignment guides that will appear while moving layers around other objects and layers. This function is excellent for keeping your measurements straight without constantly looking at the rulers.
Now let’s talk grids. While a simple grid can be turned on with View > Show > Grids, you may not like the results or have a specific grid formation in mind. For tweaking the grid, you’ll need to navigate to Edit > Preferences > Guides, Grid, & Slices if you’re a Windows user or Photoshop > Preferences > Guides, Grid, & Slices if you’re on a Mac.
Once you’ve clicked that option, you’ll be given a dialog box with everything you need to customize the grid. Under the grid portion, you should find options to change color, gridline patterns, and subdivisions. Change these options to create the grid that best suits your project.
The other important option you’ll want to turn on for grids is snapping. Navigate to View > Snap to > Grid, and you’ll find that your layers and objects will now snap to grid lines. You can also snap to guides by selecting the other options under View > Snap to.
The best thing about using grids and guides is that they’re temporary. Once you’ve finished your design, you can simply turn them on, and they won’t render out. Whether you’re aiming for print or online publishing, the guides and grids will only be visible in your Photoshop file.
Using Grids in Photoshop
Grids can crowd your workspace, even if customized to be as pleasing to your eyes as possible. For this reason, it’s essential only to use grids when you need them most. So what types of Photoshop projects would be best suited for using a grid?
One obvious use for grids is to create pixel art. Pixel art relies on a limited grid formation of colors to compose different characters, objects, and settings. It has a retro appeal for replicating the 8-bit and 16-bit eras of video game graphics.
Another excellent use for grids is if you’re working on designing architecture. Though it’s not as advisable to develop blueprints in Photoshop, grids can make it possible to keep some flat designs symmetrical. Grids can help keep your measurements accurate to the very pixel.
Architectural concepts are best suited for grids, considering how easy it is to maintain symmetry while still allowing the freedom of freehand drawing. The grid can be handy in making sure that all the windows look correct and maintaining a level of perspective and horizons.
With perspective in mind, grids can also be a solid addition for those who specialize in landscape painting if you need a little help with trying to establish distance or maintain a specific spacing within your environment.
Grids can also be a great way to make sure your designs stay within a close range of pixels. A perfect example of where grids can come in handy for this is developing a slew of icons. If each icon needs to be no more than 50px by 50px, you can create a subdivision area that’ll support multiple icons.
This is an easier way of assembling a whole spread of icons than just working within the confines of a 50×50 canvas and saving multiple Photoshop files or artboards. A grid can be an easy way to generate many designs that need to have certain limitations set.
Grids can also be essential for assembling the more mathematical and precise of designed objects. For those seeking the perfect square or triangle, a grid can provide enough insight into how to design accurately.
The times where grids would be more preferable than guides is if you need a whole slew of evenly spaced guides that you’re either using as reference or need to snap towards. Rather than going through the time-consuming process of making multiple guides, a tailored grid can do the bulk of the work.
Using Guides in Photoshop
Guides are an excellent way to establish clear borders and cut-off areas for your work. This is an essential aspect of prepping your Photoshop files for the printer or readying your design for online publication.
When creating a design for printers, you want to make sure that the primary content is within the key that will be most visible. The last thing you want is a title or design that extends too far and is cut off either by the extent of the printer or the cut-off for however your design will be applied.
This is why Photoshop’s latest versions come with preset sizes that additionally display essential guide cut-off areas. Most of these presets work pretty well, but you’ll want to check on the specs your printer and projects will be rendered for creating specific guidelines.
Guides are also a crucial aspect for web designers when it comes to assembling a website prototype. Web designers need to keep in mind pixel aspects of browsers sizes and containers to ensure that their designs are feasible and can work as a website.
As an example, most websites house their main content within a centered box of about 900px in width, depending on the monitor. Setting up guides can help keep the borders in mind of how your content will be housed, even if your design doesn’t have a prominent border.
Another aspect that web designers need to keep in mind is how their design will look on mobile devices of phones and tablets. Tailoring web design for such devices requires different designs with different dimensions. Hence, additional guides will have to be made.
Much like with different print presets, Photoshop also has a selection of web presets with their sizes for specific screens. These presets will set both appropriate canvas sizes as well as artboards for keeping different versions in mind. But you’ll undoubtedly want to create some guides as well.
Guides serve the purpose of keeping the various web columns uniform and aligned correctly. Most websites are assembled with a header, menu, main content, sidebar, and footer. Using guides can help establish a consistent size so you’re not crafting designs that won’t work for the web.
Crafting thoughtful web design requires being knowledgeable enough of the limitations of different screens. An iPhone will display a website far differently than an iPad in landscape mode. It’s essential to not only design for multiple screens but various limitations as well.
The other area of preset guides is for video, maintaining the same guides for those who shoot video. Videographers tend to keep a specific area of focus so that essential parts of the footage won’t appear cut off at the edges.
Those working in Photoshop to either create composites or designs that appear in film should keep these limitations in mind. A miscommunication could lead to you submitting a 1080i frame for a movie that is shot at 1080p. So the last thing you want is a design that doesn’t adhere to proper borders.
Guides can be applied in several different ways depending on the project. The presets present provide a sound basis for starting, but the key to using guides effectively is making sure it meets the needs both technically and design-wise for whatever the project may be.
It really can’t be overstated just how important it is to keep in mind the snapping and locking of guides. Guides are excellent for keeping your designs organized, but they can quickly turn into a mess if you don’t control them, especially if you have many guides crowding your workspace.
Locking guides should be the first thing you do after finishing your guides before jumping into the design. You don’t want to accidentally move a guideline and then struggle to remember where it was placed last. You can’t precisely undo a guide change, so be sure to keep those guides locked when not being altered.
You’ll also want to keep an eye on whether the guides are snapping or not. If you need your key objects, boxes, and images to be aligned, turn on the snap. If you’re making minor additions that can crossover some guidelines, turn off the snap, so your layers aren’t magnetically drawn to the edge of every guide.
Using Smart Guides in Photoshop
Smart Guides are an absolute must-have aspect for any project where you require pixel-perfect alignments and spacing. They differ from the guides in that they are automatically generated and brief yet detailed in giving you detailed calculations quickly.
When you turn Smart Guides on, you need only use a few keyboard commands to active them. While you’re dragging a layer, hold down the Option/Alt button. You’ll notice that Photoshop will now display just how much distance you’ve placed between the layer and its previous position.
To view the measurements of your layer, you don’t even have to drag it around to figure that out. Simply hover over your selected layer and hold down Cmd/Ctrl. Doing this will showcase the dimensions and measurements of your layer.
Suppose you hold down those duplicate keys while outside your layer; you’ll notice different measurements. These are the measured distances your current layer is from the border of your Photoshop canvas. It’s a handy way to determine how close or far away your layer appears.
If you duplicate a layer, Smart Guides can show you how much spacing you have between the duplicates if each one is spaced out differently. This can be a valuable tool for when it comes to repeating patterns or keeping you varied layers/object symmetrical.
Smart Guides are a relatively quick way to measure distances if you don’t want to go to the trouble of assembling guides. If you simply don’t want to crowd your workspace with too many lines, these keyboard shortcuts showing brief measurements can be a real-time-saver in your workflow.
Be sure also to use the Path Selection tool to track the measurements of the paths you create when moving layers. Using this method will significantly benefit those working with a team that can get highly specific with minor adjustments and retoolings.
Grids and guides are pretty technical, but they help simplify projects that require a life level of detail in measurements. Whether you’re designing a product, a building, a website, a poster, or even just painting a landscape, both are helpful tools for maintaining a sense of order in your Photoshop projects.
Having gone through the various uses, it should be clear where to use one over the other. If you’re trying to create even and orderly designs across your entire design, use a grid. If you’re trying to design layers with distinct boundaries that are not too crowding, go for guides.
Grids will be of the highest benefit for those who design highly organized layouts of geometric shapes, be they simple objects or buildings. Guides are sufficient when used in small and bordered areas of print, web, and video formats.
Smart Guides are also an essential addition for those who need accurate measurements quickly. It’s an easy means of shortcuts that can perfectly measure a specific change you need to make without relying on guides or creating extra guides.
The more you get used to working with guides and grids, the easier it will become to assemble everything from accurately positioned posters to developer-ready website designs that meet the display requirements.
Frequently Asked Questions
Adding guides is as simple as dragging them into your workspace. After turning on the visibility of both the grid, guides, and rulers, you can simply click on either the horizontal and vertical ruler to drag a guide into your workspace. Pulling down from the horizontal ruler will create a horizontal guide while dragging out from the vertical ruler will make a vertical guide.
If you want to be exact with your guides, you can simply add a guide through the View > New Guide. Clicking this will give you a dialog box to exact input coordinates for how you want the guide to appear. You can use this option if you don’t quite have a steady hand for the to createcreation of guides via the ruler method.
Smart Guides can be turned on the same way you turn on guides. Simply navigate in Photoshop to View > Smart Guides. The Smart Guides will then be enabled when you drag a layer and hold down on the Option/Alt key, displaying the alignment of your layer or shape as it applies to other objects. Additionally, you can hold Cmd/Ctrl and hover over a layer to view the measurements without dragging an object around.
Guides are a handy method to keep certain areas aligned and contained, as well as snap your layers to certain areas. Much like grids, they can be used to keep boundaries and group your design for whatever project you’re aiming to complete. Numerous presets are present in Photoshop that can show how guides can be effectively used in web designs, print designs, video designs, and so much more.
Mark McPherson has been working as a video editor and content writer for over ten years. His background started in animation and video editing before shifting into the realm of web development. He also branched out into content writing for various online publications. Mark is an expert in video editing, content writing, and 2D/3D animation.