Free Stuff Web Design

Photoshop Grid Templates: Designing Through the Line

5/5 (1)

There is no need to deny the usefulness of the grid for (web) design, at least it would be silly. Any grid is capable to simplify the work of a designer, and omit questions like: "I think I should move it a bit to the right..."

Photoshop grid is needed for a harmonious arrangement of elements on the page. Every website or an app you have seen was designed using the grid, even in a drag-and-drop interface you're arranging content blocks using the grid.


Not a single design can be created without the grid. No matter how advanced your designing skills are, you will need it to arrange all the content blocks pixel to pixel.

If you're not using grids (for some reason) you need to try them on, and you will see how much time you will save on your designs.

So why do you need to use grids?

  • The grid allows you to organize information in proper order.
  • The grid can save time you spend searching for free or a suitable place in the layout.
  • The grid allows you to add new information, which will not violate overall design concept.
  • The grid can become the basis for building sub-pages on your site.
  • Grids ease perception of the material, and help find the right information much quicker.

Ok, now you know why using the grid is important, time to get some. Below you will find number or resources where you can download free photoshop grid templates.

***
Photoshop Grids

free photoshop grid templates

This set of grids is perfect for mobile devices. All the elements use 12-unit grids, except the e-mail element (it uses 8-unit grid). The gutters are placed on the large side and the width is the same both for inner and outer gutters – everything to make the design fit perfectly on mobile screens.

Used sizes:

  • iPad: 1024x768
  • iPad: 768x1024
  • iPhone: 640x960
  • Email: 640px

***
Photoshop 960px grid

free photoshop grid templates

An ideal grid for a page that is 960 pixels wide. It has 12 columns, each 60 pixels wide, with a 20-pixel gutter. You can use it for a little wider page, if you will use the 20 pixels wide outer border, the page dimension will be 980 pixels. If outer borders are 10 pixels, the page dimension is 960 pixels. To make it even more convenient, there are horizontal guidelines every 24 pixels.

***
GuideGuide

free photoshop grid templates

GuideGuide makes designers work less painful. Pixel accurate columns, rows, midpoints, and baselines can be created according to your document or selected with the click of a button. Frequently used guide sets can be saved for further use. Grids can use multiple types of measurements. Honestly, if you haven’t started downloading it by now, you’re probably a masochist.

***
Modular Grid Pattern

free photoshop grid templates

The tool for a quick design modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other. You just follow the link and download it as a PNG file, Photoshop pattern or transparency mask. Simple, convenient and useful for any web developer or designer.

***
1200px grid

free photoshop grid templates

All modern screens are at least 1200 pixels wide, so a 1200px grid is a necessity for every developer. You can download it as a Photoshop, Illustrator or CSS file and get a flexible and convenient 15-columns grid. You will able to use just after downloading, in a blink of an eye.

***
Grid Generator Plugin for Photoshop

free photoshop grid templates

This one is a little more complicated tool. Grid Generator plugin for Photoshop gives you an opportunity you to create and customize any sort of grid system for your layouts. You only have to add it to your Photoshop and you will immediately feel it is much easier to create a web page design.

***
Bootstrap responsive grid PSD - Mobile, Tablet, Web - Free

free photoshop grid templates

This set of responsive grids are based on a classy Twitter combination of column/gutter width. You can use it for all types of screens: mobile, tablets and PCs.

Used sizes:

  • Web: 1280px width - 70px columns - 30px gutter
  • Tablet: 1024px width - 60px columns - 20px gutter
  • Mobile: 320px width - 10px columns - 10px gutter

***
 

iPad Retina Wireframe Grid

free photoshop grid templates

If you were looking for an IPad grid – here it is. Some really great person also didn’t find a Retina grid, so he created it and now shares it with everyone completely for free. You can download it as a PSD file. Its dimensions are: 2048x1536px.

***
If you're familiar with other resources or types of grids, you're free to add them in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *