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.

Step 1

After opening up Photoshop click on "File" and then "New". Now choose the size of the new graphic. Usually this is determined by what you plan to do, what is the purpose of the graphic. In this case we are going to create a web page header. Header sizes are determined by the size of the page they are to be applied to. In this case we are creating a header for a sales page. These are usually about 700 pixels by 120 pixels.

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

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.

You will notice that on the top bar above your work area you now have some new options. These will allow you to choose the look of your gradient. Experiment with this until you find something you like. To create the gradient, click and hold down the mouse and drag a line from one end to the other. Where you click is the start of the gradient and where you drag to is the end of the gradient.

Importing a picture into your graphic as a background is easy. All you need to do is open a file with the picture you want to use. Make sure that the picture is larger or equal in size to the graphic you are creating. With your mouse just drag and drop the picture into your new graphic. Now just move it around to where you want it. That's it.

Please note: this does not work with Gif Files.

Step 3: Import more images.

Photoshop works with layers. Each time you import something or introduce more text you create a new layer. To the right of your work area you should see "Layers". Click on it and now it will display all the layers in the graphic. Clicking on a layer in this box will make it the active layer, and you will be able to work on this 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 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: Add 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.

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.