4 Easy Steps To Create Web Graphics
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
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.
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.
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.
To fill this with a gradient, change the bucket toll into the gradient tool. Once again you need to choose a color. This time you will need to choose 2 colors. The top square is your starting color and the bottom square is the finish color of the gradient.
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.
To use a picture is easy. With the newly created graphic still in the work area, open a file of the picture you want to use. This picture needs to be the same size or larger than the graphic you are creating. Pick up this picture with the mouse and drag and drop it into the graphic you are creating. If the picture is larger than the new graphic you will be able to move it around until it looks to be in the best position.
Please note: this 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.
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.
Step 4 The 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.
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.
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.
You have now created a simple but professional looking graphic you can use on a web page.
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.
|
|
|
|
![]() |


[...] by fdalmoro 12 days ago3 votesSparkly Animal Blend Giveaways!>> saved by markoj 39 days ago3 votes4 Easy Steps To Create Web Graphics>> saved by zeevb 41 days ago6 votesDesigning the New iJustine Logo>> saved by brunotorres 51 days [...]