6/3/2011 GRC 119. Bitmap vs Vector Graphics. Computer Graphics Review. RGB color model with pixels. Bitmap (Raster Graphic) RGB color model

Transcription

1 Computer Graphics Review GRC 119 Bitmap vs Vector Graphics Review of basic concepts learned in GRC 103 Overview of general computer graphics terminology Review of Photoshop, Illustrator Review of scanning concepts HTML introduced Bitmap/Raster Image is composed of pixels Each pixel can represent a dif color Not ideally up-sizeable or scalable Used in painting programs like Photoshop Vector Image is determined by a mathematical algorithm Vector graphics are composed of paths Uses mathematical relationships between points and the paths connecting them to describe the image Scalable (up-sizeable) Used primarily in drawing programs like Illustrator Pen tool can be used to create custom vector shapes Bitmap (Raster Graphic) Made up of pixels Pixels are the smallest element of resolution on the computer screen A pixels is often referred to as a dot but is actually square Each pixel is represented by a shade of color Bit depth determines the possible shades of color available A bit depth of 4 (2 to the 4 power) = 16 colors possible 8 bit color (2 8 = 256 colors) 24 bit color (2 24 = 16,777,216 colors) Recommended color mode for screen output is RGB Recommended color mode for print output is CMYK RGB color model with pixels Each pixel's color sample will have three numerical RGB components (Red, Green, Blue) to represent the color Pixel color is made up of three projected colors of light that mix together optically RGB color model Screen-based color for screen delivery RGB color is additive, meaning that mixing all the colors creates white The RGB color space was created for computer graphics to be viewed only onscreen Projected light colors are red, green blue Bitmap problems Bitmapped Image aliasing can be a problem when using bitmaps Aliasing Jagged edges (aka stair-stepping) can be apparent when there are diagonal lines or curves in the image Anti-aliasing Attempts to smooth out the rough edges by blending edges by adding the appearance of a shadow to hide sharp edge Mixed together these three colors create a color space called RGB 1

2 Photoshop "bitmap" or "raster graphic" image editor used for creating, modifying and outputting digital images of a photographic nature, manipulates individual color pixels within a fixed bitmap. also referred to as a painting program. Continuous tone images (like jpg or photo quality images) are edited in Photoshop. Adobe Illustrator "vector-based" drawing program Vector graphics are composed of paths You draw a path (line) by creating two anchor points There are two types of anchor points: Corner (makes a straight line) Curved (makes a curved line) You can create a shape by adding additional points and paths You can use the pen tool to create anchor points Bezier Curves Vector to bitmap You can create a curved line by generating curved paths (Bezier curves) connected by modifiable (curved) anchor points. anchors, with their handles are editable, and never "leave" the file. The process of changing a vector graphic to a bitmap image is called rasterization converts the graphic's paths into pixels. Pulling and moving the handle on a curved point determines the curve that is produced between two points. You should know and be comfortable with how to use the pen tool in Illustrator and Photoshop. Take time to continually practice with the pen tool in order to perfect your pen tool skills. RGB color model What you see (as far as color on your screen) is not always the color that others will see on their screen Unpredictable color differences due to monitor settings and calibrations RGB color model Macintosh images typically appear darker on Windows systems due to gamma settings Gamma settings Windows ~2.2 vs Mac ~1.8 Calibration is how your monitor displays images No universal calibration model for screen-based color There are tools and programs used for calibrating monitors 2

3 Hexadecimal-based colors Hex value is used for defining color in HTML and can also be used in popular graphic programs Hexadecimal values are based on base-16 mathematics Graphics editors simplify this by showing us the color swatch to choose from without us having to know a Hex number Hexadecimal-based colors cont. Hex value starts out with # Sample hex value #aaffqq In HTML there are 17 standard color names that can be used instead of the Hex value, these names give us only basic colors like Black, Blue, Red, White, Yellow, etc Programs like Photoshop let you pick colors using different values like Hex, RGB, or CMYK Scanning When scanning, set the ppi to your desired scan level/quality ppi dots (pixels) per inch Image size, quality, and file size varies with scanned ppi resolution ppi is typical for scanning, depending on desired quality setting Use RGB color mode for screen output Each pixel's color sample will have three numerical RGB components (Red, Green, Blue) to represent the color If the web or screen will be the final output then 100 ppi is recommended Most monitors display at approx 100ppi 300 ppi is good for high quality archival Scanning Recommendations Using Photoshop Open Photoshop (If possible use Photoshop to scan image ) File>Import (look for scanner or driver name) Set scanning preferences Set ppi to approx 300ppi Select ppi based on desired quality/use Preview Scan Crop image Scan image Save in Photoshop (recommended you save as a archive file.psd format) Photoshop image export for web Set resolution to approx 100ppi for screen output File>Save for Web Recommended select JPG or PNG for photographs, images, gradients (over 256 colors) GIF is available for line art, text, simple logo (up to 256 colors) Click on Save Native Photoshop file is.psd Exporting out of Photoshop to a common image format flattens the exporting image file (flattens all layers).gif good for flat, solid colors. Contains only up to 256 colors, limited color range. Good for type, line art, and images with sharp edges. Bad for gradients or photographs..jpg good for continuous tone images such as photographs or an image that contains a variety of shades, gradients, or blends. No transparency options..png also good for continuous tone images such as photographs, newer file format, combines the best of the two original common image formats and allows for transparency. 3

4 Image compression types Lossy Some image data is lost or thrown out in exchange for making the file size smaller (compressing). Jpg uses lossy. Lossless allows the exact original data to be reconstructed from the compressed data. File size becomes smaller but not as small as jpg. Png uses lossless. Transparency options There are options available to preserve transparent parts of an image Transparent parts appear as grey/white checkerboard in a Photoshop background When saving for web save as transparent ping or gif and select the transparency option Preserves the transparency in the original image or allows you to define the color which should be used for transparency Web safe colors/palette myth Old, web safe colors are no longer used. The only reason to use the web-safe palette is if you have a concern that your Web design work will be viewed from a 256 color (8-bit) computer system, extremely rare. The web/browser-safe Palette only contains 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use. Web Graphics File Formats The three most popular image file formats for Web JPG GIF PNG Should not be used to remap color photographs. Web Graphics Resolution Recommended setting for web graphics being viewed on screen 100 ppi dots (pixels per inch) Use pixels as your standard unit of measure when working in editing programs such as Photoshop and Illustrator When scanning you may want to scan at a higher ppi if you plan on using a high resolution or needing a large image or for print output Web Graphics Compressed File Formats.jpg Photographs, gradients and textures with more than 256 colors Uses lossy compression, throws out data. No transparency..png Originally meant to replace GIF Includes most features of GIF and JPG 32 bit color transparency, alpha transparency Not supported in very old browsers Uses lossless compression no data loss yet compressed.gif Simple logos, text, and line art. Limited to only 256 colors. Supports transparency GIF format supports GIF animation aka. Animated GIF Uses lossless compression no data loss yet compressed 4

5 Dithering only used with gif Creates the illusion of additional colors by positioning different colored pixels in order to simulate a color that does not exist on the 256 color palette Avoid dithering when possible Increases the file size slightly Diffusion only used with gif Helps simulates shades of colors for 8 bit 256 limited color display Produces a less obvious result while maintaining a small file size Higher percentages of diffusion do a better job of simulating shades of colors Can help when displaying gradients for gif images Gif animation Animated format using the gif image file format Allows you to create a simple animation with a gif image Suitable for web, no plug in needed for viewing of animation, plays within browser Web files overview The web has become a very common way for publishing files Need to understand URL addresses Relative vs Absolute images/links Photoshop enables you to build animation and save in the animated gif format Rarely used anymore, not recommended, Flash is a better file format that requires a plug-in but offers more options URL Uniform resource locator, URL Web address for an online file Important concept of web files Absolute path (absolute path to web URL location) For example Relative vs Absolute images/links Relative path (relative to wherever you are) For example /images/i.gif (reads look for a folder called images and inside the folder find file i.gif) Absolute path (absolute path to location) For example 5

6 Files, Folders & Directories Another important concept of files and web Files such as online web pages and online images are stored in directories A directory is another name for a folder on a web server Within directories we can have folders Folders can have sub folders Must keep highly organized when creating websites Organize your content into logical folders like an images folder Client server computing Client is the one viewing or connecting to a remote file Server is where files are stored Client is the program like Internet Explorer being used to connect to your file like a webpage Each individual web browser is referred to as a client Server is the web server which serves up files such as webpages Creating a webpage using HTML tags A webpage is a plain text document and contains all the required HTML tags, and is saved with the.html file extension Tags can be typed in TextEdit or any plain text editor like Notepad but document is saved using.html file extension like anyname.html Most HTML tags come in pairs and have opening and closing tags. Tag example shown below. <p>a paragraph goes inside here</p> Tags are used to markup text to have a desired format Minimum Required HTML tags: (case sensitive in newer HTML, must go in this order!) <html> <head> <title> </title> </head> <body> Most content goes in the body </body> </html> Dreamweaver Dreamweaver is a software program used to author webpages and very useful as a Website management tool, aka wysiwyg editor, what you see is what you get We will learn more about HTML during the semester. This concludes our CG Review. Please bring up any questions if at this time if you do not understand any of the basic computer graphic concepts we have reviewed. DW has a built in FTP program FTP used to connect to a remote web server that stores your web files. FTP, stands for File transfer protocol You must first define your sites (within Dreamweaver) on each machine you author on before you can FTP into a remote site 6