Week 01

Week 01- Topics

Introduction
Syllabus
Domain name registration
Web hosting
The Internet
Web file naming conventions
HTML review
Project file structure
Web graphic formats
Image compression using Photoshop
WordPress
Careers in Web Design

Welcome to our first class
.
  • Please be sure you have read through the Introduction page located on this site. (FYI: it is the same information as the Introduction section on the class smconline.org site).
  • Also, make sure you have read through the Syllabus for this class. The syllabus is located in the “Syllabus” section in the main navigation of this site.
  • Be sure to read and look through the rest of the pages on our class website.
  • If you have any questions about the introduction information, the syllabus, or anything else regarding general class questions, please post the question either in the comments area below or in the discussion section of the smconline.org site.
Assignment 1

Here are your assignments (due next week by noon, Tuesday, February 22).

READ

1. Read ALL of the class notes for Week 01. (Obvious, right?)
2. Options to Consider When Looking for Stock Photos: Free vs Paid Solutions
3. 100 Must Read Design Blogs

WATCH

1. My video on File Structure. You can watch it here: http://www.youtube.com/everythingaboutweb#p/u/20/jMzSROMPROQ
Or download it.
You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). You’ll need QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

2. Video about Setting up WordPress: http://wordpress.tv/2009/01/05/signing-up-with-wordpresscom/
3. Video introducing you to the WordPress Dashboard: http://wordpress.tv/2009/01/05/the-wordpresscom-dashboard-introduction/

EXERCISES

1. Create an HTML page using all 20 of the tags outlined in the class notes below.

Please create a simple HTML page with images and text. I’d like you to create a biography page that tells me a little about your self. The purpose of this assignment is for you to demonstrate basic skills building an HTML page. Please be sure to use all 20 of the HTML tags outlined in the class notes. In this assignment you should demonstrate the following:

  • An understanding of the basic structure of an HTML page.
  • An understanding of how to use the tags outlined in the class notes.
  • In particular, I want you to demonstrate a skill in inserting images and links into a page.
  • An understanding of correct file structure.

You can use Notepad, TextEdit, Dreamweaver (if you have basic skills in this application), or any other HTML editor you choose. When you have completed the assignment, please upload the project folder (be sure your file structure is correct or you will be asked to re-do this assignment) as a zipped file to the drop box located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the drop box. Please name your file: assignment1_yourlastname. Please upload your zipfile to the “Dropbox” on smconline.org site by noon on Tuesday, April 26.

2. Sign up for WordPress. Post the URL to your WordPress blog in the comments section below.

Sign up with WordPress.com and start your blog for this class. Be sure to view the videos posted in the WATCH section for more information on how to do this.

WRITE

Post to your WordPress blog, your thoughts about the following:

1. List 3 of your favorite Web sites and tell me why they are your favorites. What is it about each site that make you want to visit it frequently?
2. What do you like best about Web Design? After reading the possible careers in web/interactive described in the class notes below, where do you think you best fit into the field?
3. Referring to the blog post “100 Must Read Design Blogs,” select a blog of your choice, read an interesting article and post a quick summary and your thoughts about it to your WordPress blog.

ADDITIONAL RESOURCES
.
Let’s get started with…
Posting a Web site “live”

To start off our class, I’d like to give you information about the process for posting a web site live to a server. If your goal is to design, build, and post web sites for clients (or yourself), you must understand there are two main “services” you have to purchase in order to post a site live.

Here are the two “services” you’d need to purchase in order to post a site live:

  1. Domain name registration: registration of domain name you’d use for your site. (i.e – yourname.com)
  2. Web Hosting: purchase of server space at a web hosting company.
Domain Name Registration

The first step is to determine a name for your web site. You can check to see if a particular domain name is available using a “Find a Domain” feature on a web site like Network Solutions. The “Find a Domain” feature is on the left-hand side of the Network Solutions home page. Here you can input a potential domain name to check if it is available.

Note: In order to have access to a server you should register your own domain name and purchase a web hosting plan. This is a requirement for the class, I recommend students set up their own web site. I find many students are interested in doing so and, if you are interested in securing clients in the future and designing web sites professionally, you will need your own web site and server space.

I have provided the following information for students who are interested in securing a domain name.

  • I recommend domain registration with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, you may want to consider Network Solutions or Go Daddy.
  • The big difference between Network Solutions and Go Daddy is price and service.
  • Registering a domain name with Network Solutions costs $34.95 for one year. Network Solutions has excellent customer service and has been around a long time.
  • GoDaddy is more economical. You can register a domain name for $7.49 for one year. (Three months is the minimum purchase length and costs $1.99 a month) GoDaddy’s customer service has been impressive recently. (I’ve been told they send both a follow-up email and call new customers to answer questions.)
  • Feel free to register your domain name at a different company than the two given above. I’d recommend you make sure the registrar you’ve chosen is ICANN-Accredited and you know someone who’s had a good experience with the company.
Web Hosting

In addition to securing a domain name, you will need to purchase a web hosting plan so you have your own server space. Both Network Solutions and GoDaddy, (and other web hosting companies), may attempt to sign you up for additional add-on services. Rarely will you need to add additional services to your web hosting plan. All you’ll need is a domain name and a basic hosting package. Beware of the multiple attempts companies make to sell add-on services when you order your domain name and web hosting. If you want to get started slowly without committing to a 12-month hosting plan, the 3 month minimum plan through GoDaddy might be a good choice. Network Solutions offers a one year basic hosting plan for around $95.

I recommend you choose the Linux/Unix platform rather than Windows for your web hosting. (Unless you need language support for ASP.NET, then you should probably go with a Windows server).

Remember to stay clear of the multiple attempts companies will make to sell other add-on services when you order your domain name and web hosting.

Here are some other features you should be aware of:

Disk space:
Total amount of usable space that you are allotted on hosting company servers. You will only need 300 – 500 MB…. at GoDaddy you get 5 GB with the Economy Plan. If you plan to incorporate a lot of video in your site, it is good to have at least 1 GB of disk space.

Data Transfer/Bandwidth: This is the total amount of data that you can transfer to or from your web site. Below is an example of how many times a page would need to be viewed in order to reach 10 GB of transfer:

Page size 30 kb: 699,050 views
Page size 40 kb: 524,288 views
Page size 50 kb: 419,430 views
Page size 60 kb: 349,525 views

Therefore, most web hosting plans offer plenty of bandwidth.

When signing up for these services, you’ll be asked to specify a password and be given a login name. Please make note of all login and password information, You might be given a separate login and password for your domain registration and for web hosting. You’ll need this information to login onto your server. Please write everything down and keep any confirmation emails you receive from the companies in a place where you can find them.

Note: You are welcome to use any of my recommendations above. If you have someone you trust who has recommendations, or if you have purchased a web hosting plan already, or can do it by yourself, I encourage you to follow your own direction. It’s always good to do as much research as possible and to ask around. In no way are you required to follow any of my recommendations.

How the Internet Works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers

The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

• Server software runs on the server machine
• The web site files are on a hard disk attached to the server
• The server software formats and delivers each web page element based on HTTP requests
• Elements are delivered to many clients at the same time
• A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
• A web page is composed of many elements, therefore each page accessed generates many hits
• Hits vs. page visits vs. site visit

Clients

The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.
• The web browser runs on the client
• The client requests elements from the server
• It receives and “parses” the elements delivered by the server
• First reads the HTML
• Formats the page, and displays the text
• Gets additional elements (images, audio, etc.) specified in the HTML
• Displays additional elements
• Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
• Runs client-side software (JavaScript, Java, plug-ins)

Composition of a web page

A web page is composed of the following elements:
• The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
• Elements that come from the same server where the HTML files is, or from a different server
• Image files (.gif, .jpg, .png)
• Audio files (.mp3, .au, .ram, .mov)
• Other multimedia objects (QuickTime movies, Flash, Real, etc.)
• JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

  • Can you find the .jpg and .gifs images? Where are they located?
  • What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
  • Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

Additional Resources

From the “How Stuff Works” web site: How Internet Infrastructure Work

Web file naming conventions

When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in Dreamweaver, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.

For the web page file names, be sure you use “index.html” (or “index.htm”) for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files.

Other HTML files should have meaningful names such as products.html or about_us.html, rather than convenient names such as page1.html. Name your files as if you giving the web site to someone else to work on, and who won’t be able to ask you any questions about it (for example, you 6 months after the project is finished when you can’t remember anything about it).

Web file naming rules

• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

And again, it’s critical that you name your files correctly from the start. If you attempt to rename your files after you’ve created your site, you will, in all likelihood, break all the links in your web pages.

HTML Review

Why learn HTML?

Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons:

  • Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
  • You will become a better web designer. Learning HTML and how a web site is built will give you the advantage of understanding how to design a better site for your client.
  • You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won’t be able to do this.
  • If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.
HTML
Markup, the basis of every page

HTML and XHTML are markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to markup the various different types of content in documents, specifying what each bit of content is supposed to be rendered as in web browsers (for example headings, paragraphs, tables, bulleted lists etc.) As you’d expect, elements define the actual content type, while attributes define extra information about those elements, such as an ID to identify that element, or a location for a link to point to. You should bear in mind that markup is supposed to be as semantic as possible, i.e.– it is supposed to describe the function of the content as accurately as possible.

Figure 1 shows the anatomy of a typical (X)HTML element.

A typical HTML element

Figure 1: Anatomy of an (X)HTML element. Read Figure 1 description

With that in mind, just what is the difference between HTML and XHTML?

What is XHTML?

The “X” in XHTML means “extensible”. One of the most common questions for those starting out is “should I be using HTML or XHTML, and what the heck is the difference?”. They pretty much do the same thing; the biggest difference is in the structure. For now, we’d recommend that you don’t worry too much about whether you are writing HTML or XHTML. Use an HTML doctype (see article 14 for more on doctypes) and you shouldn’t go far wrong.

XHTML Introduction

XHTML is a markup language that has replaced HTML. It incorporates a web technology called XML that makes web pages more flexible and the content in the pages accessible like a database. Some rules to follow to make your code compatible with XHTML:

  • all your tags and attributes should be lowercase
  • all tags must be closed–for example, a paragraph tag <p> is not allowed without a corresponding closing paragraph tag. </p>
  • for tags such as the line break and image tags, they must end with a space and slash. e.g. <br />, <img src=”image.gif” />
  • all tag attributes should be quoted. For example, in this tag , <body bgcolor=”#FFFFFF”> the background color must be quoted.

For more information see: http://www.w3schools.com/xhtml/default.asp

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic XHTML

A simple example of a web page

<html>
<head>
   <title>HTML Example</title>
</head>

<body>
   Some text for a web page that demonstrates the basic form of HTML in a web page.
</body>
</html>
Reminder about Creating a webpage using TextEdit
  • Using Apple’s simple text editor called TextEdit (found in the Applications folder on your computer), type in the HTML for the “Good HTML” style above. Do not copy and paste the html–you will only learn if you actually type in the code!
  • Very important– when usingTextEdit, be sure to make the following change: under “Format” > “Make Plain Text.”
  • Also, be sure to make the following changes in the Preferences in TextEdit. Open Preferences and
    Under “New Document” > “Format” > select “Plain Text.”
    Under “Open and Save” > Under “When opening a file” > select “Ignore rich text commands in HTML files.”
  • Save the file with the extension .html in order to view it in a Browser application such as Firefox or Safari.
HTML – Basic Tags

For the HTML tags below, please be sure you understand all 20 tags outlined in the notes below. You will need to use these tags in your Assignment for next week. This should be review for you, but if you need to refresh your memory or re-learn how to use these tags, be sure to take the time to do so. Remember, if you have any questions on how to use the tag, please take a look at the example located here:

Link to HTML Example directory

Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see example). If you view the source of the example page, you can see exactly how the page is coded.

1) background color

inline

<body bgcolor=”#000000″>

css

body { background-color: #000000;}

2) background image

inline

<body background=”images/an_image.gif”>

css

body { background-image:url("images/an_image.gif"); }

use this image as the background image (control-click to download it):
an image

3) Heading styles
<h1>The biggest heading</h1>

<h6>The sixth biggest heading</h6>

4) Line break
some text using a br with a line break at the end<br />

5) Paragraph
<p>some text in a paragraph, always has a blank line after it</p>

6) Bold and italic

<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br>
<strong>Some Bold Text AND <em>some bold and Italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

7) Horizontal rule
<hr />
<hr size=”20″ />
<hr width=”100″ align=”left” />

<hr width=”50%” />

8) Image
<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />

9) Links
A link to another web site
<a href=”http://www.nytimes.com/”>Link to the New York Times</a>

A link to a page within the website
<a href=”about.html”>Link to a the About page on this site</a>

A link that sends an email. Note that this won’t work right on the computers because they are not configure for email.

<a href=”mailto:jane@jane.com”>Email Jane</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href=”#lowerpoint”>Link to a location lower on this page</a>
<a name=”lowerpoint”>Some text lower on the same page</a>

10) Font

Special note:
We will NOT define our font styles inline in the body of the HTML file. In this class, we will define all styling using external CSS files. More about this later in the semester.)

inline

<font face=”Arial, Helvetica, sans-serif” color=”#ff0000″ size=”6″>this is some text</font>

css

body { font-family: Arial, Verdana, sans-serif; }
PC Mac
Arial Helvetica
Times New Roman Times
Courier New Courier
Verdana Verdana
Trebuchet Trebuchet
Symbol Symbol

11) Centering
<center>Using CENTER</center>

12) Indenting a paragraph, creates a paragraph and adds margin on left and right
<blockquote>some indented text</blockquote>

13) Bulleted list
<ul>
<li>this is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>

14) Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type=”i”>
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>

15) Preformated text allows use of extra spaces and line breaks to format your text

</pre> 

alskf asldk
     aslfk asldkf asdlk

         als faslfk alskfa sldk

            aksdf alsfk laskf alsdkf

     alskf asldk aslkf
als kfasdlk

</pre>

16) Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

<img src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>

17) Text colors
text=basic text color, link=links color, vlink=visited links, alink=link when mouse down

inline

<body text=”#ff0000″ link=”#003300″ vlink=”#000066″ alink=”#000000″>

css

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

18) Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>
<meta name=”description” content=”The New York Times on the Web”>
<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19) Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>

20) Linking CSS file to your HTML page

<link href=”styles.css” rel=”stylesheet” type=”text/css” />

Additional Resource

HTML Cheat Sheet

Project file structure


file structureWhen building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:

Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.

You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

Images on the Web

Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.

Downloading files

The following is an explanation of how to download files from this site. The download files will typically be in a format called ZIP. The ZIP format allows multiple files to be grouped together into one file for a simpler downloading process. In addition, the ZIP format compresses the size of the files so the download takes less time. This means that you will download one compressed file with a “.zip” file extension. You then decompress the files and put them on your personal disk.

You can decompress these files on Macintosh computers with the Stuffit Expander program. If you have a PC or Macintosh at home or work, you can get the following utilities for working with ZIP files: StuffitExpander for the Mac or PC, or WinZip for the PC.

Downloading files

  1. On the web page, click on the file to be downloaded.
  2. On most Macintosh systems, the file will be downloaded to the desktop. It may be decompressed automatically, or you may have to double click on it to decompress it, or you may have to open Stuffit Expander to decompress it.
  3. On the PC:
    1. When the dialog box comes up, click OK to “Save this file to disk”
    2. Then BROWSE your way to a directory on your Zip disk to SAVE the file
    3. Start WinZip and use FILE>OPEN (or the OPEN icon) and browse to the drive where you saved the file from the web browser.
    4. With the zip file opened in WinZip, select ACTION>EXTRACT (or the EXTRACT icon), browse to a directory on your disk where you want the files placed, and click on the EXTRACT button. Note that you do not have to select the files to be extracted.
    5. This will uncompress, separate all the files, and place them on your disk.

For practice, download and extract the compression_test.zip file here.

Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.

Web-safe colors

Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. In the past, web designers have used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)

But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).

To see a chart of all the web safe colors, see this page on the WebMonkey site

For more information about the percentage of users viewing the with with 256 colors, see Browser News

Basic image types
RGB images

RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

  • 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
  • 24bit = 16,777,216 colors
  • 16bit = 65,536 colors
Indexed images

Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

index palette

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

  • 8bit = 256 colors
  • 6bit = 64 colors
  • 4bit = 16 colors
  • 2bit = 4 colors
  • 1bit = 2 colors

Dithering

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

no dither dithered
Non-dithered image (2382 bytes) Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

  • Best for – Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
  • Transparency – Defines one color to be transparent
  • Animations – Format supports multi-frame animations
  • Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.
JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

  • Best for – Photographic images, complex images, images with soft edges
  • No transparency or animation
  • Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.
PNG format

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

About the PNG‑8 format

The PNG‑8 format uses 8‑bit color. Like the GIF format, PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

Because PNG‑8 is not supported by all browsers, you may want to avoid this format when you are distributing the image to a wide audience.

The PNG‑8 format uses more advanced compression schemes than GIF does, and a PNG‑8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image’s color patterns. Although PNG‑8 compression is lossless, optimizing an original 24‑bit image as an 8‑bit PNG file can subtract colors from the image.
Note: With certain images, especially those with simple patterns and few colors, GIF compression can create a smaller file than PNG‑8 compression. View optimized images in GIF and PNG‑8 format to compare file size.
As with the GIF format, you can choose the number of colors in an image and control how colors dither in a browser. The PNG‑8 format supports background transparency and background matting, by which you blend the edges of the image with a web page background color.


PNG‑8 with 256 colors and no dither (left), and PNG‑8 with 16 colors and dithering (right)

About the PNG‑24 formatThe PNG‑24 format supports 24‑bit color. Like the JPEG format, PNG‑24 preserves the subtle variations in brightness and hue found in photographs. Like the GIF and PNG‑8 formats, PNG‑24 preserves sharp details like those in line art, logos, or type.

The PNG‑24 format uses the same lossless compression method as the PNG‑8 format. For that reason, PNG‑24 files are usually larger than JPEG files of the same image. You may want to avoid PNG‑24 format when you are distributing your image to a wide audience.

In addition to supporting background transparency and background matting, the PNG‑24 format supports multilevel transparency. You can have up to 256 degrees of transparency from opaque to completely transparent, so you can blend the edges of an image smoothly with any background color. However, not all browsers support multilevel transparency.

More information about the PNG format can be found here.

Image Compression using Photoshop

Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

  • web settings - gifShow and hide any layers to get the image you need
  • Determine the color of the web page background that the image will be displayed against
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
  • Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
  • Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
    Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
    Selective – Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
    Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
    Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
  • Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
  • Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
  • If you want the image to display while downloading,select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

  • Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
  • If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
  • Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.
JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

  • web settings - jpegShow and hide any layers to get the image you need
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
  • Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
  • Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
  • Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
  • If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Exercise

Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB.

Do the following for each image:

  1. Decide on the best format to use for this image: JPEG or GIF
  2. Decide on the smallest file size possible without compromising image quality
  3. Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG).
  4. Note the size of each file you create.

If you have taken my GrDes65 class you are already familiar with this exercise. Please be sure you understand how to optimize images for the web and let me know if you have any questions. I have added the topic “Image Optimization” to the Discussion area on the smconline.org site if you have any questions.

WordPress

I’m asking all of you to sign-up on WordPress.com to start a blog for this class. WordPress is a Content Management System (CMS). Below is a short video about WordPress (the version you install on your own server — more info can be found at WordPress.org). Note that we’re using the WordPress.com version of WordPress which is different than the version you install on your server.

There is also a good video about what is a CMS.

IFRAME Embed for Youtube
Overview of Web/Interactive Design Careers

It’s important to be aware of the different opportunities available within the web/interactive design world. Your focus as you continue to study web design is to get a better sense at what you are good at and what you enjoy doing. Here is a fairly comprehensive list of the options.

Web Designer

A web designer determines and develops the look and feel of sites and is responsible for site-navigation design and visual execution.

Web/Senior/Executive Producer

A web producer organizes web development teams and ensures adherence to budget, schedule and design of website development

Web programmer/Developer (back-end systems)

A back-end programmer works with web server systems and web databases, develops web queries to databases and programs web applications.

Web developer (front-end/interface systems)

A front-end developer uses HTML/ JavaScript/ASP/ColdFusion and other tools to develop static and dynamic web pages.

Interaction Designer

An Interaction Designer defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.

Information Architect

An Information architect creates the blueprint of the site upon which all other aspects are built – form, function, metaphor, navigation and interface, interaction, and visual design.

Content Developer

A content developer, also known as a web writer or editor, is responsible for the production and repurposing of text/graphic/ audio content on sites.

Mobile Designer

Mobile designers are the bridge between the end user and the engineering community. Unlike the web or mainstream design world, mobile designers cannot be simply visually or brand-oriented. It is mandatory to keep up to date on the latest technologies and handsets, maintain client and company education, and articulate the importance of authoring for one platform or another. Mobile designers need to be highly conceptual, understand the importance of brand, and yet maintain a close eye on the usability and end users’ specific needs.

http://www.gotomobile.com/archives/the-mobile-designer

SEO Specialist

SEO specialists, also known as SEO consultants or SEO optimizers, increase a website’s visibility and search engine ranking. SEO stands for Search Engine Optimization.

Social Media Specialist

A Social Media Specialist is someone with the skills who knows how to build and communicate with a community. A Social Media Specialist is always on the lookout for new ways to connect consumers and brands.

http://www.inc.com/guides/2010/08/how-to-hire-a-social-media-specialist_pagen_2.html

Additional Graphic Design Careers
Marketing /New business manager or directory

A marketing or new business professional is responsible for seeking business opportunities, developing proposals and marketing the firm’s practices.

Print Production Manager

A print production manager is responsible for overseeing the publication process from concept through production, including bids, scheduling, photography, 4-color press work, digital production and delivery. Print production managers are strong project managers, handling multiple jobs simultaneously. In some cases, proficiency in InDesign, Quark, Photoshop and Illustrator is desirable in this role.

Copywriter

A copywriter writes, edits and proofs promotional or publicity copy for print or electronic publications. At higher levels, copywriters are often responsible for strategic and conceptual development of messages and stories.

Print production artist

A print production artist has a working understanding of layout, type and color and is able to take instructions from a designer and create a complete layout, working proficiently in InDesign, Quark, Photoshop and Illustrator. Responsibilities also include producing final files that image properly to printer specification.

Entry-level designer

An entry-level designer is one to two years out of school and requires mentoring in all aspects of design conception and implementation.

Designer

A designer is responsible for the conceptualization and design of graphic applications such as collateral material, environmental graphics, books and magazines, corporate identity, film titling and interactive interfaces, to their completion.

Senior designer

The senior designer is responsible for conceptualization and design of solutions to their completion. In some firms, a senior designer directs the work of one or more junior designers, who generate comps and create layouts and final art. In some cases, senior designers do not manage staff but are designated “senior” because of their authority in design decision making.

Art Director

The art director establishes the conceptual and stylistic direction for design staff and orchestrates their work, as well as the work of production artists, photographers, illustrators, prepress technicians, printers and anyone else who is involved in the development of a project. The art director generally selects vendors and, if there isn’t a creative director on staff, has final creative authority.

Solo designer

A solo designer is a freelance or self-employed design professional
who works independently of a company and has no employees.

Creative/Design director

A creative director or design director is the creative head of a design firm, advertising agency or an in-house corporate design department. In all of these positions, key responsibilities can include the development of graphic design, advertising, communications and industrial design publications.

Owner, Partner, Principal

An owner, partner or principal holds an equity position and has major business responsibility for a firm with employees.



Comments

  1. Sofie April 18th


  2. Chris Manning April 21st


  3. Luis Mendoza April 22nd


  4. Ludwig April 23rd


  5. Kimberly April 23rd


  6. Katya April 25th


  7. Francisco April 25th


  8. Pat Shade April 26th

    Comment Arrow

    Here is my blog–I thought I submitted it last week, but it does not appear.

    shadesofla.wordpress.com


  9. Pat Shade April 26th


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66