How to make a Bootstrap Grid PSD Column Guide in Photoshop CC 2015 Tutorial Part – 20/48


Full course at:
Free Exercise Files:
Free Cheat Sheet:
Get Adobe Dreamweaver here:

How to make a Bootstrap Grid PSD Column Guide in Photoshop CC 2015 Tutorial Part – 20/48.
On completing this video you’ll know how to make a 12 column BootStrap grid PSD easily using the View / New Guide Layout feature.
Download the BootStrap template:
Bootstrap grid documentation:

Video Transcripte:

0:00hi everyone it’s dan from bring your own
0:02laptop hey I’ve been asked a question to
0:05do with columns and designing websites
0:08and photoshop now one of my students are
0:11one of the online courses karen has
0:12asked he’s got a page that he’s designed
0:16in Photoshop has got his homepage but
0:18he’s finding it hard to keep a
0:20consistency across the other pages that
0:23he’s designing in Photoshop now he’s
0:25asked can I add a 12 Colin grid after
0:28the fact he asked this because then the
0:31probably the most famous or the most
0:34common framework for doing this kind of
0:37grid system on a website or something
0:39called bootstrap now bootstrap uses a 12
0:41common grid so he wants to know can I
0:43add it to photoshop after I’ve made it
0:44now in terms of adding it beforehand
0:47it’s really easy you just find a
0:49template that has it I’ve got one that
0:51you can download I’ll put a link down in
0:53the bottom here essentially you start
0:55with something like this and photoshop
0:56and you can see if i turn the grids on
0:58here you can start to see that there’s
1:0012 columns and all of these ok so you
1:02can start with something like this but
1:03say good an existing file and you want
1:05to add it in terms of knowing what kind
1:07of columns you need to add is the first
1:09part so if you’re using something like
1:11bootstrap to get your grits going if
1:13you’re not it’s a good damn starting
1:15point anyway i’m using this version for
1:17witches in alpha testing at the moment
1:19bed will be live soon if i go to
1:21documentation and I go down to lay out
1:25looking for this one called grid I
1:27scroll down here scrolls girls grow this
1:30is the one I’m looking for grid options
1:32so say we’re designing for this home
1:34page here okay are the large kind of
1:36disk top view which is 60 REM now to go
1:40through areum’s right now it’s not the
1:42purpose of this course it’s an another
1:44one that I’ve done but the basics are 60
1:47times whatever the default REM is which
1:50is normally 16 pixels which gives you
1:52960 pixels across okay so that’s your
1:56width for your desktop view so 960 say
1:59you want to turn it into 12 columns case
2:01is default of 12 what it’s doing now is
2:03it’s going to add 15 pixels either side
2:05of all those columns okay so you divide
2:08your 960 x 12 and then you’re going to
2:11allow for 15 pixels
2:13either side of your columns as like a
2:15little bit of a buffer or a column width
2:17that’s what we need to do if that
2:19bamboozles you don’t worry it bamboozles
2:21me too and so just copy what i do in
2:24Photoshop I’ve worked it out ahead of
2:26time let’s go to photoshop and let’s
2:28make a new document I’m going to have a
2:31width of 960 a height doesn’t really
2:33matter we use 1800 it’s going to
2:35resolution soon it too so say you’ve got
2:36this existing site this one here now
2:38what we want to do is we want to add
2:41columns to it so the long way is you
2:42could turn your rule is on for the view
2:44rulers and you can start dragging this
2:46out now the big problem with this is
2:49that to be honest it be impossible like
2:51you’d be dragging these things out
2:52lining them up with the rulers there’s
2:54other slight bitter ways of doing it but
2:56you’d be there forever trying to line
2:58things up if you’ve done it before and
3:00you’re probably going to cry when you
3:02see this easy method so let’s switch to
3:04the easy method let’s go to view there’s
3:06one down here it says new guide layout
3:09ok so if I click on this one here it
3:11does some nice things because some
3:13presets so I can go to 12 columns magic
3:15and I can also go to the gutter I
3:17remember the gutters and this one was 30


Course Url:

Thanks and Subscribe Channel



  1. Is there any way to do the same with Photoshop CS6? I do not have the default option on CS6 View> New Guide layout> Default. I have not the Default to customize any measurements/ column/ gutter etc. except vertical/horizontal adjustment or give it a position number by cm. Any other idea to help?

  2. Hi Dan! So this is the 12 columns for 960px width artboard… What if my artboard is 1366px wide? Do I still just make guides like how you did it in this video?


Please enter your comment!
Please enter your name here