What’s good YouTube, its Creative Ice Media Group here and today we’re going to be covering a topic that gets requested a lot and that’s web design. There’s many different templates we can make. And today, I just decided to make a simple but bold template to show how to make it. We see the About Us Page. This is the homepage. In my own home, I’m going to show you to make the About Page because no reason. I just want to show you how to make the about page because I’m not going to do every single page. But you’ll learn as we start to make it.
So we’re going to go to file and new. I’m going to do web 4000 200 and then 1500. That should be good. All right, now what we want to do is change our background. Color it to black and then our foreground color to some sort of dark or gray. All right, then we get our gradient tool. And just try to drag it diagonally like so. If we zoom in, as you can see we got a nice little gradient going on here. Now what we’re going to do is a lighter gray. We’re going to make use a rectangle tool to make a line sort of thing going on. Let’s see that, maybe that’s way too far. I know that’s all right. I just had stroke for some reason. So yeah, and then we just drag it there.
Next, we get our white color and we—I’m going to write Company Name. We can do it at any font we like but I’m using the impact because it’s quite a good web 2.0 font. Normally, you’ll get a company name at the top left. But for this layout, I know it’s just underneath that navigation part, it quite looks good. And then we get slogan, yes slogan. And then just make the slogan a lot smaller. And then we change the slogan to a different color. Let’s make this seem blue. Lasso is on pink, not bubble pink. Imagine a design being color blind that would be quite bad.
Then we do the navigation so home, about contact advertise. These are just random pages not that it runs have on the website. We change that to white. All right here’s the thing that you’re going to do your pages. As something about page, what I’m going to do is highlight about and change that to blue. All right, so to use that on the website, actually knows that they’re on the about page. Now one thing I’m just going to make the navigation a tiny bit smaller. And then we basically have already quite nice navigation, quite nice layout to do, complete name and slogan. Like I said, this layout is going to be really tried to keep boldly so I think so.
Now what we’re going to do is get a gray again with our rectangle tool. Just make a box. Okay like so. And for some reason, I don’t know why actually. All my boxes and all these and that keep having a stroke around them which is what we’re going to need but I don’t do that anyway because I want to show you guys that we need to do it straight. So we need to do a shape all right.
We’re going to click on the white color and we’re going to change the opacity down to around 40. And that’s how it looks. So at a moment, it’s looking quite good. Now this box is going to be called about us, all right. And basically, it can be like if I show an example before in the homepage version, it had the two featured columns. As you can see, this is the featured section. So this would be like a person and all that. The images are black out because I don’t want to get copyrighted and all that.
And then you can see over here, you can see over here that we have a secondary story. Then we add that and usually links and all this and that. And then yeah, so we’re going to have that about section. Then we’re going to make little tool box. And we’re going to get some laurel inseam to fill in there. All right and that would be good. We’re going to change the font Arial. I think that will do and then make it a lot smaller. Can all that be a lot smaller, all right? Now it’s looking decent. We can flick in the picture to in here as well. So let’s find a nice little picture of ourselves and there we go. All right, once I’m just going to edit it real quick as this box because it doesn’t really look that good like that. All right, so we’re just going to fix all this mumbo jumbo. All right, now it’s looking decent. All right, one more. There we go. So this is our lightly blur section.
Now what we’re going to do is get duplicate of that shape box that we made. So we have two now. Yeah. We’re going to transform it to be a bit longer. We’re going to transform it to almost gradient all right. And then it’s going to be like and delete, all right. I’m going to call this what we can do for you. What can we do for you? All right, impact again and we’re going to – what was that, 69. So we’re going to keep it the same 69 all right.
Now what we’re going to do is again, get some Lorem Ipsum if you guys do not, Lorem Ipsum is basically just this text. That design is used. Change that again to Arial. And we’re going to make a paragraph here. I’ll show you why we made a paragraph in a second apart from that. There’s a little bit section done. Obviously not with the use of Lorem Ipsum in your actual template because you’re going to actually have content, I’m now moving slightly to rare and I’m going to leave a little gap here.
As you can see in the about section, we had a bullet point thing. You can use any bullet point. I don’t actually know a DR. I don’t guess I’m going to be here. We can’t really work to make enough one so I’m just going to chill a little bit and just like drag into here. All right and then duplicate and put one right there. Cool.
Now as I touch at the top with navigation, we’re going to pretty look in this. I forgot how to fix it. We have that little social boxy thing. So again, I come to about to make fully icons. I’m just going to drag into my about. You’re going to add all your buttons and all this and that. And it would be really nice if we drag which is not going because I’m recording all this starts this.
Drag. Oh my, it’s being a retard. All right, now we’re going to position it around there. All right and I’m going to do – I’m going to move a navigation a little bit. That’s perfect. That is looking good. And now this is just a final step of getting early with texting and writing www.cimg.cody, okay, designed by cimg, okay. Well you can I guess but I’ll be a bit weird in that. All right, you make it pretty darn small, smaller than that around 20. It looks about good. And then you just change the color to gray a bit later not. And there, there we have it right. So if I put on some full screen mode. You can see we have the clear navigation home about contact to advertise. Heavily inserted social buttons so you can have like if you want people to subscribe your rss field, click on that one on Facebook, Twitter. And then we have a company name in slogan.
As you saw on our example, we have advertising box but I realize I get a bit complicated when you start getting into advertising boxes. And I want to keep this quite simple. About us section again, nicely presented, easily to read. And then what we can do for you. And then we have water mark copyright sort of thing that you could have like all rights reserved to send you that to UK or whatever. And yeah, that’s how to design a simple page. I don’t really know what to call about.
Yeah. I’m off to make the tutorial on how to code this on the web now. It won’t be on share ware but I’ll try to do it tonight. So you guys can straight way like learn how to use Dream weaver. If you don’t have Dream weaver, download the down mark. So might as well, I’m going to use my other computer so I’m not going to be using a Mac for the next one. I don’t have Dream weaver on my Mac.
But yeah, that’s how you make a basic bold, quite attractive page in Photoshop. Thanks for watching. Please comment, rate, and subscribe.