Blog Design Basics: Background (Photoshop)

Today we are going to work on creating a seamless background image to use as the background for our blog design in Photoshop. On Wednesday, I will be posting a tutorial on how to create a seamless background image in GIMP (for those of you that do not own Photoshop), along with some other places to find and create background images! But, for today- we are in Photoshop!

The first thing we are going to do is create a new image. Go to File -> New. For our background, we are going to create a 200x200 image. Make sure to set the resolution at 300ppi. Your settings should look as follows:

Now we are going to create some guides! It can be difficult to eyeball the center of the image, but luckily Photoshop has a nifty little tool for us to use. Under the "View" tab, click on "New Guide". We are going to create two guides: one horizontal and one vertical. These have to be done separately, but they are done the same way. Select "Horizontal" or "Vertical" and then set the position at 50%.

Once the guides are both in place, it should look like a cross over the screen. At this point, you should fill the background with the color of your choice using the bucket tool.

Use the custom shape tool to create a circle. Hold down the "shift" button on your keyboard to create a perfect circle. Once you have made the shape, press "CTRL + T" to select the circle. Use the arrow keys to place the circle in the middle of the image using the guide lines. The cross that indicates the middle of the circle should be placed where the two lines cross.

Once the shape is centered, right click on the "Shape 1" layer and select "Duplicate Layer".

Select the duplicate layer, and then go to filter -> other -> offset.

In the dialogue box, match these settings. Make sure that the "wrap around" option is selected. For this part, the number that you offset by will always be half the size of your image. Since we have a 200x200 image, we will offset by 100. But, if we had a 500x500 image, we would offset by 250. Understand?

Our background image is now complete! Save this image as "Background" and set it to the side. In a few classes, we will upload this image to blogger when we put our design together! :)

Remember, if you don't have Photoshop- no worries! Tune in tomorrow for a tutorial using GIMP to create the same seamless background (for free!).