Home » Internet

Photoshop Graphics in 4 Easy Steps.

Aug 6, 2008
When you first start to use a new software product the hardest part is knowing where to start. You get someone to show you and they go Click, click, click, and you are no wiser than before. If anything you feel more frustrated and stupid. The fact is that once you understand something it is easy, but it takes real effort to get to that stage. That's the purpose of this article. To give you a kick-start in 4 easy steps.

Step 1. Begin

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.

There are three options to choose from. 1. We could put in a solid color as the background. 2. For more flair we may decide on a gradient. 3. We could insert a picture as our 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.

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.

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.

This works with JPEG Files but does not work with Gif files.

Step 3 Layers

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.

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

On the left hand tool box click the "T". Move the mouse to the area where the text is to go. Click the mouse and start typing. You can choose the font, size and style as in any other Windows program.

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.
About the Author
See how simple it is to create web graphics with Photoshop Action Scripts
Please Rate:
(Average: Not rated)
Views: 170
Print Email Share
Article Categories