How to learn graphics

Date:

GRAPHICS

Your Host
Quentin Brown
My Homepage

Start Your Own Internet Business Where to Start
Research
Creating The Product
E-Commerce
Promotion
Google Adwords
Affiliates
E-mails
E-zines
Offline
Search Engines

Workshop
Forward
Introduction
Hosting
What You Need
Planning
Composer
Templates
Graphics
Tables
Image Maps
Frames
Forms
Meta Tags
Publishing
Test

Create Ebooks
EBooks
Cover Design
Cover Thin Flat
3D Cover
Graphics & Art
Introduction
Animation
Side Bars
Converting
GIF's & JPEG
Scanning

Site Design
Dimensions
Colours
Artwork
Links

Multimedia
Converting
MP3's
Streaming Audio
Screen Capture Videos
Radio Shows
Jukebox

Extras
PDF Files
Validate
Scripts
Training Videos
Macromedia

Business Building
List Building
Copywriting
1 Shopping Cart

Market Survey

Blogging

Bonuses
117 Hours Audio
Software
Check Update
--------------------------------
Publisher

Quentin Brown
LPO Box 168
Mansfield, Qld 4122
Australia
Visit Web Site
--------------------------------

"It is one of the most beautiful compensations of this life that no man can sincerely try to help another without helping himself." ~ Ralph Waldo Emerson

Adding graphics to your page is a simple task once you learn how.

Throughout this book you will find an abundance of sights that will allow you to use free artwork. Some sites even allow you to create your own. In this part of the work shop we will teach you how to make your own.

To do this part of the workshop you will need Paint Shop Pro 4 which we have given you the download for earlier.

Alternate Video Site

Open the program, use the file menu and choose new. Make sure that you have the following properties selected. Just use the arrows or type in the relevant information.

Width: 200
Height: 200
Background Colour : Change to white
Image Type: 16 million colours

Click OK

Before we enter any text we will need to choose a colour for the text.

On the right hand side you will see a colour chart. There are two overlapping boxes. The top box is the colour of your text and the second box is the colour of the background of your graphic. Just click on the top box and this new window will open.

This window allows you to choose all the different colours available. You will notice in the bottom right corner you have all the different levels you can use. Hue and saturation plus colour mix.

This is very useful if you are given specific colours for logos etc. In this workshop we will use the generic colours and we want to choose a brown colour. Click ok when you have selected the appropriate colour.

Now use the "A" on the toolbar and this will allow you to type in some text.

Once you have clicked on the "A" move your cursor over the window where we are going to put the text and you will notice the cursor changes and then left click.

In this section you can choose the font you want to use and the various effects available. Use the values below. You can come back and play with this program later.

Font Name: Verdana or Arial

Style: Bold

Size: 24

Enter Text: Widgits

Now type in Widgits and choose OK. The video will help you in this section. On the top left of the tool bar you will see a magnifying glass. Click on the tool and click once on the text. This will magnify your work.

This is especially useful if you want to do some fine editing.

You will also notice that there are some blinking lines around the text. This means it is available for editing.

Lets add a shadow to this text while we have it on our screen.

On the menu at the very top of the screen there is a text menu called Image. Click on this and in the drop down menu choose Special Effects.

In this drop down menu choose Add Drop Shadow. In the differnet options add the following attributes.

Color: Black

Opacity: 100

Blur: 20

Vertical: 4

Horizontal: 4

And click ok

Now we need to trim this graphic so that we can use it. Click on the selection tool on the tool bar. It is the one that looks like a rectangle with dots. You can see it in the video.

Now use the tool to draw a rectangle as close as possible around the graphic making sure not to cut off any of the shadow..

Use your Ctrl + C to copy the selection and then the Ctrl + V to paste into a new window. You now have made your first graphic. Choose the "save as" in the file menu and choose to save it as a gif by using the save as Type area.

Name the file widgit and save into your web folder that we set up before.

To insert this graphic into your web page we now need to open up our composer again. Open the index file and in the white area move the text down and then reposition your cursor to the top and we will now insert this graphic we just made.

On the menu choose the insert function and find the file we just created called widgit.gif and choose OK.

This won't slow down the loading of your page too much. Add this graphic to each page. By clicking on the graphic you can centre etc by using the toolbar format tools.

Alternate Video Site

Coloured background

Now say we wanted to insert this graphic over the orange section on the left. If we use this graphic you will find it has a background of white so we have a problem. Go ahead and try it using the above method.

We can fix this easily by changing the background colour.

Open PSP again and choose new with the above values that we used before.

To change the background colour we need to also find the file we downloaded before. Go to the file menu again and this time choose open rather than new. In the look in section find the file bg-bu.gif that we downloaded earlier. And choose ok.

Use the magnifying glass icon to increase the magnification. Just move the magnifying glass over the graphic and click a couple of times. Now use the eye dropper icon to choose the colour we want to copy. Move the eye dropper over the orange section and you will notice the colour in the colour chart on the right will change to the orange colour.

By using the flood tool you can now change the background in the main window we set up previously. It�s the window with the white background. Mover the paint flood tool over this window and click and the whole window will change colour.

We can now add the text as before and add the drop shadow. Crop the image and use the copy and paste function. This time save the graphic as widgit1.gif and insert into the web page on the left hand side. As you can see we have made a nice merged graphic.

There are a lot of different effects and tricks you can do with Paint Shop Pro and I encourage you to look at the various tutorials online to generate some great effects.

You can also do this online and here are some sites that will let you do the same thing while online.

Alternative sites

3d text maker - is an excellent online 3d graphic generator.
.
Bannerforge - offer one of the most powerful graphics creation capabilities on the web.
You can create graphics of all sizes, and in various formats, inc. Logo's, Banners, buttons, graphics etc.

Flamming text and so much more - At this site you can create cool, custom images for FREE, to use on your website, or in your e-mail.

Cooltext - Great place for making really cool logos, lots of font choices, variety of sizes and some very interesting effects.

You have now inserted your first graphic. You can do this with any graphic file. Just remember to always use JPEG's or gif's. If you look in your folder to see how big this file is you will notice that it is only about 4kb. This won't slow down the loading of your page too much. Add this graphic to each page. By clicking on the graphic you can centre etc by using the toolbar format tools.

Relative links

A relative link is one that is activated directly from within your file, eg. you inserted a graphic called widgit.jpg. This means that the browser will search your files for the link to widgit.jpg. If the link was at another site it would be called an absolute link and so would usually have the http://www before it. A trap for beginners is that sometimes the link will be to your hard drive and so when you publish the pages the link to the graphic won't load up because it will have an extension something like e:/mywebpage/widgit.jpg. To change simply go to your editor and change the html by getting rid of any extensions. Right click on the "widgit" graphic and choose "image properties". Make sure it is a relative link.

You will also notice in this menu some other formatting functions such as how text will wrap around the graphic etc.

Lets say you would like to make text graphic for the links on the left hand side of your page. If you want to make the graphics for the "about", "products", etc., you will need to choose a little different configuration. Don't have shadow ticked and do have transparency ticked. It will also need to be a gif and not a jpg file. If you don't do this, then it will be white on the background. You could try to match the background, however, it can be a bit tricky at times. The beauty of text graphics is that if you link them they do not change, so it produces a nice clean effect.

Linking

Nearly everything on a web page can be a link and this includes graphics. When you click on the graphic in your composer you will notice it highlights. Go to the links tollbar and follow the same process as for text. Use graphics wisely and you won't have any problems. A few graphics here and there are great and they add to the experience.

Alternate Video Site

Photo Graphics

You can use all the same effects for photos and in the ebook section we will also go into how to use cut outs.

Here are two photo style graphics. One is flat and the other with shadow. Also you can rotate for a little added dimension.

Alternate Video Site

Since we're on the topic of images, this should save you a large amount
of research time. You�ll probably never have to look for another online
image site again! The first one is my favourite and has plenty of web sized photos like this one.