Lessons

Lesson Info

Optimizing Web Content Using Adobe Illustrator CC

The first thing I want to do or what I want to go into first and I want to go in illustrator I want to go to illustrator because you know we're going to start there with vector data and just talk about some of the different things that we can do now I have a logo open already you see right here vivo doughnut this is what I was working on a site for creating the word press courses here a creative life and we created this this logo here and it's vector simply because you could play tell why because it's you know nice, clean, crisp et cetera when we work inside of illustrator the great thing about illustrator is that we can scale the vector content infinitely in it it really won't look bad okay, because it's factor because it's points in math and we complied it and work with it now if we decide that we want to take something like this and we want to save it out this is yes you're not often gonna have something like this where it's a logo on our board by itself okay but I wanted to start h...

ere we're going to go progressively a little harder little further in if you start with this and we have in our board a lot of times when I work with artwork I know how many of you if you use the slice tools before you ever uses I hate them. I decided I must have been a horrible what they're in here and we use them sometimes. Ok, here's, the thing if we go to say about illustrator what's gonna happen is gonna look at the dartboard size and say, all right, that's human size if our are born, I'm just going to jump out here for art board was, you know, yea big, we would have a join or miss image with a little teeny logo in the center of it. One of the things that we need to dio is one more working with content. If we decide to put content and separate our boards, which some people will do, I do that sometimes to we're going to make sure that their report at least matches either the artwork itself or is kind of close to it. There's a quick, easy way to do that when we're kind of saving out if I select the content that I want to put the art board around, okay, and I'm like, ok, I want to see that out if I have a really big are bored or five kind of one it's almost fit. What we can do is I can go to the airport tool itself, which is hanging out in the left side over there. And under the presets these are two of my favorite features you're going to see fit to artwork bounds and fit to selected are awesome so I'll say let's just fitted to the selected her and it's going to exactly what it says you got to be careful with this because well, first of all we're setting it up so this is going to be the image sides right? If you use this kind of automated method here saying fit it you might get a half pixel size you might get something is not quite that what you want so you got to go back to kind of fix it that way but once we do this we say fit to selected are you also got to be careful that if you have a drop shadow that's not going to get cut in here it's going to get cut off okay, so you need to make sure you adjust for that. So what I might do is if I look at this and I go and look at my rulers and see if I'm in pixels already if I look up at the transform panel up here I could see that yeah it's not quite a full round of pixel, so make sure it is so set it to an even number also won ten or something like that and then said this one it's something that surrounded going to get a little gap you may need to resize the artwork to fit you know, if you're ok with that gap that's cool, but we kind of want to make sure we get rounded numbers once we get that out there we can they save this out, okay, so I'm gonna go to my black arrow now it's really need about illustrator is that if you go and you want to save this out there several ways we can do this. Okay? We can actually use safer web and that's what a lot of us have done before if you want to save a j give for paying, you could do this there's also another method using a panel that I'll show you in just a little bit here. But one thing I want to mention if you actually have a series of our boards in a single file I know a lot of people to do this. If you decide to save this artwork out as like a gift, a pig, whatever and you're ready to save it out if I have multiple art boards it's kind of just a little quick tip I want to mention here if I go to save right now it's going to save and cut him out it's going to be the airport is the size of the image already kind of mentioned that but a lot of times what I need to do is if I have icons or different things like that and what I want to do is I want to make it to where I throw like I want to save a sheet out or I want to actually show my client all the icons at once instead of saving them all separately we can actually go up under art boards and you're going to see that well we're not going to get that there there we go under slice clipped our board if you want to make it to where all the content within the illustrator file regardless of our boards you want to make it so it just comes out as one single image sometimes I need to do that you can turn off clipped our board and you get one big image ok it's kind of like photoshopped that alright, but typically we're going to save it like this now what I'm gonna do is I'm going to click on the art board I want here go up to file and we're going to see are safe for webb so I'm going to say fur web you're gonna see there it is right there only zoom in a little bit people a lot of times I used to zoom in all the time and this is a I think an issue a lot of people would make her problem I would zoom into and start looking at the quality and be like, is that look good enough? Isn't not look good, but on the web, not a lot of people going zoom, okay? They do zoom, but we got a look at it this one hundred percent we got to kind of see what it's going to look like, you know, one hundred percent so typically down here I'm going to go one hundred percent and we could zoom in a little bit over the right here you're going to see it's got all the presets, all the things we need to kind of look at if you look in the upper right, you'll see that we've got our j peg, our gift in our ping and these are two different flavors and I mentioned paying eight and paying thirty two, but with illustrator, we just have pinging paying twenty four ping twenty four is if you have a drop shadow and you want to see the drop that'll make it look awesome and transparent, you save it. Is that okay? Ping age is just a simple transparency. One color knocked out type thing for this type of image I when I first started working on the web, I struggled, I was like, ok. Of course we only had to file formats back then we only give j peg so I was like ok, so I saved his gift of savings j peg it was a little easier than but if you look here you're like ok, well now do I save this gift I saved is paying ping those were the two I would say that's probably because it is vector artwork one thing I suggest doing is look at each okay, just go to gift take a look at it you can see the way that gift works gift is actually lossless compression ok, I know it's his lossy there but you can add lost you can make it lose quality the way they control a gift is by removing colors. Okay, that's how we make it smaller? Essentially, what I tend to do is I tend to go to one of the file formats just start cranking down the number of colors and gift. Okay? And if you look down here in the lower left corner, you're going to see it's going to show you the file size the ultimate file size for this bounce between the different file formats and just we're going to train set some of these settings here like the two that you might bounce between for this one are gift and ping aid those those two are kind of interchangeable pink eight tends to do a little better stay better file size. Check this out. It's actually a little smaller than the gift right out of the gate. Same number of colors, but it's a little bit smaller. Okay, when we go to save these out, I'm going to say this is a ping, probably just because it's originally factor it's not that complicated, not a lot of colors. We try and crank the number of colors way down. I'm using the shift key here to click and go down and we're just going to see when it starts to epically epically fail, okay? And I think we're pretty good. I think we can crack this way down. We're not going to get down to like two colors because we had cannot forget what's called anti alias ing and alias thing is the edge to make it kind of smooth out and do that kind of thing. So we've got to be careful with that, so I'm gonna kind of put up the color's a little bit here ten, twenty colors that might be okay. And if we look at the file size, it really hasn't changed much. But that's ok, so with ping and with gif, what we're going to do is we're gonna make sure that if we want transparency, we turn it on once again it's a simple transparency it's just going to knock out and you see the checkerboard there but the checkerboards indicating transparency is just going to back out of color on one of the things that we do and this is a little bit old school and I don't think as many people do it anymore but you're going to see the anti alias ing on here, right? So on the edge of these objects we get like the lighter orange okay, then the problem is that this this anti alias ng here happens with transparency we're calling regardless if you choose ping eight and you want it, we need to make sure that we kind of match the white that was in the back to the background of the page, okay? And we can do that using what's called the mat color, so if I switched the mat color, I'll just try black, for instance, but what it does so the anti a leasing now puts the blackouts if I put it on a black page, it won't look like a white edge around it will look down okay? So that's going to look a lot better? I got to be honest, a lot of people just get lazy with this and they're like, I don't even want to mess with this whole thing the mat and cutting it into all this stuff so they're just going to choose paying twenty four if you choose being twenty four it just does it everything's alfa everything's awesome are these beautiful okay you don't have any settings look at this it's just do you want a transparent or not that's pretty much it once you turn transparency you're done but you got to check out the file size being twenty four twenty four is almost always going to be bigger than paying eight so you really have to be careful of that so for this one I might just set of this ping it and be done put on that mat color and if you if you guys if I said it back to ping eight if you have a page it's red just goto other on the mat and just choose a red you could do that I'll keep it his wife so there we go I still anti lacing setting it up thing I love about this too is that when we save outer optimized the web this way we can if we want to take this all right here you can change the sides so we could say let's make this two hundred percent if you are dealing with retina you can actually go out and say let's double the size and it will do a pretty good job of trying to make it double the size for retina for instance all right that's not too bad I'm not gonna lie to you that there's a lot of settings, and here we don't touch we just these air. So old um, they they're just they're ridiculous, like web snap interlaced. I mean, sometimes we don't realize, but you're going to see that they're just different color spaces and different things like that. We don't really have to mess with too much going forward. I'm gonna later on, and this is what I need to mention the right now I'm going to show you later on that if you get a file out of here and you're looking at the file size, you're like, wow, that's only a thousand nine whites that's pretty small not to bed that is not nearly as small as it can get. I'm going to show you different optimization methods for once you get on illustrator for this job, what you could do to take it further. That's one of the big things we can do, okay, so once we're done here, I'm looking at I'm like it looks pretty good I can always in the corner down here previewing the browser and hopefully get it selected don't they have a browser set, and no, I don't that's awesome. I have it all set up a machine. Html goes right to my editor. So but you go previewed on the browser typically on your machine. That's fine. And the last thing we do here is we're just gonna save it out. Be done. Okay, look down here. Kind of interesting you're actually going to see we have done cancel and save. I just was a while there where I was like, I don't know what's canceled. Done are not kind of the same thing but don't actually captures the settings and saves it with it. Cancel says, don't do it, just get rid of it re seven to the original now, there's kind of a nice little thing you can do here, which I think is great aa lot of illustrator and photo shop, even some in design dialogues. What to do this if I hold down option on mac all time windows, you can change these buttons. What's great about this is you can actually reset all the settings. If you want holding down that button, reset, or even just simply remember them for the next image you create that's kind of cool because don is going to capture the settings and save it with this file on ly, remember will remember it going forward. I'm scared click save let's get this out so I'm gonna go safe and I got to my desktop and save it out there and we've got ourselves an awesome little ping file let me go take a look at it there's right there and a lot of times what I do is I'll take my image I'll just go take a look at it in the browser that kind of thing so usually what I can do is just drop it on my browser and chrome is having a real hard time with this lately I'm not sure why just drop it in there it's not gonna let me do let me just go open up if you got a file open you can open it up to it's fine you never go and the thing about a ping file these air great like I said vector awesome looking they have transparency to do their thing but if you were to take this and make it larger on a site you're going to see what it does it's going toe picks late it's going to look like garbage a lot of times what we do is we we will save the logo for the largest size we're going to use it at but the problem with that is that if you go to using a mobile I already mentioned this all you're going to make it smaller you're going to size that you're going to scale it but if we do that, we're still downloading the large logo size ok, so we kind of run into a problem so for a while what people were dealing, I saw those people were actually creating two different logos one from mobile one for desktop, that type of thing or three or however many to get it to look good, okay that's ridiculous all right? And that that was something we had to do ok, but nowadays we have other options, so what we're going to do is I want to talk to you about spg that speech is huge and it's something that we're going to use going forward spg is great because it is vector it's still vector coming out illustrators still vector coming out of photo shop and it's something that we can to scale on let's look awesome and we use one file for all the devices that's all we have to do so to do that, let me go over the illustrator now we're doing this really simple example here, okay? But we're going to get into a more complex example I'll talk more about different things, but with this vivo donut if I want to actually under him and get rid of the original art board, what I can do is I can take a single our board and the artwork on and I could just save it as s fiji this is awesome it's actually really simple to do let me just say this real quick now illustrator can actually open spg files direct so you could take one and just open it right in usually it does a good job sometimes it'll fail because it's too complex or something but it doesn't really good job if we want to save his s fiji we simply open artwork we have make sure it's kind of on the right are bored on the right are port size that we got I think come under file and we choose save as once you go to save as let me make this a little smaller we got a format and you're going to see as fujii compressed and sug now as fiji's a little newer it's something illustrators been able to do for a little while though but it's dead simple to create it really is it's not something you have to really think too much about there's a couple caveats to that don't use compressed was going to say that right now okay compressed actually uses what's called jesup compression and if you know about servers and serving images and things like that that's awesome and great but is don't do it uh oh it's going it's one of those things if you don't know what does don't don't touch it were to do refugees so just do as fiji I'm gonna save it on my desktop for instance put it out there and you'll see that if you have multiple our boards you can say jozy jar board and it's going to kind of save models that's figgy files I don't need to do that we only got one I'm going to save it out and you're going to see this yeah, I know how many times I've done this right click save and I'm thinking, ok, I'm gonna go grab the image and go run with it and of course the options dialog box opens right? But the only reason we're going have to look at this is really a couple things ok first of all, you're not going to really have to touch this profile thing I wouldn't worry about that it's something that's set right out of the gate and uses the right right version of spg et cetera in old versions of illustrator if you guys are in cia six if you're in earlier versions, you need to check this because they haven't adobe spg we don't want to run with that okay? So just choose spg latest version one one whatever you have now the big thing about spg that we have to think about is suggs vector right? You can put in raster if you want so in here if we actually took an image and slapped it right next to the logo raster image it would be part of the spg and it would look the same as it looked in photo shop or whatever program made it in ok fonts are no different if you use a font in an spg file you have to be very careful there's a certain browsers and I'm not going to name names internet explorer but it will not deal with the fonts very well ok there's also versions older versions of firefox and things like that some other too but if you put a phone in there if you pick some wacky webb fun good luck okay it's really not going to work if you pick a web safe font it's called you'll probably be ok um and I say it's not gonna work I'm just saying it's not gonna work in every browser possibly okay we need to test but if you look out here you're going to see fonts we can if we want to let it go with the front itself and stick it in the spg or weaken dio converted outlines a lot of people this is their go to because well why not it looks the same don't worry about a fun it's just vector than got to be careful because this is spg if you have a whole bunch of text for instance and you say convert outline it's gonna look ok it's gonna look good but every little point is going to be a point in the code which can bloat the code size big time and be even bigger than any other file side so you got to be careful that test it out just try it okay? The only other thing is if you decide to go type as if you decide to go with the fonts that you have you can subset them if you want to so you can say none is kind of dangerous because it's saying just substituted with another fun okay and an explorer is really good at doing that and it looks horrible because it could get cut off their crazy things that could happen you can say subset meaning on lee put the characters use the glitz used you can do that you could say all blips common english, whatever okay there's some things I don't really mess with ease in here the common ones but I just kind of you know, on legal issues if you want I don't have any funds I don't need to worry about this that's the best part but if you do try it out tested out go look at it in certain browsers look at it in three or four different browsers and see what it does okay the image content I don't often put a raster image in spg so I don't really have to worry about this it is going to link it if you want to you can embed that content be careful about embedding because it's going to take the full way to the raster if you put a picture in here in illustrator it's going to take that picture and stick the whole thing in the spg which could be bad okay, so you might want to link through it. It's your call preserving an illustrated editing capabilities don't do that he's going to say that if you want to able to edit that later on in illustrator you khun, leave that on if you want to it's gonna add mork ode to the spg file we're always trying to go smaller that's the idea, the last thing we're going to look at is right here. It says more options I'm gonna click on that and there's really? Because a lot of this stuff is a little more a little more further down the road, if you will it's a little more advanced and I'm not going to go over all of it. Okay? This is just what I want to show you responsive if here's the thing about its future when you make it, I'll show you in a second I'm gonna turn this off with this off and it's on my default what's going to happen is it's going to put a width and a height in the code okay, which is funny, that's good and I turned it off what I'm gonna do is I'm gonna go look at the spg code there's actually a button down there I did click on now it's hopefully it likes you pull it out there to check it out this is that's p g it's awesome so you could actually read this if you really wanted to if you really wanted to museum in so we're going to see that ok it's xml that's all it isthe adobe illustrator made it this type of stuff we do not need in here it's just causing file size okay you're also going to see in here that we have wit and height with a height is not necessarily required in your spg more effect if you have it in there it will never get any bigger than that if you take these out by turning on responsive that's what that does turn takes he's out it will get his big or small is whatever is inside of it it will be responsive. Okay, but if you like the rest of this it's like oh it's a path it's gotta fill color and here's a bunch of points that's what that's what it comes down to okay, all right, enough of that all right, so once we're done with that if I let me actually turn on response if I'm gonna show you this somebody turn on responsive and we're just gonna click ok I'm gonna click ok save it out should be out of my desktop I believe there it is right there it's an spg file you can take it anywhere you want I'm going to just now take it and open in my browser let's see if I can drag it in its primary so let me do that we've got a fire fox grab it open hopefully it works every day and check this out beautiful right scale it mobile scale of desktop you're all good it's all vector looks good now that the thing about working with spg is that when we come out of illustrator with it you want to go look at it you want to test it already said that a bunch of times you want to take it into your browser see what it does hopefully works etcetera you got to test it on internet explorer if you can okay because we're gonna put this on your site it will not work as fiji does not work in ninety eight and earlier all right, so if you have to support I e eight you're going to come up with another solution it's one of those things and here's what I'm going to suggest you do I know I didn't I purposely didn't open this page we had this open earlier but if you type into your like google if you type in can I use is one word and then something like spg okay, if somebody comes up to you and says, hey, you should use the new webb mp the new block video format just typing can I use that thing that return and what it's going to do is going to open up the first code here can I use this thing? This is an awesome website it's going to show you the web support for that thing so it's going to go in and say ok, this is spg you're going to see that I e eight you know go all right but everything else pretty much all the different browsers little android earlier a little rough but it is not going to happen if we want to save out use the spg and a website if we need to support a eight in earlier we'll use what's called a fallback will swap out a ping or do something like that but I'm not going there, so so I think he's good it's something that we can use what I would suggest going forward is you need to optimize the spg further. Okay? Um there's, there are a lot of ways to do that. I really didn't want to go through that in this course just because we're trying to get the illustrator photo shop we've got a lot to cover but I would go check out to search for optimized spg or sug optimizer either of those terms and what you're gonna come up you're going to come up with some that are just online you can throw the spg code in there pasted in or given the file and it will make it a lot smaller it'll compress it for you so that's a good thing okay, let me go back over the illustrator now I'm going to open up an actual design and we're going to talk about that just because there's a lot more to this right then open up this web comp and this is one that I've had for a while this is actually my website or at least kind of a generation of it what if I want to do this what if I'm looking at my design and I decide okay I need that logo out let's save it spg ping whatever we decide to go with ok how do we get out of here? Well a couple ways ok? I'm going to show you two ways to methods. First of all, if we decide that we want this old school method what we would do there's two ways to do this you could either cut this out or copied out and stick it on sonar board okay and then save it out that way that's actually what a lot of people do let me show you let me zoom out a lot of people actually go on copy this thing or just drag a copy over ok put it somewhere over here let's say go to the art board toolmaking our board for it something like that size it's scaled to fit and save it out ok that's one way to do it another way that we would do this that we could do this rather is to use slicing slicing is it's still effective it's still something that we'll use from time to time and it kind of depends on what you're working on but if you want to slice something what we need to do is we need to actually just cut it out okay so the idea here is that we're going to use what's called the slice tool now the slaves to over here if you look it's way over here it looks like a little butter night for a knife I'm going click on that thing and just to give you an idea here I'm not we're not gonna actually do it this way because there's a faster way to do this the museum out we can just go out and cut out or drag across an object and what it will do the museum in it'll actually slice it out so what else did or does it treats each one of these little if you look at these little pink lines here each one of these is going to become a separate image this is the same thing we could do is in photo shop we could do the exact same thing we cut things out when we go to safer web will be able to just grab that one piece then now let me go back over the big one here and try that again so I gotta call the big one here I'm going to the same thing I'm gonna I'm gonna draw across and say ok we're going to cut this thing out you get as tight as you need teo and you could see that's how it's going to cut it out now the problem with slicing is that it's going to take whatever is behind the logo and everything stacked and layered and just compress it and save that out so we need to go in and hide everything that's behind which is just annoying okay let me show you a little faster way of doing something like this okay slices are they're fine. You can also delete them if I hit the lead I can believe him if I want or just undo here's a faster way to do this kind of stuff if I click on an object like this I can simply go upto object and you're going to see there's a slice command and we could say create from selection so we just say make it from the selection out there and you see one of those pretty simple what I did in the past when I still have on my my settings is I actually went into this command are these commands, and I made shortcuts for him. So keyboard shortcuts and you could do that really easily if you go into it and it keyboard shortcuts, you can make your own. If I make a slice from this, ok, we still have the problem of taking that content that's behind it and hiding it so it's kind of annoying, but we need to take care of that if I click on the kinds of behind one command that we use a lot in here is object. Hide. Okay, the shortcut. Let me show you the menu right in here. If you don't use this, you see right here, it's object, hide selection, the zoom in so you could see that object tied selection and the shortcut. This is when I memorized a while ago, command three or control three, and that just will hide everything you've got. So if I select something and I had to choose that selection, that menu right there or just take command three, it'll hide that object. Now I can go to different objects here and hit command three. Command three, command three and start hiding stuff and then save it out. This is what we need to do if we slice because it's just going to compress that thing. If we want all that content back later, we could just choose show all so object show all it all just kind of pop up now, that's. Fine. Okay, once I slice this, once I get ready to save it out, I can then go over and save it. So let's do that same kind of method. I just cut it out. I made sure stuff behind it is not showing because maybe I, you know, I want this to be transparent. So if I go under file and choose safer web, same kind of thing, you're going to see it's going toe, you know, bring me in here. You're gonna make sure this is one of the things that we need to talk about real quick. But you need to make sure that you're on the optimized tab here. Original is just going to show you the original artwork optimize. We'll show you what it looks like my dad saved out, okay? If you click on that slice, you can then choose what format to save it as ok so far in this case I'll probably save it is a ping I'll say there's something like a ping eight something like that and just be fine okay, now you'll see that's got transparency in it I just went over and chose ping eight on the right over here and we should be set it's got transparency set I can adjust the number of the colors depending on how it looks and file size of you know that type of thing and then I could just simply save it up and that's pretty much a this slicing little different okay, now it's going to actually also go with the main file name and it's going to put some fucking in numbers on the end there but I'll show you real quick let me show you that you can see it saves it in images folder and it's going to do this okay it's gonna give you pretty much every slice that we generated you see right there so you cut it out. We can if we want to tell it just tow have certain slices which is actually a good thing all right, but for right now I think that's okay, this set of methods I guess you could say for slicing is a little bit old school and it's something that I don't know I just I don't do a lot anymore okay come on his show you another way to do this slicing is still beneficial we still use it for certain things but let me show you something else here let me show you another way to do this I'm gonna get everything back and I'm gonna get rid of that slice in illustrator cc okay, this is ah creative cloud thing only we have ah newer panel in here and if I come under window we'll see something called css properties sis's properties is a way for us to be able to click on text or vector content and get the formatting from it in the form of css so if if I come to let's say I do this I'll say I'm like designing this thing and I want to go build it now somewhere I need to get the styling for this headline for instance, if I click on this headline box right here and go to sea assess properties, check out what it does you see it's going to give in to see assess right there so I could if I wanted to just go out and you know, copy all that and go to my website I'm building and just paste it in and I gotta heading it looks just like that, ok, we could also if we wanted to export all of the styling for everything on the page. But that gets a little crazy. So that's kind of cool. That's, that's, it's a great thing we can work with. So how does it work with images? Css properties panel, I think it's great. I mean it's just some some really good things here. You, khun d'oh if you click on an image ok, like let's say I click on out when I say image I'm talking vector content. Okay, I should clarify if I click on something that can't be made by css. Okay, if I click in a box when we start here, let me do a little bit simpler option here if I click in a box that has rounded corners for instance, like this kind of thing, if you take a look at the css properties panel, all it's going to do is giving the css styling for that object like rounded corners and background color and all this kind of stuff. Okay, that's. Fine, because that's how we would build it on the web. But if I select something like a group like this kind of stuff right here and illustrator looks at it and it's like, I do not know how to make css over that, I know what we're gonna do with that what is going to do is actually going converted to an image for you a really cool thing about this is it it uses ping and he uses paying twenty for the really good one it is actually going to just cut it out based on the bounds of the object and it's gonna take everything behind it and knock it out it's going to exactly what we just did with that whole slicing and saving thing but if I just select it and I go to see us this properties one thing you're gonna have to do is it's going to be blank and hear mine is there but this is kind of the trick if you will there's actually a little button here called export options the way I use this is a little bit lazy, but it gets it done if I click on this export options, we're going to see the style of bucks now the idea behind this whole panel is we're supposed to name our objects in the layers even like this thing right here this group it can't be called group you need to go and give it a name and layers and I never do that I don't need my groups, you know? I mean, so what you can do is if you just don't want to name the stuff if you can say why don't you generate styling for any things not need unnamed object it's called so just turn it on. And as soon as I do that, you could ignore the rest of this stuff. It'll do a lot of stuff. I click ok it's going to suddenly generate the styling for it now it can't figure out how to do the css for this. It can't like make rounded corners on this thing, so it says, forget it. We're going take a picture out of it, it's going to make a ping generated for us? The only thing we really need to d'oh is export there's like an export selected style when you export it's going to save that styling out, which I just dumping the trash, I don't want it and it's going to save the image, so I click on export tell it where to put it. Citigroup put on my desktop typically we'll put it in some kind of images folder. Here we go, just click ok, we don't have to deal with any of this kind of content cause I'm really just going after the image and if I go take a look, even just hold her there it is right there so much easier. I mean it's there's not a lot of options, though that's the problem. If you really want to dial in the ping and you want to try and get it smaller, smaller, using this method is ok. But you're going to need to take it somewhere else, all showing a little while to further optimize it. Okay, so when we worked with illustrator as faras saving for web, different content, we can. If we want to go slice safer web, we can also just go taken our board. Or we can use the css properties panel. There's. A lot of ways to get this stuff done. Okay?