Understanding grid systems & BootStrap

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
0
0
0
0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Now the most popular solution  to handle different browser sizes at the moment is the grid  system and of the grid systems,  something called Bootstrap is by far the most common. Now whether you are using Bootstrap  or any other way to build your website,  you're probably going to be using the grid system  and that's what we'll use in our Photoshop document. The grid system allows designers  to work from a base 12 column grid. Designers can span any amount of those columns  to suit their website. Let's take a look at this example grid system here on  Edward Robinson site. You can see it up here.

It's called  responsive grid system.com. Now what you'll see down, if I scroll all the way  to the bottom here, it starts at a base columns of 12. Now I'm yet to see anybody use exactly all 12 of them  unless there may be bullet points or lists  or something similar. So what tends to happen is design is end up  spanning a few of these columns. Down the bottom here you'll see  that it starts at a base level of 12 columns  and at the top here you can see we can span those. We can easily span those 12 columns, say six of them  and six again to carve our website in half.

And this is a really nice way. 12 is a really nice number  'cause we can cut it in two thirds and quarters  and sixth all very easily using the 12 column grid. This is another example here on Edward's site. You can see couple of uh, example layouts for responsive. Now this intro page here, forget the heights, okay,  'cause the heights are really short. But see the different cutups in terms of the navigation.

You can see here this is where my logo goes  and this other chunk here, this other two thirds um,  would be where my navigation goes. So this is span it all  and this might be say a rotating  carousel like they've got written here. These are feature boxes all carved into thirds. Okay, so four columns. Four columns, four columns. And then my footer would be spanning all three.

You can see here's a couple of different examples of ways  of cutting out websites. So I've switched here to the Photoshop file  that you can download as part of the exercise files. Um, if you haven't done that, do that from the link below. Otherwise you can create your Rome pages. Now what I've done is watch this. If I got a view and I got a show  and I go to guides, you'll see  that it's been cut up in two columns of 12 with a bit  of padding in between them all.

So I've done it for desktop, tablet, and mobile. Now you'll notice here on mobile,  the mobile doesn't actually have 12 columns like  the tablet and desktop. We do this because 12 columns on such a small size becomes  this dense mass of columns  and nobody actually cuts a mobile site up into  12 distinct columns. Now when deciding what pages  and what sizes they should be,  you can see the desktop here is nine 60 pixels wide. When you're deciding what size desktop should be  and tablet to B and mobile two B,  don't get too caught up on actual pixel dimensions  'cause there are so many different screen sizes,  it's impossible to group them all together into  one exact pixel size. You pick a generic size that fits mobile desktop  and tablets that are common at the moment  and that's gonna change as time goes along as well.

So be prepared for in a couple  of years when screen resolutions are all changed  or there's a new kind of Fity desktop mobile version  that you might have to go through  and design a separate style to accommodate that screen size. If you are looking for exact dimensions to get started with,  then you can download the Photoshop template that I've got  and the resources or if you're using say Bootstrap,  you can go and check Bootstrap to see  what the media breaks their views. Okay? What they can consider mobile is  what they consider tablet is. So if we go have a look now I'm over at  [email protected],  I'm in the slightly preview version, okay? And version four at the moment we're up to version three,  but version four will be out really soon.

So we'll be using that for this course. Click documentation, then go down to layout and pick grid. Now if I scroll down here, I'll get to one. This one here says grid options. You can see here here's my small case, that'd be mobile  and portrait. Then I've got small,  which is considered phone at landscape medium tablet large  is say a laptop screen  and extra large is a really big say IMAX screen.

You'll see the sizes here are written in this uh,  measurement called REM, which is a root M. If you've never used this measurement before, don't worry. Essentially you take the 45 and you times it by 16. 16 is considered the default size in a browser. So 45 times 16 gives us seven 20 pixels. And if we go back to Photoshop, you'll see  that I've used seven 20 pixels for this tablet.

Now when we get up to bootstrap five  and bootstrap six, they'll go and adjust these things. Depending on what the most common sizes are,  they might get bigger, they might get smaller,  whatever's really popular at the time. So that's a good place for us to start  for our Photoshop mockup. Now what I've done for you here as well is  that these guides can be a little hard to work with as well  because they kind of stretch past the pages. What I've done in here is say you're working on your desktop  view, you can toggle this layers down  and you'll notice in here I've got this one called  helpful column guides. If I toggle that down, I've laid out a couple  of basic column grids.

So watch this. I'm gonna turn my view show guides off  and I prefer to work this way. Say I'm doing something that is meant to be three columns. I'm gonna click this on my three columns  and it's just the transparent background so  that I know when I'm working with my document, okay,  I am dragging it around and I know I'm working within these  three columns here. When you finish using the column,  you can turn the eyeball on  and turn it off on another one  to work on a slightly different  layout or a different grid system. Now you notice in this tutorial that we are using only three  of the sizes we're using the small, the uh,  less than 34 eams okay, for, uh, portrait Mobile,  the tablet and desktop.

Now we haven't done this one that's in between here,  which is kind of a landscape phone  and we haven't done the really large  or extra large desktop as well. It's mainly just to keep the time down from this tutorial. And it depends on, I guess, the level  of complexity your website has. If it's a quick Throwout website, you might not spend  as much time with the Excel  or the small version,  which is the small landscape foam version, um,  until maybe the site's a little bit more mature. If you are working on a bigger project,  then definitely you're gonna be looking at all five media  queries and all five sizes here in Photoshop.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025