Exploring Graphics and Interactive Media

  1. Objectives
  2. Materials / Resources
  3. Procedures
  4. Extensions

Objectives

  • Learn about the various modern methods for creative computer graphics.
  • Understand the methods of graphics/media distribution (formats, compatibility)
  • Create images in open-source and free applications such as the Gimp.
  • Competencies

  • 6670-063 - Identify hardware required for multimedia and entertainment presentations.
  • 6670-064 - Investigate software programs associated with graphics and interactive media.
  • Materials / Resources

  • Modern Web browser (capable of SVG support: Download Firefox)
  • the Gimp (Download)
  • Inkscape (Download)
  • Procedures

    Modern Multimedia

    Multimedia is by definition, 'define'. To create multimedia, you need a computer and the comparable software. For bitmap editing of static images, Photoshop (or the open-source, free alternative Gimp) are sufficient. For advanced vector capabilities, which are more flexible in use (see the next section), programs such as Adobe Illustrator or the free Inkscape are used. These programs deal with static images: for the manipulation of moving images and animations, you need either video editing software (such as Final Cut, iMovie and various free and non-OS X alternatives), or software like Adobe Flash, which allows for interactive vector web movies. Most multimedia content is ready-made to be displayed on computers- Flash Player is installed on the vast majority of personal computers of any operating system, and to view .JPEG or .GIF images all one needs is a web browser or at the very least a computer with a GUI. Movies in formats such as Quicktime or .WMV are more OS-exclusive or require users to upgrade or install components, and thus are less-accessible.

    Using the Gimp

    First off, you need to understand what the Gimp does. Gipm is primarily a raster graphics creator/manipulator, but it has some vector graphics capabilities. If you don´t understand the difference, speedread through the respective articles HERE, and HERE.You don´t have to read into all the techical jargon, just understand the fundamental difference between each method and the advantages/disadvantages of each.

    Then grab an image from somewhere. It doesn´t really matter which type it is, but for simplicity´s sake make it a jpeg: for example, this example one here: testimg.jpg. Open the image up in Gimp.

    The Gimp is composed of several windows. The image will appear in the center. To the left is a panel named (amazing) the Gimp. Below the general menu items are tools. Experiment on the image by playing with all the tools. If you keep the changes you make the image will probably look pretty messy, but by using Ctrl + Z you can undo each change. Play around with each tool and get a feel for each one. For certain tools, for example the Brush tool, the area below the tools changes and here you can set brush specifications, for example the size or type of brush.

    Now let us hone some skills you will need later on in this course. Download and open up this file: FILE LINK HERE. This is an image of a face. Amazing, no? Well what if you had to label the parts of the face, and draw arrows to each part?

    You are going to need to use the tools of the Gimp to achieve this objective. However to make things simpler, we are going to use layers. Think of using layers like collages in digital form. A new layer is like adding a new picture onto the collage.

    Get started by making sure Layers are shown, by using the key combo Ctrl + L. At the bottom of the Layers dialog is a button that looks like a white box with a yellow badge. This is the new layer button. Click it, and a dialog box appears. It offers a field to enter a name. Let's call it 'face'. Ignore the other options. Hit OK, and in the list of layers, a new layer will appear. The face image you opened already appears on a layer, named Background. The little window to the left of the name is a preview of that layer's contents. The eye icon on the far left toggles on and off that layer's visibility. In the new layer you created we are going to add an arrow, and in another layer add the caption.

    your face and layers

    The Gimp windows, showing the face image and the layers palette. (Click the image for a larger view).

    Select the Text tool from the toolbar on the left. Your cursor will change. Click where you want the text to appear, and a box will appear for you to input text. Type 'face' and hit ok. 'Face' now appears on the scren, and as a new layer in the layers palette.

    Now select the 'Face' layer you created previously. Select the Pen tool from the left, and below it change your settings. (If you want to see how thick, etc. the brush looks, try it out on the layer and undo it.) Once you have a brush you like, draw an arrow from your text to the Face. It's rough, but it works. You now have an explanatory tag telling the person who has never seen a face what a face is.

    your completed face

    Your face, complete with captions. (Click the image for a larger view.)

    Now you should save your work in a format that anyone can see. Hitting Alt + F toggles the 'File' menu on your image. Click 'Save As...' and a new dialog appears. Change the name from the default to 'facecaption', and then add '.jpg' at the end. This file extention tells the Gimp to process your save as a jpeg. If you wanted to save the file as a PNG, you would type .png after 'facecaption'. Pick where you want to save, then hit save. Gimp will ask you to select a quality for the jpeg, since the image is going to be compressed. Move the slider to 100, then hit save. A second later, and your image has been saved.

    saving the work

    Saving your masterpiece.

    Getting down with Inkscape and vector images

    Whereas the Gimp is making edits to bitmap images, it is very limited in vector capabilities. If you want to makes something for scaling, like an icon, you'll need to use a Vector graphics illustrator like Adobe Illustrator. Here we will get aqquainted with Inkscape, an open-source vector illustrator.

    First, open up Inkscape. You will see a configuration much like the one below. Hit Ctrl + N to create a new document, for the default setup. We however want an icon setup, so go under File > New > Icon_64x64. Click this, and a new window with a grid will appear.

    saving the work

    The default window for Inkscape.

    As you can see above, there are three principle sets of buttons. The topmost one has file commands like New, Save, and Cut and Paste. Below it lies options for rotating selections and transformations. On the left side are the tools for creating shapes. Hitting * selects the star/polygon creation tool on the side, represented by a pentagon. Clicking and dragging on the canvas, and you can see in real time what your star will look like. Make the star and release.

    creating the star

    Fig 2-2: Inkscape creates shapes at the origin, which is your cursor. In this instance, I placed the cursor in the center of the canvas using the gridlines.

    Now you have a star. Using the Arrow tool (which is the topmost tool on the left or can be accessed by hitting F1. This allows you to select and transform objects. Click it, and handles appear that allow you to stretch and distort, or just move your star. If it isn't already, move it to the center of the window. If it doesn't fill the canvas, you should scale it using the transform tool. However, by default it wont scale uniformly. To make sure that you make the shape uniformly scaled, look to the top bar and make sure the padlock icon is toggled. (Fig 2-3).

    saving the work

    Fig 2-3: The padlock makes sure the selected object is transformed in proper proportions.

    Once you have scaled your star, you are left with a rather boring green star. Lets change that, shall we? What you would want to do is click on one of the two items in the bottom left of the screen. These are labeled F and S, and stand for fill and stroke. The fill is the main color, in this case green, and the stroke is the border around the fill. Currently there is not a stroke set, so click on the area that says the fill is not set. A dialog box will appear, with several tabs.

    the settings for gradients

    Fig 2-4: The dialog box which contains settings for fill and stroke.

    Take a look at the new panel, which should look like the image 2-4. Click on the 'Fill' tab to bring up fill options. The third from left button in the top row, called Linear Gradient, adds a gradient. Gradients, used in Gimp and many other programs, allow for a blending of two or more colors. Click the linear gradient button, and automatically the fill will turn from a solid color to a blend. Hit the 'Edit' button to mess with the gradient settings. In the picture to the left, I set the gradient to go from green to transparent.

    adding a stroke

    Fig 2-5: Changing the stroke width.

    Now go to the 'Stroke paint' tab, and add a simple color gradient. Then hop over to 'Stroke Style' tab. There are many options here, most of which you can ignore. Pay attention to the 'Width' area, and drop it down to about .40000. If you want dashes, go to the 'Dashes' area and from the dropdown menu select a style. The changes you make will appear automatically. When you're happy, close the window.

    In a similar manner, you can add other shapes, or create your own. Let's make one with the pen tool. Close the dialog box and select your star. Hit Backspace or Delete to clear your star.

    Now that you have done a basic shape, it is time to create your own. If you have not closed any dialogs or cleared the star, do so now. Now select the Bezier Tool (the sixth tool from the bottom, or selected by using Shift + F6. The Bezier tool is so named after this, and the Tool functions in two distint ways. Once you select it, a crosshair with a floating pen cursor appears when you hover over your canvas. Let's make a simple triangle, then. Mouse to the bottom left of your canvas and click once. You've created an anchor point. Generally in most programs, the anchor does nothing on its own; you need a second anchor, and a line will be drawn between the two anchors. So to create your line, mouse to the top middle of the canvas and click again. You've created a line. Now mouse to the bottom right and click again, and then mouse to the original point you created. The anchor should turn slightly pink. When it does, click again, and the shape becomes enclosed and fully editable. (see below)

    beizer tool user

    Figure 2-6: Just after creating the custom shape with the Bezier tool. (click for a larger view).

    Now, a triangle is nice, but its not that interesting, is it? Now we'll warp our straight lines. Let's say you'd been hired by a surfing company to come up with a logo for their brand 'Wave'. I've decided that a slightly abstract blue, wavelike item is what they need, complete with logotype.

    Hit F2 to bring up the Path Node Editor. Don' worry about the fancy name; what it does is mess with lines, quite simply. Grab the left side of your triangle with the tool (you must have the shape selected to do this.) The tool's triangle will have a grasping hand next to it. Click and hold the left mouse button, and drag the line up and to the left. This extrudes the line, so that it follows a curved path towards the anchors. Repeat the same step on the other two lines, except drag the line in closer to the middle, making the lines concave. You should have something like Fig 2-7 (below).

    modifying the lines

    Figure 2-7: Just after creating the custom shape with the Bezier tool. (click for a larger view).

    Now we will follow a similar procedure to make the wave-like shape colored like we did previously. By clicking on the fill, give the shape a gradient. By hitting the Edit button, you can modify the gradient colors (in this case, making the shape blue, in Fig. 2-8).

    modifying the shapes and adding the gradients

    Figure 2-8: Adding a nice blue gradient.

    In a similar manner, click on the stroke paint tab, and change the RGB values to something more blue or cyan.

    beizer tool user

    Figure 2-9: Changing stroke RGB color values.

    When you have something you are happy with, Close the dialog. Hit F8 to bring up the text tool (it's also on the left, with the icon that has an 'A'.) Click where you want the text to begin, and then type 'WAVE'. Once you've created the text, you can drag it around with the selection tool like anything else. You can also apply a gradient to it, just like a shape. In Fig. 2-10, a similar gradient to the custom shape was added, the object was scaled with the arrows during selection, and placed over the shape.

    adding the text

    Figure 2-10: Having added the text, with a gradient.

    Once you have your icon the way you want it, Save it. Rename it to something like wave.svg, and in the lower right corner, change the file type to a regular svg. Since SVG can be scaled without losing quality, it makes it an excellent format for an icon.

    saving the masterworks

    Figure 2-11: Save your new icon.

    Now lets see what your new icon looks like. On your desktop, right click and select the first option, 'Create Folder'. Rename the folder, if you want (I changed the name to 'Test'.) Right click on the new folder and select 'Properties'. In the dialog that pops up, click on the image of the folder, which brings up a file browser. Navigate to and choose your new icon, and presto! your new icon is ready to go!

    saving the masterworks, setting an icon

    Figure 2-12: Changing the icon to your new one.

    Extensions

    [top] | [lessons]