4 Easy Steps To Create Web Graphics
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.
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.
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.
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.
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.
Please note: this 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
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.
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.
