Freelancing A-Z: #5 How To Design A Responsive Website in Illustrator | Dawid Tuminski | Skillshare

Freelancing A-Z: #5 How To Design A Responsive Website in Illustrator

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (1h 36m)
    • 1. Freelancing : How To Design A Responsive Website Promo Video

      1:03
    • 2. Freelance 1 Introduction To The Design

      4:27
    • 3. Freelancer 2 How To add multiple elements with one click

      6:33
    • 4. 3 How To Create The Logo And Navigation Sections

      6:14
    • 5. 4 How To Align The Navigation

      5:01
    • 6. 5 How To Create The Content Container

      4:07
    • 7. 6 How To Add Text Containers To The Sidebar

      4:44
    • 8. 7 How To Add The Text To The Sidebar

      5:32
    • 9. 8 How To Finish The Sidebar

      2:04
    • 10. 9 How To Create The Featured Image

      2:42
    • 11. 10 How To Add The Blog Post Excerpt

      3:13
    • 12. 11 How To Add The Second Blog Post

      2:45
    • 13. 12 How To Add The Footer

      5:07
    • 14. 13 How To Add The Subpage Elements

      2:57
    • 15. 14 How To Create The Content Placeholders

      2:33
    • 16. 15 How To Add The Main Image

      2:08
    • 17. 16 How To Add The Author Info

      3:11
    • 18. 17 How To Add The Shop Info

      3:13
    • 19. 18 How To Add The Social Media Icons

      3:47
    • 20. 19 Let's Understand The Responsive Design Part

      1:25
    • 21. 20 Let's Add The Logo and The Nav

      3:05
    • 22. 21 How To Add The First Blog Post

      3:34
    • 23. 22 How To Add The Second Blog Post

      2:32
    • 24. 23 How To Add The Footer

      2:07
    • 25. 24 How To Create The Hamburger menu

      5:31
    • 26. 25 How To Add The Smartphone Blog Posts

      3:25
    • 27. 26 How To Finish The Smartphone Design

      2:57

About This Class

"Very interesting and helpful."

Welcome to the fifth part of the Freelancing A-Z course: How to design a responsive website.

In this class we are going to complement our freelance  project with a website design and we will do that in Adobe Illustrator.

In the process you will learn

  • How to design a clean landing page and a sample subpage
  • How to use Adobe Illustrator’s little known techniques to make your web design process faster and more effective
  • And also How to design a responsive version of the design: we will simulate the tablet and a smartphone experience and you’ll be amazed how easy it is, once you know the right concepts

We got quite a lot to cover but it only means that I hope you will gain lots of useful skills that you can use when working on your own freelancing projects.

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. Freelancing : How To Design A Responsive Website Promo Video: Welcome to the fifth part of the freelancing A to Z cores. How to design a responsive website. In this class, we will complement our freelance project with a responsive website design, and we will do that using Adobe Illustrator. In the process, you will learn how to design a clean landing page and a simple sub page. How to use Adobe Illustrator's little No techniques to make your Web design process faster and more effective, and also how to design a responsive version of the design. We will simulate the tablet and smartphone experience, and you'll be amazed how easy it is once you know what the right concepts. We get quite a lot to cover, but it only means that hopefully you will gain lots and lots of useful skills that you can views when you're working on your own freelance projects. My name is David Tyminski and see you inside 2. Freelance 1 Introduction To The Design: in the next few videos, we're going to design this landing page. What? We are, we're going to start with the landing page, and we're going to design it. So it complements all the other elements in our project. Of course. We got this logo up here that we designed him just a few fewer videos ago, but it can see that all the colors that are being used throughout this design are actually based on the client brief. So we got that the greens, we got the grace of white. So everything is in accordance towards what the client the client expects. So in the next few videos, we're going to design this landing page and let me just break it down for you real quick. So as I just mentioned, we got this logo up here. Everything is put against this gray background, and here we got to the main navigation. As you can see, it's being put against a white background and this give it gives it a bit more prominence in here. And we got this this well, a sidebar here on the left that is divided into two parts. So the first part of that has again on the white background, has some about the author information with some image and the 2nd 2nd piece right here also . Well, it kind of is like like an online shop teaser. It's got this logo right here. Some information about the online shop and of course, ah, culture action about into to see their online shop. And here on the right, we got the block post part of this landing page Because I got to tell you that the client wants this side to be kind, like a combination of a blogged, like an about page and some online shop teasers. So this is what it is, actually. So we got this block post containing right here that has this image has category that the title and asked this this date right here. The text, the excerpt, and it's got this read more bottom down here. Of course, this whole concept is this repeated with this blood post container down here? We got some pagination beneath it, and of course, we got this fuller down here and we're going to design just a quick, just a quickly sub page right here and you can see that it has this image on left text on the right and we got this The this bottom piece divided into 22 containers and on the left we got some information about the local shop and some social media icons here on the right . And I also have some notes here on the left that, as you can see, are off my art board. So I got the colors, I got the information about the funds and I got the social media. I comes. And as I mentioned before, this is a real life project and actually athletes a work in progress. So if you want to see how this the website actually looks and on the rial alive server, well, you can log on to this website, so let me just go quickly to that website. Okay, so I'm here on this website and as you can see, we got all the design element that we just that we just saw in the design. So we got the logo. The sidebar on the block boasts right here, and we also we also have the sub pages that basically look pretty much the same and the the only changes with these Parton off the design. So I I think that it will suffice if we just if we just design 11 subject. So I think that you'll be able looking at these thes thes other sub pages design if you want to your own sub pages as well, and also note that sensitive since it's a work in progress, the responsiveness of the side is also a work in progress. So there's still a few things that needs to be that needs that need to be addressed, especially this menu right here. But the design part, we're also going to design and the response of version off the side. So we are going to we're going to design the tablet version of the site and then the smallest of the smartphones, which which would be the iPhone size. We are also going to design our website for that for that device as well. So I only know actually, we've got quite a lot to do, but that the design itself is not that complicated. So I think that you will be able to follow along and to actually learn quite a quite a few interesting things as we go. So let me just start. Let me just stop talking and actually start designing in the next video 3. Freelancer 2 How To add multiple elements with one click: in this video. I would like to start the design process by making some initial arrangements. But I would like to also show you one little trick that is very useful when working with with the Websites or when designing websites inside Illustrator. So I think that we should start with creating fresh art boards that also I don't want Teoh . I don't want to bore you with the with too much clicking, but I also want it would like to show you some new techniques, so I know it's quite a challenge, but I think I think I can do it. So I'm gonna I'm gonna do some things quicker and I'm gonna explain some some other things in a bit more detail. So So I'm just going to start with creating new new art boards and new layers. So I'm gonna go to the layers panel and simply old click on the new layer up the new layer I can, and I'm gonna call It may be a landing landing page, like so, and I'm also going to create a new this new layer and I'm gonna call it sup age, just like so maybe I'll move the landing page, landing page on top just like that. So I'm gonna grab the auto board, too, And I'm simply going to I'm gonna make sure that I have this move Copy artwork with our board selected. And also that might this this 12 Colin greater layer is also Well, it is unlocked. So I'm going to grab this art board, and I'm going to hold on the shift and the old keys and move it Ah, to somewhere here. This should be fine. And I'm gonna do the same thing with this guy, just like so while I am here in the in the Yardbirds panel, I am going to name this art board sub page just like that. And this guy is going to be cold landing page just like that. Okay, so what I would like to do now is I like Teoh off course. Let me just lock this 12 column great layer, just like so. And I am going to delete everything. So we are kind of like starting from scratch, just like that. Let me just delete all these guys as well. And now I would like to show you that one little trick that I am that I management at the beginning of the video. So let's say that you have repetitive elements throughout your throughout your design. So, like in this case, we got, like, the background this this white stripe right here we got, of course, the food er So how can we How can wake are our life easier and speed things up with such such repetitive elements? So what I would like to do is I would like to have all of these repetitive elements this basic, repetitive elements of pasted on well, everywhere where they need to go. So first, let me just select maybe this background rectangle I'm gonna shift like on this rectangle as well. And then I'm gonna shake click on this rectangle here inside the foot or a swell. Now, I don't want you to I don't want to worry with creating simple rectangles because I hope that by now you well, you have a pretty a pretty good understanding on how to create rectangles inside. Illustrator. So I wanted to I wanted to focus on on this special technique, so I have all well, this, uh, the background selected and this white stripes elected. And also this background for the footer selected as well. No, I'm simply going to carp eaten all these guys into my clipboard. And now I could use him and the command and maybe just go to the proper layer this moon landing page layer, this will the commander. The trigger I'm talking about is called based on all our boards and has a very handy short cut off all shift control G. So if I just initialize it, you can see that I am actually based in basting the elements on all on all all words that I have inside of my document. And of course, I don't need these guys right here. I also don't need these guys right here, So let me just delete all them, all of them, and in in here, I'm gonna make this guy just a bit smaller, just like so. And I'm gonna move my foot or down here just like so. So as you can see right now, just by about by some simple and the simple clicking, simple copying and pasting, we got all the necessary elements basted onto our our ports. And this, actually is how you can When you already have a landing page created and you have a like the navigation created, you can simply grab it and base it on all our boards and will actually place it in the same in the same spot. Okay, so just as a reputation, imagine that you have on Lee this landing page designed right here, and you want to paste your your well, in this case, navigation elements on toe all your sub page sub pages will sub pages or subways designs so all you would need to do it, So you would simply need to coming about press control C on your keyboard or command. See if you're on a Mac to to copy it into your clipboard. Move to the proper layer. In this case, I'm gonna go to the landing page and I'm simply gonna paste everything. Well, all the our boards by President, the control all plus shift plus V just like so. And there you go. You can see that we got our our navigation navigation pasted on all the arbors and imagine that you would have multiple multiple designs. Will multiple sub pages created here and you would need to need to based every every part. Oh, are the initial design onto every are bored. So with this, with this space and all our boards shortcut, you can make your life. You can make your life so much easier. So of course we will design everything from scratch. So I'm going to move, deleted and do some house cleaning around here because I can see that some things have gotta have gone rogue. So there you go. This is how you can create you how you can create multiple elements, multiple repetitive elements on all your art birds. So remember, just to just to copy your elements into your clipboard and used the pace on all our birds command right here. So in the next video, you're actually going to we're going to start adding the main elements of our of our local and navigation panel, which will be, well, the logo and the navigation elements. So that's something that you're interested in. Just keep watching 4. 3 How To Create The Logo And Navigation Sections: I would like the next few videos to be kind of like a blueprint for you. So you can s so you can use it and you can apply the techniques and trick that I'm about to show you in your in your own web designs. And I would like them to be kind of kind of universal, so you can use them not just to design this simple website, but actually any website that you that you want to design well inside Adobe Illustrator and first of those techniques that that I want to show you will be about position in your elements inside your inside your design. And we're going to start with the position in the logo and the navigation. So let me just quickly go to my final logo. I'm just going to grab it. Here's here's our little little trick for you. If you have, like a very, very big project and you want to quickly move it or will copy toe another document, simply select it just like so and move it till into to the other to the other titled Tyler Bar right here. And simply drop it inside your document. This uses uh, what will Not that much of your of your ram of your internal memory. And it's simply faster than just copying something into your clipboard and then paste in it . So while I'm here, I think I'm going to move my move. My local, someone if you let me just zoom in really close. So I would like to be sure that these guys are a are a group, so I'm simply going to group them just like so. And I'm gonna go to the layers panel, and I'm gonna make sure that my logo is actually on the right on the right layer so we can see that it is on the right player. But while I'm here, I'm gonna do some house cleaning. You can see that we have these different paths, right? Right here. We got different rectangles, so I'm simply going to select these three rectangles, these guys on the sub page, and I'm simply going to move them on to my sub page, just like so. Just like that. Let me just move them right here and off course they need to be. They need to be positioned properly, just like so, And I think her that I am going to lock the sub page for now. And as far as the landing page goes, I think I'm gonna I'm gonna rename this path right here. This rectangle I'm going to name it Background or PG for short. I'm going to lock it just like so and I'm gonna add another Well, the first sub layer to my landing page, some simply going to click this create new sub layer. Actually, I'm going toe old click on it so I can name it. I'm logo and never just like so. And I'm going to move it, move my logo. I'm going to rename this layer just real real quick. I'm gonna move it on to this sub layer. And also, I'm going to remove this path right here to the logo and never Sadler as well. You know I won't touch this about this foot of background layer. We're gonna move, move onto it a bit later. So now that I'm here, that that I got my logo, I got I got it. Only a proper a proper sabliere. I'm think I'm gonna move it up just like so. I think it's It's a good idea to simply make it smaller first. So let me just make it smaller by 50%. And it would be good if it made itself smaller by 50% just like so. So let me see what it looks like. A 50% is Okay, well, in the original is and I think it was much bigger, much bigger. So I'm going to make the increase its size the 1 25 I'm going to leave it like that. I'm gonna leave it up to you to experiment to with this size because they're a bit more important things that I would like to show you right now. So what I'm gonna do is I'm gonna make sure that my that the align option is set to align to our board and I'm gonna move my logo all the way up and I'm gonna center it just like so . So what I would like to do is I would like to make sure that the distances between my logo and the top of my page on the logo and this white bar that is going to ultimately be my background for the navigation are actually the same. So How can I do that? Well, since my since my logo is set well, actually, it's touching the top edge of my off my art aboard. I'm simply going to double click on my selection tool, and I don't want to move it horizontally. I do want to move vertically, and I think I'm gonna go with 25. Or maybe even 50. 25 might be not enough. 50 50. Should be fine. I'm gonna click. OK, now I'm gonna bring this guy up to it, snaps with my logo, and I'm gonna do the same with this rectangle. So I want to move it toe vertically, not horizontally. And I want to move it by 50 50 pixels and notice that if you enter a positive value right here, you will. You will move your object down and never enter the negative value right here. You will move it up. So if I just entered minus 15 minus 50 I would move it up. But I don't want to do that. I want to move it down just like so. So now I am sure that the distance between the logo and the top edge and the distance between the logo and this white background right here is actually the same. And I think that right now, and it might be easier for you to establish how big this this logo should be. But remember that if you that whenever you make it bigger or if you make it smaller, you'll have to adjust the distances between the local and the top edge and the logo and the and this white white background right here. So I'm gonna undo that. So this is how you can position your your element on your artwork. Using the selection well is in the movies, but that you can access by double clicking the selection toe. Just remember to first select your object and then double click on the selection tool order . The direct selection for that matter, toe enter entered the move to. So in the next video, we're going to aunt that the navigation. So we're going to add the tax, and then we are going to position our elements on our on our background inside this kind of a container on our our board. So that's something that you're interested in. Just keep watching 5. 4 How To Align The Navigation: no one's take care off the navigation, So I'm gonna grab the type tool and I'm simply going to click somewhere here and type in home just like so. I'm gonna make sure that the Fontes said to Lata it has to be bold. The phone size seems to be set to 12 and I think that I that I would leave it as old cap. So it's just easier for us to to to then ah, type of the other elements off the text and let me just position it's somewhere somewhere here. And I think that we should simulate the letter spacing with that with with setting and the tracking value. So I'm gonna go to the character panel and I'm simply going to increase this tracking value . Let me see what looks fine. Ah, I think this should be fine. I think this looks like right. No, I'm simply going to go to the affect menu bath and I'm going to click outline objects. So I know that the alignment that we are about to make or to set is actually going to be ah referencing to the letters itself, not the bounding box around it. So What I'm gonna do right now is I'm simply going to copy or clone actually, this guy to the rights on holding down the shift keys and will shift key and the all keys together just like so. And I'm gonna type in maybe about the blawg, just like so of course you would set your own. You would set your own text. Now, I'm simply going to click or press control deal my keyboard to duplicate the last transformation which was cloning to the right. And I'm going to move it somewhere here. And maybe this time I'm gonna type in something like about to the all four. Just like so Now I'm simply going to clone this guy again to the right, and I'm gonna type in something like our our shop. Maybe, and then I'm going to clone it to the right and type in type in, contact us. So these air some some pretty pretty I know that they might sound generic, but I think that it's more about you understanding how to create this kind of a navigation system rather than just watching me coming up with with some some original names for the sub pages. So I'm going to make sure that my that my home will actually Well, my home tax aligns with this liner. Well, this column right here and I'm gonna move down to somewhere here and I'm simply going Teoh , maybe select all these guys and remember that they all have. They all have the outline, outline, object effect applied. So now I can simply add to this background to my selection by shift clicking on it. I'm going to click on it again to make it a to make it a and key object at Nam. Simply going to choose this option right here. That says Vertical line center. Just like so to make sure that my navigation is actually sitting inside, Will is aligned is aligned vertically in relation to to the background. I'm going to simply grab the home button, and I am going to sample this green color to show the users that they are actually owned this home page right now. Now that we have where the navigation system aligned vertically in relation to our background, that's actually align it in relation to the main background to the whole to the whole art board. So I'm simply going to select all these guys and I am going to click on this guy on this home text once more to make it a key object. I'm going to go to the Align option, and the distance between these elements is really totally up to you. Since we have only one since our navigation would be put to just in one column, we don't actually have to worry that much about him. These 12 column grids. So it's really more up to you. How big of a how big distances you want to set between all these elements. So let's try 90 pixels. Or maybe let's try 1 10 or maybe even 1 20 and know What I'm gonna do is I'm going to create a group out of these guys out of all these guys. I'm gonna make sure that I have all these guys selected. I'm going to group them, and now I'm simply going to align them to the art board vertically to the center, just like so. So, as you can see, this is how easily we can actually created the navigation system inside inside illustrator and how we can position it properly in relation to its parent container and in relation to the whole, to the whole design to the whole whole art aboard. So in the next few videos, we're actually going to start creating these main elements. So we're going to start with sidebar, and then we're going to move to the block posts. So that's something that you're interested in. Just keep watching. 6. 5 How To Create The Content Container: in the next few videos, I would like to show you another way of creating your your elements inside a design when you are using Adobe Illustrator and those of you have seen in my weapons and fundamental scores will be like more familiar with the techniques that I'm about to show you, because we are going to create something that is like a combination of a wire frame and a design. So this will be more for you who don't like the wire frame. Although I would advise you to use the wire frame. But I'd like to speed things up, and I would like to expand your skills and portfolio well at the same time. So what I'm gonna do is I'm going to simply I'm gonna create another another sub layer. So I'm gonna make sure that I'm on the landing page layer and I am going to call this guy. Maybe. First, I'm gonna call it sidebar just like so, and I'm gonna turn the visibility of the bedroom player off just like so. So what I'm gonna do right now is I'm going to create a simple rectangle that is going to span from this from this column right here from this from this intersection, and he's going to spend spend all across to this column just like so. If you want, you can maybe make it just a bit just a bit bigger. What I will do right now is I will move by 10 10 pixels down. So we could again goto our move tool. Or we could simply go to the transform tool and let me just set it to 12 and 12. 80. I just usually want to make everything even and absolutely going to enter plast on, just like so, Chris, when we take a look at the original design this distance bid between them, this main container and this navigations actually set to 10 10 pixels and you can you can check it with the with the with the live designer should you wish So. So what I want to do right now is I want to separate these guys into two separate containers. So I wanna have this sidebar container and I want to have this block post container. So maybe I am going to maybe even increase adjustment more. We can increase it a bit later, so I'm gonna grab it and I'm gonna go to the object menu bath. I'm gonna go split into grid and I wanna have the re columns or maybe even four columns. Let me see. I think four columns would be fine. I'm gonna add the 10 pixel gutter to this, or maybe, maybe even 15. Because if we want to know, let's go with 10. I mean, if we are setting this this option right here, this is the distance between the navigation and our sidebar and the block post container. Well, we set it to 10 so it's actually said it to 10 as well. It's not like to bootstrap proper cause. The distances between columns are set to 15 pixels, but well, this is the design. This was the original design, and you can actually Well, you can. You can a man, you can adjust it if you want to. So I'm going to stick to the original design and I am going Teoh, let me just check now. Four columns will be better. So and I'm going to stick with Tana just like so. And I'm simply going toe press. Okay. Just like that. I'm gonna grab these guys thes three columns on the right and I'm going to go to the object menu path again. Split into great. But this time I'm just going to set it to one just like so. And I'm gonna grab this cyber right here. I'm gonna go to object Bath, split into grid. I'm gonna make it to Rose, just like so. I just previewed this and maybe I'm gonna increase the God of our value to maybe 10 10 points. Swell. Just like so. So this is how easily we can simulate kind of a like a wire frame with wire frame elements inside our design. Maybe if I just Well, maybe you can see them better actually, when they are when they are black. So what we would do right now is would simply start adding, start adding these inner these inner elements. So we would add this image container and these text containers as well, and we are actually going to continue our kind of like wire framing in the next video 7. 6 How To Add Text Containers To The Sidebar: in this video, I would like to continue our suit, a wire frame and and with the with the some simple a simple placeholders for for our image and our text. So what I would do right now is that would simply grabbing ellipse tool. Maybe I will set the filled to why two plain white and I would create a simple, simple ellipse. And that would be something like maybe 1 50 by 1 15 Let's check that. I think this will be fine. So what I will do right now is I will move it all the way up. So it snaps with the top of my container, actually, to make sure that it snaps with the top of my container and not to move that container. I'm going to select both these guys and I'm going to select this background toe once more, so I'm going to click on it to make it our key object to make it our key object. I'm gonna go to the align panel and I am going to press this vertical align top just like so. And I'm going to align and horizontally to the center, just like so. No, I think I'm that I would be using more padding than than just these 10 pixels. So I'm simply going Teoh, I'm going to double click on the selection tool, and I think I'm gonna move by 25 pixels or maybe even 50 pixels. Let's see. Um, you know what? Maybe let's go with 25 pixels. Let's do it like that. So we have just simply more room here to work with. Now, if we take a look at the original design, we got the text here. We got the name of the name of our blogger author right here. We got well, the title block, other some tax and they read more tax down here. So we got 12344 text containers. So right now, I'm gonna grab him the the rectangle tools, just like so. And I'm going to create a rectangle that is going to span. Maybe Maybe let's span it all the way from this left part, the left toe edge to the right edge to somewhere here, this would be fine. And now again, I'm going to go to the object menu. Did I make it that I make it look on the right. I'm not sure. Let me just There you go. So I'm gonna go to the object menu Bath split into grid and this that I'm going to give it for Rose and let me just add some god or value to it. But maybe maybe just five pixels. Okay, this should be fine. Maybe we What we could do is we could add some some parent on the left and on the right. So I'm gonna go to the transform panel right here. I'm going to set my reference point to the dissenter, and now I'm going to simply subtract maybe, like, maybe like 20. I'm going to subtract it May minus 20 just like so to have some some more padding right here. Now, if you want, you can simply select all these guys and just press control de to repeat the last transformation toe. Actually, subtract the 20 pixels on the left and 20 pixels on the right, just like so. So what I will do right now is I will move this guy all the way up here, so it snaps with my with my image. I'm gonna go to the selection tool again. and this time I'm gonna move will again. I'm gonna move it by 25 pixels, just like so. Then I'm gonna grab this bottom guy and I'm gonna move it to the bottom and I'm gonna bring it up by 25 pixels just like so. So now I am sure that all these distances this distance between the top edge and then the image this is between the image and the stop text container and the distance between this bottom image text container. And this this will. This bottom and distance are actually the same and are set to 25 25 pixels. Now, what we could do is we could simply grab all these guys, go to the align panel and simply hit, distribute objects and distribute them vertically off course in relation to the selection, not to the art board, just like so. And there you go. We got our image placeholder and all our text placeholders created just like so. So the last thing that we could do right here if you could simply delete this guy, Grab this. Ah, this container cologne int to the bottom. And now I'm simply going to move it by 10 pixels, just like so. And there you go with this is how easily we can create. We can create the sidebar kind of like a wire frame on the on the left. So in the next video, we're actually going to start populating of this this piece of our sidebar with some actual actual information, so stay tuned. 8. 7 How To Add The Text To The Sidebar: So let's no start adding the actual contents to our landing page. So I'm gonna make sure that I'm on the proper layer on the sidebar layer and I'm going to go to the file menu place. I'm gonna navigate to the folder where I keep my images and I'm simply going to cool double click on the image that I that I want to paste him. I'm gonna make it just a bit smaller. And what I want to do right now is I want to I want to create a clip in my So I won't. This this image placeholder right here to act as a clipping path before our for my for my image. So I'm gonna make sure that my image is actually beneath this. Well, this image well, this well, this place holder and sculpt like that. So I'm gonna simply shift click on them right now going to shift click on this circle just like so, And we could go to the object menu clipping, mask make. But I usually use the than the control plus seven shortcut just like so. So, as you can see, it's just a bit to pick. So what we could do right now is we could simply click on this added contents option. And I'm simply going to initialize the scale tool by pressing the asking on my keyboard and then enter. And I'm gonna make it smaller till it looks something like that. Or maybe just a bit smaller, like so. And of course, I'm using the arrow keys Teoh, to adjust the position in off this of this image also just like that. So what I will do right now is I will populate to these thes rectangles with some text. So I'm going to grab the type to, actually, And the first tax that we need to enter is this will know this information about the offer just like so. So I'm just going toe the type will do. Selected. I'm gonna hover over this first text frame and you can see that this type it'll is actually changing into this, that this circle and yellow arrow, which actually means that if I now just click somewhere here, I'm going to create a well, a text frame or more technical the area and the area type. So I'm simply going to type in, um, Jane John son, just like so I know that you can see, because I because we are setting everything and against a black background, and we're going to fix it in a second. I'm gonna make sure that the text is maybe to this great color, just like so. I'm gonna increase the font to maybe 22 points. I think 20 points should be fine. Just like so, animal. And, of course, make sure that it's aligned to the center. And now I will actually change the color of this award. The background of this of this place holder to this white cause. I'm simply going to sample it just like so. But now I will change the color of these placeholders to maybe plain Black just like that. And now I will an at another area type some, simply going to grab the title and make sure that Teoh that I see this the circle appearing around my type toe, and I'm going to type in something like a blawg or for just like so. I'm gonna change the text color and I'm gonna decrease the phone sites. Uh, maybe even 12 Leslie with a 12 now what we we need to do right now is we need to add the proper taxed here and then the read more about on down here. So let me just borrow some tax toe. Maybe from from this part right here, Maybe I'm going to go all the way here just like that. And again, I am simply going to Kulick with the title on this rectangle. I'm going to baste it in just like so. And I think I'm going to move it all the way up to summer here and extend this text. Maybe that's just a bit too much. Let's give it like that and I'm gonna make sure that it's that it's aligned to the center, just like so And then I'm gonna type in. Well, I'm actually with the title. I'm going to create the area type, told this guy, and I'm gonna type in something like, um, read more just like that. I'm gonna make it green, and I'm going to leave it as bolt as as it is a link, just like so. Okay, so what I want to be sure about right now is that the distances between these pieces of text and are equal. So first I'm going to grab all these guys, all these text friends. I'm gonna go to the effect menu path and I'm gonna go outline, object. And now I'm gonna click on this Jane Johnson text again to make it my key object. I'm going to go to the align panel and I am going to distribute these guys vertically and by Let's see, 25 I think 25 should be fine. So now what I will do is they're gonna I'm gonna go wrap this this background right here, and I'm gonna move it all the way up, and this time I'm gonna I'm gonna increase its its height by 25. So I'm simply going to increase. I'm gonna add 25 pixels just like so. So now I can be sure that all these distances so between the distance between this image and the top edge off this container, these distances right here they are all equal, and they're set the same 2 25 pixels just like so. So the next thing to do would be to simply add another piece of our sidebar, which would be the information about our online store. So if that's something that you're interested in, just keep watching 9. 8 How To Finish The Sidebar: in this year. We are going to duplicate our our part of this off the side bar, and we will duplicate it because we want to work smart, not hard. You want to stay if active, not active. That's why we will actually did will reuse lots of elements from our landing page design in our further designs. So what I will do right now is they will simply delete this guy down here I'm gonna grab. But this part of decided bar and I'm simply going to clone and down until the cloning snaps with the original just like so I'm gonna initialize the move tool by double clicking on the on the move. We'll actually on the selection tool, and I'm gonna move it down by 10 pixels just like that. Now, let me just borrow the local from years. I'm going to simply copy it. And of course, we won't be needing this clipping mask right here, so I'm just gonna Of course I need to be sure that I am basing it on the right layer, just like so. So I'm going to simply position my my butterfly until it is somewhere here. Maybe just a bit to the right. I think that this should be fine, just like so. So, no, I'm simply going to remove this clipping mask based my butterfly back in. And now all we have to do is to simply type in some some texts I'm gonna type in online, online shop, maybe, just like so Now I'm gonna type in something like I'm maybe about the shop. I'm going to leave this text as is, and I'm gonna just type in see the shop, just like so. And there you go. This is how easily we can create a sidebar like this one. This is how easily weaken divided into two, populated with some information. Add the text at the graphical elements. So the next thing to do would be to simply add to the block post container to add this image and the text, the text beneath it. So if that's something that you're interested in, just keep watching 10. 9 How To Create The Featured Image: in this year, we are going to start creating the container for our block post. But I think that we should start with creating a separate layer for that. So I'm on a landing page, a little layer right here, and I'm simply going to add another sub layer. And I'm going to name and block, pose, block, post, Just like so. I'm gonna move this path onto this block post sub layer just like so. And what I wanted to right now is I want to have a separate containers from my featured image and the tax. And to do that, we will. We will follow the path that we already went with with our with our sidebar. So I'm gonna go to the object menu path split into grid, and I'm going to just create two rows. Now, the first rectangle will, of course be will be hosting our our featured image. And the bottom one will be housing our text. So what I'm gonna do is I'm gonna go to the file menu place and I'm gonna choose maybe this image this time and I'm gonna make it. I'm gonna make it bigger. Something like that. Should be fine. And I'm gonna make sure that that that it goes beneath beneath my well, actually all my, oh, my rectangles not gonna choose this guy And the image just like so. And this time I'm so well, I am going to clip my image. But this and I'm going to use the control plus seven shortcut on my keyboard just like so. And I'm gonna I'm gonna grab her this this image inside the clipping mask and I'm gonna move it up to somewhere here. Maybe. So what we need to do right now is we need to create some kind off text placeholders here in the bottom. So I'm gonna simply a copy and paste that this guy in front I'm gonna go to the transform panel. I'm gonna make sure that might. Reference point is set to center and I'm going to subtract, let's say, 100 pixels from the with, and I'm going to subtract a 100 pixels from the height, just like so. And maybe I will give it some different color so you can see just a bit better. And then I'm gonna go to the object menu again. Path split into grid. And this time I'm gonna I'm gonna go with five rows and I'm gonna increase the color ever so slightly just so you can see everything better just like that. So I split this this rectangle into five parts because we need to actually five text friends we need to the Texan from the category for the for the for the title, for the for the data, the excerpt and the read More bottom. But we are going to actually type all those information in in the next video. 11. 10 How To Add The Blog Post Excerpt: and this year we are going to add to the tax that we are we need for our block post. So I'm gonna grab the type tool, and I'm gonna collect. Maybe let's just zoom in real quick. I'm gonna click somewhere here to actually initialize the content area atop the area type toe. I'm going to click somewhere here. I'm going to start typing in the name of the category, which will be, let's say, herbal ism. I like this word. So it's gonna be herbal ism. I'm gonna make it green. I do want it to be bold, and I do want it to be set to center, just like so Now I'm gonna I'm gonna click somewhere here and actually enter the title of them of the Blood post. So let me just quickly borrow it from the original, So I'm simply going to copy this guy. We're gonna go back to my design right here and with the title selected, I'm going to click somewhere here and just type that in. Now we need we need the date. So I'm simply going to click somewhere here and type. And maybe may 24th 2016 I'm going to give it this great color, just like so. Now I'm gonna maybe borrow this text to actually type in type in the block post excerpt. I'm gonna die that in pace That him. And then I'm gonna baste it one more time. Just so we have some more of it, and then I'm gonna just click somewhere here and type in and read war just like that. I'm gonna make it green. I'm gonna leave everything Azeri. So I'm gonna leave it as bold 12 points and we're gonna make it and aligned to the center off course we need to We need to make our and we need to make our will background. We need to give it a proper color. So I'm simply going to sample this color from here. And what we would have to do right now is of course, we would have to distribute or align all these elements properly. Right? So the first thing to do would be here. Teoh, grab all these pieces off next, just like so, And I'm going to go to the Effect menu bath. I'm gonna outline the object number, remove this guy just a bit up to extend this thesis text frame just like so this guy just a bit down I'm gonna grab all these guys again, just like so I'm gonna click on this herbal ism and tax toe once more to make it the key object. I'm going to go to the Align tab and actually, let's see what 50 pixels for the distribute space for the alarm for the vertical distribute actually is going to look like constantly going to click on it and let us see what it looks like. Ah, thinking election. I think it actually looks a lot. Looks really good off course you can play around with the position in all day long. You can you can set different, different space in value you can You can align it the way you want. You can maybe moving to move this guy just a bit up. But I just wanted to show you the technique of how you can quickly and effortlessly create this kind of a block post container. So in the next video, we are actually going to duplicate this guy Just if the repetition and just to add another blood post container to our design, so stay tuned 12. 11 How To Add The Second Blog Post: in this video, we are going to duplicate our blood post container, and we are going to change the information that it contains. So I'm simply going to again choose select all these guys and I'm gonna group them because remember that you want to work effectively. Not we want to be effective. We don't want to work too hard. So I'm going to simply Kelowna down to somewhere here till it snaps with my original blood post container. And I'm gonna move it again by most probably 10 pixels, just like so. So the easiest way to exchange an image within a clipping mask is to simply selected with the direct selection talk. And you can see this this link right here. And if I just click it, I'm able Teoh to choose this reeling option. And non simply going to double click on this This photo and you can see that illustrator is actually exchanging this this image or this link with another link. So we exchange this original image with this image. So just as a repetition, let me just go back one step. So if I just selected with that direct selection tool, I am ableto added the contents straight away. And if I click on this link and then choose reeling, double click on an image I'm able to Teoh well, actually will exchange the image toe what I want. So now that we just change some text, I'm gonna change the name of the category to maybe natural soaps just like so. And this time I think I'm gonna go with just a two line to line title, just like so I'm gonna change the date to maybe, I don't know, maybe 20th of May. Why not? And I'm gonna leave everything as it so now we would have to do is would have to simply again select all these. Well, sexually is the group's. I'm gonna one group them. So I'm going to select all these elements, just like so let me just select all these elements. And again, I would click on this natural soaps once more to make it a key object. I'd go to the align panel and I clicked, distribute, distribute space in, just like so. Now, of course, you would have to maybe make this, uh, this guy with this background just a bit smaller, so I would maybe make it smaller. I would put it somewhere here. Of course, we won't be needing this guy that is down here in the bottom. So I'm gonna I'm gonna select it, go to the transform panel, make sure that my reference Portis set to set the top. And I'm simply going to type and maybe plus 15 just like so, to make sure that everything is aligned properly. So the next thing to do would be to simply add the pagination down here and some information in our footer. So if that's something that you're interested in, just keep watching. 13. 12 How To Add The Footer: in this year, we are going to first add our pagination and then we are going to take care of the footer. So the first thing I'm gonna do is I'm gonna create a simple, simple rectangle. Or actually, we could make our life even easier. So I would just grab this this rectangle, I would clone it down until it snaps something like that. And I think I'm gonna make it. I think I'm gonna make it smaller. So I'm gonna make it maybe 100 pixels just like so. And then I'm gonna move it down by 10. Just like that. And really, all that's left to do here is to simply type in the numbers. So I'm simply going to grab the textile type till Adam simply going to click somewhere here , and I'm gonna type in something like 123 I'm gonna add this arrow symbol. Or maybe I'm gonna just Panter 33 dots right here and I'm gonna type in something like last page, just like so Now I'm gonna move it all the way all the way here to to my pagination, just like so I'm gonna make it green just like that I'm gonna make sure that it that it's ah, it's actually well that it has Thea outline object applied to it because now I want to know I want Teoh aligned properly with my with my pagination background. I'm gonna goto effect and I'm gonna go with apply outline object, select my pagination click on it again to make it a to make it a key object that I'm simply going to align it properly, just like so now the last thing to do to finish this landing pages. That would be, of course, to add some some information to our food. Or so I'm gonna go to the layers panel first, and I'm gonna simply create a sub layer called footer just like so. I'm gonna move it all the way down here, and I'm gonna make sure that this path that is actually our background of the footer is actually on the proper proper layers. I'm gonna move it to the Fuhrer layer just like so. And I'm simply gonna grab the type tool and start typing in, well, the copyright information and then our well, the link to our website. So I'm just going to click right here, and I'm going to go to the type of tool I'm gonna choose something that is called the glyphs. And in here you can see all the characters that are there within this guy, the this typeset. So I'm going to simply choose this copyright glitch right here. I'm gonna double click on it, just like so. And as you can see, we've added the copyright information with with a single will, actually, with a single double click. Let's call it like that. Suddenly go into just a type in the year 2016 and I'm gonna type a natural, I'll tell. Yeah, just like that. I'm going to give it a proper color. So I'm going to give it this this great color just like so. And I'm gonna move it up to somewhere here, and then I'm gonna simply clone it down. And if your client is okay with that, you can and you're your information to your well to the foot of the website that your design so I would simply type in something like, um designed Oh, maybe I would make these capital letters. So I designed by and your your company and Of course, we want to make it a link to our website, so I would just go ahead. Go ahead with the green color, just like so and again. I would make sure that these guys have the outline object effect applied, let let's group them in order to know aligned them properly in relation to our background. So since they are a group, I can now shift click on the background to add it to our selection, click on it again to make it a key object and simply aligned it to the center both vertically and horizontally, just like so Now. Of course, what we could do right now is we could simply grab power footer, moving a bit up and then just move it by 10 pixels because remember that the distance move it up by 10 pixels. Because remember that our remember that our will distances are set to 10 picks of the distances between these elements with the pagination in the block post containers. So you want to have equal distance between pagination block, post container and also between the footer and the pagination. And the last thing to do would be to simply make the dartboard smaller. And if if we're purists, we could simply grab the background and simply make it smaller, just like so. So there you go. This is how easily we can create a well, not to complicate it, but I think that it's that it's a clean, clean landing page, and the next thing to do would be to simply grab some elements, at least some elements from our landing page design and face it onto our sub pages. And because we want to use some elements from this from this original design and put it on our weapon while sub pages on, because we want to work a smart, not hard. So is that something that you're interested in? Just keep watching. 14. 13 How To Add The Subpage Elements: in visit, we are going to start creating our sub page and we are going to be using some elements that we already have at our disposal that we already designed. But first, let me just do some housekeeping around here, so I got the sub page layer right here. You can see it right here. I got the sub page layer and let me just their name on my background to layer properly were actually background to object. So I'm gonna call it BG, and I am going to lock it just like that. So the first thing to do would be to maybe creator the logo and a navigation. So I'm gonna go to the suffrage layer and create a sub layer that I'm gonna call logo and I have just like that and what I would do right now is I would simply grab these logo navigation elements and put them onto our layer. But remember that we actually change some space in right here, So I think it's a good idea to select not only the logo on the navigation, but also the background right here. So I'm simply going to delete this guy. I'm gonna make sure that I'm on the proper layer. I'm gonna grampa the logo. I'm gonna grap all these oldies will navigation elements along with the background just like that. I'm gonna call Pete. I'm gonna make sure that I'm basing it, Marilyn. The proper layer, which is this one right here, but also on the proper a proper art board. Which is this? The supper Charbel Right here. And all you need to do is we need to simply click control F or command after, if you're on a Mac to paste everything in in front. So this is how easily we can reuse the existing elements to design some some additional elements and for our, for our, for our website design. So we can we can continue this. This understand? We can use it again with our footer. So if I just quickly Gramp this group right here, I'm going to copy it, and I'm gonna go to the sub page layer will art. But actually, I'm gonna go to the layers, but I'm going to quickly create, create a foot or layer, just like so I'm gonna move. I'm gonna move this path onto the footer layer and move it beneath the logo and have just like so. And I'm gonna make sure that I'm on the foot or layer and I want the proper art book right here. And I'm gonna simply base that in front but notice and we are actually pasted it not only in front, but in the same place. So in order to put our will, this group, this contact information or the corporate information well, in the proper place, I'm simply going to shift click on this background click on it again to make it a key object and then simply align our text just like so. So now that we have these reusable elements, Clinton will pay sort of placed and onto our a sub page, we could actually move on to creating the proper counted inside our sup it. So that's something that you're interested in. Just keep watching 15. 14 How To Create The Content Placeholders: in visit, we are going to create a the main containers for our will main content. So we are actually going to be using a lot of splitting, splitting, integrate. But before we do that, let's actually create a separate sub layer for that. So I'm gonna go to the sub page layer and I'm simply going to create a new subway. There is going to be called calm, tempt, just like so. I'm gonna move it beneath logo and left just like that, and I'm gonna maybe temporarily disabled we'll turn the visibility of the Bagram layer off because what I want to do right now is I want to create a well, a rectangle, actually, that is going to be spanning from this intersection to this intersection. So we are creating a rectangle that is as big as wide as all the 12 columns and as told as the distance between the bottom off them off the navigation background to the top off the footer background. But what I want to do right now is I wanna have some some space and some margin between between this a rectangle and and the navigation and the folder. So I'm gonna go to the transform panel and I am going to subtract, Subtract. Of course, I need to be sure that that my reference point is set to set to the middle and I'm just gonna subtract maybe 20 pixels because I want to subtract 10 from top and 10 from the bottom. And if I just press enter just like so you can see that we created a nicely looking a rectangle that is going to be that we are actually going to be split it in just a second. So now we can turn back the background player on just like so. And I'm gonna grab this guy, go to the object bath, split into grid, and I'm gonna split into three rows with a 10 picks Lagardere and I'm gonna click, OK? And I'm gonna grab these guys as well. I'm gonna go to back toe object bath split into grid, and I'm gonna decrease the number of roast one. So I have just 11 piece off a piece of element that will one element. I'm gonna go to this bottom part again, go to object path, split into grid and decide I wanna have two columns with a 10 pixel gutter, just like so. And if we take a look, which is amount of it at our original design, we can see we actually have this, like, kind of a container right here. And we got to smaller containers down here, and we are actually going to populate in these containers with proper information in the next video. 16. 15 How To Add The Main Image: So now I can start populating my containers with some content. But first I'm going to create some like containers inside containers. So I'm going to grab this guy. So this, uh, this rectangle I'm going to copy and paste it in front. I'm gonna go to the transform panel, and I would like to have some more padding on both the top and bottom and left on the right and this and I'm going to maybe decreased this with by 100 pixels. And of course, we need to make sure we have the reference point set to the centre and I'm going to say do the same for for the heights. I'm gonna go miners 100 just like that and just maybe change the color, just like so. Now what I will do is I will grip this guy. It can go to the object bath, split into grid, split it. Maybe this time into three columns I'm gonna increase the gutter to maybe 20. Just like so maybe even what if we go with 50 want? Let's go with 50. Let's make it. Let's make these all these distances. Even so, I'm gonna go with OK, And of course, I want I want these guys to be I want these guys to be, well, one container. So I'm gonna go with object path, split into grit and decrease the number of columns to zero, just like so. So now what I can do is I can simply Aunt of the image on the left, so I'm gonna go to file place, and I believe this is this this image, Of course. I am going to make it significantly smaller. I'm gonna put it, put it behind to this. This rectangle I'm going to select on both of them and simply press control seven. Just like so. So the next thing to do would be to add some tax two on the right. Right? Right. So I will need 1233 containers for the tax. And we consider there's, like, this big, empty space here here on the top. So actually, I think that we can do that, do it the same as we did a tour with our blood post containers. But it is something that we are going to do in the next video 17. 16 How To Add The Author Info: in this video we're going to add to the author in for So we're going to split this guy into separate the rectangles that we're going to turn into text friends, and then we're going to give it some some tax, um, information about the block author. So I'm gonna go to the object menu again. I'm gonna go to split into grid, and I'm gonna go with five rows and I'm gonna increase the governor to maybe 2020. Should be fine, but I'm going to need on Lee the title. Well, well, let's call it the title of the block offer and the name of the of the block author and some some text, so I won't need the stop the top bar right here. And I will grab both these guys go toe object path split into grid, and simply Turner will decrease the number of rows to one, just like so. So all we need to do is to simply grab the taxed. And I think that you already know what we are going to be doing right here. So let me just borrow the text real quick. So I'm going to just know that this guy. I'm going to borrow this tax. I'm going to copy it. I'm going to go to this thing, this rectangle. I'm gonna turn it into a text frame and simply based that information in. And then I'm gonna go. I'm gonna do the same with this text, just like so copied. Go back again. Turned us into a text frame, just like so. And And the last thing to do would be to just a copy. That's copy this whole text, and I'm going to go to this text frame. Well, I'm gonna turn it into a text frame faces in here, just like so and the last thing to do. Well, almost last thing to do would be to change the color of this of this background. So I'm gonna simply sample this this color front here. And of course, all we need to do right now is to simply align all these guys properly, right? So I'm going to select all of them. I'm gonna make sure that they are that they have the outline object effect applied, and I'm gonna click on this bottom guy again to make it a key object. And I'm going to distribute them vertically by maybe 25 pixels. Let's see what it looks like. Uh, I think it looks fine. Let's leave it like that. So there you go. This is how easily we can create this kind of this kind of faxes. How easily we can create with Well, we can work with text and text frames inside inside Illustrator. And this is how easily we can we can align everything properly. Of course, if you were to be, like, ultra precise and I actually I would like to encourage you to to to test all these things on your own. You could maybe increased the size of this text from. As you can see, we got still some some text here, well hidden. So if I just moved this guy just a bit up so it lines properly with our image, I would go again. Thio was selected again. All these text elements create click on this the text here in the bottom again to make a key object, and I would simply distribute it one more time. So there you go. In the next video, we are going to start adding content to our bottom. Let's call the bottom side bar. So that's something that you're interested in. Just keep watching 18. 17 How To Add The Shop Info: in this little we're going to start adding content to our bottom parts of the sub base design. But I think that you might already have had enough off me off. Seen me explaining and telling you why it is a good idea to do you the split into grid command. This time I'm simply going to add the text and just align it. Eso I'm gonna simply going to select both these guys and I'm gonna make I'm gonna make them white. I'm going assemble this his background color right here. I'm gonna grab the type tool and let me just let me just see what the original has. It says main shop, the name of their in the name of them will the shop and some fake address down here. So let me just borrow this bottom taxed just like so I'm gonna go to the to my to my main design and I'm going to simply click somewhere here. I'm gonna I'm gonna base that just like so. Of course, as always, I need to be sure that I am on the proper layer. This guy right here, I'm gonna pay. Sit inside Well, in front here I'm gonna move to somewhere here, I'm gonna duplicate it up and I'm gonna name it. I'm gonna name it. Let's call it main shop. Just like so. And then I'm gonna move this guy down and I'm gonna title it natural Tell? Yeah, Just like so I'm going to give it a proper color, and I'm going to increase the size of it to 24. Let's go with 24. Why not? So I'm gonna grab all these pieces off text, just like so I'm gonna make sure that they have the outline object applied. And now what I want to do, They want to, of course, aligned them properly. So I'm gonna move this guy up. Well, actually, we can. We can maybe again line everything into well in relation to the key object. So I'm going to select this main shop, and I'm going to select this thing's background, and I'm going to click on the bedroom again to make it a key object, and I'm gonna dio vertically align it and align it to the center, just like so. And now I think I'm gonna move it down, maybe by 25 or maybe even by swell. Let's see. 15 50 is gonna be too much. So let's live in the 25. So I'm gonna grab this guy and the and again I'm gonna grab from the background. I'm going to click on the bedroom again to make it a key object. And this time I'm going to align it to the bottom, just like so. So now I will move this guy up. I'm gonna double click on the move tool, enter minus 25. And now what I want do they want to make sure that this natural tell year ism is being well displayed in the middle in relation to the background? So again, I'm gonna grab it, grab the background, click on the background again, and I'm simply going to choose this vertical line center and the land is go to the center as well. Just like so. So the last thing to do would be to simply add that the social media information and, of course, to add will to change the tax from the main shop and the text here in the bottom and with this fake address. So, actually, let's do that in the next video 19. 18 How To Add The Social Media Icons: in this video we're going toe and the social media information to our about the author. Page s So let me just reuse some elements that I already have. So I'm gonna grab this a main shop text, and I'm gonna move It is somewhere here. And let me just type in something like find me on like that and I'm gonna make sure that, of course, it is aligned properly to the center. And let me just Grandpa let me just quickly grab at the all these social media icons. I'm going to copy them and I'm gonna go back to my my design. And I'm gonna make sure that I'm on the proper layer This layer right here and I'm just gonna based based all of them. And of course, they need to be significantly smaller, maybe even smaller than that. This would be fine. Of course, I would like to show the developer that whenever someone hovers over this one off these these elements one of these icons and that they should be, they should be directed Teoh this social media profile. So I want all these icons to be links, So I'm going to do that by simply selecting. Since this is a group, I'm going to select one of these guys with the direct selection tool just like so. And I'm gonna I'm gonna make it green just like that. And by the way, you confined him lots and lots and lots of different social media. Aiken sets around around the web so we can go to flat. I conduct come and get your setter there. Or you can simply type in social media icon set in Google, and you will find plenty, plenty of social media items. So not that I got these guys based in I'm gonna make sure that that they are, they are aligned properly. But of course, if you need some different distances between these icons or all we would have to do is we have to, of course, one group them and maybe maybe select all of them. First, select all of them. Click, say, on this Facebook, I can again to make it a key object and let's see, 25 or maybe 20. Let's distribute them by 20 just like so, and I'm gonna I'm gonna make them turn them into a group, and now I can align them in relation to the background. Of course, I'm making the background are key object. I know that it's a lot off a lot off repetitive techniques, but this is what you get when you are designing, designing repetitive elements on the website. So I'm gonna I'm gonna align it properly, just like so. And the last thing to do would be to cologne this text down to somewhere. Here. Let's put it down here, and I will type in at the email address. Jane at the natural. I'll tell year dot com just like so. And we can we can make sure that it's actually position properly again by aligning it properly. So now I'm gonna align it in relation to our background. I'm gonna click on it again. I'm gonna go to the move tool, and I'm gonna move it vertically up by 25 pixels, just like so. So there you go. This is how I think it was pretty easy to design or recreate this kind of a sub page. Just like so. Of course it takes. It takes a lot more to to come up with this idea, but I just wanted to show you how we can quickly complement our natural Attlee, a project with a with a landing page and a sample. A sample sub page. So the last thing to do would be to simply create, like, a responsive version off this what we were Crew created the responsive version off this landing page. So that's something that you're interested in. We will start doing that in the next video. 20. 19 Let's Understand The Responsive Design Part: in the next few videos, we're going to make our design responsive. And before we actually start doing that, let me just explain a few concepts. Well, first of all, as you can see, I got to art boards on the Autobot on the left is simulating tablet experience, and the audible on the right is simulating a smartphone experience. And I think that this distinction and this vocabulary is actually particularly important because if you wanted Teoh, if you wanted to design our and our website for every possible screen resolution or screen size, how there it would be, it would be a nightmare. Where we need to focus on is we need to focus on the actual and the actual experience. So what we want to simulate here is the experience that a user would have when browsing. We're looking at their website only tablet and ah, on a smartphone. But for the ast faras the size off the art boards go. I chose to I chose to set to this um well tablet our boat to 7 50 and with because that's something that will bootstrap uses. Actually, Bootstrap uses 77 50 break point T to show you how a website Teoh. Well, looks, um, on a tablet. And I choose 3 20 with the for the smartphone just assimilate a first iPhone experience. And, of course I got I got the iPhone and the iPad layers, so I think that we are good to go. 21. 20 Let's Add The Logo and The Nav: I gotta tell you that in the next few videos there won't be a lot of designing, but there will be allowed off aligning and adjusting the the size of particular elements. Let me just go to my original design and I'm going to go to this logo and lev layer right here. I'm going to select it, and I'm gonna copy all the elements on this layer. I'm gonna go back to my my responsive document, and I'm gonna create a sub layer for my iPad layer. And I'm gonna call it logo and have just like so and I'm gonna base all the elements in. So for the logo, I think that on a tablet it will look well, smaller. So I'm simply going Teoh Well, actually, it ceased. 75. Looks like maybe even 70. Just like so. And what I want to do, of course, is I want to ally in in relation to the art board, just like so. And I think I'm gonna move it down by. Let's see, 25 25 should be fine. Now, I'm gonna move this whole navigation up to somewhere here, and I will move it down by 25 pixels just like so. So not what I have to do is of course, I have to make everything smaller. So I'm going to bring it all the way to the left and this guy all the way to the right. And, of course, on a tablet, my navigation elements would probably be smaller. So I'm gonna decrease the phone size to something like maybe 10 points. I'm gonna under group all these guys and move this guy, but had left this guy as well, this guy as well. And this guy as well to the left, Just like so. So now I'm gonna grab all of them, click on the home text again, Let me see. Yes, I am making in the key object that zoom out and I'm going to simply distribute these guys. Let's see. That's definitely too much. Let's see, maybe 18 maybe even 70. Maybe even just a bit smaller. Let's leave it at 69. So now, before we start at in the main elements of our design down here, I think that we can paste, weaken, pays the background. Why not? I'm going to simply copied from here, and I'm gonna make sure that I'm on the proper layer right here, and I'm going to simply based it. And of course, I have to make it significantly smaller on and I'm gonna put it somewhere here. I'm gonna make sure that it's aligned properly and I'm gonna make it. I'm gonna extend it down here all the way, all the way down, all the way down here till it snaps, just like so. Of course I'm gonna make it. I'm gonna make it here. I'm gonna move it here and there we go. We got we got the navigation navigation created. And, of course, we got the background background copied as well. So the next thing to do would be to start at in these main elements to our design. But this is something that we're actually going to start doing in the next video 22. 21 How To Add The First Blog Post: So I'm going to start with creating a proper sub later, and I'm gonna call it. I'm gonna call it. Well, maybe sidebar. Okay? So I'm just gonna go go ahead and let me just look this this guy right here, So I'm just gonna go ran both these guys. I'm going to go to this sidebar layer and are simply going to paste them just like so Move them properly to somewhere here and off course, I need to add the proper proper spaces. I'm gonna had just, maybe, maybe 10. And maybe I will. I will turn the visibility of the bed growth layer off, and I will decrease the size of my on my sidebar till it t dispense Onley across these These three columns. Um, I think that this should be fine. Maybe I'll make it just a bit bigger. So someone here, this would be fine. Okay, Now, I'm gonna go ahead and grab all these elements. All these guys, I'm going to copy them, and I'm gonna create a new layer. I'm gonna call it Balog boasts just like that. And I am simply going to base. Didn't just like so And of course, I need to make it significantly smaller. Let's see, 55% or maybe 50%. We're going to adjust it in just a second toe. Well, manually. And I'm gonna move it. I'm gonna move all these guys actually to the left till they snap with my sidebar. And now I'm gonna move them to the right to the right, Well, horizontally by 10 pixels. I don't wanna move vertically, just like so. And now I can extend them all the way to the right, just like so. But off course as we can, as we can see right here. Like maybe this tax might be a bit too well, too small, as we can see, is just is just nine will not. Not even 99 points. So we can we can simply make it bigger. Maybe to 10 or 12. Maybe not maybe a bit too much. Let's go with 10. 10 should be fine. And remember that whenever we are actually making this kind off, this kind of changes When when we are making the fund bigger, we are actually a decreasing the line height. So if we are, if we just made our fund to bigger bite reports. I think it's a good idea to give it a bit bigger line height. So I'm gonna go with let's let's see 16. 16 should be fine. And as you can see, we need to extend our frame just like so. And then we would have Teoh. We would have to move just one group. These guys, we would have to move our our containers somewhere down to the bottom. And since we extended our text from now, we have to make sure that the distances between these guys are all equal. So I have to move this guy just a bit up and I'm gonna move it by by the 25 pixel value, just like so. And I'm gonna move this guy up so it snaps with the text and I'm gonna I'm gonna move it or I'm gonna make it actually just a bit bigger and I'm gonna add 25 just like so. So there you go. We got the first block post created, and I think that it would be a good idea to simply reuse this existing block boast to create another blood post. But I think that this is something that we're going to do in the next video 23. 22 How To Add The Second Blog Post: Okay, so now let's actually entered their second block block post. I'm gonna I'm gonna delete it. I mean, we already a set on the front to be a bit bigger. We took care of the space. And so I think that it would be better to simply select all these guys, move them down, actually, Well, moving cloned them down and then move this guy by 10 pixels down. And now we can actually change this image again. So I'm gonna go to on the folder where I keep my images. And I think it was this image just like so and again we can simply change. Maybe this will this text to maybe just two lines and then all we would have to do is we would have to grab all these guys just like so. And maybe this time make this This, uh, category is are our key object. I would go to a line on decrease it to 25 maybe then go with, distribute spacing and hit head distribute space and vertically, just like so. And of course, again, we would have to just move this guy up, just like so I can see that there is some redundant, unnecessary, unnecessary object right here. So I'm gonna just go to the transform and I'm gonna just at 25 just like so. So the last thing to do here would be to simply add their pagination. So I'm gonna go to my my original design. I'm gonna copy both that both these guys and I'm gonna baste it somewhere. Here, I'm gonna move this guy so it snaps with this with this. Well, this container right here, I'm gonna move this guy by 10 pixels, just like so. I'm gonna bring this guys, we're here, We're going to align it in just a second. And I would decrease the size to something like eight points just like that. I'm gonna make this guy significantly smaller, and I don't think it. I don't think it needs to be that wide. Some going to decrease its size to maybe 50 pixels, just like so. So And I'm gonna grab both these guys click on this background again to make it Mikey object and online everything properly, just like so. So, as I told you, it's not a lot of designing, it's ah, it's a lot off a lot of, well, clicking and making things smaller and aligning things properly. So the last thing to do would be to simply brain our our footer right here and then move on to the smartphone design. So if that's something that you're interested in, just keep watching. 24. 23 How To Add The Footer: Okay, So to finish our iPad or tablet experience, we need to add their footer. So I'm gonna again and grab the footer. The original footer from the original design. I'm gonna move on to my my iPad, iPad or tablet, and we'll document or aren't board. And I'm gonna create I'm going to create a new sub layer that I'm going to call Footer. What else? Just like So I'm gonna move it all the way down here, and I'm simply going to paste it, just like so Now, I also don't think that in this case, the footer has to be that big, actually. So I think I'm gonna make its smaller. So I'm going to bring it down. Of course. I wanted to be of the size of my are Burt's. I'm gonna go with 7 50 and then I'm gonna go. I'm gonna make it up. Maybe 100 this time, just like so. And of course I am going to move it. I'm gonna move it by 10 pixels, medically, just like that. Now, with this contact information, what I have to do is again I have to make it smaller to maybe eight points I think it should be fine. I'm going, Teoh. Well, I'm gonna one group these guys, and I'm gonna move this guy just a bit up, just like so, And I'm gonna group them again, and then I'm gonna I'm gonna collect will shift click on my background to add it to a selection. My selection. I'm going to click on it again and then I'm going to I'm going, Teoh, align everything properly, just like so. So the last thing to do would be to simply bring our background just like so and maybe decrease the size and decrease the size of our of our arbor just like so, and probably decrease the size of our background as well. Just like so. So there you go. This is how we can, how we can simulate on the iPad experience or the tablet experience with the with our with our design. So the next thing to do would be to simulate a smartphone experience which we will start doing in the next video 25. 24 How To Create The Hamburger menu: in this video, we're going to start simulating the iPhone or the smartphone experience without without a design. And I'm going to start with creating the proper layer here on my life work proper sub layer here within my iPhone layer. So I'm simply going toe old click on this, create your sub layer, and I'm gonna call it Tom logo and 1/2 just like so. So I'm gonna borrow this logo and this background. Actually, I'm not gonna gonna be borrowing this navigation. And I'm gonna tell you why in just a second. So I'm going to simply copy it, go to my iPhone layer, and I'm gonna make sure that I'm on the proper proper our board that I'm simply going to baste it in just like so. So what I will do right now is I will move my my logo to summer. Well, actually, ideally perfect to the perfect center, just like so. And I think after that I'm going to leave it this big. I want the user to be able to see properly on the logo off the company. Now, I know that you can see in this this bar right here, disturb Well, that's because we don't have a background right here sensibly going to borrow the Bagram from the iPad from the iPad design. I'm gonna go to the iPhone, and I'm going to simply based in just like so I'm gonna make sure that it is being aligned properly. And of course, I am going to make it significantly smaller just like that. And I'm gonna move it all the way and all the way down to somewhere here, of course. Let me just move both these guys to the logo and naive layer, just like so. And now I can make it. Now I can make it smaller just like that. Now, the reason I didn't copy of this navigation here is because I want to create something that is called a hamburger menu. What I want to do right now is I want to borrow this tax, this home tax from here, and I'm going to simply copy it, go to the logo and never layer. Make sure that I'm on the proper art board, and I'm simply going to paste it just like so. I'm gonna put it somewhere here, and I'm gonna change this text into into main you just like so there you go. And I want Teoh. I want to add the three bars because I want to simulate the hamburger menu. So I'm simply gonna grab the rectangle tool and I'm going to create a simple bar that is goingto be something like that. And then I'm going to simply duplicate it down here. Just like so Course, the only thing to do here would be to simply in grow. We'll group them grab or both these guys and simply align them. Of course, I need to be sure that I'm allowing everything to selection just like so. And I'm gonna move it, this gun, this game, maybe, just But maybe, you know, I'm gonna leave it up and leave it. Leave it higher, just like so. So I'm gonna group these guys at the Bagram to my selection and make it a key object, and I'm going to put it, put it somewhere well, actually, in the center, exactly in the center, and bring it to the right, just like so Now if you think that this menu is a bit too big for you, well, you can make it smaller, but I want my visitors to be able to see it to see it properly. Since we are talking about the hamburger menu, what we could do is we could actually simulate what, like, the proper that the big man you what it will look like when the user is just the clicks on this menu button. So I'm going to create a new well, maybe new sub layer right here, and I'm gonna call it I'm a menu reveal, just like so I'm gonna bring it down here. So what I will do right now is I will simply create a rectangle that is going to look something like that. And maybe, actually, I will move this, uh, this up to summer here and I will give it a nice white collar, just like so. And what I want to do right now is I want to simply add maybe the logo of my website, or maybe even just this thing's butterfly elements. I'm going toe on group these guys temporarily, and copy this a butterfly right here. I'm gonna go to the proper, aren't board and the proper layer as well. And I'm simply going to baste it in just like so, Prentice summer here, maybe make it just a bit smaller. Okay, so now what we could do is we could simply borrow these thes elements right here. All these elements just like so I'm going to copy them, gonna move to this menu, reveal layer, and to this proper art board based them all in, just like so. And I'm going to move them one I will beneath each other, just like so just like that. I'm gonna grab all of them and bring them down somewhere here, and I will align them in relation to the selection, some simply going to move them just like so. And maybe I'll move this guy just a bit up. So eso Aiken will just like that quickly simulate what with the manual when it is revealed when this expanded is actually going to actually go into to look like just like so. So I'm gonna hide that this this layer just for now because I want to move on to creating an all the all the other pieces of my of my design 26. 25 How To Add The Smartphone Blog Posts: in this year, we're going to start adding the main accountant to our design. And before we start, I just wanted Teoh to point out one thing. You don't have to fall the pattern that we are created here with this iPad design. I mean, you don't have to first put this about the author information and then this online shop information if you want, you can start with these elements right here because it's actually quite easy to code it if you want to. If you want to put something, put something first when you are making your your website responsive. So this is what I'm actually going to do. So I am going to start with creating a new sub layer, and I'm going to call it content, just like so. And maybe let me just lock this backroom player and I'm going to borrow all these, all these and all these elements. I'm gonna copy them. I'm gonna move to the continent layer, and I'm gonna move to the proper proper our report. So I'm gonna baste it in just like so, and I'm going to move it up here and of course I need to move it down by 10 pixels, as we already know, just like so. So notice that as soon as I sort of make it smaller to somewhere here, images zoom in real close. I'm gonna look this backroom player for a second. So noticed that as soon as we made, like everything smaller, like some pieces of text are actually becoming illegible. And this is something that we are actually what that we actually have to have to tackle. So if I just grab this, will this tax this herbal isn't taxed right here. You can see that it has only 4 25 points, and that's way too well. It's definitely not enough. So if I just may be increased the font size toe eight. Let's see, it should be fine. I'm gonna do the same with these, but both these guys, I'm gonna increase their funds their size to eight, just like so. I think that we are good with the title. And as for the text, I'm gonna increase it all the way to 10 maybe. And for their for the line height, I'm gonna go with 16 just like so. So it's more legible. So of course I need to extend this guy, move this guy and bit down, and now I'm going to extend this text just like so. So all we need to do is to put this guy up, just like so move it. As we already know, by 25 points or 25 pixels, I'm gonna move this guy up just like so, and I'm going to extend its height. I'm going to add 25 pixels just like that. So there you go. This is how we would This is how we would create created this blood post container inside our our A smartphone smartphone experience, smartphone design, off course. What we would have to do next is what do we would have to simply clone this going down, and then we would have to simply move it by 10 pixels. Then we could change, change this thing, this photo, and then add all your all your tax tim to our world second to block post container. So the next thing to do would be to add these sidebar elements. And actually, I think that these guys were actually going to be a making bigger instead. Well, not smaller. So that's something that you're interested in. Just keep watching 27. 26 How To Finish The Smartphone Design: So I'm going to start with creating a new a new sub layer and I'm gonna call it. I'm gonna call it sidebar. Why not? I'm going to call it side bar, and I'm simply going to borrow all these elements from this design. And again, I need to be sure that I'm on the proper layer and home the proper art board. Just like so. So I'm going to based all that in move it to summer here, and then I'm going to have to extend or expand both these guys because I want them to be big. I want to be want to be spanning all across my design. And as you can see right now, I need Teoh make my art board bigger, Just like so even bigger, cause we'll have to add to the footer in just a second. And I have to extend extend my my background as well. This guy right here. So I need to I need to find Well, this is this is the wrong background. Too many backgrounds here. So I'm gonna grab this background to right here, and I simply need Teoh. I simply need to extend it extend until it goes all the way down all the way down here. Just like some so off course I can see that. We got a bit of a problem somewhere here. I think that didn't move properly. Just like so. Let me just zoom out a bit. Okay, So we added we added to that this side, but we added the block. Most content will containers, so the last thing to do would be to add to their foot. So I'm gonna create another layer, call it footer, just like so again, I'm gonna borrow these elements right here. I don't need the background, Absolutely going to copy and paste it on the proper layer. And on the proper art board. Just like that, I'm gonna move this guy to somewhere here, then move it down by 10 pixels just like so. And then I'm gonna move this guy, Do the center make this guy's significantly smaller, just like so, and maybe I will make it. I will make it smaller. I'm gonna make it 50 pixels. This would be fine. And I'm gonna move these guys a bit up, just like so. I think I'm gonna leave it. I don't think I'm gonna leave it that that big? Why not? And of course, we need to align this guy properly as well. So the final thing to do here would be to simply make the audible smaller and also make the make the background smaller, just like so. So there you go. This is how we can simulate the iPad and the smartphone experience with our with our design . And I really hope that by now you're feeling way more confident in creating this kind of designs yourself and that you will be designing them independently and with great confidence. So next stop would be to simply would be to create a modern flyer. But this is something that we're going to start doing in the next project.