4 Easy Steps To Create Web Graphics
Search:

Home | Web Design


4 Easy Steps To Create Web Graphics

By: Lucas Heijn

 
 

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.

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.

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.

To insert a solid color, these are the steps we must follow. On the left of the work area is a floating toolbox. Towards the bottom of this box are two small squares, one over the other. Click the top one and a color picker comes up. Click the mouse on the color required for the background and click OK. The color of the top square is now your chosen color. From this floating tool box choose the bucket tool. If you don't see it, move the mouse over each tool until you find the gradient tool. Right click it and choose 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.

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.

Just one note on this: It does not work with Gif images.

Third Step: Working With Layers

Photoshop works with layers. Each time you add something new to the graphic you are working with you add a layer. On the right hand side of the work area you should see "Layers". Click on it and a whole list of the layers of the active graphic will be shown. You can click on any of these to make them the active 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 your background is all one color, let's say white, you can use the magic eraser. Right click on the eraser. Three options will appear. Choose "Magic Eraser". Move your mouse to the part of the picture you want to get rid of and click. In one click it will remove the unwanted background of the picture you dragged in. While you are in that layer you can move this picture to where you want it by picking it up with your mouse.

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

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.

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.

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

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.

Article Source: http://www.where-to-find.net

Need help on making a website? Watch free videos on how to make a website.

Click the XML Icon Above to Receive Web Design Articles Via RSS!

Please Rate this Article

 

Not yet Rated

Copyright © http://www.where-to-find.net/™ All rights protected. Script Services by: Sustainable Website Design
Use of our free service is protected by our Privacy Policy and Terms of Service

Powered by Article Dashboard