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 "addtocart.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 below, you can see the accent.psd file open.

The same Photoshop file is used for creating all three accent graphics:

- accent1.gif
- accent2.gif
- accent3.gif

You can see that there are four layers, "accent1," "accent2," "accent3," and "Layer 0." The "accent3" and "accent1" layers are hidden so that only the "accent2" layer and background show.. By hiding/showing the layers, you can use the same Photoshop file to save different web 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 shopping cart icon to be green. 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" or "brush" 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 painting over the shopping cart layer! 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 "addtocart.gif."

Making Gradients

Some of the images in this template use a gradient effect. To create a gradient, use the Gradient Tool in Photoshop. For example, let's say that you want to change the color of the heading graphic.

1. Click on the Paint Bucket tool and hold, then select the Gradient Tool.
   
   
    
2. Click on the gradient in the tool options bar to choose the type of gradient you want. The first box is the "foreground to background" option, which means that you can use the foreground and background colors for your gradient. The other one you may also find useful is the "foreground to transparent" gradient, which allows you to fade a gradient using the foreground color only.
   
   
    
3. If you want a two-color gradient, set the foreground and background colors to your desired colors.
   
   
    
4. Then, click on the top or bottom half of the canvas, hold shift (this keeps the gradient in a straight line), and drag to the other side of the canvas and let go. You can keep experimenting and adjust the gradient until you like it.
   
   
    

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 "columns-a.gif" or "columns-b.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.