Web Design :How To Design a Website in Illustrator | Dawid Tuminski | Skillshare

Web Design :How To Design a Website in Illustrator

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (1h 35m)
    • 1. Web Design in Illustrator :Welcome to the Course

      2:03
    • 2. Before we start

      3:16
    • 3. Header and contact info continued

      5:33
    • 4. Header and contact info

      6:58
    • 5. Let's create logo and nav

      6:09
    • 6. Let's create the Subheader

      4:13
    • 7. Let's continue creating the Subheader

      6:41
    • 8. Let's create the Our services section

      7:28
    • 9. Let's finish the Our Service setion

      3:08
    • 10. Let's build the Free consultation section

      4:02
    • 11. Let's finish the setion

      4:05
    • 12. Let's build the Our team section

      6:19
    • 13. Let's finish the section

      4:15
    • 14. Let's build the Testimonials section

      4:46
    • 15. Let's finish the Testimonials section

      5:20
    • 16. Let's create the Footer

      6:15
    • 17. Footer continued

      3:32
    • 18. Footer continued

      5:47
    • 19. Let's finish the footer

      3:44
    • 20. Conclusion

      1:19

About This Class

I remember myself watching tutorials and courses thinking: Ok, I know how to click things, but how to put all the pieces together?

I rarely got the answer.

So I know what it feels like to look for practical knowledge and not getting it.

That is why I’ve put this course together, so you can learn the actual web design process and so you can do it effortlessly.

Because if you want to

  • Learn professional web layouts design in Illustrator
  • Build your confidence in being able to design a web layout independently
  • Lern only the practical aaspects of using Illustrator for designing web layouts

this is the course for you.

Because you will learn how to design a website in Illustrator without spending weeks on watching tutorials, that get you nowhere.

So enroll in the class and see you inside.

Dawid

PS If you like the class, please submit your review and class project.  It will help other students, just like you interested in topic I teach, in finding my classes. Thanks!

Transcripts

1. Web Design in Illustrator :Welcome to the Course: Hello and welcome to the course. My name is David Tyminski, and I think it's great that you've decided to learn how to design Web layouts using Adobe Illustrator, because this is what this course is about. So if you want to design a website and later, go out with your friends all in one afternoon or learn exactly what you need to design a website that will make people stand in line to pay you or build your confidence in being able to design a Web layout independently and a quicker than a washing machine. Does the laundry or learn ready to use Web design techniques to finally start making money by designing websites, Will you've come to the right place. Cause of discourse is all about professional, competitive and effortless Web design. It's a four course to my fundamentals off Web design, and if you haven't seen that, it is a good idea to do Suker's here we will focus on the actual design process. Inside, you will find the whole corporate website creation process from the 1st 2 of the last click from creating the header to finish in the footer and then imagine that we will do all that in just 90 minutes because you see, my courses are all about simplicity. If something can be done a quicker or more effectively, it should be done like that. That's what you will learn. All that is necessary to design a website, but nothing more. So if you are looking for some illustrator or a Web design basics, well, then take a look at my other courses. Oh, and don't forget you are totally covered by a 30 day money back guarantee, no questions asked. No hard feelings, so your risk is absolutely zero. So it's up to you now in rolling the course and take your first step to creating sensational Web layouts in Adobe Illustrator Onley. 90 minutes of your time can change the way you think about designing websites, so see you inside. 2. Before we start: Hello and welcome to the course. My name is David Tyminski, and in this course you will learn how to design a Web layout in Adobe Illustrator. We already learned the fundamentals off Web design, and we did that in the fundamentals of Web design in Illustrator, of course. And if you haven't seen that course, I highly recommend that you do. And the course we're watching is a follow up to the fundamental scores, and it just would be easier for you to follow along if you watched the fundamentals course . But that's just my advice anyway, of the layout I chose for this course is for a fictitious law company. I called Stratton and Sons, but before we dive into the actual design part, we need to bear in mind a few simple rules. First of all, the design was based on this wire frame, and if you're not familiar with wire framing, take a look at my fundamentals of Web design in Adobe Illustrator, of course, where I explained the wire frame in part in detail. Second of all, we got quite distinctive parts here. We got the header with some contact info, a call to action we got the logo and then have we got the main image with some text overlay ? We got the our service section with some I comes. Then we got this part with a bold image on the left and the text about free consultation on the right. Then we got the our team section, that testimonial section as well, and notice that it is meant to be a slider. And lastly, we got the footer at the bottom, and all these sections are placed on the corresponding layers that were named accordingly. And that's the rule number three. I have also created a separate art, bored with all the assets I will need to recreate this design. And by the way, this is totally optional. It helps a lot in a typical represents scenario, but it's not like it's a must. Well, I get colors here that are used in the design, and I turned these colors into a collar group. The funds I'm using our droid serif, mainly for section tiles, but also for the Nev and open Sons for the rest. And these, by the way, are old Google phones. I also have the logo right here and the guy comes. And of course, all the images are down right here. The last but not least, this design was based on a 12 Colin grit. And again, it's something all you guys have seen. My fundamental scores are already familiar with. The with Off the art board is set to 1920 pixels, but the with off the design is constrained to 1200 pixels except for the full with images and accents. Okay, now that we know all that, we can start the design process and we will start with the top most part, which contains the icons, some contact info and the first call to action. But we will do all that in the next video. 3. Header and contact info continued: Okay, So in this video, let's start aligning our top header Top heavy elements. And I will start with these icons right here. But the first thing we need to do is to create a well, great alive effect. Live effect that I want to create is an outline object. And I want to do that because right now, illustrator considers thes guys as text boxes. And when I align these in accordance to in relation to, like the background or maybe the icons or the button So it will take into consideration the size off the whole tax box. And this is done. What? I wanted to know that this is that not what I want. I want I wanted to align all these elements Onley relation to the tax itself. So what I need to do is to select all these guys, go to the effect menu, choose bath, outline, object and right now illicit will align everything in relation to to the text itself, not to the size off the textbooks. Okay, so what? I want to dio let me just zoom in a bit right here. What I want to do is I wanna have like, equal distance between the icon and and the taxed. So I will just move it slightly to the left, this guy as well and this kind as well. Maybe first, let's align them. So let's aligned them vertically to the center. But let's not forget that we need to align them to the selection at the our report. Just like so. So now how can we make these elements go to the right by, let's say, 10 or 20 pixels? What we could do that in the transform panel we could just add, like, 20 pixels to my X value. But I want to do it in a different way. I will select all these guys and just double click on the selection tool. And this is this how you can activate your move tool And I will just enter 20 for the horizontal movement and just hit, Okay, like So Now I will group all these guys together, and I am using the control or command G if you're on a Mac command and now I can make sure that all these groups are are set are distributed by by certain by certain distance, and we can do that by selecting all of them and making this guy right here the key object. And you can do that simply by clicking on to just once more. And you can see that illustrator is making it look like it has some extra set off from anchor points. And what I'm going to do now is I'm going to simply go to the Align panel right here and you can see that now distributes, Distribute. Spacing is available to us, and I will simply make it like 10 pixels. And it clicked this horizontal distribute bottom just like so. So let's see if that is okay, maybe let's make it 20. Just like so. Oh, not this guy. Let me just do it again. Just like so Now when I zoom in, I can be sure that there is 20 pixels, margin or space between these guys and these guys and these guys and as well between this group, this group and this group just like so. But if you think that maybe these guys are too far away from each other and maybe you want to move them a bit to the left. Well, there is a simple service, a solution for that. All we would need to do is to with the direct selection toe shift click will shift, select all these guys right here, and then double click on the direct selection tool. And since we want to move these guys to the left, we would have to enter a negative value. So I'm just gonna enter minus Stan. And when I hit the tab key, you can see that they move to the left. Yeah. Yeah, well, they moved to the left, and that's what we want. So I'm just gonna click, OK? And last will. Almost The last thing we need to do is to align these guys these two elements together. We want that the button to look nicely. So I'm just going to select both these guys, make sure that the line to selection is on and just aligned them vertically to the center. And I want to align them horizontally to the center as well. They need to be a good group, so I'm just gonna group them. And really, the last thing to do here is to make sure that all these elements all these I comes along these groups and the button are aligned, Teoh will properly are aligned toe in relation to our background. So all we need to do is to select all these guys selector or click on the background again to make this Archy object and click Vertical line center again. And now we can be sure that our and our background will our elements are aligned properly in relation to our background. So there we go. We got our top header created in the next video. We'll continue creating the header and we will at our logo and we will build of the navigation system, so stay tuned. 4. Header and contact info : Okay, so in this video, we are going to start designing our layout. We are going to start with this top part toe petrol. Let's call it like that on. The first thing that I will do is I'm going to create a separate layer for this for this header. So in the layers panel, I'm just gonna old click or optional click. If you're on a Mac on the create new layer button and I am going to name it as Header, I'm gonna click, OK? And what I could do. And the first thing that you might be tempted to do is to create the background, right, Just like we can see in our wire frame create this background. But trust me that if I create this as first that I'm going to have some some glitches, some problems with the with it with typing, because the type tool will automatically turn into area type of tool, and this is something I don't want. So I am going to start with this with these icons right here. Okay, so I'm just gonna turn the wire frame off for a second and from my assets are bored. I am going to choose this. First images zoom in a bit. This first villages, copy all of them at once. Eso thes three. I consult the telephone. Thea, envelope with the email, if you will. And the Facebook. So let me just some back a bit. Remember, tablets copied into your clipboard. Remember to be on the right layer, Heather, in this case, and I am just going to baste them. Like so. Okay, so the 1st 1 is the telephone icon, so I'm going to move it right here. Let me just move this away. And, of course, I need Teoh using the type till create a nice text box, just like so it doesn't have to be too big on I'm just gonna enter some arbitrary numbers, like 00123456789 And of course, the time will be open, sons. And I think I'm gonna leave it as regular. But maybe I will increase the phone size to 14 maybe 13 points, just like so. Okay, Now, let me just move it just a bit up to somewhere here, Okay? So on the next one is my envelope icon, and I'm going to move it somewhere here. And I'm gonna duplicate cologne. It actually, And this telephone number. And I am doing this by holding down the shift and the old or option on a Mac keys together to duplicate and move on my tel, the telephone or the tax books actually to the right. And I am going to enter some e mail address. Let's call it contact at Oops. Trata dot com I really hope that that the Stratton company doesn't exist. No, Like in reality because that they might sue me for some copyright infringement. You know, their lawyers. After all, I really hope it won't exist. Okay, The last one is the Facebook. I come and again, I'm just going to clone it to the right, And I'm simply gonna type in f b dot com slash strut. Okay. Just like some. Okay, we got our icons ready, and we got our our text ready as well. Now, what we have to do is to create Let me just check the button right here, which would say something like free consultation available or whatever you really want. I'm just gonna type in a free consultation. 11 quick one Quick note Here, guys. My design won't be exactly just like my wife frame my wire frame here is just a guideline for me to create my actual designers in the design process. You will see that some things might look better if they're bigger or if they are, like, moved slightly to look to the left or to the right. Some things might be better if they are smaller, and it's up to you as the desire to decide what looks best and what is good for the user in terms of usability. So if something is not exactly as my wife frame, if you see me doing something not exactly as the wire from suggests, well, that's just because I decide to not to do it exactly like that because I simply like maybe I just come up with another idea or something like that. So So let's continue with us with the with the button right here. So I'm just quickly going to create my Maybe I'll just just borrow this text box to the right and I will tape in a free console station consultation just like so. And I think that this, uh this fund should be bolder. It's a bold statement that we are given a free consultation. And of course, I think I'm gonna have to make this just a bit bigger. And maybe the font will be justice just slightly bigger as well. And of course, the bottom should have some kind of a background, right? So I'm just gonna grab the rectangle tool and create a M Create a background just like so. I think this should be fine. And it should have a proper color like this big color. And I will move it slightly to the back once one step backwards, just like so. And I am using to control plus left bracket a shortcut. Okay, so now that we have all these guys ready and waiting for us, so we're actually waiting for the background. So what we can do right now is, um is to give the these guys proper colors, so all these guys will have and nice, Um well, dark. I'm gonna off white light gray color, just like so. And now we can actually create a background, and I think that the background will have will be 1920 pixels in with by, let's say, 100 pixels in height. And, of course I have to move it. I have to align it to the art board, just like so. And it will have, like, really dark background, and it will be sent all the way to the back. Okay. Just like so. Not that. Okay, so, of course now we need to do some proper adjustments. Need to do some nice aligning. Maybe make this. Ah, but just a bit smaller. But this is something we will do in the next video. 5. Let's create logo and nav: okay, before we move on to create in the bottom part of the header, let's add some finishing finishing touches. The first civil what I want to do is I wanna have 20 pixel margin between these groups right here. So I'm gonna just select all these guys. And I am going to click on this the left telephone group once more to make this ah kee object. And in the align panel, I'm going to distribute to these guys horizontally by 20 pixels, just like so, Not what I want to do is I want to select all of these elements and I want to group them because in the in the layers panel or named this group as, ah, it's called contact info. Just so everything is nice and tidy, okay? And maybe let's let's lock this guy these guys. So just so we don't mess them up accidentally, And now we can truly start creating our bottom part of the header, and we will start with our logo. So I'm just gonna copy this guy and remember that we will have to be on the right on the right layer for this. So I'm going to select the header later, and I'm just gonna base my logo somewhere here, and I'm gonna move it to the top and pour it somewhere somewhere. Here, maybe. Let's make it just a bit bigger. Something like this. This should be fine. You can adjust it later if we wish. So and now we'll have to do we have to build a navigation system and we could use our wife from library for this. But in this case, I'm just going to simply with the text box over the textile, create a text box and just type in home. And for for this for this element. I wanted to be droid serif, as we mentioned in the first video, and I wanted to remain bold like So let me just make this textbooks just a bit smaller, okay? And the Web pages that I'm going to create are arbitrary, but they will relate or correspond with the typical Web pages that we might find in a layout in a website like this. So 1st 1 would be hope 2nd 1 would be, Let's say about us, okay? And this guy won't be bold anymore. I wanted to be regular. I want to leave home as both Because I want to indicate that this is this is the active state that I wanna that I want toe portray that I want to present him by making the font bold. And we will make it ah, different to fill color later on. So it's about us. Um, let's say this one will be our maybe practice areas like this. We will have contact allergists. Stick with these with these four for pages And of course, we want to move them to the right. So I will move these guys to the right. Just like so and again in the effect menu. I'm gonna apply outline, object. So now I can I can distribute these guys my line panel. So I'm gonna move there off. Of course, I have this this contact page collect. So it's the key object right now, and I am going to distribute that, Let's say, 20 pixels. Let's see how that looks. That should be fine. I think it will be fine. Okay. And again, we are going to create our background. So let's just check with our wife ring. How big should this being has created? Just a nice. It should be something around 150 so we will do that. So with the rectangle tool selected, I'm just I'm just going to click on Enter 9 24 the with and 150 for the height and the background color will be this oft. Why, off the oft white, this software off off white color and I want to align my bedroom to the art board. I don't want to move it just a bit up, just like so. And of course I want to move it all the way to the back. Maybe. Let's make it why. You know, I think it would be nicer if it's white and my home my home page on my home taxed would be would have this gold gold fell just like so. Okay? And of course, all we need to do is to select all these guys. Let's just select them like this. Make this one at this bedroom or key object, and let's align everything to the center, just like so. And let's quickly see what it looks like. Maybe let's turn the visibility of the group off just like so, and let's see what it looks like this. Okay, I think it starts to look nice. Let me just check if all these phones are its regular regular regular. Okay, it looks fine. That turned these guys back on. Okay, so this is our header, and we created it in the matter off 15 minutes. Something like that is because we are using really professional really and really easy and straightforward techniques that allow us to create really nice looking, nice looking Web layouts. So in the next video, we are going to continue building our layout, and we will build will create this thing's main image and the's the stacks. Overly right here. So see you in the next video. 6. Let's create the Subheader: okay, Before we move on, we need to do some house cleaning first. So I'm going to start with selecting all these navigation elements, like so and I'm gonna group them and in the layers panel, I'm gonna name my group as never like so. And now I will group all these guys again and again group them and in here I'm gonna call it logo and have just like so Okay, now we are done with headers so we can look it and let's see what else up what comes next. So in our wife, and we can see that we got this big image right here, and we got this ornament. Get this rack tangled background that goes all across the site. And we got the text with the bottom down down here. Okay, so let's do that. I think I'm gonna name it as well. My new layer I'm gonna name as a sub header. So I'm just gonna old or option if you're on a Mac, click on the create new Layer icon and I'm gonna call it Sub Header. And I wanted to be below the header, Of course. So the first thing I need to do is I need toe copy this image onto the sub header layer just like so. And of course, I want this image to go all alone across the site. So it needs to be 920 pixels in with, and I'm gonna move it somewhere here. Of course, we can always check if it's yeah, right on this spot. Um, if the acts of value is actually zero, that means that it's, um our image is exactly where it needs to be. But off course, as we concede, this image is way too big and if we check it with a wire, frame it and somewhere here and actually the height of this image according to a wife and should be 700 pixels. So this is what we're gonna do I'm going to create Am I going to get a simple rectangle that's gonna be 9 20 in with and 7 27 100 pixels in height? Because what I want to do now is I want to clip this image. So eater it has the right dimensions. Illustrator, unfortunately, doesn't provide a crop tool, So we need Teoh. We need to do we need to do crop in with the clipping masks and ah, clipping is as easy as selecting both the objects. So the optic that we want to be clipping with and the object that that needs to be clipped and we could go toe object clipping, mask make. But I usually just go with control seven or command seven on a Mac shortcut and just like so, our image is well has the right dimensions. But of course, compositional wise, it doesn't look. It doesn't look nice, right? We don't We don't want these people to be kind of like cut in the middle. So what we can do is weaken just select thes image. And here in the control panel, we can click this icon that says added contents. And now we can add it, our image that is being clipped. But all we really want to do is to simply, with the help of the shift key, uh, just move it up. Just a few, just a few few pixels to something like so and notice That's the stock. Part of the image kind of works like a divider between our header and our sub header, like so so This is perfect. This is what we want to do. So now what we what we want to do is to create our background like we can see in our original this a background ornament rectangle right here and these tax and the bottom here at the bottom, here at the bottom. And I think we will do that in the next video. 7. Let's continue creating the Subheader: OK, in this video we're going to create as promised, we're going to create the background right here. They're going to create this background and text, this text and this button. Okay, so first, I'm going to start with creating Ni Nice rectangle. Of course, we need to be sure that we are on the right on the right layer on layer for this thing's creation is the separator. So I'm just going to click with the round directing with the rectangle toe active anywhere on my art aboard and simply gonna type in 1920 by 2 30 I think that's going to be enough. Something like this I'm gonna position properly. Of course, we can always check if we are if we are. If we position toe the rectangle properly here, if the X value is zero, that means that our rectangle is touching the left edge of the art abort like we want. Okay. Is it Dutch? And yes, it is touching stuck in it. Okay, so off course our rectangle needs to be off proper color, so it's gonna have this kind of a dark, dark Phil, and the stroke is gonna be blue and blue gold. It's gonna gold. I don't know why I said blue, okay? And if we check out the original, the capacity of this of this background is set to 80%. That's what we have to do. So in the control panel, I'm simply gonna click 80 80%. I think I'm gonna lock it so it doesn't s so we don't mess it up or move it or anything like that. So in the object menu, I'm just simply gonna go look and selection, Okay? So far, so good. So all we need to do right now really is to create some text of text box, actually. So with the type told, I'm just going to click and drag like so and type in Well, come And of course, the font. We want to be droid serif, and it needs to be bit bigger. I think that 32 should be fine. And again, I won't want to go to the effect menu, choose path and outline object because they want to. I want to align it properly. So if the align panel I'm gonna make sure that they're aligning my tax to to the our report . So I'm just going to align it to the center like so and move it up somewhere Here. This should be fine. And of course, it xcom Uhlir should be dismayed. The off white color like so. Okay, great. So let maybe zoom in a bit, so you concede better. So all I need to do is simply clone it to the bottom. And I'm doing that by holding down the old G to clone any object illustrator, actually, and I'm gonna type in to stratum and Sums website, and it's gonna be considerably smaller. I think 18 points should be fine. Like so the front is going to be open, sons. And I'm gonna increase the site of the size of the text box to something like, So I'm gonna make it gold and the character panel. I'm going to set it to all caps, just like so let's increase it just a bit more Chow's like so with site, okay. And again, I'm gonna make sure that it's aligned to the center, just like so. And now we won't take a look at the original. We can see that these thes lines of text So you are the most border and see how we can help our actually design wise repetition off the welcome and to start a new and sons website. So really, all we need to do is to select Oldham No, both these guys, and to just clone them to the bottom to something like so. And this will go Maybe, maybe, but more to the bottom. And we're goingto type in. You are the most important, like so And let's increase the size of it again. You are the most important. And this the states will read. I'm seeing weekend help, Just like so. Okay, so when we check with our original, we need Teoh, We need to add this arrow here to the right, which which would indicate that there is something more than that You can click here and of course, we need to add this border. So the easiest way to create this arrow, as we just saw before, is to create a line with the line segment told just like so that I'm going to give it a nice gold stroke just like that. And I'm gonna go to the stroke panel and in the stroke panel, I need to make sure that all my options are visible because now I want to I want to see the option that gives me the chance to change the arrow hats. And from this list, I am simply gonna just maybe arrow 11. This looks fine. This looks all right. And all we need to do right now is to add our border just like so maybe let's make it equal . It's make it to 70 by 15 just like that. And I'm not gonna group the text. And I wrote together because they want to align them, you know, in relation to my to my border. So I'm gonna align these guys just like that and group these guys again. And now what I want to do is I want to make sure that all these all these elements are aligned in relation to the artwork to the center, just like that. And now I'm going to group them again, and I am going to unlock my my background. So I'm gonna go object, unlock all we're going to select this group, select or add to selection my background, and I'm gonna click on it again to make it the key objects. See that in the control panel aligned to key object is active. And I am just going to vertically aligned to the center as well as horizontally. See what it looks like? Yeah, I think it looks nice, don't you think? I think I think it looks really nice. So, uh, in the next video, we're going to create the our services section, so stay tuned. 8. Let's create the Our services section: Okay, So in this video, we are going to create the hour the hour services section. And of course, we are going to start with the creating the proper layer. So again, in the layers panel, I'm just gonna old or option if you're on a Mac, click on the Cretan Layer icon and simply type in our services like so Okay, Okay. So what I need to do right now is I need to add to the heading or the title of the section and the icons and the text boxes. So what I will do is I'm simply gonna with the title selected, I'm just going to create the textbooks just like that, Just like that. I'm gonna type in our serve. It says. And of course, I want to fund to be droid serif. I wanted to be 32 points, so it matches the size of the welcome and that you are the most important texts, and I don't want it to be all caps. I'm gonna deactivate that. And again, this guy is going to be I'm gonna outline a this object. I'm gonna outlined this text and alignment to to the middle, to the center of the art board. And what I want to do, by the way, is I want to make sure that this guy is, um Well, the top margin off this guy is set to 50 pixels. Then we can do that really easily in the transform panel. So in the Y position, I'm simply gonna type in plus plus 50. So I'm so I can move my move, my text buying 50 50 pixels down. And now I'm going to create the The Underline. So I'm just going create nice line like that. And I think it's now for it's time for the proper colors. So our services headline is gonna have this nice, dark gray color. As for the Phil and this guy, this underline is gonna have the same car, but for the stroke, just like that. Okay, so far, so good. Okay, What we need to do right now is we need to create these. That's a bit too big. OK, so we need to create thes icons along with these text boxes. So in this video, we're going to create the first line of these text boxes. So what we have to do is we need to simply copy like this. I can Let's say that. I think that yeah, commercial real estate is this shop icon right here. So I'm gonna copy to my clipboard, and I need to be sure that I'm gonna be pasted onto my our services layer. So I'm just gonna move right here, make sure that this layer is active and just based it like that. And I want this liken to be I'm gonna constraint proportions. And I want these icons to be 28 pixels high or tall. I'm gonna move it to the left. So it aligns with my with my with my column, like, so I'm gonna give it nice. Ah, nice gold collar. And with my text oa type tool, I'm simply going to create a text box and type in. I think it was commercial real estate. Yes, commercial oh, type tool. And it's typing commercial. Real has stayed. I can see it, so I'm not sure you from typing incorrectly. Almost. I almost got it Commercial real estate, okay, was to change the frontal open sons, and I think I'm gonna do it. I'm gonna make it semi bold and maybe make it just a bit smaller to 18 points. Okay? And I hope you don't mind if I simply borrow this line off Laura Ipsen. I don't think you want to see me. You want to see me grabbing Lauren Gibson and creating creating tax boxes? So on some fourth and changing the law removes into some something else, Or maybe sound some different La Flora MIPs and peace. So I'm just gonna grab it, grab that text, create a textbooks, type it in your paste it in rather. And I'm just gonna make it just a bit bigger, like that and off course. And of course, I want us to be I want us to be our dark color are dark, dark gray I'm gonna make just a bit bigger, But what I want to do is I want to change the line height of the this paragraph line height or for you desktop. The desktop designers test of publishers. It would be the leading. So the character panel, I'm going to change it. But typically what I do is I set the line hide, too. What the font sizes and add six pixels to worth that that rule that generally proves to be improved to be fine. So if I type in 14 plus six is gonna be 20? Yes. My math was was my calculation was little right. So now the line hide is bigger, And now it looks much better, at least to me. I hope we lose better to you as well. Let me just move it. Maybe just, um, it up, but not too much. And all we need to do right now is to select all these guys and duplicate them to the right and then duplicated again by heading Controller Command Dean. And the second, the second tax box would be residential reader real estates. I'm just gonna change this guy resident a show real estate. And let's give it a nice given. Eyes farmed, not fund. And I can't be nice. I can I'm gonna grab this home right here. Copy to my clipboard. Make sure that we are on the right on the right layer. Let's make sure it's active, and I'm just gonna baste it in, like like this. I'm gonna make it make gold again and make sure that it's Ah, it's 28 pixels high. Okay, I'm gonna move it. Moving right here. Let's zoom in a bit. I'm gonna position properly. I'm gonna cut it again. Delete this guy and faced it. Based my home, like like this. So the last guy here was, I think was a victim. A problem. Tenant? Yes. A victim. A problem town. That's Ah, that's an important issue. A victim of problem tenant. A victim, a problem tenant. Just like that. And the Aiken for this, for this text box is this exclamation point. So again, I'm going to copy to make sure I'm on the right. Right layer. Let me go back here. I'm just gonna base that in and in a transformation panel. I want to make sure it's 28 pixels high and that it has proper proper Phil collar. And I am going to move it, move it Here I get. I just wanted cut that out. Basic back in and not a bit until it looks fine. I think it's gonna look fine. Let me see. Let me check that. Yeah, it all looks fine. So in the next video, we'll we are going to take care off the bottom on bottom line off our of our text boxes. So stay tuned 9. Let's finish the Our Service setion: Okay, so in this video, we are going to take a take care of the second line of our text boxes. So it's really as easy as selecting all these guys and simply cloning them down to something like So it should be okay. And let's let's continue our the creation of our services with the selling a residential properties away. So let's type that in selling a residential proper team. Did I spell it right, almost selling their residential property? And let's change the icon. I think it was the Speaker Bank. I come again. Let's make sure that you are on the right on the right to layer. Let's base that in. Let's put it here. Let's make sure it's 28 pixels high, just like so that it has a proper fill color that's moving just a bit up somewhere here. Okay, I'm going again. Got that? Delete this and based it back in really smoke just a bit up so the next one would be buying a mobile home. So let's type that in buying a mobile home and the Aiken for that is this, uh, this trailer? I think so. Let's copy that it's based that in space that in somewhere here again, let's make sure it's 28 pixels high. Let's make sure it has the proper fill color and let's move it where it needs to go, which is somewhere here. Okay, lets I can lead this guy and face that back in front, and the last one is roommate agreements. So let's type that in room night and agreements and the Aiken for this one ISS I will live yet it's these guys and the plus sign. So let's again based in on the proper layer. Make sure it's 28 pixels high like, so that it has the proper proper color. Let's move it up and let's let's align is properly again. Cut, delete and based in front, Just like so. Okay, so let's take a quick look at how our top at how are our design is starting to look. Maybe let's get rid off the get rid off the grid just like that, okay? And what do you think? I think it starts to look nice. So in the next year, in the next video, we're going to take care off this section right here. This free consultations, action. So if you're interested to keep watching 10. Let's build the Free consultation section: in this year, we are going to create a free consultation section. And if we take a look at the original, we can see that it it is divided into two parts, Like on the left. We got a big image that would go from the left edge off the browser to the middle of it. And on the right, we got a we got a background with some tax and a button on the bottom. So what I want to do is I want to create a rectangle that I would split a split into two halves and I wanted to be I wanted to have a 50 pixel margin on the bar on the top. So, uh, if we turn the wire frame on, we can see how big our rectangle should be, how tall it should be. So it's supposed to be sound like 5 70 pixels. So that's what we're gonna dio. But of course, we need to start by crew with creating the new layer. So I'm going to name it for wreak on, So station, Just like so. Okay, so now let's create our our rectangle, and I'm gonna make it dark, dark, great So I'm gonna click somewhere here on the art abort and type in 1925 5 70 And I I really want to be sure that it z right it's snapping to the edge of my artwork. So again, I think I'm just gonna go to the transform transform panel in just type in zero. And as I mentioned before, I want to be sure that my that this rectangle or this background, this whole section actually has a 50 pixel margin on the top. So I'm just gonna move it slightly up somewhere here and in the and in the transform panel . I am simply going to type in plus 50 just like that, To be sure that that this margin is exactly the same as this margin in the bottom right here. Okay, so far, so good. Now, what we could do is we could simply divide a rectangle by simply making this one smaller, making sure it's 1999 60 and then just clothing into the right. But I want to show you a different technique. It's a technique that we used to create a the 12 column grid. So again, I'm gonna go to the object menu bath and split into grit. And I want our just two columns just like so. And now I can simply copy my image from our assets. So I'm going to copy it, make sure I'm on the right on the right. Uh, layer, I'm just gonna base it here, and I'm gonna I'm gonna move it. I really want to be sure that it's airlines nicely here. Of course we could. We could always copy the values of the transfer from the transform panel, the values of this rectangle to make sure that it aligns properly. But I want to keep this video shortest possible. So I won't bore you with too much clicking and copying and pasting. So I just I just wanted to know that this image has to start from this top left corner. So what I'm gonna do is I'm simply gonna drag it by holding down the shift again, As you can see, because I prepared to this, uh, this image before Well, it fits nicely, but if it was, like, bigger or maybe smaller or the proportions weren't as perfect as in the case of this image , of course we would just have to use the clipping mask as we did with the main image and just play around with the image. So all that's left to do now is to create the text on the right. So we need to create this free consultation, text things, tagline, the text and the button. And I think we're gonna do that in the next video. 11. Let's finish the setion : Okay, so here we are in the next video. And as promised, we're going to take care of the text right now. So let's just create a text box right here. And I'm just gonna type in for re consultation just like that. And, of course, is gonna be drawing Serif and it's gonna be 32 points and I don't want a big I wanted to be regular, but I'm gonna increase the size of my my tax box. And again, I am going to apply the outline object effect and make this make this formed like dark. Great. Just like that. That move it, that come looking, move it up. And I think I'm going to position at position somewhere here. So in my transform panel, I can add to Let's make it 9 16 Let's make it equal. I can add, say, like, 25 or 30 pixels do it's ah, it's horizontal position. So it moves by 30 pixels to the right, and again, I'm going to I hope you don't mind. I'm just going to borrow all this text so we don't have to type it, type it again, and I'm just gonna move this guy down to somewhere here, and I'm just gonna pay what I just copied. Of course, I need to increase the size off my my text box. Maybe Chris it to the right as well. Just like that. And and again, I just I will just copy this text as well, cloning down like, so copy based. And there we go. Of course, all we need to do right now is to just create the bottom. There's request, a free consultation bottom. So let's do that now. So I'm just going to create a text box, stay pinned, request a free common Seoul station and let's make it. Let's make it off white. Let's make it open sums and let's make it semi bold, maybe, And let's in decrease the phone size to 18 points like those. Let's maybe make let's maybe portion push it of it down. Something like that. I'll just make this textbook smaller again. Apply, outline, object and all we need to do really is to just create a creative background for this bottom . I will make it. I will make it pink. Bring it behind my request free consultation like that and I cannot align these guys properly, Okay? And I will group, um, and let's see what it looks like. Okay, so now I will just group all these guys together. Maybe. Let's bring it just a bit down. I must should be fine. It was fine. Okay, So I'm gonna group all these guys again and, uh, at my selection at the Bagram to my selection and make it a key object. So now I can align this group in relation t to the background and make it make it appear in the center. Okay, so let's take a look at what it looks right now. And it looks like this starts to look really, really nice. Okay, so so OK, so that was it for this section in the next. In the next section, in the next video, we're going to take care off this our team section off my of our layout, so stay tuned 12. Let's build the Our team section: in this video, we are going to take care off the our team section just as we can see in the original. So we're gonna build build this section with the heading with the images with the contact, me buttons and etcetera. Okay, So I think what? We're gonna have to start with these off course with the new quote creating the new layer. So in the layers panel, I'm just gonna click alter option on the Mac on the new layer. I come and I'm just gonna name it as our team, just like so. And what we could do is we could simply copy the our services heading as well as thes elements right here so that the elements of the 1st 1st X spoke. So I'm just gonna control see your command on a Mac to copy them on to my clipboard, and I'm gonna go to the right Teoh right later and simply I am going to base this just like that. And of course, I want to make sure that these guys are, but that they have the margin of 50 per 50 pixels on top, so I'm gonna just type in plus 15 that not the export value we want. We want the Y value off course. So last 50. And if we turn our grid back on, I want to move this guy all the way to the right and OK, so if we check with our original, we got the image right here and the image height when the image height and width is to 70 pixels and weaken. Checked it with our wire frame as well. So let's see if that's to 17. Yeah, that's going to 70. Okay, so first thing I'm doing, what I'm gonna do is I'm gonna move these guys to the ride. I think I'm gonna keep them. I'm going to save them. But I'm gonna delete this icon. And of course, what we could do is we could simply take our image. One of the images, which is the this one. So I'm just going to copy it, moved to my our team layer and simply click based and here in my transform panel on something, going tape in to 74 with and height, and I'm going to move it. So we're here just like that and what we have to do right now, is we have to type in the name of the layer almost there on the lawyer and went into at this kind of a border to the bottom and some tax and a contact me button. Okay, so that's fairly simple. I am simply going to change the typeface to Droid Saref. Let me move this victor a bit to the bottom, just like that, And I'm going to tow to type in name of this guy, and I believe it was Michael Stratton. Let me expand this one. It's not like that. Let me just change the front size Michael Stratton. Uh, 40. Might be too big. Let's go with 28. 20. Teach you. Fine. Now, let's let's again just borrow some text from here. And of course, we still need to We still need to add a day am. Well, this kind of the border sound simply gonna duplicate this guy down. I'm a good move. It gonna move somewhere here and make it smaller. I think that this should be fine. Okay. I'm gonna make sure that he has one pixel stroke like that. And this phone size, let's make it 16 points, and I'm gonna make sure that my line Heidi's is okay. So 16 plus six, That's my general rule to create a line height. So I'm gonna move this guy somewhere here. And since I want this whole text box to span across 123456 columns. I'm gonna bring this. Brent is a bit to the left and expanded to the bottom like that. Okay, so all all we need to do right now is to simply click and type in, um, calm attacked just like that. Make sure that it's open, sons, and I'm gonna leave it as bold. That much is German were real quick, so you can see everything better just like that. Contact me. And I think I'm gonna so leave it a month. Maybe not. Maybe let's make 14 pixels, 14 points. And I'm simply going to create a nice rectangle until it looks something like that. And it needs to be. Of course, you have the right Phil Color used to be sent to the back, and I'm gonna make this thing this guy that off white collar again. I want to make sure that this is through this text. This contact attacks is outlying, so I'm gonna go to path Outline. Object? No, I can. No, I can, of course. Make sure that they like the selection options. Check and Aiken line them properly. Just like that. That is owned by count. Let me do something. Let me do some quick adjustments. Maybe bring this guy at the top. This guy a bit as well. Just like that. Maybe just a bit more. And let me turn the grid off. Okay? I think that I am going to make it just in regular droid serif like that and OK, yeah. We got the first text will box created. So all we have to do right now is to simply copy or cologne this this whole part here to the right, and then clone those guys to bottom. But I think we're gonna do it in the next video. 13. Let's finish the section: OK, in this video, we're going to continue creating our team section. And of course, I didn't notice that that I didn't change this this text right here. So I'm gonna do that now and make sure it's aligned to the center of the yard. Work like so. Okay. And of course, what we have to do right now is to simply cologne all this box to their this whole box to the right. I'm gonna turn my grid back on. I want to be sure that snaps nicely to my column grid. So I'm gonna move it just like that. And now I want to clone these boat, both these guys to the bottom. But I want to be sure that the distance between the first line and the second line would be exactly 50 pixels. So how can we do that? We could just clone them to the bottom and snap them like so and then go to our control panel and for the wild value, just like enter plus 50 like so all we could do it differently on a show you another technique of doing that. We need to bear in mind that the height of this section is to 70 pixels, just like a Jessica, as we can see here. So what we could do right now is we could simply double click on the selection tool like so , and we could move these guys by 2 70 pixels. So this is the height off this part. Let's call it Let's call the part and we would add 50 pixels to our transformation. And of course we were. We wouldn't click. OK, but it would click copy like so Okay, so now what we could do is off course. We could simply copy all these images back here and pays them like so but an illustrator. You can do this. Come laborious process a bit quicker and what I usually like to do with the scenarios like this, it's I just simply click on image. And here in the control panel, you can see the name of this image. And as you can see, it's under light and it's written in blue and being displayed in blue. So it means that it's a hyperlink. So when I click this, I am, I can simply hit real ink, and I am in my my folder. What I keep where I keep my images. So I'm just gonna change this, change this image like so I'm just going to click place and I'm gonna change this guy as well. Let me just make us Jane. Change this this picture to this picture, and this guy will be this this girl like so And all we need to do is to simply change the names. So the other. So the second guy was Fred Stratton. Fred Stratton. This girl's name was Ruth. Abigail. So it's gonna be a roof, Abigail. Like so. And this girl was, I believe, Mary in the Masters. Okay, So we not only need to do right now is to simply create a nice background. So I'm just gonna create one. I'm gonna make sure that snaps with my images, because right now I am simply going to make it at 50 pixels to its height. So I'm gonna make it 7 40 plus 50. Just like that. I'm gonna make it white, and I'm going to move it all the way to the back. Okay? And there we go. We got our team, our team section created. So let's quickly take a look at what it looks right now. Let me just turn off these guys like So? So we got our top header. Our headed with our image with our with our navigation, our main image, the text right here. Our service is free consultation and our team ready. So in the next video, we're going to take care off the testimonial section. So it's going this section and later we're gonna take care of the footer as well. So if you're interested, keep watching. 14. Let's build the Testimonials section: in this video, we are going to take care off this testimonial section, so we're going to create the background for it. These two pieces of testimonials and of course, these arrows here in the top right corner. And we already know how to create these guys. So that's gonna be easy. And later we're gonna create this big, bold footer and yeah, let's get to work. Okay, so the first thing I'm gonna do, of course, is I'm going to create a proper layer for my from a testimonial section. So in the layers panel, I'm just going to quickly create a new layer on the name it testimonials, just like so. And I think this time I'm going to start with the with the main background. So let me just quickly check on my wife from how tall it should be. That just mattered. This guy quickly. 400 pixels. Okay, so it's gonna 400 pixels. So with my with my rectangle toe tool selected on something, gonna click anywhere on the art of board and just type in 1920 by 400. That's okay. I'm gonna move it So it snaps nicely with my my art board. And of course, we can always make sure it snaps in its position by just typing zero for the X McCord in it . Just like so. And of course, I want this guy to be this. I wanted to have this, that this dark Phil And just so it doesn't doesn't block anything, so it doesn't, so we don't mess it up. Actually, let's let's lock it. So in the object menu, I'm gonna go look and selection. Okay, so right now, let's take care of the testimonials, testimonial pieces, and we are going to start with the backgrounds off them. So what I want is I want one testimonial background. This guy things great guy right here to span across six columns. So let's do that. Oh, and I wanted to be around 1 15 maybe to 1 75 pixels toll. So let's create one that is 1 570 pixels wide. Because it's we divide. Because if we divide 11 17 which is the width of our Margaret by two and minus subtract very pixels from that, this is what we're going to get. We're gonna get 5 70 pixels, so I'm gonna I'm gonna just release my mouse. And for the height, I think I'm gonna go with, uh, 1 50 Should be fine. And I'm gonna move to the left just like that. So let's move this going all the way up. Alice did the same with the other guy as well. Yeah, Yes, I forgot about that one. Okay, let me just let me just aligned these guys nicely in relation to each other. Of course, we're going to align everything in relation to our background in just a second. But for now, let's take her off the take care of the text. So of course, the first thing I'm gonna do is I'm just gonna with the taxed toe select. The country's going to create a nice text box and say, I'm type in. Greg says just like that. Of course I wanted to be open sons, and I'm gonna make it maybe 14 points, a B 16 points and he's gonna have this nice this nice Phil, Let's bring it up. Let me see what it looks like. And let's make it semi bold, at least maybe six. And it's not enough to make it 18 just like that. And now let's go. Let's let's cloning to the right and just type in, Anna says. Just like so. And of course, our Gragg, Greg Walls, Greg Johnson, family business owner. So let's just clone it down. So it's Greg Johnson just like that. And he's a family business owner. So let's type that in. Family business owner. OK, And of course, this has to be written in regular and it should be a bit smaller. Maybe in the 14 points would be fine. Family, business owner. Finally, business owner. Just like so. Okay, so all that's left to do is to create is to create the text inside and create the arrows on top. But I think we're going to do that in the next video. 15. Let's finish the Testimonials section: Okay, So in this video, let's finish up or testimonial section. And of course, we have to do. What we have to do is to create this tax right here. So let me just quickly borrow this guy like so and created text box just like that. In course. Make it day, uh, make it the right feel color. And let me just move it up just like that. Okay? So now it's a line. Everything nicely. But of course we want to align that these guys in relation to the text itself, not the text boxes. So we need to make sure that all these guys are outlined. So we're gonna go to the Effect menu path, outline, object just like that. And let's select all these all these guys. So the text on the name of the person, his testimonial, his name and last name, and he's title or his occupation and its click on the background once more to make it them to make this Archy object. And let's align everything to the center just like that. And now what we could do is we could simply select these guys and just move them to the right like that and let's type in. Um, let's type been Ana Smith and she will be a CFO off arrival. Private Company Limited. Why not? Okay, so let's align these guys as well. Let's make sure that all of them are outlined. I'm not sure if this guy's outline now it is so it's selector. Select all these guys again make make our background the key object and align them to the center. And of course, we have to align our our testimonial in relation to our background. So let's do that. So it's allying these guns that this guy as well, So we're going to the same with the left one. Like so and now we can be sure that all these guys are nicely aligned. What we want to do now is we want to align all these pieces of testimonials in relation to our background. So what we have to do is we have to group the left testimonial. So I'm gonna just get control, G. And I'm going to do the same with the right testimonial, just like so. And of course, I need toe unlocked. Unlock our our backgrounds. I'm gonna go unlock Oh, select the left and the right testimonial ad my background to the selection. Click on, click on it again. But don't shift. Click on because you were diesel Diesel acted. Just click on it. And our background is Toe is Our eyes are key Object right now and let's align everything vertically like that. And now it looks beautiful. Of course, the last thing to do is to create our arrow. So let me just zoom really, really closely right here. Okay? So of course I'm going to start with that with a nice little arrow just like that. So with the line told selected, I'm gonna create a creator line. I think I'm gonna make it. Make it 20 pixels in with just like that, and it needs to have a nice gold stroke and in a stroke menu. I'm gonna give it a nice arrow hat, which will be this one. Okay. Looking nice looking fine. Looking good and with the rectangle till I'm simply going to create a square like so And now let's alive them in relation, of course, to each other. So, in relation to this election, let's group it. And now I'm just going to simply simply reflect these guys. So I'm activating the reflector with the by pressing the okay on the keyboard and then enter or return. If you're on a Mac and I'm going to copy everything, move these guys to the right and now make them a group. Click on my this right testimonial on bullshit. Click at them to the selection and click on it again to make it a key object. And the line my arrows. I don't think this guy was and they were properly group. So again, select all of these guys. Click on this guy again on my right testimonial horror horizontally aligned everything to the right to make sure that my arrows are nicely aligned as well. And maybe let's in them just a bit. In fact, maybe let's bring them all the way here. Let me see what it looks like. I think it's gonna be fine. It looks like it looks, looks nice and properly aligned, properly balanced. Okay, so that was it for the testimonials testimonial section in the next video, we're going to take care off the footer off this footer. So if that's something that you're interested, stay tuned 16. Let's create the Footer: in this video, we're going to take care of the the last element of our layout, which is which is the footer. So it's the quickly Take a look at what? Actually we have here. So we got the logo to left. We got some quick about us and we get some social media icons. Let me just zoom in real quick and get some social media icons. We got the corporate information. We get the navigation links, practice areas, which is our services, actually, and a contact form on the right. So Lancer So let's go. Let's do that. Okay, So as always, let's start with the proper with the proper layers in the layers panel. Let's create a new layer and name and footer, and I think I'm gonna start with the background. So with the rectangle tools tool selected, I'm just gonna create a nice background, just like so that would span across the whole whole footer area, and I'm gonna lock it. So I'm gonna go to object lock selection and let me start with the with the logo. So let me just quickly grab it, grab it from the from my assets. Let me go back and let me make sure that I'm on the right layer for this one. So I want to be on the food or layer. I'm just gonna based that in, and I think I'm gonna use my grid. Teoh, check how how big it should be. Yes, I think I think I wanted to be a wall to span across two columns. Gonna just make it bigger like that. I'm gonna move it up. I would move it up, and I'm gonna get an agitator against the edge of the off the background, actually off my whole footer area because I want to be sure that it moves. I want to move it by 50 pixels, 50 pixels down. So I just click on any of the selection tools and just based will clicking 50 pixel for the vertical movement and just click OK, like that? Look, it's all next stop, as I can recall, was some about us quick about us info. So this time I'm just gonna grab this text right here and make sure I'm on the right later again, and I'm gonna create some testing and sort some quick, some quick about us down here. Of course, I don't want it to be written in Italic on and I want to align it to the left. Let me move it quickly up. Like so. And this time I think I want to move it by toe. 20 on B 25 pixels. 25 pixels. Like so living. Bring this up. But he's a man, so you can see the better. So this is what it looks right now. Of course, I don't need the quotation marks. Okay, so not what we have to do. It is. We have to let me just check that. We have to wait. We have to paste in these things. Social media. I comes. So that's what we're gonna do right now. So let me Gramp my social media. So it's gonna be Facebook, so it's gonna be YouTube. So it's gonna be Google Plus and Twitter. That's whole Yeah, that's all that's enough. That's that's enough of social media to my days to tell you the truth, just on them. I'm gonna baste them right here. Off course. I need to align them nicely and move them to the right. To the left. I'm sorry. The other right okay. And of course, all all of these guys will have this nice fill color, and they'll let me just let me just make my twitter Twitter. I come on my key object and in the line panel. I want to make sure make sure that much all options are visible. And here in the distribute space in armed, just gonna enter, Let's see, 16 points. I think 16 points should be fine. I'm gonna make these guys group just like that. I'm going to group them and I'm gonna move them up again and moved them by 25 pixels as well. So it just toe indicate that what my hover state would look like. So what my what a user would see if he or she hovered over with here, his or her mouth and over one of the these icons. I'm just gonna change the film off the my my twitter Twitter icon to this gold color. So if someone hovers over my twitter well, any any I can actually, I wanted to be to be displayed in this cold gold color. Okay, So the last thing to do right now is to simply create the copyright information. So really, all we would have to do is I guess we could even borrow this text box. Of course, we don't need all these guys, so I'm just gonna type in a strap on, um, and sons like so And of course, I need some date right here. So it would be 2015. And what we need is the actual copyright symbol, right? So what we could do is we could copy some some icon ah, basted in. But luckily, illustrator offers something called the Cliffs. And each fund has has its own the glitz, and we can access them by going to the type menu and cliffs. And here we can find all the older characters available to the front. And what I want from what I want to find in this fund is, of course, the copyright information which is down here and all we would all we would need to do is to simply double click on it to get our copyright information. So in the next video, we're going to continue this understanding. We're going to continue building our footer, so stay tuned. If you're interested 17. Footer continued: before we move on. Guys, I wanted to show you a quick little away on how to work with your with your 12 column grid by not actually seen it. What I mean by that is let's say that you're like me and you want to work against a background against your final color because you want to prove the colors you wanna. You wanna see what everything is going to eventually look like You want to get to feel of the design and you don't want to see your 12 column grid and you don't wanna work like you don't want to design elements against this. This this kind of a heartless, inhumane, inhumane grid. So what you could do is we could do one little thing. One little trick Before we do that. Let me just quickly go back to our our original design. And let's notice that in here we got 1234 Seyoum, major columns, big columns or big parts. That, and each of these columns spans across three columns. So this guy spends across three columns, as you can see right here. So what we what we could do right here without with actually, our our background being always on, but maybe a locked I'll just click lock it. We could simply grab the rectangle tool and with the fact in mind that our that three columns that the width of the three columns is ah, 270 pixels. Let me just make it just a big, big, bigger maybe something like that. But we could do right now is we could mark without rectangles the with of our columns so it could easily establish or see what kind of what with we have for each of our column toe working or to work with. So let me just make you maybe make it Ah, different color just real quick. So we have a We have a rectangle like this one, and we wanna have two more to the right. So how can we do that? Well, that's really simple. Or we need to do is to just grab the move tool or activate the move tool. And since our wouldn't want to move vertically, of course. And it's since our rectangle is 2 to 17 with, and we know that the gutter between our columns is 30 pixels. So we need to add 30 pixels. And when we had copy, we got another rectangular, like so And the other one just like that. Okay, Before I take it one level up one level, I want to make sure that all my all my rectangles were actually positioned on the guides layers. I'm gonna unlock it, so I'm gonna base it again. And what I want to do right now is I want to go to the View menu guides and I wanna make guides. Of course, I need to make sure that they are on. And as you can see, I got my guides created just like so. And each of these rectangles is no marking the with off space. I want to populate with content right now. So now I know how how wide my navigation can be I can know how wide my practice areas can be. And I know how wide can my contact in contact box or contact in a contact form can be looking for the next video. We are going Teoh, create the navigation and the practice areas and the contact contact box as well. So stay tuned 18. Footer continued: with our custom custom guides created. Let's now move our project forward. So first thing, I'm gonna do some going to create a simple text box and I'm gonna type in and have the K shown just like that. Let me just bring it a big town. I'm gonna position that somewhere here, this fine, and be a bit to the bottom. Okay, So what do you think? What is the easiest way to create the navigation right now? I think that I wouldn't even go to the effect manual, distort and transform, transform, and then dynamically created these guys because all we could do is to simply drag this guy down. And since we want to have four navigation items in total in the move till I'm just gonna move this guy, let's see 25 25 be fine. I guess I'm gonna duplicate it three times in total. So we have for navigation elements like this one like these ones, and I think I'm gonna make them just a bit smaller. 14 importance should be fine. So my first, um, immune menu item was home. I believe the next one waas about us that it waas practice areas and contact us. Okay. So far, so good. It looks really nice. Okay, So what we could do to create practice areas, this this part like, right here? Because we could simply clone all these guys to the right. Just, like so, type in practice areas, areas just like that, and simply populate all these guys with the proper with the proper or practice areas information. But I don't really think you want me to You You want to see me dual that. So I think I'm gonna leave it up to you. I think I will let you know that you build this one and by yourself. So what? I am going to move. Move to That's what I am going to move to, um, Is this contact box right here and again? All we could do is to simply cologne. I think it could have been a clone. These this guy as well, because when we will do right now is we're simply gonna borrow, borrow some text from this guy here, then just enter it like this one. Looked like this, um does should be fine. Make it 14 decrees. Uh, light high 20. Just like we usually do. Okay. And now let's create create the contact form contact from elements. So all we have to do is to just create a nice rectangle and maybe that close to the bottom , just like that, They should be fine. And the last thing to do is to certainly create a button. So I would move this guy down, make it a bit smaller, just like so. Of course, give them proper color. So proper Phil colors. Well, this color will be a bit more appropriate. And for the button, I think I'm just gonna type in. I think I'm just gonna cologne this guy down here and type in submit, like so buttons are usually are usually bowled, so I'm gonna make it bold, but maybe 14 points. I wanted to be this this little Not that this nice off white collar. And, of course, put it somewhere into center. Just move this one guy back, okay? And of course, this this bottom has to have this gold color as it is in the original. And yeah, there we go. Yeah, it looks nice. I must say it looks nice. Of course. What we would have to do To finish this whole thing's hole of footer off is to simply maybe make this guy a bit bigger. So we have some more room to breathe for our for submit button. And let me just make our our, um, background a bit bigger like that. Okay. And there we go. Of course, we could always just make sure that all these guys aligned properly. And this is something this is something we should do. And but, of course, it's something that you already know that you should do. So I am pretty sure that you're going to do You'll be able to do it by yourself. Okay, so let's see what our designer looks like. Let's take a look at the final at the final of fact, let me just go back to the top. So yeah, so let's enjoy the view. I hope you like this tutorial. Like, I hope you like this. Uh, this design, I hope you like, like this layout. And I really do hope you learned a thing or two. As always. If you have any questions or comments, dispose them in the discussion board or just message me, I will be most happy to answer them. And in the next video, we're going to take a look at one more little of thin on how to navigate your document, especially when it is when it is so, so, so big, so elaborate, so to speak, So stay tuned. 19. Let's finish the footer: when your design is Ah is ready, but you still want to make some adjustments to it, and you probably would have to do a lot off clicking and dragging to move from one part of your design to another part of the design. But that's a bit laborious and not really professional. I mean, you can make your life so much easier with something that is called custom views. Uh, let's assume that you're working on something, something small in this part off this folder. So instead of just going like control or command zero and then maybe zooming around your hat because you want to check something with with your With your header, you could use custom views. Custom views let you jump from one part of your document view to two other document view. So let's say that you'll be working a lot on your header and you want to see it like this. So what you could do is you could go to the View menu and from the new view option, just click New view and simply type in. Let's say, has her like so And let's say that maybe you want you want to focus Ah, our services section and you want to see it like this. So again from the new view, just go on, go ahead and name it as our services like so. And let's say that I want to see my free consultation and our team sections altogether. So I would just zoom on them just like so and would create a new view and call it our team . For instance, I don't want to see my testimonials and my foot together. So I would zoom on these guys from the view menu, choose new view and type in for just like so. So now that said that we are working on this part of the footer. But we quickly want to jump to our hat because you want to check something all or we wouldn't need to do is just go to view. And you can see the list of our views down here so we could choose like the header. And there we go and then say we want to jump to one foot again. He was there a footer. So maybe you want to jump to our team. There is our team, and you can use you can create costume views with ease, and they really make your life. Make your left, make it work your your design and it's so much easier. And of course, if you are not, if you if you haven't had enough off shortcuts because I know I surely no, I haven't. We could also assign custom shortcuts to our views. So let's say that I want to assign a custom shortcut tomb our service section. Let let let's assign a customer view to that. So I'll go to the edit keyboard shortcuts and I'll choose menu commands. And from the View menu, I would choose Custom View number two. It's not gonna have your your your chosen, the names. It's gonna have custom view one through one through 10. So let's say I want to give this a shortcut of control Control mine just just because I'm just gonna go OK, Yes. I want to override my set and say I am working on this part of my of my navigation and I want to quickly jump to our services. I'm just gonna go control nine, and right now I am on our services section. So this is how you can you can work with custom views. I I really do do think they worker that they make it work so much faster. And they are really, really fun to use and really useful. So in the next video, we're going to sum up what we've learned so far, so stay tuned. 20. Conclusion: so we've made it. We've designed our layout in Illustrator. I hope you will learn a lot, but most of all that you've had fun that you enjoyed the design process so is briefly sum up what we've learned in the course. First of all, we created the stop header with the contact info and this button right here would then we've added the navigation system and the logo. After that, we added this big main image and some text over it that we've created the our services section along with our icons and some text boxes. Then we created the free consultation section where they with the image and left and the text on the right, along with the bottom. And when we created the our team section, we learned Teoh how to exchange the images in Illustrator. And then we created the testimony, A list section and the footer. We've also learned how to create custom guides and then we learn how to create a customer views. So I hope you had fun. I hope you enjoyed the course. If you have any questions regarding the course, feel free to post the discussion or message me privately and I hope that you're eager for so Manu Web Web Laos goes More courses are still to come and ah, yeah, have a nice design.