Production video - adding all of our text

Alright, this is a process video, so I’m going to go through, and start styling my website. So , first of all, the BYOL logo here. I’m going to pick a kind of a - if you’ve got a logo, obviously you’ll be jamming in the company logo, and what I’m going to do is, I’m going to have this guy sitting next to this column here. Now if you are moving things around, and it tried to snap to too many things, and it’s snapped to the guide there. OK, you can use your keyboard left and right arrow keys in your keyboard, just to tap things along, and get them in the right place, I’m going to pick a font, so with the layer selected grab the type tool, and I’m going to use my Roboto, and I’m going to use the Slab one. I want the bold one for this. It’s the font size - there’s no guaranteed font size. I’m going to use this one here to take it down a little bit, using my arrow keys, and now I’m going to look at adding my navigation panel, which is over here so I’m going to grab the type tool. I’m going to get it so it spans - I’ve got a lot of room to work with, so I’m going to get it so it spans that column all the way along, and use that. About 9 columns. And inside of here I’m going to type in - zoom a little bit - and type in home. If like me you can’t see your text, and it’s disappeared, it’s because the font is actually really big.

So remember the font from the last things we were doing, - if I expand it out here, yea, there he is there. But if he is small, and you can’t see him because the text box is too small, just expand the box out, select all the text, and make it an appropriate size. I’m going to put mine down to 12, actually make it 16 pixels. OK for the moment, and then I can move it up again, so I can see it. The text here - I’ll use capitals and this first one here is going to be SERVICES, then I’m going to put a space between. I’m going to put 2 tabs between mine i’m going to use. The next one is going to be PORTFOLIO, - 2 tabs - Now in terms of should I be using tabs or spaces, or should they be in separate boxes, it really doesn’t matter, because this is just a visual. Ok When it comes to web design, they will have to be separated properly, but for the moment to view what you use to space them out, so let’s go 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, so I’m going to copy that, so I know that the spacing here is exactly 10 and use team.

Put some spacing in and we’re going to have a “Contact Us”. Great. What I also want to do is, I’m going select all this text, and I’m going to make it up to the top here to be left aligned so it’s always left aligned along that column group there. Font size is fine, but the font style - I’m going to switch back to our plain old Roboto, so I’m going to select this text here, and type in Roboto, and I’m just going to use medium for the moment. OK, I’m going to turn my grids off, using command semicolon. OK to get a sense of it, I’m going to zoom out a little bit. I don’t like the text. I’m going to pick - instead of medium - I’m going to pick the light version. OK I like that nicer. Now the next thing we’re going to look at, - we’re going to put a big headline above this piece of Lorem Ipsum here, so I’m going to find the Lorem Ipsum in my menu, drag it down and use my type tool.

I’m going to draw out a fixed width box, because I want it to sit inside of here, even when you are dragging out text boxes, you should use the grids to line things up, OK using these columns, it just makes it a lot easier when it comes to development time. This one here is going to be called - what’s this one - I’m going to make sure it is in the centre, and this one is going to be “Let’s make this Awesome” Right, OK, Selecting the text, - let’s make it a nice size, and when I say nice, appropriate for this one, a nice big super graphic, and I’m going to pick Roboto, and I’ll use the slab, I’ll use thin for this one here. In terms of colour, I’m going to use one of my swatches that I used. OK Down the bottom here, I’m going to use this colour here.

Now to do it, with it selected I clicked on the swatch here, and it switched the colour out. Great. I’m going to turn my guides off. and I’m going to move that down. OK This text here, I’d like that to be in the centre as well. So I’ going to grab my type tool, click inside of it. OK, and I’m going to centre it, and if you’re finding problems with this hyphenation, what you can do is click this icon here, which will bring up your character panel, and switch to paragraph, and turn hyphenate off if you are having trouble with hyphenation. I hate hyphenation, Right, pop them back in. Now 3, - let’s just say for this bit of text it’s actually only going to be 3 lines, and I’m going to try and get the copywriter to work for 3 lines for this one, and I’m going to move him up a little bit. Grab, let’s make this down, - awesome. Actually one little bit I’ve forgotten is, I’m going to add a nice big call to action button here,

so I’m going to grab my type tool, and I’m going to click once, and this one is going to be called the More, More even add a plus. What text am I going to pick, - I’m going to make it a little smaller, maybe about 30, and I’m going to make it a lot heavier. Bold. I’m going to make it white by selecting up her, and I’m going to grab my rectangle tool. It’s going to be above this guy, but we can change the layers in a second.

What I want to do is turn my guides on, so command colon, and I’m going get this one to be set between these 2 - these 2 centre ones. - What colour is it going to be? I’m going to pick my green, and I want to make sure more is above that rectangle. I’m going to give this rectangle a name, and call this one 'BTN' I know it’s a button, and this one is going to be the More button. Great. I’m going to grab my more text, grab my move tool, and move it around, Remember, if you can’t get it in the line, just use your cursor to move it around. Great. Everything needs to be moved up little bit, OK to do that I can hold down my command key, and I’d got More selected already, hold down the command key, click the button " More." I’ve got “Let’s make this Awesome,” and “Lorem Upsum” So those are the 4 parts I want to move, and I’m going to click and drag it up, and remember if you’re unsure about - if it snaps to the wrong points, maybe you can just use your arrow key to tap it up and tap it down. Turn my guides off, yea, we’re almost there. That More” is a bit big, go back to my More layer, grab my type tool and turn it down to 24.

Yea, nice, move it up a tad, and there we go.