Graphic Basics
Learn the basics of creating web readable graphics To view a printable version of this course, click here
Site Map
  • 1. Graphics Fundamentals
    1. 1.1 Computer graphics
    2. 1.2 Web graphic formats
    3. 1.3 Choosing file formats for web graphics
  • 2. Editing Graphics
    1. 2.1 Paint Shop Pro
    2. 2.2 Bringing in a graphic
    3. 2.3 Saving a graphic
    4. 2.4 Cropping a graphic
    5. 2.5 Resizing a graphic
    6. 2.6 Capturing a graphic
    7. 2.7 Adding text to a graphic
    8. 2.8 Adding a Drop Shadow
  • 3. Adding graphics to ReadyGo WCB
    1. 3.1 Adding graphics
    2. 3.2 Moving MS clip art files into a ReadyGo WCB course
    3. 3.3 Estimating a graphics height and width
    4. 3.4 Creating relative size graphics
    5. 3.5 Aligning graphics on your page
    6. 3.6 Spanning bullet points
    7. 3.7 Graphics and blind readers
    • Graphic BasicsCopyright ©  2006-2011 by ReadyGo Inc. All rights reserved
    1.Graphics Fundamentals
    The fundamentals of web graphics
    1. 1.1 Computer graphics
    2. 1.2 Web graphic formats
    3. 1.3 Choosing file formats for web graphics
    1.1 Computer graphics
    When a graphic is created using a computer, the graphic artist needs to decide what type of format the graphic will be saved in.
    1. There are many types of graphic formats. Each format has been developed for specific reasons.
    1. You can identify the file format by the two to four letter extension (letters after the . in the file name).
    1. Not all graphic format types are readable by web browsers.
      1. Some graphic formats such as .eps or .ai have been developed to work with high resolution printers.
      1. Other graphic formats will display on a computer screen but cannot be viewed in a browser e.g. .wpg or tiff.
    1.2 Web graphic formats
    The three most popular graphic formats that can be viewed by browsers are:
    1. GIF - Graphics Interchange Format: A patented file format that supports 256 (8 bit) colors and is generally used for a wide range of graphics. GIF has three major features that make it popular.
      1. Interlacing is a method of storing the image so that when it is displayed, it's quality is improved by several passes. The user gets an idea of the contents of the image before the entire image has been constructed. The images appears in several steps.
      1. Transparency You can designate one color of the image as transparent. The text or images that are on the page beneath the GIF will be visible
      1. Animation A sequence of GIFs, or portions of images, can be stored. The browser will then display these images in sequence, creating a moving image.
    1. JPEG or JPG - Joint Photographic Experts Group: Is patent-free file format that supports 16 million (24 bit) color. It is generally used for high resolution graphics like photographs.
    1. PNG - Portable Network Graphics: Provides a patent-free replacement for GIF. It supports many colors and is generally used for a wide range of graphics. The PNG format can also be used to save photographs.
      1. Note: PNG support requires browsers later than 4.1.
    It's True! It's True! Higher numbers of colors and greater resolution for a file mean a better looking display, but also a larger the file size (so it will take longer to download.)
    1.3 Choosing file formats for web graphics
    A graphic can add to the time it takes for a web page to download. By planning carefully and using the following techniques, you can speed up the rate at which your course appears on a student's browser.
    1. Download speed is directly related to the size of the files that contain your images. Therefore, try to keep graphics files as small as possible.
    2. Reduce the resolution (dots per inch or dots per centimeter) at which you store your images. By reducing your image from 120 dpi to 60 dpi, your file size will reduce to one-quarter its original size.
    3. Use fewer colors, especially with manually created illustrations. You will usually have the choice of saving a file as a 16-color, 256-color, or 24-bit (16,777,216-color) image. Look at your image after saving it with fewer colors. Your users will probably not notice the difference, but your graphic will download faster.
    1. Enter the size of your graphic in the WIDTH and HEIGHT attributes dialog box. This will speed up the display of your images because the browser will know how to lay out the page before downloading the file.
    It's True! It's True! The smaller the graphic, the faster the graphic downloads. Many times by lowering the number of colors you can dramatically decrease the size of the graphic.
    2.Editing Graphics
    The basics of modifying existing graphics so they display well in a browser.
    1. 2.1 Paint Shop Pro
    2. 2.2 Bringing in a graphic
    3. 2.3 Saving a graphic
    4. 2.4 Cropping a graphic
    5. 2.5 Resizing a graphic
    6. 2.6 Capturing a graphic
    7. 2.7 Adding text to a graphic
    8. 2.8 Adding a Drop Shadow
    2.1 Paint Shop Pro
    To create new graphics or modify existing graphics you will need to use a graphic software program. There are many good graphic tools on the market. In this course we will modify existing graphics using the free trial version of Paint Shop Pro, a $99 graphic tool.
    1. To get started, go to the Corel web site to download Paint Shop Pro.
    1. You will need to install the Paint Shop Pro software on your PC.
    It's True! It's True! It will take about 10 minutes to download and install Paint Shop Pro.
    2.2 Bringing in a graphic
    The first step in adjusting graphics for the web is to bring an existing graphic into the tool.
    1. Start up Paint Shop Pro from the icon on your desktop.
    1. For this exercise we will use the picture below.
      1. For Microsoft Internet Explorer users, right-click the picture, choose save picture as and save the picture in your temp folder.
      1. For Netscape users, right-click the picture, choose save image as and save the picture in your temp folder.
    1. From the toolbar choose File > Open.
    2.3 Saving a graphic
    The last step is to save your graphic.
    1. From the toolbar, choose File > Save.
    1. In the Save as Type menu, choose the file type for the graphic.
    1. For web viewable graphics choose either GIF, PNG, or JPEG.
    Tip Tip Keep track of the file name and location of your graphic so you can find it when you want to load into ReadyGo Web Course Builder.
    2.4 Cropping a graphic
    We will select a small portion of the picture we loaded. This is the type of process you will follow if you want to optimize a graphic so that it delivers more quickly over the web. Essentially, we are getting rid of excess portions of the picture outside our region of interest.
    1. Click the selection tool located on the left toolbar (highlighted in green).
    1. Drag your mouse over the section of the graphic you want to keep. Your selection will now be highlighted with a black and white dashed box.
    1. Choose copy, then paste. The selection will now be a new graphic.
    2.5 Resizing a graphic
    Most photographs are very large or are taken at a very high resolution. You will need to resize them so that they fit in your browser window and download faster. With most tools there are two ways to resize.
    1. The first way is to make the photograph smaller.
      1. From the toolbar, choose Image > Resize.
      1. In the resize dialog, box click percentage of original and type 50%.
    1. The second method is for photographs that you don't want to shrink but you just want to optimize. Most tools have a way to optimize for the web.
      1. From the toolbar, choose File > Export > JPEG optimizer.
      1. In the JPEG optimizer, click the Use Wizard button.
    2.6 Capturing a graphic
    This is the process to follow if you would like to make a screen snapshot of something that is displayed on your computer.
    1. From the toolbar, choose File > Import > Screen Capture > Start.
      1. Fill your window with the information you want to capture.
      2. Right-click your mouse to turn screen capture on.
      3. Use your left mouse button to drag and drop the cursor over the screen capture area.
    2. You can now crop and if necessary resize the screen capture.
    2.7 Adding text to a graphic
    After you bring the graphic into Paint Shop Pro, you can add text.
    1. On the left toolbar, click A (highlighted in green)
    1. Click on the picture and the text dialog box opens.
    1. Enter the words you want to display.
    1. Click OK on the bottom of the dialog box.
    It's True! It's True! Power Point has a great text and arrow tool. You can add your text and arrows in PowerPoint and then screen snap shot the picture into PaintShopPro.
    2.8 Adding a Drop Shadow
    1. Adding a drop shadow to a picture can make the picture stand out.
    1. Within PSP copy/paste your picture into a new blank page by going to File > New
    1. To add a drop shadow go to Effects > 3D Effects > Drop Shadow
    3.Adding graphics to ReadyGo WCB
    The basics of adding graphics to a ReadyGo course
    1. 3.1 Adding graphics
    2. 3.2 Moving MS clip art files into a ReadyGo WCB course
    3. 3.3 Estimating a graphics height and width
    4. 3.4 Creating relative size graphics
    5. 3.5 Aligning graphics on your page
    6. 3.6 Spanning bullet points
    7. 3.7 Graphics and blind readers
    3.1 Adding graphics
    Graphics improve the user experience by providing a visual image that supports the text.
    1. You can add graphics to a bullet page by clicking the Graphic/Audio button.
    2. You can also add graphics to the front page and side bar, Tell Me More, Try This, and Step-by-Step pages.
    3. Using the Graphic/Audio button you can easily integrate the following into your course: graphics, audio files, simulations, plug-ins, Java applications, or any other web tool.
    3.1.1 3.1a About the Graphic Element Type field
    The graphic tool provides you with many options.

    Local Figure/Graphic (*.gif, *jpeg, *png, etc.) - You can add any graphic that a browser can display into your course. Select this option when the graphic is on your hard drive or a hard drive on a local area network (LAN) that you can access.

    Remote Graphic - Use this option when the graphic is on a different web site. This graphic is not integrated directly into the course. The student must have Internet access to the location to see the graphic. An example of a remote graphic is a stock ticker located on a financial site. In this example, since the graphic is constantly changing, it is best to leave it as a remote graphic.

    Java Applet - A Java Applet is a program that can run on a student's browser. Use this option to integrate simulations into your course.

    Plug-In (embed) - Voice, video, and many graphics need a plug-in to work. You can integrate any content requiring a plug-in when you choose this option.

    Local Image + URL - This feature turns a local graphic into a "hot" or linked graphic. When a student clicks on a linked graphic, a new web page or web site is displayed in a separate browser window. This keeps the class sticky by leaving the current page displayed in a window. The student accesses a new location in a new browser window.

    Advanced/Other (Enter/HTML) - Use this option to integrate anything that runs on the web such as any HTML or JavaScript.

    3.1.2 3.1b Adding Graphics and Audio
    Step Instruction What it looks like
    1 Click the Graphic/Audio button.
    2 In the Graphic Element Type field, specify the type of media you want to integrate into the course.
    3 In the Alternate display name field, specify text that is displayed when the student moves the mouse over the graphic in the course.
    4 Specify the size of your graphic. The default height of -1 and width of -1 allows the browser to display the graphic in its default size.
    5 Click Select Image to find the graphic on your computer. Select the graphic you want to use and click Open.

    To see a preview of the graphic you selected, select Preview Graphic.

    6 Specify how you want the graphic placed on the page.
    7 To add an audio file to the page, select the Audio check box.
    8 Select whether the audio file is a local file or is located remotely where you will provide a URL for the file.
    9 Choose how you want the audio file to play on the page.
    10 If you selected to insert a local audio file, click Select Audio to find the file on your computer. Select the file you want to use and click Open.

    If you selected to insert a remote audio file, enter the Remote URL.

    11 If you selected Play when User Clicks Audio Graphic, you can specify text that is displayed when the student moves the mouse over the audio graphic in the Alternate Display Name field.
    12 Add any additional options that may be required for the plug-in in the Advanced Optional Instructions field.
    13 Click Done to save your changes.
    3.2 Moving MS clip art files into a ReadyGo WCB course
    Microsoft Clip art files (.WMF) can easily be used in ReadyGo WCB courses.
    1. Click the Graphic/Audio button and navigate to your clip art file.
    1. View and choose the WMF file you want to use in your course.
    1. Click Create to save the file as PNG or JPEG.
    3.3 Estimating a graphics height and width
    Graphics can range in size. The location of the graphic determines the optimal size.
    1. An optimal size of a logo located in the upper left corner of your browser is 50 x 50 pixels
    1. An optimal size for a graphic located on a bullet page with bullet points to the left or right is between 250 x 250 pixels to no larger than 400 x 400 pixels.
    1. An optimal size of a graphic located on a bullet page without bullet points is 400 x 400 pixels to no larger than 600 x 600pixels.
    1. Flash files are usually larger then graphic files.
      1. The optimal size for Power Point to flash is 600 x 480.
      1. An optimal size for a screen shot simulation is 600 x 600.
    3.4 Creating relative size graphics
    With ReadyGo WCB, you can make your graphic size absolute or relative.
    1. An absolute sized graphic is always the same size regardless the size of the student's browser.
    1. A relative sized graphic scales depending on the size of the student's browser.
    1. Sizing graphics:
      1. To size an absolute graphic use either a -1 or the actual size of the graphic in the hight width section of the graphic dialog.
      1. To size a relative graphic use a % in the hight width section of the graphic dialog. For example, make width 75%, keep height -1 so the picture scales correctly.
      1. This picture is sized with a width and height of 75% . Make your browser window smaller or larger and watch this graphic shrink and grow.
    It's True! It's True! This feature works much better in Mozilla browsers then in IE.
    Tip Tip Relative size graphics are good to use when you have a high resolution monitor and you don't know what type of monitors your student may use.
    3.5 Aligning graphics on your page
    You have three choices when aligning graphics on your page.
      It's True! It's True! If you choose "center" the bullet point associated with the graphic will be above the graphic.
      3.6 Spanning bullet points
      Spanning bullet points lets you associate a graphic with one or multiple bullet points.
      1. Next to each graphic button is the spanning dial. You use this dial to choose how many bullet points you want to span
      It's True! It's True! Spanning lets you better align bullets to graphics.
      3.7 Graphics and blind readers
      Many government agencies need to make their web site friendly to people with disabilities. All ReadyGo courses are already set up to work with blind readers.
      1. The Alternate display name (Alt tag) is provided so that you can enter explanatory text
      1. Since a blind person can't see the graphic, you will need to provide an explanation of the graphic.
      It's True! It's True! It is good web etiquette to use the Alt tag.