Monday, June 15, 2009

What I learned this week.......

Wow...Looking at all these numbers for resolution and pixels makes me a little crazy. In a nut shell, I believe I have all the information I need to resize a picture file. Looks like I will be using a little trial and error in my upcoming exercises.

Dpi(dots per inch) vs ppi(pixels per inch)...they are not the same. It is important to know the difference. Dpi is the number of dots per inch that your printer will print on paper. Ppi is the numbers of dots per inch on your monitor. The article in Diigo for scanning tips went on and on forever. Wow, information overload here.

Chapter 9

Color Schemes, Color is good tastefully done. Contrast is also good. You may have to do a little experimenting. CMYK the four color process for graphics on the web.. Cyan, Magenta, Yellow and Black. RGB indexed color....Red, Green and Blue, a limited palette with a maximum of 256 colors. Onto Bit Depth, or pixel depth, or bit resolution. A bit is one electronic pulse. The higher the bit graphic measurement, the more colors are available.

Monitor resolution.....When pixels are smaller everything on the screen is smaller, which makes them look like a better quality. The more colors in your graphic the better it will look. The less colors, will appear to be at a lower resolution. The higher the bit depth, the larger the file. The browser safe or web-safe colors was a big problem in the past, but with newer technology, it is not as big of an issue, unless the people who will be accessing the images are using very old monitors. According to the book, the web-safe colors are not always the prettiest colors. To work around that problem, you can try mixing two colors together.

Chapter 10 - Graphic Definitions
  • native file format is the format native to or natural to a particular program. (i.e. Excel .xls)
  • graphic file formats used on the web - gif and jpeg
  • pixel based - bitmap, paint, raster (applications that use paint brushes and erasers)
  • math based - outline, object oriented, draw, vector (applications that draws shapes with a handle.
  • anti-aliasing - smoothness of the edge of a graphic
  • image map - a graphic with several links attached to it
  • server-side image map - dependent on the server doing the work
  • client-side image map - as easy to create as any other link
  • alternate label - allows a visitor of the web site to see the label as the web page loads
  • thumbnails - a thumbnail sized version of a picture
  • orphan page - a thumbnail enlarged with no additional information (boring)

Chapter 12 - Readability vs. legibility

Make sure the text is readable and legible. You can break rules when it works for you.
So much to think about. Cross platform fonts, proportional vs monospaced type, cascading style sheets, CSS Codes and Syntax. I am starting to see just how complicated web design is.

Now I need to discuss the attaching of a picture to a web page, blog or e-mail without make any adjustments to it. To be honest I did that a few times myself. I soon learned that files were too large to attach to e-mails. They were good quality, you just couldn't send them anywhere.

5 things you should do to an image to make it web ready.......

  1. Crop the picture - get rid of any part of the picture that may not be needed.
  2. Resize the picture by reducing the numbers of pixels - do not overwrite the original picture
  3. When reducing a file size, enable the aspect ratio to protect the picture from being distorted.
  4. Save file as a jpeg file (suggested for photographs)
  5. Set compression level to medium or high range
  6. Do not exceed 100 KB per Web page for the total of all pictures on the web page

No comments:

Post a Comment