Exporting from Photoshop / Final Photoshop Adjustments
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
OK, so let's head back to Photoshop and make one final adjustment to our layout. We'll get rid of this white space here. And you might be thinking - Just crazy! What's the big deal with the white space? Well, every single Div that we have inside our layout, don't forget, has an associated CSS Rule. So that means that all this white space there's additional Rules inside our CSS Styles Panel that aren't really even needed. So this is sort of a way to economize your layout, if you will, or streamline it so that it's easier to manage, easier to work with, right? So, I'm going to head back over to Photoshop here. Actually pulling this off is really, really easy and the reason why we get Divs and the white space and the extra graphics and all the rest of it, is because Photoshop treats your entire layout here as if it's entirely built out of one solid rectangle, all rows and columns. Think of a traditional table, right? As a matter of fact, if you zoom in - I'm just getting off-topic here a little, but I'm going to show you something real quick here - every slice that you and I created together is marked in blue. And all the white space between the slices that you and I created are marked in gray. So there are two primary types of slices here inside Photoshop, we have what are called User Slices, so a slice that you create yourself and then all of that extra space that's left over has got to be filled with something, right, because Photoshop's all about a rectangles, so those gray slices are called Auto Slices, or think of them as filler slices. They're just kind of needed, right? But I want to tell Photoshop to not bother with the Filler Slices - only give me the slices that I actually need, right? So, once again, third time into this Save For Web and Devices dialog box, found underneath the File Menu, of course, head in here. I'm going to leave all the defaults. I'll just hit Enter on my keyboard, back into the Save Optimized As dialog box and there's one tiny change I'm going to make here. Way down at the bottom we have Slices. Instead of telling Photoshop to Export All Slices I'm going to tell Photoshop to Export All User Slices, or slices that you and I have defined together. Let's click on Save. We get this massive Replace Files dialog box here. Click on Replace. Photoshop does its thing. I'm going to head back to Dreamweaver. I get this Update dialog box: The file has been modified. Do I want to reload it? I'm going to say Yes. The layout gets reloaded in and now all of the white space in my layout is actual real white space, not extra graphics, or extra Divs or anything like that. So if you want to take a moment and fiddle around inside Dreamweaver with your new CSS Layout, click around a little bit and explore. Definitely go for it and then when you're ready let's continue on and from here on in it's all about Dreamweaver and CSS.
Tutorial Information
| Course: | MasterClass! - Adobe Creative Suite: Web Design Workflow |
| Author: | Geoff Blake |
| SKU: | 34049 |
| ISBN: | |
| Release Date: | 2009-10-20 |
| Duration: | 2.5 hrs / 36 lessons |
| Work Files: |
Yes |
| Captions: | For Online University members only |
| 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 