Start learning with our library of video tutorials taught by experts. Get started

Photoshop CS6 for Web Design

Using a grid system


From:

Photoshop CS6 for Web Design

with Justin Seeley

Video: Using a grid system

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.
Expand all | Collapse all
  1. 1m 9s
    1. Welcome
      48s
    2. Using the exercise files
      21s
  2. 25m 50s
    1. Designing for screens
      1m 8s
    2. Decoding screen size and resolution
      3m 9s
    3. Exploring the PSD-to-HTML workflow
      2m 25s
    4. Setting up Photoshop for web work
      5m 29s
    5. Creating a new document for web
      2m 36s
    6. Creating a new document for mobile
      4m 24s
    7. Setting up a responsive web layout
      3m 31s
    8. Creating email newsletter documents
      3m 8s
  3. 20m 39s
    1. Adjusting color settings
      4m 13s
    2. Understanding web color
      4m 0s
    3. Creating a color palette
      4m 56s
    4. Creating custom swatches
      3m 34s
    5. Applying color to shapes and graphics
      3m 56s
  4. 20m 36s
    1. Exploring the Layers panel
      4m 9s
    2. Renaming and grouping layers
      7m 19s
    3. Searching and filtering layers
      3m 11s
    4. Using layer comps effectively
      3m 4s
    5. Using automatic layer selection
      2m 53s
  5. 29m 2s
    1. Using vector shapes vs. pixel shapes
      3m 31s
    2. Creating vector shapes
      5m 2s
    3. Working with fills and strokes
      4m 36s
    4. Working with Smart Objects
      7m 47s
    5. Importing images
      3m 57s
    6. Cropping and resizing images
      4m 9s
  6. 28m 48s
    1. Planning your project
      3m 13s
    2. Using guides and rulers
      6m 40s
    3. Using a grid system
      8m 28s
    4. Developing a layout with shape layers
      4m 4s
    5. Making pixel-perfect adjustments
      6m 23s
  7. 23m 19s
    1. Using point text vs. paragraph text
      2m 10s
    2. Using text as text vs. using text as an image
      2m 47s
    3. Understanding web-safe fonts
      2m 41s
    4. Inserting placeholder text
      4m 2s
    5. Creating and using character styles
      2m 37s
    6. Creating and using paragraph styles
      6m 11s
    7. Creating editable 3D text
      2m 51s
  8. 26m 54s
    1. Understanding layer styles
      7m 0s
    2. Creating and using drop shadows
      3m 23s
    3. Creating better bevels
      6m 9s
    4. Simulating metallic textures
      5m 8s
    5. Saving and applying layer styles
      2m 48s
    6. Turning layer styles into independent layers
      2m 26s
  9. 50m 23s
    1. Starting with a wireframe
      54s
    2. Organizing page structure
      2m 29s
    3. Adding master elements
      5m 37s
    4. Creating navigation
      4m 36s
    5. Working with photographs
      4m 0s
    6. Working with text
      8m 31s
    7. Creating media placeholders
      7m 22s
    8. Creating buttons
      7m 15s
    9. Creating form fields
      7m 54s
    10. Simulating pages with layer comps
      1m 45s
  10. 33m 38s
    1. Understanding slicing
      2m 4s
    2. Slicing up a mockup
      4m 15s
    3. Understanding web file formats
      4m 3s
    4. Exploring the Save for Web dialog
      5m 3s
    5. Optimizing photographs
      4m 17s
    6. Optimizing transparent graphics
      4m 56s
    7. Saving Retina display graphics
      5m 34s
    8. Using the Image Generator (NEW)
      3m 26s
  11. 10m 40s
    1. Understanding image sprites
      1m 25s
    2. Creating a sprite grid
      2m 54s
    3. Assembling a sprite
      4m 51s
    4. Optimizing sprites for the web
      1m 30s
  12. 18m 6s
    1. Creating a basic action
      5m 28s
    2. Exploring batch processing
      2m 55s
    3. Creating droplets
      3m 20s
    4. Using the Fit Image command
      4m 5s
    5. Using the Image Processor
      2m 18s
  13. 6m 56s
    1. Integrating PSD files with Dreamweaver
      3m 22s
    2. Integrating PSD files with Fireworks
      1m 59s
    3. Integrating PSD files with Muse
      1m 35s
  14. 50s
    1. Goodbye
      50s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Photoshop CS6 for Web Design
4h 56m Appropriate for all Jul 17, 2012 Updated Oct 04, 2013

Viewers: in countries Watching now:

Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.

Topics include:
  • Customizing a web workspace
  • Decoding the mysteries behind screen size and resolution
  • Coloring web graphics
  • Using layers and layer comps effectively
  • Working with transparency
  • Creating wireframes on a grid
  • Styling text
  • Creating image sprites
  • Optimizing images as JPEG, GIF, or PNG files
  • Integrating with the rest of the Adobe Creative Suite
Subjects:
Web Web Graphics Web Design Web Foundations
Software:
Photoshop
Author:
Justin Seeley

Using a grid system

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.

There are currently no FAQs about Photoshop CS6 for Web Design.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Photoshop CS6 for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked