How to adjust online grids to desktop web design and mobile web design in Photoshop?

Question

There are many good grids online (1200px.com, unsemantic.com) that can be downloaded as PSD and used in web design in Photoshop. Now I have 2 questions in relation with this:

1. When I apply this template in my Photoshop document, they have small right and left margins, how do I adjust such templates to my needs because I want MORE white space, not 5-10px as the templates have? (do I go to canvas size and increase the size of canvas on both sides or else?)

2. How to use same 12 column grid template for mobile web design?

May be I am thinking the wrong direction, I am just confused, your help would be appreciated

Answer 1

how do I adjust such templates to my needs because I want MORE white space

Griddify is a free plugin for PS that allows you to easily compose custom grid systems with columns and white spacing.

How to use same 12 column grid template for mobile web design?

Simply adjust the settings to fit your new screen size.

Answer 2

As Afterteam wrote Griddify is a cool plugin.

You can also use:

• http://960.gs/
• http://guideguide.me/

If you have Photoshop CC go to View\New Guide Layout and choose your measurements that you want to use :)

Your second question can be solved in two ways:

• again like Afterteam wrote :)
• set less number of columns (this same size as in desktop view) for mobile (example: Desktop: 12 column, Tablet 8 column, mobile 3 column)