4 Easy Steps To Create Web Graphics

I’m sure that you have experienced this: You need some help to understand how to do something on the computer. Someone volunteers to show you. They get in front of the computer and go click, click, click - Done! You saw that they did it, but you are none the wiser as to how to do it. Frustrating, isn’t it! This article is a step-by-step guide in creating a Photoshop graphic.

Step 1

To start move your mouse to “File” and click “New”. Next you are asked to specify the size of the new graphic. Usually you will already know what size you need as you will be creating a graphic for a particular purpose. Let’s say we are going to make a header graphic for a web page. On a sales page the headers are usually about 700 pixels wide by about 120 pixels high.

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.

To insert a solid color, these are the steps we must follow. On the left of the work area is a floating toolbox. Towards the bottom of this box are two small squares, one over the other. Click the top one and a color picker comes up. Click the mouse on the color required for the background and click OK. The color of the top square is now your chosen color. From this floating tool box choose the bucket tool. If you don’t see it, move the mouse over each tool until you find the gradient tool. Right click it and choose bucket.

When the bucket tool has been chosen, move the mouse pointer over the new graphic. When the pointer changes to a bucket, left click. Now the new graphic is filled with the color you chose.

If you decide that you want a gradient as your background, you will need to turn the bucket tool into the gradient tool. Once again you will need to choose a color. This time you will need to use both boxes. The gradient starts with the top color and finishes with the bottom color you have chosen.

On the top bar of the work area you now have a choice of different looking gradients. You will need to experiment with this to get the effect you want. To make the gradient, click and hold the mouse where you want to start and drag it to where you want it to finish.

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.

Please note: this does not work with Gif Files.

Step 3 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.

An image can be imported in the same way the background was imported. Just drag and drop it into the new graphic. When you do this you will notice that there is also some unwanted background with the image. This can be removed with the eraser tool.

If the background is mostly one color use the “Magic Eraser”. You can choose this by right clicking on the eraser and choosing it. After choosing “Magic Eraser” move it over the section you want to remove. Click the mouse and you will see the background disappear. After removing the background and while it is still the active layer you can move this layer to where you need it.

Step 4 The Text

Each time you start new text you create a new layer. This means that the text can be moved into any position just as any layer. Photoshop does not always space the lines of text as I like. I overcome this by making each line a new layer and them I can move them where I want them.

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.

There you are you have finished a simple but professional graphic you could use in a web site.

Just save it in Photoshop PSD format. This will allow you to come back and change anything you like. To save it as a smaller file suitable for the web, go to “File” and choose “Save For Web & Devices”. This will produce an image that will load faster.