Растровая и векторная графика в вебдизайне

Любую графику, любые изображения, которые Вы видите на экране своего монитора, или размещаете на своих сайтах, можно разделить на две большие категории:

• растровая графика;
• векторная графика.

В чем между ними разница?

Растровая графика

Основа растровой графики — пиксель (точка), и его цвет. Растровые изображения представлены в виде большого количества точек. Если Вы увеличите масштаб растрового изображения, то увидите эти точки. Качество изображения характеризуется количеством точек, а также количеством цветов, которые используются. Чем больше цветов, тем качественнее можно отобразить различные оттенки и переходы, но тем больше размер файла. Растровые изображения применяютдля фотографий и картинок с большим количеством цветовых деталей и оттенков. Увеличение размеров таких изображений приводит обычно к потере качества, потому что добавляются дополнительные пиксели, а их цвета уже будут подобраны автоматически, как нечто среднее между крайними цветами. Самая распространенная программа для растровой графики: Adobe Photoshop.

Векторная графика

Основа векторной графики — формулы и символы. Например, когда мы в Adobe Photoshop добавляем на изображение текст — мы используем векторную графику. Буквы можно убирать, увеличивать размер, изменять шрифт, заменить одну букву другой. Но нельзя, например, взять, и стереть часть буквы резинкой. Потому что текст, пока он задан в векторном виде, описывается не набором точек, а символами, которые есть в памяти компьютера.

Точно также и эллипс, круг, прямоугольник, линия, кривая, если они даны в виде определенных формул, можно увеличить, изменить ширину, расположение, угол и так далее.

Любое изменение размеров векторных изображений не приводит к изменению их качества — формула всегда остается формулой, и символ всегда останется символом. Но как только мы векторные изображения растрируем, то есть приведем в растровый вид, и они будут нам даны в виде точек, изменение изображений уже будет влиять на качество.

Векторная графика создается в инженерных программах, где требуется точность — Compas и AutoCAD, программах для создания трехмерных изображений — 3D Studio MAX, в векторных графических редакторах для создания малоцветных, но четких и ярких картинок, логотипов и баннеров — CorelDRAW, в программах для создания анимационных изображений — Flash Animator.

Графические файлы в Интернете

Для графических файлов в Интернете чаще всего используются форматы Jpeg и Gif. Также часто применяют формат Png, похожий на Gif.

Формат Jpeg (jpg)

Позволяет создавать полноцветные изображения с количеством цветов до 16,7 млн, и передает самые разные оттенки, переходы и цветовые эффекты. Подходит для фотографий и многоцветных изображений, но также вполне приемлем для логотипов, баннеров и других изображений с малым количеством цветов.

Формат Gif

Поддерживает не более 256 цветов и прозрачность, и позволяет создавать анимированные изображения, то есть движущиеся картинки. Подходит для логотипов, баннеров, мелких иконок, кнопок, для изображений с прозрачными областями и для анимаций.

Формат Png

В отличие от Gif, не поддерживает анимацию, но поддерживает прозрачность и даже полупрозрачность. Делится  на виды:

• Png 8 — использует только 256 цветов.
• Png 24 — можно передавать цвета, как есть, без искажений, даже иногда лучше, чем в формате Jpg, но размер имеет немного больший, чем Jpg, при том же качестве.
• Phg 32 — реализовано изменение степени полупрозрачности, и таким образом можно создавать, к примеру, полупрозрачные тени.

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером