Tuesday, March 28, 2017

Learning Bootstrap: Bootstrap Tutorial and Project

Hello Students,
Your next assignment is to work through the Bootstrap tutorial on W3Schools.com and create a website using the bootstrap platform. Follow the tutorial, or follow along with the class to create an example, then create a compelling website utilizing the bootstrap framework. Bootstrap is the most popular HTML, CSS and Javascript framework being used to develop responsive and mobile friendly websites. Bootstrap is completely free and open source!



Our own schsdigitalmedia.com website was created using the bootstrap frame work to provide flexibility and ease of use for users from mobile devices, tablets, etc.


Assignment: After working through the bootstrap tutorial below, create a single/multi page website about a subject of your choice, you could create a website for a class project, document something you created or participated in, etc. Think about how this project could be used to your benefit (book report, etc). You can document your favorite hobby, band, sports, celebrity, movie, video game, etc.

Bootstrap Page Assignment Specs:
  • Single scrolling or multiple page website, subject is your choice
  • Website should be complete with information, photos or gif's, content (150 words minimum), links, resources etc
  • Website must be built with bootstrap frame work, be free of glitches or errors and function correctly when uploaded to server
  • Website must contain menu at top of page for navigation
  • Website must contain 1 external link
  • Website must contain credit with link to your email at bottom of page or contained in an "about" or "contact" section (this page created by "insert name") with email hot-linked
  • Website must be free of errors or bugs, broken links etc...
  • Final website displays good use of typography, color palettes and shows understanding of the elements and principles of design

Tutorial: Read through the bootstrap tutorial... try out each step and create your own gallery page that demonstrates the following bootstrap elements:

Download and Modify Bootstrap to Customize your Template:
Want to change the colors of your template? Download bootstrap and re-link your html file to the downloaded bootstrap CSS file.  Click the following link and un-zip the contents into your project folder. Change the bootstrap link code to embed the local bootstrap resource instead of using the online resource.

Link: Download Bootstrap

Customize Your Bootstrap Colors:
Want to change the color scheme of your template? Check out the link below, you can upload a photo and create a color scheme, or choose one of their pre-made ones. Copy-paste the CSS into the bootstrap.min.css file.

Link: Custom Color Scheme's for Bootstrap

Custom palette on my sample bootstrap page.

Thursday, March 23, 2017

Principles and Elements of Art in Web Design

"People ignore design that ignores people." — Frank Chimero

Art and Design elements are the basic units or building blocks of a visual image. The principles of art and design govern the relationships of the elements used and also organize the composition of a visual image as a whole. All imagery, art, design and photography alike, are comprised of elements that can be broken down and analyzed. 

Look over these posters, the first addresses the principals, the second addresses the elements and provide visual representation or examples of these concepts. Continue scrolling down for written explanations in more detail,  there is an assignment at the bottom of this post to complete. Read the details and ask questions before beginning.




The Elements of Art and Design
Space: Space refers to the distances or areas around, between or withing components of an image. It can exist in two or three dimensions. Space can refer to positive space(a shape, such as an apple) or negative space (the absence of an apple shape). It can also refer to elements in the foreground, mid or background of an image.

Line: Line is the basic element and refers to the wcontinuous movement of a point along a surface, such as a pencil or brush. Line can also be created by the edges of other shapes. Lines can vary in length, thickness and direction.

Balance: Balance can either be symmetrical or asymmetrical. The balance of an image can affect the focal point of an image. The location of objects, their sizes and colors, textures and shapes all affect the perception of balance in an image.

Color: Color and particularly, contrasting color is used to draw the eyes attention to certain areas. It can invoke mood and emotion. Color is created in many different ways... but in all color spectrums, there are primary colors, which all other colors are derived from, and secondary and tertiary colors. Certain formula’s exist for choosing colors that are pleasing to the eye, one way is using Complimentary Colors, which appear opposite each other on a color wheel. Colors can be perceived as “Warm” such as reds, yellows and oranges, other colors are “Cool” such as purples, greens and blues.

Shape: Shapes are what give objects their definition. Think of the silhuoette. Shapes can be organic (curved, soft, random) or geometric (angular, sharp, organized, complex).

Texture: Texture is perceived surface quality. In art two types of texture exist, tactile and implied. Tactile texture is the way a surface actually feels, such as sandpaper or tree bark. Implied texture is the way the surface of an object “looks” like it feels. This is created with different pencil and brush techniques. In the modern digital realm, texture is a strong ally in design.

Value: Value is an element that refers to the relationship between light and dark. It can also be referred to as tone or shading. The value of an object helps give it form and depth. 

The Principles of Art and Design
Unity: Unity refers to a sense that everything in a piece of work belongs. It can be referred to in the literal sense of course, or just by the way balance, repetition and other elements acheive a design harmony.

Variety: The use of dissimilar elements. Differences in shape, texture, color, line etc.

Repetition: This refers to the recurrence of elements within a piece. Color, lines, shapes and other elements can be echoed, often with some subtle variation to maintain interest. Repetition can be random or organized, or express rhythm and patterns.

Harmony: Harmony is acheived through the sensitive balance of variety and unity. Harmony in color can be acheived by using complementary or analagous colors. Harmony in design is reflected in consistency in style, similarity of components. Harmony can also extend to the use of texture, color, scale etc.

Contrast: Contrast is the occurrence of differeng elements, such as color, value, scale etc. It creates interest and helps direct the focal point. Contrast helps define depth and space as well. Objects that are closer to use appear lighter, and objects that are farther away often appear darker.

Proximity: This refers to the physical placement of objects or elements in a piece. Proximity is used to communicate ideas like relation, importance or hierarchy.
Proportion: Proportion involves the relationship between objects. It is relative to size and scale. Proper proportion is important in implying realism, and skewing proportion can force the viewers perspective to change. One classical expression of proportion is the “Golden Ratio” in mathematics and the arts. Throughout history, the ratio for length to width of rectangles of 1.6 (roughly) has been considered the most pleasing to the eye. 

Functionality: In the design world, good design is created for a purpose. This is the difference between art and design. Art is created for the aesthetic value, while design is created to communicate. Art is developed by artists often to satisfy personal motivation. Design is created by designers, for clients, to communicate a message or information. Good design must be aesthetically pleasing as well as informative.

Principals and Elements of Web Research Assignment:


Penhaligon's is a UK store that sells fragrances among other things. Their flower bouquet ordering website uses clever layering of elements and colorized vintage illustrations to create texture and depth in their site.
Use the internet and search engines to find websites that demonstrate good usage of the artistic principles and elements discussed today in our lecture. Use correct search terms to collect, cite and explain how each website is utilizing the principle or element. Collect your examples in a single HTML/CSS page that uses clean typography/color usage for emphasis.

Assignment Specs:
  • Single HTML/CSS page with clean typography and color usage.
  • At top of page display your name.
  • Below your name create a title for your assignment called "Principles and Elements of Art through Web Design".
  • Below your title list the element or principle your are displaying, discussing such as "Line" or "Color".
  • Below your subtitle display a link with a screenshot or embedded image from your website.
  • Below your image write the web site address and turn it into a link.
  • Below your link write an explanation discussing how the site demonstrates the artistic principle or element in question.
  • Continue until all elements and principles are covered, check links and spelling before turning in.

Assignment Requirements:
Find a website that demonstrates good usage or approach to each of the following elements and principles and write 1 sentences that discusses or communicates how the site is achieving the use of said principle or element. You should have 8 total references when complete...
  • Elements
    • Variety
    • Repetition
    • Harmony
    • Functionality
  • Principles
    • Line
    • Balance
    • Color
    • Texture
Display all your examples with screenshots, links, explanation, titles, etc in a single HTML/CSS page and turn in when complete.

Have fun!

- Mr.W


Tuesday, March 21, 2017

Web Typography and Career Research

Hello Students,
Our next lesson combines both web design skills with typography and researching careers as part of our career development work. Typography for the internet is important for both readability and legibility. We will learn about these features and more.

As part of your career development module, we will research 1 possible career you are interested in and write a short essay about the career, citing details, salary and pathway to this career. This writing assignment can then be included in your portfolio's career development section...

Typography for the Internet:
Here is an example of what you will create for this assignment, a short career research paper formatted for legibility and readability using web fonts from google.


Web Design for the screen viewing has similar yet in some instances different guidelines for typography. Creating emphasis with proper contrast, layout and alignment is important, but so is type choices and a focus on readability and legibility.

Readability refers to typefaces that are more expressive and are best used for smaller sets of text at larger sizes.

The concept of readability is best applied to:
  • Headings
  • Subheadings
  • Captions
  • Quotes

Legibility refers to typefaces that are best used for smaller text, also called body copy. These typefaces may be serif or sans-serif but above all tend to more rational and readable at smaller sizes. In print a serif is best at small sizes, but for screen viewing a sans-serif can be better for some.

The idea of legibility is used for larger bodies of text like paragraphs and your font choices should be focused on easy reading for the viewer.
  • Use medium weight fonts, bold and light are harder to read
  • Set paragraphs and blocks of text to a set width that isn't too wide
  • Use type that isn't overly expressive


Accessing fonts online:
Google fonts makes it easy to access many fonts online without the risk of a viewers computer missing the font in their system, causing readability issues. Check out the whole collections and try some out for your project.

How to use google fonts:
  • Go to: https://fonts.google.com
  • Search for a font to use
  • Click the red plus symbol to add the font to your selection
  • Click on the tab to see the code for your website
  • Add the google API code to your HTML page
  • Use the fonts where you like in your CSS


Check out an example here: Career Research Assignment by Kel Varnsen


What interests you as a career? Pick one to research for this assignment

Job Research and Writing Assignment: Part A
Search for a job title, something your would be interested in. Research 1 jobs and write about why you would be interested in that job. Be thorough!  Tell me information about the job such as:
  1. Job Title
  2. Job Description
  3. Job Activities
  4. Education Needed
  5. Career Pathway
  6. Salary Range
Assignment Specifications:
  • Complete assignment in essay form
  • Provide formatting opportunities for your html/css (title, subtitle, lists, etc)
  • 3-4 Paragraphs with details
  • 150 Words minimum

Example Essay:


Career Research Essay By: Kel Varnson

Subject: Computer Programmers

General Description:

Computer programmers write instructions that tell computers to perform a variety of different tasks. They may write programs that will perform accounting or billing functions. Other programs may operate robots or computer-aided design (CAD) machine tool operations. Some programs allow people to create artwork or graphics, while others coordinate space flight operations.

Programmers speak with the individuals or groups that need programs in order to understand their needs. They then outline the steps the computer must go through to get the job done. It is the programmer's job to identify all of the steps the computer complete to produce the desired results.

Programmers use computer languages to write programs. Some languages operate the computers while others are used to write programs that perform tasks. Higher level languages require less technical understanding of how computers operate. They are said to be more friendly. They are easier to use and may accomplish a complicated task with a single command. A less friendly, more basic program will require more detailed instructions. Programmers determine the appropriate language to use, based on the advantages and limitations of each.

When programs are finished, the programmers must test or debug it to be sure that errors and problems have been found and corrected. Also, the programmers write two sets of instructions for individuals who will use the program. The first is for other programmers who will work on the program in the future. Another set of instructions is written for program users.

This is a Hot Occupation. Over the next 10 years, job openings in this occupation are projected to increase by at least 27%.
  • Write programs that tell a computer what to do
  • Usually know more than one programming language
  • Spend working hours alone, but often work in teams
  • May have flexible schedules, including telecommuting
  • Often work long hours
  • Have at least a bachelor's degree
  • Earn $61,730 per year (national average)
  • Stay up to date on new programming languages
Hours & Conditions:
Computer programmers usually work in well-lit, climate-controlled offices because computers do not function well in environments with extreme temperature or humidity fluctuations.
Work Locations:
Computer programmers work at universities, government agencies, and business firms.

Pros & Cons:
Programmers like working with computers and planning ways to solve problems. They find their jobs to be challenging. They like working indoors in clean, air-conditioned offices. Also, there are many opportunities for employment in this field.


Job Research Essay Typography Assignment: Part B
For this part of the assignment, you will format your essay as a single web page that demonstrates clean and clear typography that demonstrates readability and legibility

Link for Reading:
The Two Functions of Type: Readability and Legibility

Assignment:
  • Format your essay as a html/css document
  • Utilize 3 web fonts for formatting text to demonstrate legibility and readability
  • Layout must be clean and easy to read
  • Typography use should create emphasis
Check out an example here: Career Research Assignment by Kel Varnsen

Upload to server when ready!

Friday, March 17, 2017

Introduction to Color Theory

Students,
Your next assignment is to create a color theory page that shows some color harmony palletes and a short writing assignment.







Part 1 - Short Reading / Writing Assignment:
Read the following link/article and share information from the article to answer the questions below:

Article: Introduction to Color Theory for Web Designers
  1. What is the best practice when dealing with colors and text?
  2. How does the use of contrast effect the viewer?
  3. What are some online tools that web designers can use to create effective color palettes?
On your HTML page, write a short summary of the principals discussed, shown and demonstrated in todays color theory lecture. You can search for images online and research answers also. Try to address all the questions listed below:
  1. What are the 3 primary colors? 
  2. How are secondary colors created? Cite an example 
  3. How are tertiary colors created? Cite an example 
  4. What is the difference between subtractive and additive color models? 
  5. How can color affect our perception? 
  6. How does one color affect another? 
  7. Find an example or show an example of a greyscale image. 
  8. Find an example or show an example of a monotone image. 
  9. Find an example or show an example of an image that uses complimentary color.
  10. Make sure your images are small, no more than 100 pixels wide and are compressed for optimum (small) file size with good image quality
Part 2 - Color Page:
  • Create a new HTML Page, format it with CSS and place it in a folder called it "color theory"
  • In HTML/CSS create an eye catching title for your page called Color Theory
  • Create 2 boxes with the Div tag and make them 100X100 pixels. show 2 complementary colors in these boxes and label them complementary. List the name of the colors, their RGB values or their Hex code.
  • Create 3 boxes with the Div tag and make them 100X100 pixels. show 3 split-complementary colors in these boxes and label them split-complementary. List the name of the colors, their RGB values or their Hex code.
  • Create 3 boxes with the Div tag and make them 100X100  pixels. show 3 analagous colors in these boxes and label them analagous. List the name of the colors, their RGB values or their Hex code.
  • Create 4 boxes with the Div tag and make them 100X100 pixels. show 4 quadrilateral colors in these boxes and label them quadrilateral. List the name of the colors, their RGB values or their Hex code.
  • Add the content from part 1, format for easy reading and upload to our NAS/Server


Have fun!

- Mr.W

Thursday, March 16, 2017

How to Write a Good Great Resume and List of References

Hello Students,
Having a solid resume is the cornerstone developing your career. A well written and well designed resume is what sets you apart from other job applicants. A perfectly written job application, a quality resume and a list of positive references is the job seekers trifecta. In this class we will teach you these skills to help in your search for employment. Below is a list of resume writing tips, read over it before finalizing your own resume.

Link(right click to download): ROP PORTFOLIO HANDBOOK

Resume Writing Tips:
Put your typography skills to work:
Never use comic sans, zapfino or anything difficult to read or is more "expressive" than "rational". Use sans-serif for headers and section titles, pick a complementary serif font for all other text. Limit your fonts to 2, with 1 or 2 modifiers (bold, italic, etc). Also, refer back to our rules on typography in our introduction to typography and utilize those guidelines in your resume. Choose fonts that are complimentary to each other and assist in creating information hierarchy, this helps the reviewer find the information they need quickly. Choose a good sans serif font for your section titles and a complimentary serif font for the rest.

Have an objective:
Know the purpose of your resume and edit it for different job scenarios. Having a focused job objective listed on your resume will help you with attaining an interview and getting hired.

Back up your special skills with job experience:
List your skills but make sure your listed job experience, training or education reflects those skills. Are you really good at making websites? Let them know how and where you learned that skill.

Research and use the right keywords:
Every industry has its own language, research job offerings and pay attention to the keywords that are used. If you put your resume online with a job placement service they will often use certain keywords to search their database for potential hires.

Be descriptive with job experience:
A job title will communicate your role, but not the details of your work experience. List the duties, tasks, activities, skills and achievements that were part of your job.

Format your text:
Use bold text to start each section. Use bullets for lists. Make the document easy to quickly scan and read. Clarity of format is crucial, you have ten seconds before the employer will move on to another applicant.

List most recent job experience first:
This also goes for education, list the most recent first. If your still in High School you can say "future class of 2012", or "Currently attending HS".

List most important skills first:
When writing out your skill list make the most important skills the first ones on the list. If you are applying for a web design job, list your web skills first. Change and edit this for different industries/jobs.

Leave out the obvious:
It is not necessary to add "available for interview" or "references available upon request". References are standard and expected, and of course you are available for an interview. Thats the whole point!

Avoid negativity:
Don't trash talk past employers or state that you didn't like a past job. Simply state that you were looking for future opportunities.

Go with what you got:
If you haven't had work experience yet, just list any summer jobs, volunteer experience etc. If you have hobbies that are relevant to the job you can list those. If you don't have a diploma or degree then just list your estimated date for completion.

Proofread your resume:
Have your neighbor or classmate read your resume. Sometimes the spellchecker doesn't catch typos. The more eyeballs that see your resume before it gets in the hands of the employer the better.

Although these resumes contain similar information, styles do vary. Focus on what makes a resume readable, identifiable and effective. It should be unique to stand out from the rest, but not overly expressive as that can make legibility difficult.
  • Download the ROP Career Portfolio Handbook and follow the template to write your own resume from scratch
  • Create a 1 page resume that meets the handbook requirements for all included information
  • Use any program or online tools of your choice to write your resume
  • Demonstrate good typography, spelling and accuracy
  • Make sure your resume shows good information hierarchy so it is simple to read and each section is listed clearly
  • Email or print and turn in your resume  and list of references for credit - DO NOT POST YOUR RESUME ON YOUR BLOG! It contains sensitive information!
  • Due Wednesday

List Of References Writing Assignment:
It is incredibly important to develop a great list of references. These references will help you obtain jobs, college admissions or acceptance into special programs.

Who makes a good reference?
  • Teacher
  • Coach
  • Counseler
  • Present or past employer
  • Family friend
  • Anyone that can speak highly of your abilities, skills and worth

References to avoid:
  • Anyone under 18
  • Personal friends
  • family members
  • Anyone who cannot speak highly of your abilities or skills

Important Tips:

  • The format of your references should match your resume exactly, same header, same fonts.
  • Do not include references on your resume
  • Include at least three references
  • All references should be responsible adults who know you well and can speak to your character and skills
  • Always ask whether or not someone is willing to be a reference before including them in your list
  • Verify the contact information before handing over to an employer

Format:
Use the following format for your references, using your own accurate information of course:

Persons Name:   Bob Smith
Address:            123 Fake Street
                          Santa Cruz Ca, 95060
Phone #:             (831) 555-4321
Title and              Business Owner
work place:         Moland Spring Bottled Water

Grading:
Your resume's and reference lists are graded assignments. For a total of 10 points, grading is as follows:
2Pts - Resume and List of References is complete per Handbook Guidelines
2Pts - Resume and List of References is well formatted and easy to read
2Pts - Resume and List of References contains no typos or errors
2Pts - Resume and List of References are two separate documents with consistent style, font and header
2Pts - Resume and List of References are emailed to me as PDF files with descriptive file names (don't send a file called "untitled.pdf")

Have fun!

- Mr.W

Thursday, March 9, 2017

New Assignment: Making Animated Gifs

Hello Students,
Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.


What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frameUnfortunately they can't have sound. You can do some really cool stuff with Gif's. Check out Fluxmachine for inspiration.


What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...
This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS

Gif Assignment:
Part A
  • Create an animated gif, you can use photographs to make an animation, or a short animation with sequential drawings on paper. You can use found images as well or even short video clips. Think of something simple for the first example... just use your imagination and use this opportunity to become familiar with the gif process
  • Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop. Try a google search and you will find many tutorials and different techniques
  • This is just a quick project to get you used to creating gifs, make sure they are short, not too big in file size and loop forever. Use the Save For Web dialog box in Photoshop to adjust the file size and dimensions
  • This Gif should have at least 10 frames of animation

Part B - Gif Animation Challenge:

  • Choose one of the subjects below to animate, BUT CHOOSE WISELY! :
    • A cat with bird wings is flying over a city and shooting lasers out of it's eyes
    • Godzilla is a DJ spinning records on a turntable in a dance club
    • Find a short video clip of a sword fight and replace the swords with Light Sabers
    • A celebrity/politician removes their face to reveal their actual reptilian face
    • A cute animal is using a computer, becomes frustrated and smashes computer
    • Create a seamlessly looping Cinemagraph using still images, video or found film source
    • Create a self portrait, your head opens like a trap door revealing a cat controlling your every move
    LASER CAT COMPELS YOU TO COMPLETE THE GIF CHALLENGE!



    How do I Gif?


How to make an animated Gif with Photoshop CS5:
  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers with the layer palette that you will turn into frames of animation. Im using some pictures I took of my dog.





  • Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
  • Open the Animation Palette and click on it's Sub-Menu and then select Make Frames From Layers
  • If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
  • You can now designate individual durations on each frame.
  • Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.




  • Open your Gif file in a web browser to test it. Here's my result:



Previous Student Work Samples:


















Tuesday, March 7, 2017

Understanding Graphic File Formats for the Web

Hello Students,
In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images.

Take notes during todays lecture and save them.

File Format Exercise
  1. Right-click on the two images below, save them to your computer and open them in Photoshop
  2. Go to File / Save for Web & Devices
  3. Photoshop has 12 presets, save 1 example of each. Use proper self descriptive file names from low quality to high quality
  4. Compare the results
  5. Repeat step 3 using the VW Bus illustration
  6. Write a short paragraph about your results and answer these questions. Which image has the best quality? Which has the best file size? Which has the best balance of file size and quality and why?
  7. Create a new HTML file, you may use bootstrap or you may create your own CSS for the document.  Create a single HTML page that contains your notes and your assessment of the file formats that you wrote from step 6. Embed the 12 images that you created from low to high quality below your notes and written assessment.



Alias vs Anti-Alias Pixels Explained:
In Photoshop and other bitmap/pixel based programs, Anti-Aliasing is used to give objects a smooth appearance when viewed on screen, it averages the pixel colors to create a smooth transition.

Aliasing is when graphics lack that smoothing, and we can see jagged edges to the object, or "Jaggies".



Contiguous vs Non-Contiguous:
It is important to understand the difference between contiguous and non-contiguous imagery, because different image compression formats are best used for certain types of images.

Contiguous images have subtle color changes from one pixel to another, such as photograph's, paintings, hand drawn sketches or any graphics with a lot of gradients. The JPEG compression codec is best for these kinds of images, that is why most digital camera's save images in the .JPG format.

Non-Contiguous Images have large areas of flat color, shapes and lines. These can be photo's that have been converted to 8-bits, or graphics drawn without anti-aliasing.



Graphic File Formats Explained:
There are a lot of great ways to get confused while using computers - and one of the best is figuring out graphics file formats. As with so many areas of computing, standards for graphic files are great because there are so many to choose from.

They're all different and incompatible, of course, but many programs can load and/or save a wide selection of file formats. By and large, you can tell what kind of file you've got by looking at the suffix - the letters, usually three, after the dot in the filename, otherwise known as the file extension.

Better graphics software actually looks at the file data to determine what kind of file it's dealing with, but Windows software is shamefully deficient in this regard; rename happyface.psd to happyface.jpg and it's likely that the file will become unreadable on any computer.

Below is a list of all (or almost all) graphic file formats... The ones we will use the most are JPG, GIF, PSD, AI and PNG....

ADI - AutoCAD's Device-Independent Binary Plotter Format, a vector format generated by AutoCAD.

AI - Adobe Illustrator's metafile format, which is actually a flavour of Encapsulated Postscript.

AWD - Microsoft Fax At Work format, a black-and-white (one bitplane) format for storing fax images.

BMP - This is the Microsoft Windows bitmap format, also used in OS/2. It's a fairly compact (compression is optional, but usually turned on) format for images up to 24 bit. BMP is the native bitmap format for the Windows environment.

CALS - Computer Aided Acquisition and Logistics Support Raster Format; a longwinded, seldom-seen military-spec two colour document storage format. Used in Pentagon archives, and that sort of thing.

CAM - Casio Camera, the native file format of Casio's QV-series digital cameras.

CGM - Computer Graphics Metafile, an American National Standards Institute/International Standards Organization metafile format for images of pretty much any kind.

CLP - This is the format you get when you save a file from the Windows 3.x Clipboard. It is very, very large, and very very, inefficient - and, what's more, you can only view a CLP file if you're in the same resolution as the person who made it, and are using the same number of colours. CLP is an image format that should never be allowed to touch a disk. Do not use it.

CT - The most popular of the Scitex image formats, Scitex Continuous Tone images are very large and intended for use with Scitex's professional film-printing units, which produce high-grade output for publication.

CUT - The orphaned 256 colour format used by the old Doctor Halo paint program.

DIB - This is an orphaned Windows image format. It stands for Device Independent Bitmap and was part of Microsoft's Great Plan for Windows 95; the DIB code in Win 95 is designed to simplify the creation of display drivers for new video cards by doing most of the grunt work in the operating system instead of in the driver. DIB never really took off.

DLG - Digital Line Graph, a vector format for storing geographical data.

EPS - Encapsulated Postscript is a flavour of Postscript (see below) which can be included in other documents - if your software supports it.

FPX - The FlashPix format, codeveloped by Hewlett-Packard, Kodak, Microsoft and LivePicture Corporation and now an open format administered by the Digital Imaging Group. Kodak uses it in all of their digital cameras from the DC200 onwards. Flashpix's chief claim to fame is that it stores images in multiple resolutions, so a huge, high resolution image can be quickly displayed in miniature on-screen and changes made rapidly to the displayed data only, saving the CPU-grinding full processing for whenever you actually view or output the high resolution version. Of course, this only works if your image editing program supports it, and is not useful for small images. FlashPix images can also be used for Web graphics, because the server only has to send the data being viewed (which seems to the browser like an ordinary JFIF), but since FlashPix doesn't support progressive display like JFIF or GIF or PNG, it hasn't achieved much popularity. FlashPix also has no zero-loss compression option - it either uses no compression at all, and makes a vast file, or uses medium-loss JPEG-type encoding. This makes it a clumsy format for professional use, since lossy compression is a no-no for image editing.

GIF - Graphics Interchange Format (the acronym's officially pronounced "JIF", by decree of the format's creator) is a very efficient, and still quite popular picture format. There are two "flavours" of GIF, the old 87 and the newer 89a. 89a adds several extra features like transparency (so background graphics can "show through" the GIF in places) and animation. GIF animations are a very - some would say excessively - popular form of Web multimedia, because they're small and display on all current graphical browsers without needing a special plug-in or taking up much CPU time.

Unfortunately, GIF pictures can only have 256 colours, or 256 shades of grey. 256 greys is photo quality so GIF is fine for any monochrome image, and 256 colour looks OK for many pictures, but it's no use for professional imaging.

GIF images can also be interlaced, so that you can see a low resolution version of the picture before downloading very much of it. GIF interlacing has four passes, which show one out of every eight lines, then another eighth of the image, then another quarter, then the remaining half. GIF is a data-stream type format, like JFIF, so you can view partially downloaded images whether or not they're interlaced - without interlacing, a 25% downloaded picture gives you the first 25% of the lines, starting at the top.

HRF - Hitachi Raster Format, an obscure, proprietary, one bitplane format used for storing scanner data.

IFF - This is Electronic Arts' Interchange File Format, and is the image format used by Amiga and Atari ST personal computers. There are multiple IFF formats, but by far the most popular are the image and sound file ones. A file with the .IFF suffix may, therefore, be a sound, not a picture - and it might be any one of a number of other types of data. IFF images may also, uncommonly, have the suffix .ILBM, for InterLeaved BitMap, or just .LBM on DOS-based systems.

IFF pictures are not at all efficient, spacewise, but they're fast to display, which was important for poor little Amigas with a 0.7 million instruction per second (MIPS) processor. With current PCs steaming along at hundreds and hundreds of MIPS, this no longer matters at all.

IFF is peculiar in that it has two odd variants - HAM and HAM8. HAM stands for Hold And Modify, and is a technique the original Amiga designers came up with for getting 4096 colours from hardware which, traditionally, can only display 32 at once. HAM8 is the updated version, which displays 262,144 colours on 256 colour hardware. No non-Amiga computer can display HAM images exactly as they're meant to be seen, but some conversion programs can display them as 256 or higher colour images. If your display program isn't smart enough to do this, it'll assume it's loading an ordinary 32 or 256 colour image and give you a distinctive multicoloured porridge on screen. There are some very strange IFF variants which use whole different palettes on every line; pray you never meet one.

All IFF images can be compressed or uncompressed; just about all are compressed. The compression, like the whole format, is built for speed, not efficiency, and so doesn't reduce the size much.

IMG - This is the format used by the old GEM Paint program; it only works in 256 shades of grey.

IMG - See "PIC".

IMJ - A proprietary variant of the JFIF format created by Pegasus Image Corporation.

JBG - Also suffixed JBIG, this is the Joint Bilevel Image Group's data compression and transmission format.
JBG is a way of sending one-bitplane document images so that a low resolution version arrives first, then extra data to "fill in" more and more detail. Not an image format as such - a JBG "file" is just a JBG data stream dumped to disk.

JFIF - The JPEG (Joint Photographic Experts Group) File Interchange Format, commonly called JPEG and with the filename suffix .JPG, can be the most efficient image storage method of all - at a price. First to the name. Everybody might call these images JPEG, but that just describes the type of compression used for the data; it doesn't describe how the compressed data is sorted and stored. Calling JFIF "JPEG" is like calling a Ford Falcon "internal combustion".

The idea of JPEG is that as it compresses the data it throws some of it away - technically, this is called "lossy compression". You can configure how lossy you want your JFIFs to be (well, you can if you're using even a slightly well written JFIF saver); 100% quality gives you almost exactly the same result as the original picture but also gives you a gigantic, uncompressible file. 10% quality takes up much less space but looks dodgy. You have to strike a balance.

JFIF can store up to 24 bit colour, so it's suitable for professional use, and it can do interlaced display like GIF (called "progressive" JFIF), which along with its small file sizes makes it the standard format for Web graphics. Like GIF, JFIF is a data-stream format - you can view images before you've got all of the data. Also like GIF, JFIF supports interlacing.

The JFIF format also supports CMYK (process colour - Cyan, Magenta, Yellow and blacK in a subtractive colour model, as against the additive Red, Green and Blue more commonly used) images, which makes it suitable for use in publishing applications. CMYK this support was added in a later version of the standard, though. This means that quite a few JFIF display applications, including Web browsers, do peculiar things when fed CMYK images. There's no reason to use CMYK JFIFs unless you're sending the image to a CMYK output device, which a monitor definitely isn't. Usually, CMYK ones get through because someone's converted a CMYK image of some other format, like TIFF, without changing the colour model.

JPG - See JFIF and SPF.

LBM - See IFF.

MacPaint (3k) - Usually suffixed .MAC, this is the format used by the ancient original black and white Macintosh paint program. Two colours only, 576x720 resolution only, thankfully rare.

MNG - The proposed Multiple Network Graphics (pronounced "ming") format is a multi-image extension of the existing PNG format - or it will be, if it ever makes it out of the design stage.

MSP - Microsoft Paint was the early PC answer to MacPaint, and its format is just as boring. Two colours only.

PCC - see PCX.

PCD - Kodak's PhotoCD was going to set the world alight, with happy snappers having their film scanned and the high-resolution images written to CD, to access via PC or special PhotoCD players. Amazingly, it turned out that nobody was very interested in viewing their photos on their TV, and PhotoCD flopped miserably in the consumer market. It survives as a somewhat popular professional image storage format; a genuine PhotoCD has a particular directory structure containing the images, stored in five resolutions. An ordinary PCD file can be read by any application that can read the format, but unless it's on a CD with the right structure, a PhotoCD player won't recognise it.

The PhotoCD storage process is proprietary to Kodak, who no longer sell the software to make full multi-resolution images.

PCX - The ZSoft Paint format, occasionally suffixed .PCC, is ancient but still fairly widely used, simply because everybody understands it. There are three common versions, 0, 2 and 5; 0 is the original two colour one (small but not useful), 2 only does 16 colours and is hence also of little interest to owners of rather old video cards, and 5 does 24 bit. All are large for what they do, but fast to load on elderly computers. PCX is the IBM equivalent of Amiga IFF. The size listed is for v5, at full 24 bit; v2 scored 216k and v0 48.1k.

PIC - A few proprietary (one company makes software that supports them, and nobody else does) image formats use this suffix. They are not interchangeable. Some programmers need a good slapping. PIC is most likely to be the 256 colour format of the old PC Paint program, but it might also be a Micrografx Draw! vector file, a Lotus vector file, a Pegasus Imaging Corporation image file or an image file for General Parametrics' Video Show Film Recorder.

PICT - Pict is the all-in-one Apple Quickdraw metaformat. It can include bitmapped or vector images, and can use different compression schemes.

PNG - The Portable Network Graphics format, pronounced "ping", was created as a free replacement for GIF, whose LZW compression is owned by Unisys and which can't be included in commercial software without paying license fees to the owners. It handles 1 to 48 bit images, and is a lossless, well-compressed format like GIF. It still isn't very popular, though.

PS - Adobe Systems' Postscript isn't an image format, per se - it's a page description language, originally conceived so computers could send very accurate page descriptions to the then-new high resolution laser printers. You can save black and white or even colour pictures as Postscript, but you'll end up with a very large file. Postscript is not a very efficient format, but its advantage is it's all plain text - you can modify a Postscript file with any text editor, if you know what you're doing.

PSD - Adobe Photoshop's native format, which stores all of its layer and selection and miscellaneous other image data.

RAS - This is SUN Raster format, the default image format for monster SUN workstations. Only lighhtly compressed and so a rather large format, but it supports up to 36 bit images.

RAW - This may be a Photoshop RAW file, which is a PSD file with no identifying header. Or it may be a minimally formatted image data dump - see PIC.

RGB - See "PIC".

RIX - The orphaned bitmap format of the old DOS ColoRIX paint program.

RLE - This is an antique CompuServe or Windows Run Length Encoded compressed image format, which only support 256 x 192 black and white images.

RTF - Microsoft's Rich Text Format, which is normally used as a well-understood cross-platform word processing document format, but which can store pictures as well as text. As image storage formats go, though, this one's as bloated as Postscript.

SPF - SPIFF, Still Picture Interchange File Format, the "official" International Standards Organisation Joint Photographic Experts Group (ISO JPEG) image format defined in the recent Part 3 extensions to the JPEG standard. SPIFF offers more features than the current JPEG standard and is backwards compatible (a JFIF decoder can understand most SPIFF images), but has not yet achieved much popularity. SPIFF files may also be suffixed .JPG.

TGA - The real name for this format is just plain "TGA" or "Truevision File Format", but a lot of people call it "Targa", after the Truevision video card that first used it. There's a lot of this name confusion in image file formats. It supports 1 to 32 bit images and professional features like an alpha (mask) channel, gamma settings and a built-in thumbnail image.

TIF - TIFF (to give the full acronym) stands for Tag Image File Format; many people say Tagged for the first word, which is technically incorrect but minimally important. TIFF was a large, unwieldy, 24 bit format until version 6 came out, which supported compression and made it less painful. Mind you, the fact that its compression was somewhat broken and might or might not be compatible with different programs on different computers somewhat reduced the bonus, and the further fact that the compression is LZW and thus owned and licensed out by Unisys (see GIF) is another pain. TIFF is, nonetheless, a very popular professional graphics format.

WMF - This is Windows Metafile format, which is an intermediate vector format for Windows programs to use when interchanging data and, generally speaking, should never be seen anywhere else.

WPG - This is the WordPerfect metafile format, used by WordPerfect software on various platforms. It supports bitmapped, vector and Encapsulated Postscript data.