Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции. Е. Ю. Поляков

Чтение книги онлайн.

СКАЧАТЬ второй лекции представлены основные графические форматы, их классификация и особенности использования для веб-разработки сайтов и полиграфии. Всего графических форматов множество, и все они специфические, то есть определенного назначения и соответствующих технических свойств хранения, моделирования, сжатия и воспроизведения двухмерной и трехмерной графики.

      В повседневной работе дизайнер имеет непосредственное взаимодействие как с композицией дизайн-макетов, так и с отдельными фрагментами: глифами, полупрозрачными, плоскими и градиентными слоями, векторными масками и модульными сетками.

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

      Классификация графических форматов

      Принципиально графические форматы классифицируются по типу хранимой графики: пиксельная, то есть растровая графика и векторная графика.

      Указанные виды графики моделируются различными алгоритмами для визуализации заданной композиции в воспроизводимом изображении.

Сопоставление форматов SVG и PNG

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

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

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

      При этом есть существенное преимущество SVG над форматом PNG и другими подобными форматами. Это преимущество позиционировано в самом наименовании формата SVG. Расшифруем его. Scalable Vector Graphics в переводе с английского дословно означает – масштабируемая векторная графика, то есть заданная в векторном изображении композиция при масштабировании с целью укрупнения (детализации) на экране не дает потерь в визуализации диагональных и радиальных фигур и полигонов.

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

      В свою очередь формат PNG имеет иное преимущество в возможности воспроизведения множества слоев с полупрозрачными градиентами. Допустим, мы хотим воспроизвести в изображении цветок с десятками лепестков, где отдельные из них темнее у центра и светлее у краев, как бы объемные СКАЧАТЬ