Graphics Zone - Photoshop 5 14

BONEFISH

CE CASH 3.0

Photoshop 5 Course Part 14

by BarryHilton, Adult NetSurprise

How to cut up graphics for the web
This week we are going to show you how cut up graphics for the internet, making load times faster and lower bandwidth...

In our example we will continue our 'Bondage' site by adding three headers. To see starting header examples click here.

These headers are 47.3Kb, in this tutorial we will show you how to reduce this, lowering your bandwidth and surfers load times.

Our header has five layers (from top to bottom), our logo, 'Discipline' text, 'Dungeon' text, 'The Chamber' text and a black background layer.

The first thing we want to do is turn on all our layers so they are all visible, on each layer ckick the small box furthest to the left of the layer name so each layer has an 'eye' icon next to it.

First, move your curser over the bottom right corner of your image border, your curser will change to 'diagonal arrows', click and drag the border approximately 1 inch so you have a grey border area around your image.

Now, select the 'Marquee' tool from the 'Tool' menu. Click in the grey border above and to the left of the top left corner of your image and drag your marquee across your image to the right and down to just above your text (Discipline, Dungeon and The Chamber). To see our example click here.

Then go to the 'Image' menu at the top of the screen and select 'Crop'. Save tour new image as header_top.

Go to the 'Image' menu at the top of the screen and select 'Image Size', make a note of your header_top's width and height in pixels.

Now open your original header.psd file again. Still using the 'Rectangular Marquee' change style to 'Fixed Size' and enter the width and height of your header_top.

Click inside your original header and drag the marquee to the top of your image. Then go to the 'Select' menu at the top of the screen and choose 'Inverse' from the menu. Then crop your image by going to the 'Image' menu at the top of the screen and selecting 'Crop'. Save your image as 'header_bottom.

Repeat this procedure on your header_bottom psd file for the left and right edges of your text. Save your images as header_left, header_right and header_middle. Save your images as either gifs or jpgs, choose the least file size. To see the example cut pieces click here.

Now we are ready to make our final headers... To see the final headers click here. Our new headers are only 26.1Kb in total, a saving of 21.2Kb or 45%! And the more headers you have, the more you save!

This week's To-Do Assignment:
Follow this weeks tutorial and make a reduced size header graphic!