Graphics Zone - Photoshop 5 9

ANS Linklist

PUSSY CASH

Photoshop 5 Course Part 9

by BarryHilton, Adult NetSurprise

Designing a Mouse Over Buttons
This week we are going to make mouse over buttons for your site...

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 120 pixels width, 40 pixels height, and 72 resolution.

We want 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.

Now we want to add our text... First click the little arrows in the top right corner of the color selector to change your foreground color to white.

Select the 'Text' tool from the 'Tool' menu and click inside your image. Select your font (for our example we will use 'Honda') and type a value of 40 pixels for your font size. Type 'ENTER' in our text box... and click OK!

REMINDER: With the Tracking value you can edit each individual letter, some experimentation will be required to achieve the best result. To change a Tracking value highlight a letter by clicking and dragging until you have only one letter highlighted. Then type a new value for your Tracking... a negative value to bring the next letter closer or positive value to make more space between the letters (Between -1000 and +1000).

If you find that your text is not in the approximate center of your image you can move your text using the move tool. Just click the move tool and then you can 'click and drag' your text to any position on your image.

Now we want to render our text (REPEATED FROM WEEK 1) so we can add a gradient fill. To render your text, right click on the 'T' showing on the right of your text layer 'BONDAGE'. From the drop down menu that appears select render text. Once your text is rendered you cannot edit the text again with the text editor.

To apply a gradient fill to our text, first we need to tick the 'Preserve Transparency' box at the top of the layers menu. This will enable you to fill your text with a new color and keep the text smooth and not jaggy.

We want to make our text a shiny metallic steel color, to make this effect... Select the gradient tool. Then from the 'Linear Gradient Options' menu select 'Copper' from the 'Gradient' menu. If you do not have the 'Linear Gradient Options' menu showing just click the 'Windows' menu at the top of the screen and choose 'Show Options' (Windows > Show Options). Now fill your text with the gradient by clicking at the top edge of your text and dragging the gradient line vertically to the buttom edge of your text.

Now we need to make our copper colored text a steel grey color... Click on the 'Image' menu at the top of the screen, choose 'Adjust' then 'Hue/Saturation' (Image > Adjust > Hue/Saturation). The Hue/Saturation menu will appear, make sure that you have 'Master' selected on the 'Edit' menu. Now slide (click and drag) the 'Hue' bar all the way to the left, this should give you a value of -180 in the text box and make your text a light metallic blue color. Then slide the 'Saturation' bar to the left to a value of -60, now you should have steel grey colored text! Then click OK.

Our text looks fine, but it is a little dark for the effect we want, so we need to increase the brightness of our text... Click on the 'Image' menu at the top of the screen, select 'Adjust' then 'Brightness/Contrast' (Image > Adjust > Brightness/Contrast). The 'Brightness/Contrast' menu will appear, to make our text brighter slide the 'Brightness' bar to +25 and the 'Contrast' bar to +7, then click OK.

To finish our metallic steel text we want to add a little texture. To do this select the 'Filter' menu from the top of the screen then 'Noise' then 'Add Noise' (Filter > Noise > Add Noise). The 'Add Noise' menu will appear, select 'Gausian' from the 'Distribution Options' and tick the 'Monochromatic' box. This will give us a random noise of similar shades to our text color. We just want a little texture so slide the 'Noise' bar to 4 value then click OK.

Adding a bevel effect to make our text look more three dimensional... To do this we will use one of the 'Photoshop Effects'... Right click on the 'ENTER' text layer and choose 'Effects'. From the 'Effects' menu that appears select 'Bevel and Emboss', make sure that no other effects have 'Apply' checked.

Select the following 'Highlight' mode 'Screen' and 75% 'Opacity'... 'Shadow' mode 'Multiply' and 75% 'Opacity'... 'Style' Outer Bevel, 'Angel' 135, 'Depth' 5, 'Blur' 2. Click OK and your text will have a bevelled edge 3d effect! To see our example Click here.

Now we want to add an effect for our mouseover. In our example we will 'press' our button when we mouseover. To do this we need to duplicate our 'ENTER' layer... Right click on the layer name in the 'Layers' menu and choose 'Duplicate' from the menu. Then select the 'Move' tool from the 'Tool' menu and use your arrow keys on your keyboard to nudge your 'ENTER copy' text two pixels right and two pixels down. To see our examples Click here.

You will now need to save both versions your image as a jpg. To do this flatten your image file by clicking on the 'Layer' menu at the top of the screen and selecting 'Flatten Image'... DON'T FORGET TO SAVE YOUR IMAGE AS A PSD FILE FIRST... Then from the 'File' menu at the top of the screen choose 'Save As'. This will bring up the jpg compression menu, set the compression to 7 or 8 and click OK to save your image. Close this image WITHOUT SAVING and reopen and repeat the save for your other version.

Repeat this tutorial for 'NEXT' and 'LEAVE' buttons!

This week's To-Do Assignment:
Follow this weeks tutorial and design your 'ENTER' button... To get a free mouseover script and see how this works Click here. On your browser 'View Source' to see the script.