Photoshop and Your Web

We've included ALL the Photoshop files used in this web site.

When you open a Photoshop file, make some changes, and save, nothing will happen to the images on your web? Why? Because you have to first save your file for web, in .gif or .jpg format, then import your saved web file back into your web site.

We show you how to save for web below. When you do this, you'll probably want to save your images into a separate folder on your computer. This keeps everything in one place. To stay organized, you might have one folder for product images, another folder for category images, and another folder for the basic web images like the logo or buttons. You will also want to make sure that you keep the file name of the graphic EXACTLY the same as the existing web graphics -- for example, if you're changing the add to cart button graphic, you'll want to name the file "addtobasket.gif". This makes replacing the images on the web site MUCH easier!

To import those new web images into your web site:

1. Open your site in FrontPage and make sure the Folder List is showing (that's the column that shows all your files).
2. Then open WIndows Explorer and browse to the location on your computer that holds your new web images.
3. Move Windows Explorer so you can see the FP Folder List underneath Windows Explorer.
4. Highlight the files you want to import in Windows Explorer, then drag/drop them into the "images" folder in FrontPage's Folder List. (You might need to expand the "images" folder first if you're trying to import category or catalog images.)
5. If you've name the web files EXACTLY the same as we did, then FrontPage will ask if you want to replace those files. Click "yes," and your image files will replace the original template files. Preview your site to make sure it all worked!

Layers...

When you open a Photoshop file, you'll most likely want to have the Layers Palette open (Window > Layers). Layered files make it easier to edit different elements of an image.

In the diagram to the right, you can see the menu.psd file open. The same Photoshop file is used for creating both the left and right rounded corner graphics of the top menu:

- menu left graphic  - menu right graphic

You can see that the "menu bottom" layer, containing the purple part, remains constant for both images. But there are two layers holding the right and left parts of the orange menu. By "hiding" one or the other layer, you can then save/export the two separate menu graphics.

You can hide or show layers by clicking the "eye" icon area, shown in the diagram above.

Changing colors...

If there is a layer in a Photoshop file that is of a solid color, you can quite easily change the color to something that suits you better.

For example, let's say that you want to change the orange menu to be pink. First, make sure that the layer is locked. Click on the layer to select it, then make sure the "lock" icon is selected.

Select the "paint bucket" tool, then click on the colored square (the front one) which then allows you to select a color. Use the sliders or click in the large square area to pick a color, then click OK.

At that point, it's as easy as clicking in the document on the orange area, which fills it with pink! Because the layer is "locked," you will only color any available pixels, and won't accidentally fill in the background with the color. You can now save for web as "menu-left.gif."

Saving for Web

1. Go to File > Save for Web.
2. In most cases, we've already set up the optimized format for the image, so it will already be set as a .gif or .jpg with reasonable parameters. So all you have to do is click Save and not worry about the image settings! (If you do want to play with quality, select either GIF or JPEG and then play with the number of colors (gif) or quality (jpeg). Look at the resultant file size in the left bottom of the window to compare results, and try to strike a good balance between the file size vs. the quality of the preview.)
3. Save the image as the same filename that you wish to replace. For example, as "menu-left.gif" or "menu-right.gif."

Product images

For best results, your product images (large and thumbnails) must all be the same size. We recommend that you keep them the same dimensions as what we've used: 225x255 pixels for the large version, 95x108 for the small version.

The easiest way to create your product images is to use the Crop tool. With the Crop tool selected, type in the width (225) and height (255) that you wish to crop your images to. Make sure the Resolution is set at 72 pixels/inch.

Then, click, hold, and drag to create a rectangle around the part of the image you want to crop. When it looks about right, double-click inside the rectangle. Photoshop will automatically crop and resize the image to the right dimensions.

You can now save this image for web as your "big" product image. We would name ours something like "chocolatecake_big.jpg."

Now, go to Image > Image Size. Make sure "Constrain Proportions" is checked. Change the width to 95 pixels:

This will automatically resize your image to the smaller thumbnail size. Save this for web as the small thumbnail image ("chocolatecake_small.jpg").

You can now close the original image, clicking "No" when Photoshop asks if you want to save. This will preserve the original image.

Category Images

The category images are their individual Photoshop files (categorypic-birthday.psd, categorypic-candy.psd, etc.). When you open these, you can simply edit the text layers using the text tool, then save them as the same file name to replace the existing image.