Photoshop Graphics in 4 Easy Steps.

WidgetBucks - Trend Watch - WidgetBucks.com
by Lucas Heijn

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.

Second Step: Decide On A Background.

There are 3 options. The background can be a solid color, a gradient, or a picture.

If we decided on a solid color, here’s how to go about it. On the left hand side of the page there is a floating tool box. Towards the bottom of this box are two color boxes, one on top of the other. Click on the top box and a new window will appear. Choose the color you want by clicking the mouse on the color and click OK. Then choose the Bucket tool. If you cannot find a bucket tool, move your mouse over each of the tools till you find the gradient tool. Right click and it will reveal 2 tools, choose the bucket tool.

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.

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.

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

Third Step: Working With 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.

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.

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.

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.

Once you have set your text you have a lot of things you can do to make them stand out. On the top bar of the work area you will find “Layers” Click on it. In the drop down box that appears choose “Layer Style”. This opens up a lot of thing you can play with. Drop shadow, inner shadow, outer glow, inner glow, and bevel & emboss satin, color overlay, pattern overlay and stroke. You will need to play with these to see what they do. As you play with them you will see instant results before you commit them.

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

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.

About the Author:

Tags:

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>