Understanding Web File Formats / Basic Image Optimization for PNG
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
Are you ready to save out a PNG? Well, sadly, it's kind of uneventful. We don't really have a whole lot in terms of the settings that we can use. At least not yet. Later on we'll see some additional PNG settings that we can use with our images so once again from the Lesson 5 Folder, I have Scientist.psd open here inside Photoshop and all I'm going to do as always is I'm going to head to the File Menu and then down to Save As and then from the Format Menu this time I'm going to choose PNG or ping, if you will and of course up at the top here I'm saving it as Scientist.png into the Lesson 5 Folder. Go ahead and click on Save and if you were expecting a dialog box with some settings, well, unfortunately I have to disappoint you here. All we get is some PNG options; Interlaced None or Interlaced so I'm going to stick with the defaults, None, which is just fine here. Go ahead and click on OK and that's it. You get a PNG. So if you want you can go and open that guy up and compare him back to the original if you want. As a matter of fact, maybe we should do that. So what I could do I suppose is I could head up to the File Menu and choose Open. But check this out. I've been waiting for an excuse to show you this really cool shortcut and here it is. You know this seemingly useless gray background here inside Photoshop? Well, try double clicking on it. That's a shortcut to get to your open dialog box. Isn't that awesome? I've been waiting to show you this. Anyway, double click on that gray background, gets you into the open dialog box and let's go and open up our Scientist.png. Look at all of our copies sitting there inside our Lesson 5 Folder. Anyway, Scientist.png. Go ahead and pop him open and if you want you can just sort of do a side-by-side comparison if you want. Now, mine looks practically identical to the original. In fact, I think it is and I'm just looking down at my file size down in the bottom of the Document Window. He's for all intents and purposes exactly the same, right? Now, one cool thing that you can do here in Photoshop if you want, if you do want to compare images back to the original, maybe you want to compare your GIF back to the original or you JPEG back to the original. That would be a great idea; is you can head back to your Window Menu and then down to Arrange and then I'll choose Tile and now I get this sort of this side-by-side comparison, right? Or how about this? I'm going to hit Command O or Control O on the Windows side and I'll go and grab my GIF. So Scientist.gif and I'll pop him open and let's throw him into the mix. So I'll head to the Window Menu, down to arrange and then I'll choose Tile once again and now we get something like this, right? So I'm just going to hit Tab here to get rid of my Toolbox and my Panels and let's go and grab our JPEG as well. So I'll double click in this gray background or you can choose File Open or you can hit Command O or Control O, whatever you like and there's Scientist.JPEG right there and I'll pop him open and let's tile them all once again. Window, Arrange and then Tile, something like that and there you go. So there's the original in the top, left corner. There's the PNG, which is for all intents and purposes completely identical to the original. There's the GIF and if you look closely you can see some degradation there, the drop shadow on the back of his head for example, right? The colors look a little more washed out and then there's the JPEG down in the bottom, right corner. So there you go. There's how you can compare you files back to one another and also of course a closer look at the JPEG, GIF and PNG settings inside Photoshop.
Tutorial Information
| Course: | Adobe Photoshop CS4 for the Web |
| Author: | Geoff Blake |
| SKU: | 34089 |
| ISBN: | 1-936334-01-1 |
| Release Date: | 2010-02-25 |
| Duration: | 7 hrs / 105 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 