The Graphix Zone!



PUSSY CASH

ANS Linklist

BONEFISH

XRATED BUCKS


Main Tutorials Free Graphics Gallery Showcase Resources
Designing a Repeating Background using a Logo

by BarryHilton, Adult NetSurprise

In this tutorial we'll be designing a repeating background using a logo! First, we need our logo... Save the image below to your harddrive to follow along in the tutorial...



Open your image in Photoshop... Click Here to view Screen Shot with Instructions. Make a note of the height and width of your image as we'll be using this later in the tutorial...

Now, make your new 'repeating background' image... Click Here to view Screen Shot with Instructions.

We'll be using a white background, so paint the background white! Click Here to view Screen Shot with Instructions. NOTE: We used a transparent background when we set up our image because we'll be using guidelines later and they need to snap into the center of the image. This won't work on a regular background layer so we need to fill a transparent layer to use this option.

Drag your guidelines to make a cross hair... Click Here to view Screen Shot with Instructions.

Label your background layer... Click Here to view Screen Shot with Instructions.

Drag your logo into your new image and label the layer... Click Here to view Screen Shot with Instructions.

Start setting up the repeating background by duplicating the logo and dragging to to the top left corner... Click Here to view Screen Shot with Instructions.

Repeat the process until you have a logo in the center and each corner of your image... Click Here to view Screen Shot with Instructions.

Look at the height and width of your logo image we wrote down earlier... In our example 66 width and 54 height. We need to divide these by 2 to be the amount of pixels we need to move our corner logos to get them to repeat properly... Start with the top left corner... Click Here to view Screen Shot with Instructions. NOTE: If you have an odd number you will have to make an adjustment... for example move the top logos 25 pixels up and the bottom logos 24 pixels down.

Do the same for the top right corner... Click Here to view Screen Shot with Instructions.

Then again for the bottom right corner... Click Here to view Screen Shot with Instructions.

And lastly the bottom left corner... Click Here to view Screen Shot with Instructions. Which completes our repeating background image!



Click Here to see our sample repeating background displayed on a web page.



Copyright © 2000 - Adultnetsurprise.com, all rights reserved