Pixels
Digital images are made up of individual pixels, or dots. A pixel, short for picture element, is a tiny, rectangular piece of an image. Rows and columns of various colors and shades of pixels come together to create an image. Look at the small, blue circle on the left below. Notice that when you’re zoomed out, you can’t see the different shades of blue. It all looks like the same color blue. But when you zoom in, you can see the individual pixels that create the circle, and you notice that not all the pixels are the same shade of blue. In order to create a smooth edge to the circle, pixels in multiple shades of blue are used.

Button zoomed to show individual pixels.
Pixels are used to determine image size. When you have a printed photograph, you typically measure it in inches. You can have a 3½x5, 4x6, or 8x10 photograph. Digital images are measured a little differently. They are measured in inches as well, but they are also measured in pixels. With digital images, image size is the number of pixels across by the number of pixels down and the number of inches wide by the number of inches in height. You have to have both measurements or you won’t know exactly how large the image is. For example, if you count the pixels in the blue circle above, you see that it’s nine pixels across and nine pixels down. Therefore, the size of the image is 9x9. If both blue circles above are 9x9, why is one so much bigger than the other? The blue circle on the left is smaller in inches, so it appears visually smaller. The closer together pixels are to each other, the clearer the image.

You might be wondering why the number of pixels matter if that measurement doesn’t determine visual image size. If you compare the two images above, you can see that the smaller circle is much clearer than the larger circle even though they contain the same number of pixels. That’s because the number of pixels per inch, or ppi, is higher in the circle on the left. Pixels per inch are often called dpi (dots per inch) in image-editing programs. Resolution is the level of detail an image contains. The most common way to measure resolution is as pixel count. The more pixels per inch in an image, the higher the resolution is. The fewer pixels per inch in an image, the lower the resolution is. On the Web, the recommended resolution is 72 dpi. This resolution allows images to be clear, but small enough to load in a reasonable amount of time.

Pixels
Up to this point in this lesson, we’ve been discussing what are called raster, or bitmap images. Raster images are images built with pixels. Photographs and many graphics (especially those that contain gradation, or shading) are raster images. Vector images, on the other hand, are images made up of geometric lines and shapes that are saved as mathematical equations. Vector images result in sharper images. Since vector images are created using a mathematical equation, they are scalable, meaning they can be stretched to any size remain clear. When you zoom in on a vector image, you don’t see any individual pixels, or dots. On the other hand, when a raster image is increased in size, the edges of the image are pixilated, or jagged. Vector images are used for many graphic illustrations.

Sample P displayed in raster and vector image.
Which one is better: vector or raster? It depends on what type of image you're working with. It's important to understand both of these image types so you can choose which is best for each situation. As stated above, raster images are often used for photographs. The sharp quality of vector images doesn't allow them to create the detail necessary for a photograph. On the other hand, some graphics require the level of detail that only vector images can offer.

Thumbnails
The main thing to keep in mind when working with images on the Web is size. If images are too big, it will take a long time to download them. Imagine if you visited a Web page and the images didn’t load within several seconds. You’d probably lose patience and find the information you’re looking for on another site.

Load time is especially a problem when a Web page has a multitude of images. In such cases, thumbnails should be used. A thumbnail is a small, low resolution version of an image that is often linked to the full-sized image. People who have photo albums online often use thumbnails. The key to this definition is "low resolution." If you provide a smaller version of an image that’s the same resolution, you’re not really saving any space or load time. Thumbnails make it easier to quickly scan through several images.

Rollovers
Have you ever been to a Web site in which the menu buttons change when you roll over them with your mouse? This type of feature serves as a helpful visual cue to users, letting them know that the button is a link. A rollover is an image displayed on the Web that calls for an action when the user’s mouse is moved onto the image. Rollovers can have four different states: up, over, down, and hit.

Home button in various stages.
The up state is what the image looks like when the mouse is not hovering over it. The over state is what the image looks like when the mouse is hovering over it. The down state is what the image looks like when the mouse is clicked on the image. And the hit state is what the image looks like after the image has been clicked.


Online experiences are mainly visual. So a significant part of a user’s online experience is offered through images such as graphics and photographs. Therefore, Web developers must know the factors to think about when using graphics and photographs online. Developers must consider the types and sizes of images that can be used on the Web. Why does it matter what file type you use?

Some image formats, or file types, are larger in file size than others. File size is the main factor in download time. Smaller file sizes download more quickly than larger file sizes. Also, some image formats display certain types of images more clearly than others. As a Web designer, you must understand the differences between these image formats. It will help you make smart decisions about which formats to use in different situations.

There are three basic formats used for images on the Web. They are JPG, GIF, and PNG. All three of these image types use some form of compression when they are saved. Compression is the process of reducing the amount of data in an image. This lessens the file size and makes it easier to transfer (download or send) or store the file. Compression usually results in a loss of image quality. However, depending on the file format, this loss of quality can be controlled.

Images of turtle display the difference between compressed and non-compressed image.
Lossy compression is when a file is compressed and data is discarded to make the file smaller therefore (losing) some of the image. Since photographs are good at disguising this loss of quality, JPG is a good format to use. Graphics, on the other hand, are not always displayed as well as JPGs. The JPG format does not support transparency, so the background of the image must have color.


GIF Format
GIF stands for "Graphics Interchange Format." It is pronounced "jiff," although many people pronounce it with a hard "G." Unlike JPG images, GIF images use lossless compression when they are saved. This means they don’t lose any quality when they are compressed. GIF images have other advantages over the JPG format. They support animation and transparency. This means that you can create animations like the one shown below.


You can also create GIFs that have a transparent background. This lets you place the image over a Web page’s background.

With all of these benefits, you may be wondering why you wouldn’t use the GIF format for all images. They don’t lose quality when compressed. But the GIF format has its drawbacks as well. GIF only supports 256 colors. This means they aren’t a good fit for photographs. This format was created to be displayed on a screen, so GIF is definitely not the best choice for images you’d like to make available for printing.

PNG Format
PNG stands for "Portable Network Graphics." It is pronounced "ping." Like GIFs, the PNG uses lossless compression. This image format was created to replace the GIF format, but both are still used very commonly. Like the GIF format, PNGs support animation (APNG format) and transparency. One major difference between the two is that PNG images can be printed at a high resolution. GIF images are better suited for on-screen use only. The major drawback of PNG images is that they are not fully supported on all Internet browsers.

Web-Supported Image Formats
JPG	GIF	PNG
Good for photographs
Not good for simple graphics
Does not support animation
Does not support transparency
Good for graphics
Supports animation
Supports transparency
Not good for printing
Good for screen shots
Good for graphics
Can support animation
Supports transparency
Good for printing


Question Number 1	Points: 5.00/5.00
Question Text
What is the smallest part of a digital image called?
Your Answer
A. Pixel
Question Number 2	Points: 5.00/5.00
Question Text
An image is 160 x 42. What is this a measure of?
Your Answer
A. Image size
Question Number 3	Points: 5.00/5.00
Question Text
If an image is 50 x 78, how wide is it?
Your Answer
B. 50 px
Question Number 4	Points: 5.00/5.00
Question Text
Which of the following image types is suggested for use on the web?
Your Answer
7509561:A. .gif,7509562:B. .jpg,7509563:C. .png
Question Number 5	Points: 2.50/5.00
Question Text
Which of the following image types works especially well with screen graphics on the Web?
Your Answer
7509569:A. .gif,7509570:B. .jpg,7509571:C. .png
Question Number 6	Points: 5.00/5.00
Question Text
Which of the following can be a drawback of the .gif image type?
Your Answer
7509579:C. It only supports 256 colors.,7509580:D. It wasn't created for images that need to be printed.
Question Number 7	Points: 5.00/5.00
Question Text
Which of the following image types supports animation?
Your Answer
7509565:A. .gif,7509567:C. .png
Question Number 8	Points: 5.00/5.00
Question Text
Which of the following is true about image compression?
Your Answer
7509575:C. It makes images easier to transfer or store.,7509576:D. It reduces the file size.
Question Number 9	Points: 5.00/5.00
Question Text
If an image is 24 x 12, how tall is it?
Your Answer
B. 12 px
Question Number 10	Points: 5.00/5.00
Question Text
There are 150 pixels in a particular image. What is this a measure of?
Your Answer
C. Resolution

The Internet has become a great resource for just about any type of information you’re trying to find. You can chuck your yellow pages and just go to the Internet to find phone numbers and addresses. You can read people’s journals. You can look at your friends’ and family’s photo albums. You can play video games with people on the other side of the world. All online! You can download music and movies from the Internet. You can buy books, video games, and even furniture online. You can even do a lot of research online. This is because many research journals and libraries have started digitizing their materials and posting them on the Web.

But just because something is on the Internet doesn’t mean it’s free. Even if you pay to use an online research journal, the content you find on that site is still copyrighted. Copyright is the legal right granted to the author or creator of a piece or work. It gives them total control of if and how the work is used, published, and/or distributed. Copyright doesn’t only apply to the Internet. The books you read, the music you listen to, and the movies you watch are all subject to copyright laws.

Examples of Things that May be Copyrighted

Music and other types of audio files
Movies and other types of videos
Video games
Photographs
Illustrations or drawings
Graphics
Software
Web site designs
Articles
Literature, such as novels, poems, and plays
When someone creates something, it is protected by copyright laws. This is true whether they apply for copyright or not. It is also true whether or not they claim copyright by displaying a copyright symbol or statement. You may be unsure about whether or not something is copyrighted. It is always safe to assume that it is. It’s better to not use something that may be copyrighted than to find out the hard way that you’re breaking the law.

Copyright Infringement
Most of you wouldn’t shoplift, steal a car, or sneak your friend’s MP3 player from his or her locker. What about downloading music without paying for it? Or using other people’s images for your Web page without their permission? Or copying and pasting content from articles into a research paper? These actions are illegal as well because these works are copyrighted. Copyright infringement refers to the violation of copyright laws.


Creative Commons
Creative Commons is a nonprofit organization that provides authors and artists an easy way to protect their work. Creators can choose to apply one of three levels of copyright to their works:



All Rights Reserved
Starting from the left above: Full copyright, or All Rights Reserved, allows creators exclusive rights to their work.

Some Rights Reserved
Creative Commons, or Some Rights Reserved, allows creators to apply conditions to the permitted uses of their works. Choosing “Some Rights Reserved” promotes creativity and collaborative freedom. It allows creators to apply conditions to the use of their works. The conditions that creators can choose from are shown in the table below. Creators can choose one or more of these licenses.

Some Rights Reserved Licenses
Icon	License Title	License Description
Attribution icon, person in circle.	Attribution	Attribution allows others to copy, distribute, display, and/or perform your work, but they are required to give you credit in whatever way you request. For example, you might simply ask that the user put your name in the caption of a photograph you took, or you might ask that your name appear in the credits of a movie in which your work is displayed.
Noncommercial sign, crossed out dollar sign in circle.	Noncommercial	Noncommercial allows others to copy, distribute, display, and/or perform your work, but only for noncommercial use.
No derivative works, equal sign in circle.	No Derivative Works	No Derivative Works allows others to copy, distribute, display, and/or perform your work, but they are not allowed to create derivatives, or other versions, of your work.
Share alike, bacward letter c in circle.	Share Alike	Share Alike allows others to copy, distribute, display, and/or perform your work within their own creations, but only if their creation has a Share Alike license as well.
Public Domain
Finally, Public domain, or No Rights Reserved, allow creators to offer their works free from copyright for all users to use under any condition. Public domain is the status of a piece of work that has been made available to the general public for any use at no charge

.

Practice Exercise

For each of the following situations, describe what type of copyright license(s) is most appropriate.

Try the following problem below. Check to see if you have the correct answer by clicking the blue Show Answer button Show Answer below the question.

You take a photograph and would like to make it available to anyone in the general public to use in any way they'd want.

Show Answer Button

Answer:

Public Domain or No Rights Reserved

You create a graphic illustration that you would like to make available for others to use for noncommercial purposes as long as you get credit for your illustration.

Show Answer Button

Answer:

Some Rights Reserved: Noncommercial and Attribution

You don't want an audio file you create to be used by anyone but you.

Show Answer Button

Answer:

All Rights Reserved

You take a photograph that you want to make available for use in any work as long as it contains the same type of license.

Show Answer Button

Answer:

Some Rights Reserved: Share Alike

You create a graphic that you want to make available to anyone to use in any type of project, commercial or noncommercial, as long as your work is not edited and you are credited.

Show Answer Button

Answer:

Some Rights Reserved: Attribution


Question Number 1	Points: 5.00/5.00
Question Text
What is another word for "version"?
Your Answer
B. Derivative
Question Number 2	Points: 5.00/5.00
Question Text
Which of the following accurately describes a piece of work that contains a Creative Commons Attribution license?
Your Answer
A. It can be copied, distributed, and displayed as long as the author is credited.
Question Number 3	Points: 5.00/5.00
Question Text
Which of the following accurately describes a piece of work that is in the public domain?
Your Answer
D. It has been made available to the general public for any use at no charge.
Question Number 4	Points: 0.00/5.00
Question Text
Which of the following accurately describes a piece of work that contains a Creative Commons Share Alike license?
Your Answer
A. It can be copied, distributed, and displayed as long as the author is credited.
Question Number 5	Points: 5.00/5.00
Question Text
What is another word for "violation"?
Your Answer
D. Infringement

Web designers have a full understanding of the various elements of design because these elements are crucial to the quality of design compositions. Color is one of the most exciting elements of design. Color can be bold and dramatic. Or it can be soft and subtle. Color can stir up memories or appeal to people's emotions. Color is one of the most versatile and powerful tools a Web designer has to work with!

Color is literally everywhere you look. Even if you are sitting in a completely white room, still you are surrounded by color. (White is the presence of all color.) Many people think color is merely a decoration, and I can see why. When you buy a new car, you can choose any color you like, and the color you choose doesn't affect the functionality of the car at all. In this situation, color is decoration. But in most cases in design, color is so much more than that! Color is used to attract attention, communicate information or meaning, create identities, and organize information. Color is much more than a variety of hues; color is a way to communicate. Colors have symbolism and can elicit emotions. If used well, color can communicate the basic feel of a design at first glance.

The Meaning of Color

Red
Red is a very powerful color. Due to its high visibility, it is attention-getting. Red is used a lot in advertising and in warning/danger signs. Stop signs, for example, are red. Teachers like to grade papers with a red pen because the color stands out so well. Because red is used for warning signs and for pointing out error, red can implicate wrong-doing or fault. Red is also known to have a physical effect on your body. It can actually raise your blood pressure. The color is known for its implications of anger, wrath, blood, fire, and war. Ironically, red is also the color of love, passion, sexuality, and desire. Red also represents heat, energy, strength, and power.

Yellow
Yellow, the color of sunshine and happiness, is a warming color. It is fresh and lighthearted and tends to put people in a good mood. Although it is useful for attracting attention, this energetic color is often thought to be childish and spontaneous. It is unstable and not safe. It is often used on warning signs to indicate danger. Yellow is known to stimulate mental activity and generate muscle energy.

Orange
Orange is a mixture of red and yellow. It's not as aggressive as red, but it is an invigorating color. It is the color of sunshine and joy or the tropics and citrus. Orange is the color of fall and the harvest. It's a warm color that symbolizes heat, strength, and endurance. The color orange is known to increase oxygen supply to the brain and stimulate mental activity. Gold, a version of orange, represents prestige, wealth, illumination, wisdom, and quality.

Green
Green is the color of nature and growth. Someone who is good at gardening is said to have a green thumb. Green is fresh and fertile. It is associated with stability and endurance. In opposition to red, green is used to indicate safety. Green lights indicate that it is safe to go. Because of the color's association with money, green is also representative of greed and jealousy. Sometimes, green is associated with the lack of experience. When someone is called green, it usually means that he is new or inexperienced. One of the easiest colors for the human eye to look at, green also has a physical affect on the human body: it is said to improve your eyesight.

Blue
Blue is one of the most masculine colors. Blue is stable, trustworthy, wise, and loyal. Due to the color blue's portrayal of expertise, the color is commonly used in corporate identities in America. Blue is also a color of cleanliness and sadness. Because of its association with the sky and the sea, blue symbolizes depth and the heavens. It is calming and tranquil. The color blue is known to suppress your appetite and slow your metabolism. This is why you don't see blue used much on the packaging of food products.


The Meaning of Color cont'd
Purple
The color purple is very rare in nature. Purple is the mixture of blue and red. It is a royal color; purple represents nobility, power, luxury, ambition, wealth, extravagance, wisdom, and dignity. Purple is the color of creativity, mystery, and magic as well.

White
White is the color of purity and faith. Angels are most often represented in white. White is a symbol of goodness, innocence, virginity, and perfection. It's a light, positive color associated with safety and sterility. Bathroom fixtures, hospitals, and doctor's clinics are often cleanly white. Since it is the color of snow, white is also associated with cold and winter.

Black
Black gives the impression of power, elegance, strength, authority, formality, and prestige. Black is a striking, powerful color. Black-tie events are high-class and prestigious. But it is also a very negative color. Black represents death, evil, mystery, fear, aggression, and the unknown.

Color	Meaning
Red	anger, blood, desire, energy, fire heat, love, passion, power, sexuality, strength, war
Yellow	cheerfulness, childishness, happiness, instability, lightheartedness, spontaneity, sunshine
Orange	autumn, endurance, harvest, heat, joy, sunshine, the tropics, strength
Green	endurance, freshness, fertility, greed, growth, inexperience, jealousy, money, nature, stability, safety
Blue	cleanliness, depth, expertise, loyalty, masculinity, sadness, stability, tranquility, trustworthiness, wisdom
Purple	ambition, creativity, dignity, extravagance, luxury, magic, mystery, power, royalty, wealth, wisdom
White	faith, goodness, innocence, perfection, purity, safety, sterility, virginity
Black	aggression, authority, death, elegance, evil, fear, formailty, mystery, night, power, prestige, strength, the unknown

Color Wheel
Color wheel
Colors may have their own individual meanings and play their own private role in a composition, but colors are not independent. Colors rely on each other. A color can affect how another color looks. It can affect the vibe or feel that another color exudes. Some colors look good paired together; others don't get along so well. For example, blue and black may look cool together, but this combination of colors (blue on black or black on blue) is the most difficult to read. Black text on a pale yellow background is the best color combination to produce easy-to-read text. So how do designers know what effect different colors have on each other? They use a color wheel. Artists and designers are very familiar with the color wheel. As a matter of fact, I'm sure you've even been acquainted with the color wheel once or twice before. The original color wheel was invented by Sir Isaac Newton way back in 1666. The color wheel has been around for a long time! A color wheel is used to better understand how colors work together. It organizes color based on the sequence of the visible spectrum of hues. The color wheel is a visual representation of color theory, a basic set of rules designers and artists abide by when using color. Understanding the visual and symbolic relationships between colors is essential to creating a successful

Primary colors
Three of the colors on the basic color wheel, orange, purple, and green, are created by mixing various amounts of red, yellow, or blue. For example, orange is a mixture of red and yellow. Purple is a mixture of red and blue, and green is a mixture of yellow and blue. Basically, any color can be created by mixing these three colors. You can also use black and white for mixing colors, but adding these hues only changes the value, or shade, of your mixture. Value, sometimes called tone, refers to the lightness or darkness of a color. Mixing black into a color will darken it; adding white will lighten it. Have you ever noticed that when you buy food coloring, you usually get four colors: red, yellow, blue, and green. This is because with these colors you can make any color you need. Green is not a primary color, but it is probably just included because it's so common. Just like design elements are the building blocks of design, red, yellow, and blue are the building blocks of color. They are called the primary colors. Primary colors are colors that cannot be created by mixing other colors together. What about light blue, navy, maroon, or canary yellow? These are all versions of the primary colors. They are all simply different values of the three primary colors. All shades of red, yellow, and blue are considered primary.


Mixing two primary colors together will give you a secondary color. Orange, purple, and green are the secondary colors. The exact color, or value, of your product will depend on which primary colors you mix, what values or shades these primary colors were, and what proportions of primary colors you used. Look at the following color combinations to see how primary colors are combined to create secondary colors:

Red + Yellow = Orange
Red + Blue = Purple
Yellow + Blue = Green
Mixing one primary color and one secondary color together will give you a tertiary color. You can also get a tertiary color by mixing three primary colors together. Since it takes two primary colors to make a secondary color, then, if you think about it, you'll see that mixing two secondary colors is really the same as mixing three primary colors. Again, the exact hues that will result depend on which primary colors you mix together, the values of these primary hues, and the proportions with which you mix them. Red orange, red purple, purple blue, blue green, yellow green, and yellow orange are the basic tertiary colors. Look at the following color combinations to see how secondary colors are combined to create the basic tertiary colors:


Red + Orange = Red orange
Red + Purple = Red purple
Blue + Purple = Purple Blue
Blue + Green = Blue green
Yellow + Green = Yellow green
Yellow + Orange = Yellow orange
Browns and grays are also considered tertiary colors. Brown hues are created by mixing primary colors with their complementary colors. Complementary colors are the colors exactly opposite on the color wheel. You'll learn more about complementary colors later. As an example, mixing primary red with its complementary secondary green will give you a brown hue. Grays are also examples of tertiary colors. To make gray, all you have to do is mix primary blue and secondary orange with a little bit of white.


Warm Colors
Warm colors include all shades, or values, of yellows, oranges, and reds. These colors appear larger than cool colors and are more energetic and lively. Warm colors tend to advance into the positive space of a composition. Warmer colors should be used for information that is more important since they demand more attention from the viewer.

Warm color group on top side of wheel.

Cool Colors
Cool colors are the colors on the opposite side of the color wheel than the warm colors. The cool colors include all shades, or values, of purples, blues, and greens. While cool colors tend to be more soothing and nurturing, they can also have a cold, impersonal feel to them depending on how they are used. These colors appear smaller in a composition than warm colors do; they don't stand out as well. Cool colors tend to recede into the negative space of a composition.

Cold color group on bottom side of wheel.

Defining Colors Practice Exercise
Look at each of the following groups of colors. Determine what type of colors they are: primary, secondary, tertiary, warm, or cool.

Try the following problem below. Check to see if you have the correct answer by clicking the blue Show Answer button Show Answer below the question.


Show Answer Button

Answer: Tertiary colors


Show Answer Button

Answer: Primary colors


Show Answer Button

Answer: Warm colors


Show Answer Button

Answer: Tertiary colors


Show Answer Button

Answer: Primary colors


Show Answer Button

Answer: Secondary colors


Show Answer Button

Answer: Warm colors


Show Answer Button

Answer: Cool colors


Show Answer Button

Answer: Tertiary colors


Show Answer Button

Answer: Cool colors

Color Schemes
Colors are not individual elements. They work together to create color schemes. Color schemes are the combinations of colors chosen for use throughout a design. Before starting a design, it is good to choose a color scheme. This way, you can ensure visual consistency and balance throughout a design. We are going to discuss four basic color schemes: complementary, split complementary, monochromatic, and analogous

Complementary color wheel.
Complementary Color Scheme
The complementary color of a primary color is the color you get when you mix the other two primary colors together. For example, the complementary color of blue is a mixture of red and yellow, which is orange. Complementary colors sit opposite of each other on the color wheel. They contrast well because they don't share any common hues. Complementary colors look brighter when they are next to each other. Complementary colors make good color schemes because they go so well together and have such high contrast. You are probably already pretty familiar with some sets of complementary colors. Red and green, the colors of Christmas, are complementary. And the complementary colors blue and orange are the team colors of the Denver Broncos! The complementary color pairs include:

Red and green
Blue and orange
Purple and yellow
The complementary color scheme works very well when primary or secondary colors are paired with tertiary colors. For example, using orange with purple blue or blue green provides a nice contrast and a lot of interest. Complementary color schemes provide more contrast than any other type of color scheme and is, therefore, most interesting.

Split Complementary Color Scheme
Study the photograph below and take note of the colors. The orange sign plays off well against the turquoise colored gates. But orange and turquoise aren't complementary colors, are they? Not quite; the complementary color of orange is blue. Orange and turquoise are considered split complementary colors.


Split complementary colors are the colors on either side of a complementary color. For example, the split complementary colors of orange are purple and green because they sit on either side of blue, which is the complementary color of orange. Split complementary colors also have high contrast, although not as high as complementary colors. The split complementary color scheme contains three colors that harmonize well and have adequate contrast



Monochromatic Color Scheme
Monochromatic colors include variations of the same color. Value or intensity refers to the lightness or darkness of a hue. A monochromatic color scheme, which includes various values of the same color, provides an elegant and clean balance. Monochromatic colors go very well together because they are of the same hue. These values come together to create a calming effect and can present a very professional combination. Changes in the value of a single color can make dramatic impacts on a composition. Such changes can create contrast, movement, or emphasis, but sometimes a monochromatic color scheme can seem lifeless and lack significant contrast. Designers need to be aware of this drawback and choose the monochromatic color scheme carefully.



Analogous Color Scheme
Analogous colors are those that are adjacent to each other on the color wheel. Each color has two analogous colors; the analogous colors for each basic color are shown below. The analogous color scheme typically consists of two colors. One color acts as the main color in a composition while the other color provides support and elements of interest. The analogous color scheme provides a richer contrast than the monochromatic color scheme, but designers should consider that this color scheme is still less appealing than the complementary color scheme where contrast is very high.



Defining Color Schemes Practice Exercise
Look at each of the following groups of colors. Determine what type of color schemes they are: complementary, split complementary, monochromatic, or analogous.

Try the following problem below. Check to see if you have the correct answer by clicking the blue Show Answer button Show Answer below the question.


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


Show Answer Button


RGB Color Model
The RGB color model defines various colors by blending certain amounts of red, green, and blue. It gets its name from the first letters of those three colors. The RGB color model was created for displaying color on monitors and other digital imaging devices. Three colored light beams, one red, one green, and one blue, are superimposed on each other. This blends the colors together to create other colors. As the intensities of the colored beams are adjusted, different colors result.

RGB color model, Red Green Blue color overlay.
The intensities of each beam are measured in numbers: 0-255. In most image-editing software programs, you can set the intensities of each beam, or color, to create the color desired. Look at how the amounts of red, green, and blue are set to create a brown color in the illustration below.

RGB color adjustment box.

HTML Color
HTML uses color codes to define color on Web pages. HTML color codes are made up of a number sign (#) followed by six symbols. The symbols are either numbers or letters. They are made from the hexadecimal numeral system. This means that the letters A-F and the numbers 0-9 represent decimal numbers. The use of letters and numbers lets three-digit numbers be seen as two-digit hexadecimal numbers.

The first two numbers in the HTML color code stand for the color red. The lowest intensity of a color, 0, is "00." The highest intensity of a color, 255, is "FF." The second two numbers in the HTML color code stand for the color green. The last two numbers are the color blue.

Defined color code number, first two for red, second two for green, last two for blue value.
For example, the color blue is created with 0 red, 0 green, and 255 blue. The HTML color code for blue is #00FF00. "00" is 0 red, "00" is 0 green, and "FF" is 255 blue.

Let's say you want a little darker blue that has 0 red, 23 green, and 138 blue. The HTML color code for this darker color blue is #00178A. "00" is red, "17" is green, and "8A" is blue.

Don't worry about how to go between RGB and hexadecimal values. You won't ever need to know how to do that. Image-editing software programs do that for you.


The tables below contain all the HTML color codes.

Color Name
Hexadecimal
Color

Color Name
Hexadecimal
Color
Black
#000000


Light Salmon
#FFA07A

Dark Slate Gray
#2F4F4F


Coral
#FF7F50

Slate Gray
#708090


Tomato
#FF6347

Light Slate Gray
#778899


Orange Red
#FF4500

Dim Gray
#696969


Dark Orange
#FF8C00

Gray
#808080


Orange
#FFA500

Dark Gray
#A9A9A9


Gold
#FFD700

Silver
#C0C0C0


Yellow
#FFFF00

Light Gray
#D3D3D3


Light Yellow
#FFFFE0

Gainsboro
#DCDCDC


Lemon Chiffon
#FFFACD

White
#FFFFFF


Light Goldenrod Yellow
#FAFAD2

Snow
#FFAFA


Papaya Whip
#FFEFD5

Honeydew
#F0FFF0


Moccasin
#FFE4B5

Mint Cream
#F5FFFA


Peach Puff
#FFDAB9

Azure
#F0FFFF


Pale Goldenrod
#EEE8AA

Alice Blue
#F0F8FF


Khaki
#F0E68C

Ghost White
#F8F8FF


Dark Khaki
#BDB76B

White Smoke
#F5F5F5


Green Yellow
#ADFF2F

Seashell
#FFF5EE


Chartreuse
#7FFF00

Beige
#F5F5DC


Lawn Green
#7CFC00

Old Lace
#FDF5E6


Lime
#00FF00

Floral White
#FFFAF0


Lime Green
#32CD32

Ivory
#FFFF0


Pale Green
#98FB98

Lavender Blush
#FFF0F5


Light Green
#90EE90

Linen
#FAF0E6


Medium Spring Green
#00FA9A

Antique White
#FAEBD7


Spring Green
#00FF7F

Misty Rose
#FFE4E1


Medium Sea Green
#3CB371

Cornsilk
#FFF8DC


Sea Green
#2E8B57

Blanched Almond
#FFEBCD


Forest Green
#228B22

Bisque
#FFE4C4


Green
#008000

Navajo White
#FFDEAD


Dark Green
#006400

Wheat
#F5DEB3


Yellow Green
#9ACD32

Burly Wood
#DEB887


Olive Drab
#6B8E23

Tan
#D2B48C


Olive
#808000

Rosy Brown
#BC8F8F


Dark Olive Green
#556B2F

Sandy Brown
#F4A460


Medium Aquamarine
#66CDAA

Goldenrod
#DAA520


Dark Sea Green
#8FBC8F

Dark Goldenrod
#B8860B


Light Sea Green
#20B2AA

Peru
#CD853F


Dark Cyan
#008B8B

Chocolate
#D2691E


Teal
#008080

Saddle Brown
#8B4513


Aqua
#00FFFF

Sienna
#A0522D


Light Cyan
#E0FFFF

Brown
#A52A2A


Pale Turquoise
#AFEEEE

Maroon
#800000


Aquamarine
#7FFFD4

Dark Red
#8B0000


Turquoise
#40E0D0

Fire Brick
#B22222


Medium Turquoise
#48D1CC

Red
#FF0000


Dark Turquoise
#00CED1

Crimson
#DC143C


Cadet Blue
#5F9EA0

Light Salmon
#FFA07A


Steel Blue
#4682B4

Dark Salmon
#E9967A


Light Steel Blue
#B0C4DE

Salmon
#FA8072


Powder Blue
#B0E0E6

Light Coral
#F08080


Light Blue
#B0C4DE

Indian Red
#CD5C5C


Sky Blue
#87CEEB

Pale Violet Red
#DB7093


Light Sky Blue
#87CEFA

Medium Violet Red
#C71585


Deep Sky Blue
#00BFFF

Deep Pink
#FF1493


Dodger Blue
#1E90FF

Hot Pink
#FF69B4


Cornflower Blue
#6495ED

Light Pink
#FFB6C1


Medium Slate Blue
#7B68EE

Pink
#FFC0CB


Royal Blue
#4169E1

Lavender
#E6E6FA


Blue
#0000FF

Thistle
#D8BFD8


Medium Blue
#0000CD

Plum
#DDA0DD


Dark Blue
#00008B

Violet
#EE82EE


Navy
#000080

Orchid
#DA80D6


Midnight Blue
#191970

Magenta
#FF00FF


Slate Blue
#6A5ACD

Medium Orchid
#BA55D3


Dark Slate Blue
#483D8B

Medium Purple
#9370DB


Medium Slate Blue
#7B68EE

Blue Violet
#8A2BE2


Indigo
#4B0082

Dark Violet
#9400D3





Dark Orchid
#9932CC





Dark Magenta
#8B008B





Purple
#800080







Color on the Web
HTML Color Codes Practice Exercise
Identify which digits represent red, green, and blue in each of the HTML color codes. The first one is done for you as an example.

#6A5ACD
Red: 6A
Green: 5A
Blue: CD

#20B2AA
Show Answer Button

Answer: Red: 20
Green: B2
Blue: AA

#B22222
Show Answer Button

Answer: Red: B2
Green: 22
Blue: 22

#DEB887
Show Answer Button

Answer: Red: DE
Green: B8
Blue: 87

#8B008B
Show Answer Button

Answer: Red: 8B
Green: 00
Blue: 8B

For each of the following statements, indicate whether it is true or false.

Try the following problem below. Check to see if you have the correct answer by clicking the blue Show Answer button Show Answer below the question.

The color #8B008B has the same about of red and green.

Show Answer Button

Answer: False. The color #8B008B has the same amount of red (8B) and blue (8B).

The color #800000 contains no amount of green or blue.

Show Answer Button

Answer: True.

The color #C0C0C0 has the same amount of red, green, and blue.

Show Answer Button

Answer: True.

Question Number 1	Points: 5.00/5.00
Question Text
Which of the following defines various colors by blending certain amounts of red, green, and blue?
Your Answer
D. RGB color model
Question Number 2	Points: 5.00/5.00
Question Text
Which two colors could you mix together to create a tertiary color?
Your Answer
D. Yellow and green
Question Number 3	Points: 5.00/5.00
Question Text
Which two colors could you mix together to create a secondary color?
Your Answer
D. Red and yellow
Question Number 4	Points: 5.00/5.00
Question Text
What color is defined by the bold numbers?  #002313
Your Answer
B. Green
Question Number 5	Points: 0.00/5.00
Question Text
What type of color scheme do orange and red orange make?
Your Answer
C. Monochromaticvv
Question Number 6	Points: 5.00/5.00
Question Text
In the RGB color model, what do the numbers 0-255 represent?
Your Answer
B. The intensities of each color beam
Question Number 7	Points: 5.00/5.00
Question Text
What type of color scheme do red and green make?
Your Answer
A. Complementary
Question Number 8	Points: 5.00/5.00
Question Text
What type of color scheme do various shades of blue make?
Your Answer
C. Monochromatic
Question Number 9	Points: 5.00/5.00
Question Text
What color is defined by the bold numbers?  #0090ff
Your Answer
A. Red
Question Number 10	Points: 5.00/5.00
Question Text
What color is defined by the bold numbers?  #ff327h
Your Answer
B. Green


Introduction to Image-Editing Programs
There are a multitude of image-editing programs available, and the majority of them work in similar ways. No matter what program you ultimately decide to use, it's important to understand the way image-editing programs work with digital images.

Image placement on canvas using location grid.
Image versus Canvas
Digital images can be thought of like paintings on a canvas. As a matter of fact, image-editing programs often refer to the image's canvas. You might think an image and a canvas are the same thing, but think about a painting on an actual canvas. The canvas is essentially the material on which an artist paints. It could be paper, cardboard, linen, even the side of a building. The image, on the other hand, is the visual picture that the artist actually creates. All images created in image-editing programs have the same canvas�a computer screen. So why does it matter that you learn to differentiate between the two? Image-editing programs refer to the "image" and the "canvas" as two separate entities. Therefore, it's important to keep the difference between image and canvas in mind when manipulating their settings.

Most image-editing programs also provide grids and guides. A grid is a set of horizontal and vertical lines that divide your canvas into segments. Similarly, a guide is a set of horizontal and vertical lines that you can set in any location on your image to help in your design. The illustration to the left shows the grid in pink.


Layers
Another common feature of image-editing programs are layers. A layer is exactly what it sounds like it is: a single section of a digital image. Think of digital images as sheets of transparent, or see-through, paper stacked on top of each other. The bottom sheet contains the background color. The sheet on top of that contains all of the text for the image. The next sheet holds the icons or symbols contained in the image. Finally, the top sheet contains the image's border. Having each of these elements on a separate layer allows the user to manipulate just one element at a time without affecting the others. In the "Layers" window to the right, you can see the four layers contained in the digital image.

Transparency
Most image-editing programs also indicate transparency in the same way. Transparency is the level at which you can see through the image. If the background of an image is black, the color of your image will show up on the screen as black. But what if you want the background of your image to be completely transparent? Your computer can't actually make your screen see-through to indicate that, so image-editing programs display transparency as a checkered pattern. You can see an example of this in the "Layers" menu to the right. The majority of the three top layers (Border, Icons, and Text) are transparent, which is evident by the checkered pattern displayed on each of these layers. This allows you to see the layers beneath.


GIMP is a free image manipulation program, similar to Adobe Photoshop.

Downloading and Installing GIMP
Click here to download the installation file for GIMP. This link will provide you with the latest version of GIMP, but if the link doesn't work, you can download another graphics editor, Inkscape, here. Once the file is downloaded, follow the installation instructions shown in the box below.

GIMP Installation Instructions for a PC
Double click the installation file to initiate installation. Click "Run."
Close any other applications that may be open. Click "Next."
Read the license agreement fully, and then click "Next."
Click "Install now."
When installation is complete, click "Finish." GIMP will open automatically.

GIMP Tip of the Day
Now that you've installed GIMP, it's time for you to become familiar with its features and functions. Open the software and take a look around. Three windows should open when you launch the program. The first window is the GIMP Tip of the Day. This window offers a different tip each time you open GIMP. It's a useful tool as you are getting to know a piece of software. You can turn this feature off by clicking on the box next to "Show tip next time GIMP starts." This will uncheck the box.

Screenshot of GIMP tip box.
If you don't see the GIMP Tip of the Day window when you open GIMP, you can open it by clicking "Tip of the Day" under the Help menu in the GIMP tool bar.

Screenshot of GIMP tool box.

GIMP Tool and Tabs
The GIMP toolbar also opens when GIMP opens. The GIMP toolbar works just like the toolbar in any other program. You should be pretty familiar with the types of menu options that are available in each menu.



GIMP toolbar

There are a few menu items that are specific to image-editing programs, such as Image, Layer, Colors, and Filters. You’ll want to take some time to explore these menus to become familiar with the types of tools you’ll find in each one. In GIMP, right-clicking on the image will bring up the toolbar menu for easy access.

Image Menu
The tools found in the Image menu are ones that affect the whole image. For example, you can change the size of the image or change the size of the canvas.

The Image menu also offers options to change the image properties. This allows you to create an image in grayscale (black and white) or color, among other things. You can set up grid and guide options as well using the Image menu.

Layer Menu
The Layer menu allows you to create new layers, delete layers, or manipulate individual layers within the image.

Colors Menu
The Colors menu gives you the option to manipulate the color value of an image. You can adjust an image’s brightness and contrast, as well as individual color levels.

Filters Menu
The Filters menu allows you to run filters on the image. A filter is a computer program that manipulates an image’s qualities to add effects or styles.


GIMP Toolbox


The third window that opens when GIMP launches is the Toolbox. This window provides all of the tools you will need as you create and edit images.

Roll over each of the tools in the GIMP toobox. When you roll over a button, a short definition of the button will pop up. Familiarize yourself with the functions of each tool. Also note that under the “Help” menu, there is a “Context Help” option. “Context Help” will change your cursor to an arrow with a question mark on it. Now, you can click on any icon in the tool bar for more information about that icon.


GIMP Toolbox

GIMP User Manual
The “Help” menu also offers links to the GIMP User Manual. The user manual covers many topics, but one of the most effective ways to learn a new piece of software is to jump right in and explore. If necessary, refer back to the user manual as you continue to learn the software.

A Quick Note about Saving Your GIMP Files
When working in GIMP, be sure to save all your work as .gif or .jpg files or your teacher won’t be able to view them. Before saving, make sure no elements in your composition are selected. Next, select “Save” under the “File” menu. When prompted, be sure to name your file appropriately and select the appropriate destination for your file.


Intro to GIMP Practice Exercise
Download GIMP and experiment with the program. Be sure to attempt the following tasks:

Create a new image.
Change the background color of the image.
Use the brush tool to scribble a line.
Use a selection tool.
Zoom in and out of the image.
Save an image as a .gif file.
Identify three questions about the image-editing software functions or capabilities that you’d like to answer as you continue to explore. Then use the Help menu to find the answers to your questions. If you aren’t able to find answers to your questions, contact your teacher for help.

Opening a File in GIMP
Follow these directions to open a file in GIMP.

Click "File" in the Toolbox.
Choose "Open."

TIP: You can skip steps one and two and press the "Ctrl" and "O" buttons simultaneously to open the "Open" menu instead.

Browse to the file you want to open.
Click the "Open" button.
Click here for a demonstration video of how to open a file in GIMP.Creating a New File in GIMP

Follow these directions to create a new file in GIMP.

Click "File" in the Toolbox.
Choose "New."

TIP: You can skip steps one and two and press the "Ctrl" and "N" buttons simultaneously to open the "Create a New Image" window.

Indicate the size of the image you want to create.
Click "OK."
Click here for a demonstration video of how to create a new file in GIMP.


Let’s take a look at the GIMP Toolbox. There are two main sections of the Toolbox. The top part contains the various tools available in GIMP. Notice that when you choose one of these tools, the bottom part of the Toolbox changes. You can further define the characteristics of the tool you want to use by adjusting the settings in the bottom part of the Toolbox.



GIMP Selection Tools
GIMP offers seven different selection tools. A selection tool is a common feature of most image-editing software programs that allows you to choose a section of an image to make active. When a piece of an image is selected, it is the only part of the image that will be affected as changes are made to the image. For example, if you select a piece of an image and click the "delete" key on your keyboard, only the part of the image that is selected will be deleted.

Screenshot of GIMP tools.
There are seven "select" tools:

Rectangle Select Tool—This selection tool is used to select rectangular regions of an image.
Ellipse Select Tool—This selection tool is used to select elliptical regions of an image.
Free Select Tool—This selection tool is used to select a hand-drawn outline region of an image.
Fuzzy Select Tool—This selection tool is used to select regions connected by color.
Select by Color Tool—This selection tool is used to select separate regions by similar color.
Scissors Select Tool—This selection tool is used to make a selection with an edge that is automatically calculated.
Foreground Select Tool—This selection tool is used to select foreground elements.
Open a file in GIMP and try using each of these selection tools to experiment with the similarities and differences between the tools.

Click here for a demonstration video of how to use the selection tools in GIMP.


Paths, Color Picker, Zoom, and Measure Tools

Study the next four tools in the GIMP Toolbox:

Paths Tool—The Paths Tool is used to create and edit paths. In an image-editing software program, a path is an outline that can be used to guide other elements in an image. For example, you can create a path along which to align a piece of text.
Color Picker Tool—The Color Picker Tool is used to choose a color from an image. Let’s say you have a photo of your friend, and you’d like to add some text that’s the exact same color as your friend’s shirt. You can use the Color Picker Tool to select the color of the shirt so that your text matches perfectly.
Zoom Tool—The Zoom Tool is used to either zoom in or out in an image. With the Zoom Tool selected, you can click and drag on a file to zoom in or out.
Measure Tool—The Measure Tool can be used to calculate distances or angles within an image.

Listen to this lesson
GIMP - Basic Tools
Transformation Tools
GIMP’s Toolbox has eight transformation tools:


Move Tool—The Move Tool is used to move objects within an image, layers of an image, or selected areas of an image.
Alignment Tool—The Alignment Tool is used to line up elements within an image to arrange them along the same line.
Crop Tool—The Crop Tool is used to remove selected outer areas of an image, reducing the image’s size.
Rotate Tool—The Rotate Tool is used to turn an image or part of an image either clockwise or counterclockwise.
Scale Tool—The Scale Tool is used to reduce or increase the size of an image or part of an image.
Shear Tool—The Shear Tool is used to skew an image or part of an image. This means shifting one part of an image in one direction, while shifting the other half of the image in the opposite direction.
Perspective Tool—The Perspective Tool is used to modify the perspective of an image or part of an image.
Flip Tool—The Flip Tool is used to turn an image or part of an image over (either horizontally or vertically).
Listen to selected text

ext, Bucket Fill, and Blend Tools

Take a look at the next three tools in the GIMP Toolbox:

Text Tool—The Text Tool is used to add text to an image.
Bucket Fill Tool—The Bucket Fill Tool is used to add color to an image.
Blend Tool—The Blend Tool is used to create gradients. A gradient is a gradual change from one color to another.

Pencil, Paintbrush, Eraser, Airbrush, and Ink Tools

The next five tools in the GIMP Toolbox are used to write or draw onto the image:

Pencil Tool—The Pencil Tool is used to draw onto an image.
Paintbrush Tool—The Paintbrush Tool is used to "paint" smooth strokes onto an image.
Eraser Tool—The Eraser Tool is used to delete a part of an image.
Airbrush Tool—The Airbrush Tool applies color gradually as if being sprayed onto the canvas.
Ink Tool—The Ink Tool is used for calligraphic painting

Image Filter Tools

The last six tools in the GIMP Toolbox are image filter tools.

Clone Tool—The Clone Tool is similar to the Copy and Paste tools in Word or other software programs. The Clone Tool is used to replace a part of an image with another part of an image.
Healing Tool—The Healing Tool is similar to the Clone Tool in that it uses information from another, similar part of an image and patch a part of an image. The main difference between the Clone Tool and the Healing Tool is that the Clone Tool copies and stamps pieces of an image while the Healing Tool blends pieces of an image together.
Perspective Clone Tool—The Perspective Clone Tool is very similar to the Clone Tool, but it allows you to clone according to the desired perspective.
Blur/Sharpen Tool—The Blur/Sharpen Tool can be used to either distort parts of an image so it’s out of focus or to hone part of an image to bring it out.
Smudge Tool—The Smudge Tool is used to smear parts of an image.
Dodge/Burn Tool—The Dodge/Burn Tool is used to manipulate light and shadow in an image.

In this lesson, you will learn how to edit an image in GIMP. Start by downloading this sample image.

Sample Image 1

Once you�ve downloaded the sample image, open it in GIMP. Use this file to practice the skills you�ll learn in this lesson.

Opening a File in GIMP
To open a file in GIMP, follow these directions.

Click �File� in the Toolbox.
Choose �Open.�

TIP: You can skip steps one and two and press the �Ctrl� and �O� buttons simultaneously to open the �Open� menu instead.
Browse to the file you want to open.
Click the �Open� button.
Click here to download a text version of the presentation below.

Click here to see a video demonstration


Changing the Size of an Image
Often, the images stored in your digital camera are too big to e-mail to your friends or display on your website. GIMP can be used to reduce the size of your images.

Let�s review a few definitions before we continue. Image size refers to the number of pixels across by the number of pixels down and the number of inches wide by the number of inches high. Resolution is the level of detail contained in an image.

The most common way to measure resolution is by pixel count. The more pixels per inch in an image, the higher the resolution of the image. The fewer pixels per inch in an image, the lower the resolution of the image. On the Web, the recommended resolution is 72 dpi (dots per inch.) This resolution allows images to be clear, but small enough to load in a reasonable amount of time..

To change the size of an image in GIMP, follow these steps:

Screenshot of Scale Image box.
Click Image� in the tool bar.
Select �Scale Image��
Indicate desired image size.
Click the �Scale� button.
The �Image Size� section of the �Scale Image� window is the important part to pay attention to. You can adjust the width and height of the image by clicking the up and down arrows or by typing in new values. If you want the ratio of the image size to remain the same, be sure the chain to the right of the value fields is connected. If you click on this chain, it will disconnect to indicate that ratio will not be maintained. Ratio refers to the relationship between the width and the height. The image below was resized without maintaining its ratio. Notice how the resulting image (on the right) is distorted.

Sample of scaled image.

Cropping an Image
To crop an image means to trim it down to a smaller size. Cropping is different than simply reducing the size of an image. Cropping actually involves cutting out parts of the image. The image on the left below was cropped. In the resulting image on the right, you can see that parts of the image have been cut out.

Sample of cropped image.
To crop an image in GIMP, follow these steps:

Select the “Rectangle Select Tool” from the GIMP Toolbox.
Click and drag to select the desired section of the image. (To make a perfectly square selection, hold the shift key down while dragging.)
Click “Image” in the tool bar.
Select “Crop to Selection


Rotating an Image
To flip an image means to create a mirror image. This means that all the features of an image will appear reversed after the image has been flipped. You can flip your images either horizontally or vertically. In the example below, the image on the left was flipped horizontally to create the image on the right.


To flip an image in GIMP, follow these steps:

Click “Image” in the tool bar.
Select “Transform.”
Choose “Flip Horizontally” or “Flip Vertically” from the “Transform” menu.

Rotating an Image
Often when you load pictures from your digital camera onto your computer, some images are sideways depending on how you held the camera when you took the picture. You can easily fix this by rotating the images. To rotate an image means to turn an image a number of degrees in either direction. Observe how the image below (left) is rotated 90° clockwise to result in the image on the right.

Sample of image rotation.
To rotate an image in GIMP, follow these steps:

Click “Image” in the tool bar.
Select “Transform.”
Choose “Rotate 90° clockwise” or “Rotate 90° counter-clockwise” or “Rotate 180°” from the “Transform” menu.

Making a Photograph Black and White
You may want to get a little artistic with your photographs. Creating grayscale, or black and white, photographs is really easy in GIMP.

Sample of image grayscale.
To make an image black and white in GIMP, follow these steps:

Click “Image” in the tool bar.
Select “Mode.”
Choose “Grayscale.”

Image Editing Practice Exercise
Open one of your own photos in GIMP. If you do not have a photo, borrow the one below to experiment with. Use the tools studied in this lesson to alter the image.

Scale the image to increase and decrease size.
Use the Rectangle Select Tool to crop the picture.
Flip the image, and then try rotating the image.
Adjust the grayscale to make the photo black and white.
groundhog on dirt mound.

Creating a New File in GIMP
To create a new file in GIMP, follow these directions.

Click "File" in the Toolbox.
Choose "New."

TIP: You can skip steps one and two and press the “Ctrl” and “N” buttons simultaneously to open the “Create a New Image” window.

Indicate the size of the image you want to create.
Click “OK.”

Creating Shapes
To create shapes in GIMP, you’ll use the selection and fill tools. Let’s start by creating a rectangle.

Creating a Rectangle
To create a rectangle in GIMP, follow these steps:

Click the Rectangle Select Tool from the Toolbox.
In the image window, click and drag to create a rectangular selection in the desired size and shape.
Click the Bucket Fill Tool from the Toolbox.
Click the foreground color box in the Toolbox.

The white box below is the foreground box. The blue box behind it is the background box.

Choose the desired color for your rectangle.
Click the "OK" button.
Click anywhere inside the rectangular selection on the image window.
Creating a Square
You can use the Rectangle Select Tool to create a square as well. Hold the shift key while you click and drag the selection tool. This will ensure that your selection is a perfect square.

Creating an Oval
Use the Ellipse Select Tool to create an oval in GIMP. Follow the same steps as if you were using the Rectangle Select Tool.

Creating a Circle
You can also use the Ellipse Select Tool to create a circle, just as you would use the Rectangle Select Tool to create a square. Follow the steps to create an ellipse. This time, hold the shift key while you click and drag the selection tool. This will ensure that your selection is a perfect circle.


Creating a Hollow Rectangle
To create a rectangle that is not filled in with a color, follow the steps for creating a rectangle the steps for creating a rectangle and continue with the following:

Click the "Select" menu from the tool bar.
Choose "Shrink" from the "Select" menu.
Indicate the desired width of the rectangle’s border in pixels.
Click the "OK" button.
Click the "Delete" key on your keyboard.
You can follow the steps above to make any shape hollow.

Creating a Rectangle with Rounded Corners
To create a rectangle with rounded corners in GIMP, follow these steps:

Click the Rectangle Select Tool from the Toolbox.
In the image window, click and drag to create a rectangular selection in the desired size and shape.
Click the "Rounded corners" check box in the bottom part of the Toolbox.
Enter your desired radius.
Click the Bucket Fill Tool from the Toolbox.
Click the foreground color box in the Toolbox.


The white box below is the foreground box. The blue box behind it is the background box.

Choose the desired color for your rectangle.
Click the "OK" button.
Click anywhere inside the rectangular selection on the image window.


Creating Straight Lines
To draw a straight line in GIMP, follow these steps:

Click the Paintbrush Tool in the Toolbox.
In the image window, hover the cursor over the spot where you want the line to begin.
Click the "Shift" key on your keyboard to designate this spot as the start of your line.
While holding the "Shift" key, move your mouse to the spot where you want the line to end and click that spot.
Creating Buttons
To create a button in GIMP, follow these steps:

Create a selection in the desired shape and size of your button.
Fill the selection with the color of your choice.
Click the "Filters" menu from the tool bar.
Choose "Add Bevel . . ." under the "Decor" menu.
Indicate the desired thickness. (You might have to play around with this setting to get the look you want.)
Click the "OK" button.
Click the Text Tool in the Toolbox.
Click and drag your cursor to create a textbox that covers the entire button.
Type the contents of the button into the GIMP Text Editor window.
Click the "Use selected font" check box in the GIMP Text Editor window.
Adjust text settings in the bottom part of the Toolbox. (You can change the font style, color, size, etc. from the Toolbox.)
Click the "Close" button in the GIMP Text Editor window.
Use the arrow keys on your keyboard to move the text to the desired position.

Create a new file in GIMP to make your own rectangles and ovals. Use the information from this lesson to create perfect squares and circles, as well. Then experiment with color by using the Bucket Fill Tool to fill in your shapes.