Home Tutorials Beginners Classes
07 Creating Custom Colors

Creating Custom Colors

Created by: Charith
Modified by: PSPUG Learning Center

Sometimes we need a color that doesn't seem too easy to find on the color spectrum in Paint Shop Pro. You have the ability to type in the RGB values of a color and use that custom color. We will learn how to do so in the following tasks.

We will Create a New Image, then set three different foreground colors and save each as Custom Colors. Then we will create a Bronze Text image using the Air Brush to illustrate these techniques.

Finally, we will explore File Size with Colors using an image provided us by theProf. Download the Woodgallery Logo here that will be used.

Setting Custom Colors

Open a new image:

Click on File || New

Width: 200

Height: 80

Background color: White

Image type: 16.7 Million Colors

Click OK

The COLORS Window -- Setting Colors

Click on the current FOREGROUND color palette.

The Basic Colors

There are 48 Preselected Basic Colors (Red, Yellow, Green, Cyan, Blue, and Purple) with each of the basic colors shades from brilliant to pastel.

Selecting any one of these color boxes sets the color.

The Color Wheel

The Color Wheel allows one to select any possible color using this Wheel.

The two circles indicate the current color is Cyan

Placing the Mouse cursor any where on the color circle will select that color.

Placing the Mouse on the color square one can mix that color to various shades.

When setting a color wanted, then click on OK to set color and close the Color Window.

The Custom Colors

To Set Custom Colors, first set the Color wanted.

Click on a White Box

Click on the Add Custom Button

Click on OK to set color and close the Color Window

The Current Color Box

In the Current Color Box, To set Colors,
Enter the values for RED, GREEN, and BLUE
In the Lesson Illustration, the Values are:
(R0, G255, B255) which is the current Cyan Color

Creating a Bronze Letter Effect

We will set THREE CUSTOM Colors to be used in creating a BRONZE Text that has an appearance of 3D Bronze Letters.

First, Click on the FOREGROUND Color for the Color Window

Set the Bronze Brown Color
& In the Current Color Area, Enter:

Red = 148
Green = 99
Blue = 90
CLICK on the First White Box in the CUSTOM COLOR Area
CLICK on the ADD CUSTOM button
Do Not Click on the OK Button Yet

Set the Pink Color
& In the Current Color Area, Enter:

Red = 228
Green = 158
Blue = 158
CLICK on the Second White Box in the CUSTOM COLOR Area
CLICK on the ADD CUSTOM button
Do Not Click on the OK Button Yet

Set the Pastel Pink Color
& In the Current Color Area, Enter:

Red = 242
Green = 206
Blue = 198
CLICK on the Third White Box in the CUSTOM COLOR Area
CLICK on the ADD CUSTOM button
NOW Click on the OK Button
The Pastel Pink becomes the Foreground Colorfont

Create the BRONZE TEXT

Click on the Foreground Color

Click on the BROWN COLOR in CUSTOM COLORS

Click on OK to set the Brown Color as Foreground Color

In the Tools Palette,

Select the TEXT Tool

(Icon Button Looks Like an A)

Click Mouse in the Center Canvas
for the ADD TEXT(PSP5) or TEXT ENTRY(PSP6 & 7) Window

PSP5:

Select FONT = Arial MT Black (or any fat font)
Size = 28
Antialias = Checked
Alignment = n/a as only used with more than one line of text.
Enter TEXT = BRONZE (Capitalized)
Click on OK
Note: If your text is larger than the canvas, or is not to your liking, Click on EDIT || UNDO and start again with the text attributes.
Then Place Mouse Button on a Letter, Hold Button down and Drag Text to Center it.
DO NOT DESELECT the TEXT Selection (Marching Ants)

PSP6:

Select NAME = Arial MT Black (or any fat font)
Script = Western
Size = 28
Antialias = Checked
Floating = Checked
Kerning & Leading = 0 (Used to space the Letters)
Auto Kern = Checked
Alignment = n/a as only used with more than one line of text.
In Text Effects Click on Foreground color for the Brown Color
B,I,U,A and Alignment = n/a as not used with this Font
Enter TEXT = BRONZE (Capitalized)
Click on OK
Note: If your text is larger than the canvas, or is not to your liking, Click on EDIT || UNDO and start again with the text attributes.
Then Place Mouse Button on a Letter, Hold Button down and Drag Text to Center it.
DO NOT DESELECT the TEXT Selection (Marching Ants)

PSP7:

Click on CANCEL in the Text Window
In TOOL OPTIONS - TEXT
set Width = 1
and Line Style to Default (#1 Solid).
Then, click mouse in middle of Canvas for the Text Window.
Select NAME = Arial MT Black (or any fat font)
Script = Western
Size = 36
Kerning and Leading = 0 (Used to space letters but not used on this font)
Auto Kern = Checked
Styles || Stroke = Null (Click on right arrow and click on Null Icon [last on right])
Styles || Fill = Solid (Click on right arrow and click on Paint Brush for the Brown Color. If the Brown color is not showing click on the Color Box and select from Custom Colors, the Brown Color)
Textures || Stroke & Fill = Null (Click on Right Arrow and click on Null Icon)
Floating = Checked
Antialias = Checked
Enter TEXT = BRONZE (Capitalized)
Click on OK
Note: If your text is larger than the canvas, or is not to your liking, Click on EDIT || UNDO and start again with the text attributes.
Then Place Mouse Button on a Letter, Hold Button down and Drag Text to Center it.
DO NOT DESELECT the TEXT Selection (Marching Ants)

In Color Palette, Select for Foreground Color the Pink Color. (Click on Color Box and select the Pink Color from the Custom Colors R228, G158, B158)

Click on the AIR BRUSH Tool

PSP5:

In the Tool Controls Tab, Paper Texture = None
In the Brush Tip Tab:
- Shape = Round
- Size = 15
- Opacity = 100
- All other Options = 5

PSP6:

In the Air Brush Tab:
- Shape = Round
- Size = 15
- Opacity = 100
- All other Options = 5
In the Air Brush Options Tab, Paper Texture = None

PSP7:

In Air Brush Tab,
- Shape = Round
- Size = 15
- Opacity = 100
- All other Options = 5
In the COLOR PALETTE
- Style Foreground = Solid
- Styles Foreground Color = Pink (as set above)
- Styles Background = Null
- Textures Foreground and Background = Null
- Locked = Checked

Hold Mouse Button down and Spray in streaks in a diagonal direction across each Letter. Don't over fill the image with the color.

Now, Select the Pastel Pink Color for the Foreground and with the Spray Can, Streak this color along side the other color. Again, don't over fill with these custom colors.

Note: If you don't like the result, just use EDIT || UNDO and start again.

DO NOT DESELECT the TEXT Selection (Marching Ants)

Creating the Bronze Effect

Use COLORS || COLORIZE

Hue = 27

Saturation = 146

Click on OK

Save the Selection surrounding the text

SELECTIONS || SAVE TO ALPHA CHANNEL

Click on OK

Deselect (Selections || None or Control+D)

Use SELECTIONS || LOAD FROM ALPHA and click on OK

PSP5 & PSP6: Use Image || Effects || Drop Shadow
PSP7: Use Effects || 3D Effects || Drop Shadow

Color = Black

Opacity = 100

Blur = 7

Vertical & Horizontal Offsets = 3

Click on OK

Deselect (Selections || None or Control+D)

Create a 3D Bronze Effect

PSP5
- Use SELECTIONS || LOAD FROM ALPHA CHANNEL And Click on OK
- Create a New Layer, Label it Black Cutout
- IMAGE || EFFECTS || CUTOUT
  - Fill Interior = Unchecked
  - Shadow Color = Black
  - Opacity = 60
  - Blur = 6
  - Vertical & Horizontal Offsets = 2
  - Click on OK
- Create a New Layer, Label it White Cutout
- IMAGE || EFFECTS || CUTOUT
  - Shadow Color = White
  - Opacity = 60
  - Blur = 4
  - Vertical & Horizontal Offsets = -2
  - Click on ok

PSP6 & PSP7
- Use SELECTIONS || LOAD FROM ALPHA CHANNEL And Click on OK
- PSP6: IMAGE || EFFECTS || INNER BEVEL
- PSP7: EFFECTS || 3D EFFECTS || INNER BEVEL
  - Bevel = 3rd Row, last one on the Right
  - Width = 20
  - Smoothness = 13
  - Depth = 30
  - Ambience = -20
  - Shininess = 40
  - Color = R192, G192, B0 (olive green)
  - Angle = 159
  - Intensity = 60
  - Elevation = 30
  - Click on OK
  - Deselect (Selections || None or Control+D)

Exploring Colors and File Size

We will use the Wood Gallery File (courtesy of the Prof).

In the Second Lesson we reviewed graphic formats. In the Third Lesson we explored changing the size of an image or file through resizing techniques. In this lesson we will explore how to adjust file size through changing the color counts of images.

We know that JPEG files allow the use a many colors even up to or close to 16 million colors. We also know GIF files will only allow up to 256 colors.

Use Wood Gallery Image to discover information:

Click on COLORS || COUNT COLORS USED = Number of Colors in Image (21375)

PSP6: Click on VIEW || IMAGE INFORMATION

PSP7: Click on IMAGE || IMAGE INFORMATION

Source File Name and Type
Image Dimension (200 x 200), Pixel Depth/Colors: (24/16 M)
Image Memory = 117K

Look on the Status Bar (Bottom Right which displays Image: 200 x 200 x 16 M - 117.2 Kbytes.

Let's Convert this File to a GIF file and then again check the color count and file size.

Duplicate the image: WINDOW || DUPLICATE

FILE || SAVE AS Woodgallerylogo-a.gif

Close the file, Woodgallerylogo-a.gif

Reopen the file, Woodgallerylogo-a.gif

Now Check the Color count and File Size

Colors || Count Colors Use = 255
View || Image Information
- Pixel Depth/Colors = 8/256
- Image Memory = 40k
Also notice that although we have reduced the colors and file size considerably, there is very little loss of image quality.
Also, if you click on the COLOR PALETTE Color box you will not get the Color Wheel now but a different window with only 256 colors represented in the image. Even if you drag your cursor on the color mixer you still only are able to choose among those 256 colors.

Next, let's increase the Colors

Duplicate woodgalerylogo-a.gif (Window || Duplicate)

Use: COLORS || INCREASE COLOR DEPTH || 16 M/24

Checking Color Count (Colors || Color Count Used) and File Information (View or Image || Image Information) we discover that the Color Count is still 255 while the File Size is now 117.2kbytes.

Why is there a difference in size but not color count?

This image came with a color palette set to a maximum of 256 colors as a GIF file. When it was saved in its original GIF format, these colors were chosen and the color palette for this graphic was created based on those colors.

Even though you have selected to increase the number of colors used, Paint Shop Pro is still using the original color palette to increase the color depth. It has used a dithering calculation in order to increase the images color depth. Until you edit this image and change or add colors, chances are the colors used in this image will remain the same. When you increased the color depth, did you notice any difference in the quality of the graphic?

Notice now when you click on the COLOR PALETTE Color Box you are able to get the Color Wheel and you can select colors from the Color Mixer. Thus you could now add different colors to this image.

Next, let's decrease colors:

Use the currently duplicated image

Use COLORS || DECREASE COLOR DEPTH || 16 Colors (4 bit)

In the Palette Section,
Optimized Octree = Checked
In the Reduction Method,
Error Diffusion = Checked
In the Options,
Reduce Color Bleeding = Checked
Click on Ok
File || Save As woodgallerylogo-b.gif

Checking the Color Count there are only 16 Colors Used.
Checking the File Size, it is now 19.6 Kbytes.

Also, notice the quality of the two images (a & b) are very close and almost imperceptible in their differences. Again, if you click on the Color Box in the Color Palette, you will notice there are only 16 colors to choose from representing this current image.

Next, let's decrease colors use a grey scale technique.

Use the original JPEG file (/tutorial/html/beginclass/woodgallerylogo.jpg)

Use COLORS || GREY SCALE

File || SAVE AS woodgallerylogo-c.gif

Notice Color Count is 244 colors while File size is 40.1 kbytes.

First notice the difference in the file size of the two. Then, notice that even though this file is now a Black and White graphic that it has a fairly large file size compared to the other graphics you reduced colors on. This may not make any sense to you since it is basically a "black and white" photo now.

The reason the file size is so large is because Paint Shop Pro has converted all of the colored pixels using as many shades of black to convert this image. Your image could have as many as 16 million shades of unique colors of black.

To reduce the file size of this grey scale some more, just use COLORS || DECREASE COLOR DEPTH to 16 colors (4 bit). You will see very little difference again in the quality of the image but a considerable reduction of colors and file size.

From these exercises, you have learned how to use Colors to create an interesting Text, how to check color count and file size and how to reduce color count and file size without reducing image quality to any great degree.

Slimming Your Graphics:

The remainder of the tutorial is information, BUT, I believe you will find the information very useful at a later date.

You have just seen how reducing the number of colors used in an image can decrease the size of the image file. We also know that in most cases a GIF will be a smaller file size than a JPEG when saved in Paint Shop Pro.

There is still one more way that you can reduce the file size of an image. Using the GIF Wizard (Was a free service provided on the internet, I'm not sure if it still is) will take any graphic you have and reduce it using different color palettes with no sweat off your back!

This is going to be a program you will NEED to use when creating your own banners for Link Exchange, GeoCities, etc, as they require a small file size that Paint Shop Pro cannot achieve without losing the quality of the image all together. You will need to upload an image to your Web site. Later, you will need to go to the URL above to use the GIF Wizard. Follow the instructions to reduce your image and save it again in it's reduced size.

The following was taken from a session that a JASC representative was available to answer questions.

Tonight we will do a discussion of file types and go into more depth about how the color palettes work with browsers, etc. This is very important for you to know since you are creating graphics for the Web. Color graphics are one of the defining characteristics of online publishing.

Unlike the high cost and complexity of four-color printing on paper, with electronic documents there is no need to economize by avoiding color content. There are some potential performance drawbacks to stuffing your Web pages full of big, bright color images, but with proper planning you can optimize the graphics in your Web pages for faster downloading and more accurate color reproduction on your readers' screens. We all have had our share of going to a site that has graphics that take too long to load...what happens?

Tonight, I hope you leave here with a better understanding of what makes graphics and how they can be managed! This will help you not to be one of those people who have heavy pages!

Color and GIF Graphics:

The GIF graphic format was developed to optimize the transmission of image data over networks. To keep file sizes small, the designers of GIF limited the number of colors in a GIF image to 256. Images limited to 256 colors are also referred to as "8-bit images", and may also be called "indexed color" images. "8-bit" refers to the number of memory bits assigned to each pixel in the GIF image.

Each digital bit can only be a "1"or a "0," so with eight bits of memory allocated to each pixel there can only be 256 (2 to the eighth power) possible unique combinations of "0's" and "1's." It will make more sense as we go along. "Indexed color" refers to the 256-color index palette that each image draws its colors from.

It might seem that 256 colors is more than enough to handle most images, but GIF graphics are quite limited in their ability to handle the almost infinite color range found in most photographs. When you convert a full-color 24-bit image (that typically contain millions of colors) to a 256-color GIF you lose some image detail.

Through a process called dithering, image editing programs like Photoshop and PSP juxtapose pixels of different colors in a fine dot pattern, to make it seem as if a full range of intermediate colors are present in the image when it is seen at normal viewing distances.

Normally when you convert a full-color image into a GIF you allow the graphics program to choose the 256 colors that best fit that particular image. This results in the optimal GIF image quality, but it does have some drawbacks. The problem shows up when two or more custom-colored GIFs (that could make 512 different colors altogether) need to be on the screen at the same time on a computer display that can only show 256 colors simultaneously (an 8-bit display).

If the viewer of your page only has a monitor that shows 256 colors at one time (like most SVGA and older Macintosh color displays), then the colors in your GIF images will look distorted, or"dithered" When running on a 256-color screen, the browser forces the range of graphic colors on the Web page to conform to one of the colors in the standard system palette.

We not only face browser issues, but individual system issues as well... Forcing a GIF made from custom palette colors to display within the limited system palette colors often results in ugly distortions of the image. See figure a A Web browser running on an 8-bit display has no way of optimizing your particular custom GIF colors. It just uses simple logic to force the picture to display in the nearest equivalent colors in the system palette. The result is often color banding, or harsh distortions of the original colors.

Three things to make this seem simple..

1. Run your system using the highest color setting (24bit if possible)

2. Use the gif file format for line art images .....line art is clipart images.. that is images that are like drawings or outlines of images.. (cartoons etc)

3. Use JPG for photorealistic images

Always save a copy of your original graphics files and photographs in their full-color state, using the .psp format, before you make new versions using the system palette. For photographs or other larger illustrations on your Web pages you might wish to use the JPEG file format. The JPEG format allows more efficient compression of the files, speeding download times on large images.

However, JPEG images are inherently full-color images (containing thousands or millions of colors), so JPEG images will also look distorted when viewed on standard 256-color SVGA or older Macintosh monitors. Newer Web browsers do a pretty good job of displaying JPEG images on 8-bit monitors, but only a 16-bit or 24-bit display will reproduce JPEG images accurately.

"Always save a copy of your original graphics files and photographs in their full-color state, using the .psp format, before you make..." The PSP file format is the only format that supports layers. So if you create a multi layered image, you must save it as a PSP image to retain the layers. Use the .psp format to work on the image, when it is done and ready to be used, convert it to the format you need.

Next week we will be covering Cutouts, Chiselled Buttons and Using the Hot Wax Coating, so stay tuned : )