PSP Week 2

Different bit and color sizes

Warning! Slow page load! Lots of images and some are big.

JPG 24 bit 16 million colors 4.6KB	GIF 8 bit 256 colors 2.3KB
GIF 4 bit 16 colors 2.1KB	GIF 1 bit 2 colors 597 bytes

Techniques

Replaced the burnt orange color with red

Flood Fill tool used to replace the burnt orange color in the picture with red.
Opacity was set to 100.
Tolerance was set to 51.
The lower the Tolerance, the finer distinction for this tool. Set it too high and the whole picture is flooded with color.

Flood Fill tool used to replace the burnt orange color in the picture with with a Foreground Gradient called Autumn.
Opacity was set to 100.
Tolerance was set to 61.
The slightly higher Tolerance allowed the color to move up the picture just a bit more, showing a bit more gradient.

I personally like the first picture with the replacement color of red.

The Buttons

Click on the button to take you to a description of that how that button was made.

Chapter 1 Button

Transparent GIF.
Effect of Inner Bevel set at Angle, Width 8, Smoothness 8, Depth 8, Ambience 0, Shininess 40, Angle 315, Intensity 50, Elevation 30.

Back to the buttons

Chapter 1 B Button

Transparent GIF.
Used the Color Replacer to change the color of individual characters.

Back to the buttons

Chapter 2 Button

Buttonized effect.
Settings are Height 5, Width 6, Opacity set to 60 with a transparent edge.

Back to the buttons

Chapter 3 Button

Buttonized effect.
Settings are Height 6, Width 6, Opacity 74 with a transparent edge.
Has a Drop Shadow effect in dark grey.
The settings are Offset Vertical 4, Horizontal 4, Opacity = 90, Blur 9.4.
Effect of Inner Bevel set at Angle, Width 8, Smoothness 8, Depth 8, Ambience 0, Shininess 40, Angle 315, Intensity 50, Elevation 30.

Back to the buttons

Chapter 4 Button

Buttonized effect.
Settings are Height 6, Width 6, Opacity 74 with a transparent edge.
Has a Drop Shadow effect in dark grey.
The settings are Offset Vertical 4, Horizontal 4, Opacity = 90, Blur 9.4.
Effect of Inner Bevel set at Angle, Width 8, Smoothness 8, Depth 8, Ambience 0, Shininess 40, Angle 315, Intensity 50, Elevation 30.

Back to the buttons

Chapter 5 Button

3D Button.
Followed the directions in Hour 22.
I realize the button does not go with the theme of this page but it was worth while to do the technique.

Back to the buttons

Wooden Button

Used an image that was Flood Filled with the wood background pattern.
The image was Buttonized.
Settings are Height 7, Width 7, Opacity set to 91 with a transparent edge.
The image was copied on to a larger canvas and a Drop Shadow was applied.
The text is black with an Inner Bevel effect set as Metallic. The settings are are Bevel - width 1; Image - Smoothness 10, Depth 5, Ambience 0, Shininess 80; Light - color white, Angle 315, Intensity 25, Elevation 40.
This button has a a white margin, so it looks best on a white background.

Back to the buttons

What I learned

I spent a lot of time re-doing buttons and backgrounds. I changed my font from Forte to a font called Cooper Black. Normally I really like Forte, but when you start applying effects to small text, this font starts to become illegible.

The Wooden Button uses the font Forte and is practically unreadable. So either I would pick a different font (which I did) or maybe skip the bevel effect.

The two Buffalo Buttons that I played around with are Transparent GIFs and the color that was made transparent is white. I had to play with the Tolerance level when exporting the PSP file to the GIF format in order to eliminate white from around the buffalo and at the bottom of one button. The final tolerance setting was changed from the default of 1 to a level of 7.

Background Images

I am not a big fan of background images, but for this assignment I picked something I thought would fit the "cowboy" theme of the bucking horse images used.

The background was done using a PSP 7 pattern called Stained Wood that has a Drop Shadow effect in dark grey. A layer with the Week 2 title was added and the text was raised using the 3D effect Inner Bevel set at Metallic. The horse image was added as another selection and altered with the 3D Inner Bevel effect set to Metallic and a light drop shadow applied.

The created border image is in the HTML page as a Cascading Style Sheet background-image with no-repeat and set to fixed.

I also considered the PSP 7 pattern called Pine, but felt it was too busy.
pine background gif

I did make a Seamless Tile background using the stained wood pattern at 20% opacity on top of the background color of #CC9933 with an opacity of 60% and saved the image as a JPG file with 50% compression.
seemless tile background gif

And for Netscape Users...

Netscape users can click either one of the Buffalo Buttons below to change the background by scrolling through 4 background GIF files.