Graphics Zone - Photoshop 5 10

PUSSY CASH

CE CASH 3.0

Photoshop 5 Course Part 10

by BarryHilton, Adult NetSurprise

Designing Repeating Backgrounds
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 100 pixels width, 100 pixels height, and 72 resolution.

We want a dark background, we will start with black 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 select a dark grey color from the 'Swatches' menu. Then selecting the 'Airbrush' tool from the 'Tool' menu spray a rough cross shape across your image from edge to edge. You will need to use a large brush, so select the 45 Pixel Brush from the 'Brush' menu

Then choose a slightly lighter grey and spray highlights onto the 4 bars of your cross.

Now we want to add a grid to our background. The first step we need to do is create our grid. First 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 'Grid'.

Next we need to set up a 'Snap-to' grid in the Photoshop Preferences section. To do this go to the 'File' menu at the top of the screen, then choose 'Preferences' and select 'Guides and Grid' from the menu. This will bring up Photoshop's Preferences... On the 'Grid' menu select: Style = Lines, Grid line every 10 pixels, Subdivisions 1. Then Click OK!

Now we want to set up the grid for our logo... Go to the 'View' menu at the top of the screen and select 'View Grid'. Then go back to the 'View' menu again and make sure that 'Snap to grid' is turned on (has a tick next to it). If it is turned off select 'Snap to grid' to turn it on.

Now we are going to start creating our grid. Select the 'Single Row Marquee Tool (M)' from the main 'Tool' menu... to find this click and hold on the regular marquee button and select it from the menu.

Now just click on your image near the top grid line, your marquee will snap-to the grid. Now while holding 'Shift' on your keyboard click on each other horizontal grid line until they all have a marquee.

Repeat this process with the 'Single Column Marquee Tool (M)' starting with the left most vertical grid line.

Click the tiny black and white boxes in the bottom left corner of the 'Color Palette'. This will reset your colors to black foreground and white background. Then swap your foreground color with your background color by clicking on the little arrows in the top right corner. This will give us white as our foreground color.

Now select the 'Paint Bucket' tool from the 'Tool' menu and click inside your image to paint all your grid white. And finally we want our grid to be faint, so select 10% Opacity from the top of the 'Layers' menu. To see our example click here.

Now we want to make our background so that it will repeat correctly on our page.

First we need to merge our image, goto the 'Layers' menu at the top of the screen and select 'Merge Visible' from the menu.

Now make your canvas bigger... Goto the 'Image' menu at the top of the screen and select 'Canvas Size' from the menu. Enter values of 200 for height and width and click on the top left box of the 'Anchor'. This will make your image bigger to the right and bottom.

The next step is to duplicate our layer, right click on the layer name in the 'Layers' menu and select 'Duplicate Layer' from the menu.

Now you have your new layer selected... Go to the 'Edit' menu at the top of the screen, select 'Transform' then 'Flip Horizontal' from the menu.

Select the 'Move' Tool from the 'Tool' menu and click and drag your new layer to the top right of your image. Make sure that there are no gaps and it fits correctly. If you need you can adjust it's position using the arrow keys on your keyboard.

Now go to the 'Layers' menu at the top of the screen again and select 'Merge Visible' from the menu.

Again, we want to duplicate our new layer... so, right click on it's layer name on the 'Layers' menu and choose 'Duplicate Layer' from the menu.

Now you will have your new layer selected... Go to the 'Edit' menu at the top of the screen, select 'Transform' then 'Flip Vertical' from the menu.

Then select the 'Move' Tool from the 'Tool' menu and click and drag your new layer to the bottom of your image. Make sure that there are no gaps and it fits correctly. If you need you can adjust it's position using the arrow keys on your keyboard.

Finally flatten your image by going to the 'Layers' menu and selecting 'Flatten Image'. Then save your image as a jpg or gif format and you've created your repeating background! To see our example click here.

This week's To-Do Assignment:
Follow this weeks tutorial and design a repeating background for your site...