Graphics Zone - Photoshop 5 1

Cash Traffic

Photoshop 5 Course Part 1

by BarryHilton, Adult NetSurprise

What you will your learn?
During this course you will learn all the basic functions and techniques for using Adobe Photoshop 5 to design outstanding effects, logos and headers for your website. We will also cover some HTML formatting, particularly the use of tables, to make the best use of your graphics so your pages will load quickly while keeping bandwidth low.

Each week you will have a short 'to-do Assignment' which will teach you all the skills you will need for designing great looking graphics and how best to implement your new skills on your site.

Throughout our tutorial we will be working on an example site called 'Bondage Virgins'. This site is for illustration purposes of this tutorial only and is not connected in any way with any site commercial or otherwise.

Designing a Logo: Part One
First open a new image, click the file menu at the top of the screen and select 'new' (File > New) with a width of 595 pixels, height of 220 pixels, 72 pixels/inch in RGB color and contents white.

Select black as your foreground color, if you have different colors selected just click the tiny black and white boxes in the bottom left corner. This will reset your colors to black foreground and white background.

As we will be using a black background for our sample site fill your new image with black, using the paint bucket tool.

Firstly we want to start with our text... The text tool in Photoshop has a default color of your current foreground color. We will alter our text color later so for now use white. To swap your foreground color with your background color just click on the little arrows in the top right corner.

First select your text tool and then click in the center of your image to bring up the text options menu. For our example logo we will be using the 'Honda' font, but you can select anything suitably gothic! Make sure your font is quite bold as we will be adding more effects later in our tutorial. To keep your text smooth check that you have the 'Anti-Aliased' box ticked. Set your size to 80 pixels and type 'BONDAGE' and click OK. To see our example click here.

As you can see our example text is badly spaced with big gaps between some of the letters (This will change depending on your chosen font). You can edit this with the Tracking value of your text. You will notice that your new text layer 'BONDAGE' has a 'T' symbol in the right hand side, double click on this to edit your text again.

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). In our example we set the B to -80 and the D to -100 and the A to -120. When you are happy with the result click OK. To see our new example click here.

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 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 button edge of your text. To see our example click here.

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. To see our example click here.

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 see our example click here.

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. To see our finished example click here.

This week's To-Do Assignment:
Follow the instructions above and design a simple metallic steel text logo. To save your logo in gif format choose the 'File' menu at the top of the screen, then 'Export', then 'GIF89a Export'. This will bring up the 'GIF89a Export Options' menu... Set 'Palette' to 'Adaptive' and 'Colors' to 256. Make sure the 'Interlaced box is not selected and click OK!