4 Easy Steps To Create Web Graphics

submitted: Aug 6th 2008 | by: LucasHeijn | Total views: 1 | Word Count: 966 | PDF View | Print Article

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

To start move your mouse to "File" and click "New". Next you are asked to specify the size of the new graphic. Usually you will already know what size you need as you will be creating a graphic for a particular purpose. Let's say we are going to make a header graphic for a web page. On a sales page the headers are usually about 700 pixels wide by about 120 pixels high.

Second Step: Decide On 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 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.

Once you have chosen the bucket tool, move your mouse over the new graphic you are creating. You will see the mouse pointer turn into the bucket tool. Just one click and you have your chosen color as your background.

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.

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.

An image can be imported in the same way the background was imported. Just drag and drop it into the new graphic. When you do this you will notice that there is also some unwanted background with the image. This can be removed 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 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.

In the left hand tool box there is the text tool "T". as in any word processor program fonts, styles and size can be chosen in the bar above the work area.

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

See how simple it is to create web graphics with Photoshop Action Scripts


Comments

No comments posted.

You do not have permission to comment. If you log in, you may be able to comment.