Lessons

Lesson Info

What Type of Graphics Can We Use?

I want to start out by talking about the different types of graphics we can work with. Now, when we talk about webgraphics, it can be kind of confusing because of some of you are coming from print, you know, there's two v, p s j pick all these different things that we use, and the web has their standard give jay pegan ping, and we're going to talk a lot about these, and if you don't know him, don't worry, you'll find out, but we've also got a lot of other formats we can work with as well. A lot of different things to two show and talk about I want to open up a pdf file, let me kick this in the full screen, and this is just a kind of a simple pdf that I put together that just talks about the image file formats and there's a lot going on here. I know, but I broke it down into different categories. I actually have web in the left column, all the on the right of print, and in the middle, I kind of called a unicorn because these air, I guess you could say, file formats that can be used for ...

both web and print, and I'm being a little generic here when I say, you know, let's, work with this etcetera, but when we talk about working with different file formats with prince for a long time, we've actually worked with tiff and gps and I'm kind of dating myself right now because a lot of us don't actually use those anymore. But tiffany ps were to file formats that, you know, we're kind of a staple of the print industry and something that you know some of us still use. I know that I actually will use a lot of native file formats as well these days for print, but like a tiff file, if I go take a look at that a tiff file right up here is actually a file that could be lost. Ian lossless and if you know those terms, those air can some kind of interesting terms, but when you say lossy compression, it actually means that the file for mother, the imagery, the color, the data, etcetera connection be compressed and it makes you look bad, okay, um and then lost less compression can take a file, make it smaller and file size without actually losing a lot of data or making a look horrible let's say that so there's there's a couple ways to go about it tiff was mainly for raster images, ok, so if you run across that, if somebody says, hey, you put this on the web site ok, we're not going to tip on the web that's clearly in the print column and it's something that we need to take and we need to actually convert to something we can use on the web not if it's going to be something like a photograph or, you know, some screenshot or something like that, you've got e p s a little different animal gps is vector essentially e p s actually stands for encapsulated post script and believe it or not, when we wanted to do something like create a shape that was vector, people used actually code post script to get it way, way back in today, e p s is a way to take the vector data and kind of make it print ready, if you will, it encapsulates it and in that little encapsulation, if you will that gps we can have vector, which most of us have, and it stays vector that's the cool thing, but we could also have fonts and raster and different things intermingled gps is don't work on the web, we just we cannot use them on the web. So if you get a gps from somebody in alligators slapped this on the web site well, once again that's something we're going to look at and say what we probably need to optimize that make it something else, okay, uh as far as you know, working with some other I've got some other file formats in the print column on the right there I'm not going to go over a lot of these I just want you to take a look at him because bmp orbit map is I haven't seen a bit map in like seven years okay to say that right now there used a lot for microsoft on for a couple of their operating systems office used them a bit um but they kind of steer you clear and they said he's paying so bit map is a little old school if you get a bit map we're not going to use that on the web either you got to take that converted to something else that we can use and we'll talk about those okay now as far as weather I want to get to these because this is basically what we're here okay? We got a lot of stuff to cover but with web week actually have we have gift j peg and ping those have been the staples of the web for quite a while those of the three file format it's now you're going to see that gift and ping are are solidly in the webb column ok now unicorn style j peg is actually in the middle here because j peg which stands for joint photographic experts group and I believe that that's the acronym hoping anyway that can be actually be used for print or web you can print with that if you want if it's high enough quality or if you compress it enough you can use it on the web and we use j picks all over the web you seem everywhere j peg is essentially a lossy compression okay, so it's actually going toe, you know kind of mess with the data bit make it look a little funky if you get too much compression going on but that's how we compress it make it smaller, right? J peg is great for a lot of color we're going to use the j pic filed for men and the web for images for pictures if you take a look, this is actually my son and the strain hunt but anything it's like a photograph, that type of thing anything that doesn't require transparency necessarily that's got a lot of colors in it. Okay, you put all those together it's a good fit for j peg uh given gin ping a couple different file formats that are actually very similar gift think of it this way if you work in if you work in vector illustrator ok? Or if you draw stuff in photo shop that's vector you're probably used a gift to save it out a gift is a little bit simpler and he's a lossless compression, which means if we take a gift, we try and make it smaller, we're not actually taken the the image data out, we're actually just changing the numbers of colors and it's kind of crazy, but that's, how we can make it smaller? Ah, gift can actually have transparency. So if you look at this, this is kind of crazy, but this little, like circle e thing here, this is actually an example of an animated gif if you see let's say, you're loading a website and you see that little thing going around or something like that, a lot of times they have used animated gifts for those the reason why we use gift for that is because you could see it kind of looks like it's vector little shapes, that type of thing, and it could also have transparency gift can have a simple transparency, and that just means you can, you know, for like, this little thing right here. If I had a red background on a web page, I don't want to see a white box around that circle anything, okay? So we can make it so it's see through in certain parts all right, that's transparency I can't do transparency was shadows and that's where gift really falls short if you've got a an object you know I'm thinking a logo with a shadow or something like that where you want to have transparency through that shadow they call it alfa trent l for transparency uh you're not going to use a gift okay give contaminant animation which is awesome there's a lot of money you're going to see a lot of gifts out there uh we also use gifts for things like logos and icons and page content et cetera I need the honest with you that I don't think I've saved something is a gift for like a year I mean gifts are they're great for what they are and they served a good purpose and people still use them I'm not saying don't use them animation et cetera but ping the next file for we're going to talk about his kind of taken over a little bit with gif ping is very similar it's technically a lossless compression if you will we could do some different things with the delegates kind of kind of nutty but it's good for vector content ping is great for things like logos and page elements basically stuff that it might have saved as a gift before okay ping has awesome transparency and what I mean by that is if you have let's say like a logo or some object that has a drop shadow now this is actually changing a bit because these days with css weaken and the drop shadow using styling and we do that a lot, okay, but in the past what we do is we have like the logo and we go into photoshopped illustrator we throw this cool shadow on it if you say it is a gift it's going to cut around the shadow like a solid like a kid cutting out a piece of paper right? But if you'd save it as a ping with what's called alfa transparency it's going to be beautiful is going right through the shadow and be totally transparent all the way to the edge ping has a couple different flavors it's got ping a being twenty four paying thirty to these air different channels you can work with a pink eight just to be perfectly clear here is just like a gift okay a ping eight can have transparency it's simple transparency like maybe just a color gets knocked out you can see through it in the object but it can actually be smaller than a gift a lot of times. Okay, this is why a lot of people are using ping instead of gift not always but a lot of times paying thirty two which is actually thirty two bits it's got the four channels and it is great for the transparency so you could see through that shadow and make it look awesome so it's a couple reason and if you get into illustrator and photo shop and you got to save for export it will show you the different versions of ping and that's the big difference between the top two okay, so ping is also for logo page content, et cetera. Just like gift now the kind of the last one here that I want to talk about as far as webb is concerned, we're going to get to one other but I'm gonna mention it spg okay as fiji is kind of a new kid on the block justus faras us using it and browsers supporting it spd has been around for a while it really has uh spg is vector for the web the thing about ping and j peg and giff even though I'm telling you that gift and peeing are awesome for vector stuff that's really going to save out as it's still rast arising the content it's still creating pixels just like photoshopped does and that's what you get out the other end ok if we were to take a ping logo like a logo say disappearing like this logo right here and we were to take it and put it on a mobile device and make it small and then take it put it on the desktop let's say site and we make it a lot bigger we're actually gonna play getsem pixel ization happening it's probably look pretty junky and if you take that same paying that's big on desktop and all you do is, like, scale it on the mobile, you're wasting pixels because essentially what's going to happen is you're going to take this file size thirty k. Whatever it is, you're going to download that to mobile and it's going to just be smaller, essentially ok and it's probably like I said, I'm gonna look kind of kind of junky spg is vector so essentially that means that it stays vector on the web. Spg is awesome a lot of spg it's something that illustrator khun save out and it's something that photo shop can also save out. Spg stands for scaleable vector graphics and the idea behind it is it's xml. It is still plotting points and saving his vector. So if you take a file, you save his spg and spg is a file format so it's dot spg you save it out, you take that thing and you stick it in a browser. You're going be able tio unless it has a width and height in it, you're gonna be able to just let it respond and it's going to degrade just be beautiful and crisp and sharp it no matter what size you go to, it kind of depends on the content because spg can actually have raster inside of it and excuse you can have fonts inside of it two things that we need to watch out for because raster inside of an spg is still raster and it can look like junk get big or small depending on what you do so as fiji is huge it's coming out on the web we use it for a lot we actually use it in place of paying in a lot of cases we use it for logos we use it for paige element to use it for social media icons okay use itfor backgrounds repeating backgrounds that could be vector and we used to actually save like you know give for ping little checkerboard backgrounds or textured backgrounds we could do that nest fiji now give a really simple spg and a lot of cases can be a lot smaller than ping and gift in j peg okay spg like I said before it's a good file format to have and something that we're going to use quite often going forward we're gonna look at it I'm going to show you how to create it so now there's kind of another another type of file format called web p which is from what I was reading about it it's definitely a newer web format it's not supported everywhere and it's something that google I believe probably a concert with some other companies came up with our is putting forward and the idea behind it is that it is lost and lossless so you could do both with it and it can have transparency and be beautiful looking at mastering it into all kinds of great stuff. But it's one that is not well supported. So you're not going to see it in a lot of programs already. Okay. Now, as far as working with just a couple of file for months to mention, I want to mention that we do have, like a I and psd and these air in the unicorn column. Um, just because they could be saved is anything we can save them is, you know, web or print, but these are native file formats. Illustrator is vector. Psd is typically raster restaurants content. Okay? And then we have a final version and realizing I didn't fill with saudi have placeholder content. But when you get this final pdf that will be filled out, we actually have raw or d n g or there's a lot of other types of I guess you could say camera file formats to come off of these newer digital cameras or digital cameras in general, and basically they have a bigger color space. They've got a lot more data inside of them, and the idea is that we have to go through and take that against you could say that original data. And we're going to keep it probably as a separate file. We're going to take it and optimize it is something else. We're going to save it as a psd to work on it. We're going to save it later for weber print, but it could go on a lot of different directions. Ok, I put it in print here just because that's what a lot of using four but it can really honestly go in any direction. So there's a lot of file formats out there I never talked about pdf, but I really need to. A pdf. Pdf. You could put it on the website and you're not going toe. You can view it there, but you can really just downloaded or look at it on, and it could be printer web. So but there's, a lot of file formats out there, and I just kind of wanted to give you this so you can take a look at it and kind of be reminded of where you might use it, what it's used for and how it's compressed, et cetera.