How to create Grids in Photoshop (Two methods)

Muhammad Ahsan Pervaiz
A free video tutorial from Muhammad Ahsan Pervaiz
UI UX Designer + Freelancer + Web Developer
4.4 instructor rating • 16 courses • 74,687 students

Lecture description

In this lecture, i will discuss two ways to create Grids in Photoshop, one is Photoshop's default grid layout system and other is a plugin called GuideGuide

Learn more from the full course

UI Design with Photoshop from Beginner to Expert in 15 days

Ultimate guide for Beginners to learn Photoshop & User Interface Design for Web Design & Mobile App Design in two week

11:33:04 of on-demand video • Updated March 2019

  • Start your Career as UI Designer
  • Learn the settings necessary for UI Design Process
  • Learn all the Basic tools of Photoshop for UI Design
  • Start using Photoshop with solid foundation in UI Design
  • Learn all the Photoshop Shortcuts for UI Design
  • How to use Photoshop Extensions to speed up UI Desing Process
  • Tips and Techniques for Efficient usage of Photoshop for UI Design
  • Learn how to use Custom Scripts in Photoshop for UI Design
  • Learn about Color schemes and Typography Online tools
  • Learn how to use Gradients and Patterns in UI Design
  • Create Wireframes and learn the tools needed to create them
  • Learn how to design MODERN DASHBOARD graphs and elements
  • Learn how to design MODERN HERO/HEADERS of Websites
English [Auto] In the last lecture we learned about grades and how to design using grades like we lay out different things using different column sizes in this lesson. I'm going to show you how to create different grid types and different grids using Photoshop. But let me just use Photoshop the file system. Now what we're going to use is we are going to use a custom document size 12 A.D. which is common in web design and is 1072 don't in this document class OK. Now here we have other art board. Now we are going to use for the shops and default grid system so the guide system to that grid guide layout. And we are going to use 12 columns with girders of 20 pixels margins. If we really need them then you can use margins over here or you can leave them out. So I'm going to use 0 4 margin 0 bottom margin and left then and right then. OK. So press OK. Now your grid system is ready if you want to really improve it you can add different rectangles over here like that and copy them and duplicate them in alt key because this can really help your design. And in the end you are going to create out these guys blue guides. So what is going to remain in the end will be these green lines these columns. So copy them like that one OK I'm going to select all of them and merge them into one grid system. And here we have a grid system you can now clear out your guides clear guides. And this is how we design a grid. It has 12 columns and with 20 pixel cutter and 10 pixel margin. So now if we try to design something we will be designing like logo is going to be here. And so let me just change the color and our For example navigation will be over here like that. So this is how we lay out things. I am using two columns for this logo and then columns for this navigation and same goes for other elements of your web page. Ok this is one way of creating grids. Then we have this guide guide Plug-In Foster it was free. Now I got it for just five dollars and I really like it. It is very nice fun and you can see the grades different grades and you can read them and you can save their set. So this is a guide guide plug in extension. And I'm going to use only just this 12 columns needs a number of columns you can see they have different fields. Margins are bottom different margins than columns rows. I'm not going to go into details of grid system. I will get into detail in my next course which is on very advanced webdesign and different techniques of web design. In that course I will talk more deeply about grids and vertical and call column or both grids. So right now we're going to stick with 12 columns. And as we are not going to use this word we don't want it. So we just use 12 columns Let's make 16 columns this time. OK. And I'm going to get the space of 15 pixel over here. And I'm going to press ahead Gijs OK. Now we have 16 column grid system with these 15 pixel gap and I guess we can see it sixth grade and it is we are going to see 16 or 15 trigs. OK. So great. You can see we're here in my saved guide you can see 16 column 15 pixel Goodere. So this is a very handy tool you can create and save a lot of different grid systems. Now you can see I have saved a lot of different garbage. I have created so you can create any type of guide and save it all here. There are few other uses of this plugin which are left part of my point right. Bada good guys. You can easily kill the guys with this button over here and we can have. Let me show you the other things we can do with this plugin. I mean just like this rectangle and get a section around here then we can easily have guards. Ok make point left right. All made point bottom. So this is another use of this plugin and it is a very nice plug in guide guide. So these are two ways in which you can create guides and grigs in Photoshop using Photoshop default new guide and guide layout system and you can also use this guide guide plug in. So that was all about how to create guides and grids in Photoshop and let's move on to some Niman or some lectures.