Lessons

Lesson Info

Preparing Images for the Web

So we've talked about resolution for printing. But what if you're not gonna print your image? What if instead I'm gonna email it to my fiancee or I'm going to Do you know something similar to that? I'm gonna load a noon into a database program. I'm gonna dio something other than printing. I'm gonna put it on the web. If you're going to do anything that where it goes on the Internet, your picture is going to be displayed at the coolant 100% view and Photoshopped. So if you want to see how big it's gonna look, the resolution number that's in there that pixels per inch does not matter whatsoever when the images being displayed on screen on the Internet browser or in your email program the numbers ignored. That number means when you print how bigger the pixels. When you view an image on the Internet, you always view them 100% of you unless there's some software plug in or something else that's doing special scaling or something. But 100% views what you get. So to get to 100% view in photo ...

shop, you can double click on the zoom tool, a little magnifying glass tool, and it will bring you up to 100%. This is how big this picture would look if it was displayed in a Web browser that's massive. That's how big it's gonna look in most email programs. So if you just shoot on your DSLR camera and then you email the results to your fiance or something, they're going to see why the heck did you send me this absolutely massive image, Right. So let me show you how I think about scaling things for the Internet. It's gonna be emailed. Or if it's going to be displayed in a browser, I will zoom in or zoom out of my picture until it's the size. I want it to look on somebody else's screen, so I usually just type command plus in command minus. Or if you need a slider to do it. You know you just can't handle that abrupt change. You could go up to the window menu, and I think they still have the navigator to the ticket out yet. Don't Navigator Navigator palette. Go to the window menu. Choose Navigator. There's a slider there in that slaughter, will you allow you to zoom in and zoom out. I would do that until the picture is the size of like somebody else to see it. If they would see it in their email or a Web browser and then either at the bottom of the Navigator palette. If that's what you used to, zoom in and zoom out or in the bottom left of your image window you see down here bottom off the image window, there's gonna be a percentage. And that percentage tells you what you need to scale your image down to in order to make it look that big, an email or in Web browser. So I'm gonna remember that number if you need it to be exactly that big. Remember the exact number. I'm just gonna remember 6% close enough, and I don't need it exact. And so if that's the case, I go to the image menu. I choose image size. I went to the image menu, chose image size, and I need to do to general things. I need to first make sure this check box at the bottom has turned on its called re sample image. What re sampling mentioned general means is, allow me to change the amount of information that's in this file, either adding information to it or taking away. If that's turned off, it cannot change. The width and height of the image in pixels can't change the number of squares it's made out of, so we need to have that turn on. The second thing you need to dio is changed the measurement system from inches 2% from interested percent and then type in the percentage I saw at the bottom of left of my document, which is also found in the Navigator panel. So if you needed to be precise, type in the precise number 6.39 or if you don't have it visually convenient, just type in approximately what it waas and then click OK. When you do, your picture is gonna look tiny. That's because you're not viewing it in Internet size. You're not unit at a higher percent view. The view it out 100% viewed double click on your zoom tool, and now it's gonna look exactly the size it was a few moments ago when I decided how big it should have been. So I'll do that once more. Let me revert. This image doesn't usually take that long to revert. Here we go and either type command plus in command minus that's control plus in control minus and windows to zoom. Or if you need more precision in fluidity in that you could go to the window menu and choose Navigator and there's a little slider here, move it until the picture looks the size. You like somebody to see it in email or on the Internet in just note the percentage that shows up, either in the lower left of the Navigator or the lower left of your document. The numbers will be the same. Go to the image menu, choose image size. Make sure re samples turned on so it can change the amount of information it's in. Your file changes to a percentage in type. In what you saw then, to confirm that everything worked. View it Internet size, meaning viewed 100% view. So double click and your zoom tool, and it will be exactly the size that we had a moment ago. And then if I save this image and I loaded in a Web browser, it will look exactly that big. Whereas otherwise, if I didn't scale it, it would have looked double click of my zoom tool this big, huh? So that's how I deal with thinking about how big show scale things. Now if you're going to be creating documents brand new from that when you're done with that process, let's see if I can. Okay, you can always go up to the image menu and choose image size and just glance and say, Well, how many pixels wide was that? 180 190 pixels wide? So if you want to create a brand new document that's the same, you could type in a width of about that. And that's the size you like for the Internet, you know, if you ever have to type it in somewhere to do things. But this will tell you in the end, you're width and height. And so, if you ever needed create new document created approximately that size, any questions about scaling for the Internet? It's pretty reporter scaling question. But can I back up to the resolution way were talking yesterday the day before about switching between RGB and seem like a doesn't have anything to do with your resolution. Not so much with resolution. No, your resolution will stay the same. You do have Ah, you know, you should be within the resolution perimeters that I mentioned over there. But it doesn't matter when it is that you change that before After you convert the seem like a But there is something involved with converting Seem like a And that is, if you go to the edit menu and you go all the way to the bottom, there is a choice called color settings. In the color settings, you're gonna get a complicated dialogue box. There's a little pop up menu right here that says seem like a This determines how it's converted. This determines what kind of putting your preparing that image for. And so if you're not overly versed in this, you need to talk to the people that would print your image to say, What setting should I use right here? Okay, I wasn't gonna get into depth here, so I'm just put it that way. But if you have this set to the wrong setting like you have this set to something that would be for a newspaper, but you're sending it out for a high quality brochure, it's not gonna look as good if you have a set to the wrong setting. Have been a lot of folks asking about what you think about the same to Web option. Saved weapons great, big. Over here, you can choose safer Web and the thing that one of the things that's good about safe for Web is in order to make the colors look right in your image. When you say it to the Internet, your image needs to be in what's known as S RGB in here with default settings, it automatically converts its ass RGB, which will make your colors look appropriate for the Internet. And so I could do that. When it comes to file formats, you have to choose between. A few of them here used J. Peg for photographs, but a common mistake for photographers is to use J peg for everything. If what you're saving is not a photograph. Instead, it's your logo words from text, or it's just something that's not photographic. Instead, it create contains large areas of solid color and maybe crisp edged objects like logos and text. Don't use J peg. If you use J Peg, it's going to have what I would call popcorn around the edges of everything. It's gonna have this weird distortion around the edge, which is compression artifacts. Those compression artifacts air usually disguised in a photograph because you have a lot of detail if I hide within. But J. Peg is good for photos. If you have a logo or graphic like a bar, chart that kind of thing. Stay away from J. Peg in either use GIF or use ping gift for paying. Those are good for graphics but safer webs. Great. Make sure this convert to S RGB has turned on. I just find that the scaling that it gives you isn't as interactive as using the slider in the Navigator or just zooming in and zooming out to figure out what kind of scaling you need. And when it comes to saving your image mainly with J. Peg, you have the quality choice here, and the higher the quality of the larger, the file size better the picture looks, and so it's a matter of figuring out what your standards are aspires. That goes, if you always go with Maxim, you're always gonna have huge files. They're going to take a little while to download in. So I'm still in annoyed of people have massively huge pictures that are take forever to download. So yes, even down to like from 100 to 6 or 7%. Would you do that all the time of their cases Where you do in small increments? Yeah, there's if you've been following Funder Shop for a long time, there's been out there for a while. A tip about scaling images and that is to go up in 10% increments. End That's it. Worked well, a few versions of Thunder Shop ago. Quite a few, actually. But Adobe has changed the math on how they scale an image. And it used to be that if you went in here to image size that the menu at the bottom, I used to only have a few choices. Usedto have nearest neighbor by cubic on, and I don't know if it have by linear in all that, they added the East choices called by cubic smoother, which is better for enlargement in by cubic sharper, which is better for reduction. And in the process they were trying to make it so you don't have to do that in 10% increments. Instead, this does a good job of it. They finally in Photoshopped CS six, and I'm amazed it took him this long. Came up with by cubic autumn automatic, which all it does is switched between these two settings based on if you're scaling up or down, it's like how much math would it take them to figure out that the image is getting bigger or smaller, and we shouldn't have to manually switch between these two. So by cubic automatic means like Photoshopped, figure out. What should the two settings to switch between? And that's new in CS six by cubic automatic. If you have an older version of Photoshopped, you click here. If you were going to scale down, he'd be best if you used by cubic sharper. And if you were going to scale up, it would be best if used by cubic Smoother. Now a CS six. Leave it on by cubic automatic. It doesn't for you. Okay, now the question tm there is always a oh, back in your book. We use this, but I see a lot with the Web to use a common resolution of 72. Yeah, No. 72 that the origin of that number, You also see her? The number 96. Those two numbers get floated around. The number 72 is the screen resolution of the original Macintosh that was released in 1984. If you held a ruler up to it on, you counted the numbers of pixels that made up the screen. That'll be 72 in an inch. There's a reason Apple pick that. And that's because in the measurement system that publishers use, which is points in pikers 70 to fit in an inch, as Faras doesn't go. But unless you're working on a 1 28 K Mac, you know, like the original, that number really doesn't have a modern purpose. If you were to look at the resolution of your screen, it's much higher than that. Windows started out, I think, with 96 is their resolution, and so those two numbers get floated around a lot. But the resolution to your screen is much higher than that now. In that number, it doesn't really need to exist anymore. As far as the standard goes, does it really matter for being online. But what about for protecting your image? It against being downloaded and printed is a lower resolution. Upload. Better to protect yourself? No, what I'm saying there is. When I say resolution, I mean this specific number right here for resolution. What matters for the Internet is width and height and pixels. That's the amount of information that people are getting. This number is only applied when printing. If you wanted to protect yourself, sure, if you typed in 30,000 and somebody downloaded your picture pronounce like this really tiny. If they used a professional publishing program, if they used their Web browser would look like it did in the Web browser, this number is completely, totally ignored. For the Internet, it's only if you were to save that image off the Internet and loaded into a professional publishing program like in Design Quark Xpress. Other things designed for doing magazine layout when you loaded into be tiny, then they could just scan looked whatever size they want. This is not gonna protect you whatsoever. What will somewhat protect you is within hide and pixels, meaning scale your picture down. So it's small But this number, for the most part, doesn't exist. When it comes to the Internet, it's absolutely irrelevant. So it's within hiding pixels that matters online. So, um, that's just I guess I've always heard that if you put it then you're fine. How big the images? I couldn't possibly print it if it was 72. That's not true. Well, note will cause watch this. If I taken image, that's got this much information in it, and I go over here in first off when I open it much, that's that's That's the advice. Let's open this up and we're in camera at the bottom. We can click on this little line of text. Let's type in and I'll click. OK, then I'll open the image and I'll zoom up to Internet view. Look at how much information they could get. I could take in a resolution of one. All it means is how bigger the pixels you have when you print. If you take out the words when you print that number matters, not that number doesn't exist unless you're printing. So what? What they're really trying to tell you is they're trying to make things easy by going to image size insane. If this number was really high and you left your inches your width and height the same, you could bring it down and it would do some stuff for you. They're trying to give you a generic way of scaling an image. But if so, the higher the resolution, your camera, the bigger the picture is gonna look, the lower the resolution, you could IPHONE photos gonna look much smaller. Where is what I'm showing you? Is where, regardless of the source of your picture, if you zoom in and zoom out on it, too, get it to the size you want and you go through the process, I said. Then, regardless of what the number says for resolution, your picture will be that size, and that's all the pictures people will ever be able to see. They won't be able to seem, or if they zoom up on the picture, it'll turn into pixels. You know where it looks, Jaggi. So there's some I could give you a picture that says 72 but you can print it the size of a wall and it'll be sharp, you know, because there's enough information in it. It's the width and height and pixels that matters when you're going online with in hiding pixels. Good to know so much information here. So I want to First off changed my camera away from 72 because that would make it so one imprinting the pixels would be quite large. You could fit only 72 in an inch. So the and it could look very Jaggi. So anyway, that numbers for printing on. So I gave you a little chart that told you what range I would suggested use. And 72 I wouldn't think of. What I think of when it comes to on screen is how big doesn't look at 100% view. So zoom in and zoom out, tells the size you want and then scale it to the percentage you see there. And it will be exactly that size when you see it in the Web browser and email or anything else. And if anybody ever zooms up on it, it'll just make the pixels get bigger and you won't see any more detail. So it worked nice