- Working with the Slice Tools
- Optimizing Image Slices for the Web
- Saving Your Image Files
- What's Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Saving Your Image Files
Let's assume that you've made your individual changes to the slices in the Save For Web & Devices dialog, and you've specified how much compression you want to use. Time to save, right? When you click the Save button, you have a few options: You can save the HTML file and the images, just the images, or just the HTML. Before you jump to thinking that Photoshop took care of everything with your HTML layout output, there are a couple of things to consider.
Which Files Should You Save?
The problem with saving the HTML file with your images is that by default Photoshop uses tables to put together all of the individual image slices. This approach isn't consistent with Web 2.0 standards, and it can really slow down your site. These days, it's important to embrace current web standards, which means using CSS to lay out any graphical elements in your site. Photoshop has an option to lay out the site in a CSS mode, but the CSS that it uses relies on absolutely positioned <DIV> tags, which aren't as robust as laying out these components on your own. Putting together the HTML isn't very difficult, and using Photoshop's HTML layout as a template can help you to visualize what to do with the layout. So go ahead and save the HTML and images (see Figure 10).
)
Figure 10 To export a page with its graphics, select HTML and Images in the Format pop-up list.
Organizing Your Saved Files
When you work on a website, it's important that you give your files and folders some structure. Without organization, you'll just have a folder containing hundreds of images and dozens of HTML files, with no way of finding things you need for a specific page. To avoid that problem, I always advise following the oldest truism of organization: "A place for everything, and everything in its place."
Here's how I set up my file/folder structure:
- When I start work on a project, I create a new folder for that project.
- Inside that folder, I make subfolders for each of the raw files that I'll use to build the website: Photoshop PSD files get a folder called PSD Files, Adobe Illustrator AI files get a folder called AI Files, Flash FLA files get a folder called FLA Files, and so on.
- Next, I create a www folder to act as the main storage place for the website files.
- Inside the www folder, I create a subfolder called sliced_exports. Anything that has to do with the overall user interface of the website—radio buttons, graphical lines, "mail now" buttons, and things like that—goes into the sliced_exports folder (see Figure 11).
- Any images that I want to show on the site go into a folder called images.
- With all of that structure set up, any sections of the website get their own folders as I start working on them. At this point, my folder structure looks like the one in Figure 12.
)
Figure 11 A sample folder structure that I use for working on websites.
)
Figure 12 The Files window in Dreamweaver CS5.
When your folders are set up the way you want them, export your sliced images and sample HTML file into the appropriate target folder for your site. Then you're ready to set up the site in Dreamweaver.
When you define the website, set it up so that the root folder of the website is in your version of my www folder—not in the parent directory of the project. Otherwise, you'll end up with all of your project folders on the Web, rather than just the ones that you need for the website.
If you need help on setting up your site with Dreamweaver, check out my Dreamweaver podcasts on Peachpit.com. If you want to learn the start-to-finish process from me, visit my class called "Building a Website with Photoshop CS4 and Dreamweaver CS4" on the Kelby Training website.