• Wednesday , 13 September 2017

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

Code Canyon

Full course at: https://goo.gl/CmFafP
Free Exercise Files: https://goo.gl/F9mj1G
Free Cheat Sheet: https://goo.gl/HEcRDK

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: http://bit.ly/1GxIxSD
Bootstrap grid documentation: http://bit.ly/1SBwE4w

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


G+: https://plus.google.com/+ByolAuAdobe
Twitter: https://twitter.com/danlovesadobe/
Pinterest: https://www.pinterest.com/byolaptop/
Website: https://www.bringyourownlaptop.co.nz/
Course Url: https://goo.gl/lQKAZr


Trending topic on youtube

#Adobe #Photoshop #Tutorial

Thanks and Subscribe Channel

Original source

3d Ocean

Related Posts


  1. Bring Your Own Laptop
    September 9, 2017 at 21:30

    Hi everyone, the full course is here: https://goo.gl/9Td28D

  2. Aysen Akif
    September 9, 2017 at 21:30

    Thanks for this video. Its very good. I dont need dowload photoshop grids)))))))))))))) Its very useful video.

  3. Niloo Roshani
    September 9, 2017 at 21:30

    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?

  4. Bernie Ndeogo
    September 9, 2017 at 21:30

    My ps does not have an artboard option. I'm using PS CC 2015. Why is that?

  5. Iris King
    September 9, 2017 at 21:30

    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?

  6. oba mo
    September 9, 2017 at 21:30

    hahaha that helped me a lot ty

  7. Elena Golubeva
    September 9, 2017 at 21:30

    Gorgeous! Good I found your video before I started creating guidelines myself

  8. Alexandre simões
    September 9, 2017 at 21:30

    Very good. 🙂

  9. Bart Nelissen
    September 9, 2017 at 21:30

    Good Job !

  10. paolo-1283
    September 9, 2017 at 21:30

    It's beautiful handy guide, thanks!

  11. Nenad Scepanovic
    September 9, 2017 at 21:30

    Thx 😉

  12. Ws Webus
    September 9, 2017 at 21:30

    How to make grids separate to different art-boards?

  13. Joyee S
    September 9, 2017 at 21:30

    Hi there, I am using Photoshop CS6 cant get the New guide layout in view option. pls let me know how we do it here. thnks Jo

  14. Vivek Arun
    September 9, 2017 at 21:30

    Thank you! 🙂

  15. Евгений Астахов
    September 9, 2017 at 21:30

    Thanx a million!!!

  16. Max Weir
    September 9, 2017 at 21:30

    fantastic! I was hearing lots about guideguide plugin I think they call it, have you heard about or tried this?

Leave A Comment

You must be logged in to post a comment.