UI & Web Design with Illustrator | Florin Buzea | Skillshare

UI & Web Design with Illustrator

Florin Buzea, Full Stack Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 13m)
    • 1. Intro

    • 2. Let's Come Up With A Story

    • 3. Customer's Identity

    • 4. Setting Up Your Guides

    • 5. Creating The Menu

    • 6. Landing Hero Section

    • 7. Design It Responsive

    • 8. Working With Iconography

    • 9. Making Progress

    • 10. Website Footer

    • 11. Exporting Assets


About This Class

Hi there, my name is Florin Buzea and together we’re going to design a website using Adobe Illustrator.

We'll start by meeting our customers, we'll learn about their objectives, we're going to create a quick identity for them and then we'll move on to Illustrator to design the website.

Along the way, I'll show you what my favorite resources are when it comes to gathering images, choosing fonts, creating a color pallet and others. I'll also show you my favorite shortcuts and other useful tips and tricks.

This course was created with beginners in mind so you won't need any previous experience with Illustrator. If you've used Illustrator in the past feel free to jump in between episodes to get whatever information you're looking for.

Sign up for the course and let’s make you a web designer.

Once you completed the course please make sure to leave a review. 


1. Intro: Hi there. I'm Flow Full stock graphic designer and founder at We Flow Studio, an independent agency that deals with brand identity design and websites. Today we can design a website using Illustrator will start by meeting. Our customers will learn about your objectives. We're going to create a quick identity for them and then we'll move on to illustrator to create a website along the way. I'll show you. My favorite resource is when it comes to gathering images, pairing fonts, building a color palette, choosing the iconography in order that I'll also show you my favorite shortcuts and a few tips and tricks. This course was created what beginnings in mind so you won't need any previous experience with illustrator. If you've used illustrated in the past, feel free to jump around episodes and God, whatever information you're looking for. If all of that sounds good to you, let's start creating this website 2. Let's Come Up With A Story: right. Thank you for choosing discourse, to learn how to design a website with illustrator. But before we get into the actual digital space off creating this website, let's build a story for our customer. Let's just create a fictitious customer just so we can immerse ourselves a bit more into this project. So who's my customer? The customers. A company called Juicer Licious. Roll with it. They've been five years in the business. The business is actually room by a couple and they've got a customer base was not. Actually, they've got a great customer base. So most the actual business. What today? Cell was services to the cell Or do they sell a product? They sell vegetable drinks, fruit drinks, milkshakes, stuff like that. But all of it is organic. They're actually organic, certifying which they're very proud off big variety of drinks. The drinks is for people who are vegetarians. Maybe they're lactose intolerant. Maybe the drinks are gluten free. They offer all of them options. So what's the actual objectives when it comes to creating this website, you want to start selling online devoted to go a great customer base, so they want to expand that by selling products online. They want to raise awareness about their business not only in the local area, but they want aware widen the range off there off their customer base. They want to let people know that their drinks is for everyone. They're very proud of that. So the websites, your flag that as well. Now that we've got all of that set, we can immerse ourselves a bit more into this project. And then obviously we're going to start building the website in Illustrator. 3. Customer's Identity: so the first technology was actually open up. Illustrates. And this is probably where you're going to see if you have all the version off illustrated . It's fine. I'm sure you can figure it out. You just have to put the measurements in. Instead of just clicking on what you want for this instance, I'm just gonna create a new file. Just going to, like Web large. It doesn't really matter at this point. Okay, Cool. So we've got a blank space here. What we wanted to do first is just create an identity for our customer. So what I'm talking about its funds. Call Apollo a few elements, stuff like that. Let's just have a base for our website creation. So the first thing I would do is put time here. I'm just gonna put main front yet it's gonna make it bigger by holding shift and drugging over. So that's our main funds. And then secondary front as well. Second fund. Cool. It's gonna drag this over here is make these a bit smaller, selecting both of them with shifts. Just drag it over. Okay. Now, if you're not sure of how to pair funds out to choose the funds The right forms for your website. I've got to websites that wouldn't help you with that and hopefully after use them with time you will be able to figure out by yourself what foot you like for funds work. And so the first website would be formed. Pair that call, which is my favorite website. When it comes to stuff like this on, then the other one is type off dot com They're both very good websites for this instance I'm just going to use foreign pair that call and then I just used Teoh to funds for me to use. So I've decided on what funds I want to use. The 1st 1 would be fierce Sands have already downloaded them. So if you go to the character panel, I'm just gonna pull v sons just going to select, um the bold one. And then the second one would be Merryweather selecting it. We just put met re whether Let me just select dear black one. Okay, cool Most move this over a bit. Okay, Let me just make this a bit smaller. And what I want to do is ah, copy this four times. You do this by holding shift and old and then drag it down below. And then if you want to copy that a few times, just control D and they will do that a couple more times. This just select everything. Make it bit smaller than what I wanted. You select the second fund the instead of bold it is gonna put medium. There's no rules when it comes to this. But what I like to do is jump. Ah, over. Wait, so it's gonna be bold medium book. Now, that doesn't mean I'm gonna use all of them. But just in case I want to use one, I can just drag it over from there. Second fund. Let me do the same thing with this. Now, this doesn't have many Wait. So I'm just going to select all of them black regular and then light. Okay, cool. So these are the phones and going to work with. Now let's move on to the colors again. I'm gonna give you the resource is for this. If you don't know how the pair cool isn't or you want to use the color palette this to websites dangle assure you again. The first one's gonna be coolers dot call, and the 2nd 1 would be cooler haunt that they're both very good. Feel free to use whichever you want, but there's another option that I really like to use. If you've about images that you know you're going to use for the website, you can just take colors from from the images. I'm going to select three or four colors that I'm gonna work with. Just gonna go on them website book. If I like the coolest from the images I'm gonna choose, I'm probably going to use some of them as well. So again, by selecting shift and the rectangle to boom that's gonna make a box and gonna copy that over again with control the that's gonna copy four times, maybe just select colors really quick. So these are the colors I'm going to use first. Doesn't mean that I'm gonna use only these colors. Let's just see how it goes, Um, and then for some elements, not gonna put the elements yet here. But let me give you the resource for it. Now there's another website that I like to use, which is called flat Icon, that com They've got Lords of icons there. The subscription is no even that expensive, and you get free ones as well. As long as you credit the author, there's just fine. But for this instance angle. It's like them elements when I get to the actual section. So these are the funds. I'm going to use these of the colors. Let me move on. Teoh created my grid for the website. 4. Setting Up Your Guides: Okay, so the next step would be to create my guides for the website. We're gonna create this for the desktop, and for the moment version, where you want to do is just duplicate this again my holding gold and dragging the art board over. Boom copied. Um, let's just delete everything we've got here if you click on the art, but you can see this is, uh, 1920 by 10. 80. Ideally, you'd have this on the different file, but I am gonna work like this is fine. Let me say this is Well, you can actually skip this episode if you want to. I'm gonna have this file down below for you to download if you can't be asked working with columns and stuff like that. But if you stick around, you're actually going to learn a few short cards on. The episode is quite small as well. So it's up to you. If you've decided not to skip this episode, let's just move on. Just gonna make this art, but a bit longer. It doesn't matter how much to be honest at this point, it's just making free files and and one, let's just copy this art board again by holding old, then dragging the on board. If you click shift, it's gonna stay put as well. Yeah, cool. And then this other one, we want to do the length of us you just wanted as 768 That's the standard When it comes to mobile booms, you've got the mobile version here as well. It's just moving a bit. Ah, a bit more. Okay, But what these columns are going to do, they're going to help us create a website. This balance is gonna be easy for us to snap different elements onto these columns, or it's quite useful. So the first thing I would do is actually click on the rectangle to click on the art board there. Let's just make sure we've got 100 pixels for the with is going to keep it discreet if you've got it. Whatever article it is, um, really matter. I love to work with disgrace. I'm just gonna make another one. Another box that's gonna be 30 pixels with Okay, Cool. Now we, both of them selected and by holding gold is going to drag them over. Just want them to snap right here. Boom. So That's two columns. What I want to do now is press control and then the you can see that's duplicated. I want to do that till we have 12 columns. Last free. 456789 12. I believe the last space here first, Like all of them, you can see these are the columns and design the spaces in between. What you want to do now is control g to group them and then just simply go to window and didn't find the alignment panel boom. You might have it somewhere. I didn't have it. So I'm just gonna move it. Here we want to do is click horizontal the center. This is right in the middle. Here. Let me just stretch this a bit, actually. Let me do it all the way down. Boom. Okay, let me just on group this and then select all of the distances in between and then just press the lead foot. Small mistake that well you want to do now is select one of these control. See to copy, then control the copy. Another one. And this Move it on the phone wrong here and moving another one here and then we've done this for the more minutes. Okay, So if can be asked doing all of this, this file is gonna be available down below for you to download and work. So, yeah, we'll see you in the next one. We actually start creating the website. 5. Creating The Menu: So this is what we've got at the moment, regardless off if you download it or if we did it together, let's just start creating this website. So I'm going to start with the man. You just select the rectangle to before we do that. Let's just go to layers. Everything we've got here is on the one layer. I probably should have put the guides in the different layers, but it doesn't matter, especially for you. If you just created this. Um, let's just rename this layer as guides because the color in the funds, their pre much guides as well, delicious make a new layer and delicious call this design and to Okay, so now we're going to start working on the 2nd 1 And then let's just make a rectangle here , which is gonna be 1920. Caused us the with of the hardboard By sporting one authority. I think that should fit quite nicely. Okay, so that's the height off the menu. Let me just make it white. And let's just start putting items in the in the actual menu here. So first one's gonna be home. Sorry. That's gonna be capital home. Yeah, let's just make it as if you go to properties here. Should show you the size of it. Let's just make this 24 now. Probably gonna make it smaller, but and then the font, You've guessed it. We're going to use this funeral sons she's gonna put here. If your son's okay, she's gonna make it semi bald for now. Then what I'm gonna do is let me put it in the menu here. Yes, we can see it better. Then let me make Let's just makes six of these. Cool. So let me renamed them really quickly. Now, in order for the spaces in between these to be the same, you just have to collect on all of them. Then when you go into the alignment panel, make sure it's aligned. Two key object. So now when you click on this, you see the distances in between. It's exactly the same now. Obviously, I don't want 500 pixels so delicious. Select 50 Then click on horizontal distribute space. Then let me just take the eyedropper tool from here. Then select this green. Okay? It is gonna align this right here. And then the 12 buttons here, one for the cart because this is, ah, online shop at the end of it and then signing botany as well. So for these buttons, what I'm gonna do is zoom in a bit again. I'm holding gold, and then with the mouse wheel, I'm just scrolling Click the elop still And then with shift, just making a few circles taking the eyedropper tool. Let me just make it yellow, Okay? Just centralized this and then copy this over. We've got two of them now. Now, school now with the web site I've told you before. Flatted con that Carmen just gonna go. They're just gonna select two icons that I like to be right back. Okay, so these are the two icons that I like, one of them for sign in, and then the other one for the car again. The side is flat Icahn dot com. Okay, cool. We just bring the lower over as well. If you don't have a low, we just download something against. It's not important at the moment, but obviously we've got that juice along with that we've created from the start. Okay, so let me just copy it over. Cool again. Obviously you you you are gonna have a different logo for me. I've just got this one here. It doesn't snap to the inboard, so I'm just gonna go back here aligned to art board. Okay? This is gonna snap into place, okay? Some pretty much our menus done. Probably gonna make these a bit smaller. Uh, this is, um then it's gonna be quite big. You don't have to make a smaller I'm just gonna make it as, uh, 18. Looks cool to me. And then let me make the home the lights and green because we are creating the home page. So the light green is just so it shows us that the pages active. Okay, so we've created the menu here. Let's create a hero section here, which is gonna be the first thing that you see when you go to the website is gonna be the most intricate one. So I'm thinking you're gonna learn quite a lot 6. Landing Hero Section: Okay, so let's move on to the interesting part. It only took us for episodes to get here. Let's create a hero section here. Um, let me create a rectangle just to see how much space this is gonna take. I'm probably gonna make it a 7 20 I can change this later on, but for the moment, just make it 7 20 No, actually. Wonder High to be 7 20 and then with 1920. Cool. So this is gonna be the heights off the image. We're gonna make it a bit longer. Oh, yeah. 805. Okay. So what I'm planning to do is put in image here, some text here, a few buttons, but everything's gonna look cool. If you don't believe me. Go to the end of the episode. Is going quite cool. I promise. Right. So the first thing I would do is add my image. I'm gonna give you the resource for images as well. They're all royalty free as long as you credit. Author. Um so these are my top three websites when it comes to images. The first website I like to use is pixels dot com. Very good for royalty free images. Another one is on splash dot com and then, ah, another good one is free pics dot com. With free picks you get Element is well, but if you select the photos stop, you'll get great images there. You'll also find premium images, which is quite cool. You can pay for them. It's well worth it. If you've got a costume, are probably going to select the image from one of these websites and then let's go back to Illustrator. Okay, so this is the image I found on the believers was free pick. What I want to do is, could this in such a way that more or less it fits all this section here. So let me just bring it down. Que Let me just make it smaller by holding shift. Okay? You just go to a positive here real quick. Make it as 40 50. There's Martin, Then I can see how much gets caught off. But what I want to do is I want to make the drink. My main thing, not the pineapple. Make this a bit bigger, though. Okay, we're getting there. We move it a bit. Lower movie a bit across maybe a bit more than right. I'm happy that but obviously you can see I've got a space here they want to fill up and also a space here. So what I want to do is ah, bring my capacity back to 100%. They let me show you a cool trick that want to use. Depending on the image of chosen. You might not even need to do this, but it works perfect for this image to learn a few things. So just stick with me for a while here, Okay? So select the image. Make a copy of it. Que. Then where you want to do with the rectangle till make a rectangle that fits only that now the selection tool. Select both of them and create a clipping mask with control. Seven. You might be thinking, What is this guy doing here? Well, let me drag this over the other image. He needs to perfectly align where it was before cools. He You can't see nothing. Hear, everything looks normal. But if I stress this a bit, though, look at that. Looks absolutely beautiful. Can do that for the other side as well. So select this spot. Select this rectangle and then select the picture as well. And then when old Let me copy this over again, then by selecting both of them control seven. They may bring it back to the image. We move it a bit across. Let me delete this because I don't need it anymore. Let me put this on the image again, Que. Now let me stretch it to the end. If I were to present you this image, you might think, Yeah, normal image. But it is normal limits now. Select all three parts and then control G to group it cool. It's moving out of the way of it. Select this green rectangle or whatever Call you've got it. A range bring to front. Then this one Let me put it back in. So now when I click the rectangle click The image is well controlled. Seven. And I have created a cool clipping mask. So we already have two image here. It looks quite cool here. Let's bring some text years. Well, I'm gonna use a bit of fear. Sounds a bit of many weather. Let's just start with fear. Sons control. See. So like the image control V. Then it's on top of the image. Que Okay, let me put a bit of text here. Just pork. Your daily does. Oh, fruit and revenge. Let me select this then. I don't like the space in between the text. I liked this to be a bit narrower. So with the text selected, play called and then up on the keyboard and can do that in, obviously down, It's gonna spread the cross. Obviously, I'm not gonna make it black before the moment. Let me just copy this text over again with Alton Drug in the text. Then if I select the eyedropper limits like wanted that Merryweather funds select this one . Cool. Okay, let's select a bit of Ah, Laura MEPs, um, for this part Boom. Then it's 25 then I've made it white as well. Cool. And we bring it a bit close. Actually, let me make this want as well, you might say Well, you don't really see it on this background, But I am gonna add something else here on this on this background. But for now, this will work. Let me do two buttons as well. I'm gonna take the rectangle tool. I'm going to create two buttons. Mm, That's about right. If I zoom in, I can see the corners here. I want the buttons to be quite rounded. That's as far as it can go. But I want this not to be white. I want this to be with the eyedropper yellow cu and then the other one. Not sure you remember. I told you that I'm going to use most of the schooler's book. You can actually take colors from the image, and they'll work because obviously they've got the image to compliment them. But for the moment, let's just keep it yellow. Flip the colors over because I want these buttons to be different. And then I wonder stroke to be at to now because this bottom has a stroke and this doesn't have a stroke. This will be biggest. What to do is select its bottom and then with the yellow here, just move the yellow just touches the stroke as well. We'll make sure this is two points as well, and then both are the same size. Let me just take one of the elements from the menu and then bringing over the button again a range bring to front. And this one's gonna be top sellers. Okay? It's about rights, and you can play about with these for a bit of time. But that looks cool to me. Then the other one just gonna put us order. No, that looks cool to me. But let's just make him a bit smaller 16. And then if you called old and right, you move the letters. You put a bit more spacing between the letters that looks cool. And now let's parliament center off the buttons. Okay, that's cool to me. As I mentioned before, you can't really see this taxi, and you can't really see the text on the bottoms. But let me just put a cool effect on the background here in between the image and the text . So to do that I'm going to do is put a bit of a Grady and here I don't want this one. What I want to do is select this green for the Grady int This one. Now I've already uploaded a few colors in my Swatch panel. To do that is, after you've created the cooler here, let's go to this watch news watch and then the cold are selected. You just going to create a new swatch. And there it is. Okay, so now that we've got this new Swatch one gonna do is select the box and then click Radiant Boom. Obviously, I don't want a black, so I'm gonna go to the Grady in top. If any of the panels are mentioning are not here or you can't see them, just go to windows and then find the panel you're after. If you click on it, uh, will appear. Okay, so it's a great and top when the double click on the white gonna go to this watch is here. And then I wouldn't select the green. I wouldn't do that. Same thing with the block here. Cool. What I'm gonna do with the 2nd 1 is gonna put it as zero so you can see the effect I'm going for here. I don't want this to be straits. What I'm gonna do is with great and selected onions in a drug discolor out a bit more. Okay, cool. That's about it. Obviously, if I go a bit too much, you can actually see the books I've created, which I obviously don't want, but that looks cool to me. I don't want to be more green, so you can see there's the middle part here, which is the portion with the actual Grady and start. So I'm gonna push that a bit more inside so I could make it a bit dark. Okay. Okay, then. So that's cool. Now, what I want to do is select this Grady in select image. And then when I arrange and sent to back, you can actually see my Texas quite visible. Now, therefore, this green on the background let me make this one white from the swatches here. And I want my outline to be a bit thinner. So selected the bottoms properties. Then let me just make this one cool, Cool. But it still looks a bit boring to me. So I want to add of cool pattern in the background induction Grady in. So I'm gonna move back. Teoh free picks dot com and then going to come back with a pattern and then I'm gonna show you how to edit it. Right? So I found this school panting here. I wanna added here and somehow there it doesn't go in the text somehow I could still readable. It's a subtle effects. What I'm gonna do is selected now I'm probably going to selected similar Create into this. If I select the eyedropper and select ingredient, you can see it actually took the effect. Took it a bit off. So if something like this happens to you, what did you is select everything. You just have to select the grading and do the same thing again as you did with the with direct angle. You can see the effect on going for now. If I bring this into our image here, we just see how this looks. Yeah, I'm happy with that. Let me create a quick clip in mosque. Create a rectangle same size as the other wounds. Select my parts in and then control seven. Move this out of the way and with its selected, selected radiant, select the image and then arrange in center back. Now, when I put this back, you see that's in the background is not perfect. I'm gonna editor, but you can see doesn't get in the way. Now You can actually still read the text. So to selected, just double click on it and then you can actually access that. You can go to the layer stabbers well, and then try and find your your Grady. Um, but if only easy, she's just double click on it with its selected I'm just going to try and change the colors here for a bit. I want to change the color off the screen, making a bit light. So to do that, go to the corner here, make sure the RGB selected that. I'm just gonna play about with these until I'm happy. I'm happy. Let me just see what I've created real quick. That's a bit too harsh when wanted you selected. Make sure the effect is Premont similar to the other rectangle we've created. Okay, that's that, sir. What I want to do is select the box with the's actual lines and what I'm gonna do, go to properties and then bring the capacity down over the one this to take the mainstay. So let me make you a 30. Let me see how that looks. 30. Okay, so that looks cool to me. Let me push the Grady INTs a bit more inside. You see what I've created? Let me move this a bit OK, so the last thing I want to do is put some sort of an image. May be a storm here. I'm going to move back to free pigs, see what I can find. Their frias. Well, they're good factors. Let me see. Let me see what I can find. Okay, then. So I didn't find the stamp, which I think looks quite cool. I've changed it a bit. We could actually design this boy's couldn't It's not what the courses about. You confined different materials there if you want to use them. But for this instance, I'm gonna use this one. Let me put it above the drink here. Looks quite cool, but let me just pull a drop shadow. So effects stylized. And then drop shadow then gonna put offsets here. Zero. Let me put the blood, Teoh. Three in the capacity. 45. Let me see what we've done. Okay, cool. So I'm happy that Yeah, let's move on to making sure everything fits properly on the mobile version. 7. Design It Responsive: I know some people prefer doing the mobile version first and then moving the elements over to the desktop. I prefer working the other way around, which have a virgin works best for you. Go for that. So the first thing I would do is just copy this over to the mobile version. Okay? Obviously, I don't need the logo without as well and then limiting the two icons here. Cool. What I'm gonna do is make them with a bit bigger because we're working with a smaller screen. Everything will look smaller on the more ball screen. Okay, So if I zoom in, this doesn't snap here. So if this happens to you, the only thing you need to change scores of you and then make sure this is not ticked snugly point, that's good. But this one now. So for the menu elements, I'm sure you've seen it before. Three lines is called the Burger Menu. You can either take it from flat icon dot com as we did with these icons. Or you can create it yourself. It's not something too difficult. Just make three lines. We just copied the color over three lines ascent and then If you want them to be a bit roundish, you do that. And then after you've copied one control the then take the top bits off. Let me to leave that ones with straight edges. Then let me just bring these back, okay? I'm happy without probably gonna make it smaller. Okay, so there's a few things we can do here can bring this closer here. I can, actually, I think what's gonna work best if I move this over and then move everything to the side more? Just so this distance much is this one. Yeah. I'm not gonna spend too much time on this. There's a few options to do this. Changing the logo on the other side, putting the menu here, bring the icons in the center. But that's gonna work for now. The next thing we have to do is obviously take all of this or at least most of it, and put it in here. So the space I'm gonna play with other than the menu just poor 900 pixels height and then 7 6/8 because that's the with off the more well version. So the first thing I want to do is take everything except the text buttons in the logo. Maybe just look this layer here with the guides. I realize I'm putting the guys at the back. Some people like to put it in the front leather and then them down the guides. But the guys work just fine, even if they're at the back. So for now, let me just lock the guides. Seat lock has appeared, and then I cannot click Nothing on the guides know even these cause the's on the guides part of this Well, okay, let me take the background. Let me put it in. Just so obviously bring in the front just so I can see it properly. But the difference is that the picture is not the main stage anymore. So the text is gonna be more important. I still want to see a bit off the picture. So what I'm gonna do is leave the grade. Ian's like that. But let me just bring the picture in a bit, maybe half of it. So you can still get an idea about the drink, but obviously you'll be able to read the text. Much more clearer now if I put everything at the back except of the rectangle we did to create the clipping mask. Obviously the rectangles inside on board, everything else is in here. So I sent it back and then taking the rectangle we just created and then selecting everything. Control seven. Okay, we've got the background. Let me quickly make this a bit bigger so I can see it better. Then there's another thing I've noticed in the last step sold or the absolute before that. These are not fear of sound. Saudi. I've promised I'm gonna change him. So let me just do that right now. Then let me make another quick torture. Let me put the fruit and veg in yellow. Well, obviously, without a strong Oh, yeah, that's much better. Limiting all of this over. The only thing I'm not going to take the certified organic product stump, but the rest of them I'm gonna keep here. Let me just in group this move the buttons and the small text a bit lower just so I can work with this and let me break this text a bit differently. Help with that. Let me just align it a bit differently. Go to paragraph. Align Center cu And then I also want to make it a bit bigger in the small text. Not gonna change the size of it. But what I am going to do is put it in three or four lines and then I'm gonna align into center just like I did with the title. Probably the titles of too big. And then for these let me change the spacing in between the lines A bit more cool. Okay, right. So then the bulletins are the last thing I'm gonna change. Let's make it a bit bigger just so you can see them on. You can actually press them on the mobile version. I am happy with that. And the last thing I want to do it's centralized every think. Now, if I select everything in the background here, if I press control to this is going to get a lot until I decide to unlock it. I've locked it just so I can select all of this. Actually, limbs like the bottoms first group them with control G. If I go to the a lineman panel, cool. I've got to just here select qualities. And then if I go into the center here everything just snapped into the center and then to unlock the background you press controlled and to then, as you can see, this is a lot who any press control Ault into. It actually unlocks everything. You've locked on the actual layer. So for me, was this background cool? A bit of a short episode. Let's move on to creating the other sections. 8. Working With Iconography: right. So let's move on to the other section, which is gonna be a bit about the company, which I'm gonna probably use Laura Maps, um, than a few Americans just to show the variety of the company, as that was the objective from the start. So the third thing I would do is is Limoges copy some of the text over because I'm going to use the same funds? Probably no in the same sizes, but cool. Let me and group it and then let me just make this tax a dark gray and then smaller text. Probably a line to agree. And then I don't need the buttons. So let me just get rid of him, okay? And let me make this big a text. It's a 40 45 and then the smaller text licious make it as 2020 is fine. Let me change this text to something else. So just to show the variety of the company licious make you make the rules cool. So that works for me. Then for the other text. Rearrange it somehow. Okay. Both of whom I want to align them too. Line center. And then if I press this Well, he doesn't happen, but okay. Doesn't happen because I need to have it. So it's a lines to the art board. So now if I click it, it's in the sense it off the on board. Let me just bring it up a bit. Okay? Cool. Let me make this a pit 50. I don't know if I've said this before, but the title should be at least twice the size of the paragraph. There's no rules, but it's just something I've learned over time. Let me just put a bit of more space. And then what I want to do is have a few icons here just to show the variety. Okay, so I'm just gonna go to flat icon dot com, which is going to take to law, goes to icons, and then I'll show you how I make them look like the part of the same ecosystem. Okay, so when you bring them in, you're gonna download them us S P. G's. So you're gonna have him like that? We've been open in different art wars. We need to do you just copy it over control. See, then on your file with the website Control V let me take the bottle as well. Control. See, in control V, there's a reason I took these two icons because once thicker and then the other was quite thin. So what I like to do when this happens is destroying much the size off the other one. So this would probably be a bit smaller, cause it's a bit wider. And let me just bring it lower. She saw as much is the line here. I'm going to try and much stick with off the lines with the milk bottle Won't. So to do that object path offset path. And then this thing appears. Let me just put around here and then preview. Obviously, I don't want to make it thicker. What I'm going to do is put minus four. Let me just see what that did. Probably a bit more. You can actually use the arrows to change this. Okay, let me just press, OK? Delete the thicker line, then you get this. Obviously is not perfect here, but let me see. Let me find a place. Actually, the top works quite good. Let me see. You see that much is perfectly So now I've got two icons they look both the same If I make them smaller. Looks quite cool. Okay, so with this in mind, let me take another three icons in Come straight back. No, kid. And so these are my five Aikens I'm gonna use What I want to do is put them all in circles . Let me just make a circles. I've just taken the Ellipse tool here. And then which chef? Hold ID images? Actually, let me just click, then make it as a 1 15 circle. So you just have to put 1 15 on both one. Okay, Cool. You've got the circle. Then let me just make the icons. Just saw the all fit in the circle so no one be quite good, actually, just making a bid, Mossman. Okay. Okay. Let me try and muster thickness off the stroke. Todo actual I guns. It's gonna be two points. You try to point to it looks good to me. And I'm gonna change this circle here, going to object path. Oh, and then outline stroke. You can see what that did. Let me just start bringing. Actually, let me first do five circles again, copying one over and then control d we put the letters first, which is a symbol for vegetarian. And then let me put the other ones. If you want to make sure it's in the center, let's just say this is off center. You just click, shift, click the circle and then the thing you want to I can to be centralized to In this case, the circle put caps lock and then boom, the circle they make like this Boom, It did it. Let me just start rearranging them right here. So I'm gonna put the 1st 1 right in the center. You can see how the guys actually help us. Here, let me take the text from the sides from the menu day because I want everything to be quite consistent. Just gonna make you the same. Great is the title here, which was the third block from the left. So let me just stop naming these. The 1st 1 would be fair budgetary in. Let me do the other one's quite quickly now. And what I want to do is select all of the text I was just created for the icons and then make sure they're aligned to center. And now, if I want him to be bank on in the center, select both of whom the circle and the text. And then with cups lock, select the circle and that would allow into center boom straight to the center. Let me do that real quick with the other ones. And then let me rename these. We're not limited to these five options, and they've got more options, but you can only show five out of time. So I'm just gonna make a carousel here. And the way you showed out to the developer, just gonna put a narrow here, which I took from front icon as well. So this is in the sense up, and I've made it the slide green Cool. Let me take the same arrow, then put it on the other side. Bangle in the center. Obviously then by holding shift, just gonna rotate this. Okay, so obviously this block is quite boring. So yeah, let me create a few callers here. Just gonna put him to this watch, and then we'll just start changing these around. If you remember, I gave you the websites. Teoh, choose the cola pollen. Or maybe you just want to see a few callers that much. The website we're creating. I'm going to use one of them, too. And then couldn't come back with a few colors that I've chosen. I've changed it from this to this. Obviously, it's a bit more colorful. Let me bring these really quick to the more well versions. Well, because it's not too difficult just going to take the text for which I'm not gonna change the size. Bring it here. Bring the small Texas. Well, let me just put days and three lines. Some people like to put the text in boxes like this book. I don't know, just go used to doing it like this. It's not really important. Let me quickly align this to the center. Like so. Then, for the mobile version, you won't be able to fit on five of a bull. I might be able to fit two of them. So let me just take the first to copy and then pasted Ryan here book, because is the mobile version. Things need to be a bit bigger for us to see them. Okay, I'm happy with double. It's just bring him a bit close. Okay? I'm happy that let me group, um, again, control G. And then I can just align them to the art board that I'm just gonna take my to our rose. Actually, let me just take one. Then we're just gonna copy it right here in the middle. Still wanna show that there's the options on the more Bailly would actually scroll with the finger. Okay, so that's it for the icons. If you want to see what we've created, just go to the guides and then click on the I. We're gonna move on to the next section, obviously in the next type. So we're gonna bring in a few more images, is gonna be a school. Fela's as the rest of it. So, yeah, let's move on to the next up, so 9. Making Progress: Okay, So the next thing I want to do now is make three boxes. Each of them are gonna contain a group of drinks. So, for example, one of them is gonna be the essentials. The other one's gonna be the favorites and stuff like that. So let me is human. Then let me make perfect squares by holding shift with four columns. Okay, let me take this one, then. Drug, it's over with shifting old till it touches the center and then control the then boom, We've got the three squares. Okay, so let me go get a few images, and then we'll be right back. These are my free images. Have selected look quite similar in the sense that the glass that continues the drink supreme with the same. It's just different kind of angles and stuff like that, which I love. Let me try and match the size of the glass for all images, so I can see this is the bigger one. So let me bring this over. Let me change the capacity to 60 or whatever. Let me try and match. It's from how more or less it doesn't need to be perfect. Okay, that's good. Then let me do the other one as well. The one with the bananas. I let me change it to 40 something roughly. That's fine. And then let me change both of them. 200%. Okay, so I want to put this one first, the banana second and then the green one. But the cucumber said, Let me bring this in. Actually, let me make him all bigger because I can see this one doesn't fit in the first square. That's about right. Then let me bring the squares in front range. Brings the front. Let me just copy them really quick. So with old, we just make a few more You'll see in a second while I'm doing that. And then for this one, we changed capacity to 50. Okay, so let me see if I can match this now that I can actually see what's gonna get cuts off. Probably making a bit bigger like that. Okay, that looks about right. So I'm gonna call this 1st 1 again, select both of them, and then what's the shape that's in front? That's gonna get clipped mask from from the M E. So controlled seven and then That's her first rectangle. Don, let me do the same thing for the other ones. Okay, so we've got three sections which look a bit boring at the moment. Let's bring in some tanks. So I'm gonna take this with old competes over, let me bring it to the front, make it white. Then I'm gonna call this one smoothie essentials. Cool. Just gonna make this left just to find bringing in the corner here less base in between and then make it smaller so it doesn't interfere with the actual drink. Maybe a bit more in the corner. Just trying to have this distance here at the top, the same as the one on the left. Just do anybody I and then let me bring a button as well. Obviously, I'm gonna take one. That's what really created control. See, control V, but in the buttons way too big. I think you just make it smaller. Then let me make the boots and color the same as this because discolored actually works with the strawberries as well. And then let me make that sex I want we just put learn more, Okay. Actually fits quite nicely. Just let me just make it even a tad smaller. Cool. Let me bring this text over here, which you've got a problem because you can't really see it. But we are gonna fix this soon enough. I just want to make this yellow. I can actually take the yellow from here. It's probably not a bad idea. Yeah, let me keep it a most and cooler. Let me copy. This is well, once again and then take a green from this actual drink. I want something, but yeah, that's about right. Obviously not all of them were smoothie. Essential is this one's gonna be customer favorites, and this one is gonna put all the greens Just gonna keep the learn more for all of them. But as I said before, you can really see the stakes for these two. So what? I'm gonna do this, but the boxes I've just created bringing back in. And then as we did with this one, let's make quick create ings. First one's gonna be with the blue. So what I'm gonna do? I've already have the colors from the icons here. So what I'm gonna do is select the box, go to radiant boom and Then what I'm gonna do is put the color in. If I go to this watch panel, I've got this blue. Obviously, it's a bit too harsh, you know, I'm gonna fix this. The 2nd 1 I want us is your percent. And then the other one I wanted as maybe 50% and then selecting the radiant, just gonna bring it a bit just like that. So now when I bring this over who you bring this over here as well and then controlled the if you haven't made the boxes here, it's not a problem. Just make sure the Texan, the buttons in front, off the Grady in and the image is behind the grating. Okay, let me change the color here. So this is gonna be trying yellow. It doesn't need to be exactly the same, cause it's quite faded. We can see now you can see more off the text. The limited. The same thing with the green here. Boom. There we go. Um, maybe you bring up a little bit more yellow into it. Okay, so that's pretty much a 60%. Let me try and much it if you want it to be perfect and start over, uh, do the yellow first and then change the other ones. But it looks fine to me. We delete these two boxes cause I don't need him. Okay, the only thing that's bothering me is that the strawberry here at the top, you can't really see it. So just click on this and then I'll make the grading for this one. Just like that. It's not really obvious. Obviously, it's not the same as the other ones bought. It didn't bother me here because this is yellow and this is green. You can see it's much so let's delete these. And then let's just put him on the mobile version because this quite straightforward, just like the art board make it even longer. If you go to layers, you can unlock the guides because and we'll have to make this longer. You don't have to book. You might help you, Loki back into place again. Now just take them all. And then, with all just bringing a more blue, it's where you can do now. Is all of them selected the shit selected as well? We'll just try and hit the guide. Obviously you can do in one by one, which is not a problem. Because regardless of how you change them, if all of them hit the guys, then they're all gonna be the same size she's groups to fear. Then let me bring this a bit lower and bring the other one I'm trying to do here is put a bit of distance in between them, but not too much. Forgot to group this one. For whatever reason, this distance he and I just wanted to be the same as this. So yeah, we are making progress. Let me get rid of the guides. That looks good. Um, next step. So we're gonna finish off with the footer, and then we're gonna put a few more element in just so, Ties it up together. So yep. Except so. 10. Website Footer: this created quick footer. If you don't know what a foot is, pretty much the end of the website. Let's just make a rectangle as we like to do here. Height. If it doesn't really matter, you can change it. If what you want to put in the foot doesn't fit, you can spend a better time on the photo. But I'm just going to try and make something quite simple for this website. Let me take the logo. Just want the color, which I'm gonna take from the background of the logo here as well. Let me take some text. And then I think that's it. So let me bring all of this over, make this, um, green and then delete background. And then the logo could put it in the center right after I'm putting it in the front. So I think that's the right size. I'm gonna go to window a line, then make sure it's in the center. Probably gonna make it such a good. Okay, let me bring this in. Arrange, bring to front. But I want to change it to white, and I don't want it to be semi ball. I just wanted to be regular. So let's imagine this will be the privacy policy. And then straight after that, we're gonna have, ah, terms and conditions. Then put a few social media icons here. There's a few ways of going about social media icons you can actually taken from websites like free pick and all of that. Or there's a few phones to actually have all of the icon. So I'm going to tell you what the front is. You can find it on the fund dot com and the front is called Tycoon Regular. Okay, we do with this font. Every letter has a social media stuff. So what I like to do is probably not the most professional thing to do. I just like to put all the letters, Okay, All most of them. I copied this over. And then if I go to type change case that all of them open case you can see rather than having the icons in strong circles there, the icons are getting caught out off the actual circle. So I think I prefer the second version, which is the caps lock on version. Let me just take a few Aiken's. We just put this in the sensor, which is cool. I'm probably gonna make it bigger. And then Bolton, right? Just to put a bit of space in between them. Let me make it right. Just fight. I just would help with my guys that have hidden eso. Let's go to layers and they make this visible. Okay, cool. If I control shift and all, I'm gonna outline it. That's good enough for me. Let me just make it even bigger, okay? That's right. Let me just copy this. Put it in the center, make it a bit smaller, and then limit you say trainee journey juicer. Full rights deserved. Okay, let me just put this copyright symbol, which I don't know how to support, which I don't know whether it is on the keyboard, but what I like to do is just gonna copy it from Google. Okay, so I just went to Google of copied it from somewhere else, and then control V put it up back here, OK? Pretty annoying, because it's not in the center, So let me control that to undo. Then let me put this year control shifting all to outline, and then Amy put it right in the sense of what I want. And then with shift, I'm selecting both of them group. Now let me go back to the linemen panel, then in the center, and that's it. Let me quickly make this shorter. I just wonder where the website ends. Let me own. Look, the guides make this shorts as well. Okay? And then let me just bring this effect that I've created here as well. A range, actually. That's good enough. Let me just bring it in. And then rather than putting it in front of the box, I'm just gonna put in the box at the back. Cool, Actually. Let me flip it over. And then I make the waves start from right to left. So to do that, the boxes selected with my affected it's gonna click on the reflect tool. You can see there's a circle here with shift just going to take you from left, right? Okay. You just much it they're happy with that. Then let me quickly clip Master into my foot. To do that is gonna make quick box. It doesn't matter where it ends as long as it contains the whole greedy int box selected and would shift. I'm selecting the waves as well. Control. Seven. The clip mask is now created on top of the social media icons and probably on the Texas world. But it doesn't reach you, so you don't see it just going to select both the waves and the box in the background, the range sent to back and then boom. There we go. So let me quickly do this for the mobile versions. Well, let me take the background. Let me lock the guides really quick. Let me take the background. I'm gonna put it here, then probably gonna make it way bigger. And I'm probably gonna need more off this effect. So rather than having to release clipping mask and do it again, where you can do is select this direct selection to and then click with shift click on these bottom ones. Then just try to get down. You can see what you did here. Make the box bigger. It's probably a bit too much space. Let me make is exactly what it ends here. I could have actually double clicked on it and then move it if I wanted it to Let me just make it as big as the wave box lets me do it. Okay? You just move it out of the way about because I wonder effect here. But I just want us to be subtle. Okay? We make a box real quick on top of everything. Just make sure it's exactly the same. Select everything with the box we've just created at the top and then control seven. Boom. Let me make this biggest. That tool probably should have put everything in first bought. Pretty sure it's gonna much Let me unlock the guides. Make this a bit in front. Okay. Cool. Then let me start bringing stuff over. You already know how to do this, To be honest, if you know how to move stuff, clip mask. Uh, and you've got a bit of ah, a bit of eye for detail. Then you're set to go. Just take the east to again right underneath a range, bring to front. And then? Then we moved them a bit closer, grouped him, then put him in dissent. Then let me take the icons as well. Well, big time. You are gonna get quite fast of doing all of this moving stuff, rearranging stuff. It's not difficult limiting the copyrights stuff as well. Which is group control. See, I don't know if you've noticed, but this Jew is I like to coffee store for, um either holding gold and dragging stuff or I'm selecting something control. See then zooming into into the place where I wanted to paste and then control V That's it shift. And then cops Look on the 2nd 1 and I cannot align it to that because I know the juice is in the center. It actually works. That's our beautiful website. And the last finger one of you Let me lock the guides. Let me hide the guides as well. This is how long website looks. Okay, Let me tie everything together. Let me put a background where the white is. Normally I don't I don't do this. I actually like the white, but I think it's gonna work here. So let me find the image on the one of the websites. I keep mentioning it, and, uh, let me come back with it, okay? So don't get scared. Not going to use the front flowers. I just like how the wood looks and I think it actually much is the look of the website. But let me just get rid of the flowers first my clipping masking them out of the image control seven. Then if I put this right at the back center back then let me stop putting it ride here, Okay? The only thing I'm looking up at the moment is that it's a bit too harsh. Images clip, mask this really quick control seven has always arrange center. But let me just change the capacity to 50. Maybe because he is very subtle there. Okay, So what I'm going to do now is copy this over, ride here, and then I'm going to take the box. The white box we've created right at the start of the course and put at the top. I'm going to use that to create a clipping mask. Okay. And then let me bring this over to the menu here, try and much it and then arrange center box and then boom, Let me just move it over. Hit? Put a bit of it. Obviously. After what? The white box. That's why I can't see it. Cu I should have deleted the white box book, but I can quickly make this to create a clipping mosque for it again. You don't have to do all of this. If you're happy with the white background and pretty much good to go, let me copy. This over is, well, let me make it bigger so it fills the whole thing. Now the good thing about this images, because this winds and because I've used the capacity, the fact that it's not crystal flair, it doesn't matter because it gets lost into the background, especially on the phone version. So that's very subtle here. But I don't mind the lines year, so I'm just going to leave it. Is that so? Yet? 11. Exporting Assets: now they've got your website. Really? You'd probably want Teoh export the files to get them ready for development. So if you want to pass the images and icons and all of that, your developer or you plan on creating it yourself in Elemental as I like to do, how you export all of these files now this two ways I like to do it. One of them is quite fast and quite cool as well. It's with the newer versions off Illustrator, you go to export export for screens acid export panel If I select both of whom and first group them So you have to group on first. No, If I drug it here, it's just want same thing with the icons. Obviously, let me and group this and let me lock this into place. Let me take this icon. I have to group at first and then if I bring you over move obviously seen with this one group at first put it in for this website, for instance Why Why would select? Is this the icons? These five Aikens the logo by itself? Just do it quickly. Actually, let me just copy everything over way wanted you is select all of, um Why holding shift? I'm selecting them to. And then you have to select the form art, which for this instance PNG SVG work. Just gonna keep it PNG and then click export Choose your folder or whatever and then that's done. Now you might be asking yourself What about the image? What about these boxes? Here, let me share something. If I group this, then try and bring it here. You can see what it did. Hear it took the images. Well, so without the clipping mask. So if you designed to edit stuff like images in illustrator like we've done it, there's a way around it to export stuff. Obviously, some people prefer to edit all of the images outside of Illustrator and then bring them in . Then you can do this. The acid thing. It doesn't work here. So what did you use? Let me close this. Create a new file. It doesn't really decide this really matter. I'm creating the file and then let me take this boxing control. See? Then we're working in a different art board. Now let me push it right here than the art board is gonna be the same size. Cool. Okay, let me delete the text or let me in. Group at first, limited lead text. Let me delete the bottom. And then this is the actual asset. Because the text you're gonna put on top of the image afterwards Because the Texas not an image. Neither is the bottom. So after this file export and then safe web. Okay. So you can see this is already done. I wanted as a PNG the size and everything's already done for you. And then again, you create you click save, then that's it. Let me do it again with another image. Let's say you want to export this now. This is a bit more complicated. What? It's not complicated, but it's not a straightforward as this. And what I would do with this is control. See, Control V obviously have copy. Didn't here let me make the Ardmore biggest this So if we remember, this was done with three layers here. So once with the waves ones, the actual image and then the other one is to creating here only the images on the or board you have it file export export for safe Web legacy will appear eventually. It's a big file. So they go, That's your fine right there. Again. Save saving whatever you want. Okay, so that's what the image they are. Programs that you can actually do the grading in there. So I'm not going to export this at the moment. But but I ain't going to do is export this one. I need this on its own is what to do again file export, safer Web legacy, but and make sure transparencies think here Cool. So we'll have. So we'll have. Here is the waves with the transparent background. So again you'll have to save it as a PNG again is very important because you need it to be transformed. Save it, and then last on when you're gonna put the website together, you put the image. Then on top of the image you put this well, you put the radiant and then you put the waves. I'm sure that makes sense. So then this is done, then you'll bring in the text. The buttons is well, but obviously you'll have this to look at and try too much. I guess that's it. The last thing you would do is actually send a screenshot off the whole thing to your developer. But that's how you exports files. So if you want to create this website, I do have a course that it teaches you how to use the world press and plugging that I love to use called elemental all of their assets. You're going to export from here. That's gonna work wonders with with that course of mind. So you give a shot, see if you like it. If not, then thanks for sticking around and, yeah, you've done well.