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 3 options. The background can be a solid color, a gradient, or a picture.

If we choose a solid color we need to specify what color we want. We can do this on the floating toolbox, usually on the left-hand side of the work area. You will see 2 color boxes one over the other. Click on the top box and a color chooser comes up. Choose your color. Now click on the bucket tool. If you don’t see a bucket tool move your mouse over the tools until you find the gradient tool. Right click on the gradient tool and you will see two options, gradient or 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.

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.

This works with JPEG Files but does not work with Gif files.

Step 3 Layers

In Photoshop you work with layers. Each time you add something new you create a new layer. On the right-hand side of your work area you will see “Layers”. When you open this you will see all the layers. You can click on any of these layers and make them the active layer and the edit that 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 that your text is in place it can be enhanced and made to stand out. Make sure the text you want to work with is the active layer. On the top bar of the work area is “Layer”. Click it and choose “Layer Style”. This will open up numerous options. To get an idea of what each of these does just play and experiment with it. As you choose an option it will instantly be seen before you commit it.

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.

The Lastest posts in Web Design

How to Share your Shots
Share and store your live photos while saving time, money and effort. You can no...
http://www.bizarticlezone.com/internet-business/web-design/how-to-share-your-shots-1115/

For Those Who'd Like to Make a Web Site and Think They Can't
Getting into the global marketplace is easier now than ever before. The Interne...
http://www.bizarticlezone.com/internet-business/web-design/for-those-whod-like-to-make-a-web-site-and-think-they-cant-1084/

halloween costume party and Baby Costumes
How do children qualify? Application Specialists will help families complete th...
http://www.bizarticlezone.com/internet-business/web-design/halloween-costume-party-and-baby-costumes-1079/

Your Guide to Dedicated Hosting Services
Dedicated Hosting Services is a method of Internet hosting that enables organiza...
http://www.bizarticlezone.com/internet-business/web-design/your-guide-to-dedicated-hosting-services-945/

Stop being confused by photoshop and photography
There are several good free digital photo editing software programs available fo...
http://www.bizarticlezone.com/internet-business/web-design/stop-being-confused-by-photoshop-and-photography-940/

Cheap Web Hosting Offers Internet Entry Opportunities
There is something to be said about cheap web hosting, especially for business j...
http://www.bizarticlezone.com/internet-business/web-design/cheap-web-hosting-offers-internet-entry-opportunities-810/

The Many Uses of Hispanic Stock Photos
If you are thinking about using Hispanic stock photos, you certainly do not need...
http://www.bizarticlezone.com/internet-business/web-design/the-many-uses-of-hispanic-stock-photos-789/

The Great New Features Offered By Adobe Dreamweaver CS3
Many software upgrades offer poor value for money and many have bugs. However, t...
http://www.bizarticlezone.com/internet-business/web-design/the-great-new-features-offered-by-adobe-dreamweaver-cs3-740/

Why Should You Trust Your Header Graphic To A Professional
A 1st impression in terms of the internet is the 1st time someone uses an inter...
http://www.bizarticlezone.com/internet-business/web-design/why-should-you-trust-your-header-graphic-to-a-professional-694/

Here are some excellent ways to learn photoshop
Photoshop CS2's spot healing tool has more options than the version in Photoshop...
http://www.bizarticlezone.com/internet-business/web-design/here-are-some-excellent-ways-to-learn-photoshop-661/