User Services. WebCT Integrating Images OBJECTIVES

Transcription

1 User Services Spring 2005 OBJECTIVES Learn how to manipulate images in Photoshop Create WebCT: Icons Banner Images Backgrounds Visual Aids Understand file formats and how to save images for use on the Web WebCT Integrating Images Graphics are an important part of any Web site. Their performance and look can be the difference between a Web site that is successful and one that is not. Learn how to create Web graphics for your WebCT course that not only catch the eye, but also perform efficiently across the Internet. Also, learn how to upload these files into WebCT. Getting Help The ITS Help Desk, located in 108 Allen Hall, is a service provided to all Mississippi State University students, staff, and faculty. The ITS consultants are available to help with various computer-related problems as well as provide answers to computer and technologyrelated questions. Visit the Web site at for handouts and resolutions to common computer problems. If you cannot find an answer to your question on the Web or you do not have access to the Internet, please call at (7:30 a.m. to 5:00 p.m. Monday through Friday). You may also contact the ITS Help Desk by at helpdesk@msstate.edu. Instructors Tina Green tmg3@msstate.edu Amy Berryhill ahb2@.msstate.edu

2 Table of Contents File Formats... 3 Photoshop Overview...4 Exercise One - Creating WebCT Icons... 6 Exercise Two - Creating a Background Image...10 Exercise Three - Elipses, Lines and Arrows...12 Exercise Four - Creating a Banner File Management - Uploading a Single File...18 Zipping a File...20 Uploading A Zipped File Unzipping a File...22 Adding an Image as a Page Changing an Icon

3 File Formats Photoshop allows you to create and save files into many different formats. Graphics Interchange Format (GIF) is the file format commonly used to display indexed-color graphics and images in hypertext markup language (HTML) documents over the World Wide Web and other online services. GIF is an LZW-compressed format designed to minimize file size and electronic transfer time. GIF format preserves transparency in indexedcolor images; however, it does not support alpha channels. Joint Photographic Experts Group (JPEG) format is commonly used to display photographs and other continuous-tone images in hypertext markup language (HTML) documents over the World Wide Web and other online services. JPEG format supports CMYK, RGB, and Grayscale color modes, and does not support alpha channels. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the Maximum quality option produces a result indistinguishable from the original. Tagged-Image File Format (TIFF) is used to exchange files between applications and computer platforms. TIFF is a flexible bitmap image format supported by virtually all paint, image-editing, and page-layout applications. Also, virtually all desktop scanners can produce TIFF images. TIFF documents can have a maximum file size of 4 GB. Photoshop CS supports large documents saved in TIFF format. However, most other applications and older versions of Photoshop do not support documents with file sizes greater than 2 GB. TIFF format supports CMYK, RGB, Lab, indexed-color, and grayscale images with alpha channels and Bitmap-mode images without alpha channels. Photoshop can save layers in a TIFF file; however, if you open the file in another application, only the flattened image is visible. Photoshop can also save annotations, transparency, and multiresolution pyramid data in TIFF format. Portable Document Format (PDF) is a flexible, cross-platform, cross-application file format. Based on the PostScript imaging model, PDF files accurately display and preserve fonts, page layouts, and both vector and bitmap graphics. In addition, PDF files can contain electronic document search and navigation features such as electronic links. PDF supports 16-bit-per-channel images. Adobe Acrobat also has a Touch Up Object tool for minor editing of images in a PDF. Photoshop recognizes two types of PDF files: Photoshop PDF files and Generic PDF files. You can open both types of PDF files; however, you can only save images to Photoshop PDF format. 3

4 Photoshop Overview The Toolbox After opening Adobe Photoshop, you will notice many tools and windows. The Photoshop toolbox is found to the left on your computer screen. The tools in the toolbox allow you to select, paint, edit, and view images. Most tools have associated Brushes and Options which are located in the Options Bar and allow you to define the tools effects. Selecting Tools A tool can be selected by clicking its icon in the toolbox. A small triangle to the right of a tool icon indicates a pull-out menu of hidden tools. To select a tool, do one of the following: Small triangles indicate hidden tools. Click on the visible tool icon. To select a hidden tool, click and hold the pointer on the visible tool, and drag to highlight the tool you want. The Options Bar Most tools have options that are displayed in the Options Bar. The options bar is context sensitive and changes as different tools are selected. Some settings in the Options Bar are common to several tools (such as painting modes and opacity), and some are specific to one tool (such as the Auto Erase setting for the Pencil tool). You can move the Options Bar anywhere in the work area using the gripper bar, and dock it at the top or bottom of the screen. Tool tips appear when you hold the pointer over a tool. 4

5 Photoshop Overview The Palettes Adobe Photoshop also has supplementary windows that give you more options and flexibility when using the tools. A few windows will be open to the right side of your screen when the program opens. If you ever have to find a window, go to the main menu at the top of the screen and choose Window and then choose Show (window you are looking for). Each window also has one or more tabs at the top with more options to choose from. As an example, the Navigator palette shows you a thumbnail preview of the current image that you are working on. A slide bar at the bottom of this small window allows you to zoom in and out of the view of your image. Your mouse will also turn into a hand icon when you move it into the thumbnail image. With the hand icon, you can move around in the image. The Info palette provides information on the mouse coordinates of the open image. It gives the X and Y coordinates of your mouse as well as color values for the pixel the mouse is currently on. 5

6 Exercise One Creating WebCT Icons We will now create some custom icons to use on our WebCT class page. Some Tools in WebCT use one image for the icon, while others use two images. The second image is created slightly different so that the user will know when there is something new or unread in that WebCT section. 1. Open the program, Adobe Photoshop CS from the Novelldelivered Applications window. 2. Open the file called, talking_men.tif from the Temp folder on your Desktop. This image is black and white. We will create a color version that will act as our second image. The color version will let users know when new material is available in this section. This icon is being created for the Discussions section of the WebCT class Web site. Before we begin to manipulate the image, we will adjust the Image Size to convert it to the size we need for WebCT. 1. Go to the Image pulldown menu and choose Image Size. 6

7 Exercise One 2. The Images Size dialog box appears. This dialog box allows you to change the size of images either proportionally or unportionally. In most instances, you will want your image resized proportionally. However, we need this image to be a specific size and it will not negatively affect the image to resize this way. With that in mind, make sure that the Constrain Proportions option is Unchecked. That will allow us to size the icon to the exact WebCT requirements. 3. The standard size for a WebCT icon is 120 pixels by 120 pixels square. Set the Pixel Dimensions in the dialog box. 4. Since this image is going to be displayed on the Internet, a resolution of 72 pixels is all that is needed. 5. Click the OK button. Your image will now reflect the new size. If your image appears too small, use the Magnifying Tool in Photoshop to enlarge the view to 100% or more. 6. This will be the image that students see when there are no new discussions. Save this image to your Temp folder by going to the File pulldown menu and choosing Save as. 7

8 Exercise One 7. To save this image for our Discussion icon, go to the File pulldown menu and choose Save for the Web. Save it as a.gif to the Temp folder on your desktop and name the file talking_men1.gif. Graphics in WebCT can be several file formats,.jpg and.gif are the two most common and widely used. 8. Notice that the.gif is saved to the specified location and the original file remains open. We will use this original file to create the color version of this image. 9. When using Photoshop, the colors loaded in the color picker are the colors that will be applied when using the tools. Go to the Swatches palette and select a color. When you click on a color, it automatically loads into the color picker. Color Picker 8

9 Exercise One 10. Photoshop has several ways of selecting areas of an image. Just like some counterpart graphical software, Photoshop requires you to have something selected before it can be manipulated. One of the best tools for selecting is the Magic Wand tool. Select the Magic Wand tool and click into the white jacket area of the man. 11. Go to the Edit pulldown menu and choose Fill. The Fill dialog box appears. You can choose to fill the area with the foreground or background color or choose white, black or another color. The easiest thing to do is have the color you want as the foreground color. Click OK to fill the selected area with the foreground color. 12. Use the Magic Wand tool to select other areas of the image and fill them with a color. 13. When the image looks the way you want, go to the File pulldown menu and choose Save for the Web, just like in the previous steps. Name this image talking_men2 and save it to the Temp folder on the desktop. 9

10 Exercise Two Another nice graphical element to add to your class Web site is a background image. Something important to remember when creating an image to use in the background is that wording and icons will be over it, so don t choose something too busy. If your page looks too cluttered, students will have a difficult time finding what they need. 1. With Photoshop still open, go to the Temp folder on your desktop and open the image named MSUseal.jpg. 2. The seal is 2 x 2 inches which is the size it needs to be. To create a transparent look, go to the Image pulldown menu and choose Adjustments, then Levels. The Levels dialog box appears. This is where you will make adjustments to your image. 3. Slide the Highlights level to the left and the Output Levels to the right. There are no exact levels that make your image look a certain way. Each image is different. Adjust these levels until you think the image is light enough to show up in the background. 10

11 Exercise Two 4. To save this image to use as a background, go to the File pulldown menu and choose Save for the Web. 5. Save this image to your Temp folder on your desktop as a.jpg. 6. Click OK. 11

12 Exercise Three Depending on your need, there may be a reason to label an image or something in an image. Photoshop allows you to create elipses, rectangles, and lines with arrowheads. 1. Open the file named campus_map.jpg in Photoshop. It is located in your Temp folder on your desktop. 2. From this section of the campus, we will label Butler Hall and create an arrow pointing to it. Foreground Color 3. When using Photoshop, remember to have the color you want to use as the Foreground Color. Select a red color from the Swatches palette. 4. Choose the Eliptical Marquee tool on the tool box. Click and drag to create a circle around Butler Hall. To make a perfect circle, hold the Shift key down as you draw. 12

13 Exercise Three 5. Go to the Edit pulldown menu and choose Stroke. The Stroke dialog box appears. Make the stroke 3 pixels and the make sure the color is the red you chose as your Foreground Color then click OK. 6. Select the Line Tool. At the top of the window, the Options Bar for this tool allows you to select the line weight and also allows you to put an arrowhead on the line. 13

14 Exercise Three 7. The last we will do to this image is place text to label the building. Select the Text tool from the tool box. In the Options Bar, use the font Helvetica and make it 24 points. 8. Type the words Butler Hall. If you need to move the text after it is typed, select the Move tool. Click and drag to position the text where you want it to be. Notice in the Layers palette, Photoshop automatically creates a new layer for text. This is helpful if you need to go back into a file and make a change. 9. Now you are ready to save it for use in WebCT. Go to the File pulldown menu and choose Save for the Web. Save this into your Temp folder on your desktop as a.gif. 14

15 Exercise Four In this exercise you will create a banner image that can go across the top of your page. This type of image can be used to identify the class that is being taught. The banner you will create will be for MSU Go to the File pulldown menu and choose New. 2. In the dialog box, name the file Banner and have the settings as: Width: 5 inches Height: 1.5 inches Resolution: 72 pixels/inch Mode: RGB color Contents: white NOTE: Use RGB color because that is the color mode used for the Web. 3. Click OK to create the new file. 4. Select the Text tool. In the Options Bar at the choose a font, make it 48 points. Remember that the color you have as your Foregrond color is the color the text will be. Type in MSU 101. Use the Move Tool to put it in the right part of the window. 15

16 Exercise Four 5. We will use the Line tool to draw a line underneath the words MSU 101. Select the Line tool (below Text tool). In the Options Bar, select a line weight of 4 px and make sure the arrowhead boxes are unchecked that we used earlier. To make your line straight, hold the Shift key down as you draw. 6. Open the file in your Temp folder named MSUseal2.jpg. After it opens, go to the Select pulldown menu and choose All. This selects everything in the file. 7. We will copy this seal and paste it into the document we created. To do this, go to the Edit pulldown menu and choose Copy. Click into the document we created. Again, go to the Edit pulldown menu and choose Paste. 16

17 Exercise Four 8. Use the Move tool to place it on the left side of our banner. 9. To save the image to use in WebCT, go to the File pulldown menu and choose Save for the Web. Save it as a.gif in your Temp folder. 17

18 File Management WebCT s Manage Files system allows you to avoid the back-and-forth of uploading files as you build your course. If you have taken the time to catalog your resource materials (digitized text, pictures, audio, video, etc.) you can upload them all at once using Manage Files and a compression utility such as WinZip or Power Archiver. Packaging (file data compression) groups of files not only saves you from redundant tasks, but also saves you time and file space. There are several file compression programs available across a variety of operating systems. WebCT supports the standard ZIP format only and even uses it to backup courses. Popular ZIP programs that work well with WebCT are listed below. For this exercise, WinZip will be used to compress files. It is a three step process, first zip the files, next upload the zip file to WebCT and finally unzip the files in WebCT. Program Operating System Web Site Power Archiver Windows WinZip Windows pkz204g MS-DOS ftp://ftp.msstate.edu/pub/pc/zips/ MacZip Macintosh Zip/Unzip Unix Installed on Ra and Archive Uploading a Single File 1. On the Homepage in the Designer View, click on Modify/ Add banner image. It is located on the bottom right portion of the page. 2. When the next dialog section appears, in the Banner Options section, select the Use File: radio button, then click the Browse button. 18

19 File Management 3. When the File Browser window appears, go to the bottom in the Upload File section and click on Browse. Navigate to your Temp folder on your desktop and choose the Banner file we created earlier. 4. The file path should appear in the File name section. Upload the file to My Files, then click on Add selected at the bottom. Click Update. The banner now appears at the top of the Homepage. 19

20 File Management Zipping a File 1. A more practical example of uploading files is to use a file compression program to zip all files allowing the files to be uploaded as one. For this example, WinZip is used. The file will be named mywebctfiles.zip. 2. Minimize your WebCT course by clicking on the Minimize button in the top right corner. 3. In the Novell Delivered Applications folder, there is a WinZip shortcut icon, double click to open. 4. The WinZip program will open. From the File pull-down menu, select New Archive. 5. The New Archive dialog box will appear. The first step is to specify the file name that you are going to create and where you are placing the file. Place the zip file in the Temp Folder on the Desktop and name it mywebctfiles.zip. Click the OK button when completed. 6. The Add dialog box will appear. From this screen, you need to select the files to be zipped. All the files are located in the Temp folder on the Desktop. Select the first file banner and hold down the keyboard Shift key. Next select the last file. This allows all the files in between to be selected. Finally click the Add button. 20

21 File Management 7. The zipped file, mywebctfiles.zip is now in your Temp folder. Close Winzip by clicking on the X in the upper right corner. Congratulations you have just zipped files together. Uploading a Zipped File After the files are zipped, the next step is to upload the zipped file to WebCT. 1. Return to yourwebct course by selecting it from the Windows taskbar. First, a folder will be created to hold the zipped file. To create the folder, go to the Designers Basic Control Panel and select Manage Files. At the Options: Folders, select Create New. 2. The Create Folder Page will appear. Name the folder Unit1 (no spaces). Place the folder within the My- Files folder. Finally, click the Create button. The new folder is located in WebCT. 3. Next the zipped file will be uploaded to the Unit1 folder. At the Manage File screen, from File Options select Upload a File. 21

22 File Management 4. The Upload File page will appear. Select the Browse button to find the file, mywebctfiles.zip, which is located on the Temp Folder of the Desktop. 5. Once you have located the file, select images for the Destination folder and click Upload. 6. Congratulations, a zipped file now appears on your Folder and Files listing. Unzipping a File After the file has been uploaded to WebCT, the file needs to be unzipped so all the files can be used in WebCT. 1. At the Manage Files page, select the mywebctfiles.zip file by clicking the check box. Then select the Unzip button in the Options: Files section. 2. At the Unzip File page, be sure that mywebctfiles.zip is selected as your destination. Click the Unzip button. 3. At the Manage Files page, scroll and locate the unzipped files to confirm. You should see the files you had previously zipped under the images folder. 4. Congratulations, you have unzipped the files into WebCT and they are now ready to use in your course development. 22

23 File Management Adding an Image as a Page In this exercise, we will add an image as a single page. 1. At the Homepage, click on Add Page or Tool. 2. On the Add Page or Tool window, click on Single Page under the Pages column. 3. In the Manage Files window, select the butlerhallmap.gif then click Add Selected at the bottom. 23

24 File Management 4. In the Add Single Page dialog box, title this Butler Hall Map, browse to find it in the images folder in WebCT, put it in Course Content and Related Materials, check Link shows item title, and Link shows icon (selected below). Select the Use default icon radio button. Finally, click the Add button at the bottom. 5. You should be able to see the icon named Butler Hall Map. Congratulations, you have successfully added an image as a single page. 24

25 File Management Changing an Icon In this exercise, we will replace a default icon with the talking_men file we worked on in Photoshop. 1. In the Homepage, click on the Communication Tools to be taken to that page. 2. Select the radio button next to the Chat icon and then click on Edit. 3. Select the radio button next to talking_men and then click on Add selection at the bottom. 25

26 File Management 4. In the next window, click on Update at the bottom. 5. The Chat icon is now changed to the image of the men talking. Congratulations, you replaced a default icon with one you created. 26

27 Notes 27

28 A publication of ITS, a division of Information Technology Services, Mississippi State University Mississippi State Univesity does not discriminate on the basis of race, color, religion, national orign, sex, age, disability, or veteran status.