Michael T Ganschow Green: Alright, see what we got here.
Michael T Ganschow Green: chopped up to the computer and we have other filtering in excellent alrighty then so welcome to another session of a GR C 175 today we're going to go over a little bit of type biographies like just a just a teeny bit.
Michael T Ganschow Green: And we're going to talk a little bit about.
Michael T Ganschow Green: photoshop we're going to get into photoshop of it for those that are not familiar with photoshop this would be a nice little going over all of the tools photoshop so you're not intimidated by using it.
Michael T Ganschow Green: For those do know photoshop this would be a nice little review for you guys and we've got will be working on photoshop for a couple of classes now.
Michael T Ganschow Green: For the next three or four will will go to photoshop will start laying things out our tools and how to use them and play around with type in photoshop and we'll see we'll see bringing my laptop to crash right in the middle of a.
Michael T Ganschow Green: lecture.
Michael T Ganschow Green: Buddhists all out of out of.
Michael T Ganschow Green: zoom it'll be a lot of fun um so just a couple of care and feeding things before I get started here, so I think just about all of you are registered for the forum excellent if you have not registered for the forum, or you have not had me.
Michael T Ganschow Green: activate your user please either send me an email or message me and canvas with your username so that I may activate you.
Michael T Ganschow Green: For those that are activated don't forget to post any introduction in the sub forum I love that some of you are responding to each other, now that's awesome and I could tell me you're going through and saying hi to other people i'm seeing.
Michael T Ganschow Green: The threads being to multiply so that's that's.
Michael T Ganschow Green: that's really excellent I like the I like the.
Michael T Ganschow Green: thread explosion i'm seeing here so i'm just a couple of care and feeding things as we get in here so aside from.
Michael T Ganschow Green: The forum stuff make sure you're registered with the forum and make sure you've got me activating it and make sure that you post an introduction in the introduction sub forums, or, to put names to faces.
Michael T Ganschow Green: i'm just couple of things on the forum, so that I can make sure who's posting what so one thing i'd like you all to do share my screen here, one thing that I would like you all to do is in your forum account if you could make a signature for yourself that has your name in it okay.
Michael T Ganschow Green: A lot of you have made signatures, which is good, I just want to make sure that you have your name in them so.
Michael T Ganschow Green: For those that have not played around in their user settings in the forum here's where signatures are so we're going to see behind the curtain i'm going to log in with my instructor account who know login here and.
Michael T Ganschow Green: You go to get this.
Michael T Ganschow Green: That out of the way, so you can you go over here to your little name in the top right corner of the browser and you click user control panel.
Michael T Ganschow Green: And then, in your.
Michael T Ganschow Green: In your profile you click you come over here over to the sort of the middle left side and you'll see an overview tab which is kind of everything your whole activity.
Michael T Ganschow Green: On the board, and then you have a profile tab here now in your profile, you can fill this out, if you want that's not necessary, but.
Michael T Ganschow Green: One thing I do want all of you to do is, I would like you to have a signature that has your name in it most of you.
Michael T Ganschow Green: have not either you're not done a signature, or you have a signature, that does not have your name in it, and I want to make sure that your name is in the signature, so that if you make a particularly good point in critique or or you're posting things up, I can make sure that I can I can.
Michael T Ganschow Green: Add names to faces to make sure that you're getting your proper critique and participation points so again go to the profile tab and user control panel, we come up here and you.
Michael T Ganschow Green: click on your little logged in name you go to the user control panel click on profile and then over here on the left side, there is a.
Michael T Ganschow Green: An edit signature button.
Michael T Ganschow Green: And you come here and add in your signature now a lot of you are having fun with your signatures.
Michael T Ganschow Green: Someone who shall remain nameless but know who you are put a damn rick roll and their signature that's fantastic so.
Michael T Ganschow Green: People are definitely having fun with their signatures, and that is excellent, I really encourage that, however, I just want to make sure that everyone puts their name and their signature, so we know you are.
Michael T Ganschow Green: chat getting recalled you're very welcome very welcome their lunch box very welcome, yes, yes rick rolling everyone in your signature, you know it's funny i've been teaching this class now for.
Michael T Ganschow Green: I don't know 1415 years and it's been online for a decade of bed, and no one is thought to put a wreck role in this in the signature so congratulations on your originality now I really want to see what your designs look like, for your project one.
Michael T Ganschow Green: So don't forget to put a put your name and your signatures everybody off those that are not registered with form again, please register, please get your your.
Michael T Ganschow Green: Account activated and please post in the introduction sub forums, so we can all meet you i'm a number of you have asked if you, you know.
Michael T Ganschow Green: If you can respond to other people's introductions and posting them, yes, I really encourage that please, please do.
Michael T Ganschow Green: post in other people's introduction threads but it's not required if you're if you're not particularly social and you don't feel like it that's fine if you want to great.
Michael T Ganschow Green: introductions are more so that we know who all is who all to help us kind of get to know each other.
Michael T Ganschow Green: So if you want to introduce yourself to each other and each other's introduction threads see my guest but i'm not going to require.
Michael T Ganschow Green: Okay, so let's see here Oh yes, yes, yes there's one other little bit of care and feeding before we jump into I biography so um we have a project critique do online one week from today, so your preliminary critique for project one project, one is do.
Michael T Ganschow Green: One week from today and it's just a quick reminder the preliminary critique from project one.
Michael T Ganschow Green: is basically to two different designs out of your thumbnail so go through your thumbnails pick your best designs and then give me a rough of what it'll look like on a mobile device your phone basically vertical rectangle and a computer horizontal rectangles and.
Michael T Ganschow Green: The sizes are good guidelines for that really owners on a rectangle and a vertical rectangle will serve you for either one but.
Michael T Ganschow Green: But I set those sizes up because everybody's always asks what side should I make it now they go that's what side, you should make it enjoy i'm also don't forget your your two links, so you want to.
Michael T Ganschow Green: Your to inspirational website links on your preliminary critique as well, what what what websites have creatively inspired you, I want to.
Michael T Ganschow Green: appear inside your brains and see what creatively inspires you, which is all this terrifying that's that's the really spooky part of this to seeing what inspires people you'll all be scared of each other to be fantastic, so I really want to see that.
Michael T Ganschow Green: And I would and i'm really curious to see your designs for your project one your your single little page kind of advertising yourself it's gonna be cool.
Michael T Ganschow Green: So that is do one week from today, if you have any questions on it feel free to hit me up you know where to find me i'm on canvas i'm on.
Michael T Ganschow Green: i'm on email, and a number of you have asked on the forum which sub form do I check.
Michael T Ganschow Green: most commonly.
Michael T Ganschow Green: I check at least a couple of times a day in here in the ass tell So if you have this this sub form that's basically meant for asking questions so if you have a question or you've got some cool fact about.
Michael T Ganschow Green: Your projects or your web design or whatever that you found feel free to share it in here.
Michael T Ganschow Green: um I would fact I recommend everybody check this kind of asked tell sub forums once a day or so, because if a student has asked a question and you have an answer for it and I haven't posted, for whatever reason, feel free to answer each other's questions to.
Michael T Ganschow Green: It don't worry if you're flagrantly wrong on sure, but generally.
Michael T Ganschow Green: This has been a really helpful area for students to kind of help each other out, as you can see from the post history, I also check it pretty regularly.
Michael T Ganschow Green: You want to address me directly, of course, I have my canvas and my email so feel free to hit me up there, so before I get started in with typography i've got tonight we're going to push up the card again because i've got some nice videos um does anybody have any questions.
Michael T Ganschow Green: Alright looks like not cool okay so um somebody asked.
Michael T Ganschow Green: So, why were you showing videos on page layout I got I gotta ask that question well.
Michael T Ganschow Green: um i've been actually showing these videos for a couple of years now, and my physical 175 classes, because I came up with these lovely.
Michael T Ganschow Green: lectures on type biography and on layout on a color and all of that that were like an hour plus long and I went into all kinds of details and all of that, and then I came across these videos that basically summarized what I was saying, those lectures.
Michael T Ganschow Green: In like five or 10 minutes.
Michael T Ganschow Green: So I figured hey want to be efficient i'll show you guys the videos don't worry i'm also going to post links and chat if you would like to go back and watch them at any time they're also posted on the announcement thread that I released on Sunday.
Michael T Ganschow Green: I got a little pushback on that, by the way, a couple of you're like why so much, and the reason why I send so many links and things out like that is because this is an asynchronous class so.
Michael T Ganschow Green: What that means is that half of you are so that are in class here only represent half the class, there are people who are taking the class we're not going to attend any of these lectures they're just going to magically.
Michael T Ganschow Green: appear out of the mist every time there's a critique drop their websites for critique.
Michael T Ganschow Green: And then fade back into this, and so I want to make sure that those who are not coming to these classes also have an opportunity to learn the topics we're going to be discussing and now.
Michael T Ganschow Green: you'll miss my lovely educational style and the fat and and I may cover some things that maybe the videos gloss over or i'm a glass over some things that the video is going to detail on.
Michael T Ganschow Green: So you probably get a little different experience if you're just going through the the my provided stuff but, but you will get the knowledge So yes, if you want to go through those links they're awesome I pro.
Michael T Ganschow Green: Every one of them is great I don't put them up they're not great.
Michael T Ganschow Green: they're great resources so feel free to dig through as I send them out, but they're basically just covering what we're going over on a week to week basis so.
Michael T Ganschow Green: don't worry too much about oh I gotta watch everything i've got a i've got to click on every link in there helpful and, if you would like to again feel free, they will.
Michael T Ganschow Green: you'll put out better work if you do, but you don't have to i'm providing them as a resource for you to use and not use as you see fit that's a.
Michael T Ganschow Green: it's entirely up to you because we're all adults here you're only paying to be here, I trust you guys know what you're doing more or less when it comes to your own education and like I said i'm a resource available as.
Michael T Ganschow Green: For Q and a's and any any clarification or anything like that alright so let's have some fun so we're going to modify my screen share so that I optimize and share sound.
Michael T Ganschow Green: we're going to want some lovely typography videos do to do to do so over here to the white tubby because there are some great type biography videos i've also included to the longer ones in the announcement as well.
Michael T Ganschow Green: But these are some short ones that will cover a nice breadth of topics so and then I will cover a little more to.
Michael T Ganschow Green: To.
Michael T Ganschow Green: Add just add a little flavor.
Michael T Ganschow Green: And then we'll jump into photoshop and all that photoshop.
typographic it's everywhere we look.
In the books, we read.
On the websites we visit.
Even in everyday life on street signs bumper stickers and product packaging.
Simply put, typography is the style or parents of text, it can also refer to the art of working with text, something you probably do all the time, if you create documents or other projects for work school or yourself.
typography can be an intimidating subject but it doesn't have to be you only need to know a little to make a big difference in the stuff you do every day.
So let's get started.
First, some common types of fonts and what you need to know about them.
serif fonts have little strokes called Sarah attached to the main part of the letter because of their classic look they're a good choice for more traditional projects they're also common in print publications like magazines and newspapers.
sans serif fonts don't have that extra stroke, hence the name, which is French, for without Sarah.
This style is considered more clean and modern and serif fonts also it tends to be easier to read on computer screens, including smartphones and tablets.
display fonts come in many different styles like script black letter all caps and just plain fancy.
Michael T Ganschow Green: Because of their decorative nature display fonts are best for small amounts of text, for example, titles and headers and more graphic design.
In a way, fonts have their own language, they all have something to say beyond the words on the page.
They can come across as casual or neutral exotic or graphic.
that's why it's important to think about your message and pick a font that fits.
Some fonts come with extra baggage like comic sans curls pirates and many more there's nothing particularly wrong with these fonts they just have a certain reputation for being outdated and overused.
If you find yourself tempted by them think twice and consider using something else.
There are many fonts with a similar look and feel that are less likely to detract from your message.
When deciding which fonts to use less is more it's best to limit yourself to one or two per project if you need more contrast try repeating one of your fonts in a different size plate or style this trick is practically foolproof for creating interesting combinations that work.
you've probably heard the saying opposites attract well, the same is true for bonds don't be afraid to combine bond styles that are different but complimentary like San Sarah with Sarah.
Short with tall.
or decorative with simple.
This can be challenging at first, but don't despair look to other designs for inspiration and soon you'll get the hang of it.
Maybe you've heard terms like careening letting tracking and hierarchy for those with more experience these concepts are essential for creating professional looking designs.
As a beginner you don't need to know everything about these terms just enough to inform your work and help you talk about design, with more confidence.
hierarchy is used to guide the redesign to whatever is most important, in other words, it shows them where to begin and where to go next using different levels of emphasis.
Establishing hierarchy is simple just decide which elements, you want the reader to notice first then make them stand out.
High Level items are usually larger folder or different in some way remember to keep it simple and stick to just a few complimentary styles.
letting is the space between lines of text, also known as line spacing if you're not sure how much line space in the US don't fret the default is usually fine.
The goal is to make your text as comfortable to read as possible too much or too little spacing can make things unpleasant for the reader.
tracking is the overall space between characters sometimes called character spacing.
Most programs let you condense or expand this depending on your needs.
In some designs, you might adjust your tracking to create a certain artistic effect, it can also help you fix fonts that are poorly space to begin with.
Olivia Reyes: curling is the space between specific characters unlike tracking it varies over the course of the word, because each letter fits together differently.
Some fonts have what we call bad kearney making certain letters looking properly spaced if a font you're using has bad curling it's best to cut your losses and choose something else.
Well crafted text can mean the difference between an ordinary project.
And an extraordinary project, even if you're just getting started with design.
all it takes is an interest in type biography and you'll start to notice more see more and be able to do more in your own work.
We hope you enjoyed learning the basics of type biography check out the rest of our design topics, including color images in composition.
Michael T Ganschow Green: that's a nice little kind of first step with typography getting you used to the ideas and rules that are there and that's a great video to go rewatch periodically to see you know.
Michael T Ganschow Green: to catch new idea is from one of the things that they.
Michael T Ganschow Green: That they.
Michael T Ganschow Green: Are the kind of glass over a little bit in that video that I think is very important as hierarchy because fundamentally typographic is.
Michael T Ganschow Green: it's basically telepathy it's basically communicating ideas to people talking to their for brain essentially.
Michael T Ganschow Green: And so you want to immediately establish what is important and what is not, and you can use typographic to do this.
Michael T Ganschow Green: Really really quickly and efficiently so one of the very first things once you get kind of a base layout laid out in your designs that very first things you should be playing with this type of graphical hierarchy asking yourself what is important to you well you know what.
Michael T Ganschow Green: The most important pieces of any article should, of course, always be in the headline because that's that's titling your structure.
Michael T Ganschow Green: How are you going to set up your navigation for the website and this actually the navigation actually ties back into site laughing I put a couple of videos up in the.
Michael T Ganschow Green: In the.
Michael T Ganschow Green: Class announcements that have some really good stuff on site mapping and research and things like that so feel free to go check those out.
Michael T Ganschow Green: But site mapping really comes in, when you're designing your navigation, because with that site map you've got the tree of files that you've set up.
Michael T Ganschow Green: That will show you exactly how your site in a reacts and you can build your navigation off of that so that's another good one to have.
Michael T Ganschow Green: The you're after the title in the navigation, then you figure out okay well in each piece what's, the most important and you use like sub heads and drop quotes.
Michael T Ganschow Green: For those mostly so sub heads are smaller headlines that are within the body copy that essentially.
Michael T Ganschow Green: divide up sections and paragraphs and drop quotes or where you pull a line out of it and stick it somewhere else in your design.
Michael T Ganschow Green: You see it a lot in editorial content magazines newspapers things like that over kind of on one side of the other have a set of quotes around it or or the split the paragraphs apart and they'll drop the drop quote in the middle.
Michael T Ganschow Green: And those are great ways to highlight ideas as well.
Michael T Ganschow Green: Now, one of the things that students do a lot with these projects is they go type crazy they'll build a website that has like five fonts on it and you really shouldn't you really should start off with one font one typeface get one thought and then expand out.
Michael T Ganschow Green: Establishing hierarchy with sizing and wait either make the font boulder that sticking it up and darken it up or make it lighter thin it out and enlightened its color so play around with weight with thickness with.
Michael T Ganschow Green: with different characters with italics sized versions of the characters along with bold and see if you can establish a nice hierarchy just one font.
Michael T Ganschow Green: If you need to if your design requires a more radical change than just building a five or lightning a thought or choosing a narrow version of a thought or a italicizing a thought or something like that, then what you want to do is you want to.
Michael T Ganschow Green: Take is you want to select the font that complements it well, they they mentioned a couple of good examples in the video and we'll get another.
Michael T Ganschow Green: good example here as the as this whole thing goes on, so i've got a couple of good rules of thumb videos coming up so before I hit those do we have type questions type biography questions.
Michael T Ganschow Green: And I thought that kind of hit the basics pretty well as never okay to decrease increased tracking currently to make the word fit or two just to.
Michael T Ganschow Green: I it really depends on what your design needs it is okay to decrease tracking occurring or increased tracking earning and, like the words that slightly.
Michael T Ganschow Green: Once you do it beyond a certain point, it will affect the way it reads So if you may, if you've really tightened up your tracking occurring.
Michael T Ganschow Green: Either ally and really tighten it up won't read it all the line will actually look like a shape to the human eye if just tight enough where they can read it and read really fast, whereas.
Michael T Ganschow Green: If you open up your tracking and turning on another law, it will read really slow, so when you're when you're doing that i'm be conscious of the fact that you are with those tracking and current in your affecting the.
Michael T Ganschow Green: The the Read speed and the load speed of it, you know kind of how it kind of how the the the human, I will read it so as your.
Michael T Ganschow Green: As you tighten it up it's going to speed up how it reads to people and, as you loosen it up it's going to.
Michael T Ganschow Green: Slow it down so usually those are used, if you want to change the pace of somebody content uptake like you'll see a lot of editorial content.
Michael T Ganschow Green: In newspapers newsletters things like that they'll often have like either the top paragraph of the first line or two of the paragraph, will sometimes be really, really widely tracked.
Michael T Ganschow Green: Or, really, really wide the current or both to kind of slowly introduce you into the article that's something that you see a lot so So the answer to your question is it depends on what your design needs if you're trying to.
Michael T Ganschow Green: make something fit I would not use too much of it or or or crunch it too small, if something has to fit obviously well it kind of stuck but.
Michael T Ganschow Green: If you're just doing it for aesthetics, you have to be really careful that you don't affect how the content is perceived, so I would recommend doing it a little bit to make it work, but if it's going to if it's going to.
Michael T Ganschow Green: it's going to.
Michael T Ganschow Green: Impact how the contents perceived.
Michael T Ganschow Green: I probably wouldn't go too far with it so hopefully that answers your question Kathy questions so do we have other questions.
cool.
So.
Michael T Ganschow Green: To put up another video.
Share screen.
Michael T Ganschow Green: share all right so.
Michael T Ganschow Green: I also have a good one on got a couple of good ones actually and type of graphic rules of thumb.
Michael T Ganschow Green: This next video i'm going to play it goes by a little quick.
Michael T Ganschow Green: So i'm going to post, the link in the chat and, if you want me to pause or stop or review any part, please feel free and, if you want to review it later as well and kind of break it and pause and stop it please feel free this one's.
Michael T Ganschow Green: This one's going at a million miles snap but it's got some really good rules of thumb and then after that we'll Have a nice kind of this one's a little more slower and a bit and a bit of a good little more slower.
Michael T Ganschow Green: At the evening and my language has been a little slower and it takes time to kind of explain itself a little better so both of these kind of complement each other pretty well here so.
Michael T Ganschow Green: we'll start off Mr quickie if you work in a.
Michael T Ganschow Green: monday.com it's a platform to manage any team and any work.
Michael T Ganschow Green: This one goes by crazy fast.
Michael T Ganschow Green: But it's really, really good about spacing and line and.
Michael T Ganschow Green: And being careful about.
Michael T Ganschow Green: How you set your type up and a great little bit at the beginning about hierarchy and you're using bowls and and.
Michael T Ganschow Green: Smaller type, so I put the link in the chat because it's it's I wish it was like a bath twice as long as it is so they could like lead each idea kind of marinate but because it's whizzing by.
Michael T Ganschow Green: So feel free to grab it and watching and posited each of the parts because it's got a lot of really interesting stuff to tell that's actually one of my favorite ones it's just really fast and it's great about talking about rules now.
Michael T Ganschow Green: A lot of places talk about aligning along the Left edge like it's some kind of.
Michael T Ganschow Green: Like it's some kind of Rule you must follow, whereas I tend to be much more of an aligned to an edge, rather than the Left edge guy So if you think your composition will be aligned better along the right edge do it.
Michael T Ganschow Green: and see how it works, because the the.
Michael T Ganschow Green: You won't know whether it's good or not really until you see it so i'm always recommending exploring I tend to recommend staying away from Center aligned body copy.
Michael T Ganschow Green: You can get away with it matters it adds a nice little difference, so that you can you can make your headers pop out a little bit more, but but centerline body copy gets a little too kind of.
Michael T Ganschow Green: A flyer he kind of you know garage sale announcements and it's more difficult to read and putting your type to either the light left or the right edge now.
Michael T Ganschow Green: If you have if you must maximize how easy the type is to read and type biography the technical term, for that is legibility, you must.
Michael T Ganschow Green: maximize the legibility of it and then obviously you left a line if your audience is Western because we are all trained to read from the left to the right if your audience is not Western figure out which direction they read from a line at that way.
Michael T Ganschow Green: But most Western audiences left to right so keep it going from the end make sure that left edge is nice and hard and also, if you noticed in their examples.
Michael T Ganschow Green: Aligning it to an edge creates kind of this invisible line where everything lines up so you can use that very powerfully in your design aligning.
Michael T Ganschow Green: shapes and other things along that same line to create almost like a barrier or a wall or a nice little piece of visual interest there, that is.
Michael T Ganschow Green: That is that is a really it's a very powerful design effect that not a lot of people really use enough, in my opinion, you can really.
Michael T Ganschow Green: You can really empower your design by using alignments you'll see some designs to do really good job of separating.
Michael T Ganschow Green: informational blocks on their page or in their if they're like an editorial content thing a magazine or something.
Michael T Ganschow Green: we've got several blocks of content on one page you'll see sometimes they will separate.
Michael T Ganschow Green: Their blocks of content one will be laughter line one will be right align maybe they're staggered the next one's left align another one's right align and so on and so forth, all the way down there page that.
Michael T Ganschow Green: So that alignment basically visually separates out those ideas, so please feel free to play with alignment, by the way, the technical term for so so legibility is, can you read the type and typographic so how easy is that type to read for you.
Michael T Ganschow Green: The technical term for do you want to read it is it cool looking is readability and they are sort of in neutral position, sometimes.
Michael T Ganschow Green: The way that I always phrase it as the readability legibility teeter totter that depending on your design, you probably have to err on one side or the other, most times you got to err on the side of legibility, does it.
Michael T Ganschow Green: Can it be read really easily as opposed to does it look cool but and sometimes you'll get you'll get cut loose and you'll be able to make something look cool so you may have to lean more towards readability.
Michael T Ganschow Green: flyers and posters and things like that are great examples of that so any additional type questions be jogged type questions or any other questions for go on to rule of thumb video number two.
Michael T Ganschow Green: And yes, I think I saw that rick roll a little too many times so i'm a little a little shaken by it Isabel that's that's that's.
Michael T Ganschow Green: going to rattle me all evening alright so let's see let's go to our next video and then we'll discuss some typographic rules of thumb on the web and then we'll jump into phone just for fun.
Michael T Ganschow Green: Alright, so let's share the screen mix your computer sound is out there is that cool share and we'll get out in the sad bye bye dad will go down here and we will.
Michael T Ganschow Green: Six type biography golden rules create a professional logo that best reflects your brand.
Michael T Ganschow Green: just go to not this one's really good as well in today's quick fire tutorial video i've got some golden rules for you to remember and also to apply to your graphic designs.
Michael T Ganschow Green: Through based around typography sizing and layout and also there is a quiz at the very end, so you can test your knowledge on today's video.
The first golden rule is a really, really crucial when regarding main body text or print and that is that typography should be between 10 and 12 points in size.
but also for the Web 15 to 25 pixels is the ideal size, the general rule for print is never to go below nine points, however, I personally have made business cards that have been a small seven points.
Here really does depend on your design and of course testing the print afterwards, to see if it's legible.
But yeah for main body text some say a magazine 10 to 12 points is the ideal size.
Now, moving on to line spacing, which is also known as a letting, this is the space between each baseline IE the invisible line detect sits on.
The suggested that this space should be from 120 245% of the text size.
So as a quick example, if you have text that is 10 points in size, the letting should be between 12 and 14.5 points.
Now, if your line space in is too cramped than the text is not only going to look undesirable for the viewer might not even be able to read it.
Something else that can determine if your body text is legible or not is a tracking that you use.
Michael T Ganschow Green: To make sure to take a step back from your design and see if the tracking on your text is too small and us the lettering is tightly packed together, who so you might have used too much tracking and increased it too much, which also isn't a good look for your text.
know another figure or number that you do need to keep in mind for a general kind of rule is for how many characters are on a line of text and the number given is 45 to 90 characters which does include spacing as well.
But again, you might have a magazine layout with like three columns on one page and so obviously this rule is not going to apply here.
But just keep in mind the 45 to 90 characters number as a kind of general rule.
Now here's a handy rule for you to keep in mind for magazines and also website design, which is web based editorial designs.
The primary heading on your design is advised that being 180 to 200% the size of the main body text and then any kind of secondary headings can be set out hundred and 30 250% of the main body text.
Just remember guys there's always going to be exceptions to every single rule out there, but these are just handy golden rules to keep in mind.
Michael T Ganschow Green: So when writing out huge dreams of main body text, sometimes it is tempting to allow a word to cross over to the next line split in half, with a dash or hyphen.
Now, in the world of editorial design, this is a big, no, no, and it shouldn't be part of your workflow.
It looks untidy and just unprofessional in general, and it breaks up the reading experience for the viewer and a kind of disjointed manner.
Another golden rule that is somewhat of a an aesthetic approach is that there are very few situations where you're going to want to align the text centrally speaking.
when in doubt just align your text to the left hand side for an efficient and a tidy appearance.
Now, the main golden rule that you do need to take away from today's video is that you absolutely need to test print everything before printing out huge quantities of copies and then as before you send the final design is to our clients.
Many, many designers out of there, I really wish they would attest printed their designs in some situations.
Michael T Ganschow Green: Now, according to today's video is which one of these so that's another good one those rules of thumb are really good if you are not quite sure what you want to do with your type so if you're not sure how big your hand line should be you know okay double the size of your.
Michael T Ganschow Green: of your body copy, maybe even quadruple it and see how that looks you know if you're not sure.
Michael T Ganschow Green: What you want to do, or what direction it's great to remember rules like that, because they really, really help you out.
Michael T Ganschow Green: Now, one of the things you're going to run into those of you who have a lot of print experience is that type on the web is a little less controllable than type on.
Michael T Ganschow Green: A printed surface and that is because of these little programs called web browsers, if you remember the.
Michael T Ganschow Green: lecture last week web browsers go in, they interpret your files well that's great but, like all interpreters web browsers bring in their own agendas and so no to web browsers display every web page the exact same.
Michael T Ganschow Green: And so, you may have type that looks odd one browser grade on another or you may have you can't control.
Michael T Ganschow Green: We as web designers have.
Michael T Ganschow Green: We can't really control where we're our work is displayed, so what happens is that.
Michael T Ganschow Green: You know your website might look good at one resolution and look bad at another it might look odd on a specific browser on a specific device and a specific resolution.
Michael T Ganschow Green: And you can't really fully account for every variable so type on the web is a lot looser than print type you have pretty good size controls of it.
Michael T Ganschow Green: You have decent line height control.
Michael T Ganschow Green: Good weight control.
Michael T Ganschow Green: versions italics bolts things like that'd be good, you can you can set that up pretty well all caps things like that, but some of the finer point control like tracking and counting and things like that.
Michael T Ganschow Green: There are ways, you can do it, but sometimes browsers don't recognize them because browsers can pick and choose what bit of.
Michael T Ganschow Green: What what bits of the code they read or even acknowledge and some browsers don't recognize pieces of a to kind of have to.
Michael T Ganschow Green: If you're not really in touch with your type, you have to kind of exhale a little bit and loosen up because the Web will not let you type control your type.
Michael T Ganschow Green: And somebody says what if I What if I did it as a jpeg or just stuck a picture right in the middle there wow that's.
Michael T Ganschow Green: Fine, I guess, but the problem is that a search engine can't read it, so that content basically doesn't exist to the Internet, so you want to keep it as much as live as possible um.
Michael T Ganschow Green: So the rules of typography I mean other than the fact that they're much more loosely enforced just because of the nature of.
Michael T Ganschow Green: You know where we're putting it we don't have control over the size of the.
Michael T Ganschow Green: Of what's going to display our website, you know it's not like an eight and a half by 11 or an A4 or you know, in a six or 11 by 17 or something like that or illegal, you know you're not you don't have absolute tight paper control like you do in the print world, so you have to.
Michael T Ganschow Green: You have to design kind of with that looseness in mind a little bit of good margins to move things around are always helpful.
Michael T Ganschow Green: spacing for type to expand we actually very in very, very little amounts on the web, do we use height really only for things like top bars or.
Michael T Ganschow Green: navigation buttons and things like that and most main content areas we're not using any height at all on the web, we let our type push open the areas that it fills out and basically fill up an area.
Michael T Ganschow Green: So so you're you're you're using very minimal heights to control everything and letting your content kind of.
Michael T Ganschow Green: Demand how tall things should be and that really helps to with this kind of looser typographic environment, so I know that's already some of your breaking out in hives about what do you mean it controls it well.
Michael T Ganschow Green: The trouble is a web browsers is they don't all interpret everything exactly the same, and some of them choose not to interpret.
Michael T Ganschow Green: The code at all, but you know that's there's a reason why I am the way I am and it's because i've been doing this for 25 years and I completely carved all of the human out of me and have just left a bundle of insanity don't worry it'll happen to you too.
Michael T Ganschow Green: So.
Michael T Ganschow Green: typographic questions demography is is really cool it's it's the way to.
Michael T Ganschow Green: communicate with people's conscious minds telepathy you know we've all been trained as a society that each of these shapes has a meaning.
Michael T Ganschow Green: And when put together they form words that have other meetings and so on and so forth, so you're you're taking ideas and you're planting them in people's conscious minds and the power of words and you can use a great deal of.
Michael T Ganschow Green: Of these, these these words, you can use a great deal of design in these words to give them more or less meaning, which is you know.
Michael T Ganschow Green: The core principle of typewriter free is all about hierarchies you know all about.
Michael T Ganschow Green: Making sure people know what's important in putting that in their heads, so this is like this is the, this is the blunt force version of telepathy that we that we have is you know you're putting these ideas out so do we have type fiver fi questions.
Michael T Ganschow Green: interrupted myself on that enough work we have questions when blah blah blah start talking.
Michael T Ganschow Green: that's the I used to have like an hour and a half lecture on this thing and those videos over in like 30 minutes or something so that's cool i'm so sorry for type biography questions does anyone have any general questions anything relating to the class anything any project questions.
Michael T Ganschow Green: Any general lecture questions anything i've gone over so far.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: So that is, that concludes type biography don't tell Dan that I taught is type biography class in 30 minutes, I actually did type biography classes are really, really, really good one.
Michael T Ganschow Green: And I highly recommend you take it, because the skills, you will learn in there, the the page layout the informational communication the.
Michael T Ganschow Green: The placement skills and all of that all of the skills you learned in that class.
Michael T Ganschow Green: Will perfectly one to one match up the Web design a bunch of you i've I use this tripe phrase and i've emailed a bunch of you about it, I think I did like I don't know five or six people's Hello threads about it.
Michael T Ganschow Green: Basically, where I said that web design is basically page layout with the interactivity overlaid over the top Okay, and so what everything that.
Michael T Ganschow Green: anything you can learn to better your page layout skills will better your web design skills, because the principles and.
Michael T Ganschow Green: and
Michael T Ganschow Green: Knowledge of typography and page layout carry just straight across okay like straight across.
Michael T Ganschow Green: So that's why I kicked it off with page layout last class and why we're into typographic now, before we get into the cool mind controlling bits of color next class where we're going to you know type out graffiti.
Michael T Ganschow Green: Is telepathy right you're planting you're talking to their conscious mind you're talking to them as a person right.
Michael T Ganschow Green: Whereas with color you get to insert yourself between the conscious mind and their unconscious mind and talk to their lizard brain they won't even know you're talking to the color.
Michael T Ganschow Green: Because color is a great emotional lever so type is an intellectual ever decide what's important set your hierarchies go for it colors the emotional level we're gonna we're gonna yank around we're going to anchor on people by the lizard brain next class will shiny.
Michael T Ganschow Green: Or you know oh it's it's orange do i'm kind of hungry Why am I feeling kind of hungry.
Michael T Ganschow Green: Well that's because orange promo it's hunger, why a restaurant logos orange orange makes you hungry, to look at that kind of thing, so you know we're gonna have a lot of fun with color because colors terrifying.
Michael T Ganschow Green: So, before I leave with both feet into photoshop and start giving you a guided tour slash review slash introduction For those of you that have not had a photoshop class were one of our basic intro to software classes, do we have any questions like pausing for questions.
Michael T Ganschow Green: Alright cool okey dokey.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's jump into photoshop alright.
Michael T Ganschow Green: The second if anybody's got any questions in the leap.
Michael T Ganschow Green: headfirst into the shallow into photoshop here.
Michael T Ganschow Green: Alright, so photoshop.
Michael T Ganschow Green: And why we're using i'm.
Michael T Ganschow Green: i'm not so incompetent as to suggest that you should at all at any point in your lives, be doing page layout in photoshop.
Michael T Ganschow Green: A know there are web designers who do.
Michael T Ganschow Green: Do lay things out in photoshop their entire website out in photoshop and then basically straight export the graphics out of it.
Michael T Ganschow Green: I would not suggest to do this, but I would suggest you can build large parts of your website, and you can build bits and pieces of your layout.
Michael T Ganschow Green: For exporting in photoshop so we're going to do an entire layout because now i'm a masochist and you all are.
Michael T Ganschow Green: Almost a little bit of a status so i'm going to drag you along and my masochism and we're actually gonna lay a website out in photoshop so I can show you the advantages of using it, at least for a lot of graphics.
Michael T Ganschow Green: For the proper layout I would recommend using something that's a little more.
Michael T Ganschow Green: oriented around layouts maybe an indesign or an illustrator, but you can use photoshop to set these things up.
Michael T Ganschow Green: yeah.
Michael T Ganschow Green: i'll get the but what about xd thing and we are in the process of converting the class over the xd I think.
Michael T Ganschow Green: sd just has one big problem in that it does not directly interface with.
Michael T Ganschow Green: Your website design the way photoshop does photoshop you can basically make edits to your design in photoshop and that will change the graphics that are.
Michael T Ganschow Green: That you've set up as your images and can even depending on how you set your folders up and everything.
Michael T Ganschow Green: changed the images on the website itself photoshop can really directly interface with your website, in a way that none of the other layout software's or even xd really can xd is a great tool it's fantastic it's a.
Michael T Ganschow Green: it's called adobe experience designer for those who don't know it and it's a web prototyping tool.
Michael T Ganschow Green: kind of in the process of switching the class over to it but i've not we didn't want kind of really able to get to it this semester, so the next 175, I suspect, I will but.
Michael T Ganschow Green: The xd is built around prototyping websites, the problem with it, and the reason why I still why i've been favoring photoshop for a while, in this class is just that you have to build your entire website twice.
Michael T Ganschow Green: As these great you can build you can prototype out how the websites can look at all sorts of different browsers you can prototype out how.
Michael T Ganschow Green: How it's going to act and how it's going to drop Downs are gonna look and behave and all of that, but the problem is you can't take any of that and.
Michael T Ganschow Green: put it on really in your website, you have to do it, you have to build it twice, so I figure let's build all the graphics once shall we and then, if we're gonna have to build.
Michael T Ganschow Green: anything to work let's build it as a browser based prototype using html and CSS oh oh that reminds me hang on one second I discovered today and a video that i'm going to include in a couple of weeks when we get to it, but for those of you who would like a.
Michael T Ganschow Green: Those of you who would like a nice little preview about what we're going to go through what we're going to go over in a couple of weeks, once we get done with the photoshop phase of this class, this is.
Michael T Ganschow Green: This right here is a two hour.
Michael T Ganschow Green: See where'd you guys go where'd you guys go we're up there, there you go you go.
Michael T Ganschow Green: Close there you are haha you were hidden behind a find another thing okay so.
Michael T Ganschow Green: This video right here it's a two hour and 20 minute or so.
Michael T Ganschow Green: tutorial on all of the friend and development code we're going to we're not all but it's a good intro to all of the front end development code we're going to play within a couple of weeks i'm going to send this one out.
Michael T Ganschow Green: In one of my announcements in a couple of weeks is like a good starter for html and CSS so that video right there is a good one for that, speaking of building out website so.
Michael T Ganschow Green: So back to photoshop and why I use it um I i'm lazy.
Michael T Ganschow Green: So I like to if i'm going to do things I like to do them once so if i'm going to build my graphics i'm going to build my graphic somewhere where I can take those graphics and.
Michael T Ganschow Green: Stick it up on the web technical noise you got to use those are also will work if i'm going to build out functionality.
Michael T Ganschow Green: drop down menus and things like that i'm going to build them out in a prototype so that I can take that functionality and I can extend it across.
Michael T Ganschow Green: A website when a client says go I don't want to build things twice and that's My big bugaboo with xd is that it makes you build stuff twice, whereas we're gonna learn how to build things once, even though doing page layout and photoshop is a bit of an exercise, let me tell you so.
Michael T Ganschow Green: Now, before we do photoshop before we actually get into photoshop I am going to set up a site root folder on my.
Michael T Ganschow Green: desktop now the site root folder might seem odd that we're doing this exercise, but I want to set up a root folder both a to hit live file management lecture that I.
Michael T Ganschow Green: That I gave on Tuesday week ago week week before today.
Michael T Ganschow Green: And I want to get you guys going in the habit of building these site roots because.
Michael T Ganschow Green: The very important for organizing your files, making sure, things are in the right place and making sure that you that you don't lose anything miss link anything have anything break on you, in other words, I want.
Michael T Ganschow Green: The I want to be the code and how it works to drive you insane rather than an error in putting a file in the wrong place to drive you insane okay.
Michael T Ganschow Green: So you're going to go insane web design drives everybody works in a crazy, but I want you to go crazy for the right reasons so before we get into photoshop here, let me.
Michael T Ganschow Green: there's photoshop, by the way, hi photoshop we're going to build a folder first.
Michael T Ganschow Green: Now I already have a nice mtg RC 175 folder here on my desktop so i'm going to take this folder and i'm going to populate it with.
Michael T Ganschow Green: All of the sub folders that I will need to turn this into a bouncing baby website.
Michael T Ganschow Green: And this will also review nicely my file setup which i'm requiring for all of my web projects, so when you start building real websites starting the project to.
Michael T Ganschow Green: This is the way i'm going to want you to have your folders set up the reason why make you do this is to keep you guys.
Michael T Ganschow Green: keep you from going insane the wrong way oh yeah I should probably share the screen share tonight.
Michael T Ganschow Green: Thank you Cassandra yes, yes, that would help wouldn't it let's share the screen there we go my screen is shared so on my desktop here there's a, by the way we wave to photoshop in the way by high photoshop on my desktop here, I have a folder called GR C 175.
Michael T Ganschow Green: And in this folder i'm going to populate it with with my various folders that I will need in order to keep my website organized okay.
Michael T Ganschow Green: So the very first folder i'm going to put in here is a folder called a CBS s folder and this CSS folder is a folder strictly for containing our cascading style sheets.
Michael T Ganschow Green: text files these cascading style sheets files contained browser instructions that control how a.
Michael T Ganschow Green: How a web page appears in a browser html because it was written for research papers is very basic on the appearance controls, you get a handful of type sizes left Center right alignment.
Michael T Ganschow Green: Some basic colors that kind of thing and CSS brings in pretty much everything you would associate with modern page layout into the Web So these are our controls for our appearance and they will all live in this folder here.
Michael T Ganschow Green: The next folder i'm going to put in isn't images folder now.
Michael T Ganschow Green: I am already lying to you images your images folder is not only going to contain your images guys it's going to contain almost a gang of gun i'm turning into damn.
Michael T Ganschow Green: It the the images folder is not only going to contain your imagery your pictures your drawings your logos your your anything visual that's going to show on your website it's also going to show or sounds are going to have anything that you want.
Michael T Ganschow Green: people to be able to download so, for example on the class website all of the pdfs that you can download from the class website they live in the websites images folder Okay, they live in this images folder in a separate folder in there called pdfs that everything goes into now.
Michael T Ganschow Green: Why do you call it assets mana colored images Michael if it's got its got.
Michael T Ganschow Green: things other than images in there when I used to call it assets, I used to call it a because it had all of the assets you're going to use for your design anything that's visually going to show anything that you're going to download things like that, but.
Michael T Ganschow Green: Every bloody web tutorial and a bunch of auto generating software's as well as a bunch of.
Michael T Ganschow Green: Content management systems have all decided that this folder has to be named images to find on a bit images, so you don't get confused so when you when you step into wordpress.
Michael T Ganschow Green: or July, or some advanced content management system and a few years, and you see in images folder you'll know what it's for so images, it is.
Michael T Ganschow Green: But it doesn't just contain images, it also contains files that you want to download i'm pretty much anything that's not an html CSS or behavioral script that you want to affect the appearance of the website.
Michael T Ganschow Green: The third folder is called script and the scripts folder contains all of our behavioral scripts we're really going to use behavioral scripts until later on in the class probably after April fool's day.
Michael T Ganschow Green: But I behavioral scripts control things like animations on your website that control scrolling behaviors they control, a lot of the.
Michael T Ganschow Green: Basically intermediate and advanced interactivity that you're going to run into on your website so you want to have a folder for those little guys, they too much like the CSS files are a.
Michael T Ganschow Green: are a text file full of instructions just a regular old txt file that they're called dot J s files for javascript and we're going to be using javascript a little brother called jquery in this class, which is a kind of an easy to use sort of.
Michael T Ganschow Green: it's sort of javascript for designers which is fantastic, let me tell you.
Michael T Ganschow Green: And lastly, we have a folder called working graphics working graphics is an organizational folder it is generally not intended to go up on the server now.
Michael T Ganschow Green: Again i'm lying to you because for this semester you guys are going to put your work and graphics up on the server because that.
Michael T Ganschow Green: That working graphics folder is going to contain all of your preliminary work, so I can see.
Michael T Ganschow Green: Your preliminary work process but usually we're working graphics contains is any and all of the original files, the word docs you write your content in.
Michael T Ganschow Green: The photoshop or indesign or illustrator files you're laying things out in whatever you're building your graphics in either illustrator photoshop.
Michael T Ganschow Green: All the originals for that live in this work and graphics folder, and the reason why we keep these.
Michael T Ganschow Green: Is that if we come back to the website to edit it or to add things or to change things.
Michael T Ganschow Green: Later on, we have everything that was used to build it right there in one spot it's a strictly an organizational tool do not put your working graphics folder online unless specifically to buy your instructor because.
Michael T Ganschow Green: All it will do is cargo space and there's nothing linked into it so it's basically a waste of time in space now a perennial.
Michael T Ganschow Green: question that I get here is okay we've got a CSS folder for CSS is we've got an images folder frame it just.
Michael T Ganschow Green: A script for our scripts in a work and graphics folder for our original files okay So where are we supposed to put our html files, the actual proper pages that make up our website why don't we have an html folder well here's why web browsers are programmed to.
Michael T Ganschow Green: go into the root folder of a website, the site root of a website on a server and look for a file labeled index, and whatever file is labeled index will be displayed first.
Michael T Ganschow Green: If there is no file label index, it will throw an error, so, for example, if we go to the class website Hello class website.
Michael T Ganschow Green: And I go to let's say student work and I go and click on somebody's student file let's say my own, it will throw what's called a forbidden error here and a forbidden air basically means hey.
Michael T Ganschow Green: You can't go in, there you don't have permission to access it, and the reason why you don't approach and access, it is because it's gone in to find an index file and it has found none okay.
Michael T Ganschow Green: So anytime you see one of these that, by and large, means that there is no indesign indesign index folder or folder index file for a browser to see okay so, then what will happen is then your your.
Michael T Ganschow Green: Your website won't display so we don't want to do a separate html folder, because if we do, then you put your index in there, and you put all this online.
Michael T Ganschow Green: In nothing's going to work.
Michael T Ganschow Green: So we don't want an html folder.
Michael T Ganschow Green: It hey don't select them all, is there a time and place for such things, yes I moved look at this like leaning moved desktops fantastic where Am I back to hear okay so were you.
Michael T Ganschow Green: Did I leave you on a desk on another desktop I might have left you on another desktop a second we'll work on that in a second okay so you're still sharing, at least, and I think you can see my desktop so it's good.
Michael T Ganschow Green: um, so there is a time and place for html folders and that has to be a truly enormous website, occasionally, you will find them separated into multiple folders but the index will always remain loose leaf with these folders here.
Michael T Ganschow Green: So, for example, back when I taught you how to see to 75 last semester we had a class folder setup and then I had basically building different html as the various lessons that I taught, and so I have pretty much a pretty standard.
Michael T Ganschow Green: One of these folders here, except for a classes folder which I put all of the class recordings from that class time into so.
Michael T Ganschow Green: Otherwise, you can see the loose leaf html is all over the place, and how they work, and if, for example, I Double Click on this index here booth it'll pop it open maybe yep there it is, and there is my terrifying.
Michael T Ganschow Green: utterly terrifying.
Michael T Ganschow Green: JRC.
Michael T Ganschow Green: To 75 CSS and font injection DEMO alright so.
Michael T Ganschow Green: The first index that pops up so.
Michael T Ganschow Green: Do we have questions on.
Michael T Ganschow Green: These guys, let me try and get you guys all back on the right page there we go, so do we have questions on the file management.
See, we got here.
Michael T Ganschow Green: Okay cool.
Michael T Ganschow Green: Alright, then what we're gonna do.
Michael T Ganschow Green: Is we're going to use the power of photoshop and we're going to make us a nice little web page here.
Michael T Ganschow Green: So we're going to save it in a working graphics folder here, I think, and i'm going to start showing you around photoshop and we're going to get a terrible terrible web design setup I mean just awful you guys, I mean just oh God now people ask me why I.
Michael T Ganschow Green: Why design them so badly for the class let's say you don't steal it so you don't steal it, because your website looks awful I know you stole my terrible class one, so we use all sorts of hideous colors, as you can see, in any of these.
Michael T Ganschow Green: In any of these.
Michael T Ganschow Green: demos, we use hideous hideous colors both to prevent theft and to see where our stuff is so there's I mean there's just I mean it's a duck man no stop don't worry you'll be seeing a lot of the deck he is very useful for terrible terrible terrible things so alright so.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: Here we go, let me put the public chat up here let's share the screen share it.
Michael T Ganschow Green: I said, share the screen and you share it so here here's the here's some of the I realized, I was not sharing for those so here was some of the ones I was looking at with these terrible.
Michael T Ganschow Green: Terrible colors to show off bits and pieces the website see where things are and and how they react and relate so i'm using lots of bad colors in fact i'm going to be sourcing colors from you.
Michael T Ganschow Green: For most of the class yes i'm going to be hitting up chat for terrible color suggestions, possibly even you can even if you want to you want to call out a color to I can do that as well, so it's gonna get ugly I promise.
Michael T Ganschow Green: Alright, so many of the chat window, so I have it up and running and could talk to you people while we're doing this okay so let's let's talk a little photoshop here we'll talk some Turkey yours hi photoshop, so this is photoshop when he first crack it open.
Michael T Ganschow Green: It basically shows off likes and tutorials on how to use it, I provided a link in the announcement to photoshop tutorial area so that you can go in and start.
Michael T Ganschow Green: learning how to use things there's even tutorials that go on in the APP as well, which we will see pop up here and there, let's say finally in a frustration disabled i'm not sure we may not see them, we may see them I can't remember if i've turned them off or not.
Michael T Ganschow Green: Alright, so this is photoshop.
Michael T Ganschow Green: photoshop is basically adobe premiere photo editing and image manipulation software primarily.
Michael T Ganschow Green: pixel based image manipulation software.
Michael T Ganschow Green: it's vector based the tippy top is illustrator, of course, so this is basically where you take photographs and you make them lie.
Michael T Ganschow Green: You know photos worth 1000 words yeah well when you run it through photoshop it's worth about 10 so you can you can you can make photos lie in photoshop we have a whole the many classes on making photos lie.
Michael T Ganschow Green: In here so there's all sorts of fun involved in that alright, so what i'm going to do is, I am going to make a new files, the first thing i'm going to do so don't lie to you guys Hello hi chrome are you, thank you, yes i'm going to go in.
Michael T Ganschow Green: And i'm going to make one exactly to the one that set of my dimensions in here, so I think i'll do the 1920 by 1080 pixels computer layout now we're about to step into a minefield right here, and that is where should you start your design.
Michael T Ganschow Green: On the web, where should you start them.
Michael T Ganschow Green: Should you start with a computer design.
Michael T Ganschow Green: And then shrink and simplify the design down through tablet down to mobile or should you start with a mobile design, which is basically just a giant column.
Michael T Ganschow Green: And then add detail as the browser expands and there's a lot of back and forth on this Okay, and where it's best to start.
Michael T Ganschow Green: My two cents, is that it doesn't really matter it's up to you, as long as you get both places, ie having a website that looks good on a computer.
Michael T Ganschow Green: And looks good on a phone it doesn't matter where you start i'm an old fart so I tend to start with computers, but the mobile first people will tell you well 55% of all web interactivity is taking place on.
Michael T Ganschow Green: a mobile phone, so we should start there and that's a pretty damn compelling case, let me tell you what, let me tell you, because.
Michael T Ganschow Green: If the if a growing majority of users are going to interact with it on the mobile side.
Michael T Ganschow Green: Then, maybe it is a better place to start there I prefer to start on the computer take my detail and simplify but that's just because i've been doing websites for 25 years, and when I started, we started with the computer.
Michael T Ganschow Green: If you guys would like to start with your mobile design and then and then build out with your computer hey have to your computer hey i've got no problem with that okay that's there's nothing wrong with that.
Michael T Ganschow Green: She can see great arguments all over the Internet on which one is better.
Michael T Ganschow Green: So i'm just starting with a computer because i'm old school, but be aware, it is a minefield.
Michael T Ganschow Green: When you when you mentioned this online so just just harden up a little bit when you when you when you put it out there alright so i'm going to do a 1920 pixel by 1080 pixel horizontal rectangle for my photoshop file, so we can start putting around in photoshop official.
Michael T Ganschow Green: All right, let's but.
Michael T Ganschow Green: So, in order to make a new file in photoshop I come over here, and you go to file new.
Michael T Ganschow Green: Which y'all should know it's pretty standard software thing or if you're on a PC control and or on a MAC command in.
Michael T Ganschow Green: And that gets you this new document screen here, where you can choose all sorts of things.
Michael T Ganschow Green: And the thing defaults to inches, I believe, although not 100% sure on that i've used my photoshop so much that I that I don't know i've forgotten if I.
Michael T Ganschow Green: What defaults have turned on and off a turn, most of them back on as many as I can remember for Class so that should be a stock issue version of photoshop as possible.
Michael T Ganschow Green: So in our unit of measurement here we can build our design and pixels inches centimeters millimeters points and pikas.
Michael T Ganschow Green: A couple of come back across these, by the way, when we get into cascading style sheets, this is pretty much similar to what you can do there plus it adds a couple of other pieces to it that you can play with as well, which we'll talk about get there, so.
Michael T Ganschow Green: My case i'm gonna drop down here i'm going to select pixels.
Michael T Ganschow Green: And i'm going to build my design.
Michael T Ganschow Green: Is a 1920 pixel.
Michael T Ganschow Green: By 20 1920 pixels wide but 1080 pixels tall horizontal rectangle think i'm gonna set my orientation so it's horizontal right here so i'm over here.
Michael T Ganschow Green: on the right side typing in my dimensions, I set my orientation by clicking on the little horizontal orientation next to it there.
Michael T Ganschow Green: Now I can send my resolution now, since this is not for print I don't need to set it as high as 300 pixels per inch.
Michael T Ganschow Green: If you're going to print, the thing on, particularly on an offset press yeah you absolutely wanted to 300 pixels sometimes more sometimes closer to 350 but we're not going to worry about that okay.
Michael T Ganschow Green: What we're going to do is we are going to make ours let's see what's the math here 288 pixels in inch Okay, why is a 288, why not some of the other monitor resolutions you've heard like 72 dpi or 96 dpi or.
Michael T Ganschow Green: 144 dpi why 288 because 288 dpi is a 4k monitor Okay, so when displaying things on a 4k monitor.
Michael T Ganschow Green: boom that's the resolution you work in the lowest that you really want to go if you want it to display properly on a 4k monitors 144 that displays that it sharpest on a retina monitor to came on it.
Michael T Ganschow Green: But, since this is a 4k monitor we're going to go to 88 yes that's 72 dpi for those that have had other web tutorial 72 dpi times for yes, so our blows up to me a 4k monitor your stuff will still look crisp and clear future proofing.
Michael T Ganschow Green: There we go so 288 there you go now.
Michael T Ganschow Green: Everything else I pretty much leave stock I make sure my color mode is set to.
Michael T Ganschow Green: rgb color and we'll discuss this when we get into color rgb vs cm why K, but suffice it to say that rgb is the color model.
Michael T Ganschow Green: That monitors and projectors us, so this is the model you're going to use, because everything you're going to display here is either going to pop up on a monitor or a projector of some sort you know whether that monitor is.
Michael T Ganschow Green: Behind the tumbler in your dryer is the laundry goes around on the front of your refrigerator and the bottom of your shoe on the dashboard of your car or is a teeny tiny monitor on your wrist.
Michael T Ganschow Green: That you're going to try desperately to make a website that works properly on well then.
Michael T Ganschow Green: it's it's still a monitor so it's still using rgb it's still all of that it's still shining light through things, and therefore it needs to be rgb so i'll leave that for rgb.
Michael T Ganschow Green: I sent my backgrounds for transparent that way I don't have to deal with accidental white backgrounds in anything that I might want to have transparent, so I leave that set to transparent, I can always add color later.
Michael T Ganschow Green: I don't really worry about the color profile so keep those stock, because when you're working with rgb.
Michael T Ganschow Green: profiling is not as big a deal as you think.
Michael T Ganschow Green: So once I have that all set up I come down to the bottom right of this new document menu, and I click create this leads us this leads us straight into the belly of the beast here.
Michael T Ganschow Green: So this is a more or less stock photoshop here Okay, this is more or less the stock interface that you'll be greeted with if you're working on one monitor now.
Michael T Ganschow Green: I cannot recommend highly enough to every one of you to go and.
Michael T Ganschow Green: As soon as you can get multiple monitors, for your setup yes, I don't care if it's a laptop most laptops.
Michael T Ganschow Green: can drive a couple of monitors you close them up and you use them as a little baby desktop sticking on a on a book Arc.
Michael T Ganschow Green: And plug in your monitors, because the more monitors the merrier the more space, you have to work with and spread out the better, I feel so constrained on my little 15 inch laptop years and demoing the you guys.
Michael T Ganschow Green: But even if I was doing this at work on my workstation which has currently has to 27 inch monitors, because the way zoom works, I can only show you one monitor at time and i'd be still stuck on one monitor so.
Michael T Ganschow Green: If I seemed a little hemmed in here and a little bit claustrophobic and a little nervy when i'm demonstrating this it's because this base like having a graphic software on one monitor is like next to no working space, so my apologies for my contact over the next couple of classes.
Michael T Ganschow Green: it's I can't help myself.
Michael T Ganschow Green: So, before I go any further, and start doing around tour maybe adding in some fun things in photoshop.
Michael T Ganschow Green: Do we have any questions on photoshop or on final organization or on typography or anything like that.
Michael T Ganschow Green: For those of you watching the recorded version this class feel free to hit me up on the forums or on email or on canvas I respond to each pretty evenly so feel free to hit me up if you have questions as well.
alright.
Michael T Ganschow Green: see no cost so it's time to get into photoshop okay so photoshop photoshop and all that it is so this is a stock photoshop menu right here yeah so you've got.
Michael T Ganschow Green: A toolbar over on the side and the toolbar is for placing things on to this area here called our stage Okay, so our up there goes the demos that are longer than I did turn on turn.
Michael T Ganschow Green: In half tutorials back on if you hover over to a long enough, it will sprout a tutorial and show you how to use it, that.
Michael T Ganschow Green: So this is the toolbar the toolbar is for putting things in here on the stage this stage is our actual open file right here okay this stage is is our our web page design okay.
Michael T Ganschow Green: Up top here is the properties bar the properties bar is how you manipulate these tools, basically, you know, change the sizes of brushes change out things select.
Michael T Ganschow Green: modify modify your type things like that the various a look at that i've got the wheel going already i've got the we have graduates it's just by selecting types, to see the the properties menu up top depending on what tool I select has different.
Michael T Ganschow Green: Basically shifts to be a different menu each time and for editing these tools and modifying them so that they can do whatever you want them to do essentially find point control on these tools they're very good stuff.
Michael T Ganschow Green: Just properties menu sandy as well.
Michael T Ganschow Green: over here, we have our palettes and palettes come into columns you have an open column of pallets which photoshop believes on the palettes that you are most commonly going to use so we've got colors swatches gradients patterns, we have a.
Michael T Ganschow Green: properties it's basically duplicates this essentially properties we've got adjustments for adjusting things we have pre saved libraries from our adobe CC accounts.
Michael T Ganschow Green: which will take it probably second to go yet Oh, we can add elements or no, no, no, no okay we're good we're good we're good, thank you for the tutorial yes, I want to create groups appreciate it appreciate it i'm.
Michael T Ganschow Green: Saying look at that oh it's already linking into my linking into my my thing, and I could share my.
Michael T Ganschow Green: No, I don't want to share my library my library is full of horrible tainted things.
Michael T Ganschow Green: And then down here, we have our layers palette for those who have not used graphic software's before for those who are coming in from the developer side.
Michael T Ganschow Green: layers or a concept that is all over every form of graphic software and so essentially i'm you essentially we've got control over the X and the y axis here.
Michael T Ganschow Green: You know the we control the horizontal and we control the vertical layers our inability to control.
Michael T Ganschow Green: Basically, the distance outward to the user So these are controlling the distance from the back of the file to the front so essentially the VAC forward pushing out right out to viewers I.
Michael T Ganschow Green: you're controlling that stack with these layers in photoshop layers become very important because layers are a critical export tool when you go to export your.
Michael T Ganschow Green: Your graphics.
Michael T Ganschow Green: So that is the what photoshop believes, will be the commonly the most commonly used palettes and palettes are kind of a combination of these properties and these tools, there are ways to.
Michael T Ganschow Green: they're more like ways to change how the overall photoshop works to modify how these tools go, but you can also use, you can also use them to modify individual parts of your document the other layers and adjustments menus now.
Michael T Ganschow Green: There are quite a number of other hidden talents that we don't have access to yet which we will shortly, as we go through photoshop and you can access those talents by going to this window drop down menu.
Michael T Ganschow Green: And then going through and pulling the right palettes we're going to talk about.
Michael T Ganschow Green: Some of these palettes as time goes on, we obviously won't have time to get them all, because this is kind of a survey course of photoshop so you'd be getting three or four days of photoshop.
Michael T Ganschow Green: Over the course of the next couple of weeks, but I did put in some good photoshop tutorial videos on my announcement, I will continue to insert those as well as.
Michael T Ganschow Green: Some good links and how to learn photoshop for those that are new to it.
Michael T Ganschow Green: So this is the palettes that are currently hidden now right now we have only one hidden palette that is sort of visible this this second column right here.
Michael T Ganschow Green: Are palettes that are closed and closed palettes basically are just an icon that you can click on to pop open.
Michael T Ganschow Green: So in photoshop we have our history palette open now, this is a palette that basically shows you.
Michael T Ganschow Green: All of your previous safe states on your document, or at least I believe the last 20 unless you edit that in the in the.
Michael T Ganschow Green: In the photoshop properties, so you can in photoshop properties change how many steps it saves.
Michael T Ganschow Green: I believe all the way the Max is like 99 that you can set it for, so this is all of your steps back to the document so you can go.
Michael T Ganschow Green: and select a specific step, instead of, as you have to do with any other software when you're rapidly and doing.
Michael T Ganschow Green: Either command Z on the MAC or control Z on a PC spasmodic Lee until you get back to where you work in photoshop you can actually go find that state, we want to get back to click on it and go as long as it's not however many steps deep you set up the document.
Michael T Ganschow Green: So photoshop questions anyone.
Michael T Ganschow Green: looks like everybody's either too scared or tired to move excellent excellent excellent excellent OK cool so.
Michael T Ganschow Green: let's kick into this thing and start working shelly so the very first thing with photoshop or with a a web design that I like to do.
Michael T Ganschow Green: So i've already been through the thumbnail and even probably some roughing maybe wire framing maybe roughing is I like to measure out my areas on my website, I like to measure out where things are going to be on the website.
Michael T Ganschow Green: So.
Michael T Ganschow Green: To do that in photoshop we use what are called ruler guides now if you've opened a file in photoshop and you do not see these rulers at the top, or the sides, you can go into the view drop down here and about two thirds of the way down there is a.
Michael T Ganschow Green: Little text here that says rulers and you can pop the rulers open or hide the rulers, you can also hide them with a command are or a control are on a PC okay.
Michael T Ganschow Green: um so rule of thumb if you're working on a PC and you find a MAC tutorial and it says command on your computer, that is a control okay also.
Michael T Ganschow Green: If you find a man tutorial and it says option something on a PC that's all something okay keyboard commands are more or less straight across on the software is as long as you remember command control on a PC and all his option on a and option is all on a PC So there you go.
Michael T Ganschow Green: Alright, so get these guys in place we've got a view rulers to make sure they're in place and we can start adding what are called ruler guides to measure out where I want things i'm going to do a few basic ruler guides on this one.
Michael T Ganschow Green: I think i'm going to build a very standard like a commonplace web design, which is i'm going to have a nice big top banner.
Michael T Ganschow Green: And then i'm going to have underneath that a navigation banner and then maybe have the content below divided into a couple of columns.
Michael T Ganschow Green: So a nice kind of common let's you know let's say my thumbnail has revealed to me that my best design is this giant top banner with a nav bar and a bit of text content below it, so I can start setting my design up here, using these ruler guides to to make my whole thing work.
Michael T Ganschow Green: So ruler guides are pretty cool actually you know and they work, by the way these guys these ruler guides work, the same.
Michael T Ganschow Green: In about any adobe graphic software, so what i'm going to show you here with ruler guides transfers across to illustrator and indesign as well okay.
Michael T Ganschow Green: So if you come up and you click in a ruler and drag, you will see that you get a line that is on the direction of the ruler so.
Michael T Ganschow Green: If I would like a horizontal line I click on the horizontal ruler, and I can drag that horizontal line anywhere in my document and deposit it at need okay.
Michael T Ganschow Green: If I would like a vertical line I click on the vertical ruler, and I drag all the way across until I hit the point where I would like to put my vertical rule that.
Michael T Ganschow Green: So very straightforward, so what I like to do before I start anything else in my file actually take it back.
Michael T Ganschow Green: There was one additional thing that I like to do on my files, before I start on them, and I think you guys can guess what that is I forgotten to do it, this is this is bad i've forgotten to do my critical first step and I think you guys can guess what it is.
Michael T Ganschow Green: So, for those of you who are shouting in the back, save your file save your file, yes, want to save your file done nothing to it, yet so whenever I open up my files, I always do a file save as in photoshop to save them now.
Michael T Ganschow Green: When you say when you do a save were a save as in pretty much any adobe software at this point, it gives you this option, right here, you can either.
Michael T Ganschow Green: save your files to the cloud associated with your adobe CC account, I believe, again, like a terabyte now of storage, maybe more than that, and maybe like two or more, I honestly don't remember off the top of my head i'll look it up later.
Michael T Ganschow Green: But you get some storage for your in your adobe creative cloud account, then you can you can save your file there.
Michael T Ganschow Green: Are nine times out of 10 you're probably going to want to save it on your computer so i'm going to select the SAVE on my computer option and get the SAVE dialog box, here we go.
Michael T Ganschow Green: Now, this should look pretty standard across most adobe software's, this is a save dialog box and they're they're pretty standard across across all software's this actually kind of the MAC os save dialog box, if you have a PC it probably looks a little different now.
Michael T Ganschow Green: I want to point this thing in a specific spot now right now i've been working on.
Michael T Ganschow Green: graphics for the class website so I haven't pointing at my work and graphics folder in the client's website, but I want to change with this links.
Michael T Ganschow Green: So what I want to do in order to change, where this file goes is I find where i'm putting my file.
Michael T Ganschow Green: To do that i'm going to click the if you see next to this drop down right here so see this drop down and working with next to it is this little button, with an upward facing arrow.
Michael T Ganschow Green: Okay i'm going to click on this upward facing arrow button in the should air coast may have to click it a couple of times to open things up, but what this should do.
Michael T Ganschow Green: is open up the SAVE as men you where you can suddenly move around a bit so i'm going to open this guy i'm going to click at the bottom of this guy notice.
Michael T Ganschow Green: As I hover over the bottom, but come right to the bottom, and to save dialog box gives me a little downward pointing arrow that means I can take this guy and open him up, I can also stretching horizontally, if need be.
Michael T Ganschow Green: And I can do, both by clicking on the corner and stretching as well, so i'm going to take this guy and i'm going to open him up and i'm decide where I want to put.
Michael T Ganschow Green: My files now if you guys have a drive plugged into your computer that you're saving to.
Michael T Ganschow Green: I would not advise that I would advise saving to the desktop and then, once you're done with the file for the day dragging and dropping it on your drive, so you don't destroy it.
Michael T Ganschow Green: Since you're all working from home or from work computers, we can save these things, and it won't say delete them when it turns off like the labs.
Michael T Ganschow Green: So in this case, I want to save this guy in my GR C 175 folders specifically in my working graphics folder within that so i'm going to go to my desktop.
Michael T Ganschow Green: My desktop and look there's much ERC 175 folder why because I have my folders set, and you can.
Michael T Ganschow Green: You can organize your folders any way in these menus you want I haven't sent by date modified.
Michael T Ganschow Green: If they're sent by name it's right there if they're sent by date modified it's the tippy top because i've saved things into it recently, you can also sort these by size by kind and.
Michael T Ganschow Green: You do see what others have lets you do that's it, you can there are others too, depending on how you've configured your ios so.
Michael T Ganschow Green: I my case i'm going to send them by date modified to my que se 175 is right up at the top there it is and look my working graphics folder was the most recent one of these created that I did not delete so there's my working graphics folder.
Michael T Ganschow Green: And I can now save this thing what am I going to save it as oh let's see um.
Michael T Ganschow Green: let's see Oh, I know.
Michael T Ganschow Green: Project one underscore my initials.
Michael T Ganschow Green: Now I couldn't save it as any old name I want it doesn't matter what name I want actually you know what no underscore i'm going to save it as project one dash my initials let's get you guys in proper naming conventions already so.
Michael T Ganschow Green: We call this project, one dash mtg G dot pst and i'm going to save it there adobe when I can access files and the desktop folder yes.
Michael T Ganschow Green: Oh that's right, this is the new update, so it hasn't yet been told well Fine, let me tell you.
Michael T Ganschow Green: Yes, you may save to my desktop folder and it will say, do you want to maximize compatibility with all photoshop versions, because you never know what photoshop version, you might have open this file on and you say you betcha.
Michael T Ganschow Green: Now, if I minimize my photoshop boom and I go out here within my working graphics folder I will find a new file there is my lovely and terrible web design waiting to be filled with all sorts of lovely and terrible details so.
Michael T Ganschow Green: Here we go, so I actually you know that brings up a point that I have not covered since last Tuesday.
Michael T Ganschow Green: And I need to cover repeatedly so that I inserted into your brains and maybe like delete how to tie your shoes and replace this as like an autonomic memory.
Michael T Ganschow Green: And that is file naming conventions for the Web well i'm looking at this folder here kind of brought it up, so I figure i'll cover it here real quick and then we'll draw some ruler guides.
Michael T Ganschow Green: And then start let's start filling things with colors so file naming conventions for the web, why are they important well, you have to name your files very carefully on the web, because um.
Michael T Ganschow Green: Because web servers are dumb we'll just put it, that when i've done there literalist Okay, so you have to name your stuff very carefully so that they can see and process these files and be.
Michael T Ganschow Green: don't accidentally process what's going on, and you file has a command, so we have a few rules of thumb that we have to follow when when naming files for the Web okay rule number one no capitals none zero no capitals all lowercase on everything right.
Michael T Ganschow Green: Capital letters can sometimes be used in commands and things like that now we just don't we just want to avoid the hassle okay.
Michael T Ganschow Green: Because it's quite a hassle when you blow your website up because you capitalize the letter alright that's becoming less of a problem now servers are starting to get a little smarter about capital letters so occasionally you'll come across capital letter files online, but.
Michael T Ganschow Green: it's not always guaranteed so keep everything lowercase just for your own sanity, these are all sanity preservation measured by the way, you'll thank me later.
Michael T Ganschow Green: On number two no spaces, no spaces if you're going to use a space in a file, I recommend using a dash or an underscore and you got to pick between those use a dash quite a number of.
Michael T Ganschow Green: What are called content management systems that are that is software's that basically run websites like wordpress or June law or things like that out there.
Michael T Ganschow Green: Use dashes in their file nomenclature, so I want you guys, to make sure that you're kind of working with them so you're not surprised when you see the way the name file so use dashes in place of spaces okay.
Michael T Ganschow Green: Also um you don't want to use any special characters okay if it can be found in a cartoon swear word.
Michael T Ganschow Green: Like that signs exclamation points hashtags things like that do not use them in your file names, those are absolutely used in commands and, in fact.
Michael T Ganschow Green: We will be using some of them in commands throughout the Semester and you don't want to accidentally command your.
Michael T Ganschow Green: Support server to do anything now, why do I, why do well that's actually dovetails back into no spaces right.
Michael T Ganschow Green: If a server sees a filename with a space, it will try and fill the space in with junk characters with these special characters i'm talking about.
Michael T Ganschow Green: And sometimes it'll command itself to do things that's always fun at a minimum at least break all your links, so no spaces, no special characters know capitals use dashes if you're going to use spaces okay so.
Michael T Ganschow Green: Are we cool that we have any questions on file naming because this is something i'm going to be harping on again and again and again and again just.
Michael T Ganschow Green: Like with these root folders because these are very important to preserve your sanity for the times that you must lose it on actually getting your website to work as opposed to having it break due to a simple file organization issue.
Michael T Ganschow Green: Alright Well, this is good either you're all understanding everything or you too scared you're tired to move either way works for me you pre recorded So if you got questions of course hit me upload via email or Kansas, or the forum i'm available through any of that so.
Michael T Ganschow Green: let's continue on our photoshop journey showers so For those of you that have been playing around in photoshop live been barely.
Michael T Ganschow Green: wandering around in the weeds you're talking about file naming conventions, you may have noticed as you're dragging a ruler guides around that you are getting.
Michael T Ganschow Green: Exact measurements notice exact measurements okay these measurements are the distance where that ruler guide is and if I.
Michael T Ganschow Green: If I zoom in.
Michael T Ganschow Green: On the file the measurements get even more exact Okay, so I can measure anything anywhere on my file check something real quick a good they're not okay so.
Michael T Ganschow Green: Let me go to measure you can drag and drop a guide, if you want, but.
Michael T Ganschow Green: You can also freely move them around as you need so don't think a guide is like stuck in place if you drop it in a random spot accidentally now.
Michael T Ganschow Green: If you want them to be stuck in place when you drop it in a random spot accidentally you can always go to view and lack guides that is.
Michael T Ganschow Green: Option command a semi colon that is all control semi colon on a PC and that will lock the guides you can also sprout a new guide, if you want to.
Michael T Ganschow Green: You want to you don't want to drag and drop it if you want to instead measure, precisely, you can go a new guide, which is like.
Michael T Ganschow Green: 678 toward the bottom of view here, you can go to a new guide and you can say, I would like it to be a horizontal guide, yes, and I would like it to be 150 pixels down.
Michael T Ganschow Green: And then you hit OK, and suddenly didgeridoo there is a guide inserted, or you can kind of hand, do it and see where you want it, so you can use these guides either by hand dragging down or.
Michael T Ganschow Green: Inserting these guides so that you can you can exactly put them in place.
Michael T Ganschow Green: You can even.
Michael T Ganschow Green: Set up new guide layouts or market sectioning things into columns so we can make grids will.
Michael T Ganschow Green: we're going to do grids a little later actually when we start building.
Michael T Ganschow Green: When you start getting into html to build web pages, but look at that it's some great action here.
Michael T Ganschow Green: grades are nice grades are good for layouts they provide you hard lines you can kind of snap everything to me i'm not going to do a grid in here because I like to live dangerously so.
Michael T Ganschow Green: let's drop in some grid action here now.
Michael T Ganschow Green: I think i'm going to use new guides to insert my grid so.
Michael T Ganschow Green: I play I like using the new guide feature, because with the dragon.
Michael T Ganschow Green: Sometimes it's tough, to get them like work on where you want them they're really good for if you're trying to assemble guides around something you can drag the guide to the edge of the shape.
Michael T Ganschow Green: Or the object, but for doing initial measurements in a layout like we're doing here it's it's better, in my opinion, to use the view new guide feature.
Michael T Ganschow Green: And measure them in exactly so i'm going to build me a nice big tall top banner, I think I know insert a horizontal guide that's 350 pixels tall.
Michael T Ganschow Green: fam a big tall banner and you see it's inserted this blue line for my guide here now, I can click on the guide at any time and move it if I see fit, by the way, i'm undoing just by a simple command Z on a PC that is a controls.
Michael T Ganschow Green: So new guy.
Michael T Ganschow Green: Yes, please 50 pixels.
Michael T Ganschow Green: Alright cool, so there is a nice big Tommy even go bigger if we wanted on that top.
Michael T Ganschow Green: image, but you know what I don't think I will, if you would like to feel free because it's your world, and you can make it any way you like.
Michael T Ganschow Green: So, of what I do anything else i'm going to save this save my progress we saved a guide oh snap they had i'm going to add in a second guide because this bottom figure my let's figure my my top banner in my thumbnail I really liked the way that top banner large.
Michael T Ganschow Green: And I wanted a nice nav bar underneath it so i'm going to bring down and put another another one, maybe, maybe 100 pixels below this guy so i'm gonna go view new guide horizontal.
Michael T Ganschow Green: For 50 I may move him up a little NUTS that looks good hundred pixels below him, so now we have a nice big fat pha T hundred hundred pixel tall button bar, this is the most dominant button bar in history button bars.
Michael T Ganschow Green: This is a button bar the just like autumn walking in there, it is now I could throw a grid on for my horizontal layout using that view.
Michael T Ganschow Green: New guide for the land, but you know.
Michael T Ganschow Green: I don't think I will, I think let's pretend them eyeballing it off of a off of a wireframe or off of a thumbnail rather than just pulling it out of my backside here and let's say.
Michael T Ganschow Green: I want a column over here that has maybe some article links and then maybe a main content area here that's that's moving on down okay so let's do something like that so let's go view.
Michael T Ganschow Green: New gun guide vertical maybe we got 1900 pixels with to play with here so maybe the news article area is.
Michael T Ganschow Green: 600 pixels wide.
Michael T Ganschow Green: bop there, that is, and suddenly now we have links for our news articles links in an area for our type that.
Michael T Ganschow Green: Last one let's put a footer on the bottom of this thing Okay, like a little a little a little a little footer design of of.
Michael T Ganschow Green: Any old sort so let's drop a floater in here we've got 1080 pixels a height to work with, so you know what let's insert another new guide.
Michael T Ganschow Green: we're gonna make it.
Michael T Ganschow Green: I don't know let's go 1020 pixels down from the top pain oops wrong way it might help Michael if you do it the other way, new guide we're going to go horizontal 1020.
Michael T Ganschow Green: There we go nice thin little footer now again your designs may differ, it depends on your sketches and we may add more ruler guides in here, as this design demands Okay, if I hadn't actually sketched out in front of me rather than just.
Michael T Ganschow Green: pulling it right off the top of my head, I might add, in a few more, but I think this is a good point to start so questions on inserting ruler guides.
Michael T Ganschow Green: questions on anything else, it goes there's some shortcut to be able to match the spacing between guides.
Michael T Ganschow Green: So you mean like, if you want to do columns or something like that is that kind of what you're thinking okay all right, so if you want to do columns um what I would tend to do.
Michael T Ganschow Green: Because with these with these guys, you can basically control exactly where they're going to sit so let's say I wanted let's say I wanted to put a little gutter, so this is let's say this is the Center of this this vertical guy here is the Center.
Michael T Ganschow Green: Space effectively between two columns and if I wanted to add a little bit of God or a little bit of width off of the edge.
Michael T Ganschow Green: What I would do is I would insert two more guides so we're going to go a new guide, one that say let's say we want 20 pixels a gutter say so, I might come in here and say, I would like a vertical guide at 590 pixels.
Michael T Ganschow Green: So there's one side oh not 590 let's make a big fat fatty fat fat gutter here so let's go new guide make this a 580 pixels over.
Michael T Ganschow Green: And then we're going to go and we're going to add in another gutter we're going to go view new guide 620 pixels over.
Michael T Ganschow Green: So now there's your column, so now, you can, but your type up against the edge or but your layout up against the edge here and there is your column set now, it has a if you just want to add a set of columns it does have a cheat, though.
Michael T Ganschow Green: We can go to New guide layout and what new guide layout will do is it will just feed columns in there you come down here, where it says columns here, and you can set the number of columns you would want in the design, plus.
Michael T Ganschow Green: How far apart, you want the width on him to be boom and it will evenly spaced them across now.
Michael T Ganschow Green: I don't particularly care for this tool per se it's great if you want even columns if you're just setting up even columns.
Michael T Ganschow Green: fam drops right in and goes, but if you're setting up uneven columns like you want kind of a narrower column over here and a wider for your.
Michael T Ganschow Green: For your layout area your it doesn't give you quite that level of control, I mean, I guess, I could probably I mean I could come in here, maybe and go new guide layout.
Michael T Ganschow Green: Two columns and I, and I can set their wits but again it's going to equal with them, you know I could say, I want to 200 PICs of columns well there, they are.
Michael T Ganschow Green: So you know I can I can mess around with that, but by that but by that point you're just coming back changing it to one column of such a such a with.
Michael T Ganschow Green: With these gutters in place that you can otherwise manually measure like we did here, so in my opinion it breaks down after a little bit, but it's really good for evenly spaced calming.
Michael T Ganschow Green: In photoshop So if you want to even a space column your cheat is view new guy the layout okay.
Michael T Ganschow Green: If you're just if you're if you're making things that may not necessarily be all that evenly spaced view new guide also new guide layout.
Michael T Ganschow Green: doesn't just do horizontal it also does vertical as well or excuse me, it doesn't just do vertical it also does horizontal as well, so right now, this thing is set for.
Michael T Ganschow Green: columns, but we can also do rose as well and split our split our website into rose to so you could do a perfect little like grid sad as well, if you would like.
Michael T Ganschow Green: So, so the answer to your question is kind of.
Michael T Ganschow Green: very technical, you find that a lot in web design the answer the most technical questions is kind of um so yeah it's it's a good it's a good rule it's a good.
Michael T Ganschow Green: good thing to use if you want it evenly spaced things if you don't necessarily it's not necessarily the best thing to use my opinion but.
Michael T Ganschow Green: play around with it and see if it if it agrees with you constitutionally and if it does cool a fun joy.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Any other questions that was a good one.
Michael T Ganschow Green: Should we start adding some shapes I think we should start adding some shapes to our design let's have some fun here let's get a little brave.
Michael T Ganschow Green: First things first, though, is we're going to put some color I think it needs a background color and I think that's a pretty good DEMO of the color mixing tools.
Michael T Ganschow Green: So i'm i'm going to regret this, I always do okay class, those of you who are actually paying attention and letting this thing run in the background and then i'm going to watch the recording later.
Michael T Ganschow Green: I toss in chat what you think a good background color for our class website would be God doing this i'm really doing this.
Michael T Ganschow Green: we're doing this i'm going to close my eyes go ahead and toss in chat what you think a good background color would be we're going to find out what you've chosen give you guys a.
Michael T Ganschow Green: Second, here, to put in whatever you whatever you think would be a good background color this is going to be it's going to be awful.
Michael T Ganschow Green: Oh, my oh look at this chain look at this chain of got neon pink i've got pantone for 48 i've got neon yellow i've got a green screen is about really likes that pantone for 48 let's see that is.
Michael T Ganschow Green: You see exactly what that is because, ever since you rick rolled me as a balanced suspicious of your motives let's go pantone for 48 let's see what this is it is.
Michael T Ganschow Green: Oh okay nice it's a nice brown that might actually work pretty good for our top bar so now that i'm open sourced an entire color scheme here i'm going to use this to fill my fill my website, full of colors So here we go we're gonna make a beautiful colorful website here.
Michael T Ganschow Green: So here we go I have crowd sourced a whole bunch of colors This is excellent and i'm going to i'm going to keep this chat log.
Michael T Ganschow Green: On for for next class as well, although I may ask them for some colors to to sort that in but I like this, I like this okay so.
Michael T Ganschow Green: What i'm gonna do is i'm going to start off there's one of those test out color we use pastel purple for for the background here I think that's a good background color to filled things out with.
Michael T Ganschow Green: So the first thing i'm gonna do is i'm going to come down to my layers palette here okay and i'm going to give this right now it's got a default name of layer one.
Michael T Ganschow Green: And i'm going to change the name of this layer, and I do that by double clicking on the layer or I can Double Click anywhere, not that Double Click anywhere in the layer name, and I can give this layer name so i'm gonna choose background.
Michael T Ganschow Green: background.
Michael T Ganschow Green: background, there we go now notice I named it in all lowercase letters when I named my layers in photoshop if they are intended for Web.
Michael T Ganschow Green: I named them all in lowercase letters because photoshop lets you export your layers street two files we're going to do that in a couple of classes.
Michael T Ganschow Green: Yes, we're going to make we're going to spit a straight web design out of here just Bam spitting straight fire web design out of here so i'm going to keep blaming them with naming conventions lowercase letters.
Michael T Ganschow Green: No caps all the spaces or dashes no special characters know you know question marks or at signs or whatever.
Michael T Ganschow Green: And I think i'm gonna use all of these colors I think I could find room for all of these colors so first color is my background let's put a lovely background in here, shall we.
Michael T Ganschow Green: Now I could draw a square over the top and fill it with color but i'm going to cheat instead and do a select all you either do that by going to the select menu and.
Michael T Ganschow Green: The very top, one is all or you can do command a on a PC that is a control a and notice that that makes this little pattern around the engineer.
Michael T Ganschow Green: This pattern is called no lie, this is the actual technical term, for it is called a marching it's pattern, why is it called a marching ants pattern well just look at it they're literally answer the phone.
Michael T Ganschow Green: and
Michael T Ganschow Green: Then.
Michael T Ganschow Green: The then just marching all the way around the edges telling you where the edge of your selected area is.
Michael T Ganschow Green: In this case, my selected area is my entire document congratulations everybody we've selected our entire document.
Michael T Ganschow Green: it's a it's a bouncing baby terrible design we're going to start off with pastel purple we're going to mix it with some orange some weird brown possibly a grayish green somewhere in there we're going to fit in a neon yellow.
Michael T Ganschow Green: And a neon pink maybe I will make a gradient where that neon yellow radiates into a neon pink oh snap you can't control me.
Michael T Ganschow Green: And by the way you guys are building your own you do not have to use the same color scheme as I do so feel free to select actual proper colors rather than this mad cacophony that i'm going to use to fill mine up so trying to fill this thing with a color.
Michael T Ganschow Green: photoshop handles colors I in a very interesting way it basically keeps two colors at the ready at all times called a foreground color and a background color.
Michael T Ganschow Green: And you can tell which one is which, by going to the bottom of your toolbar here and the whichever color is in front of these two little boxes here is the foreground color or the.
Michael T Ganschow Green: background color and you.
Michael T Ganschow Green: Can flip them, by the way, so you can set which color is the foreground and which color is the background, but you can see.
Michael T Ganschow Green: Just by looking at them witches in front and witches in backs, we have a foreground color in the background color.
Michael T Ganschow Green: The reason why photoshop keeps two colors at any time is for gradients you can make gradients from one culture to another very easily in photoshop.
Michael T Ganschow Green: You can also add other colors in but whatever so in this case i'm only really going to worry about my foreground color.
Michael T Ganschow Green: Because i'm just going to start popping in some basic colors and then we may add some hot gradient action later on to this thing this thing is going to look.
Michael T Ganschow Green: Like a 1990s trapper keeper cover by the time we're done with this thing there's going to be patterns there's going to be some maybe terrible photo realistic picture of cookie monster.
Michael T Ganschow Green: or possibly one of those large depressed comets that are all over Twitter on here there's going to be all sorts of things it's going to look like.
Michael T Ganschow Green: it's going to be like a vapor wave mean I figure when we're done with it, but in the meantime we've got these colors marching around here and i've been requested to use past our purple as my colors so.
Michael T Ganschow Green: i'm going to make a pastel purple here, so we might color mixer over here because I actually have chats and and directly in the middle, so I can't see my color mixer loud at there and we're going to go to a nice purple de de de de de alright and.
Michael T Ganschow Green: we're going to go.
Michael T Ganschow Green: Maybe a suitably pastel it shelley, we need to purposely it a little more so it's not maybe not quite as pepto this molly.
Michael T Ganschow Green: There we go like to I kind of a Limoges color there we go we're going to Nice nice like you know French porcelain going on here there we go pastel purple.
Michael T Ganschow Green: And we go Bam alright, so the lie lackey color that's nice one so i'm going to go ahead and click OK, and you notice my black square what see my foreground square which I was.
Michael T Ganschow Green: manipulating in that color thing and suddenly turned into a lovely kind of lilac purple I mean lighten the lilac purple up just.
Michael T Ganschow Green: Because we're gonna be looking at that little bit, and I think we needed to make a nice background colors there's a lighter lilac purple yeah.
Michael T Ganschow Green: Now there are a bunch of ways to put color into a selection in photoshop there's a tool, called the paint bucket tool that you can go in and.
Michael T Ganschow Green: Put stuff in but I prefer to select and use that bill tool okay so i've got this Nice.
Michael T Ganschow Green: This nice background all set up here and to fill it with color all I have to do is to come up here to edit and about a third of the way down edit is phil.
Michael T Ganschow Green: That is shift f5 networks on both PC and MAC shift f5 if you want to use it, if you want to use the keyboard commands to get to it, otherwise it would come to edit.
Michael T Ganschow Green: About a third of the way down click phil and you get this lovely film menu which i'm going to move slightly this one, I can see, because appeared under chap which I have sitting in the direct Center.
Michael T Ganschow Green: So now, I can come over here with phil and I can select what color I want to fill this I can fill it with my current existing for room color.
Michael T Ganschow Green: I can fill it with my current existing background color I can mix another color all on my own.
Michael T Ganschow Green: I can use content aware fill which is this bizarre SCI fi thing that makes imagery out of nowhere, this is that rotating enhanced craft that everybody thinks photoshop can do.
Michael T Ganschow Green: it's starting to be able to do it people this content we're tools terrifying.
Michael T Ganschow Green: I can fill it with a pattern repeating image that if that detected maybe not horrendous duck that photoshop comes with what we're going to use later.
Michael T Ganschow Green: They will chop the head off him I can fill it with something for my history states and old pattern or color I had I can fill it with black I can feel a 50% great I can fill a white in my case, I just want to fill it with the foreground color.
Michael T Ganschow Green: So i'm gonna Okay, I can even set the capacity, so I can fill this with an opaque pastel purple i'm not gonna though instead.
Michael T Ganschow Green: i'm just going to fill it with straight pastel purple by mashing okay look at that, in a beautiful right there, do you see that look at that that just just magic pastel purple right there.
Michael T Ganschow Green: cool.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So that's a good first step, we have a background we selected something now we need to make other parts of our document our top banner our navigation and our footer and perhaps even our news area, we will see so all right here we go.
Michael T Ganschow Green: So, first of all I need to get rid of these marching bands and I can do that by D selecting I either do that by hitting command D control the npc.
Michael T Ganschow Green: or by going select the select it's The second thing down in the in the select the drop down menu, and what that does is that makes them marching ants go away okay.
Michael T Ganschow Green: So now, I am ready to start adding additional shapes in photoshop I want to add a top bar menu background and a footer before class is done.
Michael T Ganschow Green: Now one thing you have to understand with photoshop is as you're editing everything it will not create new layers as you're editing everything, so I recommend you know time it automatically creates new layers is.
Michael T Ganschow Green: If you're drawing with the pen tool, or if you are inserting type, so I recommend anytime you add something new to a photoshop document put it on its own layer
Michael T Ganschow Green: So the first thing i'm going to do is save and then we're going to make a new layer okay.
Michael T Ganschow Green: In order to put our top bar on we're going to make another layer for a navigation and i'm going to make another layer for our footer and then we will call that good for the moment.
Michael T Ganschow Green: So let us go here, and let us create a new layer so you know what should we work from the bottom up, or should we work from the top down, either way works fine.
Michael T Ganschow Green: i'm going to chrome and work from the bottom i'm gonna work from the top down, I think I think the top down so we're going to create a new layer for our.
Michael T Ganschow Green: Top bar here and i'm going to call this thing.
Michael T Ganschow Green: Well, I, by the way, how not to create my new layer on the edge of your layers panel over here, you see these.
Michael T Ganschow Green: You see, these little this little like set of horizontal lines, the set of for horizontal lines become straight across.
Michael T Ganschow Green: From the top of the tab on your layers palette to see these guys right here, if you click on it that gives you your palate options which you can use to create a new layer there, or you can do shift command in which will create a new layer
Michael T Ganschow Green: Or you can come down, and you can click the plus sign in the little icons on the bottom, and that will create a new layer as well okay whoops hey.
Michael T Ganschow Green: Look at that delete the layer yes so i'm going to do layers panel and options new layers that I can name it.
Michael T Ganschow Green: And I want to name this later nice name that I can use to export into a graphic at some point so i'm going to call this one, and I know this is terribly original you guys terribly original groundbreaking top bar oh snap boom we've suddenly made a top bar layer
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: For our top bar.
Michael T Ganschow Green: For our top bar lets us something that clashes nicely like say perhaps this pantone for 48 or.
Michael T Ganschow Green: Think we'll save pentium 448 is a footer color that strikes me as a bottom accent color I think we're going to make our top bar the pastel orange so.
Michael T Ganschow Green: In order to select things that are not the entire document by clicking nope I do this by clicking command day.
Michael T Ganschow Green: um we're going to select chunks of our documents and to do that photoshop gives you a whole variety of selection tools.
Michael T Ganschow Green: If you come over here up top here, where it has the move tool you move down one you have your marquee tools, if I click and hold on the marquee tools, I get a sub menu popping up by the way.
Michael T Ganschow Green: Any of these tools that has a little teeny arrow in the bottom right corner, if you click and hold on it, that means it's got stuff underneath it so you can click and hold in my case.
Michael T Ganschow Green: We have marquee tools, so I can make rectangles to select various rectangular or square areas I can make circles to select various circular areas.
Michael T Ganschow Green: I can select a single row of pixels if I would like, or I can select a single column of pixels the five of the like doesn't matter either all of these work for selecting little bits and bobs.
Michael T Ganschow Green: If I want to custom select an area, I have a series of tools for that as well, I have a LASSO tool which I can use to draw shapes that will be turned into selections.
Michael T Ganschow Green: I am a Polygon a LASSO tool which I can use to draw a point to point to point to point to make hard edge shapes that will be turned into selections.
Michael T Ganschow Green: I have a magnetic LASSO tool which will attach itself to any areas of contrast, in it around close to it and kind of snap to the edges of that and select it.
Michael T Ganschow Green: If I would like to select by color I can click over here, and I can select an object area which is kind of paint a selection over the top, I can do a quick selection tool to be photoshopped best guess.
Michael T Ganschow Green: Of the area, I want to select or a magic one tool which will select objects of the same color throughout the document now for our case right now we want to use MARQuIS tools we're going to get an opportunity to use the cut the other tools.
Michael T Ganschow Green: As the client as the Semester rolls on effect next class will be using the other tools yeah but.
Michael T Ganschow Green: In this case, i'm going to be using the marquee tools, create a series of rectangles to fill in my top bar my name and my footer okay so First things first i've got a top bar layer so let's fill that in.
Michael T Ganschow Green: that's easy to do okay so i've got a now i've got a selection here.
Michael T Ganschow Green: And I have my top bar layer highlighted when you're making new layers you have to be careful when you're putting stuff in and.
Michael T Ganschow Green: To make sure that you have that layer highlighted if I go in here I mix up a pastel orange I stick it into my top bar.
Michael T Ganschow Green: And then I hit phil and I don't have my top bar selected on my background well the color is going to fill on to my backgrounds and completely overwrite and erase the top I don't know quarter.
Michael T Ganschow Green: of my layout here, so I want to make sure, then I have my top bar layer selected otherwise everything's going to merge them into one layer and we don't want that.
Michael T Ganschow Green: photoshop so now it's time to mix a new color let's mix us a nice little pastel orange we got the past outplacement right so let's go find a good orange.
Michael T Ganschow Green: Getting like some sherbet action going on here there we go there are some nice sherbet it's not too pinky because we're down in the orange end of the end of the huge here, it would go.
Michael T Ganschow Green: orange orange you like, to be alright cool so now we've got a nice pastel orange right here, so I now have that area selected and I can go edit phil.
Michael T Ganschow Green: And it says well Okay, we want to fill their selection with what with my foreground color and suddenly Bam through the magic of TV we've now filled our top bar with a pastel orange.
Michael T Ganschow Green: Okay, so now what's next year, we have a navigation and I think a navigation should be neon pink okay.
Michael T Ganschow Green: Alright, so we got neon pink let's do it so time for navigation bars First things first i'm going to make a new layer, by the way.
Michael T Ganschow Green: Whatever layer you're clicked on in photoshop when you do a new layer it will go above that layer so I wanted above background, but below my top bar so i'm going to add a new layer here and i'm going to call said new layer navigation, I know i'm very, very original with these names here.
Michael T Ganschow Green: This is what's called semantics i'm naming everything what it is and so that I can see as at a quick glance what everything is doing good.
Michael T Ganschow Green: Alright, so i'm going to come down here and make sure i'm my navigation selected.
Michael T Ganschow Green: we're going to go to my rectangular murky tool and drag another MARQuIS you notice as i'm dragging these marquees, by the way.
Michael T Ganschow Green: they're snapping to my ruler guides, this is why Michael likes to build a ruler guides first so everything snaps to his ruler guides if you're like anywhere near it, it will snap to it.
Michael T Ganschow Green: Like so, and now you can fill it with whatever you want like say.
Michael T Ganschow Green: neon pink.
let's go yeah.
Michael T Ganschow Green: that's pretty neon denton denton denton denton denton denton denton yeah not quite appear magenta want to keep it a little bit off peer magenta but Brian enough that you can hear.
Michael T Ganschow Green: Suddenly bonnie Tyler singing I need a hero in the background here, here we go all right that's pretty neon to me let's do it neon pink them edit fail.
Michael T Ganschow Green: foreground color so pink so pink shirt pink.
Michael T Ganschow Green: I now.
Michael T Ganschow Green: going to fill in the footer so we're gonna make another layer
Michael T Ganschow Green: new layer
Michael T Ganschow Green: Father.
Michael T Ganschow Green: okie jokes sound let's feel in.
Michael T Ganschow Green: This year for.
Michael T Ganschow Green: So many years another rectangular murky tool i'm going to select my footer along the bottom dragging and dropping so, then I have a rectangle around it and i'm now going to fill it with pantone for 48 which is.
Michael T Ganschow Green: kind of a rusty brown here kind of a kind of a dirty kind of boy a boy it's time you clean your motorhomes black water tank kind of Green grey brown so let's see if we can mix that up a little bit we're going to come here.
Michael T Ganschow Green: There it is look at that that's a repellent Brown, I think we use that one right there that looks pretty for folks I need to go darker, but I think we're there looks pretty.
Michael T Ganschow Green: To me so let's go a little darker.
Michael T Ganschow Green: I think that looks pretty dirty.
Michael T Ganschow Green: So there's this let's put this let's open this up yep that looks pretty for 4080 In fact I think I can lighten it attach justin ever so slight just a squeak like so boom pantone 448 for the wind, here we go edit feel.
Michael T Ganschow Green: And we're going to go foreground color and boom look at that it's so beautiful you guys it's so beautiful now don't worry, those of you who suggested grey screen neon yellow.
Michael T Ganschow Green: Those are also going to be used in the document fact I think neon yellow would be a nice compliment to our neon pink so may turn the navigation to that and I think the grey screen i'm a compliment in a gradient with our lovely PMs for 48 so.
Michael T Ganschow Green: questions on photoshop so far well i'm saving my file does anybody have any questions.
Michael T Ganschow Green: Let you pretty nice looking design.
Questions here.
Michael T Ganschow Green: And yes, yes pantone for for we'll get some more more use out of pantone 448 do not worry um so.
Michael T Ganschow Green: All right, let's do no, you know what.
Michael T Ganschow Green: i'm going to pause here we're photoshop whatever file naming conventions we went over we went over a type I think i'm going to go ahead and pause it here.
Michael T Ganschow Green: we'll be back though we're going to come back to this next class and we're going to start adding effects we're going to add in type we're going to add in images we're going to add in.
Michael T Ganschow Green: we're possibly even going to make a terrible terrible logo and manage all of the logos layers together.
Michael T Ganschow Green: And then the class after that we're going to play with selection tools inserting pictures and other terrible things Okay, so does anybody have any questions either photoshop questions or class related questions.
Michael T Ganschow Green: All Muslim Islam for 48 yeah for for 48 out on the curb for him.
Michael T Ganschow Green: Alright, well, that being said, I just have one more bit of housekeeping before I close everything down this photoshop file, if you would like a copy will be available for download on the class files button on the home on the clients homepage.
Michael T Ganschow Green: Very shortly i'm going to put it online in fact i'm going to leave my chat online here i'm gonna leave my.
Michael T Ganschow Green: My clients broadcasting, so you can watch me put this file online and see how this works, a little bit of web trivia now so if you want to follow me putting stuff online hangout otherwise classes done.
Michael T Ganschow Green: And you may run along, if you wish, or, if you want to stay and watch me work i'm going to have the chat open, so you can talk to me as I make this thing, Nice and viewable for everybody in the class So here we go.
Michael T Ganschow Green: So have fun out there for those who are leaving for those who are staying like a lap, so this is our new flag.
Michael T Ganschow Green: Now yeah we're not done with the color scheme Isabel not done with the color scheme there's more to go hang on.
Michael T Ganschow Green: yeah there's there's at least two colors that haven't been used, yet.
Michael T Ganschow Green: right we minimize that we don't have working graphics that's got the terrible terrible file in it.
Michael T Ganschow Green: So i'm going to duplicate this G RC 175 a folder we're going to go duplicate give me a second one, yes and we're going to call this class dash files.
Michael T Ganschow Green: So let's go class dash files and then we're going to take class dash files here and we're going to compress class dash files let's see here, we want to.
Michael T Ganschow Green: Do here this compress class dash files dots zip excellent all right now we're going to use a lovely software called an ftp software to access the Web server let's see if I actually put on.
Michael T Ganschow Green: You know what i'm just going to use the main up here GR C 175 dot net firms COM username GR C 175 now we're going to get in here, yes, open up for me telephone you who have my new password that I created on here Where are you new password Where are you new password.
Michael T Ganschow Green: To tm CC truckee meadows community can tend to stick it out as alright, so now let's put in the password and we're going to go pass we're going to put the phone let's go.
Michael T Ganschow Green: Alright, so we put in the password and if I put the password incorrectly, it is yes we've gone to the server so now.
Michael T Ganschow Green: I am through the power of file transfer protocol amount of magically teleporting myself to Austin Texas ain't that fun.
Michael T Ganschow Green: So now i'm going to Double Click on this public html folder and suddenly here are all the websites I host on this hosting yay so there's Dr see 175.
Michael T Ganschow Green: And i'm going to go into images where my class files live all kinds of zip file so we're going to go last modified let's see here where did I put my class five there, they are class file alright so.
Michael T Ganschow Green: there's most recent one, which a lot of fun on 512 2020 so i'm going to slap a dash and i'm going to go 512 20 automatically breaking that so now.
Michael T Ganschow Green: I can come in here take my class files dad zip there it is taking the Bu and with its mighty for mega that follows five megabytes a photoshop file.
Michael T Ganschow Green: And we're going to stick that in there, like so, but we are not done yet, oh no because the class files download button is currently.
Michael T Ganschow Green: Hidden on GR C 175, so we must open the file for that we must open the gate open the gate we must open the gate and make it.
Michael T Ganschow Green: available to point a link to it so we're going to take adobe dreamweaver we're going to fire it open, those of you.
Michael T Ganschow Green: who have taken any of our web classes before know dreamweaver and earth shattering process of an opening don't worry.
Michael T Ganschow Green: I will teach you dream Weaver in a safe and non toxic manner dreamweaver fire up we're going to play we're going to modify a file so while we're here i'm going to go into my files that live in dropbox.
Michael T Ganschow Green: dropbox where Am I there, am I Hello and we're going to go there is the plus side I dreamweaver you're booting up i'm aware they're watching you boot up let's everybody watch paint dry like that there we go watch the software boot yes.
Michael T Ganschow Green: hey Eric goes all right now is this properly hooked up to the right one spring 2021 It is indeed I actually remember to pick up my site root look at that yay so now we're going to go to index.
Michael T Ganschow Green: don't have Timo yesterday me where you can think while you're thinking i'm going to be file opening yes, look at that so we're going to go to index dot html.
Michael T Ganschow Green: And i'm going to come to my code Hello code, how are you chug chug chug Come on, there we go all right, and I have hidden files.
Michael T Ganschow Green: So i'm going to hide one of these files by notice my little programming command here is an exclamation point.
Michael T Ganschow Green: So, see no special characters people no special characters and suddenly, I am going to untie this button that leads to anything and everything named class files class test files not zip.
Michael T Ganschow Green: i'm going to save this file and i'm going to double check to make sure i'm named everything correctly, I have so i'm going to come here there's my saved index.
Michael T Ganschow Green: Open up my ftp software and i'm going to go, you know what this thing needs a brand refreshed homepage i'm gonna flip this to last modified so I can see what was recently last modified, which is.
Michael T Ganschow Green: almost certainly a class recordings dot html when the last class recording got ripped by.
Michael T Ganschow Green: By zoom and put online as soon as this one gets ripped and put by zoom online, I will put it up on the class recordings i'm anticipating.
Michael T Ganschow Green: Probably sometime tomorrow evening alright so index dot html insert chug chug chug chug transferring what are you yelling at me about now you are asking me.
Michael T Ganschow Green: If it target file already exists, do I want to overwrite it, and I say you don't diddly I want to override it and then come over here to the client's website, we do we go back to the homepage.
Michael T Ganschow Green: And look at that there was a giant giant class files button I don't know if you people can miss this class files button.
Michael T Ganschow Green: Because it's pretty difficult to miss if you click on that you will get my terrible terrible terrible photoshop file, so that you can have a copy of it, for your very own now.
Michael T Ganschow Green: From here from here on out with in class demonstrations every file I make for in class demonstrations i'm going to be putting them in the class files.
Michael T Ganschow Green: putting up a new version of it so shortly after classes done you guys will be able to go on and download my class files to jog your memory, so you can work on them together with me when you're watching the pre recorded version of my lecture Bam that is now all up and ready to go so.
Michael T Ganschow Green: That, as the kids say is that does anybody who's hung out for them, are you 11 people have hung out for the remainder of what I was tossing that online and modifying my file in dreamweaver using html to end with any of you have any questions on anything I have gone over today.
Michael T Ganschow Green: Alright, I guess, not well.
Michael T Ganschow Green: Ladies and gentlemen.
Michael T Ganschow Green: That concludes our broadcast day hope you guys had fun and learn some things.
Michael T Ganschow Green: there'll be more learning oh they'll be more learning next class we're going to go over the psychology of color and not appeal people's minds open an insect ideas that they didn't even know weren't their own using color.
Michael T Ganschow Green: psychology of color is.
Michael T Ganschow Green: So we're going to go do that all of that yay than a dog, yes, yes indeed, yes indeed Angela I concur, I concur that new knowledge has been shared.
Michael T Ganschow Green: The cloud we've all survived the class mentally intact, I don't know about the poor pre recorded people know, maybe somebody with this recording slowly running its way out.
Michael T Ganschow Green: As they as their head has popped in there staring limply in front of the computer I don't know, but you guys all seem to be more or less alive.
Michael T Ganschow Green: Here so we'll take that as it stands, so I will see all of you, and possibly some other folks on Thursday with bells on my toes in new knowledge for your brains you guys have a great Wednesday, and I will see you in 46 hours.