Web Graphics with CorelDraw and PhotoPaint | Dan Webb | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Graphics with CorelDraw and PhotoPaint

teacher avatar Dan Webb

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

26 Lessons (2h 48m)
    • 1. Getting Started

    • 2. Raster Vs Vector

    • 3. Aspect Ratio

    • 4. Resolution

    • 5. File Types

    • 6. Team Photos Intro

    • 7. Team Photos Photo 1

    • 8. Team Photos Photo 2

    • 9. Team Photos Photo 3

    • 10. Headers Intro

    • 11. Site Header

    • 12. Background Images Intro

    • 13. Team Background

    • 14. Thumbnail Images Intro

    • 15. Articles Office Image

    • 16. Articles Team Image

    • 17. Articles Website Image 1

    • 18. Articles Website Image 2

    • 19. Customers Logos Intro

    • 20. Customer - PlayAway CorelDraw

    • 21. Customer - PlayAway PhotoPaint

    • 22. Customer - QuickstartAcademy

    • 23. Icons - Intro

    • 24. Icons - Connect

    • 25. Icons - Grow

    • 26. Icons - Find

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Welcome to Web Graphics with CorelDraw and PhotoPaint where you will learn about web graphics while you use Corel Graphics Suite to create actual projects. No long periods of going through tools and menus item by item. In this course, we’ll jump right in and start creating and learning. By the end of this course you will know about raster and vector file types, you will know what file type to use, when to use it and what size to make it. You will also be comfortable using CorelDraw and PhotoPaint to create, edit and draw web graphics. You will have taken a website from template to designed with custom images.

I designed this course for people like me who don’t learn well when they are overloaded with information but find it easy to learn when they are doing and having fun. 

The ideal student for this course is anyone who wants learn about web graphics and would like to use PhotoPaint and CorelDraw to do it.If you don't have Corel Graphics Suite you can get a 15 day free trial on Corel's website.

I use Corel X8 in this course but most everything can be accomplished with previous versions too.

Meet Your Teacher

Teacher Profile Image

Dan Webb


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Getting Started: Okay, For this first section of this course, I'm going to share some knowledge with you that you need to know before you get into Web Graphics. We're going to talk about raster and vector files and the differences between them. We're going to talk about aspect and ratio and proportions, and how to handle them correctly. We're going to talk about resolution and dispel some myths about resolution. And we're going to talk about file types and gives you a guideline so you know when to use what type of file and what the best uses of NMR. And give you a guideline that you can follow. So you always can choose the right file type. So let's get started. 2. Raster Vs Vector: one thing you really need to understand before you dive too deep into Web graphics are graphics in general is the difference between raster files and Victor files. We're gonna be dealing with two programs in this course, and they are crow, draw and krill photo paint. Crowd draw mainly works with vector files and photo paint mainly works with bit map type files raster files. So let's show you the difference here. So here's the logo that we created in our last course called CorelDraw. Quick start. We created some logos and and, um, used them in some projects and stuff. So if you haven't taken that, you might want to check that out. But anyway, this is a logo we created there, and this is incredible. And then if I flip over here, too photo paint, you can see the same logo. We flip back and forth a little bit. This is curled or all this is photo paint. At the size, you would actually use them in the one on the Web. They look pretty much the same. But if you're getting closer, zoom in to assume in full screen on this one, and then we'll go over here and zoom ins full screen on this one. So as you can see now, we're getting a little closer. You can tell that the Carell drawl vector file is still as clearest can be. The photo paint bit Matt File is starting to look a little jagged. E. Let's get a little closer ins and check these out a little bit. So this is Krell drawl. If I get in here on the P part of it, do you see? It's still crisp and clean because these are all lines. This is actually ah, Siris of lines. They're filled with colors and all that, so they always stay looking super crisp. You could even get in super close, and it's still crisp and clear. So get back out where I was here. And then we'll jump over to photo paint. Let's do the same thing. Get in here. And as you can see, the photo paint file or the raster file is a series of little squares. We call those pixels, so it is when you see ah, that a file is 6 40 by 4 80 year are 400 by 200. Those air pixel with and heights. So how many pixels are across? And how many picks is air high? So that's what a bit map, violins or a raster file is is of Siris of dots. And you might think, Well, why would you ever want to use these if they're gonna look junkie when you kept close to him? Well, graphics for the Web are generally all raster type files, So what you have to do is you have to know how to get him into a a sighs that's gonna look great on your page, even though it's a series of dots like that right there. That looks great. And that's about the size. We would have used that particular image on a Web page. You will get into more that in upcoming lectures. 3. Aspect Ratio: Well, the term you need to know is aspect ratio. So aspect ratio is just a fancy way of saying proportions. So the proportions of your image or graphic and to that you might have heard before is 16 9 and 43 These air to common sizes of computer monitors and televisions. If you look in the power point, see, there's two different slide size choices. 1 16 9 and ones for three. They're both already built in because their common monitor and projector sizes um, so what this means is there's for every 16 units wide. There is nine units tall, so size does not matter in this. So if I take this thing and shrink it all the way down to this, it's still 16 9 If I make it a Z bigas this, it's still 16 9 The size doesn't change the aspect ratio. This image here I brought in from unspool ash dot com. I'm not sure what the aspect ratio is, but it's not really important as long as I keep the aspect ratio the same when I'm messing with image, one thing you don't ever want to do is change the aspect ratio like that and squish an image or stretching image that is always noticeable, and it's always looks unnatural. And that reminds me of the HR director for the company I work for. It was always a running joke when we had a new hire in, she would send out a picture of the new new hire to welcome them aboard, and she would squish and mangle the pictures. We always wondered whether the head would come in short and fat are tall and skinny because she squished it into fitting into her little box that she wanted. And it was always one way or the other never was natural proportions, so we always got a kick out of that Anyway. If I was toe do this, that would change the aspect ratio of that box. So now it's like 16 to probably somewhere around there. So as long as you use your corner handles, you keep everything the same aspect ratio. So we'll talk more about aspect. Ratio is the course goes on and how to change the aspect ratio without messing up your images. 4. Resolution: Okay, so one other thing we need to clear up is resolution. So when I say resolution, I'm sure most of you think dp I or dots per inch and coming from a printing background or designing for print. That is a perfectly natural reaction. And not to say there isn't dp I in Web graphics, but it is not important. There is D P I or P P I, which is pixels per inch, and that would be a more proper way to say it. But once again, it's still not important. So what I'll say is, just use 72 pp I or d p I. Coming from a printing back down, you might be thinking, that's crazy. That's way too low resolution. But that is pretty much the industry standard when it comes to Web graphics. And the reason is is we do not use linear dimensions. D p I and P p i. R pixels per inch requires that you are dealing with inches and on the screen. You just don't do that. You don't know what size monitor the user's gonna have. You don't know what zoom level they're gonna be using. You don't know what device they're going to be using, so instead, we just use the pixel dimensions. So when we refer to Web graphics, you refer to them in the pixel dimensions. You don't say it's a one inch by two inch image. It is actually a like a 400 by 250 image or a 600 by 1 50 Image are 200 by 200 image or a 1 20 by 600 image. So that is the way we refer to them and using 72 PP. I like I showed you in the first lecture. When you have it on the screen and you're looking at it at the right size, it looks crisping clean. So if you change your way of thinking and just use 72 pp I for everything, and I will show you in a later lecture how to decide what the mentions to use. If you use pixel dimensions and 72 BP, I, you'll be safe, and you will create great graphics for the Web 5. File Types: one of the thing you really need to know about when getting into Web graphics is file types and when to use what and when I talk about the file types of Web graphics, I'm talking about raster type files, not Vector. Remember we talked about Raster and Vector earlier? There's really not a great way to use vector files in Web graphics. There's SPG, but it's not very widely used, even though it is powerful. But it's, ah, programming language in itself, really? So we're not gonna talk about that here. That's out of the scope of this course, and to be honest with you, I have hardly ever used it. So I got this flow chart from Google and tweaked it to my liking. So let's go down through this and this flow chart, which I've included in your re sources of this lecture. If you follow it, it will lead you to the right file type to use. So when we're talking about Web graphics, we're really talking about three different types of files. Gift for Jeff. However you want to say it. Ping and J. Peg. So it started the top here. First question is, do you need animation. If it's yes, you're going to use a gift. If not, you're going to move on. It's really about the only time you used gift is when you need animation. Do you need to preserve fine detail or DKNY transparency? If so, you're gonna go over here to the ping. If not, then you're gonna go to J. Peg and I used JPEG probably 80% of the time. But if you need to preserve fine detail or you need transparency, you need paying. Do you need a large color palette? Argh. Radiant transparency. So do you need do you? Does your file have a whole lot of different colors in it? Or does it need to have transparency? That that fades out fades too transparent. If it's yes, on either one of those, you use Ping 24. If it's no use paying eight. So what? The difference between Ping 24 Ping eight is is Ping. 24 supports a regular RGB palette where Ping eight only supports 256 colors. But what's nice about the being aid is it's optimized color. So when you're exporting this, it looks that the colors your file needs, and it chooses that best 256 colors for your file. So a lot of times you can get away with paying eight and your file still look just fine. The drawback. Another drawback of being eight, though, is it gives you transparency or not transparency. So it's one bit, so it's either clear or it's a color. Where in Ping 24 you have all different types of Grady Int transparency so a color can fade to fade away in a transparent where in ping aid, it just turns off. Okay, so that's the difference between those two. So for J. Peg? Like I said, you use this 80% of time, and one reason is they look great. Another reason is there are a lot smaller than Ping 24. For sure. What you need to do is experiment with quality settings, so experiment with the different quality settings there are, and make sure you choose the right file size. And then you can get a nice, good looking small image, though download quickly. So if you follow this guide, you can always choose the right file type, and I've included this in the as a download in. The resource is so you can use it for future reference 6. Team Photos Intro: okay for this first project. We have a team section and there's three team photos across here, and we want to replace these with riel images. I have them here actually got them off of unspool ash dot com. What we need to do is make thes all consistent across here. So we needed in fear of what size we need to make him. And we want the head to be about the same size in each one of them as you can see from these their varying sizes. So I want to make sure they all look consistent across here. And so first off, let's collect some information and we can get started. So if we right click on this and Hit Butte image info, I'm in Firefox browser. You can see that this is 1 60 Bowen 68. So, um, we're gonna call that we're gonna call it square just by looking at what we got going on here. And right now it's actual photo is 2 19 by 2 30 and scaled the 1 61 68 So that's what we're looking at their 1 60 And if you look at this thing, if I select across that you can see it's a circle. Let's do one other thing here. Let's go inspect Element. That pot was on there. Then it popped off there. So let's go and hit Pik element here from the page and then click on the image. Okay, so now you can see we have a rounded circle. And so I told me selected. You could see that you can see the actual images square, but it has a class that's rounded circle. If you like it here as a border radius, what that means is that is CSS. That's added to this to make it look around. And as we drag it, we can see that it is around so we don't have to make it round. We just make the square image just like this one is. If you really want to go and see this, you can hover over that, that you can open link in new tab. Now you could definitely see out the square image, and it's just drawing a circle around there. So all we have to do is worry about the square and getting these consistent across there. So let's get started 7. Team Photos Photo 1: Okay, We're gonna start with Ben Johnson here and get his photo ready and get it in the circle there. So let's go over to the photos that we have And grab Ben Johnson. I'm gonna right click on him and say open with crowd photo paint so it's gonna bring him up in photo paint. Okay, so, no, we haven't been photo paint. We want to start with the square that we're gonna work with because we know it's a square image. Someone a choose the crop tool over here. There's 1/4 down here and and then control, click and drag and get a square. So I go about that big there, and I want to move it around to his head's kind of in the center. I think that's gonna be my circle there. Let's have a little bit more toward the top. My goal is a little bit smaller to that. See, I think that's good right there. So now to make this crop actually happen, we need Teoh DoubleClick in the middle of we double click out here. It will reset it of a double flick in the middle. Now we have it cropped. Okay, so I think Ben is gonna be pretty easy here. So now we just We have our square, and now we just need to set up the right size because, as you can see here, it is very high resolution. So it is way bigger than we want to be. When you're putting things on the web, you wanted to be the smallest possible that you will get a good image at the biggest it'll ever display. So we know where 1 60 So for smaller images like thumbnails and all that, you would probably want to double that. So we're gonna take him up to 3 20 by 3 20 in pixels and we're in a saving it. Is that so? Let's let's go ahead and go to image and go to re sample. And now we can change this to pixels here. And then we'll go into the with here and type 3 20 You see, the other one changes to For some reason, it's gonna be 3 21 That's a little quirky, but we can fix that here in just seconds. So we will make it 3 20 by three to money one and will hit okay. And you see right here it's gonna go from even on compresses. Gonna go from 17 megabytes that square to 300 K That's a pretty good reduction there. Okay, so let's see what he looks like. Now. You will zoom in here by scrolling upward. Now, you can see you can start to see pixels in this face, but he's gonna be displayed on the screen about like this. So I would say we're doing pretty good if we go to the zoom and hit, um, 100% I think. Where you 100%? Yep. There's 100% there. He's gonna be actually half of that. So we got a pretty good image here. Okay, let's take care of that one pixel difference. Um, it probably will not matter, but I wanted him to be square, and I'm gonna make him square. So let's go to paper size, and we're just going to change this two pixels and we're going to change this. 123 20. Now it's gonna cut a little bit off there and make it exactly 3 20 by 3 20 Now we're going to ah, file export for web and we're J Peg. If you're not changed that to J. Peg. Um, there's our web formats we talked about earlier and we got RGB color has on screen. Things gonna be RGB. I'm not sure why they put see him like a even in this box, But they did. And then we want Teoh. Look at the settings here with 3 29 3 20 Still where 70 to do about which doesn't matter. This is what matters. And if you look at the box down here, you can change this the different speeds so you can see that's gonna show pick 0.3 seconds to download that image. So that's a pretty good right there. So we're gonna save as, and we're going to put it back into the team photos directory. I'm just going to make a new folder so we don't mess up, our other ones reduced, and we'll put him right in there. Ben Johnson saving for the Web. I like to take spaces out of them. It makes it easier on the Web somewhere. Make him camel case. Ben Johnson safe. Okay, there's the 1st 1 and now I'll put it into the website and we'll look and see what it looks like. Okay, now here we are, back in the website and we have Ben Johnson's picture in here. So his head's in the center and the image looks good. So now we'll move on to Carl Kent next. 8. Team Photos Photo 2: OK, now it's time to fix the photo for Carl Kent. So let's go back over to our photos again. This is our Karl can't photo. I'm on a right click on it and say Open with crowd photo pain. You can go and hit open here are open here and navigate to the spot. But I find that if you already in the directory, that's an easy way to do it. Okay, so let's start off with selecting the crop tool. We're gonna create the box. So now control and click and drag. One thing to know here is if you drag off the screen and then let go, you're not going to get a box. See how that's. That might be what I did in the last one to get the one pixel difference, even though I was close and same same way. If you drag it off there that way, see, it grows larger and that might that'll. So now it's even Mawr ob long. So let's redo that. Some are double click out here to reset, and now I'm going to just control and click and make sure I get that box. Now that I got it. If you drag and hit the side, it will not resize it. Also drag it that way. Had the side for some reason. Won't let me drag it upward. We're gonna get that close to the top without hitting it. And now I'm going to go down this way a little bit. Shouldn't have to be this careful with keeping it square. But the way it is being always look up here and you see, I am out of square a little bit. Make this. Ah, 92 here would be perfect. You can always do it that way. Now we're perfectly square and I think we're pretty good here or pretty close to the center . I'd say we're pretty close to the same size we were on the last photo. He did a little bit space above his head. You always jump over there and look at it. So let's jump back over to our page and little space over there. It's the biggest head is in the middle. Go back over here. They were pretty close. Some of double click in the middle to set that crop in. And now we're going to We're gonna do this all in one swoop. Instead of re sizing up here and adjusting and all that, we're going to go file export for Web, and we can do all this in one shot. So now see, it's real big in here, but we're on our J peg and we're on our It seems that the high now we're in pixels here and we can change it to 3 20 here. Okay, now it kind of disappears here, but we have some zoom functions up here. Let's hit soon to fit. There he is right there. And this is actually showing with the resolution and the compression and everything you're getting. So if you wanted to zoom in here and see what you're gonna get, you can analyze them to fit again. And now, if we look at at two megabytes per second, for some reason, there's a bug where you have tow read Select that a few times. So I select it. And a few times now it's telling me the size is gonna be 13 k just small on its 0.1 seconds to download this guy. So it's a very good download rates. So we're gonna hit save as and I would take the space out of the middle and Marty in their directory, were before. It's one thing I like about the Crow products. It always goes back to the working directory you're in. So that's really handy. Somebody hit safe. So there's Karl Kit done, and now I will put him into the website and we'll see what he looks like. Okay, there you go. There's Karl Kent on There have been John's on their next is Emily Clark, and we'll do that in the next lesson. 9. Team Photos Photo 3: okay. And this lesson we're going to replace this picture here with a picture of Emily Clark. Let's jump over to our images directory. And here's a picture of an early Clark that they gave us. So we're going to right click on him on her and say, Open with photo paint. All right, so one thing I can see right off the bat is this is a lot closer up picture than the other two are. So it's gonna be hard to get enough background in here and still make her head the same size as the other two. So we're gonna have to work on that. So let's jump right in and start doing that. So what we're gonna do is add space around this. So first thing we'll do is if you don't have an open already object manager here, go to object and object manager, are you hit control F seven? You see, it's gone now and you just open it, open it up, and that's what you should see. And we have a picture on on the background. So what we want to do is want to create an object from this background here, so there's a button right here next to it creates an object from the background. So what this background means is stuck to the back of the image. You cannot move it around. You cannot do a whole lot with it. I mean, you can change it, but you cannot moving around in layers so they can't put anything below it. And that's what we want to do. So we're gonna hit, create object from background. I can just say it says object one. All right, so now we're going to add some space around this, and so we're gonna go to image and paper size in this paper size. Let's go toe pixels. Since that's what we're working in. And I want to change this. Let's say I'm gonna make this maybe 5000. I have the Senate bottom center him. We'll show you what that means here in just a second. Let's make that 6500 all right? And you can see it kept the picture bottom centered because that's what I had selected. If you had top left, you move this thing around. But we wanted bottom center, and that way it adds space there. They're in there. So you hit. Okay? Never go. It did it. And he knows it's a checkerboard instead of white. And what checkerboard means is it means it's transparent, so it means there's really nothing there. So you would be able to see through this in the image if you saved in the right file format , as we talked about earlier. So anyway, let's add some boards out here and then we'll add some boards on the other side and some on the top. So let's start with this side here. I wanna duplicate this, so it's right. Click on it and hit Duplicate. And now I want to get the bottom image here, and I want to just drag it over. You see, I got I got a picture of this image back there. I'm just gonna drag it over to the side there. I just want to add a little bit. I think that's probably pretty good. Zoom in there A little bit were lined up pretty good, so you can see I was just lining up the boards there. Now I want to click on Object one and then shift click on the next object, and then I want to right? Click on everything and say combined. Combine objects together. Okay, so now we have one object that looks like this with this added side over here. Okay, So what I want to do is I want to go over here and I'm gonna clean this up. I know. I'm gonna want to at least come down to below her whenever this is jacket or chair, whatever. That's sticking out here. So I want to start getting some of that cleaned up. So let's middle mouse clicking to pan around and dragging. So what we're gonna use here is what's called the clone tool. It's about six down, I believe. 123456 And it's a fly out. So there's a few different tools and there were music. Clone tool. So what this does is it takes a copy from one spot the size of the nib, which is that circle, and copies it to another spot. And I have it right now set to 81. I'll show you what different things do. So if I was to say, put it on her mouth here, and I right click that sets this location and Then I left click over here perfectly round picture of her lips there showed up and I can draw right around. So there's a picture of her lips there and you can see it's real sharp edge because I changes a soft edge. Let's redo that. And I bring that back up to 81 again and you'll see what you get. Um, run 80 some around there so I'm left. Click now and you see how it's softer around the edges. So that's what we want. You have a transparency setting up here to me. I'm do those controls e to go backwards, turn this transparency up. And as you could expect, it just is a little bit transparent. So you see the wood grain through it a little bit. So that's what those settings dio. I'm one a little bit of transparency, but not much. I want maybe maybe 10. You can play with these different settings and see what works best for you. But right now I want to just take this sharp line that's going down through out of here and copy some wood grain over. So I'm gonna left our rooms right, right click there and then left. Click there and I'm missing. Start clicking around here and get rid of some of these thing. See, that went away. Now, let's go over. I'm scrolling the middle mouse button to zoom in and out, so that's a lot darker right there. I'm gonna come back over here. Right. Click left, click there and start copying, son. Over that way. Right. Click click. You get the hang of that. And, um, it'll be really natural to you, but, um, sometimes you get it where it's off a little bit. So you gotta watch what direction? Things, air running. So see how that brought my seemed down a little bit. I'm gonna control Z that I'm gonna get my nib right in the very center of that line. Right? Click and get it right in the very center here and left. Click. Now you can see it. Can't even tell the difference there. All right, now I'm continually doing that. Right. Click left, Click. And here we go. We're doing some work on this. And where you got a little bit done here. I think it's about time to save this off. So let me do a little bit more here. Okay, so I don't like that double. Not there. We'll save and then come back and get rid of that double. Not. And we're gonna save it in photo paint formats so we can keep all of our layers and all that stuff intact. So where it will put it in the reduced folder for now and then just leave it in. Lee Clark like that. Let's go ahead and change it to cpt, which is a photo paint image. Just hit safe. So now we got all of our change is safe. Let's go ahead and zoom out, zoom and by scrolling that middle middle wheel and zooms into where the cursor is pointed. So let's get rid of this little area right here. So we're gonna right click their lips. I was looking thrown one to the circle in here and right click there and then left. Click. They're looking at that green a little bit tow. Line me up. You can just click out it. You can drag it around, Whatever. Whatever feels good for the moment. Alright, Right. Click out here and start doing this. Just paint it down for a little ways, you know? I mean, this doesn't have to be perfect, although so far we're making it look pretty perfect. We, um we are not gonna be able to see this very well. I'm just wanting this to be a nice square image for us. So, um, that's why I'm going this far down. I just wanted toe. Come on down this way. Now, let me. I'm gonna bring this edge down here a little bit. You see how that works? All right, here we go. I'd say that's probably as far as we want to go down, or we need to go down. We put a little bit more in there. Sometimes you gotta click instead of drag because it'll you'll run over an edge, and it'll start copying that edge to like I just did. But anyway, here we go. Okay, so now we got that done. Now, let's do this other side over here. Just drag this out a little bit over that way. So let's go ahead and make a copy of this again, were duplicated, and we're gonna click the bottom one. We're gonna get this electoral, and we're gonna drag this over and line those lines up. As you can see, I don't need much on this going to keep her shoulder out of the picture. That was coming into view here. Here we go. All right, Now we're gonna select the top picture again so we can start duplicate out and duplicating on it. And that's it. Right there. I have it. Clone clone tool again, and we're gonna start doing some of this. So that's to start getting rid of this line as much as we can. That right? Clicking over the nail right. Click their left click together now, right Click their left leg Greater than now. All right, here we go. Let's take this section here and take it right on down through there. Current of that one line in the middle there, Right click in the middle there and left. Click. Here we go in the middle there. Right click. Now there. Left click. That's good enough. It's not perfect, but it's good enough for what we're doing here. This is just a background that's going to kind of blend in love. It's going to cut out. Um, but I find the clone tool to be the most fun out of all the tools in photo pain. You can do some fun stuff with it. All right, middle click and drag to pan down, and we're gonna get rid of the Southern. Let's get rid of these Neil's first, because they tend to get in your way when you're in Dragon. Down. Here we go. All right, so right. Click in the middle of that lips I was looking throwing again, right Click their left click about right there. Here we go. That's good. And I'm just gonna keep on going down here. I think I'm lower than I need to be already. So here we go. I think I'm getting it. I just want to get rid of where you can see these vertical lines. Really more than anything. Otherwise, it just might just look like a little bit of a sloppy stain job. All right, I assume out looks pretty good. Okay, Now, let's put a board on top above her head here so we can go a little bit higher here. I don't even combine these together, which you can see it at work work. Either way, let's go ahead and shift. Select right. Click on him and say combined combined objects together. Then we have that side done. Now let's duplicate this guy again, and I'm gonna grab the bottom one. Select our selection tool. Amherst gonna click and drag it up a little bit. And really, on this, I think if we keep that seem out of there, I think all we really have to do is just about get rid of her hat. So looks like we're duplicating a little bit of an issue we had up here. But we'll get that here in just seconds. Just go ahead and combining together first. It's like both of those combine combine objects together. Now we will have just one object sitting over the top of the background, the clone tool again. And we're going Teoh. Yeah. I want to get rid of this. Not here, because it looks like a duplicated double. Not Here we go. Looks better. Yeah, I think this looks like a little bit of a problem here, so I'm going to bring this over a little bit, get rid of some of these lines that you could kind of see. And now I'm going to start over here and bring him this way. So I'm going to start getting rid of her hat there. I'm working into it a little bit here. And that way I don't run into the hat and actually copied the black Line somewhere. All right. It's a little bit of hush of a sharp line right there. Let's go ahead and and get rid of that a little bit. It's kind of fun and kind of artistic because you're trying to make it look as natural as possible. All right, I think we got it. Solicit him out and see what we got. All right? I think we got it pretty good. I still see a line over here, but you know what? Yeah, because I never went up there and fix that. You know, I'm going to really see this in that finished picture we're gonna use, because it's gonna be in a circle. But you know what? I wanted to be right if you look at the whole picture. So there we go. I'd say that looks pretty good. Now, let's go and do our cropping. So now we should have plenty of material to work with. And sometimes the jumps on the middle scroll wheel or too much. See, that's that's one jump there. So sometimes you have to go over here to the zoom and just you can just draw a line over around what you want to see. And now that the crop tool and we have more to work with now so we can get that square big and after worry about running off the edge like we did before. So now you can see we have plenty of extra space to work with, and I think that's about where we want to be. It looks like I didn't quite go far enough there, which that's fine. I can I can fix that. After the fact double click to set this crop in now I'm going to zoom in here. I'm just going to duplicate that little bit. Grab a duplicate tool Click right there. Shouldn't go up and down here and get rid of that. Here we go. Look at that. You never known that that was a extended picture. Now, if you export for Web, it's really big, like it wasn't before. I want to make sure we got R J. Peg and high are high quality and we're gonna go down here and the pixels and we're gonna change it to 3 20 like we did before. Do its thing and that's hit zoomed to fit. And this is still saying it's 2.3 seconds. That's not right. You gotta change that and change it back. And now it shows that it's going to be 15 k and it's going to be 150.1 seconds to load her . So that's good. So now it save as and we're going Teoh do like we did before the space out of there and hit save snowing closed down the cpt file we have here don't need it anymore, and I'll put it into the website and show you what it looks like. Okay, so there you go. There's the finished website with the team on it, and that concludes this model 10. Headers Intro: So he rose and headers. A hero image is a large image. That is the first thing you see when you come to a website. And a difference between a hero and a header, in my opinion, is a hero image takes up the full screen and a header image is just a strip across the top. Some people might disagree with that, but that's the way I think about it. And whether you're doing a hero or a header, these images need to be great looking into catch the attention of the visitor. So you want to save them in a format and size that will do them justice. Generally, you'll use JPEG on a high quality setting. But if you need transparency on an overlay type image, you have to use pink. In this section, we're going to do a hero image for our site or a header image for our site, I should say, of a cityscape. And we'll walk through the process of getting it sized, write an inequality. That looks great. So let's get started. 11. Site Header: Okay, so here we are in our course website and the one we put the team photos in. Those look great. We're gonna mess with the header and say that the clients and it's a a picture. I actually got this off of unspool ash, which is a great place to get stock photos. It's where the team members came from. Also on splash dot com. And this is a photo of ah, skyline. And we'll just say that the customer one, this is their header. So they sent us this photo. So right off the bat and just hovering over, I can see that this picture 6000 by 4000. That's huge. And it's 2.7 meg. So it's way too big just to put in as the header. So what we're gonna do is, um, take it into photo paint and work on it a little bit, so that's right. Click on it Se se se open with crawl photo paint. Okay, so there it is pretty picture, and we want to not really used the too much of sky. There's not much going on there. All this has a lot of lights and some pretty stuff in the middle here, so we'll use that. Let's flip back over to our website and we noticed there Header is wide, but not very tall. We want to take that and make a similar image. But first off, I want to show you if you just right click on it and hit, Inspect Element. And then if you click on this little picture of a mobile phone here, it's going to take you to responsive design mode so you can go in here and you can see what's gonna happen as this thing gets, um, smaller. It's going to keep zooming in on this thing because it doesn't get much taller. Um, so we want to make sure that we have a really clear picture. So it'll look good in all these modes. So we just need to make sure we have a good looking picture if we zoom in on it a little bit. So anyway, and also you can tell here is you can see what sizes things are too. So if you get too, um, all the way out here or 19 10 right there, if we got all the way out there and if you select some different devices, you see where their dimensions are. So let's say a Samsung Galaxy s five, its 3 60 by 6 40 So that's the size. So it's gonna be 3 60 wide. That's what our image is going to end up being. So we needed. You can take some of that stuff into account while you're doing images. But anyway, ex out of that, we back to the full site. We're going to cut a sliver out of that. That's wider than this because we wanted to fill this whole thing very nicely. So there's our image. So we want to go with that same proportion. Let's go to the crop tool. And once again, we're gonna do all these edits before we downsized the image because it gives us more to work with. So I that that image was about that aspect ratio right there. So I'm going to go a little bit bigger than that and dragging that around a bit. One thing you know, if you go off the screen when you're when you are selecting an image, let me show you that real quick. If you go off the screen, it kind of confuses girl, draw a little bit and then you can't drag around If you just dragged that back and bumping up against the side Now you can drag this up and down Don't know why that is a little bug, but that's the way around it. So now I can drag this up and down and get the little portion that I want. I think I want to use that portion right there. And when you're doing headers like this, you want to make sure that you're not creating something that has some text over here and I'll show you why here in a little bit, Because you're going to lose this. Once you get into a mobile of you, you want to let the Web designer put the text on there and a as part of the Web design, not as part of the images, those images. If you put text in images and have a responsive you, you're gonna have problems, so just don't do that. So we're going to go about right around and they're double click to set it in. All right, so that's our image. Let's see what we got here so far. Um actually, we're ready to export it, because we're not gonna do much more with it than that. Besides, resize it. So let's go to file export for Web. And, by the way, you want to. You want to leave your original photos alone when you're doing this. So we're always doing export for Web and save as So when we save as we're not saving that original image. If Carell asked you to save it when you're closing it down after the fact, you want to say no to that because you want to keep your original image that the client sent you so you can always go back. If they came back and said, for instance, um, I want more sky in here, you would be stuck. You'd have to say, Um, could you send me stuff again or you go back to their their email or however they gave it to you? But if you save over, if you don't save over without that, you know you can always go back to it. So I just a little little hint export for Web process that you can even see that the export for Web box has trouble processing this thing. So it's 11 megabytes still, and that's the ping size. That's way too big. It's going to take that long toe, get in there 1600 seconds. So whatever that equates do, we don't need to know because we're not gonna leave it there. And that's pull up our decision matrix real quick. So here's our decision tree, I should say, And let's run down to this while we're getting ready to save this out and decide what tough file type to use. So do we need animation? No, we do not. So let's go to the no direction. Do we need to preserve fine detail or need transparency? What? We don't need transparency. There's nothing like that in this image. Um, fine detail. You could argue possibly, but this is just a picture. This is, um something's gonna be in the background, so no, we don't really need fine detail. And we don't need to preserve like, color palettes and all that stuff. So we're gonna go the no direction say jpeg. And then the last thing is experiment with quality sittings. That's what we're gonna do right now. So right now we're going to initially Let's go and bring the size of this down to close to . We noticed that it was around 1900 wide was our screen. So let's let's go 1900 as a starting point. This is where the experimentation starts and that will automatically take this down to whips. I didn't change to JPEG. Change it to J. Peg. Make sure. Still, in 1900. Yes, we are that automatically took it down to 2 38 All right, so that's pretty good and disappear because it got so much smaller. Let's soon to fit, and that's our image. You can select the zoom into here and you can get a little closer. So just keep on ah, clicking on it and clicking on it and you can see what you got and then click on the hand and you can drag around. Let's get down here in the, um, foreground. That's all background stuff. See what kind of resolution we have? You can see some greenness, but that's really small there. So let's go and, um, and we can look at some of these sizes. You can see right now we're at high, and we're getting a pretty good um pretty good look to be zoomed in that far. You can see some pixel ization there, but, um, it's 238 K If we go to highest, you'll see that, um, less pixels being seen here. It's smoother, little bit jagged there. But, um, that is very, very small, as you can see in her image down here. So that's the highest and war it almost a megabyte there. So that's definitely too big. So let's go down to medium. So we were at highest or high before now. We went down to medium, starting to see a little bit more pixels and what you end up seeing on J. Peg is it starts combining light colors together. You can see some blocks. And here the bigger blocks that the colors were close enough. That is just saying, Okay, I'm gonna call that the same thing. That's how it does some compression. You'll see that even more here when I goto low so you go low and now you can see that big time. That's one big rectangle there. That's all the same color. All right, when you get out, it's not as noticeable, and we'll zoom out and look at these two, but you can see what's happening here. I just wanted to show you what what these are. And now get ready for this is gonna look awful the lowest. It's gonna combine all kinds of colors together and you can see zooming out. Even it looks pretty awful. Now that might be a good effect. It's not a bad looking effect. Picture kind looks a little bit cool, but that's not what we want, obviously, So let's go back up through there. We go lowest, and you can see it doesn't look too bad. You can see some lines in here where the colors are Grady int going to that lighter watercolor. It's, um, look stepped and you go to medium and you'll see less of that. Actually, hardly any of that at this size, so that's not too bad. Um, probably the biggest we would ever see. This thing on a mobile screen would be sort of like that, or I mean, all depends on what you're watching this course on. But I recommend you use a full monitor, so that's looking pretty smooth. And that's 100 and 43 K We could possibly go with that. And then on the highest setting, It, um, looks really smooth. All the colors are nice. So we're gonna stick with high for right now and hit Save as okay. And here you can see that I still have my original. We're not gonna We're not going. Teoh saved over top of that one we're gonna call. This is Header. And just a little note about the way I'm doing this. I am setting these up so you guys can replace them in a website and see the results. Now, normally, you wouldn't give it such a generic name. Um, you would give it header city escape, Um, and and maybe even the name of the city. Whatever the one thing about using just header is sometimes that image what cashed. And if you're trying to change it, you might have trouble seeing that change right away, because it will be cash this header. You give it a new header. And it's saying, Hey, I got the same image. It's a header, so you won't see that right away. So I usually don't want to use generic names like this because because of that, but I'm doing that so you could just drag him into a directory. It will replace the files, and you guys can see that results. So just a little note on that. So we're gonna call it header, and it's safe. Okay, I'm gonna put that into the website and we'll see how it looks. Okay, there's our sight with a new header on It looks pretty good. As you can see in the in here, it looks really clear and crisp, and I think there will be happy with that. So I think that's what we're going to stick with. And let's go and do that mobile view. Like I showed you. Inspect element. Look on the little mobile icon. Now you can see you know, we're just seeing the center of that. And you know how I said that if you had text out to the side? Imagine if you had text way out here, like in the bottom corner. It's not gonna stay on screen. So if you were to viewed on a mobile phone, you would not see that all you need the text to be separate so it can adjust. So don't put text in your images unless that you have a really good reason to do so. So So that's the header image. I remember. Just try to keep it blow 350 kilobytes am. You should be good. 12. Background Images Intro: Okay, In this section, we're going to deal with background images. Background images are like header images or hero images that really in size only because a background image is not the main focus point, is meant to sit in the background. So what you wanna do with background images is you can use the, make the quality setting a little bit less. And a lot of times you'll want to put up blur on them or a filter on them or something that allows you to put content over the top of them without distracting or making it hard to read. So let's get started. 13. Team Background: okay for the next part of this website. Do you want to put a background image behind team Something that kind of blends in back there? It's going to create a blur Effect are a overlay effect on a image that could just be set back there. So if we go to our assets that we were sent, were sent a photo for this, it's in your download. It's also from up Splash. Throw in a right click on that and open with crawl photo paint. Okay, so here we are. And one thing you'll notice about the crow product that I really like is it always remembers where you were last. Like I already have the crop tool selected here because I used it last. I mean sometimes, like, right now, it doesn't necessarily help me, but it is nice to be able to expect that, especially when you're going to do exporting and saving and and all that type of thing. It remembers the locations and settings and all that. So if you do some same things over and over, it works well. Okay, so we're going to take this and want to put an overlay over first mis hit the select tool and I want to add another layer in here ad on that automatically put a layer above the background, which has our image on it, and we are going to now just fill this thing up. So there's the fill tool, and what the fill tool does is is it drops color onto whatever you select. So say, I have a selection here. That is this rectangle here, and I hit the filter role in the new love it It fills that rectangle on do that under my selection. And if I select out here in the middle, it fills the whole box, and that is because I'm on an empty layer. Now, if I was on the background, had that selected and I click filter on this desk here, check that. So what it did, is it? Actually, it took every color that was within this tolerance of 28 and filled it yellow. Okay, undo that and, uh, drag that down. You'll see if I'd go take our down to seven. It just gets a little bit. If I was the one that my work pretty good. My work pretty good. So if I had a rectangle here and had the fill tool and set the tolerance to, like 32 or something I collect you notice it doesn't go outside that selected area. So that's just some behaviors of photo paint on Do that. So you always know that you can use selections to limit things. Even if I was you say to use the eraser tool that racer toy races shift and left click drag up changes the size of that just like the clone tool we used the other day and say, I want to start erasing here. You notice it sticks within that selection because I haven't selected. Um, no matter how complex the selection is, say I took a and just drew like a weird selection, like so and wanted to erase inside that you can see it's stays into that selection. So anyway, we're going to use the filter and we're gonna use on empty layer so we don't have to worry about the tolerance at all. We now I haven't said it yellow ish, and we're going Teoh, leave it there for now and drop it in there and in the object manager over here on the layer. I'm calling them layers, but I believe they're actually called objects these days. I came from a very early version of the Carol product, and they used to be called layers. But anyway, on this object here, if you click on this slider next to the 100% that's the opacity of that layer. So I start dragging that down. It takes a little while toe catch up with you. But as you can see, I'm changing the opacity of that. And if I get that maybe around 75 ish, that's kind of what we want there. And let's change the color that I don't know that yellow is what we want. So let's go and change the color of this Teoh. Let's go toe a bluish, bluish gray kind of color. You like that? And you know, if that didn't change anything here because we're changing the fill color here and I have it in this tool right here and I have to click again once I collect it, changed it. Do I like that? I think it needs to be a lighter and grayer So me Take this that way. Let me try to click again. See what that does like that. But now I want to make the opacity less kind of like that. Okay, so now we have our overlay done, and we're going to need toe resize it because this is a another image off of unspool ash. And we know that they're huge already. So we're going to resize this first things first. I don't like the aspect ratio of this are the proportions of this image. So we need to change that. And one thing that's nice about photo paint is there's not a really easy way to squash things, which is as we talked about earlier. Is my pet peeve to resize this. We will want to crop it. So when a crop out extra stuff, or if you wanted to? If you need toe, make it bigger the other way, we could add to it. But that would be very difficult on this picture. So we're not gonna do that, and it's a high resolution, so we have plenty of plenty of pixels to work with, So I'm gonna click up here and drag and make a little bit more square than it was before. So that's what we got and as I showed you before, you can't drag this back and forth because I went off the page. If I bring this up and bring it back down now you can go figure I'm going. Teoh. I think that looks good about right there. You double click. There's our our image proportions with our overlay. Now we're going to export that out. So let's say file export for the Web and we're going to It's 22 53 pixels wide now, even after I cropped it. So we're gonna make that 1600 and then what have and that resize is it force? And we're looking like at high. Let's sit to custom right now. So we're gonna set this too high, and that's a 97 K Zoom in here and see what we look like. Looks about perfect. It's try. Medium meeting looks pretty good at that zoom level, which is way zoomed in. Let's try low. Okay, that's taking a little too far, getting pretty blotchy. So let's go to medium. Here we go. I think that looks pretty good and we're only 60 k so it's hit save as and in our assets were going to save that, and we're going to call that office Blur. These file names are very important when you do the exercises later, because they have to be named the right thing for my Web page to pick them up and use them . So we're not going to teach a Web design class here where you have to go in and change the references and all that. So if you just name them the right things, that makes it really easy, and you can see your results on a page. So that's, um, if you're following along, that's very important. So office blur and we're gonna hit, save. Okay, now that we save that, women leave that up there so we could always come back to it if we wanted to know. Close it down later and I'll put this into the Web page and we'll see what we got. Okay, there we are in the website with that image back there. I think that looks really nice. There we are. Let's check it out in the mobile of you. Control shift in is a quick way to get that mobile of you in Firefox. Yeah, let's girl down here and see what it looks like all mobile. And because of the height of it, it's using zoomed in real close. You can see the wrist of somebody back there, and as you get lighter, it starts getting more and more discernible what it actually is. But it's just a background, and I think that looks very good. Call that good. So that's the background image for the team section. 14. Thumbnail Images Intro: In this section, we're gonna talk about thumbnail images. So its thumbnail images are smaller images used in websites like the team photos we did in the first section. But in this section, we're going to create three images that represent articles on other pages. We do two of them that require cropping, resizing. And in the last one, we're going to get a little more in depth and add a mock-up of a webpage onto a laptop and a picture and fix the reflection in the table to show the same image. Let's get started. 15. Articles Office Image: Okay, So we're going to create a image for this office and already have image that I like that I'm gonna use. So we're going to go over to our assets. And I provided this in the downloads. If you wanna use it, so right, click on it and say Open with photo paint again when there's photo paint and this is a little bit of a pixel image already, but once we get it going, it will were really well. So let's find out what size we have to work with on images like this, where there are several lined up, it's usually a good idea to try to make them all the same. Hi, thin with ratios. Whether they're all the same, exact size is one thing, but as long as of the same ratio, you should be pretty good. But if you're creating all three of these, you might as well make him the same size. That's what we're gonna shoot for. Gonna right click on this and we're gonna say view image info, and that tells us what it scaled too. So it's 6 40 by 400 scaled to 3 50 by 2 33 So that's the ratio will end up with. So we want to remember that. Okay, so it's jump back over to our photo paint. Okay? So before we get started here, one thing I want to do is I want to change the units that curl draws using you. See, if I have the crop tool here, here, the within high, the size of the image, and everything is given in inches. We use pixels as we discussed. And so let me show you where you change this. So you go to the gear icon up here, click on that. And if you go down to document and in document properties, there's a ruler, and you see right here it said two inches and you wanted to use pixels there. And you want this to be checked, which it normally is. It sets these to be the same. And then that changes everything else. As you see, once you go into here, everything changes to pixels up here. Okay, so now that we're in pixels, we want Teoh have our crop tool, and we'll show you a trick on how to get aspect and ratios that we want. So if you just draw any Oh, crop size on the on the picture. You can now go up to crop size up here and you can change these tow whatever you want. And it will change your crop size to that actual size. And I have all kinds of different sizes here, and we're going to use 6 40 by 4 80 cause that's a standard that is really close to what we want. I'm just gonna go ahead and use that. So the way you want to use that is I think I told you earlier that the corner sizing handles actually keep things in proportion. And these don't so that just messed up my aspect. Ratio control Z that note. I can't control Z. That's I'm gonna go back to 6 40 by 4 80 You gotta change off of it and go back. So now I'm back to 6 40 by 4 80 If I use this one, as you can see, no matter where I go, it always stays. The same proportions are the same aspect ratio, it just multiples of that. So that's how you want to handle this. So once you get once you get your 6 40 by 4 80 aspect ratio set like so I just wanna clicking in middle of that, and I'm gonna drag it all the way down to the bottom corner, bumping up against their and then I'm gonna use this one this top left to resize it at the same aspect ratio. If you go off screen, it's going to goof up your aspect ratio. So I just want to get close to the top if you want every bit of the picture union really get close to it. But I'm not all that worried about it. So there's my 6 40 by 4 80 aspect ratio crop, and now I can move it around and it just bumps up against the sides. You can't You can't go off of the image and mess it up here. So, um, start moving it around to you got to where you want it, and I'm gonna put it about right there. And that's the image size I want. Actually, not the image size and went, That's the aspect ratio crop that I want. So I'm just gonna double click there and set that in. And now that we have that we're just ready to resize this. As I said, This this is a little bit grainy already, but it's kind of an effect that they have on this and we're OK with that. And once you get it to the right size, it's going to look fine anyway. So so now we want to go to file Export four Web And now here's where we do want to take it to 6 40 by 4 80 This thing is 69 51 wide. That's huge. And as you can see in a regular J peg, it's gonna be through almost four megabytes. Don't take forever to download. So we're gonna change this to 6 40 and it almost gets it. The 4 80 not sure why it didn't, but we're gonna leave it right there, zoomed fit and see how that cleared up, even though it had that effect on it, because we are going so much smaller. So anyway, that's so now that we have a 6 40 by 4 80 let's look at some different size is here. Let's go to high and on high. It's going to be that's wrong. It's not seven seconds so those seem out of whack to you Or maybe even just as a standard rule, you might want to change that away from a setting and change it back like that and see, that's 0.2 seconds that's going to take the download. That's the kind of members were looking for. So now that we have that, we're just going to hit, say that I'm going to call this the office or just office and it save Okay, I'm gonna add that to our Web page and we'll see what looks like. Okay, so there it is in our website, and as you can see, these aren't lined up anymore. And the reason that is we changed the aspect ratio this a little bit. So now it doesn't match the aspect ratio that, you know, that's OK because we're controlling these two pictures, too. And the next lesson will do. The team won, and lesson after that will do the website one, and they all match at that point. So we're good to go, and I'll see in the next lesson 16. Articles Team Image: Okay, now we're going to replace this team placeholder with the image that we used for the team background back here. But without the overlay, let's go to our assets. And here's our team image on the right. Click on that open with photo pain. Okay, there it is. And to start with, we want to get our crop size. So let's draw a crop and then go to if you're on 6 40 by 4 80 already, change it away from it and then change it back to 6 40 by 4 80 and I was drag it down to the bottom corner. And let's use the top left and get it close to the top there from the dragon over to the middle. Here, I want their hands to be somewhat in the middle. And you know what? I want that to actually be in the middle of something to change the size of this time to go back to the 6 40 by 4 80 again, and we're gonna center that up and then I'm going to use the bottom right and hold down shift and then scale it about the center until I almost hit the top and let go. Okay, so that got us a good, centered up image with all their hands in the middle. I think that's a good image for us. So let's go ahead and double click to set it in file Export for Web. Okay, now we're still too big, so that's good news. We want to change is to 6 40 tab. It almost got to the 40 on that on that one, but still, not quite. So if it's a bug in the program or their son, a rational explanation for that. But let's change away and change. Back to the two megabits per second were 20.2 seconds. Let's see what that would look like if we took that down to medium. I didn't even notice the difference. Let's go to Lowe. That one there is starting to get a little bit blotchy to me. Let's go back to medium. That's a point. That's a 37 kilobytes change way and change back and still a 0.2 seconds. It is a smaller file those So let's leave it at that and zoom it to fit like it looks really good. So it's it's save as I'm gonna call this one teen. Just it save. Okay, so that was a quick one. I'll add that to the website and we'll see how it looks. Okay, so here we are in the website, and that looks great. They look lined up well, in the next lesson will create this one, and then all of our images will be lined up, See in the next lesson. 17. Articles Website Image 1: Okay, Now we're gonna create the website image here. What we want here is a picture of a laptop with the picture of this website on it. So we're gonna create that. We're gonna start out with a file having assets here of laptop, right? Click on that and open with photo pain. All right, so there's my laptop picture. And now to get the website to put on that, there's several ways you can do this. Let's jump over here to the website several ways. You can do this. You could use the snipping tool you can use print, screen, that type of stuff. There's another screen grab. Software is out there. But I wanted to show you this is a little bonus fire. Fox. The new Firefox has added, Take screenshots. If you right click on the page and it takes screen shots, it will actually, I love this. It will actually allow you to take or save the full page. I'll show you what that looks like. Even that's not what we want that save the image from top to bottom. Even though it wasn't on the screen. That's nice to create gallery pages of websites that you've created graphics for, so that's nice. But that's not what everyone here is Not going to say that, but I'm going to right click, take a screenshot and saved Visible will save just what's on the screen there that is hit, download, and then it will show up in my downloads. Here, click on the download and click on open folder. So there it is right there and right click on that and say, Open with photo paint. So there we are. Now I have two things open in photo pain. I have the laptop and the screenshot through. Take the screenshot over and the way copy and paste works in photo pain is if you have something selected like, say, for instance, that right there. And if I hit control C copy and bring it over and hit control V to paste, it just takes what's selected kind of makes sense. If you have nothing selected, let me get rid of that. And here's remove mask right there are control. Are does that also now that I have nothing selected. If I hit control C copy and control V for paste, it takes the whole image that I had there. So that's a nice feature there that you can just copy everything there. Now I want to get this to fit on this screen. So right now I have the resize handles on here. If I click again, I get the rotate in skew handles. And if I click again, I get the deform or distort handles. Like like a gonna get perspective, you might think would use perspective here, but for the way this is setting and everything, it's not the best way to do it. So it really works well with this story. So we're gonna go back around there's that one and rotate and here's distort. You want to learn more about all those different types of handles and how to use them. My Carell draw quick start course is available and it walk it through all that. So I mean, just dragged that up to the corner here. So we start with 1/4 in place, and now I'm going to start dragging these handles around, and you can see what it does here. We're gonna line these up with the corners of the laptop. You could just start out by getting them close And then you can tweak a man like if I you did just a little bit more, I can. So and once you get it down here, you can see that you might need to adjust a little bit more. That one, I think, needs to come down little, then work things. See a little bit of the website through there. Okay, there's that. But you know what? There's a menu more appear that I want to be able to see. There's a scroll bar over there, too. I need to see that too. All right, there's that. Bring this down for the menu bar a little bit right about there. All right, now I'm below on the side right about there. OK? Looks a little jagged now, but it will correct itself here once we said it in. So now we're in the state just like the crop where it's asking, waiting for us to either double flicked. Apply our double click out here too. Reset the changes. So we want to get in the middle of it and double click. And now you can see how that jagged went away. It's set the image end to be what we wanted to be and actually probably didn't do all that great down here. Yeah, I didn't quite do as good as I could of hear. So let's clean that up a little bit. So she's a selection tool, and I'm gonna hold down and let it fly out. I'm gonna take the free hand mask here, and I click on this corner and I go all the way down here and just draw that line a crossed and you line that up and click again. I can see it's making a closed shape, so I just go right there. Double click there. And now, since I have this object selected, I can. Whatever I do just has effect on that. So I'm just gonna hit the delete key and you can see now that the line just went away there . It's removed the mask and see how I did there. There we go. That looks better. Okay, Zoom back out here, school in the mouse wheel, and well, now, let's let's set this so it looks like it's part of the page right now. It's way too white and way too crisp and everything, so let's do a adjust and brightness contrast in intensity. And if it reset that, we'll just start playing with it. You see that we have brightened this year. We're gonna bump the brightness up, bring them contrast down just a little bit and bring them 10 30 down just a little bit. I think that's getting a little bit better. And now, when I wouldn't say okay to that, I think it needs to be a little bit bluer because for some reason in this picture, the screen looks a little bit blue, so we're gonna match that. So let's go to color balance in the under a just and we'll take the reset that real quick, and we just take the blue slider and start sliding toward the yellow blue and start, if we send it this way, will turn yellow. That way, I'll turn bluish. So just start dragging it toward blue until we think it looks like it's part of the image pretty good. I think that's a little bit better. A little bit more. Here we go. Okay, okay. So now we have that and what we have here always. We have a background image like right here and then we have an object on top of that. The object on top of that, since we pasted that in it automatically created it. And if I turned that off, you can see it's just the the screen that we put in and then the background is the rest of the image. So what we have is two objects there, and if we say just hit, save on this, which we need to do because we've done some work on it, have we just hit save on Like it is? It's gonna try to save it to a J. Peg file. Well, Jay, pig files don't support all this, so it would just flatten it out and we would have no control over this anymore. So we want to save it as, ah Krell photo paint image or a file. And so it's going to save as and once we hit save. As you can see, it's saying, I mean, you want to save it as a cpt file, which is a krill photo paint image and already in the assets directory. Something's gonna save it, is that? But I'm going to call it website. It's you. Okay, so now we have website, not cpt. And we have all this information put in there. I can now get rid of the screenshot. Don't need it anymore. I don't need to save it. So now we have everything in this one file and we need to do our our reflection down here and then save it off and resize it for our website. So we'll do that in the next lesson. 18. Articles Website Image 2: Okay, so now we need to take care of the reflection here. But before we do that, I want to take care of this little spot here. We don't want this temporary image to be in there. So we want to actually take what's available already in this image and put it in here because that's what we're gonna end up with anyway. And I really don't think this you'll be able to see the temporary image in the reflection in that. So we're going to copy that right now. So we're going to grab both of these like one and shift. Click the other one. Alright, copy. I want it paste. It's control V in control. That's control. Seeing control V object three and four in here. So we have to in there already, But they're separate objects still, and we want him to be one. So it's right. Click on those two with him selected still and hit combined objects. Combine objects together. Okay, so now we have one object here, and you can't tell any difference, because it's great big. But now if we go over here and grab this upper left, you can see we can downsized that Let's go about their going. Teoh, Start right there. Zoom and I scroll in the wheel using this Grow. Well, we're gonna put that corner up there. Click once cooked twice. Get the distort The same thing we did. That one of this one. I don't want a line this up with the edge there. And then with the bottom of that. Now, this one here, I want take over to top of this one. That's pretty good. This one here. Lets go past it so we can see what we're doing. My fear. And we're gonna be about, like that now way stretch this thing. And I always said that was my pet peeve, but as faras, how big this is gonna be? I don't think you'll be able to tell. And we're gonna find out here in just seconds. Here's that. That's pretty good. Double click on it to set it in. We're gonna zoom out. Let's click out here so we can un select that and this is going to be about that big on the page unit. That big kind of hard to see that that other stuff's going on there. So where is gonna leave it like that and call that good. I'm gonna bring this site design down, which is behind their slits. Oops. Not high that one. Let's hide this top one here that we just did. And they're going to just draw Little Freehand thing right around this. Should we get it all now, Copy Paste. I don't know what we just Oh, is a good example here. So we were thinking we were copying the site design here, but that's in this background image. It's not part of this. So it didn't take that. Took whatever was part of that. So let's undo that control Z control Z. Now we have to select background image here. Hit control C and control V to paste it in. Still did the same thing to me. Oh, I'm wrong again. It's an object to control C control V hair. We go look at that. Okay, so now I want to bring that down like the other one is, which is a little bit off screen there and And get rid of our mask. Now we're on this object right here was gonna take that bottom off there, So let's go ahead and clicker, freehand mask. Draw a line like we did before, Right across there. And you got double click Tha finish your selection. No hit. Delete. And now in our remove the mask. All right, That's good enough for what we're doing. And now I will select a clone tool there. It's way too big. Shift in left, click and drag downward to make that smaller. Another way to do it is is the nib size right here. But I find this to be so much easier. Toe get the right size. And when a right click there and then left, click right here. Toe draw over the top of that. Hear that? Okay, so now we have the site designed down toward the bottom. Let's turn our object back on. You hear that? You know what? That's kind of bugging me. So we're gonna redo that, and we're gonna not stretch it this time. Like I said, that's my pet peeve. So we're not gonna get right. That's how it was an object for we're gonna just delete object for over here. Now we're gonna grab it again. So let's go in here and we're going to create this in a new object. So I'm gonna take all of this. All that we have so far and it control. See the copy it. I'm gonna hit file new from clipboard. And I just created a whole new image. Whole new file. We're going to select everything combined. Combined object together. It's for that again combined. Combine all objects with background. We just flatten everything out. All we have is a background. Now. Now let's crop it to the right size, draw little crop and select often in 6 40 by 4 80 Drag it down to the bottom corner. Drag this all the way up. Now you can see why it got a little out of whack because there's extra on the sides. Much, though, is there? All right, so now let's double click to set it in. Now we can copy it control, See and go back over to our Web site. Control V paste it in. Now we have it. So let's dragged downward close to the right size would drag it up here. Now let's zoom in. Make it even smaller that size right there. Now I'm a double click to set my scale in. Now I'm gonna get it right back up here to the corner again. Click once. Twice. Now we've got our distort whips. Missed it. I got the wrong thing selected. I need to have object. Eight here once, twice stored. Now we're going to distort it to match what we want here. And lying that up with the other side of that gray, then lining, drawing a line across from that other image right there. That's what we got. I think this needs to go over. Just a hair. No, that's right there on the edge. Okay, I think that's good right there. So let me double click. Set that in, zoom out and see what we got. I think that's pretty good. Change the intensity on that. Just a little bit. So I have that object selected. Adjust brightness, contrast, intensity. You see that if I turn the preview on and off, you can see what it's doing to it there. That's keeping the settings I used before, and you can see how it makes. It just looked like more part of the page. It's more part of more like these other two. There you go. Okay, so now we have all of this. I'm going to combine all this stuff we did here together because I need to turn it over, flip it over and put it on the bottom. So that may have all of this stuff. Right? Click. Combine optics together. So now I have one big object. That's just the screen. How do you control? See control V to paste it in there again. Now we have two of them. Okay, now money used these handles here to actually mirror this thing. So if I grab this and start dragging it downward, it's going to mirror out the other side. I hold down control. It's going to keep it the same. It's going to it's kind of hard toe. Get that to mere upside down with honor for himself. I zoom out a little bit and tried again Here. There we go. I dragged way down here. It actually gets it going downward. So that's about where that would be. Let go of it. That's not actually the orientation that would be in. So we're going to skew this a little bit more, so let's click a couple times. Get this cue points. I want that to be up. Even with that, this is going to come down. You kind of Even with that power, that would be this goes. It's because of the mirror that off of a horizontal line. Basically. And this is not a horizontal line. This is This is an angle. So it made it come out. Kind of weird. Drag that down where it's supposed to be. Should be about right about there. Still don't have this line totally right. It's drag that that way. Now, let's put it where it should be right about there and double click on it to set in. Okay, that's kind of where that screen would be. Except for it's not the right with. They're OK. There we go. Now we got it. Okay, so that's where our screen is gonna be, But we have some extra. That's I'm gonna need to be behind this portion of the laptop, so we need to cut that out. So let's make a mask that fits that. So I'm gonna hide this, get it out of our way right now. I'm just gonna start drawing a free hand. Math appear. I'm just going to zoom in down here and just follow this line right here. So I need to start right about there, draw a line all the way down to about there and go around this corner My click, click, click, click, click to get around that corner and then drag a line out this way and then click there dragged us down to make the clips on the wrong direction. Things still fix this, though. I need to go up. I need to get rid of the rest of this image up here. Okay, so that's what I want this right here, right now. If I turn this back on, you'll see I'm going to get rid of that portion of the image that is inside of it. Have it selected. I'm just gonna hit delete. And there you go. You can see it right there. One thing that might be nice is to feather this mask a little bit. So we'll do that in this controls the that. If we go to tools now, go to mask and go to ask, outline feather and the direction we want to go is outside and just give it a little 14. We're going to click here and preview it and see it just feathers This edge right here. Just a little bit. 14 throttle too much is making nine. Here we go. Okay. When we feather, now, we can hit, delete, and you'll see it has a little bit of a nicer edge here. Okay, let's remove or mask Zoom back out. You can see we have that in the table. So let's This needs to be blurry and a lot less vibrant than that causes a reflection. So first off, let's make it less vibrant. So we're gonna go back to brightness, contrast, intensity and reset it, and we're gonna start bringing the brightness down, Contrast down, intensity down. I think that's pretty good. Okay. And now we're going to go to effects blur. And let's just do a this blur here. Not sure how to pronounce it. But just add that in there and preview. You can see what it's doing. Their job. Learn things out a little bit. So what we want. Okay. Okay. I think we're pretty good there. We could add some the smudge back in the day when all that I don't think that's necessary for what we have here. I think We have a pretty good looking image here. I like that we actually have our our picture of our image in our image, So that's kind of need. So anyway, let's hit save. It'll save button right there and that all saved. Now let's go to its exported for the Web. Actually, right now it's crop it and we'll draw the line and hit 6 40 before eating. I changed away from it and back to it. Put that down in the corner and let's make it as big as we can without hitting the top. That's pretty good, and I won't drag it all the way over to this side. I think that's the image we won't right there. So it's double click and now file Export four Web and use the same settings we used on that last one. So let's go down here and say 6 40 hit tab and now we'll go up here and we'll hit medium and that's zoomed. If it there's our image, I think that looks still looks pretty good at that setting. So had save as and now we're gonna call it website and that's a J peg and so we just hit safe. Okay, so now that we say that out, I'll put it into the website and we'll see how it looks. Okay, This. So there's our site. There's our new image. We have all three m across. They're all lined up, same size. They all look great. They're gonna load quickly, and I think our customer will be happy with that. Not set for this module. 19. Customers Logos Intro: In this section, we're going to replace two of the logos in the happy customers section of the website. These logos need to be all grey, so we're going to have to remove the color from them and they require transparency so you can see the background through them. One of the things existing logo, and then show you how you would do it with a raster file over the vector file. And the other is a logo we're going to create from scratch in krill drawl and then added the site. Let's get started. 20. Customer - PlayAway CorelDraw: Okay, We have our play away logo in here because we did it off of the raster file the J. Paige file. But I just wanted to show you real quick of how much easier it is to work with vector files . Um, and why you'd want to request them from your clients. Besides the reason that you could make them as big as you want without any quality loss. That's not an issue here. But as faras being easy to work with, it's a huge difference, So I'll show you real quick. So let's put this on. The clipboards are gonna right click on it and had copy image so we can steal that color like we did last time. Anyway, let's go over and we run over to crawl Draw. That's a new document. Make sure this is RGB right here and hit. OK, we're going to file import. I'm going to go to my directory. You can't right click on these and say open with because it's not associated the gay. They gave us an E. P s or pretending like that. Davis and GPS and some import that ends X selected and hit inboard. And Texas curves. Yep. Okay. And this guy click right there and put it in there. Okay, so now we have Ah, play away. E P s on layer one is what it says down here. So we're going to anger that control you. And now we have a bunch of objects and likely showed before Thes are lines so you can get us close in here. Is you want. But now I'm going to control V to Paste in that play away logo that we created Do the same thing we did on the other one. Click on that and then click to put it in the tray and I can delete it. Okay, now, all that work we did to make it transparent before it's already transparent. So all we really have to do is select everything left. Click on that. I have one object here that needs to be transparent. So we need to combine these two objects, so I'm gonna select both of them and hit combined since that one right there combined. Okay, so now we have that you can't put a white on top of there because it wouldn't be transparent. So I just combined the two together. So now let's see through. We're done. So that's all there is to it because we were able to work with the lines instead of the raster file. So I would just say file export for Web, just like in the other one. Just that, just like in photo paint. And now all I have to do is select the transparency color, which is that right there. And then I'll click on transparent right here. You see, it's gone. Now go down here and make the Heights 30 and say that. So now we're to the point where we have this, so I'm not going to save it cause we already have it and we already have done from the raster image. But I just want to show you how quick and easy that is and how much easier vectors are to work with. So if you can, I would highly suggest you get those 21. Customer - PlayAway PhotoPaint: Okay, So what we're gonna do here were replaced this Pinterest logo with their play away logo that you saw earlier? I'm gonna show you different ways to do it. This 1st 1 we're gonna use a raster image, which is a J peg that was provided, and we're gonna turn it great and make it fit in here. So first off, let's find out a little bit about this. That's right. Click on it. And it view image info. Now it tells us it's 1 19 by 29. Okay, so 29 pixels tall. So roughly 30 pixel stall. So that's what we're shooting for when we export it. And we're shooting for this gray color, which we're going to do something different for that. Let's exit out of there. Right click again. I'm gonna just say copy image. Okay, so that's not out on our clipboard now, And we will do something with it here in a second. And now I want to go to Goto assets and open up my play away. J peg. It opened with photo pain. Okay, so there's are playing way logo now. Almost. We're gonna hit control and V to paste in that Pinterest local that we copied you need to see is definitely transparent. So we need to do that also, because if we didn't miss, jump back over here to the lead. Pedro, Quick, If we didn't and this band right here changed colors, then you're going to see white all the way around these, or you want to go in at it every logo and change the background of it to mess the background of the web page. You just need to make it transparent and you not to worry about that. So let's get back over here to photo paint. All right, So I am going to click on this little and colors to palate down here and just grab that great color we're working with. Okay, so now you just get rid of that. Don't need that anymore. I got my color down here when I need it. Okay, so now I want to get rid of this background. So first off, we're on the background, so let's click. Create object from background right there. Now it's an object. And now it actually isn't object. Sitting in their own a transparent background. As you can see, control Z, undo that. Okay, so to get rid of this, one of the easiest ways to do it is especially when there's some transparency going on and some anti alias thing going on here. And that type of thing is to just use the magic wand to select this background. So that's what we're gonna do, and we're going to lead it little by little. So if you click on your selection your mask math tool here you have several different types of masking one's magic wand. We're gonna grab that one. And the trick on this is getting this tolerance set, right? That's the way this works is if I haven't set to zero it on lease elects the things that are touching it that are exactly the same color of the pixel I clicked on. Okay, some of that removed that, and if I make that a little bit bigger, you'll see it selects a little more next, actually, probably pretty good setting their 23. But let me show you what happens if I go real high. So you understand this 100? Okay, I just looked at everything because I gave it 100% variance to the color I clicked on Select that color so it ex selected everything cause everything falls within that range. So let me undo that. I'm gonna hit control our to remove the mask. And now I'm going to go back to that around 20 like I waas because I think that worked pretty good. So 21 let's try that. Okay, Selected that pretty good. Let's delete and see what we got. If I said the delete key control Artur removed, remove the mask So it looks pretty good. Looks like it worked out pretty well. Me clicking out here in this white and see what I get. Okay. Looks like it did a pretty good job there. Let's hit. Delete control. Artur Removed. Okay. Doesn't look like it ate away at my play away at all. All right, let me get this inside this A here. Delete control our to remove inside the A Here. Delete control. Artur removed. Uh, same thing here. Delete control artery move. OK, now let's go. And it's kind of hard to see because we're dealing with white lips. Here's the side over here. Let's grab that delete control order and move We're dealing with white lists through another object in here and will color the different colors so we can see what we're dealing with. So I'm going to drag that down to the bottom. Lips didn't go. That's a little finicky, but there we go. It's below it now, and I'm going to use the Phil two with the tolerance of 100. So it'll felt no matter what, and I'm going Teoh, I got red selected already. That's just find him. It's gonna click out here and now you can see if this is on top. It would be everything. If it's only now, it's on bottom. You can see it's leaving a little bit of wide around here, but that's OK. I think it will look just fine if we got out like that would look just fine. If we're on a red background, we could possibly go up on the tolerance a little bit and get rid of some of that white, but it's gonna work just fine for us. So let's go back to this object, get back to the magic one, and we got some white here. We need to get rid of Zoom in on that a little bit. It's like the white pixel right there. Delete leads. Delete that. Did it control our to remove? Yeah, didn't just find. And we have a little bit on these upper corner share we need to get rid of. It's like they're delete ended pretty good. It's like they're on the troll ardor and is, there's a little bit of a white piece right there. Probably too much for that's already starting to get blue. Let's bring that down to a real love number. Patrol order removed and try to get in. Here we go. Delete Control are to remove again F four to zoom. All of it. I think that's looking pretty good. There we go. I think we got it all. Okay. Now go ahead and get rid of I'm gonna leave. That there for now is gonna hide it, and it will select this object there. Now, we want to use the fill tool, but we're going to use it with this gray we got here. So it's right. Click on this grey, and we'll put it in that box right there, which is actually your fill color. That's your foreground color your background color in your field color. That's a right collect on whatever color you're messing with their. So I right clicked on it, and now I've got it in my fill bucket. And if I choose the fill, it'll and use 100% tolerance again, it's gonna grab. Should grab everything that's touching here. Yep, it's Go along here and click on all these different pieces. Okay, now, we filled it with Gray. Let's look at it with the white behind it again. Are the red behind it again? I think that does it right there. Okay, so let's get rid of this. Right. Click on it and delete and let's export file export for Web. And we want Teoh years RGB because it has some actually should be all these, pal. It'd and then care enough. That right there should make a nice small file. Seven k. It's tiny, But if you go here zero seconds, it's gonna load so fast. So there's that and we're not even to the right size yet. The height of this only needs to be 30. We decided. Okay, Zoomed fit. There it is. And four K s o dyne. So that's perfect. So to say that I'm gonna call it play away dot PNG. It's safe. No. Drop this into our web page now, and we'll see how it looks. Okay, so there we go. We have a play away, Little go in there, and I think it looks pretty good. 22. Customer - QuickstartAcademy: Okay, so we're going to replace this Kickstarter logo here with a logo we're going to create from scratch in Krell drawl. And this is going to be a logo that I'm going to use for Quick Start Academy, which is going to be my website to house all my quick start courses I'm planning on doing and Excel one and several other courses that are quick start in nature, like micro draw. Quick start course. And this is gonna be a logo for that website. So let's get started. My copy this so we'll have the copy image so we'll have the color and no, I want to go over to CorelDraw new document. Make sure this is RG because we're working on the web. I just said OK, Okay. So, Miss Lecter, text tool, click out here and type quick start, and then I might look again and type academy. Okay, So I already know what fonts I want to use here. Save us the trouble of going through all that one is art brush. Okay. And for the academy, I used a phone called work, So if you don't have these exact phones, you can probably get them off of, um, Google fonts. And I show how to do all that and get other fonts in my crowd. Draw quick start courses. You can take that course end and get it. I will eventually put a coupon at the end of this course for the crown gall. Quick start course. So if you want to take that, you can probably get a good deal on it at the end of this course. So that's what I had there. But I wanted this to be all capital instead of retyping it, I can go to text change case upper case and hit. OK, I have upper case. All right, so I want things to be the same. Zoom in here. I have to zoom in because you'd be about the same with. So I think that's good right there. And now I want to I'm gonna grab my color gray and put it down here real quick before I before I lose it by copying something else and had to go back and get it again. Click there. Click. There are now graze down here. Good to go to leave that. Okay, so there's my quick start Academy and font got to be a little bit longer. There we go. And now I'm going to create a little stop Watch out here with a graduation had on. So and this is gonna be, like a little Leinart thing. So pretty easy to draw, but you can follow along with me here, so let's create a circle control dis constraint to circle. Start with that. And now I'm going to duplicate that. So shift to scale around the center and right click, as I haven't held onto and drop it about right there to create a rim. Okay, I want to create a another circle in the center. So let's skill that down, right? Click and then make it about their. Now I want to put some graduation marks around here. I'm just gonna do it with a line each. So that's gonna draw a line. And we started out the center here. That way we know where lined up there and click there, and I'm a click and drag it up and hold down control so it stays right in the center there . Okay, there's that now I want to rotate this thing so it stays. So I could make several copies of these, so there's a lot of tricky ways to do stuff like this. If you pick a circle that's bigger than that, that it's pointing at the center, you can select both of them, so you select shift, select and then click on one of them again. You'll get your rotation. And he noticed, That's right about the center so I can start rotating. I'm going to hold down control and you can see it constrains it to increments. I'm going to put get one of a couple notches over right click to make a copy. Do it again, right click to make a copy. Do it again, Right click to make a copy. Okay, so I got a few of them there. That means I also have a few of these circles because I'm making a copy of it each time, too. So I'm going to delete those. So click delete, click, delete, delete, delete. Okay, that was the last one's on a control Z to bring that one back. I'm going to do the same thing with these four, so draw box around those to select him. Shift. Select the circle again. Click again to get the rotation. And I'm going to start dragging these around and hold down control and take that right there and click to make a copy and let go that one more time. Rotate this around lips. I let go in the middle on accident. So control Z to undo that are going to collect to get the rotation. Now, I'm gonna start with this one up here and hold down control to constrain. And one more click to copy and let go. All right. I think I thought all we need there, So let's get rid of the extras. Select and delete Selected dilly Select and delete. Okay, Control Z. All right, I'm getting there. It's now I have my graduations here. I want to make a little make this thing into a little pointer, so let's Okay, I want to be just a little bit bigger. Going to draw a line from the center of this just out a ways. Put it like right there. Looks like a good spot. Okay, so I do not want this to be connected to that. If I connect, click right there is gonna automatically connect me to that. That beginning. Some is going to start back here. Sounded to worry about that. And now that's no. It's still selected. Its see now these air to lines there together. But you know what? I can use that I'm going to click on note editing over here. I usually hit F 10 but F 10 stops my recording here, so don't do that. So I'm going to drag that end to make this look like a equal triangle and click hit F five so I could draw another line and connect these two. Since these air selected, it's going to automatically combine those things. So now I have a closed shape there, and you can check to see if the clothes shape by just selecting a color over here. And it is not so. There's something in here that's not closed. Let's hit note at it again and you can see by. I think I see something weird going on there. So let's draw box around there and you can see right here joined two nodes. So that means see that it's not an option right here. You can break him, but you can't join them, so that means there's something needs to be joined there, So click that Here we go. Now we can have a color there. Someone a shift. Select my circle. I'm going to just Well, these together. I don't want to combine them, because that's gonna cut some stuff apart. I wanted to weld them together, and we'll make one big object. Okay, there we go. I want to zoom out a little bit. So there's our whole body in her face now A a stopwatch has a little bitty nothing on the top here. So because you some squares a rectangle and going to draw a big rectangle and then a small rectangle like so and get the pick tool, select them both shift, select the circle and hit, See, And I'll center those up, okay? And the select off of there. And I'm a drag both of these down so that there control dragged him down so that their behind the stopwatch face make them both white. Now I'm going to put him behind everything. Shift page down, moving kind of fast here. But my crowd real quick start course goes into great detail on all this. So I'm assuming you know something about crawled role here. It's like the outer thing here and my click white over here to fill it light. Okay, I'm gonna bring this to the top. So it's in front of the little stem page up shift page up. I mean, okay, so there's are a little top nub. We want one similar to that right here and right here as the stop and start buttons fillets . All right, select both of those. And I'm gonna right click to make a copy and drop it right there. Click again and rotate this thing down. Just a hair. And then I'm still in rotate control Z click again so I can move this thing, Move it down. And I want to just make it small or so Go about that size right there, trying that, uh, Now, shift page down. Put it behind. Everything all right? There's that one. Now I'm going to grab this side sizing handle here. Start dragging it this way. Hold down, Control. It will constrain it. Toe full size. Right click. Believe a copy. Let go. I just made a mirror of that. Now I'm gonna control and drag this thing all the way over to here and then drop it about right There needs to be behind everything. Shift page down. Here we go. Ok, now I have a what I would call a stopwatch. And I'm going to this button to be bigger. Though I want to drag that upward. It's a little bit off center, but I can shifts like that and hit C centers it back up. That's better. Okay, so now let's draw our graduation hat. All right, so I want to start with just some lines. So, freehand tool. I'm going to click out here about there. Click on that node. So it'll join out there on that note tojoin click about there from that notes that adjoining click about there. And we should have a color there. Yep. Okay. I don't really want that to be be part of that. Some, uh, click on noted it and dragged it away from there and just automatically snap to it. Get that where it looks like it's There we go. Okay. I still think I want that little bit squished a little bit more. Here we go. I think that's good right there. So I'm gonna leave it like that And now we're kind of looking at this thing from the bottom of this kind. Tipped backwards the way I'm seeing it. So now let's draw some lines to make the actual base of the hat. So we'll go there to there. Come down. Click there. Over click there. Uh, click there. Okay, so there's that. Let's get to note at it. I'm going to right Click on this line right here. And it to curve. So it's a curve. Just a curve that up. Right? Click on that to curve. Curve that up. All right, I'm hit the space bar toe. Go back to selection node. Fill that white. Fill that light. That's good. I think my base needs to be a little bit bigger right there. Mystifying. Select these two parts and put him in place. Make it a lot bigger. I'm rotate a little bit. Okay, here we go. I think that's pretty good, right there. A little tassel hanging down here, so it's gonna draw that real quick. So take a line. And this was come right off of right off of this place, right about there. Down little ways. Make it like a long triangle. here, I get the tat like it's the tassel. Come back up there, then I'll scroll in and I connect these two right here. So I could make that white if I need to. Here we go. Okay, So there's my quick start with a hat. Go down here and make this rounded so it looks a little bit better. Some hit noted it. Selected right click on the line to curve. I'm a drag these things out, like so here we go. All right, so that's it. That's really all I need right there. I think that looks pretty good. So now I'm going to play around with the size and the the lines that I have on it. So expect it all, and it's 0.5 right now. So 8.75 Looks like you gotta be careful doing this, because when you scale, it does not scale the line with so say you had it the size. You wanted to be a lot smaller. Let me go ahead and get it to where I want it first. I think that's pretty good. So do you think I want this to be a little bit smaller, though? shift to scale about the center. Here we go. Now, let me show you what happens here. I'm using lines here and line thicknesses. So if I was wanting to make this a lot smaller, I scaled the whole thing. I'm unsure what happens. Yeah, that's not good, is it? So you gotta just realize once you controls you to get on, do that. Once you do that, you can't really skillet much. But you don't really need to. I mean, you just when you export it, you make it the size you want it. So all right. And also with lines at dusk. Kind of a little bit trickier, because all these airlines So you want to You want these to be graying at the right click here, changes the line color. And if you want these to be gray, you have to fill them. So you left click on this color, but there we go. We have a quick start academy logo. You scale this down a little bit, so it's not too much taller. A little bit taller, though. Okay, so there we go. All right. I'm going to save that. I broke a rule there. I created that whole logo without saving it at all. So let's save, and I'm just going to call it assets, and I call it quick start Academy logo Gray. Great save. All right, now we're gonna export it for the web file export for web. So there's our logo. If we pick the white here and go transparent, go transparent for us. We got the pal. It'd ping. And now I'm gonna make this 30. So we decided. Hit Tab, resize it with zoom in on it again to fit. Wow, that is pretty bad looking there. But all that information is there, so we're just gonna leave it as that and we will export and see how it comes out on the web page. So that save as and we're gonna go back to our assets. Just get rid of the gray off of here. So it's Q s a logo ping. That's what you want to call that I had saved. Okay, so now I'll put that in your web page and we'll see how it looks. Okay, so here we are on the web page that came out pretty good. A little bit hard to see, but you know, that's just the type of logo it is. And you can read Quick Start Academy. So it is what it is, and I think it looks just fine. 23. Icons - Intro: okay, in this section, we're going to replace all of these icons that describe the different features with things that actually describe the futures thes air, the stock ones that were in there. And we're gonna create some new ones in CorelDraw that better describe these. What we want to do is way. Want to make sure that we keep consistent heights? So these tags down below stay lined up, So let's see what our heights are. So that one's 54 image info on 53 you image info and that one's 52 So say 54 is pretty much what they are. Keep it in the same color, and I'm going to take this one with me so I can use some. Have a more line with Senate, so I can use this to judge what line must use in my new ones. In a lot of designs, these air created with an icon fault like font awesome or something like that. But sometimes when you need custom ones, you just got to recreate them. So you re creating to look like the same thing. And I've actually replaced these with images of the fault. Awesome icons just so it makes it easy for us to replace them in this design without doing a lot of Web design code. Are any Web design code for that matter? So you give this a try yourself and replace them in the assignment at the end of this section, so let's get started. 24. Icons - Connect: Okay, so we're gonna start with the connect to your customers, and I'm thinking about, like, a chat balloon in the same style. So I'm gonna copy this one here. Copy image, and we're gonna go over the crowd role and create our message. Bubble new document. Make sure this is RGB because we're doing web graphics on screen graphic cm like a is for print. Click. OK, the started document. I'm going to start off by pasting in my example and zoom in a little bit. So I want to start by any lips for the chat bubble. That's good. Good. On where these is About the same size. So I can know what I'm doing here. So Okay, here we go. And in that chat bubble, I want three dots, some another lips and hold down control too. Constrain it to a circle. I got that one. Now we're going to click and drag to the right and hold down control. So it stays in a straight line about that far away they're going to right click toe, make a copy and let go. And then I'm gonna head control de toe. Repeat that action. So now I have three. Okay. Group those together temporarily control G. And then my going to select the ellipse also and hit. See for center and e for center vertically. Okay. And that Select the three dots again and UN group then control You all right. And a good start here. So these three things here, I just want them to be filled. So gonna grab this color here by putting it in our tray. I'm going to click it here to fill these objects and right click on the no fell to take the outline color off. Okay, there's that. And now this item here, I need to have a little talk arrow here. So let's middle click and drag upto read position a little bit. I'm gonna just draw a triangle coming out of here. Here we go. So it's well, these two together, So I want to, and that's selected on shift. Click and then click on weld. Okay. I mean, round off this corner down here, click on noted it that look like they're double click there, double click there to remove that one right click on the line and hit curve. I'm just gonna start dragging it out here so drying out like that, we go like that. F Ford is oum everything to fit. All right, Now let's make this a thick line about that thickness there without changing line thickness . So what I want to do is create a contour around it. So that is in effects. Contour right here already haven't opened over here. And let's try 0.1 and Stuart to the center. The inside. Okay, let's apply that. It's not quite there. Let's go. Four, apply that. It's getting there. Let's make it five by That. Gets pretty close there. Okay. So Okay, so what this is is ah, contour group, if you see that. And then So this is a control curve and we want to do is break this group apart. So you want to hit control K now a number two objects. So what I want to do is make this so this is see through right now. This is an object, and this is an object. So if we tried to fill these, you can see we have Ah, a top one in the bottom one. Well, that's pretty ugly in it. Okay, so let's select the top on and the bottom one and we're going to hit combined. If we hit Weld, it's just going to make one big object. If we hit combine, it's going to make this an object that see through. All right, so now that we got now, we have it see through Let's take the outline off of it by right clicking on nothing on the nothing box and then left clicking on the blue that we wanted to be. All right, So let's zoom out a little bit and see if we got what we wanted. I think we did. I think this might still look a little too sharp down here, so let's go, Teoh noted it. And we'll go down here and backing this up a little bit a little bit more. Okay, now, for I think that's pretty good. So that's gonna be our connect icon. So it's export that on to select everything. Let's save this first throwing a, save it and we're going to put it in assets here and we're gonna call it icons. We're gonna put them all in the same file here, save okay, now file export for Web. It's just gonna take that one that's selected and automatically chose White to be see through. And it gave me a nice looking, paying image because I had a a bit selected from last time in Ping and if remember from our chart, if we want transparency at all, we have to go with Ping. So it's either paying 88 bit or paying 24 bit but or choose an eight bit on this one because we can. It makes it really small file to make the height of this 54 like we discussed. Assuming on that again, that's what we get now. I would say that we call this. I gone one, and like I said, we wouldn't use generic terms like this normally. But for the way we're replacing our images, it makes it easy for you to get a view of what's going on without doing any HTML. So all right, let's say that, Okay, I'm gonna put that one in our Web page so we can see what it looks like. Okay, so there's a new icon and our connect with your customers, so I think we'll call that one. Finished 25. Icons - Grow: Okay, so now we're going to do the measurable Growth one. I'm thinking of a chart. Kind of like the same shape of this one would have ah, chart inside of it. So let's jump back over to crowd role and let's create a box like that one. Okay. Into around those corners, the note edit tool. You Since it is a rectangle you can just around those corners off, like so he needs to be taller, though. Match the other one. Yeah. Okay, let's go ahead and make this thick and have the right outline and everything. So we decided 0.5 was good and we wanted to be an inside contour, and we're gonna apply that pretty good. So let's break that apart. Control, OK? And then come buying together. Okay, so right. Click on nothing and left. Click on blue. Okay, so there we are. Now we have our outline. Remember, we're doing this without using line thicknesses, so this could be scaled to any size you want. Right now, I need to draw a little line in this thing. So just online that is trending upwards is what we want. So we just start drawing a line. Okay, so we'll call that are trendline. I don't see how we can fatten that thing up, so he only gives us outside. Contour is an option because it's just a line. There's no inside of a closed shapes. Let's just hit, apply and see what we got. Okay, so that's taken 0.5 on each side. So we need half of that. Make a 0.20 to 5 apply. So let me break these apart. Control, OK? And I'll delete this middle part. Now Let's right. Click on nothing. Click on the bullet. All right, so that's our trendline. It it's poking out over here. Little bit slits. Get rid of that. I want to hit. No doubt it. It's DoubleClick, DoubleClick and double clicks. I'm adding a note, adding a note and removing a note. Let's see what that looks like. One more out of ways. Think that's bad? I want to win the like of all this down here was filled Instead. Let's try that just real quick, just to see what it would look like. This is clear right now, so it's going to try and just draw a line that follows this in see if I can freehand it easier. Stay inside that left click there and right click there. I think I kind of like that. That's a whole different look. So you don't like that better or that better? That was lighter inside there, a shift paid down to make it. I'm a double click on the fill color. And where is gonna the other way? So we can see just lying that have a little bit. I think I like that. OK, so that's our icon right there. So I am going to select that personally, it saved before I do the export. Now, when it file export for web. All right, there we go. It's good down here. Make it the right height. 34 zoom in to fit. Okay, that's our Maikon. And it's four k. So that'll that would really quickly commerical this. I can to Okay, let me load that in our page and we'll see what it looks like. Okay, here we are on our site, and I think that looks really good. I think I can tell that the graph and intel that its trending upwards so mission accomplished 26. Icons - Find: Okay, so now we're down to our last icon, and it's to help customers find you. So for this I'm thinking of similar to this, but make it look like a little map going to an ex. So we're gonna give that a try in this trump over the krill drill, and we'll go ahead and take this, Drag it up here, right click to make a copy. That's our outline. A little X in here, So let's just draw that X. So we're going to x marks the spot, but kind of like double clicking, but not really, um, to slow DoubleClick, I clicked to set the line and then click again to start at that same point. So, you know, connect. Okay, so let's make it blue. It's pretty close and make it look a little bit like a pirate's next. That makes any sense. So let me get rid of the outline. I'm going to make it fatter on the outsides, which is how I always picture the Exxon a pirate's map. Kind of like that. I think that's good. X marks the spot right there. Now we're going to draw a line in here, getting there So I'm going to grab the Freehand tool and I'm gonna draw freehand line. Just dragging it. They're doing a loop, the loop in coming to the end. So coming to the X, some here. Yeah, Okay, let's clean that up a little bit of 10. Smooth that out that a little bit If you want a little more example of how to work with these nodes and all these and the handles and all that, uh, it's like that one hit smooth once again, my crown draw quick start course is a good job explaining all that. Okay, so there's our path, so let's make it that 0.25 thick. So get my selection to on hit. Apply. I think that's pretty good. I need to break this up into a whole bunch of pieces is what I want to dio So control k to bring that apart, get rid of the original line. Okay, so there's my path, but I want to do is I'm gonna go here and start drawing some rectangles around this, that I'm gonna take some portions of this out, whips girls, even me click on that again so I can click. I'm just going to right. Click every time toe set a new one. Take that around there. I would get it. To where? Ah, let me do a couple of these. You see what I'm gonna do here? So if I select that and select that, I can say back minus the front. So we're going to take the object in the back in minus the front from it. So it did there. Let's do that again. Okay, do it again. Here. Can keep this going before I lose My square. Might be a quicker way to do this, but I can't really think of one right now. All right. Make sure you're not in the rotation when you try to move it. That's what I keep fighting with here. Okay. Such run down through and do these were in to clean this up here a little bit. Once we get there, let's go ahead. And yes, there were a few down here too. It's a little bit easier, because it it's kind of straight. Okay, start removing all of these. So what happens if I just select all these and say no? Ah, I was too good to be true. So let's go one by one. Here, Groups from button to get the hang of a lot of the crowd role tools. It is a very powerful program. Groups did there. Okay, so there's that so far, it's clean up this middle here. So I am going to put another one in here. That's then just take care of that. That offer there. Okay, cut that loose. Cut this one loose right here. I'm a strong line through that one. Make it a like the back one. Back minus front. Okay, We're getting there soon. I'm doing here. Let me get rid of a couple of these nodes. No. Dead it. That one. That to a line that converted to a line and back to occur so that just straighten it out for me. Sometimes that's easier to dio get in here and see what I got. Going care of that one trying that at work. Straighten that out. Straighten that out. I am dealing with a microscopic line right here. So I think I might be getting a little bit too crazy about it, okay? I just want to break this one right here in the middle and will be done. And hopefully this is even visible once me get going with it. Clips. Alright, Bring that up there. That right into okay, now we got a dotted line is the trickiest dotted line I've ever drawn. Let's move this out aways rotated around. So it's right. Make it bigger here in a second. But let's first off left. Click and then right click. Zoom out a little bit. I think that's working pretty good. Let me make the X a little bit bigger. I think you get the point. Let's select all that file export for Web and go down and make it 54 tall from the fit. Okay, Save as. And this is the icon three. Okay, I'll put that into our website. We'll see how it looks. Okay, so there's our new icon in our website. I think it looks pretty good and we have custom icons for all three. I think we'll call that good