4 Easy Steps To Create Web Graphics

Sometimes the most difficult part is knowing where to start. Have you ever had someone show you just how to do some something. They go click, click, and click - Done! And you’re none the wiser; You see everything is easy once you know how. That’s my purpose here. It is to help you see it as easy. So let’s look at these four steps.

First Step: Choose Size

Go to “File” and click “New”. You now need to specify the size of your graphic. Normally you would have determined this in advance as you must first have a purpose for the graphic. Ours is a header graphic. Headers on a sales page are usually around 700 pixels by 120 pixels. So we can choose that as our size for the graphic.

Step 2. The Background.

In choosing a background we have 3 options. We can choose a solid color, a gradient, or a picture as the background.

If we decided on a solid color, here’s how to go about it. On the left hand side of the page there is a floating tool box. Towards the bottom of this box are two color boxes, one on top of the other. Click on the top box and a new window will appear. Choose the color you want by clicking the mouse on the color and click OK. Then choose the Bucket tool. If you cannot find a bucket tool, move your mouse over each of the tools till you find the gradient tool. Right click and it will reveal 2 tools, choose the bucket tool.

Having chosen the color, move your mouse over the new graphic. Your mouse pointer turns into a bucket and click. The color you chose in the tool box is now your background color.

If you want to use a gradient as your background, you will need to turn the bucket tool into the gradient tool. From the floating toolbox on the left choose the color. This time you will need to choose a color for both the top and bottom color boxes. The top color is what your gradient will start with and the bottom is the finish color.

Having chosen the gradient tool you will notice on the top of the work area new choices have appeared. This will allow you to choose the style of the gradient.

To use a picture is easy. With the newly created graphic still in the work area, open a file of the picture you want to use. This picture needs to be the same size or larger than the graphic you are creating. Pick up this picture with the mouse and drag and drop it into the graphic you are creating. If the picture is larger than the new graphic you will be able to move it around until it looks to be in the best position.

Just one note on this: It does not work with Gif images.

Third Step: Working With Layers

In Photoshop you work with layers. Each time you add something new you create a new layer. On the right-hand side of your work area you will see “Layers”. When you open this you will see all the layers. You can click on any of these layers and make them the active layer and the edit that layer.

To import a picture is exactly the same as what you did in dragging and dropping the background into the graphic. When you drag in a picture you always have some background with the picture. If the background is mostly one color you can easily remove the background and thus expose the background you want seen. To do this you will need to use the eraser.

If your background is all one color, let’s say white, you can use the magic eraser. Right click on the eraser. Three options will appear. Choose “Magic Eraser”. Move your mouse to the part of the picture you want to get rid of and click. In one click it will remove the unwanted background of the picture you dragged in. While you are in that layer you can move this picture to where you want it by picking it up with your mouse.

Step 4 The Text

Each time you insert new text it creates a new layer. I have found that Photoshop does not always space the lines of text the way I like. To overcome this I create each line in a new layer. This allows me to move each layer where I want so I achieve the look I desire.

To ad text just click on the text tool. “T”. You can choose your font and the size of the text as you would in any word processor.

Now that your text is in place it can be enhanced and made to stand out. Make sure the text you want to work with is the active layer. On the top bar of the work area is “Layer”. Click it and choose “Layer Style”. This will open up numerous options. To get an idea of what each of these does just play and experiment with it. As you choose an option it will instantly be seen before you commit it.

You have now created a simple but professional looking graphic you can use on a web page.

You will need to save the graphic in Photoshop format so that you can always edit it without having to start from scratch again. If you want to save it for a web page you can do so by going to “File” from the drop-down box choose “Save For Web And Devices” this will produce a smaller file suitable for a web page.