Reviews Tips Opinions

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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.

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

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

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.

The third choice of a background is to import a picture. To do this just open a picture file that you wish to use. Make sure this picture is equal or larger in size to the new graphic you are making. With the mouse just drag and drop the picture into the new graphic. Move it around to where you want it and you’re done.

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.

You could now import a picture. Just use the drag and drop method mentioned earlier. When you do this you will notice that not only do you get the picture but also some background you don’t want. You can remove this with the eraser tool.

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.

Step 4: Add 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 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.

There is only one thing left to do. Save it. First save it in Photoshop PSD as this will allow you to come back and edit it. Next if you wish to use it as a web graphic you can “Save it for Web and Devices”. This will create a smaller faster loading file for web pages.