Making Backgrounds With Paint Shop Pro

Size: px

Start display at page:

Download "Making Backgrounds With Paint Shop Pro"

Elijah Rogers
6 years ago
Views:

1 Making Backgrounds With Paint Shop Pro A good Web site deserves a good background. Whether you decide on a single color, a faded repeated logo, a textured tile, or a border, the background of your Web pages will help set your site s tone. In this exercise, you ll learn how to create your own backgrounds and use them in your Web pages. Specifying a Background Color You can set the background color for a Web page with the BGCOLOR= #nnnnnn subcommand of the <BODY> tag. The value of BGCOLOR can be specified as a string of three pairs of hexadecimal digits and beginning with the # character, like this: What are Hexadecimal Digits? <BODY BGCOLOR= #FA0913 > Hex digits range from 0 through 9 and from A through F. A is equivalent to 10, B is equivalent to 11, C to 12, and so on up to F, which is equivalent to 15 in decimal. Hexadecimal A B C D E F Decimal The first pair of digits specifies the amount of red in the color. The second pair specifies the amount of green. And the third pair specifies the amount of blue. The value of each pair ranges from 0 to 255 in decimal. In the preceding example, the amount of red is 250 (FA in hex), the amount of green is 9 (09 in hex), and the amount of blue is 19 (13 in hex). x 16 1 (16) x 16 0 Understanding Hexadecimal Color (1) Total RGB Color F A (15*16)+ (10*1) = 250 Red = (0*16) + (9*1) = 9 Green = (1*16) + (3*1) = 19 Blue = 19 Using Regular Color Names In addition, you can use 16 standard colors by name or hexadecimal number. For example: <BODY BGCOLOR= silver > The colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. HTML Exercise 26 Page 1

2 The BGCOLOR subcommand can also be used with any of the TABLE tags (<TABLE>, <TR>, <TD> tags. For example, to begin a table that has a background color of silver, you use HTML code like this: <TABLE BGCOLOR= silver > <TR BGCOLOR= silver > <TD BGCOLOR= silver > Hexadecimal codes and named colors can also be used with the <FONT> </FONT> tags to change the colors of text displayed on your Web page. For example to specify purple text, you could do this: Or this: <FONT COLOR= > And now for some purple text.</font> <FONT COLOR= purple > And now for some purple text.</font> Coloring Text and Links You need to be able to change text and link colors, because if you color only the background, you have only restricted choices for color combinations. If you love a dark-blue (#000033) background, for example, but your text is still black, you don t have a very readable page. You need to pick a good background color and then select text and link colors that provide good contrast. Don t go wild with colors. Remember that your readers have to sit and look at the background, text, and link colors you choose, so consider choosing colors that are pleasant to look at. If you re really into fuchsia and bright-orange color combinations, consider that your readers may not be. Whenever you choose a color for text and links, you re choosing a color for all the text within the <BODY>... </BODY> tags. In addition to changing normal text, that is, text that you use for such elements as headings and paragraphs, you also can change the color of link text. Three different kinds of links are available, as the following list describes: Unvisited links: The reader has never selected that link on the page. Visited links: The reader has used that link to visit somewhere else. Active links: The link that a reader is actually selecting only visible while the reader clicks the link. You color text and links by adding the following subcommands to the <BODY> tag: TEXT="#RRGGBB" changes text color. LINK="#RRGGBB" changes link text color. VLINK="#RRGGBB" changes visited link color. ALINK-"#RRGGBB" changes active link color. HTML Exercise 26 Page 2

Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro 7. 2. Press Ctrl+N. 3. The New Image dialog box opens. 4.

3 HTML Exercise 26 Logo Embossing and Tiling Solid-colored Web pages are fine, but sometimes you might want to add a little more to your background maybe some texture or a faded repeating pattern. Your javascript.html Web page will have a faded repeating logo, with a slight texture. You will make this in Paint Shop Pro 7 because it has a special filter. 1. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro Press Ctrl+N. 3. The New Image dialog box opens. 4. Under Image Dimensions, select 400 pixels for the Width and 400 pixels for the Height. 5. The Resolution should be set to 72 ppi. This is the resolution of a computer monitor. 6. For Background Color, select White. 7. For Image Type, select 16.7 Million Colors. 8. Click OK. 9. Click the Normal Viewing button on the Toolbar. 10. The canvas is now at full size. Selecting a Shape 11. Choose the Preset Shapes tool from the Tool Palette. 12. Look at the Tool Options Window. 13. Copy the settings in the picture to the right. 14. You may use a different shape if you wish. 15. Click the Foreground Color Box. 16. The Color dialog box opens. 17. Under Basic Colors select a color of your choice. 18. Click OK. 19. Click the triangle on the Background/Fill button and select Null. 20. The circle will not have a fill color. 21. Click the triangle on the Foreground/Stroke button and select Solid. 22. Click the Foreground/Stroke button, but not on the triangle. 23. The Color dialog box opens. HTML Exercise 26 Page 3

24. Under Basic Colors select Black. 25. Click OK. 26. The stroke color is the color of the line. 27. Under Textures, both the Foreground and Background should be set to Null. 28.

Stop dragging about 10 pixels from the end of the canvas. 32. You should have a circle (or another shape), which fills most of the canvas. 33. Look at Figure 1. Figure 1 Creating a New Layer 34.

4 24. Under Basic Colors select Black. 25. Click OK. 26. The stroke color is the color of the line. 27. Under Textures, both the Foreground and Background should be set to Null. 28. Hold the Shift key down to get a perfect shape. 29. Looking at the Status bar, move the mouse pointer to point 200, Right-click and drag out a circle towards the upper-left corner. 31. Stop dragging about 10 pixels from the end of the canvas. 32. You should have a circle (or another shape), which fills most of the canvas. 33. Look at Figure 1. Figure 1 Creating a New Layer 34. Click Layers on the Menu bar and select New Raster Layer. 35. The Layer Properties dialog box opens. 36. Click OK. 37. Click the triangle on the Background/Fill button and select Solid. 38. Click the Background/Fill button, but not on the triangle. 39. The Color dialog box opens. 40. Under Basic Colors select Black. 41. Click OK. Adding Text 42. Select the Text tool on the Tool Palette. 43. Move the mouse over the drawing canvas. 44. Move the crosshair 200 pixels from the top and 200 pixels across. HTML Exercise 26 Page 4

45. Look at the Status bar in the left corner. 46. Click on the drawing canvas. 47. The Text Entry dialog box opens. 48.

This turns off the Stroke color and leaves the Fill color. 51. Choose any font or size. 52. Select the Bold and Center options. 53. Under Create As, select Floating and Antialias. 54.

5 45. Look at the Status bar in the left corner. 46. Click on the drawing canvas. 47. The Text Entry dialog box opens. 48. Move the dialog box away from the canvas and press the Proof button. You can now preview any text. Figure Click the Standard text button. 50. This turns off the Stroke color and leaves the Fill color. 51. Choose any font or size. 52. Select the Bold and Center options. 53. Under Create As, select Floating and Antialias. 54. Type your names on different lines or use an alias. 55. Click OK. 56. Move the floating text to the middle of the circle. 57. Press Ctrl+D to deselect the text. 58. Look at Figure 2. Embossing the Logo 59. Click Layers on the Menu bar, point to Merge, and select Merge All (Flatten). 60. Click Effects on the Menu bar, point to Texture Effects, and select Emboss. Changing the Brightness for Contrast 61. Click Colors on the Menu bar, point to Adjust, and select Brightness/Contrast. 62. The Brightness/Contrast dialog box opens. 63. Copy the settings in the picture to the right. 64. The logo must be very light for good contrast. 65. Click OK. HTML Exercise 26 Page 5

66. Click Effects on the Menu bar, point to Noise, and select

Change the Noise to 20%. 69. Select Uniform. 70. Click OK. 71.

6 66. Click Effects on the Menu bar, point to Noise, and select Add. 67. The Add Noise dialog box will open. 68. Change the Noise to 20%. 69. Select Uniform. 70. Click OK. 71. Look at Figure 3. Resizing the Picture 72. Press Shift+S. 73. The Resize dialog box opens. 74. Under Percentage of original, change the Width and Height to Click OK. Figure 3 HTML Exercise 26 Page 6

Saving as a Compressed GIF File Click File on the Menu bar, point to Export, and select GIF Optimizer. 76. The GIF Optimizer dialog box opens. 77. Click the Transparency tab and select None. 78.

7 Saving as a Compressed GIF File Click File on the Menu bar, point to Export, and select GIF Optimizer. 76. The GIF Optimizer dialog box opens. 77. Click the Transparency tab and select None. 78. Click the Colors tab. 79. Copy the settings in the picture to the right. 80. Click OK. 81. The Save Copy As dialog box opens. 82. Save in your HTML folder. 83. Change the file name to logo_bg.gif 84. The bg is for background. 85. Click Save or press Enter 86. Close Paint Shop Pro and do not save. Using the Logo Background To embed this tile or any tile in a Web page, you use the BACKGROUND subcommand of the <BODY> tag. You should also use a BGCOLOR subcommand in case the viewer has pictures turned off. This way, the viewer will see some color and not an empty page. <BODY BACKGROUND= logo_bg.gif BGCOLOR #C6CDC7 > 87. Double-click your period folder. 88. Double-click your HTML folder. 89. Double-click the index.html document to open it. 90. Right-click a blank spot on the page and select View Source. 91. The index page opens in Notepad. 92. Change the Revision date. Below the date, add this line of code. Revised--Date<BR> HTML Exercise 26<BR> 93. Use the Caps Lock key to make all caps for the tags. 94. Change the dummy tags and text between the <BODY> </BODY> tags. HTML Exercise 26 Page 7

</HEAD> <BODY BACKGROUND="logo_bg.gif" BGCOLOR="#C6CDC7"> <CENTER><H1>Welcome To Our World (or your own title)</h1></center> <HR> 95. Click File on the Menu bar and select Save. 96.

8 </HEAD> <BODY BACKGROUND="logo_bg.gif" BGCOLOR="#C6CDC7"> <CENTER><H1>Welcome To Our World (or your own title)</h1></center> <HR> 95. Click File on the Menu bar and select Save. 96. Click Internet Explorer on the Taskbar. 97. Click the Refresh button. 98. You should now see the Web page with a light logo background. 99. Look at Figure 4. Figure 4 Select a background color. This makes light blue-gray. Uploading Your Documents 100. In Internet Explorer, type in the Address bar text box and press Enter Type your user name and password Press Enter or click the Sign in button Under Advanced Toolbox, click. Upload index.html Upload logo_bg.gif 104. Click the button to copy the files to the Geocities server A new page will open telling you that you have successfully uploaded the files. HTML Exercise 26 Page 8

9 106. Click the hyperlink to your home page. Printing the Web Page 107. Before printing, click View on the Menu bar, point to Text Size, and select Medium Press Ctrl+P The Print dialog box opens Change the Name to Ireland Change the Number of copies to Click OK Your teacher will go online to check your Web page and mark the grade on the printed copy Close all windows. HTML Exercise 26 Page 9

HTML Exercise 21 Making Simple Rectangular Buttons

HTML Exercise 21 Making Simple Rectangular Buttons Buttons are extremely popular and found on virtually all Web sites with multiple pages. Buttons are graphical elements that help visitors move through