Understanding Vector and Bitmap Graphics الصور النقطية والصور المتجهة
Graphic Bitmap Graphic A bitmap or raster image are comprised of pixels in a grid. Each pixel or "bit" in the image contains information about the color to be displayed. Bitmap images have a fixed resolution and cannot be resized without losing image quality. Most bitmap images can be converted to other bitmap-based formats very easily. Bitmap images tend to have much large file sizes than vector graphics and they are often compressed to reduce their size.
Graphic Vector Graphic Vector graphics are made up of many individual objects. Each of these objects can be defined by mathematical statements and has individual properties assigned to it such as color, fill, and outline. Vector graphics are resolution independent because they can be output to the highest quality at any scale. Vector graphics tend to have much smaller file sizes than raster-based bitmaps.
Graphic Bitmap Graphic :وهي تتكون من مجموعه متجاورة من النقاط او باألحرى بكسالت – البكسل هو اصغر نقطة يمكن عرضها على الشاشة -تكون فيما بينها شبكة مترابطة ويكون لكل بكسل لون معين .ويختلف عدد البكسالت التي يمكنك عرضها على الشاشة حسب درجة وضوح الشاشة ،من درجات الوضوح الشائعة 768×1024 وهذا يعني أنها تعرض 768بكسل طوال و 1024عرضا. وألن الصور النقطية تتكون من بكسالت متجاورة فهذا يجعل من الصعب تكبيرها أو تصغيرها دون أن تتأثر دقتها ،فمثال عند تصغير الصورة سيتم حذف عدد من البكسالت المكونه لها و على العكس عند تكبير الصورة سيتم زياده عدد البكسالت في الصورة ويعتمد لون كل بكسل من البكسالت المضافة على لون البكسالت المحيطه به . من أنواع الصورالنقطية : TIFF ، PNG ، GIF ، JPG من البرامج التي تستخدم في انشاء الصور النقطية : Adobe Photoshop The Gimp Corel Photo-Paint جميع الصور المأخوذة عن طريق الماسح الضوئي أو الكاميرا تكون صور نقطية .
Graphic Vector Graphic الصور المتجهة ال تتعامل مع البكسالت و بدال من ذلك فانها تتعامل مع الخطوط و تحفظ الصورة موقع واتجاه و سمك ولون كل خط ويتم رسم كل خط في الصورة باستخدام معادالت رياضية كما انها ال تعتمد على درجة وضوح الشاشة مما يعني أنها تظهر بأعلى درجة وضوح ممكنه بغض النظر عن درجة وضوح الشاشة على العكس من الصور النقطية. من مميزات الصور المتجهة امكانية تكبيرها او تصغيرها ألي درجة دون أن تتأثر جودة الصورة ،كذلك فهي ال تتطلب مساحة كبيرة عند تخزينها . من أنواع الصور المتجهة : AI CDR DXF من البرامج التي تستخدم في انشاء الصور المتجهة : Adobe Illustrator CorelDRAW
Understanding Vector and Bitmap Graphics Bitmap graphics
Vector graphics
Display
Mathematically
image as a matrix of dots (pixels) on a grid
Consist
of a finite number of pixels
Resolution-dependent
Resizing affects image quality
calculated
Composed
of anchor points and straight or curved line segments (collectively form a path)
Appear
smooth; appropriate for illustrations
Resolution-independent
Offer more flexibility than bitmap images
Understanding Vector and Bitmap Graphics ď Ź
Comparing vector and bitmap images
Understanding Vector and Bitmap Graphics
Bitmap images
For static design elements or limited animation
Vector graphics Often used in Flash Create with drawing tools on Tools panel
Graphic
Graphic
Resolution of graphic Resolution is a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch. The terminology varies according to the intended output device. Pixel is the smallest display element that makes up the images you see on a computer monitor or television. In bitmap-based images, the more pixels an image contains, the higher its resolution
Graphic
Graphic
Resolution of graphic DPI - Dots per Inch DPI is a measurement of printer resolution that defines how many dots of ink are placed on the page when the image is printed. The higher a printer's DPI, the smoother your printed image will appear, provided you have a suitable amount of image resolution PPI – Pixel per Inch Resolution for printing at least 150 dpi (standard 300 dpi) Resolution for screen for windows 72 dpi Resolution for screen for mac 96 dpi
Graphic
Graphic
Color spaces RGB - This color space is based on the primary additive colors of Red, Green, and Blue. This is the most common color mode used in graphics software.
Graphic
Graphic
Color spaces CMYK - This color space is based on the ink colors used in traditional full-color commercial printing: Cyan, Magenta, Yellow, and black.
Graphic
Graphic
Bitmap graphic files type *.bmp (bitmapped file) *.gif (graphics interchange format) *.jpg (joint photographic experts group) *.png (portable network graphics) *.tif/tiff (tagged image file) *.psd (Photoshop file)
Graphic
Graphic
*.bmp (bitmapped file) • used in the Microsoft Windows world. • There is no compression. • true color BMP with 16,000,000 colors, • each pixel in the bitmap requires three bytes to store its color information. • True color is also called 24-bit color. • All BMP graphics are rectangular. Because BMP files are Windows specific, they do not work on Web pages.
Graphic
Graphic
*.gif (graphics interchange format) • maintains resolution and sharpness even when compressed. • The Graphics Interchange Format compresses 256-color bitmapped graphics. • Because colors in the graphic are limited to a palette of 256 hues, GIF format is best suited for clipart and diagrams. • not effective for detailed photographs. • use GIF-formatted files on Web pages. • It is Transparency . • The GIF89a format adds animation to GIF images by using multiple images in one file.
Graphic
Graphic
*.jpg (joint photographic experts group) • Compresses images smaller than GIF using a lossy compression technique for color images. • The image creator can specify image quality in trade for file size. • Some amount of data is lost, lossy compression technologies attempt to eliminate redundant or unnecessary information. • The smaller the file size, the more picture information is lost, and the further the JPEG image will be from the original. • JPEG compression is most effective with full color photographs since it is capable of displaying 16.7 million colors.
Graphic
Graphic
*.png (portable network graphics) • similar to GIF. Portable Network Graphic files • PNG is completely patent- and license-free. • Like GIF files, a PNG file compresses the graphic without losing any data. • The uncompressed file is identical to the original. • PNG files can work with 256 colors or 16,000,000 colors, a distinct advantage over the GIF format. • Currently PNG files cannot display animation. Because PNG is a new format, • only the newest browsers can display PNG graphics. But also transparency.
Graphic
Graphic
*.tif/tiff (tagged image file) • files are highly supported bitmapped graphics files that can be any resolution. • Not used in today's web pages, but can be easily converted to a GIF with most graphics editors. • The files can support very high resolution then most of the print work will use this kind of file. Also support 8 bits color and 16 bits color
Graphic
Graphic
Vector graphic files type *.ai (adobe Illustrator file) *.eps (Encapsulated PostScript) *.svg (Scalable Vector Graphics)
Graphic
Graphic
PostScript - primarily a language for printing documents on laser printers, but it can be adapted to produce images on other types of devices. PostScript is the standard for desktop publishing because it is supported by imagesetters, the very high-resolution printers used by service bureaus to produce camera-ready copy. *.eps (Encapsulated PostScript) is the graphics side of PostScript.
Graphic
Graphic
*.svg (Scalable Vector Graphics) a vector graphics format that is in development now and is expected to become the major graphic format for Web images in the future. An SVG vector graphic is described in plain text within a Web document. SVG is much smaller than an equivalent GIF or JPG file, so it downloads much faster. Many predefined shapes, like rectangles and ellipses, will be available. SVG will let the designer define far more complex shapes and combinations of vector and bitmapped graphics.