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. Begin

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: Choose A 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 choose a solid color we need to specify what color we want. We can do this on the floating toolbox, usually on the left-hand side of the work area. You will see 2 color boxes one over the other. Click on the top box and a color chooser comes up. Choose your color. Now click on the bucket tool. If you don’t see a bucket tool move your mouse over the tools until you find the gradient tool. Right click on the gradient tool and you will see two options, gradient or 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 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.

This works with JPEG Files but 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.

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 the background is mostly one color the :Magic Eraser ” will do this with one click. To open the Magic Eraser right click on the eraser and 3 options will appear. After removing any unwanted background, the layer can be moved to wherever it is required. Just pick it up with the mouse and drag it into position.

Fourth Step: Text

In Photoshop your text is also a layer. Each time you insert new text you create a new layer. You are able to move the text around as you can any other layer.

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 the text can be jazzed up a bit to make it stand out. On the top bar is “Layers”. Click on this and from the drop-down box choose “Layer Style”. This opens up a host of options such as; drop shadow, inner glow, bevel & emboss, stroke and others. Just play around with these and you will soon see what they do. Try them. You will see instant results without committing them.

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.

Popularity: 8%

You can follow any responses to 4 Easy Steps To Create Web Graphics through the RSS Comments Feed. You can skip to the end and leave a response. Pinging is currently not allowed.