![]() ![]() Magic and I can also go to the gutter, - remember the gutters in this one was 30, OK, so you can see in the background here there is gaps of 30, but what I want to do is, I need 15 pixels either side of the column, so I’ve got the 15 pixels either side to make the 30 for these centre ones, but I need 15 pixels on these outside guys as well. It’s got some presets so I can go to 12 columns. ![]() Let’s go to view, there’s one down here that says “New Guide Layout” so if I click on this one here, it does some nice things. If you’ve done it before you’e probably going to cry when you see this easy method. there’s other slightly better ways of doing it, but you’d be there forever trying to line things up. Like you’d be dragging these things out, and lining them up with the rulers. Now the big problem with this is that to be honest it would be impossible. Now what we want to do is, we want to add columns to it, so the long way is, you can turn your rulers on, - you go to rulers and you can start dragging this out. Let’s go to resolutions 72, so say you’ve got this existing site - this one here. I’m going to have a width of 960, height doesn’t really matter, we’ll use 1800. Let’s go to photoshop, and let’s make a new document. If that bamboozles you, don’t worry, it bamboozles me too. OK so you divide your 960 by 12, and then you have to allow 15 pixels on either side of your columns, as like a little bit of a buffer, or a column width. What it’s doing now, it’s going to add 15 pixels either side of those columns. So that’s your width for your desktop view, - so 960 - so you want to turn it into 12 columns. OK or the large desktop view, which is 60rem now - to go through rems now is not the purpose of this course, it’s in another one that I’ve done, but the basics are 60 times whatever the default rem is which is normally 16 pixels which gives you 960 pixels across. So, say we’re designing for this home page here. This is the one I’m looking for, “Grid Options” ![]() I scroll down here, scroll, scroll, scroll. I go to documentation, then I go down to layout we’re looking for this one called grid. I’m using this version 4 which is in the alpha testing at the moment but it'll be live soon. In terms of knowing what kind of columns you need to add is the first part, so if you’re using something like Bootstrap to get your grids going even if you're not, it's a good starting point anyway. OK, so you can start with something like this, but say you’ve got an existing file, and you want to add to it. ![]() Essentially, start with something like this in photoshop, and you can see if I turn the grids on here, you can start to see that there’s 12 columns in all of these. I’ve got one that you can download, - I’ll put a link at the bottom here. Now, in terms of adding it beforehand, it’s really easy, - you just find a template that has it. Now Bootstrap uses a 12 column grid, so he wants to know, can I add it to photoshop after I’ve made it. He asked this because probably the most famous, or the most common framework for doing this kind of grid system on a website is something called Bootstrap. Now, he’s asked, can I add a 12 column grid after the fact. He’s got his own page, but he’s finding it hard to keep a consistency across the other pages that he’s designing in photoshop. Now one of my students in one of the online courses, Kerren, has asked - he’s got a page that he has designed in photoshop. I’ve been asked a question to do with columns and designing websites in photoshop. Hi everyone, it’s Dan from Bring Your Own Laptop. Conclusion - I don’t want this to be over. Using Adobe Generate to make image export amazingĤ9. Production video - completing our mobile viewĤ8. Production video - finishing up our desktop viewĤ5. Layers - find what you need quickly with layer searchĤ3. Where to get commercial use, free icons for your design FREEģ8. Masking images for rounded courses & circlesģ4. How to mask your images using a clipping mask FREEģ3. Where to get commercial use free imagesģ2. Production video - adding all of our textģ0. How to design using web safe fonts via Google FontsĢ8. Expanding & fixed width text boxes FREEĢ6. Adding structure to your site with the vector shapesĢ5. Screen sizes for desktop, tablet & mobileĢ3. What is technically possible in web designġ7. Testing on iPhone & iPad using Adobe Device Previewġ6. Tips for zooming & navigating your documentġ5. Understanding responsive mobile & tablet designĨ. Getting your workspace ready for UI workħ. What is Photoshop’s role when designing a website FREEĥ. What do we need to deliver at the end of our project? FREEģ. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |