Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Saving your designs for the web is actually a pretty streamlined process in Adobe Photoshop. All you have to do is access something called the Save for Web dialog box. In this movie, I'll be exploring that dialog box and everything that goes along with it, to help you optimize your images a little better. In order to access this, I need to go up to the File menu and choose Save for Web. Inside of the Save for Web dialog box, there's a lot going on in here. Let me try to break it all down so we know exactly what's happening. At the very top, you're going to notice that you have several different tabs. The tabs indicate either the original image, an optimized version of the image, or you can get a 2-up or 4-up preview to see how the image looks in different file formats.
This is a great way to sort of beta test your file formats before you actually export them outside of Photoshop. This is where you can really get creative with the file formats of each individual image, especially in a sliced composition like this. For now, I'm going to switch back to the Optimized tab so we can see the entire image a little bit better. And let's take a look at the tools we have available to us on the left-hand side. I have a Hand tool, which allows me to pan around inside of the document to get a better look at everything. I also have a Slice Select tool so I can individually select slices and optimize them accordingly. I have the Zoom tool so I can zoom in and out on different portions of the image and see how it's being optimized in different areas.
If you zoom in on it, you can hold down the Option or Alt key and then click to zoom out as well. I also have an Eyedropper tool. The Eyedropper tool allows me to select different portions of it, sampling different colors. There's my foreground eyedropper color right there. I can also toggle on slice visibility. If I don't want to see the slices, I can toggle that on and off right there. Towards the bottom of the dialog box, I get information about the current slice that I'm working on. So right now, this slice up here is going to be optimized as a GIF.
It should take up about 4.427K of space, and it should load at about 2 seconds on a 56.6 Kbps modem. That's a really old speed, so I wouldn't worry about that too much. I actually wouldn't worry about any of these at all necessarily. You can play around with these and see what the suspected download time would be for that, but it's going to be different for everybody on every machine and every Internet connection. So the goal here is to get the images as small as possible while still maintaining quality. You don't want to sacrifice quality, because you have to have your designs look good on the web.
So don't worry too much about file size because we've got fast computers, fast Internet connections nowadays, and so most of the time, they're going to load pretty quickly. Over here on the right-hand side of the screen, you're going to get your presets. You can open up the Presets dropdown and you can pick different presets that are in here already, like JPEG High, JPEG Low, JPEG Medium, et cetera. Or you can simply create your own optimization settings right here underneath it. So if you wanted to change the file format, you change that here. So if I wanted this to be optimized as a JPEG, I just pick JPEG like this.
Then directly underneath that, I would pick the Compression setting. That's up to you again. Quality setting, whether or not this is a progressive download, that means does it download in multiple passes, so it downloads a little bit, downloads a little bit more, kind of a progressive step down as it downloads. Optimized, it tells you here it creates smaller but less compatible files. That's okay. Do you want to embed a color profile? No, I do not. I'm going to make sure that it's not checked. You also want to make sure that Convert to sRGB is not checked. That way you maintain the color integrity as you take this out of Photoshop.
And you also want to make sure that your preview is set to Monitor Color. If you go back to the color chapter in this course, you'll understand exactly why I switched that to Monitor Color. And if you wanted to, you can also change the metadata of the file to add copyright information and all that kind of thing. Now you're not going to see a color table for a JPEG image because these are not palette-dependent. So if I switched to something like a GIF, for instance, you will see the entire color palette pop up there. That's because this is a palette-dependent file. Also in the Image Size section down here at the bottom, you have the ability to change the size of the image.
So if I didn't think this was the right size, I could actually optimize that for a different size. If you want this to maintain its proportions, make sure this little chain link looks like this. If you want to be able to distort it, you can break the chain and then change each number individually. But I don't recommend doing that because you can create some serious defects in your image doing that. So let's go ahead and click that back on. You can also do that based on percentage and you can change the quality in which you resample it by choosing Bicubic, Bicubic Smoother, Bicubic Sharper. Each one is going to be different depending on if you're going to a larger image or a smaller image.
And then once you're finished optimizing your images here inside of Photoshop, you would click Save to actually save them out to your hard drive somewhere. Now later on in this chapter, we're going to go through optimizing individual images. We're going to go through photographs, transparent graphics, and we're also going to talk a little bit about exporting out Retina display as well. But I wanted to open up the Save for Web dialog box and give you an idea of everything that's going on in here, so as you work your way through those other movies, you already have an idea of all of the different tools and options that we have available to us.
And that'll make it a little bit easier to just go in, save our images, and get out.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.