Let's go on this video, you're going to learn about the difference between Raster images and vector images and when to use each one
I've got a real world saying like these flowers are going to be using the roster image. And let me just go into the Photoshop and show you what this image looks like.
So here among that 33% it as a zoom. This is a roster which which point the color value of each one of these pixels is being stored and we're going to find it. It takes a lot of space just for that particular file.
Okay, moving on here have been some type of clip art or line drawn, such as this A, you're going to want to use a vector image and then case, you're going to find
The file size is drastically reduced. And yet at the same time quality is drastically improved.
Melissa, go ahead and get started here. And I think I created a couple examples given this video is kind of illustrate the power of vector images.
And I create a couple examples. I think you'll realize while you can save a lot of reduce the file size increase the quality by going with a
Vector, in this case a scalable vector graphic here. Let me go ahead and just close this image, and I'm going to create an image here. First of all, this is going to be a Raster images in Adobe Photoshop something come up here to file.
And I'm going to choose a new and I'm behind create one 200 pixels and with 172 and I'll press right
Let's start off here. I'm going to create a
red rectangle and I'm going to put that on its own layer. Some the pressing on Create New Layer icon.
Appear layers icon is not visible your press F seven or more computer window and go to layers to make sure that is this
Okay, somebody press and choose the rectangle murky tool. And again, I'm gonna put this on its own layer. Someone's going to create a new layer number go ahead and drag out a layer or drag a rectangle come along and fill that
And okay if I have been able to hit that Control D just did this like that. I want to put a drop shadow on the outside. I can just or a stroke Magnus good of blended options.
I can come to stroke and I'll put a five pixels stroke around the outside. Okay. Next, let's go ahead and create one more object to put on layer, as well as the credit a yellow circle kind of overlapping and we'll go ahead and drag out a circle.
Then I'll thoughts.
Okay, and then just like I did earlier.
To go ahead and
Put a stroke around the outside there. Okay, so I've got red and yellow. And again, what we're going to find is when we zoom in on this thing. It's going to get pixelated really quickly here, but let's go ahead and save this. We come up here to File, Save As.
I'm going to go to save it as a JPEG and I'm going to press here on this. I've got a folder called a woman called is shapes.
JPG, and let me go ahead and save them.
And I'll be okay so now what I've got is up just save this image right here under a tip shapes that jpg okay now let's go ahead and create a vector version of this on the come to Adobe Illustrator. To do that, I'm going to go create new
And it doesn't really matter. I'm just because I'm going to resize this image. Always go web large and I'll hit create
Okay, like we did earlier. I'm going to go ahead and start off with the rectangle tool. I'm gonna go ahead and drag out a rectangle and then I'm going to press on the foreground.
And I'll pick a red
I want to get my stroke.
I can come up here to a window.
And I'll press stroke and maybe arm had about 510 pixel or eight pixel border around the outside there.
Okay, so now we've got a red rectangle. Now let's go ahead and change that current am lips or circle like I did a second ago and Adobe Photoshop and it's a lot bigger than I get this Phil to like yellow
And I'll go ahead and drag out a yellow circle just like I did in Photoshop here. Okay, at this point.
I'm gonna go ahead and kind of reduce the file size here someone go to Object art boards and I'm going to go fit to selected art.
OK, now I'm going to come up here to file. I'm gonna go to save as a temp I'ma say this as an SVG. That's a scalable vector graphic and I'm going to give it the same him. I did a second ago. And that was shapes and I'm going to go ahead and press Save.
And okay, like if I take a look here. I now this is a particular icon depend on your
Configuration your icon, maybe a little bit different there. But here is the image I just saved. So I've got the original one.
Or not the original. It's the JPEG and this is the SVG scalable vector graphic know also went ahead and I had this prevents I've got shapes jpg and shapes as he already
So now when I come in here and I hit refresh and should fill these in. Okay, so here was the JPEG and here was the scalable vector graphic that as I zoom in on this.
You can see that that one definitely it's getting pixelated. We're here. So the scalable vector graphic.
And that is just going to maintain that flawless quality, even as I zoom in on that particular image.
If I was actually take a look. I can edit this file here I can come right here and go open with notepad. It'll be a drag that on over here.
So with this one, we can see we've got a rectangle. We've got a circle. We've got some coordinates. We've got some Phil etc there what you're going to find is the font sizes drastically last. So if I take a look at the view they go to details.
On this little bit okay the JPEG was 20 kilobytes. Now you can drag and drop that down a little bit ly a change to the quality
But the scalable vector graphic this Fuji was only one cowboy. So if you're dealing with some type of line drawn or clip art as we saw with that.
I'm gonna see if I still have that something along this lines here. This aim for, maybe I'm having someone color and you're going to find
You can get a much higher quality and a much smaller file size by going with this, some type of this case and went with a scalable vector graphic. And again, let me just zoom in. One more time on this.
We can see as we zoom in on the JPEG, it gets very pixelated RAS with scalable vector graphic we get that flawless rendering them.
Well, hopefully. In this video, you'll learn a little bit about the dress. We know Raster images has shown up here and a vector image as shown down below here. Okay, so next video. Thank you.