Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
Saving a file for the Web may seem as simple as going to File > Save As > JPG. However, if you don't take the time to properly optimize the graphic, you may end up creating a file that is multiple times larger than it needs to be. In this movie, we will take a look at optimizing a graphic for the Web out of Photoshop. I'm inside Photoshop CS6 with the photo of this collapsing house. Now if you have an earlier version of Photoshop, don't worry, this technique works the same regardless of what version you're in. This image is a photograph and photographs are best rendered as JPGs for the Web.
Now if I try to save this out as a Web graphic, this image maybe way too large, and in fact, I can see down here it's telling me it's 6.6 MB, which is a little too big. So what I need to do is remove some of these excess pixels in Photoshop before I save it out as a Web graphic. So I'm going to go up to Image > Image Size. I can also use the shortcut Command+Option+I on the Mac or Ctrl+Alt+I on the PC. Now in this dialog, I need to reduce the number of pixels. We can see right now this image is 3300 pixels wide and almost 2200 pixels high.
That is larger than most screens on computers today. So we're going to reduce the number of pixels. Before I do that, I'm going to change the method of this to Bicubic Sharper, which is best for reduction as you can see here. Now I'm going to go up to the top and change this to 700 pixels, because that's the width of the image that I want to put online. And you can see we've already reduced our image from 6.8 MB down to 316 K just by cutting out some of the extra pixels. So I'm going to click OK and now our image is smaller.
We're going to view this at 100% by going to View > Actual Pixels. Now we can see it still looks good, but we wouldn't be able to zoom in forever to get more detail because we've disregarded that additional information. But for the Web, that's perfectly fine. Now that we have the image the size that we want it to be, we need to save it for the Web. Now the incorrect way to do this is to go to File > Save As. If you do this and choose a format like JPG, I'm going to save this to my Desktop.
You're going to see I don't have that much control. Sure I can play with this slider and get a preview of the file size, but I don't know what this picture is going to look like. I would have to export, open it back up again and take a look at it, and it would waste a lot of time. So I'm going to hit Cancel. A better way to save your graphics out is to go to File > Save for Web. Now in this dialog you may be in Original tab up here, but what we're going to do is go to the 2-Up tab. What this is going to do is let me see the original image in Photoshop, as well as the exported image.
So right now if I click down here, we can see it's set to GIF. Well I don't want this as a GIF; I want this as a JPG. So I'm going to come up here and change this from GIF to JPG. Now here is the Quality. If I bump this up all the way to 100, that's the best quality possible, and you probably wouldn't be able to tell the difference between the two of these. Unfortunately, we can see this is 264K which is way too large for us. So what we need to do is lower the amount. So I'm going to change the Quality here down to about 47%, and now you can see we've cut this by over 50% down to almost 100K, and it looks pretty much the same.
If we try to go lower, if I go all the way down to 9%, now we're getting pretty small, but we're starting to see these artifacts. In fact, if I zoom in a little bit, you'll see it starts to look worse, so I'll grab the Hand tool here and pan a little bit, and we're not getting the detail that we want. So you have to find a combination of Quality and File Size that you're comfortable with and I personally find usually around 50% works the best. If you want to compare more options, you can go to 4-Up and I can see what the higher quality is, here is a 49, and I could go up to let's say 74. Let's see here is another 49, and then a 12.
But we can see the combination of the best quality, the worst and then something in between, and figure out what you're comfortable with. If I like this one the most, I'm going to click this and then hit Save. I'm going to put this on my Desktop and we'll call it jpg.jpg, and now we have exported this for the Web. Now let's take a look at a GIF. As we learned in an earlier movie, GIFs are great for logos or areas with flat color and basic transparency, and this picture is perfect for that.
So if I go to File > Save for Web, we can see that if I left this as a JPG, the file would be small, but we wouldn't have any transparency. So I' m going to come down here and change this to a GIF. Now we have transparency available. Over here is a Color Table where you can reduce the number of colors available to reduce the file size, but by default it's actually doing a pretty good job. So we are just going to leave this as a GIF and click Save. We'll put this on our Desktop as a GIF and there we go. Finally, we have a PNG.
PNGs are great if you want to have a lossless image that you need to edit later, or if you have transparency with multiple levels, for example this nice soft Drop Shadow, so this is a perfect candidate for a PNG. So we're going to go to File > Save for Web and here we can see with a GIF, the Drop Shadow just wouldn't look very good, it doesn't show the multiple levels so you would see sure a little bit of transparency but that really wouldn't look good if it was on a colored background. So I'm going to go to this one and switch it to a PNG-24, and as you can see, it has a nice soft Drop Shadow.
We'll click Save, put it on our Desktop, and now we have a nice PNG graphic. If you use Illustrator or Fireworks to create Web graphics, this technique of saving for the Web will be quite similar, no matter which program you use, your end goal is to create high-quality images at the smallest file size possible for placement within Muse. If you'd like to learn more about creating Web graphics, check out Mordy Golding's Illustrator CS5 for the Web and Interactive Design, Jan Kabili's Photoshop CS5 for the Web or Jim Babbage's Fireworks CS5 Essential Training.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.