Michael T Ganschow Green: Welcome to a another round of JRC 175 peeps in P bets it to we're going to continue our website building from last class.
Michael T Ganschow Green: including some bizarre experimentation, the use of the filter property, as well as how to feed funds into your website all sorts of fun things are going to happen today, and I think we should get our little page mostly built by the end of the day.
Michael T Ganschow Green: Alright, so to kick things off, though, I do have a class announcements i'm your project three preliminary critiques are due up tonight that is a.
Michael T Ganschow Green: sample computer version and a sample mobile version of each of your designs homepage and inner page for total of eight roughs and once you turn those in, you will have an opportunity will have a week to.
Michael T Ganschow Green: To.
Michael T Ganschow Green: Give your two cents to your fellow students, given how many of you are there you how many of you, there are never good start.
Michael T Ganschow Green: The it's going to it will probably take you that long just do a few a night and you'll get through it, I promise.
Michael T Ganschow Green: don't let the number of people, they are dissuade you from offering you were two cents since it's such an important part of your grade it's your critique points are basically quarter of it so.
Michael T Ganschow Green: pleased to be providing your feedback.
Michael T Ganschow Green: On your fellow students projects so.
Michael T Ganschow Green: Where were we in the website building For those of you who were not here last class or did not watch last classes recording and what we did was we took all of our combined knowledge from the previous month and a half of html and that we had done and we used it to build a.
Michael T Ganschow Green: Terrible or awesome or terribly awesome web page.
Michael T Ganschow Green: And at the end of the day I started rummaging around for a technique that I wasn't sure how to do and heather mvp heather here came up with a Google version of the technique.
Michael T Ganschow Green: That will that will do what I needed to do so we're going to talk a little bit about what I was looking to do and what wound up happening.
Michael T Ganschow Green: So what I wanted to do in my project, what did I want to do with my project well.
Michael T Ganschow Green: I have in my photoshop file here, let me share some screen action here hi, we would like to share screen, yes, thank you and take that down to one thumbnail view Thank you okay so let's share some screen here so.
Michael T Ganschow Green: There we go, so my navigational type, which is a whole variety of different fonts here.
Michael T Ganschow Green: is done in a bronze gradient with a red outer glow on it, and I wanted to see if I could replicate that with CSS before resorting to image type.
Michael T Ganschow Green: And from what I was able to find actually really what heather was able to find.
Michael T Ganschow Green: Its kinda sorta possible, so let me show you what you wind up having to do and then we're going to go over some of the wacky properties that are involved in making it happen okay so.
Michael T Ganschow Green: where's my hands will never that's my dream neighbor so we're gonna do is we're going to edit all this out alright so.
Michael T Ganschow Green: This is an interesting process getting gradients to fit on type okay.
Michael T Ganschow Green: So I went up having to I found follow this tutorial that heather sent me and I wound up having to do quite a few crazy things to get it to work.
Michael T Ganschow Green: Okay, so what i'm going to do here is i'm going to walk you guys through my process and then talk a little bit about each of the properties involved and why maybe doing gradient live type is not the best idea, let me.
Michael T Ganschow Green: Let me walk you through what I found it is possible it's doable if I if I uncommon all of this year.
Michael T Ganschow Green: Why uncommon at all of the old way was what that was hang on a minute.
Michael T Ganschow Green: Ryan comment, all of this year.
Michael T Ganschow Green: You will notice.
Michael T Ganschow Green: That when I open this up for preview in the browser do I buy preview open, I do not, well then we're going to preview this one I open this up to preview in the browser I have a nice little gradient bronzer gradient with a nice little red outer glow on it, and this is.
Michael T Ganschow Green: It turns out tremendously difficult, let me show you what I went through so.
Michael T Ganschow Green: We were googling around about putting a gradients in type and we found.
Michael T Ganschow Green: Initially, a pretty good tutorial let me show you what it did, and then i'll show you the fixes for it.
Michael T Ganschow Green: Alright, so First things first, we are going to make a gradient.
Michael T Ganschow Green: background gradient, as we have done previously, and I am I probably could hand code one of these gradients but I don't feel like it, I don't feel like it so.
Michael T Ganschow Green: In my nav ul Li a here what I am going to do is I going to.
Michael T Ganschow Green: I am going to.
Michael T Ganschow Green: make a background gradient here and then we're going to end them we're going to make it work with the text okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: First things first is, I made a gradient so we're going to do a gradient here we're going to go into photoshop whereas photoshop there's no other job high five photoshop photoshop here we're gonna sample some colors.
Michael T Ganschow Green: Go give me color.
Michael T Ganschow Green: it's the first things first the outer gradient colors, which is a red have 191 a green have 192 and a blue have 149 so I come back into dreamweaver here and I go gradient.
Michael T Ganschow Green: And I go 191 for my rib 19292 and 191 for none.
Michael T Ganschow Green: And then I come down to my other one here and I go 191192.
Michael T Ganschow Green: And 149 and we got the start of our gradient, we need to add one more piece to it, for it to work with a drawing the gradient they're strong gradient.
Michael T Ganschow Green: So open that up little space there Okay, so now we're drawing the gradient one more piece to the gradient, though, we need a middle a middle house in our gradient so.
Michael T Ganschow Green: come here to the selector and i'm going to go let's peek right in the middle and we'll get a 142143111 is our middle House in a gradient so come in here hey open up adding a third color.
Michael T Ganschow Green: One Of course I immediately forgot.
Michael T Ganschow Green: 142143111 all right 1-421-421-4311 one.
Michael T Ganschow Green: be adding to this one up here and stop my intention, so we're going to pull out, no, no, no, no, no, no, no bad gradient bad bad good gradient.
Michael T Ganschow Green: Good gradients good candy alright so let's go put this right in the middle, now we have a good gradient of three pieces we're going to save.
Michael T Ganschow Green: And where's my chrome there's my chrome so now, I have a gradient in the background of my buttons This is basically just sort of a sort of a button color here.
Michael T Ganschow Green: So we can do all sorts of things with this, but what we need to do first is, we need to do is, we need to make this gradient.
Michael T Ganschow Green: Effectively confined just to the type So when I was doing all this, I threw on a standard old standard old text shadow.
Michael T Ganschow Green: on the back of it, so I threw in a regular old tech shadow.
Michael T Ganschow Green: We have some.
Michael T Ganschow Green: pretty good numbers, I think I did a.
Michael T Ganschow Green: I don't know, I think it was like a three pixel three pixel five pixel read text shadow, as I had done before.
Michael T Ganschow Green: So if I open this guy up in by minimize chrome and yet if I open this guy up in chrome they are fresh there is my nice little tech shadow go to zero that out because I want it to be an outer glow so we're going to go zero pixels.
Michael T Ganschow Green: Zero pixels.
Michael T Ganschow Green: Five pixels save.
Michael T Ganschow Green: refresh and there is my nice little guy there will add a little more to him, I think.
Michael T Ganschow Green: So I went.
Michael T Ganschow Green: And I went up here and i'm eight pixels bread.
Michael T Ganschow Green: There we go a little bit more tipsily read very good.
Michael T Ganschow Green: Okay, so now with that read going in with that with that.
Michael T Ganschow Green: gradient going the tutorial then called for a use of a.
Michael T Ganschow Green: of an interesting.
Michael T Ganschow Green: tag Okay, a tag that.
Michael T Ganschow Green: truth be told, I had not really used before I knew of it, but I had not used used it before.
Michael T Ganschow Green: And that tag.
Michael T Ganschow Green: is called background clip okay so background clip is here, let me pop let me pop up in my today, oh no, no, I didn't mean to do that, I meant to do that Thank you alright so background clip phil color.
Michael T Ganschow Green: There we go in CSS background clip.
Michael T Ganschow Green: So there's the who's this guy will go w three docs so.
Michael T Ganschow Green: background clip is a little weird.
Michael T Ganschow Green: background clip first of all, is a a kind of an experimental property, but what it does what it does, is it is intended to be used to push background pictures either inside or outside of borders so when you draw your border lines to put strokes around things.
Michael T Ganschow Green: it's supposed to be used, basically, actually, this is a better one, even it's supposed to be used to.
Michael T Ganschow Green: push the border there's a DEMO to push the border or to push your background out into a border, so you can specify whether it will push out into the border, whether it will go beneath the border, whether it will, or whether it will stick in the content area.
Michael T Ganschow Green: It was basically a way to size background images and I had never really used it before well, one of the properties, excuse me, one of the values this background clip property had is a text value, right here.
Michael T Ganschow Green: And what this does is this takes that background image and it fits it into any text that is within the tag or class style that you've applied the background image to So if I come here and I go background clip.
Michael T Ganschow Green: text.
Michael T Ganschow Green: And when I opened up my website in.
Michael T Ganschow Green: My lovely little chrome here.
Right.
Michael T Ganschow Green: We didn't even do anything, this time okay so.
Michael T Ganschow Green: theory oh here, I know why okay so here's why it's not working hang on one second.
Michael T Ganschow Green: Okay, so just double check this to make sure this is actually why it's not working, and then I will explain myself, yes, there it goes okay so.
Michael T Ganschow Green: background clip years not fully browsers support it that's also reason why I haven't really used it before so a lot of these experimental.
Michael T Ganschow Green: And not even really experimental a lot of us some of these are gonna be experimental you guys asked for it um but.
Michael T Ganschow Green: A lot of these tags are not 100% browser supported so one of the ghetto rounds in that.
Michael T Ganschow Green: In the CSS spec to make a lot of tags visible that are not browser supported is we add these little browser calls in front of it, and a lot of browsers will actually display properties and values they're not ostensibly.
Michael T Ganschow Green: programmed to display where when we put these little calls in front of them it basically turns the that browser into a development mode for that particular.
Michael T Ganschow Green: tag so background clip is one of these guys background clip is basically it's not fully supported by any browser without a browser call in front of it.
Michael T Ganschow Green: So i've got my background clip here and i'm going to add in webkit webkit basically is functionally every browser that isn't firefox the new version of edge is built on web kit safari is built on webkit chrome is built on its own modified version of web kit called chromium.
Michael T Ganschow Green: But so anything with a webkit prefix so any webkit based browser or webkit fork like chrome which is built on chromium will need that to run so then we're going to go back round.
Michael T Ganschow Green: clip.
text.
Michael T Ganschow Green: The most in front of it, which means it'll work and firefox as well and I go okay Michael the backgrounds gone what is what is what what is what whatsapp do.
Michael T Ganschow Green: I just see this this color here, yes, yes, you do because it's a background image, the actual foreground image color of the text here that we made it is overriding that background image.
Michael T Ganschow Green: So this experimental background clip has trimmed in the background, out of everything, when our text that's great, but our text already has a color value to it right.
Michael T Ganschow Green: And Okay, well then, what happens Michael what happens if I take that existing color out of it, what happens if I remove that color commented out well.
Michael T Ganschow Green: I wish I was it was that easy, but unfortunately what happens when you do, that is, the default browser link color of blue POPs in on these links well fine Okay, then.
Michael T Ganschow Green: Then let's let's let's let's make this work then OK, so now we get to make it work with a an explicitly experimental tag so this attack another tag next wasn't experimental property this property is new to the CSS spec from what this article on it tells me.
Michael T Ganschow Green: it's only usable for web kit bouncers although from what this what this says it's only visible for webkit browsers on the actual the newest version of it now will actually make it usable with the most call out as well.
Michael T Ganschow Green: And what this guy does is this, this is a property strictly for text field color now I don't know why we need this when we have a property already existing called color.
Michael T Ganschow Green: But what this text field color property does, along with behaving like color which just fills in the text with a color is this thing will override.
Michael T Ganschow Green: In every different way, the browser default colors as well, which is kind of cool I hope this guy gets adopted a bit more time.
Michael T Ganschow Green: So what we gotta do is we got to come here and set our text field color and because it's experimental or not fully supported, we need to put browser calls on the front of it webkit.
Michael T Ganschow Green: text.
Michael T Ganschow Green: To color.
Michael T Ganschow Green: transparent.
Michael T Ganschow Green: And then most.
Michael T Ganschow Green: text.
Michael T Ganschow Green: color.
Michael T Ganschow Green: transparent.
Michael T Ganschow Green: Okay, so doing that removes the browser default colors from this thing great cool that means it's working right well.
Michael T Ganschow Green: Not so much.
Michael T Ganschow Green: This is where I got stuck This is where heather came in and save my backside with some googling right here is because I had gotten it trimmed down properly and I got in the background, all set and it kept vanishing on me.
Michael T Ganschow Green: So I went into my usual troubleshooting mode, which is start commenting out properties and values and see what breaks and what doesn't yeah, and so it turns out that.
Michael T Ganschow Green: Our lovely little.
Michael T Ganschow Green: text shadow up here this guy right here.
Michael T Ganschow Green: interferes with the viewing of a background image that you lose this text field color from so we have to take out our tech shadow what kind of sucks.
Michael T Ganschow Green: Why do we have to do that well that way our gradient can show through so you can see there's our gradient our bronze gradient that we had before well that's that's lovely so we can't we can't make it look like it does here.
Michael T Ganschow Green: Oh contraire you can.
Michael T Ganschow Green: So to experimental properties later one trimming a background image, down to the text to taking out any default browser text field color with this text field color property with a transparent and Oh, by the way, stalking.
Michael T Ganschow Green: browser calls on the front of them notice, we have three browser calls dreamweaver rights our background image gradient with three browser calls, we also put an opera call in there to know why you need that offers webkit now, but whatever dream weavers covering all the bases.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: Now we have to actually add our fill back in or at our glow back in.
Michael T Ganschow Green: So a couple of things, the tutorial mentioned that are helpful in order for making your background gradient show properly is setting a background size you guys all remember background size.
Michael T Ganschow Green: background size, but he probably don't remember this one of 100% basically to make it feel the whole area, let me put a a semi colon on the end of that.
Michael T Ganschow Green: So what this basically does is tightens it up and makes it phil 100% of the text.
Michael T Ganschow Green: And they recommended to have the background repeat actually set for repeat rather than no repeat ground.
Michael T Ganschow Green: set for no repeat.
Michael T Ganschow Green: Basically, these are considered helpful to get as good across browser display as possible, you know what I think i'm going to make the middle of my gradient a little darker so it's more obvious that it's there.
Michael T Ganschow Green: For the DEMO so probably wouldn't ordinarily because I want to stick to my photoshop colors but you know what starting it up in the middle, a little bit and bring these guys down a little bit yeah.
Michael T Ganschow Green: Safe and a tad my spacing back in because otherwise it's just going to be a little funny want this Nice and spaced out so that everybody can see all the weird stuff we've done so.
Michael T Ganschow Green: They said that would help on the timing of the of the gradient in the text oops there we go look at that there we are there we are.
Michael T Ganschow Green: So last thing we need to enter glow back in.
Michael T Ganschow Green: and
Michael T Ganschow Green: The way that the tutorial suggested and it indeed works is by using what's called a filter property now I haven't talked much about filters, simply because its usage case is relatively limited, but when we have a filter here now, why not talk about it.
Michael T Ganschow Green: So the filter tag right here you have tagged why don't you call them tags you guys why what's happened to me the filter property.
Michael T Ganschow Green: The filter property right here is very interesting Okay, the filter property is basically a browser based version.
Michael T Ganschow Green: Of a fairly limited selection of photoshop filters that you can apply to any foreground image that has any image, you are inserting with an im G tag you can apply filters to.
Michael T Ganschow Green: Show filter is it's kind of a quiet sigh photoshop.
Michael T Ganschow Green: filter list and we'll go through filter in a second we're actually going to open up a separate page and popping image on there and filter the crap out of it, so you can see how filter works.
Michael T Ganschow Green: But in this case for filter.
Michael T Ganschow Green: What they wanted to do what they suggested was adding a drop shadow filter in here now.
Michael T Ganschow Green: filter drop shadow before the advent of the text shadow property and the box shadow property is actually how we used to do drop shadows of objects and type back in the day it's an old CSS to property.
Michael T Ganschow Green: That migrated over to CSS three that's a lot of power to it, so let me show you how these properties work or these values work with filters it's typically will filter.
Michael T Ganschow Green: You come into filter and then you set a the property that you want.
Michael T Ganschow Green: So you put in whatever the words of that property or shad sh eight D oh w notice dreamweaver auto completed and then at the end you slap in a set of parentheses.
Michael T Ganschow Green: And then you send me call it now within this drop shadow right here, you don't be sad do w spelled it correctly, you come inside this drop shadow, and you basically fill it out like you fill out a text shadow or a box shadow so distance from X justin's from why.
Michael T Ganschow Green: amount of blur on it and the color.
Michael T Ganschow Green: So now, when I do this suddenly my glow is back in place i'm getting glowed up look at that, yes, so the glow is back in place, which is good, this is very good withdrawn withdrawn and glow back with our filter excellent.
Michael T Ganschow Green: But it's not quite as vivid as my photoshop filter here well have no fear.
Michael T Ganschow Green: We can make that work, so one of the neat things about filters and, indeed, any of the shadow property, so what i'm about to show you here with this filter also works with text shadow and drop shadow.
Michael T Ganschow Green: You can just add in extra shadows no for real you can add an extra shadows just by coming here to the closing parentheses.
Michael T Ganschow Green: of whatever property you're using in this case drop shadow, you can you can.
Michael T Ganschow Green: I do this with any of the properties, by the way, that filter house, you can stack a whole bunch of properties will go over the different properties in the second.
Michael T Ganschow Green: You can stack a whole bunch of different properties or you can stack multiple examples of the same property, which is what i'm about to do here so.
Michael T Ganschow Green: I can come in here with my filter and I can come in here in between my last parentheses, and my semi colon and click in between, and then I just had space.
Michael T Ganschow Green: And in a another drop shadow.
Michael T Ganschow Green: Just like so and then so we're going to go zero.
Michael T Ganschow Green: pixel.
Michael T Ganschow Green: Zero pixels one pixel same one pixel blur and read now adding in a second.
Michael T Ganschow Green: Property here.
Michael T Ganschow Green: Has brightened and redland my shadow considerably, as you can see i'm going to add in one more to blow it out a little bit.
Michael T Ganschow Green: And then you guys can adjust yours, as you see fit i'm just going to add in one more for demonstration purposes and then we're going to go and mess around with filters.
Michael T Ganschow Green: Real quick and another browser after we get this put in place discuss what exactly i've done here so zero pixels of X zero pixels of why will do three pixels of spread will make it red we go we'll hit save.
Michael T Ganschow Green: Save and then we will pop it right in yeah like that Nice vivid glow compare this nice vivid glow to Nice vivid glow we have in photoshop or some excellent sweet so look at that very nice alright cool.
Michael T Ganschow Green: very nice indeed so.
Michael T Ganschow Green: What did we learn here today what we learned here today is that it is possible to put gradients into live type of the type of still live by the way.
Michael T Ganschow Green: But when using CSS it's an enormous pain in the backside there is it, there is just a lot of moving parts when you're inserting this I would highly recommend.
Michael T Ganschow Green: Doing image based text for your buttons if you want to use big fancy text with a gradient in it, it is possible, but the browser support maybe a little iffy depending on if you need as broad as possible browsers support.
Michael T Ganschow Green: You have to use to experimental tags a background clip and a text phil color in order to make it work correctly, but.
Michael T Ganschow Green: It does work and, indeed, it will work and most modern browsers, especially if you're targeting webkit browsers which is everything except firefox.
Michael T Ganschow Green: And then, a bonus target or which stands for mozilla and will target firefox will technically work on most modern browsers if you have to make it work in back support.
Michael T Ganschow Green: Things could get a little iffy um this whole structure so building your gradient.
Michael T Ganschow Green: Using this background clip text to clip it down using this text field color to pull out not only any of our currently specified colors, for example, that.
Michael T Ganschow Green: dark golden rod up there, then i'm going to pull out manually as well, but also the browser default colors like blue for linking so this text a dash dash color transparent will wipe those out.
Michael T Ganschow Green: Then, besides your background 100% given a repeat, no repeat and then you have to throw a filter on it to make it work, because if you put a regular tech shadow on it, oh no that doesn't work now why would that work.
Michael T Ganschow Green: It doesn't work no it's it'll cancel out all of this lovely background and you've done.
Michael T Ganschow Green: So you have to put in a filter to make it run so there's a lot of moving parts here to add gradients into type.
Michael T Ganschow Green: I was surprised I thought it would be less moving parts than that but heather and I managed to hash it out over the course of the remainder of class last last class, and it was a it was a mess, let me tell you so before I get into.
Michael T Ganschow Green: abusing and using filters for fun and profit do we.
Michael T Ganschow Green: Have any questions.
Michael T Ganschow Green: on how to put gradients into these things you probably have to watch this video like 1130 billion times, let me, let me, let me paste in the two the two tutorial links that that heather dug up here, because these things are.
Michael T Ganschow Green: These were lifesavers they were invaluable so i'm going to throw i'm going to throw these two into the chat here, so you guys can have these links, because they are pretty awesome.
Michael T Ganschow Green: i'm also going to go throw into the chat here the articles that I found on the various tags real quick, so that you guys will have copies of them so there's text phil color I tax phil color store this in the chat.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: Through some filter list stuff here there's background clip use background clip it's pretty good explainer and what that does.
Michael T Ganschow Green: let's see here all right and just for fun some examples with filters because we're going to go play with filters here in one second because filter is pretty awesome.
Michael T Ganschow Green: cool alright so there's a whole crap load of links for.
Michael T Ganschow Green: The the two tutorials up here that up top that heather and I found the.
Michael T Ganschow Green: And then, an article on text phil color and our background clips and a couple of filter articles as well, so.
Michael T Ganschow Green: we're going to take a detour from building our little mini page here to go futz around with filters because filters are fun and are not really used a whole lot when i'll explain why as we're doing this, but.
Michael T Ganschow Green: There are a lot of fun so i'm going to make a another separate html here real quick and we're going to play with filters, while i'm making that separate html does anybody have any questions on what i've just done here or anything else really well i'm making a new html page.
Michael T Ganschow Green: New.
Michael T Ganschow Green: feel free to ask questions second here, well, I make a brain fresh html page create and, yes, create.
Michael T Ganschow Green: looky here.
Michael T Ganschow Green: we're playing what filters excellent.
Michael T Ganschow Green: looky here exclamation point hell yeah okay here we're playing with filters.
nation.
Michael T Ganschow Green: files Satan says we're going to call this thing filters.
Michael T Ganschow Green: Save and we're going to add in.
Michael T Ganschow Green: The style sheet create a new CSS file yes i'm we're going to put this style sheet in our CSS folder and we're going to save this thing as filter.
Michael T Ganschow Green: litter filter.
Michael T Ganschow Green: That CSS say.
Michael T Ganschow Green: This okay there it is there was guys back in again and add a little thing there and file save all so let's play around filters, how many insert a foreground image here and play around with it so.
Michael T Ganschow Green: filters are only usable with foreground objects you can't use them on background images, you have to use them own or you can only use them on images that are fed into your html via the IMG src.
Michael T Ganschow Green: html tag so.
Michael T Ganschow Green: i'm going to grab terrifying Homer Simpson here and we're going to use him as our filter DEMO.
Michael T Ganschow Green: That pop down boop boop oh come on go away, thank you i'd filters so we're going to use terrifying Homer Simpson as our filter DEMO here, so there, he is save and if I open this up in a browser there's terrifying Homer Simpson yeah.
Michael T Ganschow Green: All right, and i'm going to put a class style and terrifying Homer Simpson and we're going to start applying filters i'm going to do, like maybe like an Andy warhol deal where.
Michael T Ganschow Green: Where we've got a few homers floating around in here with different filters on them, so that I can I can show you guys kind of how filters work there's a lot of different filters as that filter article saw there i'll demonstrate a few of them, so you can kind of see how they work.
Michael T Ganschow Green: yo excellent.
Michael T Ganschow Green: Pardon me for the dropout I do tend to something there alright, so let us, let us start adding some filters to Mr Homer here we're gonna we're gonna have some fun with him so.
Michael T Ganschow Green: Trying to think if i'm doing like kind of a weird sorta kind of a weird sort of Andy warhol look I think i'm gonna do.
Michael T Ganschow Green: chugger think i'm going to do a wrap around these guys i'm going to put a.
Michael T Ganschow Green: Put a nice main around these guys going to put in a few homers in here.
Michael T Ganschow Green: Nice main around these guys Pierre will do a main.
Michael T Ganschow Green: mean bracket ology no don't capitalize it Michael What did you do want to be a done i'm gonna go display FLEX box.
Michael T Ganschow Green: And we're going to go.
Michael T Ganschow Green: Did he did he did he do we go.
Michael T Ganschow Green: When we do the line items, but we will need to.
Michael T Ganschow Green: Where did we go.
Michael T Ganschow Green: We had a FLEX rap.
Michael T Ganschow Green: rap.
Michael T Ganschow Green: And we give this thing with 80%.
Michael T Ganschow Green: So i'm going to add, in a few homers here so let's add in.
Michael T Ganschow Green: I don't know five or six homers here, maybe, maybe seven.
Michael T Ganschow Green: Before yeah that'll do so, we got a nice pilot homers.
Michael T Ganschow Green: right here in a row yeah we go back.
Michael T Ganschow Green: it's awful let's set her align them just for fun.
Michael T Ganschow Green: filter and my main go margin margin margin.
Michael T Ganschow Green: Zero or.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: And that will Center line my Dudes there right, so we got some Center line homers Andy warhol Stein fact I think i'm putting up i'll put two more on there so there's like nine of them just sitting there staring at you.
Michael T Ganschow Green: And we'll throw some filters on them for fun and profit so there's one more.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: And one more look at all of these homers alright, so instead of to mess around with filter so filter is a pretty interesting little property filter is a.
Michael T Ganschow Green: it's basically way to put effects on foreground images in.
Michael T Ganschow Green: In.
Michael T Ganschow Green: In the browser so that you don't necessarily have to.
Michael T Ganschow Green: In a graphics program of some sort now why would I want to do this well the advantages of filter because it's applying it in the browser.
Michael T Ganschow Green: If you have multiple examples of the same image and you're using filters to differentiate them, for example, like a clear version of an image and then a larger blurrier version of a background image.
Michael T Ganschow Green: It actually speeds up load times if you're going to use multiple instances of one image and.
Michael T Ganschow Green: And differentiating with filters, because if you use an identical image, the browser only loads the image once.
Michael T Ganschow Green: And then displays it in all the different areas on your website so what you're doing with this is you're speeding up load times amongst identical images if you're going to use filters to display them.
Michael T Ganschow Green: Otherwise, there is no appreciable load time increase or decrease, if you have several different images with filters or you've modified those several different images.
Michael T Ganschow Green: In the graphics programming your choice likely photoshop because loading different images each of those different images is loaded sequentially basically as they appear down the html stack whereas.
Michael T Ganschow Green: If you have the same image and you're shifting in the filters it'll load, the first one, and then it will just display instances of the first one to the rest of it so we'll make it load faster.
Michael T Ganschow Green: Otherwise i'm filters are sort of like a less controlled version of what you can do in photoshop or even illustrator really to an image.
Michael T Ganschow Green: This way we don't use them a ton, but they are kind of neat and kind of a neat little project so i'm going to do a couple of here so.
Michael T Ganschow Green: i'm doing some class styles, a little apply these will apply some different filters here so we're going to go first filter will be a blur and so i'm going to use a blur style and we're going to go blur filter.
Michael T Ganschow Green: blur blur is based on pixels very similar to how the blur in our tech shadow and box shadow and our filter drop shadow are so blur is built as a series of pixel measurements so.
Michael T Ganschow Green: let's do a 20 pixel blur on this guy and let's go apply them to the first Homer so i'm going to come up here to my first Homer and i'm going to go class equals blur there it is.
Michael T Ganschow Green: SAVE, then, if I open them up in a browser poof that Homer is in the witness protection Program.
Michael T Ganschow Green: Now I can die on the blow up or down or off by going into my filter here and going hey What if I want to see a little more him let's only blur him.
Michael T Ganschow Green: 10 pixels see now he looks like he's just behind shower glass okay so there's a blur the Blair is pretty much what it says on the tin it blurs the image okay.
Michael T Ganschow Green: comes the next one now there are a lot of filter properties, by the way, as you can see from the this article on on filters, so there are all sorts of.
Michael T Ganschow Green: All sorts of different properties, you can you, you can you can mess with and we're gonna.
Michael T Ganschow Green: we're gonna yo we're gonna we're gonna mess, with a bunch of these guys so here comes but let's see we've done blur here comes brightness what the hey let's do a brightness one let's blow them out completely so dot brightness.
Michael T Ganschow Green: Burt Dr B are I ght ne SS Michael bracket tautology filter.
Michael T Ganschow Green: Alright, so brightness what john will double the brightness we will make brightness is done i'm unlike most of the a lot of these others which are done through well.
Michael T Ganschow Green: These guys really come in in in three different flavors yeah they're either modified by pixels blurring blurs along a certain amount of pixels.
Michael T Ganschow Green: The modified by percent like this brightness is Brian This is basically takes the lighter colors in and blows them out, however, many percent you specify here.
Michael T Ganschow Green: and degrees around a color wheel so there's there's there's a few different measurements we play around with brightness is a percent one, so if I double the brightness of an image 200% if my math is correct.
Michael T Ganschow Green: And I add a class of brightness to this last one let's go a class of brightness let's go.
Michael T Ganschow Green: Go rightness and then we go with 200% save let's see what this looks like this looks like.
Michael T Ganschow Green: All right, let's go to mine.
Michael T Ganschow Green: or didn't apply.
Michael T Ganschow Green: Did I spell I know it's spelled something wrong i'm sure I spelled something wrong let's go.
rightness.
Michael T Ganschow Green: Just blow that image out nicely.
Michael T Ganschow Green: flitter it is hi Michael learn to spell all right now, a blow out now blow them out, Nice and bright blue yeah there we go there is a bright Homer see you can blow brightness out on images, you can have.
Michael T Ganschow Green: let's add another filter why now we'll go we'll go and we'll make one of these good super contrast it yeah we go we're gonna go contrast.
Michael T Ganschow Green: Okay technology filter contrast contrast is another percentage one if I LTE are, yes I spelled it right, this time, so we're going to go contrast 300%.
Michael T Ganschow Green: we're going to add that, to this to Homer number three here.
Michael T Ganschow Green: Right class equals contrast.
Michael T Ganschow Green: Sure it's spelled right.
Michael T Ganschow Green: There it is.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: But there is a high contrast movie looks even more horrifying the realistic in in a with a lot of contrast that ain't right at at home or ain't right.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: There it is all right now, you can also add a drop shadow but we've already played with that one in our in our.
Michael T Ganschow Green: In our horrible website, we won't do a drop shadow you guys already saw drop shadow, you know how it works instead we're going to do is we're going to make a home or Gray scale.
Michael T Ganschow Green: grace quake right scale pay me I just can't type today you guys i'm sure some of you know, the feeling filter.
Michael T Ganschow Green: raise it is Gray scale now Gray scale is also done in percentages, so we do 100% Gray scale on a grayscale Homer and we'll go down to this fourth Homer will go class equals grayscale.
Michael T Ganschow Green: Then that indeed makes him perfectly grayscale However, what it's really used for a lot in web design when it's used is not necessarily purely Gray scaling images like that, although you can it's partially Gray scaling images to make them sepia toned.
Michael T Ganschow Green: To see now there's like a little bit of color in him, we can have just a little bit more color.
Michael T Ganschow Green: So it looks like an old faded photograph and just a little bit more color excellent excellent.
Michael T Ganschow Green: Alright, so that is grayscale use most commonly to sepia tone images.
Michael T Ganschow Green: To call the color out of my life leech all the color out of my life okay.
Michael T Ganschow Green: Then we've got Hugh rotation here.
Michael T Ganschow Green: He rotation is very, very strange okay here rotation is.
Michael T Ganschow Green: Your rotation is taking the color wheel basically the standard color wheel set and taking the taking the red the Green and the blue on the color wheel and rotating it in whatever direction you see fit so.
Michael T Ganschow Green: Here rotation.
Michael T Ganschow Green: filter.
Michael T Ganschow Green: Here rotate.
Michael T Ganschow Green: And you can choose whatever degree of rotation you want try 90 degree rotation first, why not 90 degrees of Hugh rotation.
Michael T Ganschow Green: But one of these homers will go class.
Michael T Ganschow Green: You rotation.
Michael T Ganschow Green: Well, this should look good and freaky oh yeah look at that now he's from like Mars, or something that's awesome so basically what we did was we just flipped so that the reds are the the.
Michael T Ganschow Green: The reds Greens, the Greens are blues and the blues or reds Oh, think about that one makes my brain bleed thinking about it.
Michael T Ganschow Green: Then, of course, along with your rotation, because we can do that remember the kind of things you can do in photoshop you can also invert it.
Michael T Ganschow Green: dot invert.
Michael T Ganschow Green: So, remember that duck is evil twin image filter.
Michael T Ganschow Green: invert invert another percentage one.
Michael T Ganschow Green: filter invert save.
It yep.
Michael T Ganschow Green: Alright, I think we're good.
Michael T Ganschow Green: let's go another Homer class.
Michael T Ganschow Green: invert.
Michael T Ganschow Green: Areas now homers looking especially evil oh man man, this is good and bad.
Michael T Ganschow Green: let's grab a couple others here, and then we'll call that good I also reduced capacity on the students to yeah there isn't a pass the filter yeah so we can go.
Michael T Ganschow Green: opacity.
Michael T Ganschow Green: And yes, there is a regular past the property, I am aware.
Michael T Ganschow Green: And yes, you can also message the alpha and an rgb color mix, I am aware here's another way to introduce transparency capacity let's go 45%.
Michael T Ganschow Green: let's see yep areas he's fading away eating in fact we're gonna kick is a pass it back a little bit further than this.
Michael T Ganschow Green: I actually you know I really like filter i've always liked it it just it doesn't give us much because we have photoshop.
Michael T Ganschow Green: And we don't have a lot of image stacks to really use filters on anymore areas fading fading.
Michael T Ganschow Green: Oh there's all kinds of filters so um alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's just let's believe saturation let's play the saturation alright so.
Michael T Ganschow Green: saturate bracket ology filter.
Michael T Ganschow Green: saturate saturates another percentage based one.
Michael T Ganschow Green: will go saturate.
Michael T Ganschow Green: To make it super saturated like 900% I agree audio so that every color is so vivid your eyeballs liquefy and knelt like you're looking into the Ark of the Covenant here we go so let's add saturate to one of these owners.
Michael T Ganschow Green: will go class.
Michael T Ganschow Green: saturate.
Michael T Ganschow Green: Here we go save to this looks like oh my God.
Michael T Ganschow Green: yeah we go so saturated living on the artifacts it's introducing yes well dialect saturation back a tiny bit tiny bit maybe 600 save.
Michael T Ganschow Green: Like maybe quite so crazy saturated and we go Nice and then, and then there is also actually a proper CPS so um the Gray scale is used, if you want to cool the sepia more toward the blue in the actual CPA one.
Michael T Ganschow Green: is used filter if you want a warmer cpm like brownie or.
Michael T Ganschow Green: Again, another percentage one.
Michael T Ganschow Green: Go hundred percent cpu and maybe dial it up and down based on how it looks so lastly we're going to actually i'm gonna i'm gonna add one more Homer imaging.
Michael T Ganschow Green: And we're going to do some things to it.
Michael T Ganschow Green: So lastly.
Michael T Ganschow Green: there's an ICP a Homer right at the end there now, you can dial CP up and down again it's percentages, so if I wanted to do only 70% sepia I could do that.
Michael T Ganschow Green: And it would look like like a 1970s photo 1960s photo where the color is bleached out of it but it's like but it's a much warmer.
Michael T Ganschow Green: filter i'm going to leave that at 100%, though, because we want to make it look like it's a prohibition here a photograph see but i'm going to add one more Homer in.
Michael T Ganschow Green: To DEMO one other thing.
Michael T Ganschow Green: DEMO one other thing okay and i'm going to call this class kitchen sink.
Michael T Ganschow Green: Okay, because one of the neat things with filters, as you saw in the other one is that you can.
Michael T Ganschow Green: That you can stack them so let's do a filter.
Michael T Ganschow Green: lawyer.
Michael T Ganschow Green: Five pixels.
Michael T Ganschow Green: let's do.
Michael T Ganschow Green: brightness.
Michael T Ganschow Green: Of 150%.
Michael T Ganschow Green: let's do a.
Michael T Ganschow Green: let's do a hue rotate.
Michael T Ganschow Green: Of 37 degrees.
Michael T Ganschow Green: let's do a.
Michael T Ganschow Green: saturation.
Michael T Ganschow Green: Of.
Michael T Ganschow Green: 200%.
Michael T Ganschow Green: see what that yield shelley so we're going to stack all of those on.
Michael T Ganschow Green: Other Homer down at the very far bottom fresh.
Michael T Ganschow Green: Oh, I think I might have misspelled something I think I might have missed or you didn't like that.
Michael T Ganschow Green: way wait a minute Oh, I see what.
Michael T Ganschow Green: I was putting spaces, I was putting in spaces you guys I got to spacey it was just way too spacey.
Michael T Ganschow Green: say.
Michael T Ganschow Green: fresh air it's.
Michael T Ganschow Green: A kitchen sink Homer so questions on filters they're basically quasi photoshop filters that you can throw in foreground images.
Michael T Ganschow Green: Then I use the time, simply because we use mostly background images these days and typically we're doing this stuff in photoshop, but it is a fun exercise to play with them.
Michael T Ganschow Green: So questions on any of this madness or any other form of madness as well.
Michael T Ganschow Green: alrighty then so i'm going to take the lack of questions is everyone is too scared or tired to move so we're going to do is we are going to.
Michael T Ganschow Green: Actually, what actually What did the lack of questions is you're just in class and you're currently writing critiques on the forums, I know how this works, I know how this works.
Michael T Ganschow Green: This isn't my first rodeo so what we're going to do is we're going to feed fonts into our terrible terrible website, we gotta we gotta feed them some fun okay and there's a couple of different ways, you can feed fonts into websites and.
Michael T Ganschow Green: There is feeding fonts from external sources.
Michael T Ganschow Green: Which is like Google or adobe i'm going to use the Google example, but the adobe example works pretty much the same way here as well, adobe type kit will let you feed fonts in from the outside, in the same way.
Michael T Ganschow Green: As Google does here but i'm going to use we're going to feed some Google fonts in here I think i'm going to make a.
Michael T Ganschow Green: A span style, for the first letter in the paragraph here, and I think i'm going to use a Google font for my.
Michael T Ganschow Green: fig caption here as well, on the text so we're going to feed in a couple of Google fonts and then we're going to we're going to take an existing fonts that we used in photoshop here.
Michael T Ganschow Green: And we're going to make those fonts into real big boy fonts.
Michael T Ganschow Green: That we can feed into our website using crazy technologies and let's see oh it's only seven o'clock so we got some time to cram this thing for the funds just pack it full of fonts alright so First things first let me go DEMO Google phone.
Michael T Ganschow Green: I will make a new tab and i'm going to go go go funds hi welcome aboard there, they are Google fonts yay now Google fonts are super the pooper scooper simple to use basically you come over to Google fonts and you start browsing through you can type of sample test sentence.
Michael T Ganschow Green: let's see here the fish.
Michael T Ganschow Green: Was delish and made.
Michael T Ganschow Green: Quite a dish.
Michael T Ganschow Green: The fish was deletion that made quite a dish okay so it's a good sample file and you can go down through.
Michael T Ganschow Green: I can also search by Sarah fonts sancerre of fonts weirdo display fonts handwriting fonts or even we're DL moto space spots.
Michael T Ganschow Green: Or you can search by font properties, you can search with fonts with a ton of styles fonts that are thick Th ICC fonts that are italicized fonts that are why you can search by those you can also search in other languages so.
Michael T Ganschow Green: i'm just going to go through right here, and just kind of do a quick search there we go kind of a quick search for fonts like this train one so i'm going to click on this train one here.
Michael T Ganschow Green: And when I click on it, it makes a.
Michael T Ganschow Green: It shows me the full font here, look at all as Asian characters about train one when it bears smell if it's like a wine, so you can do all sorts of things okay now.
Michael T Ganschow Green: I come here and click select this style, so let me go back here, let me go back so you guys can see where we are so.
Michael T Ganschow Green: I came into my Google fonts to put in a test sense, you can use Google standard sins and I scroll down a little bit until I saw a fun time liked this train one right here, so I clicked on the train one.
Michael T Ganschow Green: And then I came over here and fonts and multiple styles will show you all of the styles, the single only has a regular so.
Michael T Ganschow Green: I came over to the regular and I clicked on to the right of it here to select that style once it is ready to be selected and I can go through the font and kind of see what all is one over here.
Michael T Ganschow Green: Then I can come over here, and I can either download the font which will download me a local copy of it with there it goes or.
Michael T Ganschow Green: or.
Michael T Ganschow Green: I can come over here, and I can click on this little guy right up here this little box that's three squares with a plus sign in the lower right up here in the upper right of the browser window.
Michael T Ganschow Green: notice when I add or subtract the style a little red dot appears next to it well, I can come in here and grab and click on this and I can come and grab.
Michael T Ganschow Green: This font style.
Michael T Ganschow Green: And just stick it in wherever I want, but i'm not done yet so i'm going to leave this real quick and I am going to go get an additional font style maybe handwriting one maybe we'll use this search here and i'll say you know what let's send only terrible handwriting fonts.
Michael T Ganschow Green: Oh yeah look at all these terrible handwriting fonts you guys so many terrible handwriting fonts let's add another handwriting font here let's find a bad one, since like real chicken scratchy rock salts pretty good my try that one.
Michael T Ganschow Green: that's pretty.
Michael T Ganschow Green: Oh nice looks bad we need beanie.
Michael T Ganschow Green: beanie beanie and we'll add it to our style So there we go, we now have if we come over here and we click on our little three boxes on the plus sign.
Michael T Ganschow Green: kind of three men and a baby situation over here, we now suddenly have a we need beanie and train one all set and selectable, by the way, you can remove.
Michael T Ganschow Green: styles here if you don't want them as well, you don't have to go back to the front page and do it, you can just do them right here, but if you're ready to use these which I am.
Michael T Ganschow Green: Then all I have to do is come and grab.
Michael T Ganschow Green: The little pre generated style and the pre generated font list here in my in my Google fonts us on the web, all I have to do is grab these guys.
Michael T Ganschow Green: copy it.
Michael T Ganschow Green: artist and paste it into my head tag i'm going to paste mine, right after my CSS here so i'm coming here and i'm going to paste it right after my CSS link okay.
Michael T Ganschow Green: So what am I linkedin here well i've linked to things okay SAVE I have linked a custom CSS file that has been generated by Google.
Michael T Ganschow Green: If I paste that link into my browser, you will see that this opens up, and this is made a giant CSS file to go to go get things all kinds of getting's as well as.
Michael T Ganschow Green: As well as a link to their font list i'm not actually sure if this will display in the browser it's find out, shall we let's go.
Michael T Ganschow Green: No that won't display in a browser that's actually a link to essentially to the font files okay right there, so now I am all set and ready to with my external style sheet here ready to add in funds okay.
Michael T Ganschow Green: So i'm all i'm all set and ready, so I can start adding in fun so, for example, I can come here to fig caption and I can add in one of my fonts here so i'm going to go.
Michael T Ganschow Green: down here to my side and i'm going to go fig caption.
Michael T Ganschow Green: spelling correctly or I can just copy paste it fig caption how about that, so I can go big caption bracket tautology.
Michael T Ganschow Green: Save and then I can come in here, and I can go to my Google fonts page right here, and all I have to do is specify what font I want to use using a font family property, so I can simply copy paste one of these font family properties.
Michael T Ganschow Green: Go back here, and I can say in my fig caption I want to use really beanie.
Michael T Ganschow Green: And let's get a color on that shall we let's grab what color is this type.
Michael T Ganschow Green: This type in some kind of screaming orange, it is a.
Michael T Ganschow Green: 255 84 zero all right so we're going to go in here I didn't mean to minimize you.
Michael T Ganschow Green: Thank you appreciate that, thank you for showing me photoshop so let's do a color.
Michael T Ganschow Green: I could put in those values or I can just say one of the Orange is.
Michael T Ganschow Green: orange red.
Michael T Ganschow Green: Save all right we're gonna go save push this out come back here to my sample refresh and there it is orange rainy beanie I might even enlarge it a little bit so i'm going to go, because I think it needs in enlarging so i'm gonna go font size.
Michael T Ganschow Green: 1.5 m's like so we're going to make it bigger.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: I think I can shrink it just a touch just a touch gents just a touch ladies and gents just a touch ladies we're going to put it in here and we are going to.
Michael T Ganschow Green: put this in place, yes, there we go look at that it looks like terrible terrible chicken scratch alright.
Michael T Ganschow Green: So now we are ready to add in another Google font i'm going to add some Google fonts to the first letter of our first paragraph, to make a drop CAP okay.
Michael T Ganschow Green: So here is what I am going to do.
Michael T Ganschow Green: i'm going to insert a class style using a tag that I have not previously discussed with you guys before a tag called a span tag.
Michael T Ganschow Green: And the whole point of a span span tags kinda like a div tag, but it has even less html value okay all a span tag is there for is to attach a CSS to.
Michael T Ganschow Green: A div tag at least is a layout tag that can that you can attach this to all this span tag is for is just to hang a class on okay so i'm gonna come back to my html here and i'm going to wrap the essence spicy with a span tag and these look like this, they go span.
Michael T Ganschow Green: And span and then I could come in here in my class and go class equals drop CAP.
Michael T Ganschow Green: And suddenly, I have a drop CAP class I can add wherever I choose so, for example, if I come into my main here and add directly between my main in my side, I actually know none of my main to my side my article if I add it let's do it with my article here so let's go article.
Michael T Ganschow Green: dot.
Michael T Ganschow Green: whopped CAP, so this will only apply to drop camps in an article tag why, because I can.
Michael T Ganschow Green: And I go save and then I go back to my Google fonts Google fonts everybody Google fonts and we grab a font family train one.
Michael T Ganschow Green: and add him in.
Michael T Ganschow Green: So I go font family train one.
Michael T Ganschow Green: let's go fun size to make it Nice and big like maybe three m's.
Michael T Ganschow Green: And color.
Michael T Ganschow Green: red.
Michael T Ganschow Green: It looks like in a browser.
Michael T Ganschow Green: Oh yeah look at that lovely drop CAP look at that thing look at it there, it is now if I want to continue to drop CAP bridge, I can always add a float to it.
Michael T Ganschow Green: Always add float and it'll pop it down.
Michael T Ganschow Green: In this case, you may have to do some moving around to the thing, so I might do something like a.
Michael T Ganschow Green: margin.
Michael T Ganschow Green: I might do something like a padding.
Michael T Ganschow Green: zero.
Michael T Ganschow Green: And a margin.
Michael T Ganschow Green: let's go negative 10 pixels.
Michael T Ganschow Green: Zero pixels zero pixels zero pixels or something like that to bring it up a little bit.
Michael T Ganschow Green: it's come up a little further I think so yeah drop camps in in html can get a little weird so let's go negative 20 when you up just a little bit further.
Michael T Ganschow Green: There we go and then I might do a negative 30 on the bottom.
Michael T Ganschow Green: oops sorry bottoms middle one Michael geez so we might do this.
Michael T Ganschow Green: yep there we go and to negative margin on the bottom and suddenly a proper drop CAP is born oh snap and look at that fun look at that beautiful Google fun look it's displaying let's blow the size up a little bit of the three m's might in fact be too small it's gonna forums.
Michael T Ganschow Green: Big fatty drop CAP.
Michael T Ganschow Green: i'm fatty drop CAP let's have a little bit of negative margin up top there shall we just to just a little bit a.
Michael T Ganschow Green: little bit of margin on the bottom to save boop and.
Michael T Ganschow Green: Open up too much negative margin on the bottom all right fine fine fine man knows when he's gone too far, save.
Michael T Ganschow Green: needs a little bit more all right, well then let's go negative 20.
Michael T Ganschow Green: nope we're gonna find a happy medium here guys, I promise you we're gonna go negative 25.
Michael T Ganschow Green: Is it really this much eyeballing involved in web design Michael yes, yes, there is.
Michael T Ganschow Green: oops all right.
Michael T Ganschow Green: Go negative 22 Okay, so I think we might have to increase the font size, a little bit just a little more.
Michael T Ganschow Green: fill that space up hey go that's a nice drop CAP fill that space up with the size just a little bit Bam so that is inserting Google fonts basically it's just as simple as going to Google fonts finding fonts you like.
Michael T Ganschow Green: clicking on them.
Michael T Ganschow Green: And then coming and then.
Michael T Ganschow Green: Adding them here and then coming over to your lovely link right here grabbing these two links, right here sticking them in your html head tag up here.
Michael T Ganschow Green: I like so.
Michael T Ganschow Green: right there and then.
Michael T Ganschow Green: calling them out whenever you need to via font family properties.
Michael T Ganschow Green: So questions on inserting fonts using Google fonts adobe type kit works pretty much the same way, so don't feel huge need to DEMO that.
Michael T Ganschow Green: By the way, these fonts are all free you can use them as you see fit, you can also use if you have a creative cloud subscription all of the adobe type fonts as well.
Michael T Ganschow Green: So questions.
Michael T Ganschow Green: alrighty Oh, I see a question the chat popped hang on a second somebody's got a question when you go I can't think of any fair enough all right, we got me all excited there.
Michael T Ganschow Green: Okay, fine alright cool then let's uh let's make some real fun okay so gathering up for us from a design program can be a pain in the butt so pretty good only was something like photoshop that doesn't package so here's the cheat that I did.
Michael T Ganschow Green: I went through my photoshop document.
Michael T Ganschow Green: clicking on the various fonts and grabbing their names from up here, then I went in the illustrator and I created a little text box, you can do this in indesign as well that has all the fonts that I used all the funds that I used.
Michael T Ganschow Green: And then I went and I did a file package and I packaged it to make a nice package of the document and all the fonts used so that I don't have to go hunting through Madame system to find all of my font files, which is a pain, a pain, a pain right in my gallbladder okay so.
Michael T Ganschow Green: package that close that up by by illustrator so now in my who I got a question I thought I thought.
Michael T Ganschow Green: yeah, no, no, no, you don't you don't know no just just open up an indesign file or an illustrator file find the fonts in whatever software you built it in.
Michael T Ganschow Green: put them into that indesign illustrator file and package, it and it'll grab all the funds for you so that you don't have to go figure out what folder where you have your what and let the file name law will law, so you just go in and drop it in and.
Michael T Ganschow Green: I.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's turn these into a format that browsers will actually see.
Michael T Ganschow Green: Because browsers can't see him really right now well some browsers can see true type funds, so these guys are true type fonts browsers can see them, but some are not.
Michael T Ganschow Green: So trying to minimize everything about to my desktop hopefully I don't remember where I left everything.
Michael T Ganschow Green: And i'm going to go into my GR C 175 folder folder.
Michael T Ganschow Green: Alright, so i'm working graphics here there is my type conversion samples older don't go and quit illustrator I don't think I need illustrator.
Michael T Ganschow Green: anymore for the DEMO my bios trainer he served well.
Michael T Ganschow Green: Okay, so here's my folder with the file and with all of my finance, yes, so I can go in and I can convert which ever ones I want I don't know just convert them all, we can use them, wherever in the document i'll reference out of the out of my photoshop file later.
Michael T Ganschow Green: Alright, so in order to convert these into font formats that browsers will actually see and plug them into our website, we need to use a fun little tool and there's a website called font squirrel.
Michael T Ganschow Green: squirrel has a lot of fun tools, like a lot of them okay so i'm going to put font squirrel squirrel link in for you guys here so that you all may enjoy the Majesty, that is fun squirrel.
Michael T Ganschow Green: squirrel has a holy crap ton of free funds, like a whole crap ton of free funds, you can go through and pull free funds from it it's got probably the second best font identifier on the web, the very best fun identifier on the web is called what the font that is this guy right here.
Michael T Ganschow Green: hello, there we go, this is the best fun identifier.
Michael T Ganschow Green: fun squirrel as a second best it's always best when you're trying to idea font to upload your image into both of them, so what they do.
Michael T Ganschow Green: will fund squirrel and what the font is you uploaded a picture of a piece of type into these into these identifiers well, preferably.
Michael T Ganschow Green: The higher contrast and the higher resolution, the better, and it will read the font and attempt to tell you what font it is they work about 75% of the time they'll give you a font that's pretty close they're not.
Michael T Ganschow Green: hugely dead on accurate, but they work decently and they give you a place to start when you're trying to match a font which is unbelievably pain in the ass and graphic design when somebody hands you a scan of a business card, and then to find to like exactly like.
Michael T Ganschow Green: So.
Michael T Ganschow Green: ID and fonts is very critical find squirrels got a good one, but the best one is that what the fun, however.
Michael T Ganschow Green: Aside from its million free fonts were found squirrel really shines is it as a font generator and.
Michael T Ganschow Green: So this is cool what this generator does and i'm going to pop a link into the chat as well, so that all y'all can have links and such Bam there you go um.
Michael T Ganschow Green: So what this web font generator does is this will convert desktop fonts true type fonts and open type fonts into into fonts that can be read by browsers so in order to do that.
Michael T Ganschow Green: You can upload your fonts here, and then you can check which of these you would like to use, so you can choose a very.
Michael T Ganschow Green: Basic setting it'll just straight process it through you can choose an optimized setting or you can click expert and select all of the fonts you could ever want.
Michael T Ganschow Green: me I can play around in the settings, but I just tend to leave it on optimal something I don't have to think about any of this stuff, and I say.
Michael T Ganschow Green: Yes, the fonts i'm uploading are legally eligible for web embedding I yeah sure I know exactly where they all came from and totally remember where I got every single phone I have so I check this box.
Michael T Ganschow Green: And now I can go in and I can upload fonts appear and and and it will make them into fonts that web browsers will see specifically, it will convert them into this wife w O F F file here.
Michael T Ganschow Green: If you want to make more you can also have it, make a true type version of the font and an e T version of the font that yo T is for Internet explorer but we worried about that a lot last lately.
Michael T Ganschow Green: i'm the one you might want as a true type font but otherwise I just leave it on optimal.
Michael T Ganschow Green: When I go to upload funds and I go where my funds come on open up I got the spinning wheel, here we go good good good good a spinning wheel let's go to desktop.
Michael T Ganschow Green: glc 175 working graphics find my fonts, there is the type conversion samples folder with my finance in it, and I can just highlight everybody everybody body, and I can say you know what.
Michael T Ganschow Green: You know what let's make these guys and let's take them and open them, so now what that does is that when start running these guys do the converter let's see here.
Michael T Ganschow Green: how long it takes the converted to run there goes running cuz im converters there's more than that so come on now jagger oh.
Michael T Ganschow Green: No, I thought that was a warning, but no that's not a warning me have suddenly the three of them.
Michael T Ganschow Green: Well, give it a second here and see if it will do more, or, if I can only upload them three at a time we'll find it had a bit of an error of course it did because we're in the middle of a DEMO so let's go upload fonts and will upload let's just see.
Michael T Ganschow Green: It didn't always do course it did my two types okay so.
Michael T Ganschow Green: let's just see here let's just grab them all, let it run I got a little I think i'm gonna jump the gun back there a little bit so one thing I don't like about it is that it doesn't have a like little taskbar to tell you that it's running.
Michael T Ganschow Green: So.
Michael T Ganschow Green: I see 123 of them okay well that's my fonts out of my navigation, at least so that's good.
Michael T Ganschow Green: But I would like to see if I can download all of them, so let's refresh this let's try the other ones too, so it did all the bs let's go upload.
Michael T Ganschow Green: Oh hang on i'm going to check the yes before the let me so did all the bs.
Michael T Ganschow Green: let's see if it will do this guy and these nice people will do those another be.
Michael T Ganschow Green: No fonts to upload up now it's uploading waiting for secure uploads okay so it's thinking.
Michael T Ganschow Green: or ads running okay so some of them are just appears to be it just takes a while longer with them, while it burns through okay.
Michael T Ganschow Green: cool I that's what I needed to know, so what i'm gonna do is i'm gonna reach out to us and we upload everything else and we'll just let it run for a minute, while it's doing its thing.
open.
Michael T Ganschow Green: chug chug chug chug chug I wish it had a bar or something so there's there it's running let it run for a little while longer well these guys are going before I mash down low.
Michael T Ganschow Green: Loading ads loading and loading and art, so it shows this let's see what I have oh it's no Otis thinking air goes alright, so, while it's thinking chug chug chug chug chug chug.
Michael T Ganschow Green: chug chug chug chug chug chug they use the default CSS rotating wheel cursor and I will let it do its thing here for a second, so what i'm basically going to do.
Michael T Ganschow Green: Is i'm going to feed the i'm going to take the fonts as they appear in here, so you know, there is this one down there's that's at bee's knees there's Batman forever there's bleeding cowboys there's blazed.
Michael T Ganschow Green: Actually, are going to wind up not using this guy is, I think this is Russell down here, this is.
Michael T Ganschow Green: yeah Russell oblique we're not gonna want to be using Russell, but we will use a couple of the others, so I may or may just call it here and grab the three that it's done because that's my name, of the other little later yeah I know you're thinking photoshop I understand.
Michael T Ganschow Green: This is thinking too, so you know what I may go back and get the other one in a minute I may just mash download and we'll see if it will download chugger Okay, so it is working on it, so they had to go we're downloading we're downloading our fonts here we go.
Michael T Ganschow Green: there's one.
Michael T Ganschow Green: See, not the others they come.
Michael T Ganschow Green: there's two.
Michael T Ganschow Green: Come on bleeding cowboys come on you're the worst looking at of all these funds come on.
Michael T Ganschow Green: You can't do this without you.
Michael T Ganschow Green: Almost.
Michael T Ganschow Green: Almost doing there's everybody alright so let's see what we've got in our in our in our downloads folder here let's see what we got what do we have here in our downloads folder so we've Labor to produce out of the oven here.
Michael T Ganschow Green: An entire little kit an entire kit of download so we're going to grab this kit and i'm going to throw it in.
Michael T Ganschow Green: My work and graphics here, so they have the kit and then we're going to crack it open and show you guys what lies within okay so we're gonna expand it out and it makes a nice little folder.
Michael T Ganschow Green: And in here we have.
Michael T Ganschow Green: So it only made the three we'll do another one in a minute, but we in here we have look at that html live text html DEMO ain't that Nice.
Michael T Ganschow Green: Of a volunteer because there's Batman forever there's a DEMO for blazed on looking at the flames blaze it.
Michael T Ganschow Green: let's see here we have a DEMO for bleeding cowboys and all of its magnificent yeah look at that look at I can barely friggin read it yeah alright cool so there's those guys, we are now all set to to have some fun here so it's also done a couple of other things too.
Michael T Ganschow Green: it's made us a little style sheet, which is awesome, this is a style sheet to access those three fonts look at these Nice.
Michael T Ganschow Green: Interesting interesting interesting CSS rules here we'll discuss those in just a second so it's done that it's also converted our file into what files dot w FM w O FF is basically the universal web font file, so what i'm going to do with all of these, I mean I could.
Michael T Ganschow Green: copy paste them into my general directory.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: leave them here in this folder and be a terrible person link into my working graphics folder but i'm not what i'm going to do instead is i'm going to take these files and i'm going to drop them into my.
Michael T Ganschow Green: Images folder were all things that I want to show in the browser live okay so.
Michael T Ganschow Green: All of these downloaded fonts right here i'm going to grab my all my wf files in fact i'm going to sort these by kind.
Michael T Ganschow Green: So that I get all my files sorted as little separate things and i'm going to grab everything that's a w F F word wf to walk walk to and i'm going to shove, it into my images.
Michael T Ganschow Green: Now some people when they put fonts and they like to make a separate fun act and only images, this will now haha.
Michael T Ganschow Green: They like to make a separate folder in images for their fox you don't necessarily have to I don't because I don't generally use like a huge ton of fonts are just a few font files is typically enough so this this will work just fine yeah.
Michael T Ganschow Green: So I don't lie my wife's into my images folder.
Michael T Ganschow Green: And I can come here and add in these fonts so it's generated a style sheet here, we could in theory link this style sheet up to our document as you guys know but, given that it only gave us three CSS rules here.
Michael T Ganschow Green: Then i'm just going to copy paste them into my existing CSS it will minimize the amount of CSS is, I have to do it, and it will let me modify these as I need so i'm simply going to copy paste each of these CSS rules.
Michael T Ganschow Green: And i'm going to stick them right into top of my CSS folder what folder file see it right at the top of my CSS file Why am I going to put these guys up at the top.
Michael T Ganschow Green: Because I want one of the very first things to be loaded in my web page to be these font files, so that the fonts will queue in as soon as possible, get out of the way zoom chrome out away Scott, thank you um so that, so the fonts will pop in as soon as possible in the browser and.
Michael T Ganschow Green: So i've put my three CSS rules up here now, some of you may have noticed, we have a little different selector here just a little bit different than what I talked about before.
Michael T Ganschow Green: So you guys know about class selectors and you know that tag selectors and you know about ID selectors and you know that's pseudo class selectors and you know that compound selectors well.
Michael T Ganschow Green: This is a new type of selector you guys a brand new type of selector okay oh Michael what is this what have you done what what what primrose path, are you leading us to look.
Michael T Ganschow Green: This selector is going to become really important this APP sign and then something Okay, because what these are called these they're not actually even technically selectors they're called media queries.
Michael T Ganschow Green: And when you see an ad in front of the selector that is a media query and what that means is that, as a question that is asked of a browser in this case, the question is, what do you like a font.
Michael T Ganschow Green: Every browser says yes to funds, so this media query here says, would you like a font another media query that we might use is something like.
Michael T Ganschow Green: What is your display size and then we use that media query to I had to modify what CSS rules are shown and not based on the display size of the website.
Michael T Ganschow Green: So media queries are going to be very important for what we're going to be doing later on we're going to be using them a ton throughout the rest of the Semester, but this is baby's first media query okay oh snap oh snap.
Michael T Ganschow Green: Oh snap is right media queries now some of you who are ahead i've certainly heard of media queries and i'm indeed played with them, which means you're really going oh snap because you know what the rest of you are in for.
Michael T Ganschow Green: So I just need to do an adjustment to the to these guys before I really can use them and.
Michael T Ganschow Green: That is, I need to change the URL right, because this is my CSS file it's living inside my it's living inside my CSS folder so.
Michael T Ganschow Green: Much like our background link to Mr stitch here, I have to change my font source URLs right here so see where it says source colon URL and it says bleeding cowboys web font dot was off to I have to change this link to dot dot slash images slash bleeding cowboys web font want to.
Michael T Ganschow Green: Add that dot dot slash images now For those of you who didn't remember my mom or we're not here for my lecture and dot dot slash.
Michael T Ganschow Green: What that dot slash means is back out of your directory and go to the directory that has one level above you so when our case what this link is saying is.
Michael T Ganschow Green: back out of our CSS folder go to our main directory level, then look in our images folder and look for a font called bleeding cowboys web font wife so i'm going to add that same link to my Batman forever.
Michael T Ganschow Green: And i'm going to add that same link to my.
Michael T Ganschow Green: blazed alright, so now, I can add these fonts in wherever I like simply by putting in whatever it says, right here and font family in the into a Funk family property now I can actually make this say whatever I want, so I can come up here and say bleeding cowboys.
Michael T Ganschow Green: And I can come here and I can say Batman.
Michael T Ganschow Green: forever.
Michael T Ganschow Green: And I can come here and I can say blazed.
Michael T Ganschow Green: Because, as you noticed, if you come down to our where did our where's our little.
Michael T Ganschow Green: side there will take that as a wasted thing right there will take him out so don't confuse people.
Michael T Ganschow Green: To come down here notice font family rainy beanie there's spaces in capitals here, so you can name your font family with spaces in capitals, if you like, yes we're violating michaels rules of order.
Michael T Ganschow Green: Oh no things are going, nuts it's true, though, you can you can name your font families up here in the media queries whatever you want So what are the media queries saying, really.
Michael T Ganschow Green: What they're saying is how browser anytime you see a font family listed as bleeding cowboys here.
Michael T Ganschow Green: So please swap in these files and there's two fallback files, they want to, which is the newest version of wealth and then a regular wife, so please insert these files, if you see a font family of bleeding cowboys referenced.
Michael T Ganschow Green: So i'm going to come down here and make a set of class styles based around each of these guys okay.
Michael T Ganschow Green: So i'll come here, above now if you put it above nav and i'm going to go a kind of style will make three classes so i'm going to go a class of style of bleeding cowboys.
Michael T Ganschow Green: With a font family, as you may remember down here really being.
Michael T Ganschow Green: So i'm going to go.
Michael T Ganschow Green: A font family.
Michael T Ganschow Green: we're not going to use any your stock ones instead we're gonna come here i'm going to copy our font family oops did I go too far, I went too far hang on so we're going to go font family.
Michael T Ganschow Green: bleeding cowboys and then we will have it fall back to sans Sarah.
Michael T Ganschow Green: So there's there's what we need to add bleeding cowboys in then we're going to come up here and we're going to add in Batman forever so we're going to go.
Michael T Ganschow Green: back that man, then, and then then then then then then then then then then then for ever.
Michael T Ganschow Green: And we're going to go font family.
That man forever.
Michael T Ganschow Green: That man forever will have default to Sarah type just because I think that's funny here, even though it's technically a San Sarah.
Michael T Ganschow Green: And bleeding cowboys is that hey you know what fine we'll send them to the regular one if somebody's gonna get all pissy with me why did you do that there's gotta be a reason i'd find all Center the regular way fine fine fine be that way, and then we're going to go blazed.
Michael T Ganschow Green: So we're going to go blazed.
Michael T Ganschow Green: Like technology font family.
Michael T Ganschow Green: copy blazed.
Michael T Ganschow Green: and will do.
Michael T Ganschow Green: script or cursive i'm going to do cursive for blazed.
Michael T Ganschow Green: Now you know what now, ladies to gonna say i'll get a Sarah Type two.
Michael T Ganschow Green: There we go now we're going to have these guys in wherever I put them in his class style, so I can stick them on each of my buttons individually and i'm going to do just that.
Michael T Ganschow Green: Alright, so that's going to say here so we've already got a metallic text gradient classier I was messing around with that one close that up.
Michael T Ganschow Green: And instead this first one is Batman forever.
Michael T Ganschow Green: let's see and then this next one class is.
Michael T Ganschow Green: bleeding cowboys and then this last one class is blazed.
Michael T Ganschow Green: See how they import jelly.
Michael T Ganschow Green: Fresh Oh yes, very nice indeed there we go, so we are just out there and i've got Tom bleeding cowboys is so we may have to bring that button back up and we will later.
Michael T Ganschow Green: So Questions about inserting custom fonts.
Michael T Ganschow Green: Let me do one more for quick review here will will do the this has gone on long enough font who is.
Michael T Ganschow Green: He is.
Michael T Ganschow Green: A bee's knees and I will make him real quick as a quick little review.
Michael T Ganschow Green: I tell i'm gonna find squirrel here.
Michael T Ganschow Green: Fresh and i'm going to upload.
Michael T Ganschow Green: Oh yes, that's right it won't go until I check the box, but yes i'm aware and grab these nice me.
Michael T Ganschow Green: open.
Michael T Ganschow Green: And let it make these needs come on chugger.
Michael T Ganschow Green: These knees, make a downloadable version.
Michael T Ganschow Green: see what it generates.
Michael T Ganschow Green: it's thinking.
Michael T Ganschow Green: That once it's done let's see.
Michael T Ganschow Green: You changing the ads.
Michael T Ganschow Green: Sometimes it'll work with these fonts sometimes it will not.
Michael T Ganschow Green: So fun squirrel is probably the best of the font converters that I have come across there are a few others.
Michael T Ganschow Green: As well fun squirrels obviously a really good one there's this transporter is also really good um it's it's very much more like manually controlled but yeah i've had good luck with that one as well.
Michael T Ganschow Green: When font squirrel gets a little techy with me so you know what we'll try that guy well find squirrel is think it.
Michael T Ganschow Green: Did the other fonts just fine so let's go.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: You to do to do to do sure all right let's get a font.
Michael T Ganschow Green: and see what he says bee's knees open.
Michael T Ganschow Green: There it is okay.
Michael T Ganschow Green: So then, what am I, if I go here now setting saved okay.
Michael T Ganschow Green: What do I download it oh convert.
Michael T Ganschow Green: In queue here it is to this guy made bees knees, to have a preview page.
Michael T Ganschow Green: there's these Nice.
Michael T Ganschow Green: cool okay so let's download bee's knees.
Michael T Ganschow Green: let's see what transporter to font space oh fun space let's try that one too.
Michael T Ganschow Green: yeah I use whatever one you're you're comfortable with.
Michael T Ganschow Green: There is, there is no let's do font space on space converter.
Michael T Ganschow Green: There it is.
Michael T Ganschow Green: boop.
Michael T Ganschow Green: Free copy and paste font font generator think.
Michael T Ganschow Green: Give me type your text here where's the generator i've actually never used font space before so you get to give me a tour let's see here, where we going, so this is the font generator So what do I have to load my own font.
Michael T Ganschow Green: Type your tax wait for the font generator Oh, I see Oh, this is, this is a pre generated one this like Google fonts oh okay yeah this is cool all right yeah so there's another one, let me.
Michael T Ganschow Green: For those of you who don't want to find space address here you go oh yeah So these are these are nice set of.
Michael T Ganschow Green: We cool free fonts looks good, thank you for the, thank you for the tip there cool alright cool cool cool okay that's really cool.
Michael T Ganschow Green: um alright well that's another that's another good recommendation I never really used fun space before but that's a cool one docker docker alright, so let me I let's use the other guy here we've created another.
Michael T Ganschow Green: Another one in our downloads.
Michael T Ganschow Green: downloads if I was a download and let's see what's in this one, shall we were going to put that in here to transporter and what a zip file to just so you guys have records.
Michael T Ganschow Green: And it looks like it's pretty much the same thing yeah it is pretty much the same thing well look at that change to CSS just a little bit, but I think I can copy paste this in here, just like so.
Michael T Ganschow Green: up here.
Michael T Ganschow Green: No, no, we need some dot dot slash images action yeah there don't need that font display I don't think so, let me take you out.
Michael T Ganschow Green: And the bee's knees out of here grab these bees knees wife's i'm gonna stick them over here in our images copy.
Michael T Ganschow Green: And we're going to paste bee's knees into our images i'm going to take all the capital letters out of them.
Michael T Ganschow Green: Just because I don't want to cause any surfer surfer surfer server problem server Michael server server problems, no, no surfer problems it's from take all the capitals out of there and do to do go back in here land in some images hot images action to do.
Michael T Ganschow Green: and
Michael T Ganschow Green: Oh, I realized I forgot to.
Michael T Ganschow Green: Put the transporter link.
Michael T Ganschow Green: To you guys hang on a minute I know it's not it's not saved yet.
Michael T Ganschow Green: get him oh.
Michael T Ganschow Green: web font converter, thank you.
Michael T Ganschow Green: transponder or transfer hunter transfer hunter transponder that's an end Michael transfer hunter there we go that's the through that in the chat for you guys as well alright let's change take out the capitals.
Michael T Ganschow Green: and
Michael T Ganschow Green: cool save and change the font family just a bee's knees.
Michael T Ganschow Green: drag and drop this guy down in the footer areas yeah you know what you're gonna get bee's knees.
Michael T Ganschow Green: comic.
Michael T Ganschow Green: sans.
Michael T Ganschow Green: Sarah.
Michael T Ganschow Green: see that took.
Fresh.
Michael T Ganschow Green: yeah yep it did ah look at that there is some bees knees action so there's two font options, there are.
Michael T Ganschow Green: Three if you consider Google and i'm gonna go grab another Google fun, because I think our each one here should be a Google form so i'm gonna go grab another one of these why, because I can.
Michael T Ganschow Green: So let's take all of these out, I will take out pinion own opinion is opinions Okay, but let me move that back to our guys here let's go let's do one of these script types I think we're going he's sweetly one ones to go that wiggling jumping around.
Michael T Ganschow Green: his neck Oh, why not, I never go ad you select sure why not, why not.
Michael T Ganschow Green: You.
Michael T Ganschow Green: paste.
Michael T Ganschow Green: place these two links out of the font.
Michael T Ganschow Green: Do to do hey hey there we go.
Michael T Ganschow Green: Did it.
Michael T Ganschow Green: Save and now i'm going to go to heaven, as well as my each one make that fought make it a Narco.
Michael T Ganschow Green: Narco we're gonna make it bigger, though, I think it needs to be five m's.
Michael T Ganschow Green: yeah look at that looks like a big fat marker fun got all of that looks terrible I love it I love it you guys will have no temptation to want to copy this website, this is fantastic so questions on any of this fun stuff that I was going over today.
Michael T Ganschow Green: Oh cool beans.
Michael T Ganschow Green: I think all of our brains are probably full at this stage there's a little bit of more polishing I want to do to this, which we will do on Tuesday.
Michael T Ganschow Green: In the meantime i'm going to give you guys the remaining 45 minutes today to ask me questions well I zip this stuff up and put it online, so you guys can download it.
Michael T Ganschow Green: So feel free to ask me questions about various things and.
Michael T Ganschow Green: And I will provide you answers, but I want to give you the remaining 45 minutes as an open lab so i'm going to hang out here, putting my files up and just be available to to generally ask and answer questions of all sorts so.
Michael T Ganschow Green: Let me know what I need so.
Michael T Ganschow Green: i'm going to start by compressing legitimacy 175.
Michael T Ganschow Green: close up chat here real quick actually i'll open chat up for those of you who wish to leave early please feel free as well.
Michael T Ganschow Green: i'm just going to be putting my files online and just kind of doing the lab and a Q amp a here, so I can I can have a good have a good one, after heather thanks again for those links on the gradient stuff that was interesting lots of experimental taggers going on there.
Michael T Ganschow Green: it's going to pause the recording.
Michael T Ganschow Green: Always my recording recording.