Creating Digital Graphics

• 03/01/01

The ever-increasing use of personal computers and the proliferation of Internet-based information delivery continue to shape the industrial and educational worlds in which we live. Because of this, we are finding that we are living in an increasingly descriptive graphic world, with a greater need than ever for effective graphic communication.

This past summer, I had the opportunity to work with Federal Data Corporation while participating in the Florida Sift Program (Summer Industrial Fellowship for Teachers). Federal Data, a subcontractor of Space Gateway Support, was hired to update the NASA Web site at Kennedy Space Center. Many of the pages that I was assigned to update included sections with suggestions from Web-surfers around the world as to how NASA could improve its site. Overwhelmingly, the favorite suggestion was to improve the quality and quantity of pictures and graphics.

Accordingly, much of my summer was spent creating new graphic images for each of the past Shuttle flights. As I worked to compose the graphics for the Shuttle Mission Archives, I began to discover many principles for creating digital images, which can be applied across the spectrum of graphics composition. It was with this in mind that I began to formulate ideas for teaching a unit on digital graphics design.

Rationale for Lesson:

• The continued explosion of Web-based delivery produces an ever-increasing demand for digital graphics.
• The desire for visual appeal is constantly growing.
• Continually increasing computer power begs to be utilized.
• Image composers on PCs allow anyone to generate graphics, but an understanding of good design d'es not necessarily follow.

Outcomes - The student will be able to:

1. Learn how to select images properly, based on quality and content.

2. Learn aspects of color and light: hue, saturation, contrast and brightness, as well as how to filter and enhance images for these aspects.

3. Learn how to crop images properly, in order to capture only the needed content.

4. Understand and use opacity to eliminate hard lines and blend the graphic properly.

5. Understand and use layering to achieve a three-dimensional look.

6. Understand and use the rule of thirds to achieve a balanced composition.

Choosing Graphics

The proper selection of graphics demonstrates the long-standing debate of form versus function. Function refers to the graphic's ability to communicate the intended message. Form deals with the graphic's visual appeal. Good graphics selection involves striking a balance between form and function.

As seen in the examples above, one photo d'es a very accurate job of portraying the astronauts (function), while the other photo is definitely more appealing (form). Which one would you select to use in a graphic?

Color and Light

Color and light can be used to bring out certain aspects of the photo that can blend easily with other photos to create harmony. Graphic composers and photo editors can be used to enhance or artificially create this desired effect. Images with the same color but different shades may be chosen or enhanced to form a composition. Likewise, images with complementary or contrasting colors may be selected or enhanced to go together. To the right are a few examples of imagery that has been enhanced:

Cropping

Cropping refers to trimming the area for desired content. Because of load times over the Internet, images must be as small as possible, but still be able to communicate the intent of the message.

Opacity

Opacity refers to the image's ability to allow light, or other images, to pass through it. It is also referred to in some programs as the alpha scale. Taking an image's opacity down is an important technique because it further allows for effective blending of the graphic.

Layering and Image Buildup

Layering refers to the order in which the images are stacked together to compose the graphic. By choosing how the images are assembled, the designer can create various effects. An effective use of layering will give the graphic a three-dimensional look, as in the example to the left.

Balance

This aspect involves how the images are assembled together to create a balanced and attractive composition. The balance that graphic designers hope to achieve is called the rule of thirds. This means that a good graphic design should be able to be divided into three discernible areas of interest. When the designer works with this in mind, the finished graphic is kept from being too busy or cluttered, or, on the other hand, from looking too sparse. The following example is a good rule of thirds composition:

Tips and Tricks

While working among other designers, it is easy to pick up different techniques and build a considerable repertoire of design tricks. The graphic here shows how to embellish text in such a way as to give it not only a three-dimensional appearance, but a neon glowing effect as well. To accomplish this effect, first create the text and then emboss it. Add layers of orange and blue and offset them a little so portions peek out from behind the first layer, creating the glow effect.

Publishing a Graphic to the Web

Most image editing programs today, such as Adobe Photoshop and MS Image Composer, have a function in the File Menu which allows the designer to publish to the Web. This feature flattens and compresses the image, making it several times smaller than its application editable size for publishing on the Web as a JPEG. In this compressed format, none of the graphics created for this article would be more than 25K in size. By using the information in this article, and by taking some time to practice and study the good designs of others, anyone can begin to build effective digital graphics for publishing on the Web.

Stephen M. Portz teaches technology at Space Coast Middle School in Cocoa, Florida.

E-mail: [email protected]

The ever-increasing use of personal computers and the proliferation of Internet-based information delivery continue to shape the industrial and educational worlds in which we live. Because of this, we are finding that we are living in an increasingly descriptive graphic world, with a greater need than ever for effective graphic communication.

This past summer, I had the opportunity to work with Federal Data Corporation while participating in the Florida Sift Program (Summer Industrial Fellowship for Teachers). Federal Data, a subcontractor of Space Gateway Support, was hired to update the NASA Web site at Kennedy Space Center. Many of the pages that I was assigned to update included sections with suggestions from Web-surfers around the world as to how NASA could improve its site. Overwhelmingly, the favorite suggestion was to improve the quality and quantity of pictures and graphics.

Accordingly, much of my summer was spent creating new graphic images for each of the past Shuttle flights. As I worked to compose the graphics for the Shuttle Mission Archives, I began to discover many principles for creating digital images, which can be applied across the spectrum of graphics composition. It was with this in mind that I began to formulate ideas for teaching a unit on digital graphics design.X@XOpenTag000

Rationale for Lesson:

• The continued explosion of Web-based delivery produces an ever-increasing demand for digital graphics.
• The desire for visual appeal is constantly growing.
• Continually increasing computer power begs to be utilized.
• Image composers on PCs allow anyone to generate graphics, but an understanding of good design d'es not necessarily follow.

X@XOpenTag001Outcomes - The student will be able to:

1. Learn how to select images properly, based on quality and content.

2. Learn aspects of color and light: hue, saturation, contrast and brightness, as well as how to filter and enhance images for these aspects.

3. Learn how to crop images properly, in order to capture only the needed content.

4. Understand and use opacity to eliminate hard lines and blend the graphic properly.

5. Understand and use layering to achieve a three-dimensional look.

6. Understand and use the rule of thirds to achieve a balanced composition.

Choosing Graphics

The proper selection of graphics demonstrates the long-standing debate of form versus function. Function refers to the graphic's ability to communicate the intended message. Form deals with the graphic's visual appeal. Good graphics selection involves striking a balance between form and function.

As seen in the examples above, one photo d'es a very accurate job of portraying the astronauts (function), while the other photo is definitely more appealing (form). Which one would you select to use in a graphic?

Color and Light

Color and light can be used to bring out certain aspects of the photo that can blend easily with other photos to create harmony. Graphic composers and photo editors can be used to enhance or artificially create this desired effect. Images with the same color but different shades may be chosen or enhanced to form a composition. Likewise, images with complementary or contrasting colors may be selected or enhanced to go together. To the right are a few examples of imagery that has been enhanced:

X@XOpenTag004Cropping

X@XCloseTag004Cropping refers to trimming the area for desired content. Because of load times over the Internet, images must be as small as possible, but still be able to communicate the intent of the message.

X@XOpenTag005Opacity

X@XCloseTag005Opacity refers to the image's ability to allow light, or other images, to pass through it. It is also referred to in some programs as the alpha scale. Taking an image's opacity down is an important technique because it further allows for effective blending of the graphic.

X@XOpenTag006Layering and Image Buildup

X@XCloseTag006Layering refers to the order in which the images are stacked together to compose the graphic. By choosing how the images are assembled, the designer can create various effects. An effective use of layering will give the graphic a three-dimensional look, as in the example to the left.

X@XOpenTag007Balance

X@XCloseTag007This aspect involves how the images are assembled together to create a balanced and attractive composition. The balance that graphic designers hope to achieve is called the rule of thirds. This means that a good graphic design should be able to be divided into three discernible areas of interest. When the designer works with this in mind, the finished graphic is kept from being too busy or cluttered, or, on the other hand, from looking too sparse. The following example is a good rule of thirds composition:

X@XOpenTag008Tips and Tricks

X@XCloseTag008While working among other designers, it is easy to pick up different techniques and build a considerable repertoire of design tricks. The graphic here shows how to embellish text in such a way as to give it not only a three-dimensional appearance, but a neon glowing effect as well. To accomplish this effect, first create the text and then emboss it. Add layers of orange and blue and offset them a little so portions peek out from behind the first layer, creating the glow effect.

X@XOpenTag009Publishing a Graphic to the Web

X@XCloseTag009Most image editing programs today, such as Adobe Photoshop and MS Image Composer, have a function in the File Menu which allows the designer to publish to the Web. This feature flattens and compresses the image, making it several times smaller than its application editable size for publishing on the Web as a JPEG. In this compressed format, none of the graphics created for this article would be more than 25K in size. By using the information in this article, and by taking some time to practice and study the good designs of others, anyone can begin to build effective digital graphics for publishing on the Web.

Stephen M. Portz teaches technology at Space Coast Middle School in Cocoa, Florida.

E-mail: [email protected]

The ever-increasing use of personal computers and the proliferation of Internet-based information delivery continue to shape the industrial and educational worlds in which we live. Because of this, we are finding that we are living in an increasingly descriptive graphic world, with a greater need than ever for effective graphic communication.

This past summer, I had the opportunity to work with Federal Data Corporation while participating in the Florida Sift Program (Summer Industrial Fellowship for Teachers). Federal Data, a subcontractor of Space Gateway Support, was hired to update the NASA Web site at Kennedy Space Center. Many of the pages that I was assigned to update included sections with suggestions from Web-surfers around the world as to how NASA could improve its site. Overwhelmingly, the favorite suggestion was to improve the quality and quantity of pictures and graphics.

Accordingly, much of my summer was spent creating new graphic images for each of the past Shuttle flights. As I worked to compose the graphics for the Shuttle Mission Archives, I began to discover many principles for creating digital images, which can be applied across the spectrum of graphics composition. It was with this in mind that I began to formulate ideas for teaching a unit on digital graphics design.X@XOpenTag000

Rationale for Lesson:

• The continued explosion of Web-based delivery produces an ever-increasing demand for digital graphics.
• The desire for visual appeal is constantly growing.
• Continually increasing computer power begs to be utilized.
• Image composers on PCs allow anyone to generate graphics, but an understanding of good design d'es not necessarily follow.

X@XOpenTag001Outcomes - The student will be able to:

1. Learn how to select images properly, based on quality and content.

2. Learn aspects of color and light: hue, saturation, contrast and brightness, as well as how to filter and enhance images for these aspects.

3. Learn how to crop images properly, in order to capture only the needed content.

4. Understand and use opacity to eliminate hard lines and blend the graphic properly.

5. Understand and use layering to achieve a three-dimensional look.

6. Understand and use the rule of thirds to achieve a balanced composition.

X@XOpenTag002Choosing Graphics

X@XCloseTag002The proper selection of graphics demonstrates the long-standing debate of form versus function. Function refers to the graphic's ability to communicate the intended message. Form deals with the graphic's visual appeal. Good graphics selection involves striking a balance between form and function.

As seen in the examples above, one photo d'es a very accurate job of portraying the astronauts (function), while the other photo is definitely more appealing (form). Which one would you select to use in a graphic?

X@XOpenTag003Color and Light

X@XCloseTag003Color and light can be used to bring out certain aspects of the photo that can blend easily with other photos to create harmony. Graphic composers and photo editors can be used to enhance or artificially create this desired effect. Images with the same color but different shades may be chosen or enhanced to form a composition. Likewise, images with complementary or contrasting colors may be selected or enhanced to go together. To the right are a few examples of imagery that has been enhanced:

X@XOpenTag004Cropping

X@XCloseTag004Cropping refers to trimming the area for desired content. Because of load times over the Internet, images must be as small as possible, but still be able to communicate the intent of the message.

X@XOpenTag005Opacity

X@XCloseTag005Opacity refers to the image's ability to allow light, or other images, to pass through it. It is also referred to in some programs as the alpha scale. Taking an image's opacity down is an important technique because it further allows for effective blending of the graphic.

X@XOpenTag006Layering and Image Buildup

X@XCloseTag006Layering refers to the order in which the images are stacked together to compose the graphic. By choosing how the images are assembled, the designer can create various effects. An effective use of layering will give the graphic a three-dimensional look, as in the example to the left.

X@XOpenTag007Balance

X@XCloseTag007This aspect involves how the images are assembled together to create a balanced and attractive composition. The balance that graphic designers hope to achieve is called the rule of thirds. This means that a good graphic design should be able to be divided into three discernible areas of interest. When the designer works with this in mind, the finished graphic is kept from being too busy or cluttered, or, on the other hand, from looking too sparse. The following example is a good rule of thirds composition:

X@XOpenTag008Tips and Tricks

X@XCloseTag008While working among other designers, it is easy to pick up different techniques and build a considerable repertoire of design tricks. The graphic here shows how to embellish text in such a way as to give it not only a three-dimensional appearance, but a neon glowing effect as well. To accomplish this effect, first create the text and then emboss it. Add layers of orange and blue and offset them a little so portions peek out from behind the first layer, creating the glow effect.

X@XOpenTag009Publishing a Graphic to the Web

X@XCloseTag009Most image editing programs today, such as Adobe Photoshop and MS Image Composer, have a function in the File Menu which allows the designer to publish to the Web. This feature flattens and compresses the image, making it several times smaller than its application editable size for publishing on the Web as a JPEG. In this compressed format, none of the graphics created for this article would be more than 25K in size. By using the information in this article, and by taking some time to practice and study the good designs of others, anyone can begin to build effective digital graphics for publishing on the Web.

Stephen M. Portz teaches technology at Space Coast Middle School in Cocoa, Florida.

E-mail: [email protected]X@XOpenTag010X@XOpenTag003X@XCloseTag003

The ever-increasing use of personal computers and the proliferation of Internet-based information delivery continue to shape the industrial and educational worlds in which we live. Because of this, we are finding that we are living in an increasingly descriptive graphic world, with a greater need than ever for effective graphic communication.

This past summer, I had the opportunity to work with Federal Data Corporation while participating in the Florida Sift Program (Summer Industrial Fellowship for Teachers). Federal Data, a subcontractor of Space Gateway Support, was hired to update the NASA Web site at Kennedy Space Center. Many of the pages that I was assigned to update included sections with suggestions from Web-surfers around the world as to how NASA could improve its site. Overwhelmingly, the favorite suggestion was to improve the quality and quantity of pictures and graphics.

Accordingly, much of my summer was spent creating new graphic images for each of the past Shuttle flights. As I worked to compose the graphics for the Shuttle Mission Archives, I began to discover many principles for creating digital images, which can be applied across the spectrum of graphics composition. It was with this in mind that I began to formulate ideas for teaching a unit on digital graphics design.X@XOpenTag000

Rationale for Lesson:

• The continued explosion of Web-based delivery produces an ever-increasing demand for digital graphics.
• The desire for visual appeal is constantly growing.
• Continually increasing computer power begs to be utilized.
• Image composers on PCs allow anyone to generate graphics, but an understanding of good design d'es not necessarily follow.

X@XOpenTag001Outcomes - The student will be able to:

1. Learn how to select images properly, based on quality and content.

2. Learn aspects of color and light: hue, saturation, contrast and brightness, as well as how to filter and enhance images for these aspects.

3. Learn how to crop images properly, in order to capture only the needed content.

4. Understand and use opacity to eliminate hard lines and blend the graphic properly.

5. Understand and use layering to achieve a three-dimensional look.

6. Understand and use the rule of thirds to achieve a balanced composition.

X@XOpenTag002Choosing Graphics

X@XCloseTag002The proper selection of graphics demonstrates the long-standing debate of form versus function. Function refers to the graphic's ability to communicate the intended message. Form deals with the graphic's visual appeal. Good graphics selection involves striking a balance between form and function.

As seen in the examples above, one photo d'es a very accurate job of portraying the astronauts (function), while the other photo is definitely more appealing (form). Which one would you select to use in a graphic?

X@XOpenTag003Color and Light

X@XCloseTag003Color and light can be used to bring out certain aspects of the photo that can blend easily with other photos to create harmony. Graphic composers and photo editors can be used to enhance or artificially create this desired effect. Images with the same color but different shades may be chosen or enhanced to form a composition. Likewise, images with complementary or contrasting colors may be selected or enhanced to go together. To the right are a few examples of imagery that has been enhanced:

X@XOpenTag004Cropping

X@XCloseTag004Cropping refers to trimming the area for desired content. Because of load times over the Internet, images must be as small as possible, but still be able to communicate the intent of the message.

X@XOpenTag005Opacity

X@XCloseTag005Opacity refers to the image's ability to allow light, or other images, to pass through it. It is also referred to in some programs as the alpha scale. Taking an image's opacity down is an important technique because it further allows for effective blending of the graphic.

X@XOpenTag006Layering and Image Buildup

X@XCloseTag006Layering refers to the order in which the images are stacked together to compose the graphic. By choosing how the images are assembled, the designer can create various effects. An effective use of layering will give the graphic a three-dimensional look, as in the example to the left.

X@XOpenTag007Balance

X@XCloseTag007This aspect involves how the images are assembled together to create a balanced and attractive composition. The balance that graphic designers hope to achieve is called the rule of thirds. This means that a good graphic design should be able to be divided into three discernible areas of interest. When the designer works with this in mind, the finished graphic is kept from being too busy or cluttered, or, on the other hand, from looking too sparse. The following example is a good rule of thirds composition:

X@XOpenTag008Tips and Tricks

X@XCloseTag008While working among other designers, it is easy to pick up different techniques and build a considerable repertoire of design tricks. The graphic here shows how to embellish text in such a way as to give it not only a three-dimensional appearance, but a neon glowing effect as well. To accomplish this effect, first create the text and then emboss it. Add layers of orange and blue and offset them a little so portions peek out from behind the first layer, creating the glow effect.

X@XOpenTag009Publishing a Graphic to the Web

X@XCloseTag009Most image editing programs today, such as Adobe Photoshop and MS Image Composer, have a function in the File Menu which allows the designer to publish to the Web. This feature flattens and compresses the image, making it several times smaller than its application editable size for publishing on the Web as a JPEG. In this compressed format, none of the graphics created for this article would be more than 25K in size. By using the information in this article, and by taking some time to practice and study the good designs of others, anyone can begin to build effective digital graphics for publishing on the Web.

Stephen M. Portz teaches technology at Space Coast Middle School in Cocoa, Florida.

E-mail: [email protected]X@XCloseTag010