Updated: 03/27/2004 01:57:24 PM               (Broken Link? Report It Here)      

Design Area

What can you learn from Design Tutorials?

Design tutorials are nothing more than one or more people passing on what they have learned from their own experiences or research efforts. My design tutorial will pass on to you what I have a learned about website building through a lot of trial and error, lots of research and loads of hints and tips I have received from visitors such as yourself.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Step 5: Creating A Basic Image Set

Step 1: Deciding Content Step 2: Choosing Tools Step 3: Getting Space Step 4: Picking A Webpage Layout

Step 5a: Creating A Background Image File Step 5b: Building A Button Set Step 5c: Making A Horizontal Bar

Step 5d: Designing A Bullet

What is a basic image set?

You can build a webpage that has absolutely no graphics in it all. But it would be horribly boring and probably would not draw many return visitors. On the other hand, you can also build a website that has way too many graphics and it would have the same effect. We are going to start out small and build a webpage that will have only the basic image set to start out with. So what are those images?

1. Title or Header Image

2. A Background

3. Navigation Buttons

4. Horizontal Rule or Bar

5. A Bullet

6. A Copyright or Logo Image

Building the title or header image file

This is the first step of six basic image building steps. During this step we are creating a header image file.

1. Description - The title or header image file is the image that goes at the top of your webpage. Just as the name implies, it is usually an image file with the name of your webpage and maybe a few graphic images embedded in it. Look at the title image at the top of this webpage for an idea of what I mean. It has the name of this section, "Giz-Net's Giz Gears" with the graphics limited to a border around the image, two gears and a sunburst glow in the background. The great thing about title or header images is you can also use them for entry webpages. An entry webpage is a webpage that acts as a preview of the website. Usually there is very little text on it and generally welcomes you to the website. Think of it as a sort of decoration.

2. Dimensions - Your title or header image file can be any size you choose; however, you don't want it to be so large that it takes up a lot of precious space on your webpage. I usually try to make mine about 468w x 60h, which is the same size as the standard webpage banner that you use all over the Internet. Choosing this size allows me the option of using the same file, with or without minor modifications, as my website's banner. Using Paint Shop Pro, I created a new image file with the dimensions above and set my background to white because my webpage background is going to be white and I don't plan to make a transparent background.

3. Add Your Text - Select the font that you like, preferably one that matches the theme of your website. The font I chose was Unicorn. Then select the font size you want to use. The size I chose was 26. You want to choose a size that is large enough to read easily and that will also fit your entire title in the file. I deliberately put my text high in the image file because I plan to add something at the bottom.

4. Dress Up Your Text - Using the image editor that you chose earlier in the tutorial, dress up your text by manipulating the various controls in the program. For instance, I am going to make my text look like Liquid Metal by using one of the Paint Shop Pro plug-ins I have, called Eye Candy, and selecting the Chrome effect.

Then I am going to dress it up even more by using Eye Candy's Gradient Glow effect.

One more time, I am going to add Eye Candy's Motion Trail effect to relate my text to how fast Storm can move.

The last thing I am going to do is add a little bit of text to help describe my website even more.

I now have the perfect title or header image file for my webpage. I will be using this image at the top of my webpages. I have also used it to build my entry page with my FrontPage HTML Editor. You can do the same to build your entry webpage or you can skip the entry webpage. Click here to see what my entry webpage looks like now.

Want to see how I got the image file centered onto the webpage? Right-click on the webpage and select "View Source" and you will see the actual code placed in the file. Using a WYSIWYG editor, like FrontPage, all I had to do was horizontally center the image file and text I typed in and then I kept clicking "Enter" until the text and image file appeared vertically centered.

The entry webpage still looks pretty bare doesn't it? Not to worry, we will be dressing up our entry webpage as we go through building our website.

What's next?

So far we have built our entry webpage and our title or header image file. Hopefully by now you have found or created some graphics that you can use throughout your website. During the next portion of Step 5, we will create a background image file that will complement our header file and our theme.

Step 5d: Designing A Bullet

Step 1: Deciding Content Step 2: Choosing Tools Step 3: Getting Space Step 4: Picking A Webpage Layout

Step 5a: Creating A Background Image File Step 5b: Building A Button Set Step 5c: Making A Horizontal Bar

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.