Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it comes to creating mockups inside of Photoshop, one of the best ways to create a mockup is to utilize something called a grid system. There are a ton of different grid systems available that you can download templates for online. The most notable is probably the 960 grid system, which you can go to by going to www.960.gs in your web browser. You can download a template there which will give you a Fireworks, Illustrator, Photoshop template. There are all kinds of different ways that you can utilize that design. However, the 960 grid template can be somewhat confusing for some people.
Because it uses a width of 960 pixels, it doesn't lend itself well to things like responsive design. Therefore, in my workflow, I've actually adopted something called the Responsive Grid which was developed by a web designer named Elliot Jay Stocks and you can visit his web site by going to the following address: eliotjaystocks.com. And inside of the document that I have open here, you can actually see that web address at the bottom of this document. Let me explain the premise of this design and how it works. Basically, Eliot came up with the idea that the 960 grid system for responsive design just doesn't work, because of the fact that when you try to divide things up evenly to be "responsive" or expandable or contractible, 960 pixels doesn't lend itself well to even percentages, whereas a 1,000-pixel grid does so very nicely.
So for instance, here I've got six columns inside of this grid, and I want these columns to be evenly spaced based on a percentage so that when the user resizes his or her browser window, these automatically adjust to show different portions of the screen. Let's go over to a live HTML example really quick. Inside of this example, you're going to see that I have the same type of layout that I have in my Photoshop document. Each one of these columns that goes across the top here is equal to 15% of the width. Since I'm using a 1,000-pixel-wide container, each one of these is approximately 150 pixels across.
Of course, depending on the actual browser size, when I drag and move it around, that might change. So for instance, if I were to drag this in to, say, a tablet size, notice how they all adjust. I can drag it down to a mobile phone size and they continue to adjust. This is all done through HTML and CSS. But in Photoshop, we can mimic that by utilizing what we call the responsive grid. So how do you set up a responsive grid? It's actually pretty simple. I've given you the template here, but if you wanted to start your own, all you would have to do is create a brand-new document in Photoshop, Command+N or Ctrl+N. And I'll make this 2,000 pixels wide by 1,000 pixels Tall. H it OK.
There we go! Now what I'm going to do is create what I call an anchor object. So I'll grab the Rectangle tool and click. I'll make this 1,000 pixels wide and I'll make it 1,000 pixels tall. Hit OK. I'm then going to move it till it snaps in the center. I want to make sure that it's centered in my layout as well. So with my Move tool selected, Command+A or Ctrl+A to select everything, and then I'll center it vertically on the page. Now I'll hit Command+D or Ctrl+D to deselect and I'm going to draw out some guides.
If you can't see your guides, hit Command+R or Ctrl+R on your keyboard, or go to View and make sure Rulers is turned on. Now I'll drag out from the left. It should snap. Drag out to the right and it should snap. Now, we're basing this off the premise that I want six columns and then I could do three columns, two columns, one column, whatever I wanted to do, so that basically when I'm mocking things up, I can say, okay, this div spans one column or this div spans two columns or three columns. And it's just an easier way to determine exactly how wide the columns are going to be and how wide the content is going to be.
So, based on this 1,000-pixel grid, I'll come up and I'll start to draw out rectangles. I can actually throw away the original rectangle. I don't really need it anymore. And I'll start clicking. I'll make this 15% of the overall width. That's how wide I want each column to be. So 15% would be 150 pixels, and we'll make it 100 pixels tall. Hit OK and there we go! Now I'll just move this till it snaps over here to the left-hand side. And I want six columns, so I'll duplicate this five times.
I'll hold down the Command key and press the letter J five times. There we go! Now I'll take this copy, drag it over until it snaps here. Then in my Layers panel over here I'll select all the layers by Shift+Clicking and I'll distribute them evenly across, just like that. Now I can move them up a little bit, and there we go! I'm going to use this to set up my guides. So now I'll snap this there, just like that. There we go! And the guides are just snapping to the edges of the boxes that I've drawn out.
And this is the basis for my entire template. There we go! Now, I also want to zoom in, because I need to put a guide directly in the center to imitate the margins. So I'll come out here and I'll put one--by the way, if you can't get them precise enough, you can zoom in a little bit more and you'll get more precise control over your guides. So in this case, I want 490 right there. Drag this over.
I'm just hitting the middle portion of each one of these, and I'm using that little heads-up display to see that. 830, scroll over. Here we go! That should snap right to the middle. There we go! Two more, right there. And we'll drag this out to 1510. There we go! All right! Now I can take the same rectangles and I can throw them away. I'm all done with those rectangles.
Now I have a grid template that I can now use to design my sites. So let's see how we can put this into play. I'm going to grab my Rectangle tool and just make a quick mockup. So let's say I want a header that goes all the way across the top. All right! So I'm going to drag that out, let it snap, and I want it to be about 50 pixels tall. There we go! There's my header. Maybe right underneath that I need a large image that's flushed left, so I'll have that span across three columns and I'll make it 200 pixels tall.
Now, maybe I have another div over here, spans three as well. We'll make it 200 pixels tall to match the other. There we go! And I can always just kind of nudge that into place. Now I'm going to grab my Shape tool again. Let's say that I need another smaller div here that goes across all the way. Maybe it's 50 pixels tall. Then I've got some thumbnails down here which are just evenly spaced out, and I'll create a couple copies of these.
So six copies to be exact. And then I'll take that, move it over, and then evenly distribute those across so there are some thumbnails. And then I'll duplicate all of these with Command+J or Ctrl+J, give me another row of thumbnails. And then I'll draw out a footer at the very bottom. So you can see in just a few minutes I have mocked up a web site with a header, a big content area on the left and right, a banner ad in the middle, some thumbnails for images in the middle, and then also a footer at the bottom.
And now this would translate really easily over into a design like we have in our browser, because it uses these widths that I specified as percentages and so therefore it would be easy to turn this into a responsive design that would adjust according to the user's window. So the next time you go to start mocking up a project inside Photoshop, take a look at some of the grid systems that are available to you online. Just do a web search for "web design grid systems" or go to 960.gs or go to elliotjaystocks.com to look up his responsive Photoshop grid.
You'll be well on your way to making cleaner mockups that are easily translated into HTML and CSS.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.