Slices, Optimizing and Exporting Your Images!

Members Login

Syndicate

Written by David A. Jardine

Monday, 11 September 2006

Slices are the small lines on the Photoshop image which tell the program where to 'cut' your image into small files. Those small files are then imbedded into Dreamweaver html code to create the template you work with.

So, this tutorial is about how to use the slices, to export out new images based on your design. So all you have to do is overwrite the existing ones, and voila! New website!

So easy, for such a complex subject!

Lesson 1: Organizing your Slices (16:03 mins)

Adjusting your template to match your slices
Identifying the slices to be overwritten
Determining the slice filenames
Preparing to Optimize and Export

Click the video icon to the left to begin your tutorial

Lesson 2: Optimizing and Exporting (15:55 mins)

Save for Web panel and settings
Choosing your Slices to export
Customizing Photoshop to Export to where YOU want
Checking for overwritten files
Using Dreamweaver to confirm the success
Previewing your new minisite in Internet Explorer

Click the video icon to the left to begin your tutorial

Break Out Session: Exporting multiple slices with multiple formats at one time for speed and convenience!

Click Here: Multiple Slices, Multiple Formats (8:04mins)

NB: If you are using Internet Explorer, you will have to click inside the
white area in the new popup window to play the file.

Software Download Links:

Dreamweaver 8 : http://www.adobe.com/products/dreamweaver/
Photoshop CS2 : http://www.adobe.com/products/photoshop/
Adobe Reader: http://www.adobe.com/products/acrobat/readstep2.html
Winzip: http://www.winzip.com/
FileZilla: http://filezilla.sourceforge.net/
Firefox: http://www.mozilla.com/firefox/
Thunderbird: http://www.mozilla.com/thunderbird/
ACDSee: http://www.acdsee.com/

Comments (2) add comment

Subscribe to this comment's feed

Tony Prodger said:

Learnt a great deal but a little confused with saving and exporting the jpg files. You used 1.gif, shouldn't it have been 1.jpg for the jpg files

March 04, 2007

D.Jardine said:

When you export, the settings you stipulate for the output of each slice overrides the naming extension. Photoshop only uses the 'name' of the file, not the 'extension'. So it wouldn't matter if it is .gif or .jpg or even .png because each slice has already been set to be a .jpg. This way you can set multiple slices and have multiple formats exported. I could have selected the first three, set them to gif optimize, then selected the next 4, and set them to jpg, and then export all 7 at once, and Photoshop would know what to create each one as.

It's a bit visually confusing in the video, but that's what Photoshop is doing.

If you need further clarification, use the Photoshop Forum and I can explain better there!

DJ

March 05, 2007

Write comment