Name: Gabe Lambert

Email: gabe.lambert81@gmail.com

Date: 9-13-2011

Student Number: X00046900

WEB DESIGN Textbook Assignment POINTS: 10

Chapter 5: Typography and Images

DIRECTIONS:

  • Type the answers to the following questions as appropriate.
  • Change your answers to BLUE to distinguish them from the questions. 
  • This document should have a professional appearance when complete.
  • NOTE: Test questions will be based on this information.

PART 1. Definitions: Briefly define the following terms:

TYPOGRAPHY:

1

Typography: The appearance and arrangement of characters, called type, used to create printed and on screen material, such as front sizes, styles, design, or image text.

2

Typeface: A group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thickness.

3

Type style: The variations in type form such as roman (regular), italic, or bold.

4

Type size: The size of type measured in points, where 72 points = 1 inch.

5

Font: A specific combination of typeface, style, and size.

6

Serif font: A type of font that contains serifs.

7

Sans serif font is a group of fonts that do not have serifs.

8

Absolute font size: Font sizes that might not change when visitors change their browser font size settings, measured in inches, points, centimeters, millimeters, and picas.

9

Relative font size: Font sizes specified in pixels (relative to the viewing screen) or as a percentage in relation to the font size of surrounding text, a percentage of an em unit, where one em unit the font size, or with a keyword, such as medium or large.

10

Em unit: A relative font size measurement where one em unit equals the base font size.

GRAPHICS:

1

Megapixel is a million pixels.

2

TIFF (Tagged Image File Format) is a standard file format for scanning and storage, which can be edited and saved multiple times without losing quality.

3

Screenshot: A computer screen captures that are used to print out media and online, when it is necessary to show the contents of a computer screen at a point in time.

4

Raster images are images that are created pixel by pixel.

5

Vector images:  Images that consist if a group of separate drawing objects, such as, curves, and lines combined to create a single image.

6

GIF is the original graphics format used on the Web; contains a compression algorithm that reduces file size; GIF images are 8-bit images and are saved with maximum of 256 colors.

7

Interlaced GIF: a GIF image that displays on the screen in a sequence of passes; each pass displays the whole image at a higher resolution than the previous pass, gradually changing from blurry to distinct.

8

JPEG: Is used for digital photographs, photo-like paintings, watercolors, and complex illustrations requiring more than 256 colors.

9

PNG is an image format that was developed as a free open source image format to replace the GIF format.

10

Lossless compression: An image compression method that retains all the data in the image when the image is saved.

11

Lossy compression: An image compression method that loses image data permanently each time the image is saved.

PART 2 Questions: Answer each of the following briefly, but completely.

1. What is illustration (or “drawing”) software, such as Adobe Illustrator, used for? It is used to create images, such as diagrams and drawings.

2. List and describe four guidelines for preparing web-ready images.

1. Refining your images: You can use image-editing software to refine your images to improve quality.

2. Optimizing your images for Size and Quality: It is important to reduce the image file size, but keep the best quality.

3. Make sure to use the correct image file format, so it covers quality and downloadablity.

4. Make sure the image has a copyright, so no one steals your image.

3. What is generally preferred for web publishing, serif or sans serif fonts? WHY? Sans serif fonts are a popular choice of many Web designers: however, the use of sans serif fonts to enhance the readability of Web pages is not universal.

4. List 3 serif fonts, and change each font into its font type (for example, this is Times New Roman)

    1. Times New Roman

    2. Broadway

    3. Impact

5. List 3 sans serif fonts, and change each font into its font type (for example, this is Times New Roman)

    1. Arial

    2. Garamond

    3.  Calibri

6. Another type of fonts is the script fonts. Look up script font in Wikipedia and describe what they are: Script typefaces are based upon the varied and often fluid stroke created by handwriting. They are organized into highly regular formal types similar to cursive writing and looser, more casual scripts.

  • Look through the WORD font list to find two examples of script fonts:  Brush Script M7 &  Free Style Script

7. Another type of fonts is the monospaced fonts. Look up monospaced font in Wikipedia and describe what they are: Monospaced font is a font whose letters and characters each occupy the same amount of horizontal space.

  • From Wikipedia, what is a common monospaced font? A monospaced font is often used in making ASCII art.
  • Do you have this font in your WORD font list? No

IMPORTANT NOTE: Although ASCII art uses monospaced fonts, they are particularly used to properly align numbers in columns. Please do not forget this! If you have a column of figures in your web site, they will not align correctly unless you choose a monospaced font.

8. ASCII ART: From Wikipedia text for monospaced fonts, click on ASCII Art.

NOTE: ASCII (“American Standard Code for Information Interchange”) refers to the standard American keyboard characters.

a. What is ASCII Art? ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the 95 printable (from a total of 128) characters defined by the ASCII Standard from 1963 and ASCII compliant character sets with proprietary extended characters (beyond the 128 characters of standard 7-bit ASCII)

b. Find ASCII Art:

  • Go to Google Images; enter ASCII ART in the search box.
  • Choose an image you like, and then click on the artwork links until you get to the actual image.
  • Right-click on the image and choose SAVE PICTURE AS.
  • Save the picture on your local drive.
  • From INSERT on the Ribbon, insert the image on the last page of this document. (You can also just drag and drop the image into this document directly from Google Docs rather than saving it first).

c.  Create ASCII ART: There are several sites that will create ASCII Art from your own images:

  • Go to:  http://www.glassgiant.com/ascii/ 
  • Read about ASCII Art, and click the links of the sample images.
  • Scroll down to see the picture settings.
  • Click the BROWSE button and find one of your own images saved on your local drive.
  • Choose the width, font size, and color scheme.
  • Click on SEND.
  • You cannot directly save the image as it is NOT really an image (that is, it is not a .jpg, or .png type file), rather, it is text. Copy all the text and paste it in the last page of this document.


ASCII ART

1. Example of ASCII ART from Google Images:

2. Example of ASCII ART created in Glass Giant:

?III??III,,:,:,,:,,,,,,,,,,,,,,,,:,,,,:=~::~~~:::,:,,:,:,,,,,,,:,,:,,,,,::,,,,:,

??II??III,,:,,,,:,,,,,,,,,,,,,,,:,.,,.,.,:,~:::,:,.,,,,,,,::,::,,,,:,,::,::,:::,

??II?+III,,:,,,,:,,,,,,,::,,,,::,::,,,,,,=~::::,,,:,,:::::,,:,,,,,::,,:,,,:,:,,:

??II?+III:,:,,,,:,,,,,,,,,:::::,,,:,:,,,::~~:~:,,,,,,,,::,,:,,:,,,,,,:,,,,,,,,.,

??II?+III:,:,,,,:,,,,,,,:,,:::~,,::,:,:~:~~~:~:::::,:::::::,:,::,:::::~::::,:,,,

?+II?+III:,:,,,::,,,,,,,,,,:,:,::,::,,,::~:~~~~:,,:,:,,:,,,,,,::,::,,:,::,::,,,:

??II?+III~,:,,,,:,,,,,,,,,,,,,,,,:,,,,.,,,~:,,:,,,,,,,,,:,,,,,,,::,:,,:::,::::::

?+II?+III~,:,,,::,,,,,,,,,,,,:,,:,,:,,,,::::~~~:~,:,,,,:,,:,::::,,,,,::,:,,,::,:

?+II?+III~,:,,,,:,,,,,,,,,,,,~,:,:::,,,::,=~~=~,,,,,,,,,,,~:~~,::,,,,,,,,,,:,:,,

?+II?+III=,:,:,::,,,,,,,,,:,:::::::~,,,,~~~~~::,:::,,,,::::::~::,::,,,,:,::::,:,

?+II?+III=,,,,,::,,,,,,,,,:,::::=:,:,::,,==~=:::,,,,,,:,::::,:,:,,,,,:,,:,::,:,,

?+II?+III=,,,,,::,,,,,,,.:,,,,,,:,,:,,,,,,~~::::,,,,,,,,,,:,,,:,,:,,,,:::,::,::,

?+I??+III+,,,:,:,,,,,,:,,,::,:::~:::,,::~~~~~~~~::::,,,::,,,,,,:,::,:,::,,:,:,:,

?=I??+III+,:,:,::,,,,,,,,,:::,,,~~::,:,,::::,~:~:,:,,:,,,,,:,,:,:,,,,:,,::,,,,,,

++I??+III+,,,:,:,,,,,,,,,,~~:,,=~=::::::,:::::~~::~:::,:,,:,::::,:::::::~~::::::

?+II?+III?,,,,,,:,,,,,,,,,::,,:~~:~:::,.,,,::~::::~:,,:,,:,::~,,::~,:=:===~,,,::

?+???+III?,:,:,::,,,,,,,,,,~,,~~~:~====++++=:,,,,,,,,,,,,,,,:,,,,,,,:~::=:::,:::

??I??+III?,,,:,,:,,,,,,,,:,~,,:++++++++???????+~,::::,:,,:~::,,:,:::=~:~=~~:,,::

?????+?I??,:,:,,,,,,,,,,...:+++++++??????????????+,:::,:,:::::,:,,:::~:~~~~:,,,,

+????+????,,,:,:,,,,,,..,=++++++??????????II???I???+:::::,:,::,:,:::,:::~~::::,:

++??++????,:,:,,:,,,,..:=+++++????????????I??IIII????~::,::::,::,:::~~~~~:,::,::

+++??+????,,,:,,:,,.,:=+++++++?????????????IIIIII?I???=,,,~,,,,,,,,,:::::,,::,::

++???+???I,,,::,:,..:=+++++????????????I?IIIIIIIII????+~::~~,:::,::~:,:,,::~:::,

++?+??+???,,,:,:,,.:~=++++????+=~~~~===+?IIIIIIIIII?????:,:,,,:,,:,,,:,::~:~:,,,

++??+?I??I,,,::,:.,~=+++++++=~~~==?+++++??IIIIIIIIII?????:,,,::,::,::::::::~,:,:

++??++?I+?,,,:,,,,~~=++++++==+??I?II?????IIIIIIII?+====??+:,:::::,::::::,::::,,,

++??+++?++,,,:,,,~:=++++++++??I???I???+??IIIII7II??+=~~==?:,,,,,,,,,,,,,::,,:,,,

++??++???+:,,,,,::~=++++++?????????????++???IIIII???III+===:::,:,:::,::,::,::,,:

++??++?????,,,,,::~=+++++????+===~~+++++=++?????????IIII?+=,:,,,,,:,,,,,,:,,:,,,

++?+++??+?I+,,,,::~=++++++?++=~~::~?+==+=+++???++++???????~,,,,~,:::::~:~~:::,,,

++??++???+?I?,,,:~~=+++++++??????+=====+++++????=::,+?????~,,,:,::~,::,:,,,,,,,,

++?++=????+??+,=~:~+++++++??????????+?+?+++++????++==:~+??:.....,.,,,,,.,.,,.,..

++?++=????,+==~~+~~+++++++?????????????+++++??III??+???+??:,:,,,:,,,,,,,,,,,,,,,

+=?++=????,+=++++==++++++?????????????+++???+?II??I???????::,,:,,,,:,,,,,,,,,,,,

++?++=????~++=+++==++++++??????????II?+???,=~??:??III??I????++++====~~~:::::::,:

+=?++=?????++=+~+===++++?+????????III?++++?????=??IIII????IIIIIIIIIIIIIIIIIIIIII

+=?++=?????+=++=+=~=++++?+??????IIIII????+++??+++IIIIII???+IIIIIIIIIIIIIIIIIIIII

+=??+======+++==+=~=++++?+????????I????=====++~=+?IIIIII??+????+?????????????+++

+=??+??????++=++==~=+++++++????????+==+~=~+???+~~=??IIII??+IIIIIIIIIIIIIIIIIIIII

+=?+??+?????=++++===+++++++??????+~===+?????????+==+?III??+IIIIIIIIIIIIIIIIIIIII

+++++++===~=+++++=~+++++++???????++=====++++++=++++==II???========~~~~~~~~~~~~~:

+++++++=+????=+++=~=+++++++++????=++++??????????+==+=?I???IIIIIIIIIIIIIIIIIIIIII

+++++++=????????==~~++++++++++??+==+????+++++++???+=++????IIIIIIIIIIIIIIIIIIIIII

+++++++=????????===~==+++++++???==+??????I?++=??I??+++????IIIIIIIIIIIIIIIIIIIIII

++++++==+???????+==~~==++++++???+=??????????????????+????+IIIIIIIIIIIIIIIIIIIIII

++++++++=+++++++++==~~~===++++++==++?+??????????????+=??+IIIIIIIIIIIIIIIIIIIIIII

+++++++++++++++++=====:::~=++++==:=++++?????I??????+=+?++??????????+????????????

+++++++++++++++++=+==+==::,~~===~,==+++?????II?I?++=~?++????I????????I?II??I????

+++++++++++++++++=++=++====~:~~:::~:~~+++????????+::==~~??????????????I?IIIII??I

+++++++++++++++++===++++++====~::.,,,,~==~~~~===~:,:,,=?????????????I?I???IIII?I

+++++++++++++++++===++++++++=====~~,,..,,,::::::,,,:=???????????????I?II?I?II?I?

++++++++++++++++==+==++++++++===========~:,::~:~====????????????????????I??I????

++++++++++++++++==++++++++++++=========+=+++++++==++????????????????I??????I?I?I

++=++++++=+++++====+++++++++++==+=========++=+++=+++????????????????????????????

==++++++++++++======++++++?++++++========++++++++++?????????????????????????????

===++++++++++=======+++++??????+++++=+++=+++++++++++????????????????????????????

====+=++++++===++++=++++???????????+++++++++++++?+++++++????????????????????????

=======+++====+=++++++++??????????????+++++++????+.,=++++++???+?????++??+?+???+?

===,....======++++++++++++?????????????+?+???????+......~=++++++++?+++++++++++++

==~.........,:=+++++++++++?????????????++++++????,...............,++++++++++++++

..................,~==++++++??+++?????++++=~=+??+...................,++++=======

...............................,,,:~====~:,...........................,=========

........................................................................========

.........................................................................=~==~~~

..........................................................................~~~~,.

.............................................................................,,,

.............................................................................,,,

................................................................................

................................................................................

................................................................................

................................................................................

                                                                 GlassGiant.com