Advanced Search

The BoxedArt Guide to Using Website Templates

Save for Web Produces Different File Names than Expected

I saved the PSD file for the web, and the new ../images are not appearing in the template...

Check the slice names in your .psd See: Appropriate Naming Conventions for Saving Your Sliced Template

Make sure the file type for your new image matches the template's original – gif needs to replace gif and jpg needs to replace jpg.

How to resave a gif as a jpg, or a jpg as a gif:
You should not attempt to simply type over a file extension, i.e. switch .gif to .jpg or .jpg to .gif in the file name. Gifs and jpgs use different color settings and must be re-saved as different file types. Photoshop's Save for Web has the file type option built in: if you open a .gif file in Photoshop and go to File > Save for Web, choose .jpg as the exported file type, or if you open a .jpg file, choose .gif as the exported file type:


Make sure your new ../images are saved into the template's html/../images folder

Check the web page's HTML source code. The "img src=" tags need to display the correct pathway to your ../images, i.e. <img src="../images/filename.jpg">

Back to Design Tutorial