header image
4 Easy Steps To Create Web Graphics
August 7th, 2008 under website design. [ Comments: none ]

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

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.

Second Step: Decide On A 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.

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.

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.

This works with JPEG Files but 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.

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 The 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.

On the left hand tool box click the “T”. Move the mouse to the area where the text is to go. Click the mouse and start typing. You can choose the font, size and style as in any other Windows program.

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.

About the Author:
Need help on making a website? Watch free videos on how to do things.

Tags: , , , ,


Making A Web Site Using Free Software
August 6th, 2008 under website design. [ Comments: none ]

by Lucas Heijn

Do you balk at the thought of making your own website? You are not alone. Many people think that creating a site is just too hard. I want to put you straight, it?s not as hard as you may think.

Some years ago you would have needed to know how to code HTML. That is no longer the case. There are many software products available that make it easy to produce a web site. Having some knowledge of HTML is an advantage but by no means a necessity.

There is open source software available that is every bit as powerful as the paid for variety. Open source software is created by a community of programmers around the world that work together to produce useful software. Just to highlight how good much of this open source software is; Have you heard of Apache Server Software? Apache is the preferred software used on most servers today. This is open source software, free.

The free website creation software or HTML editor is open source. It’s called NVU (Pronounced N-View). To download it just do a Google search for NVU and then choose the download suitable for your operating system.

Making Use Of NVU

When you open NVU it looks like any word processor program. It works much the same too. There is, though, one major difference and that is how you set it out so that you control where things will be placed.

One of the main problems you face is how to place text and images where you want them. Like all things they are easy once you know how. In this article we are going to concentrate on how to put things where you want them to appear.

The screen looks like a word processor and all the text features work the same as any word program. You can choose the font, size, bold it, and so on as you would in any program.

So now let?s concentrate on how to place things where you want them. The key to this is tables. If you want to place text next to an image you need to create a table with 2 columns. One to contain your image and the other for the text.

You can also create tables inside tables. You are able to specify the width of the table in pixels or in percent. You can then center the table or have it locked to the right or the left. Creating a table inside a table will allow you have a box with its own content. Each table can have its own background color.

You can look at tables as the building blocks of the web page. These building blocks will allow you to set out your page to look as you want it to. Many of these blocks need to be invisible so that only the objects are seen and not what holds them there. You can do this by specifying the border as zero. This will mean that you table will not be seen.

Mastering this will make it possible for you to create a professional looking site. From here much of the program is like any other and you will soon master the use of it with a little experimentation. Understanding how NVU works is also a lesson in Dreamweaver or Microsoft Front Page as these programs work much the same.

About the Author:
Need information on making a website? Watch free videos on how to do stuff.

Tags: , , , ,


« Previous entries 


Enter your search
Products

$8.88 Domain name registration at namecheap.com
Recent Posts

Recent Commentors
  • N/A