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
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.
Step 2. The Background.
There are three options to choose from. 1. We could put in a solid color as the background. 2. For more flair we may decide on a gradient. 3. We could insert a picture as our 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.
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.
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 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.
You could now import a picture. Just use the drag and drop method mentioned earlier. When you do this you will notice that not only do you get the picture but also some background you don’t want. You can remove this with the eraser tool.
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: Add 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.
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.
You have now created a simple but professional looking graphic you can use on a web page.
Just save it in Photoshop PSD format. This will allow you to come back and change anything you like. To save it as a smaller file suitable for the web, go to “File” and choose “Save For Web & Devices”. This will produce an image that will load faster.
All Right, so you're a fanatic about flyfishing, and you wish to create a distinguished website to show the world your genius. Or you're looking to sell your exceptional flyfishing products, or to market your skills in your area as...
Learn Photoshop the fast and easy wayBrushes are the core component of many tools in the toolbox, and confident brush handling is essential for the effective application of these. You need to master brushes because this gives you many ways in which you can use and...
Is It Easy to Create our own Website? What is HTML?Creating a website is not so much a feat, if we compare it to the education of other technical skills. Most people tend to give up and pack their bags as soon as they hear the word "programming" and "technical"....
Deduct Vacations In 6 Easy Steps On Your Small Business TaxesRecently I discovered a way to deduct my family's vacation from my small business taxes. I started a home based travel business. This provides me with many tax deductions. As a tax accountant this immediately got my attention....
5 Easy Steps for Writing an Article that Gets Top ResultsYou may not know it, but you have an easy way to bring targeted traffic to your site. You can write articles for publication in ezines that will continue to bring you traffic to your site long after they appear...