Webmaster's tutorial: Analyzing website Organizing website Developing website Implementing website Maintaning website
Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the WebHow to Design a Website - Webmaster's Tutorial StartRocketface(R) Webmaster's Workshop
Rocketface®Workshop Webmaster's Tutorial Index Webmasters Article Archive Sitemap Privacy About

Give Your Graphics A Professional Look without the Price
By Shelley Lowery

Graphic design is an intimidating subject for many Internet entrepreneurs. However, most of us must learn some basic design techniques to avoid the high costs of hiring a professional graphics designer.

You can create your own graphics that can look just as nice as some of the professionally created graphics for a fraction of the cost.

In order to create your graphics, you will need to invest in a good graphics program. You don't have to spend hundreds of dollars on a fancy graphics design software. Paint Shop Pro is a wonderful graphics program and is the only program you'll need to design professional looking graphics. You can download a free 30-day trial and register the software for only $99. http://www.jasc.com


The first and probably most important graphic technique we're going to discuss is text. This is probably what you will use the most. Not just any text, but text to be used with your logo, banners or page titles.

When you're ready to begin, open Paint Shop Pro and click on "File" then "New" and type in a width and height for your image. Make sure your "Image Type" is set to 24-bit and select your background color. You can leave the other settings at their defaults. Make sure you give yourself a large enough space to work with, as you can reduce it later.

Your first step will be to select a good font. Depending upon the effect I want to achieve, I use one of three different fonts; Impact, Verdana, or Arial Black. If you don't have these fonts installed on your computer, you can find them here:

http://www.microsoft.com/typography/

The first text effect we will be creating will display your text in a large font size with a drop shadow effect. This drop shadow effect can also be used with any other images you create.

Your first step will be to select your text color. To change the foreground and background colors, double click on the top and bottom color squares on the right. Your text will be

displayed in the color within the top box, which is the foreground color. For this example, I will be using a light color as my foreground color.

Once you've selected your text color, click on the text tool on the left side (It looks like a capital "A"). This will launch your text window. Select your font and text size from the drop down menu and type in your text. I will be using "Impact" bold, size 24. Make sure you select "Antialias" and "Floating" then click "OK."

Antialias will smooth out all of the rough edges of your text and blend it in with your background color. You will use the Antialias setting with various graphic tools when designing

your graphics, so it is important to remember its function.

You will now see your text with, what looks like, marching ants around it. If you'd like to move your text, click and hold your left mouse button to drag your text to your desired position.

With your text still selected (with marching ants), at the top of the screen, go to "Image" then "Effects" then "Drop Shadow." This will launch the "Drop Shadow" window. Your image will be viewable with the drop shadow in the little window at the right. You can try different settings until you achieve the shadow effect you desire.

Another text effect that is popular will display your text in a graduated color effect. Your text can be displayed with a dark color at the top and gradually get lighter or just the opposite.

To achieve this effect, the foreground (top box) color must first be set to white. Next, click on the text tool and follow the same procedure for displaying your text. You should now see your text displayed as "marching ants," only with no color. Now you'll need to select a dark color for your foreground color and a light color for your background color.

Once you've selected your colors, click on the "Flood Fill" icon on the left. To change the effects of the Flood Fill tool, locate the little box on your screen that says, "Controls" then click on "Tool Controls." Under "Fill Style" select "Linear Gradient" and then click on "Options" at the bottom. The "Blend Mode" should be set to normal. In order to select which color will be at the top of your text, where it says, "Degrees" type in either 0 or 180 depending on your desired effect, then click OK. Now place your mouse over each letter and fill it by clicking on your mouse.

After you've filled your text, you can either create the shadow effect or "right click" on your mouse to deselect your text.

If you'd like to decrease your graphics window size, click on the "Selection tool" on the left (dotted rectangle) and select the portion of your graphic that you'd like to display within your new sized image. Click on "Edit" then "Copy" then "Edit" - "Paste as a new image."

After you've completed your graphic, go to "File" then "Save As" and select a folder. Type in a name for your graphic and save your new file in the .GIF format. The program will prompt you and ask you if it's all right to reduce your file to 256 colors. Click on yes. Your new graphic is now saved.

Now that you've mastered these new techniques, try them with some of your other images. The drop shadow effect can be used with photographs or just about any image you'd like. Try the graduated color effect with your banners or image backgrounds and give your graphics a professional look.

About the Author:

Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery. http://www.webdesignmastery.com And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book. http://www.ebookstarter.com Visit Web-Source.net to sign up for a complimentary subscription to Etips and receive a copy of the acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net

Designing Web Pages

Designing Web Pages
Designing good webpages begins with good webpage layout. So what do you want on this most important first screen?
Professional Webpage Layout
Examining the methods of professional webpage layout. The individual pages in your website must have a layout that allows the visitor to find out as much as possible about your webpage at a glance.
All About Design Principles and Elements
Basic website design elements to consider. A truly shocking number of web designers are unfamiliar with the basic principles and elements of design.
Designing your Homepage
Believe me, you want your visitors to stay as long as possible. This is the only way your site is going to succeed. Your site must be interesting, persuading, and easy to navigate.
The Best Page Layout and Design for Content Websites
To understand which layouts work you only need to look at the industry gorillas. These are the online content publishers who have been around for years, and who have tested just about every layout combination.
Writing for the Web
Writing for the Web is very different from traditional writing. The way website visitors read Web copy is unique and you must adjust your writing style to be effective.
An Easy Way to Choose Attractive Color Combinations
Lots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, here's an easy technique that only takes a few minutes.
Professional Graphics
Graphic design is an intimidating subject for many Internet entrepreneurs. However, most of us must learn some basic design techniques to avoid the high costs of hiring a professional graphics designer.
9 Ways to Make Your Web Site Look Great
Learn how to design a website that gets attention every time. Avoid the mistakes most people making when creating their first web site. Take home some tricks that even the most advanced designers will enjoy.
Selection of Web Templates
An important part of website designing is selection of web templates. Here are a few points which will help you select the best web template for your website.
Creating a Basic Web Design Template
A "template" is simply a design format which you can apply to all (or most) of the pages in your web site.
Website Optimization - Optimizing your websiteMarketing Website - Marketing your websiteWebsite Managment - Managing your websiteWebsite Design - Designing your websiteRocketface(R) Webmaster's Article Archives

Website Navigation and Layout

Sitemaps and SEO
For those who don't devote too much time on the SEO of their site - this is a good place to start. By submittíng a sitemap to various search engines, you are telling them that you exist and what pages your site has to offer the World Wide Web.
How to Make Easy Website Navigation
Navigation is how visitors get around your site. If your navigation is unclear then your visitors will get frustrated and go away.
Navigational Options for Your Website
There are many types of navigation methods to choose from. You must carefully consider the layout of your site so you can choose the system that will work best.
Web Site Navigation Best Practices
A great user experience will bring visitors back. Navigation is a key element in the user experience.
Developing a Theme for your Website
Every website should have some type of theme or a way of giving your site an identifying look. When visitors come to your website they should be presented with an experience that they will remember.
Website Navigation and Theme
Have you ever visited a website where you keep clicking on links, hoping you are going to find that information you're looking for, only to be led to more pages of links.
Tips for Improving Website Navigation
In order for visitors to find the right information, a website's navigation path needs to be clear.
Professional Webpage Layout
The layout of your webpages says a lot about you and your message. Good webpage layout is the key to a successful website.
Web Site Design Layout - Five Common Elements
Your web site design layout largely depends on the type of website you're building. A sales page, for example, has different requirements than a landing page, and a landing page has different requirements than a niche web page.
Web Page Design Ideas - How to Use Graphics Creatively
Keep your web site design simple, and never lose sight of what you want your visitors to do when they arrive.
Website Design - 3 Pointers For Color You Must Consider
The correct use of color in your website design is paramount to ensure your site is not plain and uninteresting or on the other spectrum too busy, glaring and difficult to look at for a period of time.
Creating a Basic Web Design Template
A "template" is simply a design format which you can apply to all (or most) of the pages in your web site.
Website Optimization - Optimizing your websiteMarketing Website - Marketing your websiteWebsite Managment - Managing your websiteWebsite Design - Designing your websiteRocketface(R) Webmaster's Article Archives



Copyright© 1999 - 2010
Rocketface® Graphics
Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index