Michael T Ganschow Green: Go we are now recording the meeting so Hello pre recorded people Hello live people, this is a D lecture on.
Michael T Ganschow Green: Exploiting we're going to also go into image file formats and what is good for what and how to export them in photoshop and then we're going to start cheating mercilessly it's going to be beautiful just just picture perfect so.
Michael T Ganschow Green: Before I get started and dig in with some with some nice class announcements and such does anybody have any questions on anything. /Users/MTGG/Downloads/GMT20210212-020141_Thursday-L_1760x900.mp4 /Users/MTGG/Downloads/GMT20210212-020141_Thursday-L.txt /Users/MTGG/Downloads/GMT20210212-020141_Thursday-L.transcript.vtt
Michael T Ganschow Green: For I get rolling so your comes everybody filtering in that's what I want to start with questions.
Michael T Ganschow Green: Alright cool okay so before I get started talking about file formats.
Michael T Ganschow Green: I do need to go over one thing really quickly one little bit of class housekeeping here so.
Michael T Ganschow Green: i'm really pleased with the.
Michael T Ganschow Green: With the participation in the critique so far we have this is a huge class there's 30 people in it, so we have.
Michael T Ganschow Green: two pages count them one two pages of critique so like these five here are your classmates and then this entire page, except for the sticky test posts up at the top, are all your classmates okay so.
Michael T Ganschow Green: I do expect everyone to leave feedback on everyone else's critique post, yes, there are a lot of critique posts here like I said there's 30 of us so.
Michael T Ganschow Green: As we would expect there's a ton of critique posts don't try and do all of your critiquing all at once i've had.
Michael T Ganschow Green: Several poor students who have emailed me going do you like Michael Michael this is Michael do we really do do we have to do, do we have to do, everyone do we have to put critiques for everyone, yes, you have to put critiques for everyone.
Michael T Ganschow Green: Now this is this can be a little daunting, especially because there's 30 of you who have posted critiques I, I understand that okay so here is my suggestion that I have given the folks who have emailed me and.
Michael T Ganschow Green: You I would advise breaking these up into chunks so that you are fresh brained and can provide the best feedback, I would recommend.
Michael T Ganschow Green: Doing like six to eight of them a night.
Michael T Ganschow Green: Doing six to eight of them a night because what this will do, or a day depending on when you when you critique if you want to do it in the morning.
Michael T Ganschow Green: Or the afternoon, if you want to do tonight six to eight of them a day Okay, because this will break your.
Michael T Ganschow Green: critiques up into bite sized chunks and keep you fresh so that you can provide them the best the very best.
Michael T Ganschow Green: of your critiquing ability, the best brain cells you've got because probably if you try and rip out 30 critiques over the course of like a day.
Michael T Ganschow Green: I mean by about critique I don't know 18 or 19 your entire brain everything in here is basically just going to be a bunch of clattering walnut shells Okay, and the critiques you will give to the remaining 10 1112 people who are left.
Michael T Ganschow Green: are going to be no good, so I highly highly recommend breaking this up into little bits and pieces also.
Michael T Ganschow Green: While you're doing critiques on page one, do not forget about page two don't let the poor folks whose posts have come, all the way to page to languish upon page, to give them give them your give them your feedback give them your two cents okay.
Michael T Ganschow Green: so that you may you may.
Michael T Ganschow Green: Provide your best knowledge and there are like in some of you, I see some of your threads like folks are folks are talking man.
Michael T Ganschow Green: Like a lot of these threads have 2345 and I saw somebody in here like eight yeah here we go Alison has like eight on hers there's you know, the people are people are given feedback man so um.
Michael T Ganschow Green: feel free and you don't I mean if you, you know if you want to just do one Z two z's here and their critiques are not due.
Michael T Ganschow Green: until Tuesday so you've got what five days left to do them.
Michael T Ganschow Green: So, again just break them up just do a few a day and you'll find yourself making really good progress so don't stress about all of these critiques you know it's there are a lot of them okay that's fine, there are a lot of them, I agree.
Michael T Ganschow Green: But.
Michael T Ganschow Green: If you break them up into into little bits and pieces you'll be just fine Okay, I promise you so just do six or eight four or five, whatever your brain availability is on any particular day get a few of those done and a few more a few more and pretty soon you'll have them all done okay.
Michael T Ganschow Green: So, before I get started talking about file formats, do we have any questions on critique or any questions about anything in class.
Michael T Ganschow Green: cool alright.
Michael T Ganschow Green: sweet, then I going to start spreading you about file formats so stop the sharing and i'll just start gesticulating wildly so.
Michael T Ganschow Green: When you're dealing with imagery on the web, whether it's pictures or illustrations or logos or pretty much anything that you want to use to visually communicate okay you're going to be dealing with.
Michael T Ganschow Green: What what amounts to for file formats, but a couple of the file formats have subtypes Okay, so there are many, many, many different.
Michael T Ganschow Green: image formats out there for the Web cam and each of them has strengths and weaknesses that are that make each appropriate for certain scenarios, there are overlaps between them.
Michael T Ganschow Green: Particularly when we start talking about PNG or Ping files because PNG files will.
Michael T Ganschow Green: duplicate a lot of the functionality of some of the other formats that that we're going to play with okay so area for formats.
Michael T Ganschow Green: First, an oldest format on the web is jpg dot jpg it's an acronym stands for joint photographic Experts Group Ken and jpg were designed to take complex visual images photographs.
Michael T Ganschow Green: very, very complex charts.
Michael T Ganschow Green: All kinds of you know of anything with a lot of visual information in it, they were made to take that and compress it down to as smallest size as.
Michael T Ganschow Green: possible now.
Michael T Ganschow Green: they're built for photographs, so they have an enormous color palette a jpeg can support individually over 16.7 million colors okay so.
Michael T Ganschow Green: pretty much any color that the human eye can perceive can be reproduced by a jpeg john and jpg are built to take all of that data and compress it so you can get jpg very small and still looking pretty decently so.
Michael T Ganschow Green: How they work is um as you compress a jpeg as you when you're exploiting.
Michael T Ganschow Green: Make the jpeg smaller and smaller what the jpeg does is it pulls pixels out of its information so it's not deleting pixels out of its file format.
Michael T Ganschow Green: All of the formats pretty much except one use pixels, by the way, to promote their images so basically pixels are little dots of color effectively.
Michael T Ganschow Green: dots on a screen squares when they're printed little teeny dots of color and each.is one color and they're so tiny that.
Michael T Ganschow Green: When you line up these dots of color the human eye cannot discern the individual dots and instead discerned the colors and that's is fooled into thinking it's looking.
Michael T Ganschow Green: At a shape, as opposed to just a million little dots and and all of these formats, except for one work on this principle, so what a what a jpeg does is, as you shrink it as you compress it to make it smaller and faster loading.
Michael T Ganschow Green: It removes pixel from the jpeg and then, when the jpeg is reopened the browser takes a jpeg data and guesstimates what was in the removed areas now.
Michael T Ganschow Green: Once we start building websites.
Michael T Ganschow Green: You guys are going to become intimately familiar with how bad again answers browsers are browsers are.
Michael T Ganschow Green: arable yes okay terrible guesses so needless to say, if you push your compression on the jpeg far enough, and you make a and you make the browser try and interpret more and more holes in your Swiss cheese of a file.
Michael T Ganschow Green: The.
Michael T Ganschow Green: The the the more obvious it'll be it's compressed i'll show you that in a second so with all web images jpg themselves plus all of these other formats when you're looking to do is present, the highest fidelity image possible, that is the best looking image possible that also.
Michael T Ganschow Green: That also loads the fastest, so this is another one of those teeter totters like we talked about between readability and legibility and type we have to carefully balance based on your target audience based on your website based on your design.
Michael T Ganschow Green: Which way you want to lean you want to achieve a nice balance of.
Michael T Ganschow Green: of visual fidelity and speed loading do you want it to load really fast, or do you want it to look really good, and these are the Games you're playing.
Michael T Ganschow Green: When you're doing image optimization for the web, regardless of what program you're doing it we're going to use photoshop, but most of the adobe programs have some form of.
Michael T Ganschow Green: Of.
Michael T Ganschow Green: image export and optimization now.
Michael T Ganschow Green: So Jay PICs as you pull more and more data out of the jpeg and make it smaller and smaller so that it's it takes up less.
Michael T Ganschow Green: megabytes or kilobytes or however big the images and loads faster and faster, it becomes more and more obvious.
Michael T Ganschow Green: That the jpeg is compressed and that's called artifacts let me show you some examples of artifacts because it is, it is highly various hang on a second so.
Michael T Ganschow Green: When I go up here and we're going to yes, thank you going to get out of the ways zoom Thank you alright we're going to add in or and here we go jpg aren't affecting.
Michael T Ganschow Green: Okay artifact a Mr T is to see there it is okay so as.
Michael T Ganschow Green: You start compressing jpg down you'll first notice wherever there is high contrast like say the blue in the sky, to the dark in this balloon.
Michael T Ganschow Green: You will notice kind of a model pattern starting up looks like a camouflage predator from the movie predator.
Michael T Ganschow Green: What that is is that is the browser being bad at guessing color differentials, as you pull more and more and more and more.
Michael T Ganschow Green: Information out, I mean you eventually can pull so much information out there, your poor jpg will look like this, where instead we're so badly trying to.
Michael T Ganschow Green: reassemble what was there and guess what was there and color blocks that you get these huge blocks of color effectively they look like giant pixels.
Michael T Ganschow Green: A lot of people call this pixelization and that's really kind of what it is, but each of these giant blocks are not individual pixels their blocks of pixels so I there is oh my oh my areas.
Michael T Ganschow Green: yeah oh noes we're whoo we're we're compressing these jpg and you can find all sorts of hilarious examples where people just took oh yeah there you go there's a hot pocket that when you cook it it spits out jpeg artifacts fantastic.
Michael T Ganschow Green: We were where people to take in jpeg and they have optimized them to the point where you can barely see what's going on, these are the people who have taken that teeter totter the.
Michael T Ganschow Green: The the does the image look good versus doesn't load fast and they're just like yeah you know what I really don't care how it looks I just want to loan Francis I can.
Michael T Ganschow Green: Just crank up the optimization on it, and you can tell that right away in a jpeg or somebody got a little frisky with the optimization on it, because you will notice.
Michael T Ganschow Green: It starts looking well, maybe not quite that bad, but you start seeing modeling in and around edges, even on.
Michael T Ganschow Green: gently compressed jpg you can see, this is a relatively generally compressed jpg you get a little bit of modeling along the edge and to come across that, as you play with more and more images so.
Michael T Ganschow Green: Okay, so what a jpeg is good for them, because i've already have been telling me about the perils of compressing them too far and turning everything.
Michael T Ganschow Green: Just in the mud holy crap some of these artifacts anyway um so tell me the perils of jpg what rj pegs good for well what Jay pigs are primarily good for.
Michael T Ganschow Green: Is any imagery whether it's a picture or a diagram or whatever, that is incredibly visually complex, that is, it has a lot of color to it, it has gradients to it jpg do gradients probably the best of all of these formats, at least the best of those that compress.
Michael T Ganschow Green: and
Michael T Ganschow Green: Any other differentiation between colors or smooth transitions of colors that you need jpeg or guy can.
Michael T Ganschow Green: play with export in jpeg in a second in photoshop but jpg your guy for complex imagery i'm.
Michael T Ganschow Green: questions on jpeg or on being careful to make sure your image looks good versus have it load fast.
Michael T Ganschow Green: So jpg are used primarily for photographs.
Michael T Ganschow Green: You have something much simpler drawing a cartoon a logo that only has a handful of colors not really all that many color transitions.
Michael T Ganschow Green: Then you can get that image much, much smaller by using a different file format.
Michael T Ganschow Green: And that format is gift Okay, yes I pronounce it gift and not Jeff I know I know remember 90s kid old school borderline Boomer.
Michael T Ganschow Green: i'm going to call it gift, if you want to call it Jeff hey, that is, that is your your prerogative I whatever you call it in the privacy of your own home I don't care yeah so gift is the is the format for simpler images, with fewer colors the reason why is that a.
Michael T Ganschow Green: jpeg optimal lends itself and shrinks itself for faster and faster loading by removing pixels from itself a gift doesn't do that Okay, a gift will preserve the resolution of whenever the original file that was used to make it likely a vector file because they're typically used for.
Michael T Ganschow Green: For graphics blueprints layouts logos things like that.
Michael T Ganschow Green: will take that that they'll they'll take that information and they will preserve the same resolution, the same number of pixels.
Michael T Ganschow Green: How a gift shrinks itself is it removes colors from itself now remember when I said I simple low color palette all of that well, the reason why is because gifts have a very, very limited color palette.
Michael T Ganschow Green: Okay they're capped at 256 colors compared to 16.7 million for a jpeg so you only have a 256 color palette to work with, so any kind of color fidelity or.
Michael T Ganschow Green: or transition between colors or deep multiple yeah I guess we'll break down when you try and do that stuff too okay and we'll we'll see that, when we try and mess around with them i'm.
Michael T Ganschow Green: Trying mess around with a with a an image that ostensibly should be a jpeg will make it a gift start pulling colors out of it.
Michael T Ganschow Green: So gifts of the real advantage of gifts, though, is as long as you're willing to work within limited color palettes and for a lot of illustrations are typically dealing with black and white.
Michael T Ganschow Green: Or you know 123 colors and logo or something like that.
Michael T Ganschow Green: um you can get them really tiny like because gifts are sized entirely by how many colors by the other actual physical dimensions and how many colors are going.
Michael T Ganschow Green: to rip it down to like four or five or six colors on a gift and you're going to have that thing down into like the single digits cave or even a fairly large graphic image cartoon logo that kind of thing so gifts are really, really good for that they also have two other things got.
Michael T Ganschow Green: Two other little party tricks okay The first one is transparency so.
Michael T Ganschow Green: jpg cannot support transparency if you have any transparent areas on a file that you convert into a jpeg a jpeg will flatten that file and turn them white if you have areas of transparency with a gif.
Michael T Ganschow Green: Then anywhere where it's transparent on a gift at all, will become fully 100% transparent so gifts evolved kind of alongside jpg to handle transparency gun and to.
Michael T Ganschow Green: to display images that had a transparent underpinning so you could stick things underneath them and have it come through the image in transparent areas yeah now the number two party trick that gets do.
Michael T Ganschow Green: That is really what keeps the format alive to this very day.
Michael T Ganschow Green: Through social media essentially is that gift support animation they are the only one of these formats that i'm going to talk about in this class either today or throughout the Semester that supports animation.
Michael T Ganschow Green: we'll get into some other forms of animation using javascript a little later on in the Semester, but.
Michael T Ganschow Green: Anything that.
Michael T Ganschow Green: That.
Michael T Ganschow Green: needs to be animated has to be a gift.
Michael T Ganschow Green: So a lot of.
Michael T Ganschow Green: Like little short clips you see on the Internet are in fact gif files so you'll you're probably once I started giving a jpeg and things like that you're probably going to notice.
Michael T Ganschow Green: Some of the artifacts and you're very familiar with them seeing animations all across social media.
Michael T Ganschow Green: Because gifts have been essentially kept alive via this animation thing, so a lot of transparency and being able to crunch really tiny gifts are are the only game in town, if you want to animate period period yeah so questions on gifs jpeg image optimization any that.
Michael T Ganschow Green: Alright cool, so what i'm going to do next, is our to, then the next color for the next image format so jpg rose first then give popped up the.
Michael T Ganschow Green: Service computer service compu serve, which a few of you have heard of probably actually invented the gift format.
Michael T Ganschow Green: to plug a bunch of the weaknesses of jpg it gets much even cruncher much tinier they'll support illustrations easier, they animate they have transparency, they plug a lot of the weaknesses of jpg yeah.
Michael T Ganschow Green: So early on.
Michael T Ganschow Green: or early or later on, as the.
Michael T Ganschow Green: jpeg or as Jay pegs and gifts kind of evolved in parallel.
Michael T Ganschow Green: A company called macromedia decided to throw their hand into the file format wars and essentially attempt to make one format to rule them all them all.
Michael T Ganschow Green: That format is called a dot PNG file or a ping K and macromedia used pings on some of their great programs and macromedia invented a program called dream Weaver which you become very familiar with shortly because adobe.
Michael T Ganschow Green: sucked it up when they bought macromedia macromedia also invented a imaging editor and optimization program called fireworks and a lot of fireworks is blended into photoshop once adobe bought macromedia well fireworks and native format was the pink okay.
Michael T Ganschow Green: And macromedia.
Michael T Ganschow Green: i'd still not 100% sure how they got all the browser makers on board with this, but they went in pretty much within the space of a year.
Michael T Ganschow Green: got all the browser makers to release versions of browsers that would display this Ping format and they basically wanted to make a file format that answered all of the weaknesses of both.
Michael T Ganschow Green: gifts and J pegs and kept it all under one roof okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Things are kind of our ducks in that the overall Ping final architecture.
Michael T Ganschow Green: is really cool right it's basically plugs all other things, but in order to use it, there are basically three some types of pings Okay, so there are Ping eight K Ping eight as an eight, as in the number, the number eight Ping.
Michael T Ganschow Green: Ping eight are called Ping ah, because they have what is called eight bit color an eight bit color is the limited color palette that I talked about with gifts so Ping eight duplicates a gifts 256 color palette.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Why would we use a gift when we can use a pain as well.
Michael T Ganschow Green: First of all, Ping ah, do not support animation so if you're animating you're going to a gift now Ping gates, along with the limited color palette also support transparency, to give you them some be transparent, or not on a ping eight.
Michael T Ganschow Green: So why should we so when should I use a gift and when should I use a ping as well again if is.
Michael T Ganschow Green: absolutely critical.
Michael T Ganschow Green: For us, when there's animation because nothing else supports it, so you doing animation gotta use a gift otherwise.
Michael T Ganschow Green: What I recommend doing is when you have something that's a drawing or simplified logo with something that has a simple and very broad color palette there's basically no transitions between colors not allowed to detailed things like that.
Michael T Ganschow Green: color detail image detail pings or gifts will handle nicely you export it as both as a gift and as a ping eight and see which one is smaller which one is the smaller file size Okay, because whichever one has a smaller file size is one you want to go with that will load faster.
Michael T Ganschow Green: Once you once you put it up online and link to it as an image Okay, so you want to have you want to just.
Michael T Ganschow Green: Do the both of them pick the smallest one because they display pretty much the same way minus animation they're very limited color palette transparency really good for illustrations and things like that.
Michael T Ganschow Green: Next comes the next type of ping which is called a ping 24 okay now a pink 24 was basically made as a jpeg for broadband all right.
Michael T Ganschow Green: And now, what I mean by this is that it's a jpeg but it doesn't compress.
Michael T Ganschow Green: Okay, so I want to have some natural compression the actual algorithm the overlapping algorithm has some compression.
Michael T Ganschow Green: But it does not remove data to the degree that a jpeg does.
Michael T Ganschow Green: So if load speed is your priority on your photos or your detailed color transition imagery or images, with a lot of colors.
Michael T Ganschow Green: Then you're going to want to you you're you're going to want to use a jpeg for that, however, if image quality is your absolute top of the mountain for you.
Michael T Ganschow Green: You want to use a pink 24 it compresses very minimally the images are pretty always high quality, unless you start off with garbage which we might in the in the export DEMO we're going to do in a second but.
Michael T Ganschow Green: they're really good for maximum image quality jpg okay.
Michael T Ganschow Green: But there was also a third type of pain, one that a lot of graphic software's fold into.
Michael T Ganschow Green: pink 24 but it's actually its own format, so a lot of graphic software's will include what this thing does in the pink 24 spec but you're not actually putting out a pink 24 okay so.
Michael T Ganschow Green: This spec is called a pink 32 Okay, so that so um let me backtrack a minute here so Ping eight is called it is called a pink eight because it's eight bit color which means it's got a Max of 256 colors.
Michael T Ganschow Green: pink 24 it's called a pink 24 because it has 24 bit color which is again just a a file nerd way of saying that it can support 16.7 million colors.
Michael T Ganschow Green: pink 32 does something entirely different from pink 32 adds a whole nother color chart to it, it can still support 16.7 million colors like the pink 24 spent, but it can also support what is called alpha transparency.
Michael T Ganschow Green: You will be hearing a lot about alpha transparent six is going to play with it and CSS a lot during the Semester, but pink 24 will support alpha transparency.
Michael T Ganschow Green: Well what's so special about that Michael you just told us that gifts and Ping gates also support transparency, what is why you raving about this alpha transparency.
Michael T Ganschow Green: Okay, so eight bit color file format support either, something that is 100% a color or 100% filled or zero percent phil it's either transparent or it's not okay.
Michael T Ganschow Green: pink.
Michael T Ganschow Green: Support opacity, so you can make parts of your image semi transparent so rather than just drilling holes in your image or.
Michael T Ganschow Green: whatnot you're going to have pieces, where the image gets in, and you can see stuff underneath them okay pink 32 and the pink format, in general, is the only file format we're going to be playing with you this semester that supports alpha transparency okay.
Michael T Ganschow Green: All right, so if you ever want to you so much like the ever doing animation you have to go give if you're doing.
Michael T Ganschow Green: Well image based animation pardon me you're doing animation based javascript have at the enjoy have fun and then you use you use gifts, if you want to do alpha transparency, non programmatically that is through an image have to use a pink 32.
have to.
Michael T Ganschow Green: Otherwise it won't support it only formats only game in town that will support alpha transparency.
Michael T Ganschow Green: So jpeg good for photos detailed images gifts, good for animation good for transparency, good for simple cartoon images.
Michael T Ganschow Green: Paying eight same as gifts minus animation simple color palettes think 24 hours same as jpg don't compress it as much the files will be bigger your website will be will have slower, but they will look better king.
Michael T Ganschow Green: Everything that you know and love about jpg and pink 24 hours plus alpha capacity baby Cassidy well we've all hoped for King acid so.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Oh, there was one other file format svg scalable vector graphics the only non pixel based graphics format in here it's very finicky and I don't think I will cover it right now, but we will get into it before the Semester is done.
Michael T Ganschow Green: Because they are becoming more and more popular on the web svg files because they're vector files and they load really fast.
Michael T Ganschow Green: And I will discuss vector files and that when we get into svg properties, but I want to get some programming and you first, before we start fiddling around with svg so the format you're going to be playing with mostly on the web, though, aside from this big switch.
Michael T Ganschow Green: The big boys you're going to be playing with rj pegs and pings gift is still there, mostly in the context of animation.
Michael T Ganschow Green: pings are pretty much taking up the rest of the slack the jpeg or not.
Michael T Ganschow Green: And you get to play around with.
Michael T Ganschow Green: Which one looks best and which one loads fastest to get to have that game so before I start, demonstrating how to spit out these various files and show off things that they're good for do we have questions on the various file formats that we're going to be playing with this semester.
alright.
So.
Time to go fiddle around.
Michael T Ganschow Green: All right, let's go share some screen action here let's watch share share and share alike, you.
Michael T Ganschow Green: are so.
Michael T Ganschow Green: My class lecture file is suddenly sprouted a bunch more images om je sprout it all sorts of images in here to play with.
Michael T Ganschow Green: So we're going to have a lot of fun now if you guys want copies of this images after this lecture they will be available in the at the class files download button okay so right now there's our website we've got a few different images here so.
Michael T Ganschow Green: let's start off with a fairly jpeg image here.
Michael T Ganschow Green: And we'll go through some various experts on it and i'll show you kind of how everything works so let's see.
Michael T Ganschow Green: Are you running photoshop oh good you're already running excellent I had you booting up in the background, but I was concentrating on zoom so much, I did not pay attention so i'm going to open up this ducky tiff ducky comes with photoshop.
Michael T Ganschow Green: he's he's he's sure Doc ish man yes sure doctor she's been with photoshop for umpteen million years.
Michael T Ganschow Green: In fact you there are projects and graphics where you get to mess with them pretty extensively our photoshop class has a has a good one, where you can really kind of break him open one of my very favorite projects that I wound up playing around with so ducky.
Michael T Ganschow Green: is an obvious jpg and Why do I say that well he's got color gradation notices highlights great eating in the mid tones grading and shadows he's got shadows here.
Michael T Ganschow Green: That are radiating out in the mid tones and then the MID tones themselves are popping out in the highlights he's got a lot of detail down here in his reflection and along this wing.
Michael T Ganschow Green: there's a lot of image detail here that the relatively limited color palette of gift may have trouble with so use it absolutely obvious jpg.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Then, how do we export files out of here for the West, so let me show you.
Michael T Ganschow Green: Actually, before I do that do we have questions any questions on anything i've gone over so far.
Michael T Ganschow Green: Alright sweet.
Michael T Ganschow Green: Okay, so let's export ducky.
file.
Michael T Ganschow Green: go down here we go to export so.
Michael T Ganschow Green: photoshop defaults by exploiting everything as pings so.
Michael T Ganschow Green: If you don't really want to get down in the weeds and really compress your images or worry about anything what photoshop will do is, if you go to file.
Michael T Ganschow Green: Which is the second menu over and you come down to export, which is halfway down the file menu, you can just click quick export as Ping and photoshop will save a PNG file wherever you tell it to so you know what what the hey I will save a ducky dot PNG.
Michael T Ganschow Green: right here in my working graphics and when photoshop will do with this Auto savers Ping is it will detect.
Michael T Ganschow Green: How many colors are in the document that detail level of whatever and select a level of ping that is appropriate.
Michael T Ganschow Green: So if it's a handful of colors and it's very simple ilana auto save it as a nominally computer optimized Ping eight if it's got a lot of detail in it, it will save it as a ping 24.
Michael T Ganschow Green: And and basically make it look like a jpeg and if it's got transparency in it it'll save it as a ping 32 and maintain that transparency Jackie at the moment has no transparency, although I might give him some.
Michael T Ganschow Green: let's have a look at this keeping we just made errors keeping right there what hey hey hey i'm trying to drag you down to photoshop.
Michael T Ganschow Green: be a good little Ping Thank you know not to dream Weaver hang on a second I drugged too far, people have drug too far staring into the sun and a drug too far, we need to put them in photoshop there we go all right now dreamweaver a pop up with a duck keeping in a bit so.
Michael T Ganschow Green: If you take a look at ducky pin by going a little bit you'll notice there's very little difference between him and a tiff file.
Michael T Ganschow Green: Which is a big high resolution file that is used primarily in printing don't use tips on your website browsers don't know how to make heads or tails of them yeah.
Michael T Ganschow Green: So here's our ducky pink and here's a tip okay so what's the difference dreaming for can open pink files, I know dreamweaver can open thing files Thank you dreamweaver I appreciate your exuberance and eagerness to participate in the class Thank you okay so.
Michael T Ganschow Green: But what have we really gained here okay well notice that it very clearly picked a pink 24 because the original ducky tiff.
Michael T Ganschow Green: If we look at our file sizes over here the original duck ETF is 288 kilobytes and Jackie down Ping is 253 kilobytes yeah we've we've really saved a lot a lot a lot, a lot of of of file size here.
Michael T Ganschow Green: Okay bye Okay, you know enough horsing around so let's let's use some proper export tools to see if we can get our ducky a little smaller So if you don't just want to automatically export it as a ping which is nice, you can always go to export as okay.
Michael T Ganschow Green: Export as is a separate export window that will let you modify things.
Michael T Ganschow Green: about your file now, not a ton usually type.
Michael T Ganschow Green: stuff.
Michael T Ganschow Green: So I you can't really get down in the weeds with it don't worry i'll show you the export settings where we can um you can change the size of your image.
Michael T Ganschow Green: You can have its scale change, so you can change the physical size, but you can also do that by going image image size about a third of the way down there.
Michael T Ganschow Green: You can change the color re sampling I generally tend to leave that on automatic.
Michael T Ganschow Green: And you can also shrink the file size down hey man hey hey I want my Doc I think I don't like all these colors man so i'm going to shrink the color palette of the duck.
Michael T Ganschow Green: down to eight bits of ping baby, so that he is much smaller let's see how much smaller and let's see what kind of degradation we're dealing with.
Michael T Ganschow Green: With a ping eight with this kind of information actually probably not a ton, but we will get some banding but I bet you it's going to use every one of the 256 colors.
Michael T Ganschow Green: That that thing applies okay so let's go to my you oh you're going to a different one no, I want to go to gnc 175 thank our let's put this guy here see there's are keeping imma call this Jackie eight bit.
Michael T Ganschow Green: Small Yes, he may be larger than happen, sometimes Ping gates with a lot of colors him let's see here so we're exploiting let's find out how big ducky eight PID is, shall we say, ducky Ping when we're here and there's ducky eight bit decade bit is half the size of ducky dot PNG cool so.
Michael T Ganschow Green: let's have a look.
Michael T Ganschow Green: So here, let me show you guys something so i'm at a relatively low magnification 100 or 200% you don't see a lot of difference okay.
Michael T Ganschow Green: So you can see kind of you know, the shadow gradations here and things like that, and the ducky thing right or in the in the original ducky.
Michael T Ganschow Green: Eight bit pin However, when we go in there in the original 24 bit thing, however, when we go into the eight bit Ping You see, they look kind of like splatters there's a color blobs and then splatters around them, that is 256 colors trying to match the.
Michael T Ganschow Green: The color fidelity of 16.7 million, so you can run into issues real quick if you basically use wrong type of export format here.
Michael T Ganschow Green: So now we're going to go back into export and export as.
Michael T Ganschow Green: And we're going to play around a little more, so this export as doesn't give us a ton of control, I mean we can scale our Doc we can resize him.
Michael T Ganschow Green: We can add metadata if we want that's information that carries around with the file that ids and it does a bunch of other things we can.
Michael T Ganschow Green: change your color profile but mostly what we can do in here is, we can change file formats K in photoshop a lattice export to Ping.
Michael T Ganschow Green: To jpg to give and svg so let's try putting ducky out as a jpeg so i'm not going to do that with a bit lucky we're going to make a bit ducky go away okay hang on a second.
Michael T Ganschow Green: hang on no go away because in chrome Thank you so now i'm a techie Ping here, we are going to let you know what we'll go back to original ducky tip hideki tiff we're going to export you as a jpeg we're gonna see how big or small you wind up becoming so we're going to go export as.
Michael T Ganschow Green: And we're going to go jpg.
Michael T Ganschow Green: Take any boo let's take it away and so we're going to export show me your lightning bolt come on Thank you so we're going to go ducky dot jpg, but this is going to be called a small de de.
Michael T Ganschow Green: De de dot jpg yet so we're going to export this jpg and we're going to see his size as a jpeg yeah and your size as a jpeg.
Michael T Ganschow Green: Is.
Michael T Ganschow Green: A little bit more than this eight bit color right it's a little bit more, but.
Michael T Ganschow Green: But.
Michael T Ganschow Green: The image fidelity is nearly the same as the others again, as I get in here you notice that the colors there's more smoothly washing into each other there's not the blobs and the splatter that we got with the with the pink eight.
Michael T Ganschow Green: So you can see here there's very little of the blogs and splatter we got there it's all very similar to the duck we have here.
Michael T Ganschow Green: And it's only a little bit larger it's like.
Michael T Ganschow Green: I don't know less than half again it's maybe like a third bigger than that limited color palette pinging.
Michael T Ganschow Green: Because this guy when they're in, and the reason for that is that this guy has a lot of detail, it was a much simpler image that Ping eight would absolutely destroy the image and just crunch it way down it look beautiful but it'd be like 10 K.
Michael T Ganschow Green: I what the hey we've done a jpeg we've done a paying we done let's let's make a gift here so let's see what our export as menu will do with a gift let's see what our options are, shall we.
Michael T Ganschow Green: sell very little options in turning them into a gift here, other than they have get really tiny so let's the basically all you can really do with this export, as is selected give and masha.
Michael T Ganschow Green: Small D ducky.
Michael T Ganschow Green: separate the children from the dead.
Michael T Ganschow Green: chug chug chug chug chug chug chug alright so let's have a look at our ducky gift let's see what we've done here.
Michael T Ganschow Green: So now Jackie gift notice is much smaller than our ducky eight bit Ping remember, I was saying, doing both and see which one you get while I see which one smaller well this eight bit Ping is 117 K ducky gift is 78 K.
Michael T Ganschow Green: Now my guess is the pink superior color model will show through here, maybe, maybe not.
Michael T Ganschow Green: So we're getting the same splatters that we were in the pink eight but it looks like the gift is actually.
Michael T Ganschow Green: Showing ducky much better now this this poor Ping probably has all 256 colors of the pink color palette at work, but nevertheless.
Michael T Ganschow Green: Ping excuse me gift color palette at work, but nevertheless this gift is really doing good work actually much better honestly than I expected.
Michael T Ganschow Green: With this deck you're still getting some splatters into detail loss and we'll get even further, once we start to track and colors, but you can kind of see the side savings that you're going to get.
Michael T Ganschow Green: Now that is export as it's kind of a quick and simple export.
Michael T Ganschow Green: Then you basically just pick the format of your thing, and you go, you can also come down here and export and set your export preferences okay.
Michael T Ganschow Green: So what the export preferences do mostly is set up, whatever your quick export is set as, as I said, photoshop defaults to pings, but if you find yourself needing to export jpg more often or gifts or even SP geez.
Michael T Ganschow Green: You can set that as your default export I leave mine on pings because I am mostly upping guy with a little bit of jpg and a teeny tiny bit of gif kind of labeled in there.
Michael T Ganschow Green: So questions on the various formats and the basic bit of photoshop exporting with Chad Decker yes, yes, just so Isabel yes, yes ducky as well donkeys gone through like the multiplicity treatment right like.
Michael T Ganschow Green: You know we've got like the different Michael keaton seer who were all kind of weird and then we have like the gift is like the one really dumb Michael keaton it's a little bit it's a little bit worrisome you know, yes, yes, yes, a ducks in the chat everyone, yes, yes, just so.
Michael T Ganschow Green: Should we give ducky something really to be concerned about.
Michael T Ganschow Green: Yes, there.
Michael T Ganschow Green: Here we go and chats off and running all right.
Michael T Ganschow Green: i'll let you to have fun so now.
Michael T Ganschow Green: Now let's do something terrifying something unbelievably frank.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Michael none of these settings you were talking about, we can really get granular we can really modify these images and we can really like do things with them.
Michael T Ganschow Green: And all you've shown us, I mean this seems pretty basic man I hadn't you might be lying to me I don't know if you know what you're doing well.
Michael T Ganschow Green: i'm first of all, no I don't know what i'm doing i'm totally imposter syndrome done i'm not even sure why i'm here i'm just sitting up in front of you guys talking.
Michael T Ganschow Green: and knowledge comes out, apparently, I have no i'm just a lens for it man I don't know where it comes from, I just I eat a good meal and then suddenly all of this stuff comes out so.
Michael T Ganschow Green: here is how we can get really geeky with our expertise, so if you want to get down in the weeds and shave off a whole bunch of file size and kind of.
Michael T Ganschow Green: Really kind of dare yourself on that image fidelity versus fast loading teeter totter we were talking about you know where you're kind of.
Michael T Ganschow Green: Balancing it what you need to do is use the same for web menu, but if you want to keyboard shortcut this thing it is option shift command ass that is alt shift control so on a PC or you can simply come down to file export and it's the fourth item down.
Michael T Ganschow Green: Okay, this is the crazy granular export okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: So what this one will let you do is this one will let you modify images in ways that humans, maybe shouldn't necessarily be able to in order to.
Michael T Ganschow Green: Really compress their load times OK, so the view defaults to to up over on this side is my original Doc This is my ducky Doc tip over on this side is my optimized Doc, this is the deck that i'm doing terrible terrible things to in order to make him load fast.
Michael T Ganschow Green: And then my controls are all over here Okay, with a save button and a get me out of here button over here okay so original frankenstein's monster so we've got more ducks in the chat just play up more ducks in the chat alright well there they go okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: photoshop by default exports a maximum quality jpeg that as a jpeg with very, very little.
Michael T Ganschow Green: If any compression done to it Okay, and by and large, on the Internet, you will not need a jpeg this massive Okay, so if I come down here and I buy these are some preset settings for jpg so i'm going to leave it at maximum.
Michael T Ganschow Green: And then i'm going to play around with my quality so we'll start off with a maximum and then i'm going to customize it using this quality slider.
Michael T Ganschow Green: Now, what is this quality slider this quality slider is basically how bad, can you stand to have that jpg look to get it load fat loading fast so.
Michael T Ganschow Green: A maximum quality version of our duck, as we saw when I saved it just default J Peggy on a photoshop saves as 171.2 K, as we saw I think 176 when it say that way so roughly the same right.
Michael T Ganschow Green: However, if I take this quality slider jacket down to zero look at the first look at the sexy artifacts huh all right, but the same physical size of image.
Michael T Ganschow Green: Right, there is now seven K, as long as you can tolerate an image that looks like a bunch of clown handprints okay.
Michael T Ganschow Green: it'll load in two seconds on a 56 K dial up modem, so this is, this is a tiny jpg I hope you're happy with yourselves, because it looks just awful.
Michael T Ganschow Green: i'm enjoying yes let's let's add so many artifacts as soon as I turned it back to 100 Jackie clears back up again zero.
Michael T Ganschow Green: Look at all those big downward we don't make the sound look at these huge pixel blocks, these are blocks comprised of entire groups of pixels.
Michael T Ganschow Green: so bad Okay, but typically you're not going to make a jpeg looking this awful unless you're doing it deliberately for comedy purposes and or to horrify the innocence in a GR C class, you might be teaching.
Michael T Ganschow Green: um but you also don't need to have it so high that you know, basically, the human I can't discern the quality difference up here at 100 right.
Michael T Ganschow Green: there's a lot we can pull out a duck before it starts becoming obvious that you have ripped data out of duck Okay, so is 171 K maximum jpg here is not the end all and beall okay.
Michael T Ganschow Green: We can start lumping little bits of quality out of him either by using the slider or by typing numbers in like let's say if I come in here and I sat him for at quality.
Michael T Ganschow Green: At quality has torn out 20% of the pixels they're gone the file size went from 170 K to 65 K look at that we've lacked 100 K off in the image just by taking out 20% of the data.
Michael T Ganschow Green: Probably a lot of repetitive colors in this white background, no, no, just smart like that.
Michael T Ganschow Green: But notice, you can see very little, even if I screwed in very little pixelization just a little bit here a little bit there just the edges get a little teeny bit rougher and that zoomed in like.
Michael T Ganschow Green: I don't know 1200 percent I mean i'm already pretty zoomed in here i'm zoomed in at 400 here, and you really can't see anything okay and it's already hundred K smaller.
Michael T Ganschow Green: Now let's take this guy down to 60 K 60 K, excuse me 60% quality he got just a touch more pixelated but he have done sighs again we're down to 33 K right we're having in size and again very little image degradation, even at 400% if I come in at 1200, we can see, like a little bit artifact.
Michael T Ganschow Green: Just a teeny weeny bit here and there, but that said 1200 percent okay.
Michael T Ganschow Green: let's take it down to 50% quality, shall we this is officially a medium quality jpg.
Michael T Ganschow Green: Again, just a hair more artifact thing, and not even really much over that 60 but we shaved off another 10 K we're down to two two to 20 K.
Michael T Ganschow Green: 22 and a half, technically, but look at that very, very limited image degradation is occurring in ducky for so much file size game okay.
Michael T Ganschow Green: All right now we're going to get down into 40.
Michael T Ganschow Green: Okay 40 is a low medium notice as soon as I hit 40 we got a bit more artifact in here, and here, and here, so the degradation and starting to get more noticeable even want to pull out to like.
Michael T Ganschow Green: A like a like I was at 600 year by plot to 400 there's a little bit artifact in here a little bit here a little bit here a little bit of that modeling we're getting some more degradation and notice, we only lost five more K a file size.
Michael T Ganschow Green: 876 more K a file size had to do the math pardon me, so I went into an art job you guys.
Michael T Ganschow Green: Know i'm.
Michael T Ganschow Green: So we have we have we can continue crunching the deck 30.
Michael T Ganschow Green: Again, little more artifact ng.
Michael T Ganschow Green: Three K smaller you see how now we're ripping more and more the image out for less and less so, I mean if you kept all of your jpeg medium quality here right basically 50% quality unless the thing is super detailed or there's a lot of color variation in it.
Michael T Ganschow Green: You don't really going to notice the degradation in the images and they will load super fast this the original the original tiff is 800 K.
Michael T Ganschow Green: The maximum quality jpg version is 171 K if we just set it down to a medium quality jpg at 50% quality we've locked 150 K off of our image that's wild, so now we have an image that will load super duper pooper scooper quickly.
Michael T Ganschow Green: technical term.
Michael T Ganschow Green: So, once you have a jpeg that you like, here.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: In order to export it you mash save.
Michael T Ganschow Green: And it will save it wherever you point it, I am going to put this dude are in my working graphics here, so you can download him later on this is ducky 50%.
Michael T Ganschow Green: say so questions on.
Michael T Ganschow Green: Exporting so far, while export safe for web is the super crazy granular Virgin.
Michael T Ganschow Green: You know ducky sprout and pixels.
Michael T Ganschow Green: You guys are gonna like star knows moles in the chat Now this is getting.
Michael T Ganschow Green: he's getting fun alright so.
Michael T Ganschow Green: To try and make a gift out of ducky to receive the limits of gifting as a image format and then i'll later on we'll open up something that will deal much better with gift the tude.
Michael T Ganschow Green: Ah, so let's focus in on Mr duck your high duck how are you very good excellent we're going to come here, where we get good variation.
Michael T Ganschow Green: And Okay, a couple other things on jpg I forgot, we have this checkbox right here called progressive.
Michael T Ganschow Green: If you optimize your jpeg for progressive loading.
Michael T Ganschow Green: It will make it.
Michael T Ganschow Green: ever so slightly smaller, to the tune usually have half a K or a 4k and what it will do is it will load the image line by line on slow connections.
Michael T Ganschow Green: For those of you who are old enough to remember dial up modems and there's probably a couple of you in this class when he would load images, particularly progressive jpg on a dial up modems they would render the photo in the browser line.
By.
Michael T Ganschow Green: line, and it was always it was always such as.
Michael T Ganschow Green: I use progressive only if I want to irritate people a slow connections I don't find it saves me a ton of size, so I figure hey crying the whole thing down the pipe now.
Michael T Ganschow Green: If you have to if you have to have to make super low quality jpg, for whatever reason.
Michael T Ganschow Green: Like let's say you have to get them through a very narrow pipe you need to make they either need to be super fast loading or your target audience.
Michael T Ganschow Green: Is all like rural where they have the kind of weird dodgy satellite Internet and all of that you can use this blur tool over here.
Michael T Ganschow Green: To basically vaseline the lens of your jpeg and hide some of the artifacts at the expense of sharpness and i'll just shrinks it's slightly.
Michael T Ganschow Green: Sometimes up to you know, like let's see what the main is here like this one's doing it it's down like three or four K it's down 4k.
Michael T Ganschow Green: And if I keep going lower oh snap my deck is getting blurrier I don't even know if there's a ducky and there were 200% blur but we locked off like a whole bunch of file size off of him.
Michael T Ganschow Green: In exchange for making him fuzzy as all get out I don't tend to use blur to balance it out, we have faster Internet connections now I can pretty much put a 50 quality jpg up and everything will work fine.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: But enough jpg tomfoolery should we give him.
Michael T Ganschow Green: let's do it hi gif So yes, has a lot more selectors here and we'll play around with them a little bit too.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: gif is very interesting OK.
Michael T Ganschow Green: And Ping eight is similar to this as well, you get pretty much the same optimizer is because they work, the same way they're eight bit color formats so.
Michael T Ganschow Green: there's your color table that is a 256 notice right here 256 color table that's all the colors that appear in dechy.
Michael T Ganschow Green: notice here's the original dechy here's the gift tacky he's a little speculate because we ripped a whole bunch of color out of him already went from millions of colors in the tip tip stuff 24 bit color like jpg and like pink 24 hours.
Michael T Ganschow Green: And they do and when you rip out, you know all the 200 of those colors I it's going to get smaller by nature.
Michael T Ganschow Green: No gifts have a couple of drop Downs over here we've got these different they're kind of gif color models, basically, and the, no one is more advantageous over the others I usually leave it at selective because supposedly selective as like the broadest.
Michael T Ganschow Green: The broadest browser support, but sometimes I will go through them and play around a little bit, but you're not going to get much size difference between any of the color models one or two K at most.
Michael T Ganschow Green: So down below here is dithering so what dithering is is if there is a dark color washing into a light color in a gift.
Michael T Ganschow Green: Basically gifts can't really do gradients they can only do bands of color and what dithering will do is it will take the edges and it will.
Michael T Ganschow Green: move a few pixels from the dark color into the light color and move a few pixels from the light color into the dark color to create kind of a fake.
Michael T Ganschow Green: gradient that basically just looks like cottage cheese I don't tend to use dithering much I use a bit I use the stock diffusion the other but i'm tend to use it a lot yeah and, yes, you can set the dinner further over here.
Michael T Ganschow Green: Okay let's play with colors so gifts, you know much like what jpg which are.
Michael T Ganschow Green: sized largely by this quality slider gifts are sized by this color slider so this gift right now is 90 K there's a lot of duck here whole lot of duck to go around yeah.
Michael T Ganschow Green: Well back out a little bit So you can see the color differential now.
Michael T Ganschow Green: With gifts you start ripping colors out now there are default color levels to go down will use those, but you can also come in here and type in a color amount and gifts will take it.
Michael T Ganschow Green: So we'll go from the default to 56 to 128 let's just have the colors involved now if I focus in you'll notice some of my shadows and highlights disappeared in been replaced with speckles this speckling is the dithering I was talking about.
Michael T Ganschow Green: The colors are gone, you know there's no shadow the shadow is just like duck he's got a five o'clock shadow he needs to shave now yeah you people in chat your deck he's growing a beard i'm growing a beard with the power of gifts.
Michael T Ganschow Green: So you notice any speckling just speckle speckle all over the place sparkle so now let's pull some more color out why not, why not.
Michael T Ganschow Green: it's what Jackie would want us to do let's have the colors again down to 64 oh look at that deck Eastern look like a like a like an old.
Michael T Ganschow Green: An old Nintendo cut scene from the old nas days a winner is you, it would go on let's let's notice those file sizes now down to 60 UK noticed, though, that are jpg which was at like 50% went right down to like 20 K, so this is quite a bit more.
Michael T Ganschow Green: Data than the other one all right let's have that again down to 32 all the specialists got harder also Jackie seems to be growing read chest hair as we're getting into this, this is this is getting increasingly disturbing.
Michael T Ganschow Green: Now we're going to go down to 16 oh wow look at that that wasn't chest hair, that was a pox of some sort.
Michael T Ganschow Green: duck he's got a breakout This is bad look at these dirty pimples you need to use one of those little sticky pads look at that oh man duck duck take a shower man.
Michael T Ganschow Green: yeah let's let's kick this down a little further how about some about eight colors and we go ducky is now basically TV static just weren't wearing.
Michael T Ganschow Green: let's see here let's strip some more colors out Celli for color duck is now kind of demonic looking just sort of evil in a general malaise kind of sense.
Michael T Ganschow Green: And then to color duck is some kind of abstract art shadow that's looking at you so as you can see, as we rip colors out the velocity font size has gone down, but the here's the 16 color deck file size, it looks noticeably worse than our jpg and the file size of steel larger guy.
Michael T Ganschow Green: Was 32 again noticeably worse file size still larger.
Michael T Ganschow Green: 64 starting to get a little better, but the file sizes massively larger so you kind of see in.
Michael T Ganschow Green: kind of seeing the limits of gifts here don't worry we'll pick an image in here the gifts are good for I promise you that.
Michael T Ganschow Green: Alright, so questions on gifts and jpg so far.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: A little more on gifts.
Michael T Ganschow Green: If you would like your gift to have transparency, you can turn that on and off here now, this guy has no transparency he's got a white background so it's effectively moved here, but you want to have transparency, you can check or uncheck that to trigger transparency.
Michael T Ganschow Green: Now over here is matt matt is very different, when you have transparency on a gift, it makes very jagged edges, because the gifts eight bit color format supports either 100% capacity or transparency not both.
Michael T Ganschow Green: So what happens is that.
Michael T Ganschow Green: it's either transparent or it's not and so gifs made this math as a way to fake a softer edge, and so what you would do is you would go in here to this matte color mixer.
Michael T Ganschow Green: And you would mix a color usually in hex codes that matched the background color you were going to stick this gift on.
Michael T Ganschow Green: And it would make the edge look kind of false lease moon we don't really use maps now because well really only using gifts and Ping gates are using gifts for updates here and there really anymore.
Michael T Ganschow Green: But back in the day, be it that was what that was for us, have you ever wondered.
Michael T Ganschow Green: Alright, so don't give some jpg I think you guys got pretty much the case for gifts in jpeg and doing all of the optimizations on them, ie they load fast and they preserve different good info with each other, but now.
Michael T Ganschow Green: let's expand the sound a little.
Michael T Ganschow Green: Ping eight.
Michael T Ganschow Green: Oh, this looks uh huh exactly like the gift optimization that's correct Ping aids are intended to replace gifts.
Michael T Ganschow Green: And they kind of do kind of don't again make a ping eight version of the thing make gift version of the thing whichever smaller use that but otherwise they're basically exact duplicates of each other.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: questions on Ping eight.
Michael T Ganschow Green: questions on gifs questions on jpg.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: let's continue.
Michael T Ganschow Green: Paying 24 1024 in this menu is actually a blend.
Michael T Ganschow Green: Of a regular pink 24 and a pink 32 photoshop when this is the old export or by the way the photoshop is kept around because it's super granular and so people can get in and dig around and tinker right.
Michael T Ganschow Green: So back then pink 32 was not a separate thing from pink 24 a pink 32 was just a pink 24 with transparency so.
Michael T Ganschow Green: If your image has transparency, you can check this nice little box here, and it will make a any area that's transparent whether it's 100% transparent 50% transparent whether it's got alpha whether it's slightly opaque whether it's 100% of whatever it will.
Michael T Ganschow Green: show any at all, transparency, your final had as if it was a PSD and i'll DEMO that in a minute here.
Michael T Ganschow Green: As if it was a PSD.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: i'm checking transparency gives you a pink 24 notice, probably the biggest one we've had yet.
Michael T Ganschow Green: bigger than that 100% jpeg bigger than any of the gifts bigger than anything because pink 24 as far less compression than any of those formats, what does that mean it'll give you the very best looking image.
Michael T Ganschow Green: But that image will also be large and slower to load now if you have alpha transparency in order to turn that on you check transparency here boom good to go OK.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: appear to be so alright.
Michael T Ganschow Green: cool beans actually I know all of you've got me on the back in the background, listening to my dulcet tones while you're writing critiques right now I know you are.
Michael T Ganschow Green: Even those of you who are watching this pre recorded and writing your critiques I know about YouTube I see you out there don't think I don't see.
Michael T Ganschow Green: Right see Isabel knows yeah uh huh yeah I know what you're doing alright so let's mess around a little more jelly we I think we've either we're pretty ducked out so we're going to duck out with the duck which I save.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So let me show you a couple of things here that will help demonstrate what gifts and pings are really good for.
Michael T Ganschow Green: So please, may I be introducing to you PAC man waka waka waka waka waka waka waka waka waka waka waka PAC man is relatively simple okay yellow circle.
Michael T Ganschow Green: wedge taken out of him and he's got a drop shadow on why does he have a why, why does he have a drop shadow on because I want to demonstrate some things using that drop shadow and its absence okay so First things first i'm going to turn the drop shadow off.
Michael T Ganschow Green: By going over the eyeball and turning it off, and my effects know.
Michael T Ganschow Green: What am I going to do next well let's play around and let's export PAC man waka waka waka waka waka and see how we can best export him.
Michael T Ganschow Green: So notice he's transparent, by the way we make a worker welcome welcome welcome welcome welcome doesn't work you don't make the sound notice, he is transparent.
Michael T Ganschow Green: file export.
Michael T Ganschow Green: Save for web let's get down in the weeds again the PAC man.
Michael T Ganschow Green: i'll start off Mr jpg we started off Mr jpg forum starting off Mr jpg now so if I go to my jpg notice jpg have math as well, very similar to the gift.
Michael T Ganschow Green: jpg man is just us to fill anywhere that's transparent and whatever color you have in here my case screaming read will be filled with screaming read.
Michael T Ganschow Green: screaming lip.
Michael T Ganschow Green: notice again we got some high contrast action of PAC man look at those pixels learners pixels we got high contrast action on PAC man.
Michael T Ganschow Green: We got a bright red background he's a little simpler than ducky so he's already relatively smaller jpg at 100% quality number 100% is the big boy jpg that you don't pretty much ever need to use.
Michael T Ganschow Green: So.
Michael T Ganschow Green: If I come in here.
Michael T Ganschow Green: And will tip him down a little bit will make him a medium quality jpg let's go 5050 on that medium.
Michael T Ganschow Green: So we've taken him down.
Michael T Ganschow Green: Already, all I got an artifact and see that high contrast, so you got that kind of fuzzy like PAC man's got like the junk around the corners of your mouth like he's just awakened from sweeping.
Michael T Ganschow Green: That is jpg artifact and as we add it in to watch as I make this 100 well there goes and then suddenly as I started taking information out there, go seven i'll artifact more.
Michael T Ganschow Green: So.
Michael T Ganschow Green: But this is 1,000% focused in.
Michael T Ganschow Green: I got them right here notice he's gone from 18 K to just about six K just by having this thing here, so we have like we've reduced the size of them by like two thirds just by lopping some data off of them.
Okay.
Michael T Ganschow Green: But.
Michael T Ganschow Green: But this ain't the best format for him notice he simple he's got a couple of colors maybe two colors so jpg well Nice.
Michael T Ganschow Green: As we crunch it down it's going to artifact all over the place on a simple color scheme like that we probably don't want to use that okay.
Michael T Ganschow Green: Well, we want to use as a gift or a ping eight so we're gonna come in here with a gift first now notice that the gif has a mad on it there's that roadmap from the other one.
Michael T Ganschow Green: So we can see, this is a PAC man assuming it's going to be placed on a red background Okay, so therefore in order to get the edge looking to jaggy it slips a little bit of red in the edge to kind of smooth it out if I don't want that I think I might say.
Michael T Ganschow Green: I think I might tell it have no matt i'm gonna click on this and as a no man so we're gonna make the edges jaggy as possible okay That means it PAC man is now.
Michael T Ganschow Green: One color.
Michael T Ganschow Green: So if I take my colors here diamond all the way down to two colors very, very minimal gift number are 50% jpg was a six K 5.9 K this gift is now one K, this is what they're good, for this is what they're really good for is super simple images like this.
Michael T Ganschow Green: By going here and I select the Ping eight again 1.12 K great for very simple images like this okay pink a pink 24 cartoons drawings anything that doesn't have a lot of detail in.
Michael T Ganschow Green: schematics anything like that that doesn't have a lot of detail in it, limited color palettes a logo that doesn't have a lot of effects in it being eight and gif.
Michael T Ganschow Green: You see him, you starting to see a little ceiling.
Michael T Ganschow Green: questions on gifts and paying eight.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: I can render all of this mood, though.
Michael T Ganschow Green: Simply by coming back here.
Michael T Ganschow Green: And flipping on his drop shadow.
Michael T Ganschow Green: Alright file export safer Web.
Michael T Ganschow Green: let's do some hot jpg action.
Michael T Ganschow Green: there's our jpg with a red background we can come in here and we're going to have it be a 50 medium So you see there's a little bit of pixelization in that drop shadow.
Michael T Ganschow Green: I think I might want to dial it up a little bit to smooth it out, maybe not to 100 maybe at manimal pixelization at at he's only 13 K, maybe seven day.
Michael T Ganschow Green: yeah actually but he's down to like 10 and a half K, so we can see, so this is where jpg start coming in now, obviously.
Michael T Ganschow Green: The problem with the jpeg gives me a nice smooth image, it gives me relatively smooth drop shadow, it gives me all of that that i'm looking for right all of that drop shadow stuff.
Michael T Ganschow Green: That i'm looking for.
Michael T Ganschow Green: But doesn't give me transparency, I want a transparent background why won't it, let me have a transparent background well.
Michael T Ganschow Green: keep taking the file format for that.
Michael T Ganschow Green: This is pink 24 by turn transparency off it turns into a regular jpg but of our turn transparency on and flip this into a pink.
Michael T Ganschow Green: Pardon me by check that transparency button and it goes to a pink 32 suddenly boom.
Michael T Ganschow Green: I now have beautiful look at that alpha look at that alpha that that drop shadow coming here at starting in like I don't know about 30 or 40% phil and just smooth league radiating after zero smoothly radiating out to zero smoothly radiating out to zero smoothly radiating out to zero.
Michael T Ganschow Green: So you can put whatever you want behind this Ping in your html file live text a background color another image whatever you want can be put behind this image okay.
Michael T Ganschow Green: So, because of this transparency, this is the magic pink 24 we're going to have smooth drop shadows cast over it okay great What if I do a gift that I made to transparency right.
Michael T Ganschow Green: notice that it sort of blogged where the where the where the drop shadow was and filled it with yellow Admittedly, this is a two color one here let's go to 256 notice that.
Michael T Ganschow Green: It can't smoothly go to zero so it's putting its matt in here and then they're going to start to start colors out it's getting just turn in dire man, I mean I mean it's turning into like some kind of like poster eyes, like French impression is nonsense over here so you've got to.
Michael T Ganschow Green: you've got to be aware of what file formats are good for gift seems like it might be good for this same with paying eight again it has the same problem because it and gift basically the same format and so when you want transparency, you gotta have pink 24 you gotta have pink 24.
Michael T Ganschow Green: So questions on gifts jpg pings and the various flavors of them any of their questions on their questions on what we're all doing here, you know talking about this.
Michael T Ganschow Green: alrighty then so.
Michael T Ganschow Green: guys a second to ponder what you.
Get the next gag set up.
Michael T Ganschow Green: Okay, are you guys ready to be really lazy I mean just like irresponsibly lazy just terribly lazy.
Michael T Ganschow Green: I know you are so gonna go down here i'm PAC man PAC man's awesome he's a good bro we're going to keep him but we're not going to save this first.
Michael T Ganschow Green: Instead we're gonna open up our terrible design look at how awful it is look at us just bath at.
Michael T Ganschow Green: Night navigation, the horrifying Homer Simpson with a nice illegible caption on him we've got a footer with a font that no one should legally allowed to use OK, we have an overused Western front of font that's got speed flames on it and.
Michael T Ganschow Green: A font that's made after a movie that everyone has forgotten what the movie is about, but you all remember the seal song.
Michael T Ganschow Green: associated with that movie and I know you do, and I know, having said the seal song from Batman forever half of you, yes, including those of you who are watching this recording at home.
Michael T Ganschow Green: years from now, you randomly downloaded this off the Internet, then your data mining it for my FBI file of just thought of customers right in your head Okay, so we have our design here.
Michael T Ganschow Green: We have been carefully carefully scientifically naming our layers in all lowercase except for our type which we're going to rename and second.
Michael T Ganschow Green: we've been naming them again, except for our type without spaces with dashes and things like that.
Michael T Ganschow Green: Why have we been doing this because we're setting everything up to be able to adjust straight export these as images so before I get into that laziness and for all of you start singing kiss from arose we're going to does anybody have any questions anyone.
Michael T Ganschow Green: All right, let's do this so.
Michael T Ganschow Green: photoshop has this wacky do little feature called generation.
Michael T Ganschow Green: And what generation does is you can pick any layer in photoshop name it after a file format.
Michael T Ganschow Green: And then save the photoshop file and photoshop will just spit out a bunch of images of any layer you have named like a file okay.
Michael T Ganschow Green: In order to get this thing fired up and on, and I think it may already be on in mind, but you have to go to the file menu.
Michael T Ganschow Green: And come halfway down directly underneath the export that you're all playing in a second ago when it comes down to generate and you're going to click image assets okay generate image assets, make sure there's a checkbox next to that.
Michael T Ganschow Green: Because with that we have now turned on the generation engine.
Michael T Ganschow Green: And what the generation engine is is a.
Michael T Ganschow Green: A little bit of photoshop that looks through your layers looks for file extensions on the end of the layer names and then spits out those layers as working whatever's so whatever you specify have a gif jpg Ping eight pink 24 and pink 32 this thing will make them okay.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's do a little bit of layer housecleaning shall we so in order to be better visible and stick it in the Center of the screen a couple of you commented that having a download over here.
Michael T Ganschow Green: In my lecture you were kind of lose track a little bit so i'm gonna hit the layers panel will eventually go back there because.
Michael T Ganschow Green: The layers palette deserve to sit in the corner and stare at the wall, I mean it knows what it did, but.
Michael T Ganschow Green: In this case, i'm going to bring it front and Center So do you guys can see what i'm doing with the layers when I go to export this file so there's my layer leaders palette right in the middle okay.
Michael T Ganschow Green: So first things first is i'm going to make a group of groups I got these notch groups, right here that have my highlight and shadow pairs making the notches tink tink tink tink in between all of my buttons okay so i'm gonna make a quick group group I know this group notching.
Michael T Ganschow Green: No, I don't want to select that one, I want to group select Thank you use your shift key Michael fam tonight, I have a group of groups i've got my layer group inside another group not chin as I got a group into my group.
Michael T Ganschow Green: Sorry i've got a group inside my group.
Michael T Ganschow Green: But back for groups inside my group and inside those layers my photoshop files getting groupie now I got to rename my text layers because they have spaces and stuff in them okay so i'm going to rename this has gone on long enough.
Michael T Ganschow Green: To.
Michael T Ganschow Green: footer exclamation.
Michael T Ganschow Green: exclamation.
Michael T Ganschow Green: i'm gonna name my my.
Michael T Ganschow Green: My image caption there i'm going to name it figure caption again notice the file naming conventions, no spaces all lowercase no special characters if it's in a cartoon swear word it does not belong in your file name yeah.
Michael T Ganschow Green: Alright, so now there's my body copy so i'm going to call this dead body copy.
Michael T Ganschow Green: And then there is my navigation text so i'm going to make it navigation text yeah.
Michael T Ganschow Green: boom there we go now everything is set for my own terrible terrible terrible set of generations here, so I need.
Michael T Ganschow Green: I need i'm begging, all of you for forgiveness, I need to forgiveness, those who are alive.
Michael T Ganschow Green: And the forgiveness of those are watching on video, because this is going to the finals this thing's gonna spit out or just going to be just just just terrible looking okay.
Michael T Ganschow Green: So i've got generation all set generate image assets okay I got a big pile of image assets, so now, I can start looking at my various assets and figure out what I want them to be okay.
Michael T Ganschow Green: So first things first is my background, it has a nice smooth gradient on it okay so let's say I want to preserve that Nice smooth gradient okay I don't want it to be choppy.
Michael T Ganschow Green: What would I export that as well i've got a couple of options, I can either do a high end Ping i'll just give me a high end jpeg or a pink 24.
Michael T Ganschow Green: And when I will probably do is export it as a pain now if I was doing this for real I would not export this at all this background, why, because I can make a gradient exactly like this programmatically using the code.
Michael T Ganschow Green: yeah but i'm gonna put a pin on that right now i'm going to take my file and i'm going to save it okay so dot Ping I saved it.
Michael T Ganschow Green: Now, suddenly suddenly in my working graphics hubspot and another folder you guys a sprout another folder named file name my name my file name assets in in here.
Michael T Ganschow Green: Oh crap it's my background layer you guys.
Michael T Ganschow Green: done what have I done what have I done i've set my photoshop file up just automatically export itself and you can't stop me.
Michael T Ganschow Green: Questions so far on the generation process we're going to get freaky geeky in a second.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: We ain't even getting started yet.
Michael T Ganschow Green: Alright, so much my next layer footer.
Michael T Ganschow Green: Look at that look at that Nice smooth gradient in the footer again wouldn't export the footer as an image at all with build this with code because of html and CSS I can make a schecter schecter floater that looks exactly like this, a nice sewage green to sort of like scab read to like.
Michael T Ganschow Green: kind of infected mucus screen gradient going on here so i'm going to take this guy and, unlike the other one which is a ping will make this a jpeg.
Michael T Ganschow Green: And photoshop will sense because it's got a smooth gradient in it that the way that it should be a fairly high quality jpg to keep the gradient smooth and indeed look at that I don't know about you guys, but my weird design it tells me that's a pretty nice gradient right da.
Michael T Ganschow Green: Alright, so now, I can start doing this with some of my other files i've got a top bar, which is basically just a placeholder for stitch so i'm going to turn that top bar off.
Michael T Ganschow Green: Oh snap dog i've turned the top bar off, but I leave him in place but he's not going anywhere stitch is going to get exploited, though in all of his.
Michael T Ganschow Green: glory so stitches in in hitch, so therefore he's a jpeg.
Michael T Ganschow Green: I stitch save a file SAVE I already just did that my command ass control s on a PC, but you can also do a file so.
Michael T Ganschow Green: Now, suddenly they're stitch.
Michael T Ganschow Green: Hello stitch there, he is notice that it has.
Michael T Ganschow Green: That it has just punched out the jpeg with a with my.
Michael T Ganschow Green: With my mask and tacked on it, we can change that up if we don't want stitch to be a jpeg we can make stitch a PNG.
Michael T Ganschow Green: areas.
Michael T Ganschow Green: And again he's got the mask underneath him here so we'll ask him a little later and we'll make that move we'll see if we can make that mass transparent and actually have 100% sure we'll be able to but there, he is stitches ready to go.
Michael T Ganschow Green: My nav bar what i'm gonna save that as well that's another nice gradient we do a painting or a jpeg coin toss let's do a jpeg.
Michael T Ganschow Green: All right now we have my navigation text here I think my navigation text with this lovely gradient find it would be a perfect PNG so i'm going to do that, right here.
Michael T Ganschow Green: Because we got this nice text behind it Okay, so now we're going to hit save.
Michael T Ganschow Green: Now we're going to check out my navigation texts Ping look at that look at that actually there's transparent haha because.
Michael T Ganschow Green: The I forgot i've got an in dark mode now so if I take stitch and open him up in photoshop I bet you will be checkerboard it underneath him.
Michael T Ganschow Green: Come on stitch yep it is transparent, so that area underneath him, it is transparent excellent.
Michael T Ganschow Green: So, so is my navigation text look at this look at this beautiful pink 32 at rendered seeing a gradient over transparency.
Michael T Ganschow Green: Look at that gorgeous pink 32 that's got a layers ballot right in front of it hang on a second I gotta wait until the.
Michael T Ganschow Green: damn zoom browser chrome stops tipping over the top of my layers so I can move it zoom browser chrome please leave, please, to be leaving Thank you so look at that gorgeous beautiful.
Michael T Ganschow Green: lovely gradient to transparency, with a drop shadow you guys, this is the stuff that dreams are made of right there look at that drop shadow and glow.
Michael T Ganschow Green: Oh man award winning design award winning.
Michael T Ganschow Green: let's see what else we're going to do here so.
Michael T Ganschow Green: we've got our body copy you would never export your body copy out of photoshop either you're literally typing your body copy into the web site so you're not going to export that but guess what.
Michael T Ganschow Green: I am I think it's got a nice glow on it let's make it a ping give it a blow up here, we got some things i've got to figure caption over here underneath terrifying Homer Simpson so i'm going to make that figure caption a gif why because it's just one color.
Michael T Ganschow Green: And we got some footer exclamation type here we're gonna make that a PNG so it's Nice and semi transparent they go Bam i'm which I do the content divider as that's this line, right here, I gotta make that a.
Michael T Ganschow Green: Little gift, why not.
Michael T Ganschow Green: Then I will make Homer.
Michael T Ganschow Green: he's got a nice drop shadow inside him when I got a jpeg Why not give me whatever he wants to be maybe Ping let's see what it looks like as a jpeg and then Lastly, from a notches i'm a menu here and i'll Nazi Nazi let's make them.
Michael T Ganschow Green: Well, there are only two colors on other semi transparent though that's my campaigns I go.
Michael T Ganschow Green: To a layer for notch pings a stay at home or looks.
Michael T Ganschow Green: suitably awful yes.
Michael T Ganschow Green: Oh yeah suitably awful excellent excellent excellent excellent excellent excellent suitably awful.
Michael T Ganschow Green: So, Michael.
Michael T Ganschow Green: So.
Michael T Ganschow Green: How do I make my stitch just be alarmed just be this top part instead of this whole thing that the mask is caused well what you're going to have to do is.
Michael T Ganschow Green: Take the mask off of stitch.
Michael T Ganschow Green: I they're gonna say, do you want to apply the mask no, I want to delete it.
Michael T Ganschow Green: And you have to come in here.
Michael T Ganschow Green: And just.
Michael T Ganschow Green: trim the rest of stitch off at the bottom like cutting sorry it's a little blunt force, I know, but you know.
Michael T Ganschow Green: Something something you can make an almond without something something so there we go we're going to save this thing file save.
Michael T Ganschow Green: Now stitch should nicely be cropped into a line must be some pixel of him in place somewhere, so I have to get a little more thorough with the cutting.
Michael T Ganschow Green: But we'll have to we'll have to keep keep cutting him let's see here let's see what happens if I select the stitch layer where.
Michael T Ganschow Green: Is there no no okay so it's so it's behaving oddly well, we may have to crop that one later.
Michael T Ganschow Green: So I questions on this guy notice now that all of my layers have a an A an image equivalent in these assets, so now what you can do is you can take these assets here and then copy paste any.
Michael T Ganschow Green: any number of these guys into your images folder and use them on your for real big boy website okay.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: All right, but we're not quite done with this yet when not quite 100%.
Michael T Ganschow Green: done with this yet okay.
Michael T Ganschow Green: Not.
Why.
Michael T Ganschow Green: Because.
Michael T Ganschow Green: You can generate multiple images off of the same layer
Michael T Ganschow Green: So all of those things that I was weighing whether or not they could be jpg or pings like these, like my footer gradient and my top bar which i've just turned off because it's stitch.
Michael T Ganschow Green: Like stitch like my navigation, like my exclamation type the body copy and my text, I can have them all, as both so I can pick.
Michael T Ganschow Green: So, in order to do this in order to have an export multiple varieties of a file, you have to come into the layer okay to come into the layer
Michael T Ganschow Green: Right after the file name, right after the file name, so you So you see, you have a nice insert right here, put a comma and a space.
Michael T Ganschow Green: and put in the name and file extension of the file, you would like to also export so now with our background gang here and a background jpg background pin comma background jpg when I save this thing.
Michael T Ganschow Green: Oh snap dog to backgrounds to backgrounds okay look at that two backgrounds.
Michael T Ganschow Green: So I can export, as many of these as I would like, I could come up here and I could say you know, maybe just maybe I want to pin version of the navigation also.
Michael T Ganschow Green: What about that, what about that huh What about that Why does nobody think about that.
Michael T Ganschow Green: file save.
Michael T Ganschow Green: or no, no, look at that we now have.
Michael T Ganschow Green: Two backgrounds and navigation, oh no it's all collapsing into itself oh snap.
Michael T Ganschow Green: So multiple file extensions okay multiple.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: What if I want a few different qualities.
Michael T Ganschow Green: Well, we can do a lot of modifications.
Michael T Ganschow Green: lot of modifications with these guys.
Michael T Ganschow Green: So what if I want to control.
Michael T Ganschow Green: What if I want to control.
Michael T Ganschow Green: Export i'm.
Michael T Ganschow Green: Well, the quality of the export of one of my files.
Michael T Ganschow Green: example Homer.
Michael T Ganschow Green: Homer is looking pretty good as a jpeg here, I would say.
Michael T Ganschow Green: What if I want to make him look a little bit worse, what if I want to crunch him down a little bit so that he will load faster on my website now.
Michael T Ganschow Green: All I have to do with my jpg is I come right to the end of the file extension here okay all right come.
Michael T Ganschow Green: To the end of the file extension, as I have highlighted here, and I can punch in a percentage, and that is just the same as if I was in that jpg export menu, and I set that percentage, so if I want to do Homer.
Michael T Ganschow Green: 20% like so I can now save this layer and Homer.
Michael T Ganschow Green: is much smaller and noticeably more artifact ID oh I gotta go smaller than that let's artifact and some more yo So here we go so.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: 10% and we're like a crappy Homer and.
Michael T Ganschow Green: So many elephants everybody loves a good artifact session look at that so many artifacts.
Michael T Ganschow Green: scary all right now, if I want to have a good version of them as well because that's the bad version we're going to name that image mad dash Homer.
Michael T Ganschow Green: And then we're going to put a comma because, yes, you cannot put even multiples of these and we're going to say good Homer.
Michael T Ganschow Green: dot jpg now two homers a good and a bad file save suddenly.
Michael T Ganschow Green: there's a good Homer.
Michael T Ganschow Green: i'm up.
Michael T Ganschow Green: me minimum artifact in.
Michael T Ganschow Green: band Homer.
Michael T Ganschow Green: All the artifacts a boy could ever want.
Michael T Ganschow Green: Really cool stuff questions so far, and anything related to generation stuffs really I used to sing more than I would care to mention.
Michael T Ganschow Green: Oh, what crashed, then we kill photoshop is a dead problem for a preview quit unexpectedly we murdered it I killed preview dead, oh no oh snap yes it is yes, it is Isabel yes, it is deeply so alright so additional things that you can do.
Michael T Ganschow Green: So we got a good Homer here right.
Michael T Ganschow Green: Well, you can scale things up or down so let's say you want to go to Homer who's going to look good in 4k or.
Michael T Ganschow Green: yeah cuz this thing's already set for retina So if I wanted to make a Homer in my pile of homers that looks good I can make one okay here's how I do it.
Michael T Ganschow Green: i'm gonna come in front of bad Homer and i'm going to add in another Homer here i'm going to say 200% that will double the size of Homer.
Michael T Ganschow Green: And then i'm going to do a space and i'm going to do his name we're going to call this 4k Homer.
Michael T Ganschow Green: dot jpg commerce space okay 200% for K Homer I can you can you can set these you can make these images massive you know what screw it let's make it 500% So if you put a percent.
Michael T Ganschow Green: In front of your jpeg or any one of these images really it will scale it up by that many times okay so 200% will double the size 300% triple so so for 500%.
Michael T Ganschow Green: This 4k Homer is going to be five times the size of the regular Homer, but if you do it at the beginning a percent at the beginning that will scale the image, if you do it at the end, with no space between the jpeg on the percent that will set the jpeg export it okay.
Michael T Ganschow Green: Go save.
Michael T Ganschow Green: Suddenly oh let's everyone crash preview again Charlie Charlie and home.
Michael T Ganschow Green: And just the regular old good Homer is like that big and hey if I want to make a tiny Homer I can do that too, so I can come in here, and I can say 4k Homer is nice, but how about how about 15%.
Michael T Ganschow Green: tiny Homer.
Michael T Ganschow Green: comma.
Michael T Ganschow Green: file save.
Michael T Ganschow Green: 4k Homer.
Michael T Ganschow Green: Homer.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: All right, scale jpg That way, you can also if you know the exact dimensions, I don't know homers exact dimensions so i'm going to guess.
Michael T Ganschow Green: You can also actually you know what we're not going to use Homer we're going to use.
Michael T Ganschow Green: we're going to use.
Michael T Ganschow Green: Our lovely footer because homers got plenty we got plenty of homers coming out all over the place to come in here and my footer and if I had an exact dimension for my footer I could come in here and say oh i'm making footer there's 300 pixels.
Michael T Ganschow Green: and your dimensions are in pixels 300 pixels by 200 pixels and we're going to put in space like we put in the space for the scaling Homer and then say block footer.
Michael T Ganschow Green: dot Ping sure why not.
Michael T Ganschow Green: file save.
Michael T Ganschow Green: There it is like it's my father, but it's in black form rather than in line form yea its block, you can also do that and inches, by the way, as well, so, along with the So what if I do hang on a minute, what if I did, and I will do that and then we'll say.
Michael T Ganschow Green: Four inch space X.
Michael T Ganschow Green: 1.75 inch and we'll call this an inch flutter.
Michael T Ganschow Green: This one will be a jpeg because I can.
Michael T Ganschow Green: file save.
Michael T Ganschow Green: Take any boo there, it is a footer with dimensions in inches.
Michael T Ganschow Green: Now, if these if you have actual images, this is going to store all these images just completely teck teck teck teck beyond l into tech because.
Michael T Ganschow Green: Unless you know the exact dimensions of them, and you scale them exactly with maps you're going to get these messed up looking things here so enjoy.
Michael T Ganschow Green: Oh let's see what else we can do here in my notes, because I was playing oh yeah you can set up different pink tights there we go, so I will use our lovely navigation test to set this up so.
Michael T Ganschow Green: If you just put Ping photoshop against the pink type you want I he sees transparency it'll be paying 32 if it sees.
Michael T Ganschow Green: A lot of detail, like an image, it will be paying 24 of the color simple it'll be paying eight or may just go pink 24 anyway, because who cares about load speeds, so if I come in here and I want to say.
Michael T Ganschow Green: break out the navigation text into a few different bits I can set what Ping it comes out as so.
Michael T Ganschow Green: let's do three different versions for my navigation text okay so first ones first let's do a navigation pin 32 so i'm going to name it navigation navigation dash text 32.
Michael T Ganschow Green: Ping in order to specify what type of ping I put in here, right at the end of ping you know how you did like 50% to optimize your jpeg and go in there and put a percentage right after the G and jpg right after the G and Ping if you put a.
Michael T Ganschow Green: or an eight it will spit out that type of ping so.
Michael T Ganschow Green: 32 right after the Ping on navigation text 32 then i'm going to do a otherwise beautiful image navigation tax, but with no transparency by making a ping 24 okay.
Michael T Ganschow Green: And lastly, we're going to see what it does is a pink a navigation tax day you know coming through freight train and such and we're going to make that a paying 873 navigation tax pink is going to be split out here and we're going to do a direct compare oh say.
Michael T Ganschow Green: So now.
Michael T Ganschow Green: we're gonna I got three navigation pinks, there is the This is my nice pink eight.
Michael T Ganschow Green: As my nice pink 24 with the, no, no, no don't transparency at all and here's my pink 32 with the Nice image fidelity alpha transparency and full transparency.
Michael T Ganschow Green: it's beautiful.
Michael T Ganschow Green: Now any of the scaling, by the way, so the jpeg optimization is for jpg is only the presenter stick on the end of the G flat but.
Michael T Ganschow Green: I can also scale and he paying I want So if I come here to navigation, I can say you know what.
Michael T Ganschow Green: You know what I want three x sized navigation taxed.
Michael T Ganschow Green: Big P and G, and what that will give me right there, right now, when I hit save.
Michael T Ganschow Green: isn't absolutely and hey hey hey don't click out absolutely enormous navigation text, I hope you like big navigation tax because it puts a navigation tax in your navigation tax, so you can navigate while you're taxed So there you go there is a big navigation text.
Michael T Ganschow Green: So yeah you can spy comma specifying everything you can have multiple images coming out if you don't want multiple images, you can still set things like scaling images, you can set exploiting settings you can set all kinds of things Okay, so what are your questions.
Michael T Ganschow Green: So I know you got some I know you're like What is all this.
Michael T Ganschow Green: No question i'm hearing the crickets out there, even the crickets For those of you who are watching this pre recorded.
Michael T Ganschow Green: Okay, so with That being said, that is pretty much the um the export lecture you're going to be using this a lot because you're going to be exploiting.
Michael T Ganschow Green: Images all through the Semester, so you may want to keep this one and reference it regularly.
Michael T Ganschow Green: For the remainder of class i'm going to be around here for another half an hour i'm going to play a video that talks about jpg exporting as taught, this is actually particularly this.
Michael T Ganschow Green: generation process talks about this generation process and it's taught by an adobe certified instructor so we another point of view on our generation works, maybe with a little less czanne's than than mine so.
Michael T Ganschow Green: let's go to my class announcements, because I threw it in the class announcements Hello and let's go to announcements and we go and I tossed it in here for any of you watch video we're going to go believe where's where's Mr X believe this is him.
Michael T Ganschow Green: hey stop it web flow, yes, is web flow need the design tool from the future, the most powerful visual coding.
Michael T Ganschow Green: hey guys this tutorial is about web page design in photoshop let's go to it's.
Not these Dudes in here.
Oh.
Michael T Ganschow Green: yeah here we go, this is it.
hello, and welcome to a new episode of adobe creative cloud TV, my name is Terry white and in this episode we're going to take a look at the latest update to adobe photoshop to see.
Michael T Ganschow Green: That now do you want to stay and watch the video you can, if you want to go and get an early start on whatever your plan to do feel free.
Michael T Ganschow Green: i'm just going to run this video and sit here answering questions in the chat or, if you want to ask me verbally through the microphone feel free but otherwise you guys may go at your leisure.
Michael T Ganschow Green: So recording people, I am going to pause the recording here real quick.
Michael T Ganschow Green: So that because I don't think you guys well you guys can watch the video it's right there in my announcements.
Michael T Ganschow Green: But I don't think you want to see a video shown through a video in a video you know I think I think we've done enough in setting for the day so i'm going to pause the recording i'm probably stop it.
Michael T Ganschow Green: I don't know that I will resume it unless somebody has a really good question so i'm going to pause the recording and I will see you recording people Tuesday.