digital fonts

 

Two kinds of digital fonts, Raster and Vector

Raster
Fonts we see on the monitor or screen are rasterized. You can see the individual pixels, which look like stairsteps. This stairstepping is also called jaggies or aliasing.

You can set your Operating System to smooth out the jaggies with anti-aliasing.

Vector
Fonts that are sent to a printer or imagesetter are vector based.



A brief history of font standards

Adobe invented a page-description language called Postscript. This language is just a set of instructions or codes that describes a page in computer language before it is rasterized and the printed on an imagesetter or laser printer.

So, Adobe also created fonts using Postscript language. Vectors, not rasters or bitmaps, describe the shape of each character. The happy ending...smooth fonts and less computer memory than raster.

The best known Postscript font is Adobe Type 1. It has two separate files, a screen font and a printer font. Since there are multiple sizes, plus regular, bold, italic, bold italic, light....and more....styles, your font files must be given to the Graphic Arts Service Provider (GASP) for output or printing.

Adobe Type 1 fonts are preferred for printing.



Apple invented TrueType fonts which were licensed to Microsoft. So TrueType fonts are typically found on PC's, but Macs have them as well.

TrueType fonts are vector based and have only one file. The computer OS rasterizes the font to display it on screen or to send to a printer.



Adobe and Microsoft developed OpenType fonts which have over 65,000 glyphs (or characters....the letter A is a glyph). So, OpenType has multilingual capability, not just English.

OpenType fonts are cross-platform, working on both Macs and PC's.



Comparing TrueType and Postscript

Postscript




TrueType



Postscript for imagesetters and printing

TrueType for monitor display 


ASCII
American Standard Code for Information Interchange

An early (the 60's) encoding (sorta like Morse code) that creates text files that can be sent anywhere. Similar to plain text, but not exactly the same. 

Unicode

ASCII was designed for English, limiting usage with other languages. 

So, in 1991, Unicode encoding was developed  with over 100,000 codes. This makes it "the computer industry standard for consistent encoding of text in most of the world's writing systems".

Where OSX looks for Fonts

1. First, in the Font Folder of the Application you are using. This is in the Operating System Fonts folder. Applications>Fontbook.
With CS5 and CS6, consider 1 and 3 the same.

2. Then, in the User's Library's Font folder. If more than one user has an account, that user will have a library folder which also has a font folder. These may be different since users can install their own fonts in this folder. User>Library>Fonts.

3. The root level Font folder. This is yet another folder in the base level of the hard drive. HD>Library>Fonts

4. The Font folder on any shared network.

5. The OSX System folder's Font folder. Used to display dialog box text, icon names, and menus. System>Library>Fonts.

6. Classic System folder's Font folder. Usually found on G3's and G4's.

Why is this important? Because the OS searches in this order, finds a font with a matching name, and stops, whether it is TrueType, Postscript, or OpenType. This might be the incorrect font. Postscript Times and TrueType Times are not the same, and could cause printing or display problems if the wrong one is chosen. The solution? Know where fonts are located and "package up" the correct one for your GASP.  

See also, Extension Fusion_Font Locations, under Font Management, below.



Virtual Keyboards and other font stuff


Useful for type like   ® © Ω ñ á ™ 

Virtual Keyboard and Character Viewer

http://imagingtechnologies.blogspot.com/2011/06/virtual-keyboard-character-viewer-in.html

Adding a glyph to character palettes

http://imagingtechnologies.blogspot.com/2011/07/adding-glyph-to-character-palettes.html


Font issues and problems
http://helpx.adobe.com/x-productkb/global/troubleshoot-fonts-mac-os-x.html




Four categories of typeface designs
                           
                          

Cross Platform Font Issues

Fonts with the same name are not necessarily the same font.

Solutions:

Put your "to be used" fonts in a folder for that usage....printing, PowerPoint, etc.

Embed fonts if this is an option. 

Use fonts common to both platforms. See the Contents page. Arial, Times, Tahoma, Comic Sans, Webdings (dingbats) are cross platform.

Use unique faces for headlines and rasterize them, or turn them in to a picture. 

Fonts for the Web

TrueType and Sans-Serif are preferred.

Use Web-safe fonts, but also specify a list of alternative fonts that may be safely substituted. This is called a font-stack.
<p style="font-family: Verdana, Arial, Helvetica, sans-serif;">
Here, Verdana will be used if it is in the OS. If not, the browser will look for Arial and use it, etc. Don't mix serif and sans-serif in a font-stack.

Font Management

Lots of fonts slow the Operating System and the designer.

Font management utilities let you:

Organize fonts you use repeatedly into sets.

Manage font conflicts among fonts with the same name and ID.



Some utilities use automatic activation to find missing fonts in a document.

Apple's Font Book does not support automatic activation. 

Extensis Fusion_Font locations
http://www.youtube.com/watch?v=ziTwmXIrQoo

vector and raster graphics

http://en.wikipedia.org/wiki/Vector_graphics


http://www.lynda.com/Illustrator-tutorials/Drawing-Vector-Graphics-Linear-Line-Illustration/164456-2.html

NSCC WIFI log in

what is this class about?

What is this class about?

It is about the technologies that are a necessary part of visual communications.

In the world of visual communications a message is created, usually with two main elements - words and images.

To be effective, this message must be powerful and compelling. It should not only attract a viewer's attention, but engage the viewer in the content of the message and then motivate the viewer to act or think a certain way.

A digital artist, as the creator or designer of a visual communication, must not only possess creative imagination, but must be able to control how the communication looks when it is viewed.

In the digital world, that control requires knowledge and skills connected to the technologies used in this creative process.

This class is about acquiring this knowledge and applying those skills correctly.

Let's look at the evolution of a magazine ad.

• What was the first step in its creation?
• How was the image (photo) created?
• What was the color mode of the photo?
• What is probably the next thing that happened to the photo?
• What was the resolution of the photo?
• What file format was used to save the file?
• What application added the words?
• Was the color mode the same as the original photo?
• What file format was used to save the file ?
• What file format was used to send the file to the client for approval?
• Was the resolution of the client's file the same as the original photo?
• What do you do and/or say if the client says, "The colors are not right!"
• How was the file sent to the printing company?
• How do you know the correct file format and resolution for the printing company?
• Does the file format and resolution change if the ad will be viewed on-line?

http://imagingtechnologies.blogspot.com/2011/06/digital-imaging-overview.html

How do I learn (remember) all this information? 

• Understand the concepts.

• Know where to go for what you forget or don't know.

Remember..........Only NSCC students are permitted in this classroom. Friends and children are not permitted.

Children on Campus Policy  

These policies and procedures concern children brought on campus and/or left unattended by 

students. Students may not bring children into instructional settings, such as classrooms, labs, the 

Testing Center, or the Learning Center. In some instances, children may be allowed to 

accompany their parents when the parents are on-campus to conduct school business, but in no 

instance will children be allowed to be disruptive. 

No child under 12 years of age may be left unattended in any part of the college. Anyone 

observing an unattended child should report the matter to Security who will attempt to locate the 

parent. No child under 12 years of age will be left unattended in automobiles anywhere on- 

campus. Anyone observing an unattended child in an automobile should report the matter to 

Security. If conditions justify, unattended children will be taken to a safe facility and/or Metro 

police will be notified. 

The above is from the Student Policy Handbook

feb 5_2014_computer and imac videos

videos

how a computer works_old computers_about 5:00

http://computer.howstuffworks.com/23-computer-tour-video.htm

how computers work, part 1_12:35
http://www.youtube.com/watch?v=AtqjxyV9t1I

part 2_15:17
http://www.youtube.com/watch?v=9a7XQmEBK5Q

part 3_7:38
http://www.youtube.com/watch?v=E5SED8le34o

the 2013 imac review 7:46
http://www.youtube.com/watch?v=Y18ABFzNq6g

crash course on how to use an imac
http://imagingtechnologies.blogspot.com/2014/02/how-imac-works.html
5:00

what I use an imac for (artist, photographer, musician)
http://www.youtube.com/watch?v=BuQPquNNj24
2:30

Learn the Mac in Under an Hour_53:27
http://www.youtube.com/watch?v=twf70Tl7piY

from 2008_how computers work 26:00_old and tedious, but good
http://www.youtube.com/watch?v=CoxQLJkLq1c

how an imac works

http://www.youtube.com/watch?v=5rLd2rq3LDM

printing in D2L

Printing in D2L

Dismiss Printing in D2L

Posted Jan 28, 2014 8:57 AM

To print PDF, Word, or PowerPoint files,

• Click the link in Content to view the page.
• Use the outside scroll bar to scroll down the page. At the lower right corner, look for an "arrow" indicating download.
• Click the download icon.
• Print the document using the program that opens the file. 

To print HTML pages,
You will not see the Download icon for HTML pages; but instead, a Print button displays at the lower left corner of the page. Until the Print button functions properly, try the following:
Internet Explorer 10

• Click to view the page.
• Right-click inside the D2L viewer and select all.
• Right-click and choose Print.

Firefox

• Click to view the page
• Right-click inside the D2L viewer and select all.
• Click the Firefox button at the top left of the screen.
• Choose Print.
• Under Print Range, choose Selection.
• Click OK.

Chrome: Use the Print button (or)

• Click to view the page.
• Right-click in the D2L viewer.
• Choose Print.

NS Online Upgrade

Dismiss NS Online Upgrade

Posted Jan 6, 2014 12:23 PM

NS Online (D2L) has been upgraded to a new version. To become familiar with the new interface, please review the following help files. Click on Help, then click on Student Help Guide.
At a minimum, view the following sections:

•        First Time System Check
•        Supported and Recommended Browsers
•        Getting Started
•        My Home
•        Course Home
•        Content

** February Downtime **

Dismiss ** February Downtime **

The February Maintenance window is scheduled for Sunday, February 23rd, between 12:00am and 6:00am CST.
Impact to End Users:NS Online servers will be unavailable during the maintenance window.

april 11_2013_font management

what is this course about?

http://imagingtechnologies.blogspot.com/2011/05/june-3.html

wellwhadayaknow?

1. Why we are discussing font management

2. Some of the problems/headaches fonts can cause

3. Awareness of some Font Management utilities and what they do

digital imaging overview

http://imagingtechnologies.blogspot.com/2011/06/digital-imaging-overview.html


youtube video_Fontbook font management   7:00
http://www.youtube.com/watch?v=DpA_Fr4jz7A

video on Extensis_Font Locations   4:00  
http://www.youtube.com/watch?v=ziTwmXIrQoo








Only NSCC students are permitted in this classroom. Friends and children are not permitted.

Children on Campus Policy  

These policies and procedures concern children brought on campus and/or left unattended by 

students. Students may not bring children into instructional settings, such as classrooms, labs, the 

Testing Center, or the Learning Center. In some instances, children may be allowed to 

accompany their parents when the parents are on-campus to conduct school business, but in no 

instance will children be allowed to be disruptive. 

No child under 12 years of age may be left unattended in any part of the college. Anyone 

observing an unattended child should report the matter to Security who will attempt to locate the 

parent. No child under 12 years of age will be left unattended in automobiles anywhere on- 

campus. Anyone observing an unattended child in an automobile should report the matter to 

Security. If conditions justify, unattended children will be taken to a safe facility and/or Metro 

police will be notified. 

The above is from the Student Policy Handbook

printing process workflow

october 22_review activity

Imaging Technologies.oct 22, 2012

Your client has sent you several documents created in Microsoft Word. You also have Microsoft Word software. The documents include clip art images and photos. The client's logo is also in one of the documents. The client insists that the logo color be "correct". There are certain typefaces in the document that the client wants you to use. From these documents, the client wants you to create a four color ad for the Nashville Scene as well as a four color printed poster.

So………..
There are several "imaging technologies" related problems with the client-provided materials.
 

What are they? How do you get what you need?
 

What software will you use to create the ad and the poster?
 

How will you determine the sizes of the ad and the poster?
 

What resolutions will you use for the ad and the poster? How will you determine those resolutions?
 

If you scan a photo or logo, what will your scanning resolutions be? What file format(s) will you use to save the scans for your page layout software?
 

How can you be sure the client's logo color is correct?
 

When you have finished, how will you save and send the client your work for approval?
 

When the client receives your work on his/her cell phone, the response is, "the color is wrong". How do  you respond?

Taking Control of Fonts in OSX

http://www.macworld.com/article/1051630/tcofonts.html

Color Picker in Mac OS X

http://www.robinwood.com/Catalog/Technical/OtherTuts/MacColorPicker/MacColorPicker.html

hexadecimal colors

v=wY5ilrkw3Nghttp://www.ehow.com/video_4953991_hexadecimal-colors-web-design.html

contact an art director assignment

Assignment

Purpose: To apply the information we have discussed so far so that you create a digital file that will be seen exactly as you want it to be seen.

Create a self-promotion piece for yourself as a digital artist (photographer, designer, animator, multimedia artist). Use your choice of software, but be sure to include text and images (graphics or photos). I suggest a raster, rather than vector, file. Keep this simple.

http://www.commarts.com/creative

Save this file  correctly.

Send me an email requesting that I take a look at your work. Show and tell me how I can see your work. This could range from an email attachment, to a website link, to a Facebook post.

Information:

file format & file sizes, including for Facebook

file formats for photos

http://www.steves-digicams.com/knowledge-center/how-tos/online-sharing-social-networking/how-to-format-photos-for-facebook.html

http://digital-photography-school.com/what-is-the-best-file-format-to-save-your-photos-in-psd-tiff-jpeg-gif%C2%A0-png

about bitmap images & resolution guidelines for final output

http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6570a.html#WSA9EFBCB8-EC3C-4a5b-AFCD-2A3F77D917D5

about web graphics (watch video on saving graphics for the web)

http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-636fa.html

Facebook information:

pixel dimensions for Facebook photos

http://www.facebook.com/help?faq=125379114252045

info on high res photos on Facebook

https://www.facebook.com/help/photos/photo-viewer

How can I make sure that my Facebook photos display in the highest possible quality?

https://www.facebook.com/help/?faq=266520536764594#How-can-I-make-sure-that-my-photos-display-in-the-highest-possible-quality?

http://www.copyblogger.com/timeline-cover-photo/

also a blog about copywriting, wordpress, etc.

Other:

What resolution should your images be?  (from Columbia University)

http://www.learn.columbia.edu/mcah2/pdf/training_resolution.pdf

Image size and resolution for web (read the "tibits" column)

http://www.kazdesignworks.ca/images.html

Optimizing a PDF document

http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0063

Resizing, Optimizing and saving for Web

1.Resize - IMPORTANT! Resize your images! Most web-designers anticipate a minimum screen resolution of 800x600 pixels. If you include the margins, padding, scroll-bar, sidebars and other things, not all of the 800x600 will be available for an image. The largest dimensions don't need to be more than 600px wide and 500px tall. If you have a larger picture you want to show, consider a link to the JPG file, but show a smaller version on the web-page. Remember, that's the largest, most will be 350px to 500px wide.

2. Optimize + Save - IMPORTANT! Optimize (compress) your image for the Internet. You should be able to obtain an order of magnitude (10X) reduction in file size, from the original image. This means that your 4.5MB starting image, should end up (no larger than) 45KB, as a general rule. (Results depend on the complexity and size of the final image). Many image editors have a "Save for Web" option (an acknowledgement file sizes need be much smaller on the Internet). Most have a "Save As" option. Either will work.

How to optimize: Select the amount of compression (often called "quality"), with a sliding control scaled from 1 to 100, where 1 results in the smallest file. While compression is necessary, it comes at the expense of quality. Don't compress too much, or the image will look blocky (pixelated or jagged).

3. Choosing the amount of compression is an art. Good image editing software will let you preview the result and provide an approximate file size. On the others, you just move a slider. The amount of compression you use may vary from 20-100% and 50% is a good place to start. Each image should be done on a case-by-case basis, however. Even large image sizes (600px by 400px) can be compressed to astonishingly small file sizes, without an appreciable loss of quality. We try to ensure that none of our image files exceed 50KB, and often we're in the 19-35KB range. Results depend on both the complexity and size of the image.

can you?

Can you................

Create a new file and save it into a chosen location?

Rename and save the file as RTF, PDF, or plain text?

Explain why you would want to save a file in different file formats?

Send a file to someone like a a client exactly as the client needs it?

Navigate a Mac according to your needs so far?

Backup your files in multiple ways?

Compress files correctly?

Designate which device correlates with, LPI, SPI, PPI, DPI?

Explain LPI, SPI, PPI, DPI?

Apply scanning formulas and resolution correctly, depending on the intended "output" device?

Determine which file format to use after you have scanned? 

Explain the differences, advantages and disadvantages between raster and vector graphics?

List the software and hardware that creates raster and vector graphics?

bits, bytes, megabytes, etc

dynamic range

http://www.cambridgeincolour.com/tutorials/dynamic-range.htm

module four reading questions

Imaging Technologies
Directed Reading Questions


MODULE FOUR, COLOR MANAGEMENT and FILE FORMATS

II. Overview, What is digital imaging?
Click on first page of the overview.

What is meant by "capturing an image"?

What is analog?

What is digital?

What is a pixel?

Go back to Overview of Digital Imaging
Click on second page of the overview.

Define object oriented (vector) graphics

What is a benefit of object-oriented graphics?

Define bit-mapped (raster) graphics

What happens to raster graphics when they are enlarged or scaled up?

Which file will usually be larger, vector or raster?

Read about TIFF and EPS files.

Read the paragraph beginning "The file is now ready…."
Be sure you understand this. All files are rasterized via "ripping".

Define rasterization

Define RIP

Define resolution

Go back to Overview of Digital Imaging
Click on third page of the overview.

Be familiar with the terms and processes

Go back to Overview of Digital Imaging
Click on fourth page of the overview.

What are the four advantages of Digital Imaging?

Go back to the Contents page

III. Two main categories of computer graphics
What are two additional names for raster (bitmap) and vector (object-oriented) graphics?

IV. Applications used to create Vector graphics
There are several. Be familiar with them, especially the Adobe applications.

Be familiar with the rendering languages PostScript and Quartz.

What is a potential printing problem if you use QuarkXPress.

What is an application that allows you to create and edit fonts?

Are fonts vector graphics only?

V. Advantages and Disadvantages of Vector graphics

What is the meaning of "resolution-independent" and "scalable"?

Are vector graphic file sizes usually large or small?

Read the last paragraph.

VI. Applications used to create Raster graphics

Be familiar with these applications.

Read and pay attention to the last paragraph.

VII. Advantages and Disadvantages of Raster graphics
There is a lot of important information here.

What is meant by "resolution-dependent"?

Read the third paragraph, beginning "Several factors…" through through the paragraph that ends……"slows down the printing process."

Why is an EPS raster image larger than an equivalent TIFF?

Compare the maximum bit depths of a GIF and a TIFF file.
Do you understand the math behind an eight-bit (and any number of bits) file?
Refer to Bit Depth in the Macintosh Graphics Vocabulary List handout. This handout is the same as WEEK FOUR, IX, Download and read this File Formats Vocabulary.
Compare the file size difference between an RGB and CMYK file. Why is there a difference?

JPEG images always use _____-bit color mode.

How does compression affect the quality of a JPEG file?

Are all scanned images raster or vector?

Read the summary paragraph.


VIII. Even a PDF can become large and unwieldy

What do we mean embedding fonts and images?

Additional notes: Two PDF files that look similar on a computer screen may be of very different sizes. For example, a high resolution raster image takes more space than a low resolution one. Typically higher resolution is needed for printing documents than for displaying them on screen. Other things that may increase the size of a file is embedding full fonts and storing text as graphics.

Standard Type 1 Fonts
There are fourteen typefaces that have a special significance to PDF documents:
    ▪Times (v3) (in regular, italic, bold, and bold italic)
    ▪Courier (in regular, oblique, bold and bold oblique)
    ▪Helvetica (v3) (in regular, oblique, bold and bold oblique)
    ▪Symbol
    ▪Zapf Dingbats
These fonts, sometimes referred to as the "base fourteen fonts" should always be present (actually present or a close substitute) and so need not be embedded in a PDF. PDF viewers must know about the metrics of these fonts. Other fonts may be substituted if they are not embedded in a PDF.

Know some strategies for reducing the size of a PDF. Start by asking……
    •Is it going to be viewed on a monitor?
    •Is it going to be printed on a commercial press?

Reduction approaches:
    Use the Preview application on Mac's. Try this on your own.
    Use Acrobat Pro
    Use Photoshop>Save for Web and Devices. Here you would probably save         as a JPEG and then export as a PDF from Photoshop.
    Use Photoshop>Image>Image Size. Change pixel dimensions and         resolution here. Then export as a PDF.
   
IX. Download and read this File Formats Vocabulary (if you have not already
done so)


WEEK FIVE

I. Lab exercise-Complete this table to aid your understanding of file formats.
We may do this in class. Do it on your own if we do not. Use the Macintosh Graphics Vocabulary List handout or go to WEEK FOUR, IX, Download and read this File Formats Vocabulary.

II. When to use which file format
You really need to know all this thoroughly.

III. ASSIGNMENT-Page Layout, Raster and Vector


WEEK SIX

I. Color Theory

Additional notes: Color theory is a huge subject. What is color theory? I would say it is a precise, systematic way of talking about color, and when someone is talking, he or she  needs to be sure they are speaking the correct language. An important part of this language is something called color models. There are several color models, and they are all different and specific. Color models frequently use numbers as part of their language. So, when the correct language is used, everyone in the discussion understands it and the end result looks like the designer intended it to look.

It's sort of like if I went in to a French restaurant and I wanted my meal prepared a certain way, I would probably need to speak French, or have someone translate my order into French. Does that make sense? Should I ask for ketchup?


Also, from wiseGEEK: http://www.wisegeek.com/what-is-color-theory.htm
"Color theory is the study of color and its role in art and design. Obviously, humans have been thinking about colors for thousands of years, but modern color theory really arose in the 1800s, when it began to diverge from science into a pure art. A knowledge of color theory does require some understanding of basic scientific principles about color and perception, but much of modern color theory surrounds the way that people view, think about, and interact with colors, from those used on their walls to the hues in a company logo. Color theory incorporates psychology, history, and criticism just as much as it does science.

The field of color theory is quite large, with a number of prominent theorists and authors who offer commentary on the issue. Color theory could be said to be about a lot of things, but fundamentally it is an examination of color, how color is formed, how colors are arranged, and how they interact. Color theorists look at how the context of a color changes it, for example, or how various colors work for or against each other in compositions ranging from paintings to brochures."
Distinguish between additive and subtractive color theory.


What are the additive and subtractive colors?

What are the four process printing ink colors?

Define Hue, Saturation and Value.

A color model is a method of quantifying color—assigning ______________________to color components—so that the color can be reproduced.

Is every color created by a digital artist a "printable" color?


II. The purpose of Color Management
Read all this. What is the goal of a Color Management System (CMS)?


What are profiles and what is their role in this goal?


here is a really good color management tutorial
http://www.booksmartstudio.com/color_tutorial/introcolor.html


III. Video: An introduction to Color Management
Watch

IV. Interview with Pantone's Andy Hatkoff about Color Management
Read all, especially the last paragraph for more detailed information.
What is the Pantone Matching System? (refer to your vocab handout)



V. Calibration
Refer to the Macintosh Graphics Vocabulary List for a definition of gamma.
Basically gamma is a measure of brightness and darkness in the mid-tones of an image.

What are the gamma settings for Windows and Macs?

Describe an ideal work environment for a digital artist.

Read about the color calibration devices for monitors and printers.

VI. Video: X-Rite Eye-One monitor calibration
Watch

VII. Web Page Designers work with a limited color palette
Click on the link. Play with the wheel to get a feel for the limited colors for the web.

VIII. A link about the Color Picker in Mac OS X
You can open this if you work with color in Text Edit

here is another link:
http://www.robinwood.com/Catalog/Technical/OtherTuts/MacColorPicker/MacColorPicker.html

IX. Interactive Color Wheel
Play with this.  Also click on Color Scheme Designer and Overview (located right under colorspire in the upper left hand corner.

X. Lab exercise - Complete this table to aid your understanding of when to use which file format
Do this. You may need to print out on your own. We may or may not cover this in class.

XI. ASSIGNMENT-Scanning Gray Scale Photos

positive and negative space

Page Layout Assignments_samples