Digital Art PDF

# Lesson 7: Digital Art ## Learning Objectives * Create custom pixel art graphics for icons and logos * Differentiate between raster and vector images * Apply hexadecimal and RGB color models to graphic design * Calculate pixel dimensions ## Situation Your team has been assigned the task of c...

# Lesson 7: Digital Art ## Learning Objectives * Create custom pixel art graphics for icons and logos * Differentiate between raster and vector images * Apply hexadecimal and RGB color models to graphic design * Calculate pixel dimensions ## Situation Your team has been assigned the task of creating custom icons and logo images for games that will be offered at the app store. You must first acquire a basic understanding of color theory. This will allow your team to use different color models in digital designs. Next, you will need to understand how raster and vector images are created to required specifications. ## Reading Material Images are created using shapes and colors. Combining shapes results in a composite image. Digital images are images created or displayed on a computer screen. What you see is based on the properties of visible light and the color model used to create the image. There are two basic types of computer-generated images: raster and vector. All images created using a computer fall into one of these categories. Each image type has specific characteristics that give it advantages and disadvantages over the other image type. ### Visible Light Visible light is the portion of light that humans can see. This spectrum, or gamut, of light is displayed by the colors of the rainbow. The basic colors of the visible light spectrum are red, orange, yellow, green, blue, indigo, and violet. Colors are actually different wavelengths of energy, as shown in Figure 7-1. Red is the longest wavelength of light humans can see. Energy wavelengths longer than red are called **infrared**. Heat energy emits wavelengths in the infrared spectrum. The shortest wavelength of light humans can see is violet. Energy wavelengths shorter than violet are called **ultraviolet**. The properties of a wave of energy are measured in length, amplitude, and frequency, as shown in Figure 7-2. Length or **wavelength** is the distance from one wave peak (top) or trough (bottom) to the next. **Amplitude** is the height of the wave. **Frequency** is the number of complete waves per a time period, often one second. The wavelength determines the color of light. The amplitude determines the brightness of light. ### Color Models Colors for images are defined using a **color model**. A color model is the way of mixing base colors to create a spectrum of colors. The RGB, HSL, and hexadecimal color models are the most common digital color models. The **RGB color model** is based on the three base colors red, green, and blue. All of the colors you see on a computer screen are made by mixing these three base colors. The value for each color can range from 0 to 255. The **HSL color model** creates color by adjusting the values of hue, saturation, and luminescence. **Hue** is the pigment color. **Saturation** is the amount of color. **Luminescence** or brightness is how much light is shining on the color. This model is popular in creating textures and surfaces for computer-generated 3D models since these models require the use of light and shadow to define position relative to the light source. Using this color model allows the computer to leave the hue and saturation unchanged while only adjusting the luminescence setting to be brighter or darker. Lighter luminescence would be facing the light source, while darker luminescence would be in shadow. The HSL color model is also known as the hue, saturation, and brightness (HSB) color model. The **hexadecimal color model** is an RGB color model in which colors are represented by a series of six letters or numbers, such as #FF2500. The first pair is the setting for red (FF). The second pair is the setting for green (25). The third pair is the setting for blue (00). This color model is used in web page design. Many imaging software programs allow the user to limit colors to 16 web safe colors or the 216 colors universally compatible with web browsers. ### Raster Images A **raster image** is made of dots or pixels, as shown in Figure 7-3. Each pixel in the image has a specific color and location to construct the final image. A raster image is called a **bitmap** because the location and color of each pixel is mapped. The computer reads a bitmap image by creating a coordinate grid with the origin at the top-left corner. The coordinates change by increasing the X value moving right and the Y value moving down. In each space of the coordinate grid is a single pixel. A pixel can only be one color. To determine the color of a pixel at a particular coordinate location, the color value of a pixel is read by the computer and displayed. Depending on the file format, a bitmap can also support **alpha channels**. An alpha channel varies the opacity of a color. The alpha channel can support full transparency all the way to full opacity. Alpha channels can also allow for a **masking color**. A masking color is a single shade of a color that can be set to be transparent. If you have ever seen a weather report on TV, you have likely seen them using a masking color. Using a green or blue screen, called a chroma screen, allows the background of the weather map to digitally replace the blank screen. The meteorologist is filmed in front of the chroma screen. This image is placed over the top of the weather map. The masking color of the chroma screen is set to transparent, so the meteorologist appears to be “on” the weather map. In image creation, masking colors are typically chosen so they will not interfere with natural colors. Using a masking color such as white would be a very bad choice. If white were made to be transparent, then the whites in a person’s eyes, teeth, and other white items would be transparent. ### Vector Images A **vector image** is composed of lines and fills determined by mathematical definitions, not pixel-by-pixel data. The image is not created by storing the color value and location of each pixel. In other words, in a raster image, a line is composed of dots, while in a vector image, a line is defined by a mathematical equation. For a vector image to be displayed, the software must rasterize the image before it is sent to the display device. A vector image file can be very small in size. This is because the image is drawn by the computer using a mathematical formula. Since the formula defines the image, the image can be resized infinitely smaller or larger without loss of clarity, as shown in Figure 7-4. This is one of the biggest advantages of a vector image. However, vector images do have a disadvantage that raster images do not. A vector image requires the central processing unit (CPU) of a computer to work hard to draw the image. The CPU is the brain of the computer and performs the calculations needed to create the images, sounds, and other output a computer creates. In the world of handheld devices with small CPUs and low memory, displaying a vector image may take up a large amount of the CPU’s ability. Bitmaps do not require a large amount of the CPU’s ability, but they have larger files. The designer will need to understand the limits and capabilities of each device on which the image will be rendered to correctly match the file size and CPU usage. This will prevent lag and crashing of the device. ### Image Sizing and Resampling When a bitmap is enlarged, the pixels spread out. This dithers the image, which creates holes in the image where the pixels are no longer touching each other. Software uses a process called interpolation to dither an image. Interpolation is the refining of the space between pixels. During interpolation the software averages the color of all pixels touching the empty space. The average color of the surrounding pixels is then assigned to the new pixel. A designer must know the size of the final image to properly create art that will look and work correctly. For example, an app for the Android should have an icon that is 96 pixels x 96 pixels. That is the specification given to the designer so the icon will properly display on the device and in the app store. On the other hand, most images for print publication should be sized to specific dimensions with a resolution of 300 dots per inch (dpi). **Resolution** is the measure of the sharpness or clarity of an image. The resolution of an image is measured in dots per inch (dpi) or pixels per inch (ppi). This measurement is the number of dots or pixels along the horizontal and vertical axes of the image. An image that is one inch square with 200 pixels on each axis has a resolution of 200 dpi. If an image with a resolution of 200 dpi is five inches wide, the horizontal dimension contains 1000 pixels (5 inches x 200 dpi = 1000 pixels). The vertical dimension also contains 1000 pixels. The image as a whole contains a total of one million pixels (1000 × 1000 = 1,000,000). Sometimes, resolution may be expressed as the width by the height. For example, a computer monitor my have a resolution of 1280 x 1024. This display has 1280 pixels along the horizontal axis and 1024 pixels along the vertical axis. If an image that is one inch square at 200 dpi is stretched to two inches square without resampling, the resolution becomes 100 dpi. This results in a loss of image clarity. When an image is resized, it must be **resampled** to create a new image without reducing the image resolution. Resampling uses interpolation to add or remove pixels as needed to keep the resolution the same. ### Game Build The Awesome Game Company needs to create the logo for some games using Clickteam Fusion 2.5. Now that you and your team have an understanding of digital art and color models, you have been tasked with creating the logo. The first game for which you will create a logo is the Click Ball game created in Lesson 3. #### How to Begin 1. Launch Clickteam Fusion 2.5, and open the LastName_ClickBall game. 2. Make sure LastName_ClickBall is selected in the Workspace Toolbar. This is the application branch. 3. Click the About tab in the Properties toolbar, and locate the Icon property. The current game icon is displayed as a thumbnail in the property. The default icon is a red circle with a yellow lightning bolt in it. The icon is the image that will be displayed as the desktop program shortcut or app to represent the game. 4. Click the thumbnail for the current icon. The Edit button is displayed to the right of the thumbnail, as show in Figure 7-5. 5. Click the Edit button. The Edit Icon dialog box is displayed. ### Pixel Art Pixel art is digital art in which each pixel is modified to create an image. Program icons are often created as pixel art. The default icon has been created in 11 different sizes and quality standards. This is done to match the different requirements for several different devices. Each icon appears at the bottom of the Edit Icon dialog box similar to frames. 6. In the frames section at the bottom of the Edit Icon dialog box, select the 16 × 16 - 16c icon. The icon is displayed in the editing area. This icon fits in a space 16 pixels wide by 16 pixels high and is created with only 16 colors. This is a very small graphic with few colors for low-power devices. 7. Use the window-control buttons to maximize the Edit Icon dialog box so it fills the screen. 8. Use the Zoom slider to increase the magnification so the image is as large as possible. This will provide the most detail for each pixel of the drawing. Notice how this image looks more like an octagon than a circle. 9. Click the Color Picker button. The color picker is used to choose a color in the image and set it as the current drawing color. 10. Left-click the dark red along the outside of the image to choose that color. Notice the foreground color swatch on the right side is now that dark red color. The color is also selected in the color palette near the top right. The settings for RGB and hexadecimal color models are shown below the color palette. Notice the RGB values for this color are 128, 0, 0. The hexadecimal number is 800000. 11. Click the Line Tool button. This tool is used to draw straight lines in the foreground color. 12. Click at the top of the image and draw a one-pixel wide, two-pixel long line in the checkerboard area above the center of the circle, as shown in Figure 7-6. If you make a mistake, press the [Ctrl][Z] key combination to undo the action, and then try again. 13. Add similar lines on the left, right, and bottom to help make the object a bit more round. 14. Applying what you have learned, change the foreground color to the light red found in the image. 15. Draw a light-red line just below the dark-red lines you drew earlier. This will reduce the thickness of the dark-red line to only one pixel. 16. Click the Brush Tool button. This tool can be used to paint single pixels of color. 17. Change the single dark-red pixel in the middle of each of the diagonal lines around the outside to light red. 18. Applying what you have learned, add dark-red lines to create a border next to the light-red pixel you added on each diagonal. This will provide a balanced look to the border with two-pixel lines around the entire image. Notice how these modifications make the image more circular. 19. Click the OK button to close the dialog box and save the changes to the icon. ### Custom Icon The default icon can be used for your game. However, it will not really give the user an idea of the game's theme or content. A custom icon can be created to match the gameplay. 20. Applying what you have learned, open the Edit Icon dialog box. 21. Select the 256 × 256 icon, and adjust the Zoom slider so the entire image fits in the editor window. 22. Click the Clear button. The current image is deleted, leaving a blank canvas with transparent background. 23. Click the foreground color swatch, and enter FFFF00 as the hexadecimal color number. This is a yellow color. 24. Click the background color swatch, and enter 0, 0, 0 as the RGB color. This is black. 25. Click the Ellipse Tool button. This tool creates a circular line based on the foreground color and fills the inside with the background color. 26. Locate the options for the tool below the tool palette, and click the Outlined Filled button, as shown in Figure 7-7. 27. Click in the Size text box, and enter 4. This will make the outline four pixels thick. 28. Click in the top-left corner of the canvas, drag to the bottom-right corner of the canvas, and release the mouse button to draw a circle that fills the canvas. The canvas is the drawing area. 29. Click the Text Tool button, and click the Font button in the options area. 30. In the Font dialog box, click Arial in the Font: list, click Bold in the Font Style: list, and enter 20 in the Size: text box. Then, click the OK button to update the settings for the tool. 31. Click near the top of the circle. The Text dialog box is displayed. 32. Add the text Click, and press the [Enter] key. 33. On the second line, add the text Ball. 34. Click in front of the word ball, and press the space bar to move the word over by one space. Important: leave the Text dialog box open for the next few steps! Do not close it until told to do so. 35. Move the cursor over the words in the editing area, click, and drag the words so they are centered in the circle. Move the Text dialog box out of the way if needed, but do not close it. 36. Click the Font button in the options area. 37. In the Font dialog box, change the Size: value to 48. Click the OK button to close the Font dialog box. 38. Applying what you have learned, move the words as needed so they are centered in the circle, as shown in Figure 7-8. 39. Click the Close button (X) on the Text dialog box to set the text. After the Text dialog box is closed, the text cannot be edited as text. The text becomes part of the image. 40. Applying what you have learned, create matching custom icons for the following sizes. | Icon Size | Outline Size | Text Size | |---|---|---| | 128 x 128 | 3 | 28 | | 48 x 48 | 2 | 10 | | 32 x 32 | 1 | 7 | | 16 x 16 | 1 | 2 *Note: the text will not be legible at this size*| 41. When finished, close the Edit Icon dialog box to save the icon changes. 42. Save your work, and submit it for grading. ### Vocabulary * **visible light**: the portion of light that humans can see. * **infrared**: energy wavelengths longer than red, which are not visible to humans. * **ultraviolet**: energy wavelengths shorter than violet, which are not visible to humans. * **wavelength** the distance from one wave peak (top) or trough (bottom) to the next. * **amplitude**: the height of a wave. * **frequency**: the number of complete waves per a time period. * **color model**: the way of mixing base colors to create a spectrum of colors. * **RGB color model**: model based on the three base colors red, green, and blue. * **HSL color model**: model based on values of hue, saturation, and luminescence. * **hexadecimal color model**: model represented by a series of six letters or numbers. * **raster image**: an image made of dots or pixels. * **bitmap**: a raster image where the location and color of each pixel is mapped. * **alpha channel**: a channel that varies the opaqueness of a color, allows for fully transparent images. * **masking color**: a single shade of a color that can be set to be transparent. * **vector image**: an image composed of lines and fills determined by mathematical definitions. * **dithers**: holes that appear in an image when the pixels are enlarged. * **interpretation**: the process of refining the space between pixels to make an enlarged image appear smoother. * **resolution**: the sharpness or clarity of an image, commonly measured in dots per inch. * **resampling**: the process of adding or removing pixels to create a new image without reducing the image resolution. * **pixel art**: digital art in which each pixel is modified to create an image. * **canvas**: the drawing area in an image editing software. ### Review Questions 1. Compare and contrast the pros and cons of vector images with raster images. Give one example for each type of where it is the best format to use. 2. Complete the table with how many total pixels are possible in each rectangular icon. | Number of Pixels High | Number of Pixels Wide | Total Pixels | |---|---|---| | 16 | 16 | 256 | | 48 | 128 | 10,000 | | 100 | 256 | 65,536 | 3. What three color models are commonly used for digital art? 4. Summarize how a chroma screen and masking color work together. 5. If the resolution of an image is 100 dpi and the image is three inches tall and five inches wide, how many pixels wide is image? Show your work. 6. Speculate for what type of program the 16 × 16 - 16c icon would be used. 7. What is the relationship between the wavelength of visible light and what color you see? 8. Describe why you think it is important to test the program icons on various computers and devices before releasing the game. 9. If a color's RGB values are 128, 128, 128, speculate what the color is. 10. If a client is color-blind and cannot see long wavelengths of light, what two colors would you choose for a custom icon? Why? ### Office Technology Integration: Using Shapes and Gradients in Presentation Software 1. Launch Microsoft Excel or other spreadsheet software, and open the vocabulary spreadsheet you updated in the last lesson. 2. Applying what you have learned, add a new worksheet, and name it Lesson 7. 3. Add each of the vocabulary words and definitions from the Vocabulary section of this lesson. 4. Save the spreadsheet, and then close it. 5. Launch Microsoft PowerPoint or other presentation software, and start a new blank presentation. 6. Click Home>Slides>Layout on the ribbon, and click Blank in the drop-down menu. This removes any text boxes or objects that are on the slide. 7. Click Insert>Illustrations>Shapes>Oval on the ribbon. 8. Click anywhere on the slide, drag, and release the mouse button to draw a small ellipse (oval). This shape is a vector image. 9. Click the Format tab on the ribbon and locate the Size group. The text boxes in this group control the height and width of the shape. 10. Change the size of the shape to 7 inches high and 7 inches wide. 11. Click the arrow next to Format>Shape Styles>Shape Fill on the ribbon. In the drop-down color palette that is displayed, click the yellow color swatch. The shape is filled with yellow. 12. Click the arrow next to Format>Shape Styles>Shape Outline on the ribbon. In the drop-down color palette that is displayed, click the black color swatch. The shape is outlined with black. 13. Click the arrow next to the Shape Fill button, and click Gradient>More Gradients... in the drop-down menu. The Format Shape pane is displayed along the right-hand side of the screen, as shown. 14. Click Gradient fill radio button. 15. Locate the Gradient Stops section, and click one of the triangular gradient stops to select it. Then, press the [Delete] key to remove the stop. Repeat this until only two stops remain. 16. Select one of the remaining two gradient stops. 17. Click the Color button in the Gradient Stops section, and click the yellow color swatch in the drop-down palette. 18. Click in the Position text box, and enter 0%. This places the stop on the left-hand end of the preview stripe. 19. Applying what you have learned, change the other gradient stop to black and position it on the right-hand end of the preview stripe. 20. Close the Format Shape pane. 21. Insert>Text>Text Box on the ribbon. 22. Click in the center of the circle to add a text box to the circle. When added in this way, the text box automatically becomes part of the circle. 23. Add the text Click Ball, and then select the text. 24. Click the Home tab on the ribbon, and locate the Font group. Use the tools in this group to change the typeface to Arial, the size to 140, the color to black, and make the type bold. This should fit inside the circle. Adjust the size if needed to fit the text within the circle. 25. Right-click on the circle, and click Save As Picture... in the shortcut menu. A standard save-type dialog box is displayed that allows you to save the selected object as an image file. 26. Click the Save as Type: drop-down arrow, and click PNG Portable Network Graphics Format in the list. The PNG file type is a raster image format. 27. Name the file Click Ball, navigate to your working folder, and click the Save button. This graphic image can now be used in other programs such as Clickteam Fusion 2.5 as an icon or on the title frame inside the game. 28. Save the presentation as LastName_Vector in your working folder, and submit it for grading.