Create Quick & Easy Web Images in Photoshop: Photos, Transparencies, & Animated GIFS | Kristen Palana | Skillshare

Create Quick & Easy Web Images in Photoshop: Photos, Transparencies, & Animated GIFS

Kristen Palana, Professor, Award-Winning Artist, Digital Do-Gooder

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (57m)
    • 1. Introduction to Creating Web Graphics and Important Tips

      1:43
    • 2. How to Make an Image Web-Ready (Photoshop CC)

      10:54
    • 3. When to Save as a GIF Instead of a JPEG

      5:36
    • 4. Making a Transparent GIF

      8:34
    • 5. Creating a Simple Animated GIF

      11:24
    • 6. Make a Quick and Dirty (but Beautiful) Animated GIF Slideshow

      8:53
    • 7. 5 Easy/Free Tools to Help You Make Web Images, Animation, and Videos

      10:24
    • 8. Thanks for Taking This Course!

      0:51

About This Class

Are you ready to learn the basic essentials of creating and editing lean and mean web-ready photos, transparent images, and animated GIFS for use on the web and social media in just under 45 minutes?

452287a3

Allow me to show you how from the very beginning to do all of the above using Adobe Photoshop or whichever imaging software you already have.  This quick but useful course will show you the ins and outs of making images web-ready, how to pick the best formats for your images and website, and make learning the basics of building transparent GIFS and animated GIFS fun and easy.

Don't let big and clunky, non-web-ready images slow down your website or blog any longer causing you to lose valuable web traffic.

I'm artist and professor teaching web design since 2002 to hundreds of happy University students and I draw upon my experience teaching image-making and web design on four continents to students from all walks of life and can show you how to make beautiful web images and animations regardless of your personal software/hardware set up, resources, and budget.

Please note, this Web Images course comes from a much larger, 10+ hour FULL web foundations course available in full from my website called Web Snax: Super Simple Recipes For Easy Web Design. You can find other sections of Web Snax here on Skillshare by taking the following companion courses:

Web Design Do's and Don'ts: Evaluate Your Web Site

HTML Hero: Quick and Easy Essentials For Beginners

Wordpress in 1 Hour: Quick & Easy Essentials For Beginners

Give Your Wordpress Website a Makeover: Divi Theme Spotlight

I have over 15 years of experience teaching students all over the world using my tried and true custom approach (turning complex information into something simple, memorable, easy-to-understand in as short amount of time as possible) to ensure that you get the most important, relevant, and useful information that can be applied immediately.

This course will show you what to do and why to do it so you will understand the material easily and can apply it no matter what you decide to do next.

This course is intended for beginners, preferably those who already have Photoshop. However you can download a free 30-day trial version of Photoshop from Adobe's website if you don't already have it. You can also apply everything covered in this course except the last two animated GIF lessons in other programs such as Illustrator, GIMP, etc.

Are you ready to make beautiful images and animations for your website or social media pages? Let's get started right away!

Transcripts

1. Introduction to Creating Web Graphics and Important Tips : Hey there in this section, I'm going to teach you best practices for taking any image and saving them for the Web, as well as making transparent GIFs and animated GIFs. One thing that is not covered in the section that I just wanted to mention here is whatever images you're bringing in, please do make sure that there high quality images and that their your own images. If you're not using your own images, you should definitely take a look at websites such as Flicker Slash Creative Commons. So they have a section where you can use other people's images with their permission in stock image websites and a number of others. So make sure all of your content is unique and it's yours, and it's high quality. If you're shooting your own images, make sure you've got good lighting and good composition. And whenever you open up your images, if you see a setting in your program, I'm thinking of photo shop. You should always, always, always adjust something called the levels. The levels will just you can. Even most of the time there's a setting auto levels or auto contrast. You should definitely click that button if you're a novice and you don't know that program so well. If you do know that program, then you know what I'm talking about. It'll breaking up your image and make sure that it's the very best quality for putting on the Web. Because, remember, a picture is worth 1000 words, and our websites need to be visual. And so the imagery is going to speak volumes. So you want to make sure you have the very best high quality original content possible. Okay, let's move on. 2. How to Make an Image Web-Ready (Photoshop CC): Hello again. Okay, so I don't know about you, but I'm pretty annoyed with this gigantic apple image that I dragged off of Google search before. First of all, just a disclaimer. I shouldn't be using this image at all because it's not my image. It's not my photograph. I just grabbed it off of Google images. I have no, um, copyrights to this image. So please, just my disclaimer. This is me showing you how to make a new image web ready. But I encourage you at all times. I strongly and wholeheartedly encourage you to always use your own images, your photographs, your drawings, your whatevers. Um, if you're using a photo or an image that's not yours, you should have written permission from the photographer or the artist. Andi, hang on to it. So basically, you need to ask permission, or you need to use royalty free images, and I'll provide some resource is as two places. You can get royalty free images if you don't have your own. But I strongly encourage you to use your own. Okay, I'm also we're going to basically What I'm gonna do is I'm going to open this image in photo shop. And here I'm assuming that you have used photo shop before. If you haven't, you can still follow along with me because I'm not going to do anything so scary. But, um, it's it is good if you have some experience with it already. Okay, so I've opened photo shop and apologies because it looks very messy right here. So I'm going to, um, open up the image that I'm trying to make web ready, so file open, and I'm gonna look for my web folder that's on the desktop called Kristen Web. And inside here, here are my two. Count em. Two html pages now, and my images folder And inside my images folder are my two little tiny images and my gigantic apples Thought Jay Peak image, which is not mine. I have no copyrights. I should not even be using this. I shouldn't put it on my website. But for example, purposes, it's OK, so I'm gonna hit open, and here it is. Okay, So, um, let me make some space here, Okay? So here's my image, and it's going to be too big from my website because first of all, I can tell Ah, a couple of ways I can tell, because down here it says Document 11.7 megabytes. That's a gigantic file size. Um, so basically, what you want to do is open any image, um, that you want in photo shop, and we're going to go and we're gonna go under image size, and we want to check out a couple of things here. So I went under image, image size, And first and foremost, this is a gigantic size for a Web page. Your entire Web pages Probably not even gonna be this big. Um, some people would argue that you should be designing for roughly 800 by 600 pixels, and so therefore, any images, you you should be much smaller than that. Others would argue that that's actually an old dimension for when, you know, people had smaller browsers, so you could probably get away with larger Web page sizes. This is all measured in pixels at the moment, This image, what you want to pay attention to for right now, first and foremost is your resolution. So I actually am opening up in image that already has the correct resolution for the web. So the correct resolution for the Web is 72. Why 72? I have no idea. Now it seems like a very arbitrary number. But do tattoo this number into your brain because this is the resolution you always wanna have on the Web or for any screen resolution. It's the same resolution we would also use in a video. If we were bringing still images into a video or anything that we're doing on a screen for things that are gonna be printed out, you need a resolution. Usually between 203 100 pixels per inch or dots fringe is acceptable. So if you're opening up a image and it says 300 or larger, you need to change it now to 72 all pretend that I'm changing it here. The other thing you wanna change, so once you've done your resolution is you also want to pay attention to the actual size of your image. So this is gigantic. I'm gonna go with something much more manageable, and by the way, you'll get more of a feel for these pixel sizes, the more you are working. So I'm gonna go with something that's 400 by default. It fixes the width and the height together 2 to 50. So make sure if you're re sizing that this little link do not do not constraint aspect ratio is checked off. It'll just maintain your proportions for you. See, don't end up with ugly stretched or squashed image. All right, so we've got 400 by 250 we've got the resolution set to 72 and that's pretty much all we're going to do right now. By the way, it's okay to make your image smaller and Photoshopped. But please, please. Never, ever, ever. Even though it's tries to encourage you here with the word enlargement, try not to scale up in photo shop. Photo shop is a roster based program, and all of the images are made up of thousands of not more pixels. So when you scale up, you're pixels start to show, and it starts to look ugly and scraggly and just not professional at all. Okay, so anyway, we scaled down and now I'm gonna hit OK, and it looks really tiny here. So let's see what this would look like at 100%. So I'm going to in photo shop. Just click here and now it's 100. Is this 100%? Yes. Okay, let me make sure if I move my window over, Okay, You can actually see in the lower left hand corner how big your images. So I'm going to hold down the option key with my magnifying glass tool. So when I hold down the option key, it goes back. So this is showing me what it will look like at 100%. So that's that. The other thing you want to pay attention to in photo shop is that your image only has one layer. If you're opening up something that you've been working on and Photoshopped working on in photo shop, you want to make sure in this menu here that you have merged all your layers or you flat and your image, they're not visible to me right now because I only have one layer. So do make sure if you're saving an image for the web that you only have one layer. You confined that menu in the layers window by clicking on the drop down menu here, Or if you go up the top here under layer, you have the same options down here is well, merge layers, merge, visible or flatten image. But if you're just opening up a regular image in photo shop that you weren't already working on with many layers, then you wouldn't even need to worry about that. All right, so we're almost there. So we've changed our resolution. We've changed our dimensions. We double checked. There are layers air flat. And the next thing we need to dio is actually save this. Now, don't just hit file save in photo shop you have, and also an illustrator as well. You have an option to save for Web. Now let's click on that and I recommend it. You'll get this box that comes up here. I like to look at two up. And what this does is it shows me your it shows me the original image and how big it is. 293 k apples dot jpeg. So basically this is showing me optimized, and it would be only 36.7 K In general, we want to save our image so that it looks as nice as the original as possible, but has as small of a file size as possible. In generally one aim for 50 K 25 k the smaller the better. The larger you go, the longer they will take to download. And it might not be such a big deal with one image. But if you start to have multiple images on the page, it can actually slow you down quite a bit. And if people have to wait around for your images toe load, they are going to leave right away and go on to something else. Remember, the average Web design attention span is only 7 to 10 seconds long. Okay, so just by looking at this image, I actually know that I don't want to give I want a J. Peg. And the reason is that J pegs are your very best choice for images that are photographs or pieces of artwork that have lots of details. Lots of gradations of color. Thousands of color is going on. So in general, J. Peg is gonna look much better on your website. And the way basically all we have to worry about is choosing J peg here and then the quality, um, you wanted if you drop the quality, you'll see down here. So this is the optimized. So we're comparing this one in this one? It still looks good, but now the file sizes going down. So I'm gonna I'm not gonna go too low If I go too low, Watch if I go to quality zero. Huh? That's funny. It doesn't even look so bad, but it goes to 7.27 K But I recommend don't don't go that low. We wanted to look good. So let's do quality 61 or whatever. The file size has gone down to roughly 31 K That's fine. It looks good. That's it. So let's have save and make sure to save into your images folder inside your Web folder. And I have already apples done J peg here. I think what I will do for this one is I'm just gonna overwrite that one. I don't normally do this and I'll hit save and it's gonna yell at me and I'll say yes, replace that gigantic one with this one. And now if I go back to my browser because I'm replacing this image and I didn't give it a different name, if I hit refresh toe you'll see that my images is much smaller and much more manageable now , so that it just looks a lot better on my Web page. In the next lesson, I'll get into when to save it as a gift or a ping or anything else. 3. When to Save as a GIF Instead of a JPEG: We're back in photo shop, and here is my Web ready image, the one that we just saved as a J peg and rightly so because it is a photograph that has loads of colors in it, and I don't want to lose any of them. So J. Peg is your best choice for photos and for images with lots of details in it. But what about gifts? Why would we ever use a gift than well, first of all, before I do anything else, I just wanted to say If you have a print resolution version of your image, if it's a logo for your company or anything else, please do not overwrite your original version. I only overrode my original J pick because it was already 72 dp I resolution for the Web, and I just needed to make it smaller. But if this was a really important image to me, and I really needed to be at a big version, always, always, always save under a different name your print version, your creditable version. So you always have the highest quality image possible that you can go back to. You can always go in tow a high quality, gigantic image and make it smaller and save it for the Web. But you cannot, I repeat, not go back into something that has been saved for the Web and make the quality better so that you can then printed out on business cards or on T shirts or anything else. S o Always save high quality giant images somewhere else under a different name, um, and then save your Web ready images somewhere else with different names so that they're separate and you always have multiple versions of the same image. OK, now that you've heard my warning, let's go and save this as actually save for Web. So here we have the same settings that we were using before. This time I'm going to choose a gift. Now. Gift is not a good um, it actually doesn't look so bad. Basically, you want to save images as a gift if you're dealing with a logo or something, that only has maybe two or three colors because watch up here. We're saving it as a gift. And here's my original to 93 K And here's my optimized. It's a gift. Um, you probably I don't know if you can see it here, but we're already starting to lose some of our detail. We're getting this little dots almost like a video noise kind of effect on here, because we're only using 32 colors here, so only save things as a gift. If you're dealing with a logo that maybe has three colors or something that was done. An illustrator that's just large blocks of color. No transparencies or anything fancy, innit? Logos are good call for this. So let's say I drop this down to eight colors now, notice that I'm really starting to lose details here, even though my file size is going down. So watch as I dropped down to four colors, it gets even smaller. But then I start to lose my details. Let's say for whatever reason, I don't care about losing detail, and I do want to save this as a gift. You can also go in over here, and you can put the exact amount of colors. If I wanted seven colors, for example, it will show me the exact seven color so you can customize this Um, for the Palley, I usually choose an adaptive palette. It just eyes the most flexible of all the options. But you have other options here as well. Usually had set to selective palette like adaptive palette did. There is sort of like how it processes all these colors. If we were to say no dither, let's say we want zero dither. You see it gets more Bandy. So it's just it's way of sort of mixing colors together. So with zero dither, you get banding. When you use 100% dither, it's tends to look more like dots. It's sort of like pointillism or, um, Roy Lichtenstein painting. Maybe, anyway. So there you go, um, for transparency. We're gonna deal with that another lesson. But so this is our gift, and it's very small, but again only used for logos. And then later, if you want to make a transparent image, an image where let's say we wanted to cut out these apples and make them a round shape and we want to lose the rectangle, then you need to save your image as a gift because you can't have transparent J pecs. So for transparencies, it's good to save as a gift, and also, if you want to make a little animation called an animated GIF. It has to also be saved as a gift. So that's why you would save things as a gift. Anyway. I'll save this just for the heck of it, even though it's not really the look I want. So that's it. We save all of these things up here, save. And here we can give it the same name because it has a different and extension apples dot gift. So we'll save this in our images folder. Just toe have it. And in the next two lessons I'll show you how to make transparent GIFs and the one after that I'll show you how to make animated gifs. And actually, I'll even show you how to make fancy animated GIFs beyond that, Thanks. 4. Making a Transparent GIF : Okay, so now it's time to make a transparent gift, which is basically a new image on your website that is not rectangular. It's any shape that you want it to be. I'm taking you to a website while you know it. It's flicker dot com, and they actually have a section called Creative Commons. And that's a nice place to go if you're looking for images that you can use that are not your own, where you can use them with permission of the author. Now there's different places that you can go. But I actually just did, Ah, search here for logo and you want to pay attention when you're so basically I'm looking for a logo because that's, ah, good thing to save as a gift because usually they're simple, Um, and on this website you'll see that there's a place here. What's his license? Creative Commons. So I actually chose commercial use allowed just because I'm making on putting this in on online course, but you don't have to check that off if you plan on just having something where you're not going to need to worry about commercial use. So, um and you also have this option here for modifications allowed. If you're gonna actually change the other person's image anyway, I'm just using this as an example. But I'm going to go to this image and I'm going to download it and you'll see in the lower right hand corner all these different sizes. I definitely don't need these gigantic size is because I wanted to be Web ready anyway. I'll probably just go with the medium. For now. If I was trying to download something for print, I would definitely use the biggest size I could get. But for the Web, it doesn't matter. So we'll go with this one and let me save this and it's downloading. And now if I go back into photo shop, there's my apples from before, I'm going to open that image. It should be in my downloads filter, and I see let's find all the stuff from today. Here it is. Okay, so here's a new image. Let's say for whatever reason, that I want to basically get rid of the rectangle, and I just want this circular image. Well, I'm in photo shop, and the first thing I should probably do is just double click on this layer and give it any new name. When I hit OK, it becomes unlocked so I can make changes to it. Okay, The next thing I'm gonna do is I'm going to add another layer, which is transparent, and I'll put this underneath my logo. So anything that I erased from this layer will be seen in this one. This is a transparent layer, So I'm gonna go back to my logo layer, and I'm going to use a tool over here called the Magic One tool. And what will what that will do? Click will select the area around my image. Now, the reason that worked so well is because there weren't lots of colors and all different gradations of color or all kinds of complicated things going on. I mean, essentially, this is a black and white image. It's actually a light gray, but you get the idea. So it selected the space around my logo. I'm gonna hit delete, and now it goes away and let me just select d Select and you'll see that I have this round logo and now it's on a transparent background. That's exactly what we want now, before I go and save this as a transparent gift and insert it into our web page. Uhm, I'm going to just crop it because it has a lot of extra space around it and thats gonna push out anything else on my Web page away from it. And maybe I don't want that. So we'll just, um you know, tighten it up a little bit. We don't need to have so much negative space. We can always decide later how much space we want around our images. And also, by cropping it will reduce the file size and therefore, increase the loading time. Okay, so here's how I want it. I'm just using the cramping tool and then I just have to say, Yea, OK, so this is my new image and I don't need two layers anymore. Um, actually, I'm afraid that if I flat in this, it's gonna give me a by default, uh, white background. Let's see what happens. Let me just flat in the image. Yes. In fact, it gave me a white background, so I don't want that undue flat an image. So let's be naughty and keep to, um layers in here when we go to save. So for transparent gifts, we can make an exception. So now we go and vile save for Web and we want toe watch. If I choose J Peg, we lose the transparency. Okay, So in order to preserve the transparency, we need to save it as a gift, a transparent gift. And we can completely get away with seven colors groups here because it's just black and some shades of gray here. So that's fine. Look how tiny this image. 14 k That's perfect. Now there's one thing that we want to do before we hit Save. And that is we want to pay attention to our Matt. Are Met, controls the pixels that are around our image so that they blend in with the background color of our Web page. Our Web page has no background color. We never gave it one. We're going to get into that later, but by default, our Web pages have a white background. So if I want this image to blend in perfectly with my background color, I need to set that here under Matt, and you can do it many different ways. In our case, we can just choose white and what it will do is it'll just ensure that it's perfectly round . Not scraggly, not ugly, You may have noticed in the Peter Pan website. Earlier, when I was talking about bad websites, there were a couple of images, I think, also in the Palm Iranian website, where they didn't blend in so well with their background, and they had this halo of scraggly looking pixels around. It just looks very unprofessional. Later, when we're choosing actual colors, you can go under other and you can actually type in. Ah, Hexi decimal color value will get into that later. So let's say the color of my Web page is this. We would get this code from our Web page and type it in here and make sure that the Met is exactly going to match. I'm gonna hit OK, and you probably can't see it here, but it would just give me a halo of blue pixels that would blend into my blue Web page. But we just need white, so I'm gonna choose Wait and that's it. I'm gonna hit safe and we'll call this trends logo. Trans logo dot gift. Save it in your images folder and Now we have quite the collection of images. So this is my transparent gift. Let me show you what this looks like on our web page. So, um, we'll put this in the second page because we don't have so much going on over there, and I'm going to copy this tag. This was our web snacks. I conduct J pic and well paced it in here. Remember, everything happens between the body tag and the end body tax. So I pasted in here and let's just change the name of the image to, uh what was it now? Him Trends logo dot gift. Make sure you spell it right or it won't show up. We're gonna hit, save, and then let's go back to our browser file Open file and let's open up second HTML open. Uh, now we have image that has got a transparent background so we could make it any shape we want. And you'll see this is the gray color and white Matt fits perfectly into our background. All right, so far, so good. So now I think we're pretty much ready to get into animated gifs 5. Creating a Simple Animated GIF: Okay, um, now we're gonna show you how to make a very simple animated GIF. An animated GIF is basically a series of images that are constantly changing that you create and save pretty much as one image. So when we save our animated GIF, it's basically a small animation with a couple of frames in it, and it saved as if it were just one image. Now, to create an animated GIF, we are going to make a new document and you don't want it to be too big, because remember where Designing for the web. So I'm just gonna make something rather small 300 by 300 for example, remember, our resolution for the web is 72 RGB color. Everything else is fine. I'm gonna hit OK, And what this does is it gives me a little work area and let me just hold on a minute, move this over. So here are my layers over here, and then we need toe also have our timeline as well. If you don't see your timeline window, then you basically go appear window and then timeline. So we're going to create a small animation that we can put on our Web page. Now I'm gonna do of the world's simplest, most basic looking animated GIF but animated gifs. If you go, I don't know, check your email. Sometimes you'll see little banner ads popping up. Or maybe when you're searching Google those air animated GIFs. So just by learning how to make an animated GIF, you could actually get work making little banner ads. There are other ways to make animated give some people use flash or are, um, other programs to make this little short animations, but they capture your attention. That kind of, you know, they're more dynamic than still imagery, and you'll see them a lot used for banner ads. You'll see them a lot, also in blog's and forums. Um, I don't know, like, if you're, for example, a Harry Potter fan and you were to go to a Harry Potter forum, you'll see some fans will take a few stills from their favorite movie, Um, and create an animated GIF Thought of it and Italy the loop over and over again, or whatever is just, uh, I don't know. It's just a souped up image. It's not a still image. It's Ah, Siris of image, so it captures your intention. So some people like to use them in their signatures and forums and blocks. Advertisers love to use them for advertising, but they're also can be nice if you use them for good and not for evil on your website, especially later on as I show you how to make something really nice if you want to make a little slide show taking you know some of your art pieces and highlighting, for example, your five best pieces of art and make a little slide show out of it. Or just, you know, something very simple. I'm gonna show you how to make a very simple animated GIF. It's not gonna be pretty, but you'll know how to do it. Okay, so step one is we need to have our work area, and our work area is rather small. To be honest, I'm just gonna do zoom in a little bits, we can see what we're doing. Okay, here's our timeline, and we don't have anything yet, so I'm just gonna draw. Okay. I'm gonna draw something very simple again. I'm doing this, you know, a few minutes. So I'm just gonna draw the world's most simple happy face guy. Okay, so there he is. So here's our background. Okay, So under create video timeline, we're going to say create frame animation. Click. When I do that, I get a timeline that shows me one frame. Um, so technically, we don't have an animation yet. What you need to dio is in your layers window. We're going to just click this button here. We're gonna add 123 more layers and I'm actually going to double click on my background and rename it so it's called Layer Zero. Someone had. Okay. And, um, the reason I did that is when it's called background, it's locked. Where is when I name it anything but background. It becomes unlocked, so just allows me to make little changes. So let's pretend that we're gonna make the world's most simple animated GIFs and I again I know how ugly this is, but it's just for sample purposes to keep it simple. So let's make a four frame animation. So to start off, you have to have your background layer at the bottom layer zero and then I have added three new layers here. Now what I need to do is I need to add three more frames here to correspond with my layers over here. So under the little drop down menu, we're going to say new frame, and that gives us another frame. And let's just repeat that and one more time so that we have four. Okay, so, no, we have four frames now. I actually believe it or not having animation. I'm gonna hit play and it played. But nothing happened because nothing's changing. So before you do anything else So I've got my four frames here in my timeline, and I've got four layers and late. Let's start to add things that are gonna happen in my animated GIF. So this is gonna be our base layer. And then in later one, let's say for whatever reason and yeah, this is ugly. Let me just make my brush a little smaller. Let's say for whatever reason in layer one, our little guy against eyebrows simple enough, right? So you'll see there's little eyebrows and then let's same and layer to he gets really happy , like much happier than he was before. Okay, so I'm changing the mouth a little bit, okay? And then layer three. He gets years. Okay. Again. I'm just doing simple, simple stuff just so you can see how it works will give him a little spiky hair as well. I'm sure will be even happier. And let's even make him happier. I'm just stretching his mouth a little bit more. Okay, so these are the changes that we want to see. Buildup. Okay. Perfect. Okay. Well, not perfect, but good enough. Okay, so, um, if I were to hit play again, you'll see that it played. But again, they're all the same. So now what we have to dio is let's click on the first frame. This is how our animation is going to start, and we're gonna turn off the visibility of later three, layer two and layer one so that in layer zero, the only thing we're going to see is are very, very simple. Move over a little bit so you can see very simple face. Okay. And then in frame two, I'm gonna turn the visibility on your one so that he gets eyebrows. Now you can start to see there's a little difference between frame one and frame to click on frame three and we're gonna turn the visibility of the eyebrows and the happy mouth. Okay, so now you see frames 12 and three are slightly different And no, When I click on frame four, I'm gonna turn the visibility on all of these layers so that if I were to hit play Ha ha. Did you see that? It changed. Now, over here in our timeline, we can control whether this loops are not so we could make it loop forever. I can hit plane will just go like that forever. Now you can imagine how annoying that would be on a Web page despite the, you know, even besides the fact that this is a really crude drawing and not very professional looking . So I'm gonna hit stop, you can control if it, you know, loops ones three times if you want it toe loop two times or 14 times. You can put that number in here and you can also control how quickly these loops. So it's right now not delaying it all. But if I wanted these to go slower, let's say half a second, half a second, half a second. And then let's say on the last one. I wanted it to pause a bit before going on playing itself again. I could say five seconds now when I hit play, it goes a little bit slower. It's gonna pause on the last one for five seconds and then it starts all over again. So you control everything and that's it. Once you've done this, okay, we'll stop there. Once you've done this, you're ready to save your animated GIF. No, some of my students get carried away. They have so much fun with this that they make you know, Lord of the Rings style epic animated GIF. That's, you know, 40 frames lung. You can do that. But there are other and better software programs that you can make. An animation and animated GIFs are just for really short ones because you don't want an animation that's gonna take forever toe loan and then nobody's gonna ever sit and watch on your website. So just, you know, save the theatrics for flash or for other programs. Animated GIFs are just for very, very simple animations. You can do stuff with text. You can just stuff with photographs. You could do really beautiful things. I'm just showing you a crude example. I'll show you some better examples in a future lesson of things out there on the Web. But anyway, this will get you started. Let's just save this. So I'm gonna say, Save for Web. Remember, we're not going to see it as a J Peg because it won't be intimated. So let's save it as a gift. And, um, we don't really need very many colors. So let's seven colors, maybe, and that's it. It's gonna be really small. And I didn't make any transparencies I should have cropped. This may be because it looks like there's a lot of extra space here that we don't need. But just for the sake of showing you, let's say that I like this. I'm gonna head Save will call this animated guy dot gift, and we will save this and are Web folder and our images folder with our other images hit save. And now if we go back to Dreamweaver, let me just put it in. Let's insert our image. We choose animated guy. Here he is open. No Dreamweaver. Poland's Oakley. Okay, so, uh, in, um, photo shop If I were to go and re saved this again. I should give it more colors. So would be less scraggly looking. But this should do the trick. So let's say I like this. I'm gonna save it and let me show you how it looks in a browser. Todo I know this is a very ugly animated GIF, but it works. And I also made it on a white background on a white background, so it actually blends in pretty well. So please, whatever you do, make a nicer animated GIF than I did. And just, you know, do it slowly, get practice and you'll eventually get better and better. And you'll be able to make some really beautiful effects with text with photographs or even your own custom drawings and illustrations. Or you could be silly, leg me and just make a stick figure guy. 6. Make a Quick and Dirty (but Beautiful) Animated GIF Slideshow: all right, I have brought you to past student work, and you can actually find my past student work in our course in the discussion forum. If you scroll down a little bit, you'll see an area called some featured student work. And I have actually hundreds of, um, past students who have done all kinds of work. I just pulled out. A couple are recent ones, So there's a section for the students that did Web design one with me that learned how to do websites from scratch using HTML, CSS and Dreamweaver only. And then I pulled out a couple of of students that continued with me to learn WordPress content management systems and all the whistles and bells, Um, including Flash and everything else. So there's a couple here is Well, I'm just going to click on Ah sure, A. Bennett who was a study abroad student at the American University of Room last year, and she made this website connecting across cultures, and it was just pretty much about her study abroad experience. And I'm showing you this one because she just did a very simple slideshow for her main page . She just took a bunch of her photos that she took during the semester, and she made a little slide show out of them, and it loads really quickly. It's lean. It's mean you don't need to know WordPress or anything fancy. You just need to know how to make an animated GIF. And in fact, she made this using the simple animated GIF style that I've already showed you in the previous lesson. What I'm going to show you now is a way to make a slide show where the images fade in and fade out. So if you want sort of, like, you know, smoother transition, then you can use this other way of making an animated GIF. OK, so I'm going to click on photo shop and I'm in photo shop and you see, I've already kind of like a like a one of those TV chefs. I've already kind of set up everything just to get the ball rolling. So what I've done is I've gone into photo shop and I brought in two images. Actually, it's only one image, and I just made ah duplicate copy and, you know, change the colors around a little bit. I've got two images So let's pretend for whatever reason, that I want to have a slide show with these two images. And obviously, if you would have a slide show with five images, then you should bring in five images on five separate layers, etcetera that out of the way. So I'm in my layers window and here's my first layer, and I've actually DoubleClick double clicked on it. So it's not called background, because when you have a background layer, it's locked. So if you just double click on it or give it any other name besides background, then you can do stuff to it. And then I have this layer as well, which is a copy. And for now, I've just turned the visibility off because in my timeline over here now I have a frame animation. Um, if you don't see your timeline, you can get it under here window timeline. And once you have a couple of layers going, it'll give you the option to make it a frame animation, as opposed to the kind of timeline needed you would use for video and for animating in photo shop. All right, so, um, if for some reason you don't have the right kind of timeline. You confined where to switch it here. So here it would convert me to video timeline. But actually, I want the frame time like, Alright for Benny. So this is what we what I want to do 1st 1st I want to, um, have this heart. Basically, maybe we'll make it fade in from nothing. Let's let's start out with that. So what I need to dio is I need to add a new frame, okay? And in this frame, I'm going to drop the opacity down to zero. Okay? And in fact, in this frame, it's gonna be at 100%. Let's see if it'll let me do it. Okay. Does great. So what you want to do is you want to click on your different frames and change your A pass ity settings in your layers window here. So, in the 1st 1 I told it to be zero, and in the 2nd 1 I told it to be 100% which means full visibility. All right, so here's the plan. Now we are going to go over to the little drop down window, and we're going to select Tween Tween stands for in between frame. So what we did over here is we made two key frames. We said on this first key frame, I want you to start out as invisible and on my last key frame, I want you to start. I want you to be 100% visible. And what photo shop is going to do is animate for us all the steps in between so between. So we click on it, we get between window and here you'll notice you have options for position and effects. You can do all of those things, but for now, I'm just going to do a pass it e and you can decide how many steps you want. So I'm going to do three. For now, you can add more or less. Just remember, when you're making animated GIFs, you don't want the overall number of frames that you have down here to exceed 20 or more, because it's gonna make your file size bigger, and then it will take longer to load. All right, so I'm gonna say, OK, toda Now Photoshopped has made three in between frames for me, so that if I were to hit play. You see that it fades in and you can control the speed, Remember? So if we wanted it to fade up slower, you could just change that here under each one. Make it half a second long instead of no delay. So now when I hit, play sexual bit too slow. But you get the idea, right? So now it's faded up, right? If we want, um, if we wanted to fade out again, what you can do is get this invisible frame again. And, um actually, what do we want to do? We want toe, actually make a new frame. So let's say new frame, okay. And then on this one, we're going to go over opacity. I'm going to say zero again. And then with this one selected, we gotto weaken Tween it again. So I'm gonna go over here. I'm going to say Tween and we say okay. And you see that, remember, five was the one that's the most visible. And then it basically added three frames in between to make it invisible again. So you kind of get the idea now, right? So and now what? We can dio let me just a hit play for you, By the way, that so it comes in slow, and then I think it's gonna Okay. Okay, so it fades in and then fades out again. Obviously, you can adjust these so that the one that fades up maybe as much longer. Let's do that. Let's make That would be, like, a second. And then these other ones fade out these air actually too slow. So I'm just gonna do, like, a little bit quicker transition in between, Okay? And then frame five is one second that these guys are gonna be 0.2 seconds. Remember, You can also control if he's loop or not. All right, so now I hit. Play comes in faster. It stays for a minute. Then it goes away again. Right? All right, now I'm going to I had a new frame. Okay, So new frame. And in this frame, let's turn on our other one. And so we can do going from nothing to our new one. And then we need to add the three in between frames. So Tween capacity selected. Okay. And it's tweeting with the previous frame. You can actually make a little adjustments here, so I'm gonna say OK, and now look, it's gonna go from the White Hart to the Blue Heart and let's just end with that one for now, we could, you know, make it stay on the screen for 10 seconds or whatever. Okay, so now let me hit Play Que toda. Now we have a little slide show obviously could make it loop. We have a little slide show that is not just images changing, but it's also fading in fading out so you can play around with speed. You can play around with how maney images you have and what they dio. But this is another way. Another cool, easy, simple way to make a new animated gift that you can use on your website. So let me know how it goes. Chow, By the way, I have a cold, so I hope my voice doesn't sound too weird in this lesson, Joe 7. 5 Easy/Free Tools to Help You Make Web Images, Animation, and Videos: Hey there. So hopefully you're starting to get more and more ideas and ways to kind of break through your creative block. But one of the very best ways is to just start making stuff using free software, free tools, free images, free video and pre music. Because if you are just sitting around staring at a blank screen or a blank canvas waiting for an idea that's gonna freeze you up. But if you start at least thinking about Oh, I want to do something with animals and you start looking at pictures with animals or start working with templates, etcetera, and you start putting something together, you're gonna get ideas as you're working. One of my very best creativity boosting techniques is going toe one of my sources for free images, music and videos for your project. I will give you the link to this block post on my website, and I will talk to you a little bit more about copyright law and what you can and cannot do when using other people's images. But I have here the whole list of places where you can get free creative Commons images that you can start working with as a base. So some people, maybe we'll take a picture of a rocket ship and start tracing over it and throw out the original photograph in Boom, you have an illustration. Other people want to make photo collages, or they want to go into a free program like Can Va and put images together, maybe even ones that you took right. So there's all kinds of places where you can get free professionally shot photographs and illustrations. Uh, online. So this is my big list. There's also an area if you are someone who wants to play around with video, our animation. There's places where you can get free royalty, free music and sound effects that you can put together either in an audio project or as the soundtrack for a video. Our animation that you're making. And then you also can use free videos. Many of you maybe want to make a website, or you've seen websites that have video backgrounds. These are great places to get free, professionally shot video that you can use in your website projects, but also in your video and animation project. So I highly recommend just browsing this resource and then let me show you. So this is, ah, glug that I have with my students in Yangon, their secondary students at Talon International School. And here's just four samples these air grades Ah, six through 11. And many of them have absolutely zero design or our experience and what we did in the classes. I had them go to those websites, find an animal of their choice. And then we brought the photo in a free program called gimp, which you can download for free. I'll only building for you, and then they brought in their photo. And then they used the drawing tools in gimp in a different layer to trace over. The photo made their little tweaks here and there, and then they threw out the original photo and they were left with different kinds of illustrations. So these are for just a different example. So some just did a black and way drawing like this one with the elephant, and she really played around with the different thicknesses of lines to get those wrinkles in the skin. And then others were kind of more colorful, more blocky. The student used a big fat brush, almost like a paintbrush to draw around a dog, and you can actually see remnants of the original photograph in the background here. So that's another way that you can start making stuff without worrying so much that you're completely on your own. So my other suggestion are going to a great website such as canvas. I'm already logged in. Chan va dot com is a great website because they give you all kinds of templates. So if you don't have an idea you can borrow, you can borrow an idea and just start putting in your own text in your own words. So if we were going to make a Facebook cover, for example, and just, for example, that gives you all kinds of kinds of templates, obviously you want to use the free ones and less pay to use it. But let's say I don't know. We choose one of these right? So can Va gives you a template, and then you anything you quick gun you're going to get, uh, you're gonna get settings for. So flip this. You can change the position. Usually I start with the text, so anything I click on allows me to click on the text and I can change the fund if I want to the colors, etcetera. I apologize because I don't have so much time to go into every single program I want to show you. But I just wanna, um, give you a taste of all the free tools out there where you can use templates to get started . So I wanted to change the image. Ah, in 10. But you have the elements section over here. And if I wanted a picture of a tree, iCal has all kinds of free photos and graphics here. So if I wanted to and bring this in here, surely right. With photos, you can replace this photo with something else. Okay, So anyway, it lets you drag in any photos that you want. And, of course, if you have your own photo, you just upload on image. There is of some of my students from Mendel A in Inler mentally teaching a social, of course, and there we are. Right. So anyway, just to an example in canvas, obviously then when I'm happy with this can go and I can download it and use it anywhere I want. That's just can va. Uh, I have a full course on this, by the way, I should mention, But you don't need a full course to get started, right? There's other kinds of tools besides can Va. So if you want to make a website, there's wicks dot com, which also is very easy and intuitive. You just go in and I'm obviously I'm logged in. But you go in and you can create a new site. And you just say, What kind of sight do you want to make templates for portfolio on CV? No, it'll actually make one for you, but if you choose a template, it's the same thing as can Va. You just go in. Let's say Let's say like this one, you just go in and you start editing. All right, so here's my Templin. It same thing. Um, and there's ah, bunch of help videos. Toe will be with me if you get confused. Anything, just like in Camba G. And anything. I select have settings, writes congee. Um, I can change my funds, the color richies. So we have that I can change pictures if I want to change image so anything right click on it gives me settings for have a bunch of money images in here already, But you have the same option and wit when I wanted to say, Is that basically Wicks, just like Can va gives you free images that you can use from input did Ah, there it is. So I know it seems a bit overwhelming just coming in here and starting off, but basically, that's how it works. You can click on anything, start changing it. You have buttons, um, up the top. Here you have pages. So right now we're on the home page with manage pages and there's actually a resume page. When I click on it, I am taken to the resume page and edit that as well. I can get rid of pages or add my own. And then when I'm done, I can preview my website and publish my website, and this is all for free. So that as the world's quickest introduction toe with, uh, yet again, I'll just say it once. I don't have to say it for each example, but I have a course, a larger course for every single one of these tools that I'm gonna show you. But anyway, so that's weeks, man. What else did I want to show you? I wanted to show you, uh, power tune. So platoon is just like can va, just like Wicks. I'm not going to get into it here. But you sign up, you go in and you have templates, and then you just swap the stuff around. You can have your own animations. You can put your home music in. Ah, you can write the text and determine the story. And if you follow a template, it's much easier than if you're just trying to do everything from scratch. So there's Pau tune, okay. And then there's stencil. And so one thing I like about this one is you just grab in the image, whatever you like text here, which light if it's gonna be on a dark background. But then the thing I like about stencil it's just like can va But they have a bunch of quotes here. Broom creativity is a gift. It doesn't come through if the air is cluttered. John Lennon. Thank you. So anyway, you can well stuck around, but it just makes it really easy. Teoh Macon Inspiring quote that you can share on social media that took me, what, two minutes? And then you basically can download it or share it right on social media. So that's that. So there's a bunch of free tools that you can start using right away. Plus, you know where to get free images, free videos and cream music. So now you really have no excuse. So if you still are not feeling creative, then maybe you should just not worry about it and just start making stuff instead and see that helps give you it. All right. I hope this helps see you in the next lesson. 8. Thanks for Taking This Course!: thank you for taking this course. I hope you found my tips and tricks helpful, clear and easy to use for yourself. Please remember, you can always ask me a question by starting a discussion or by contacting me through my website or Facebook page. If you did find value in this course, please do take a moment to leave a rating or review. Your feedback helps me best provide a high quality course experience for you and your online classmates. I also look forward to giving you personal feedback on your project. Click the project, but and under the video lessons to start. Thanks so much for being a student in my online classroom. I hope to see you again soon.