Graphics Zone - Photoshop 5 13

PUSSY CASH

ANS Linklist

Photoshop 5 Course Part 13

by BarryHilton, Adult NetSurprise

Making a stretchable table border for your site
This week we are going to show you how to make a graphic border that can be used in 'html tables' that strethes to the correct size of your image or text. Works with Version 4, Internet Explorer and Netscape, browsers of higher.

The first step is to create a new image. Go to the 'File' menu at the top of the screen and choose 'New' from the menu... From the menu that pops up enter 150 pixels width, 150 pixels height, and 72 resolution.

We will use a black background, so change your foreground color to black by clicking the little boxes on the bottom left of the color selector. Then select the 'Paint' tool from the 'Tool' menu and click inside your image to make your black background.

Then add a new layer to your image. Click on your 'Background' layer then click the create new layer button at the bottom of the 'Layers' menu. Double click on this new layer and rename it 'Border'.

First, we want to create our borders rounded corners... Select the 'Elliptical Marquee' from the 'Tool' menu, entering a Style of 'Fixed Size' and a height and width of 12 pixels in the 'Marquee Options' menu.

If you need, use the zoom tool at 500% to place your marquees accurately.

Now click inside your image and drag your marquee to the top left corner. Then while holding 'Shift' on your keyboard add marquees to the remaining three corners.

Now change your marquee to a 'Rectangular Marquee' on the 'Tool' menu and alter 'Style' to 'Normal' on the 'Marquee Options' menu.

Keep holding 'Shift' on your keyboard and draw a rectangular marque from the top middle of your top left round marquee to the bottom middle of your bottom right round marquee.

Still holding 'Shift' draw another rectangular marquee from the left middle of your top left round marquee to the right middle of your bottom right round marquee.

You will now have a rectangular marquee selected with rounded corners.

Choose red from the 'Swatches' menu. Then select the 'Paint' tool from the 'Tool' menu and click inside your marquee to make your red border.

Now go to the 'Images' menu at the top of the screen and select 'Canvas Size'. Enter values of 154 pixels for height and width. We do this because the 'Contract Marquee' option does not work correctly when the marquee touches the edges of your image.

Then go to the 'Select' menu at the top of the screen and select 'Modify' then 'Contract'... Enter 4 pixels for how much to contract your marquee and click OK.

Press 'Delete' on your keyboard to remove the center of your rectangle and leave your border.

Now go back to the 'Images' menu at the top of the screen and select 'Canvas Size'. Enter values of 150 pixels for height and width to reduce your image to its original size.

Now we want to add a bevel effect to our border... Right click on your 'Border' layer and choose 'Effects' from the menu. De-select 'Drop Shadow' and go to the 'Bevel and Emboss' menu. Enter values for highlight mode 'Screen, opacity 75%, shadow mode 'Multiply', opacity 75%, style 'Inner Bevel', angle 135, depth 5, blur 5 and 'up' selected. To see our example click here.

Now we need to cut up our image so we can use it as a border for our 'html table'. First we need to merge our image... go to the 'Layers' menu at the top of the screen and choose 'Merge Visible' from the menu.

Then select the 'Rectangular Marquee' from the 'Tool' menu, entering a Style of 'Fixed Size' and a height and width of 12 pixels in the 'Marquee Options' menu.

Starting with your top right border corner... Click on your image and drag your marquee to the top right corner. Press 'Control and X' together on your keyboard to cut out your corner. Then go to the 'File' menu at the top pf the screen and select 'New Image' from the menu. Finally, press 'Control and V' together on your keyboard to paste your top right border corner into your new image. Save this separately as border_top_left.gif

Repeat this for each remaining corner, saving as border_top_right, border_bottom_left and border_bottom_right gif images.

Now change the width to 1 pixel on the 'Marque Options' menu. Click inside your image and drag this marquee to the middle of your top border. Press 'Control and X' together on your keyboard to cut out your corner. Then go to the 'File' menu at the top pf the screen and select 'New Image' from the menu. Finally, press 'Control and V' together on your keyboard to paste your top right border corner into your new image. Save this separately as border_top.gif

Repeat this for each side of your border, saving as border_left, border_bottom and border_right gif images.

lastly we need to create a spacer image. Go to the 'File' menu at the top of the screen and choose 'New' from the menu... From the menu that pops up enter 1 pixels width, 1 pixels height, and 72 resolution.

We will use a black background, change your foreground color to black by clicking the little boxes on the bottom left of the color selector. Then select the 'Paint' tool from the 'Tool' menu and click inside your image to make your black background.

Then save your image as a transparent gif.

You should have nine gif images total, eight for your border and a spacer. To see our example click here.

To view the source code select view source on your browser.

This week's To-Do Assignment:
Follow this weeks tutorial and make a border for a banner advertisment.