[ad_1]
https://i.ytimg.com/vi/i6fAPPQe3RE/hqdefault.jpg

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

—————————————————————————————————

Facebook:https://www.facebook.com/BringYourOwnLaptop
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
#HowtoDesignaWebsiteinPhotoshop
#PhotoshopTutorial
#CC_2015
#Bootstrap_Grid_PSD

Thanks and Subscribe Channel

Original source