Типы растровых изображений – DTP — Настольные издательские системы

Чтоб понять принцип построения растрового изображения, представьте себе лист масштабно-координатной бумаги (миллиметровки), каждая клеточка которого закрашена каким-то цветом. Такую клеточку называют пикселем.

Качество изображения называют разрешением. Его определяют количеством пикселей, которые как раз и формирует рисунок. Чем больше пикселей размещено на единице площади, тем выше разрешение, а следовательно выше и качество изображения. Например рисунок с разрешением 1280×1024 состоит из 1280 px по вертикали и 1024 px по горизонтали. Следует отметить, что в данном случае речь идёт о физическом размере изображения, а не о единице площади (дюйме, сантиметре и т.п.).

Основным недостатком растровых изображений является заметное ухудшение качества при масштабировании (имеется ввиду увеличение размера изображения). Дело в том, что увеличивая (уменьшая) размер изображения, Вы увеличиваете (уменьшаете) размер каждого пикселя, что, при значительном масштабировании, позволяет их визуально определить.

Кроме того, наиболее часто к недостаткам растра относят: отсутствие возможности поворота рисунка на угол, отличный от 90* без заметного искажения самого рисунка, а также размер файла, который напрямую связан с качеством изображения.

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

Наиболее распространеным программным обеспечением для работы с растровыми изображениями является Adobe Photoshop.

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

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

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

Векторные изображения могут быть легко преобразованы в растровый формат любого разрешения.

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

Наиболее популярным программным обеспечением для работы с векторной графикой являются CorelDraw и Adobe Illustrator.

Плюсы и минусы

Растровые изображения

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

Векторные изображения

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

Чаще всего, дизайнеры совмещают эти типы графики, чтобы добиться максимального эффекта. Иногда лучше использовать растр, иногда — вектор. Надеемся, эта статья помогла вам немного лучше понять в чем разница между этими двумя типами изображений. Спасибо за внимание.

Твитнуть

Поделиться

Поделиться

Отправить

Класс!

Отправить

Другие статьи

turbologo.ru

Отличия растровых и векторных изображений

Что такое растровое изображение?

В действительности, мы видим всего лишь электронную версию картинки на мониторе. Если говорить про растровое изображение, то оно храниться в памяти компьютера в виде цифр и символов. Они уже с определенной последовательностью описывают какую-то отдельную область (элемент) самого изображения. Этот элемент отображен в виде пикселя (ячейки определенного цвета). Давайте посмотрим, что это за пиксель такой.

Для этого можно просто взять фото и увеличить его. Вы заметите, что появились специальные квадратики (рисунок ниже). Изображение стало разбиваться на квадраты разного цвета. Вот эти квадратики и есть пиксели.

Таким вот оказывается любое растровое изображение, полученное с фотокамеры, с камеры мобильного телефона или скачанное с Интернета. Каждый пиксель, как я говорил, описан определенной последовательностью цифр и символов. Как узнать, что это за последовательность? Да очень просто! Выбираете инструмент «Пипетка» (в любом графическом редакторе он есть) и наводите на нужный пиксель. Если проверяете в фотошопе, то вам дополнительно нужно будет зайти в палитру цветов.

После этого появится цвет данного пикселя и соответствующее ему число, которое показывается в нижней строчке (1). Тут у меня только цифры. Но в других цветах они могут идти в сочетании с латинскими буквами или только из самих букв. Это так называемая шестнадцатеричная латинская система. С помощью таких букв и цифр можно описать цвет в любом графическом редакторе (не только в фотошопе). Это очень удобно. Например, чтобы обратиться к какому-то цвету, мы можем указать его числовые координаты, после чего появится соответствующий цвет. Можете ввести любой код и посмотреть, к какому цвету он относится. Также можно использовать онлайн генератор палитр.

Итак, что следует из того, что мы с вами рассмотрели выше. Если пиксели представлены в виде последовательности чисел и букв, то их можно без труда изменять. Изменяя числа и буквы каждого пикселя, мы можем изменять его цвет, то есть редактировать сам пиксель. При выполнении какой-либо глобальной операции коррекции (например, регулируем яркость) изменяется числовое значение нескольких тысяч пикселей изображения.

Что такое векторное изображение?

Теперь давайте познакомимся с понятием векторного изображения. Чтобы продемонстрировать наглядный пример, в Adobe Photoshop я попробую создать новый документ. Перейдем в меню «Файл» —> «Создать«. Давайте выберем инструмент, с помощью которого можно будет создавать векторную графику. К примеру, я возьму инструмент «Перо» (2). Обязательно нужно, чтобы стояла настройка «Слой-фигура» (3). После этого я расставляю точки в нужных местах (4). В результате получается определенная фигура. Вы ее можете сделать по своему усмотрению.

В чем отличия растровой и векторной графики?

Так в чем же отличия растрового от векторного изображения? Векторные изображения в отличие от растровых описываются математическими формулами, а не латинскими символами. Поэтому их можно увеличивать либо уменьшать без потери качества. Формула остается той же, меняется только масштаб. Формула, как правило, описывает плавную кривую и при любом значении эта кривая так и останется плавной.

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

Таким образом, векторные изображения можно увеличивать без потери качества. В любом размере они описываются математическими формулами. Растровое изображение — это последовательность пикселей. При увеличении какого-то фрагмента, начинают наблюдаться потери качества. Также потеря может наблюдаться и при уменьшении картинки.

Векторные изображения хорошо использовать там, где требуется большое увеличение картинки без потери качества. Например, в веб-дизайне это могут быть различные визитки, логотипы, баннеры на сайте и много другое. Программа Adobe Photoshop хоть и позволяет работать с векторными картинками, но все же она является растровым редактором. Для работы с векторными изображениями гораздо лучше подходят программы CorelDraw или Adobe Illustrator.

Итак, мы с вами познакомились с понятием растрового и векторного изображения. Как я говорил, основное отличие: векторное изображение описывается математическими формулами и его можно увеличивать сколько угодно без потери качества, что не скажешь уже про растровое.

Хотя, не смотря на это, многие веб-дизайнеры, да и не только они часто используют на своих сайтах растровую графику. Оно и понятно, ведь такая графика смотрится куда привлекательнее. Однако есть классные примеры и векторной графики. К тому же такие работы весят намного меньше. В общем, изучайте и внедряйте!

[socialpost]

alpha-byte.ru

Лекция

Лекция

типы растровых изображений
в Adobe photoshop

План:

1.     Типы растровых изображений

2.     Монохромные изображения

3.     Полутоновые изображения

            3.1.       Многоканальные изображения

4.     Полноцветные изображения

5.     Индексированные изображения

            5.1. Алгоритмы Dithering (сглаживания)

Говоря о цветах, часто используют термины тон и оттенок, а также тени, средние тона и света.

Тоном называют спектральный цвет или цвет, полученный смешением базовых цветов максимальной яркости.

Изменяя (уменьшая яркость) данного цвета, получают его оттенки.

Тенями называются области изображения низкой яркости (освещенности).

Средние тона — это участки изображения средней яркости, а света — участки высокой яркости.

Adobe Photoshop поддерживает описание изображений в различных цветовых моделях. В рамках программы существует также понятие типа изображения. В Photoshop допустимы следующие типы изображений:

Монохромными Bitmap называются изображения, содержащие только два цвета — черный и белый.

Этот тип изображений используется для хранения штриховой графики, например рисунков тушью или гравюр.

На черно-белом изображении (рис. 4 а, б) при увеличении фрагмента различимы пиксели только двух цветов: либо черного, либо белого.

В монохромном изображении цвет пикселя кодируется 1 битом.

Конвертировать в черно-белое (Bitmap) можно любое полутоновое изображение. Также возможно отсканировать изображение в черно-белом режиме. Это самый простой тип изображений. Нежелательно применять этот метод к портретам. Однако успешный перевод полутонового изображения в монохромное все же возможен и часто используется для достижения специальных эффектов. Для этого требуются специальные алгоритмы, некоторые из них выполнены в виде фильтров Photoshop.

Изображения, выполненные в оттенках (или градациях) серого цвета, называют полутоновыми.

Если смешать лучи трех базовых цветов (красного, зеленого и синего) одинаковой яркости, то получится оттенок серого цвета. Сохраняя одинаковость яркостей составляющих, но, изменяя величину яркости, можно получить всю шкалу оттенков серого цвета (grayscale), от черного до белого (256 градаций).

В полутоновых изображениях цвет пикселя кодируется одним байтом. Глубина цвета полутонового изображения – равна 8 бит. Объем памяти, занимаемой полутоновым изображением 100 px на 100 px, в восемь раз больше, чем для монохромного изображения: 100 px *100 px *8 бит=80 000 бит = 9,8 Кб.

Если документ имеет модель Bitmap (Монохромный) (рис. 5) или Gray (Градации серого/Полутоновый) (рис. 6), то содержимое единственного канала и образует изображение. Редактирование канала и изображения в этих случаях — одно и то же.

Многоканальные изображения

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

Классическое дуплексное изображение (duotone) — это печать одноцветного изображения двумя красками, одна из которых черная, а другая цветная (коричневая, голубая или зеленая). Хотя может использоваться несколько дополнительных красок.

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

Adobe Photoshop позволяет вам создавать одно-, двух-, трех- и четырехкрасочные дуплексы. Однокрасочные дуплексы представляют собой полутоновые (в градациях серого) изображения, отпечатанные с помощью одной нечерной краски. Двух-, трех- и четырехкрасочные дуплексы представляют собой полутоновые изображения, отпечатанные с помощью соответственно двух, трех или четырех красок. Использование тех или иных красок в дуплексе определяет общий тон изображения, а не цвета отдельных элементов.

Полноцветными называют цветные изображения в моделях RGB, CMYK или Lab. Они состоят из нескольких цветовых каналов. Каждый канал представляет собой полутоновое изображение, содержащее 256 оттенков.

Объем памяти, занимаемый цветными изображениями, зависит от количества имеющихся в них каналов. Каждый канал является полутоновым, т. е. кодируется одним байтом. Если каналов три, как в изображениях в модели RGB или Lab, на один пиксель приходится 8 бит*3=24 бита. В модели CMYK глубина цвета 8 бит*4=32 бита. Память, занимаемая цветными изображениями, в 3 или 4 раза больше, чем для полутоновых изображений: 100 px*100 px *24 бит=240000б = 29,3 Кб или 100 px *100 px *32 бит=320 000 бит = 39,1 Кб.

Индексированные изображения

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

Палитра Channels документа, представленного в модели Index (Индексированное), изображена на рис. 8.

Рис. 8. Режим Indexed Color

Это один из первых способов представления цветных точечных изображений. Он широко применялся, когда видеоадаптеры, поддерживающие более 256 цветов, являлись роскошью. Цвета в индексированном изображении могут быть произвольными, но их общее количество не должно превышать указанного значения. Какие именно цвета использованы в изображении, определяется его палитрой. Палитра индексированного изображения представляет собой нумерованный список цветов и хранится в файле вместе с изображением. Каждый байт индексированного изображения хранит номер цвета в палитре, а не значения RGB-компонентов цвета. В результате на один пиксель цветного индексированного изображения приходится не 24 бита, а всего 8.

Палитра индексированного изображения может иметь не только 256 цветов, но и меньшее их количество. Сокращение палитры дает возможность сократить и размер файла. Например, если палитра будет состоять из 64 цветов, то для кодирования одного пикселя потребуется только 6 бит, а не 8. В результате размер изображения уменьшится на четверть. Таким образом, глубина цвета индексированных изображений может принимать целые значения в диапазоне от 1 до 8. Компактность представления цветов в индексированных изображениях объясняет нынешнюю сферу их применения — web-дизайн.

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

1.     особыми алгоритмами;

2.     указываются непосредственно (фиксированные предопределенные палитры).

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

Photoshop предлагает следующие варианты палитры:

Ø     Perceptual (Перцепционная). Алгоритм Perceptual стремится поместить в палитру индексированного изображения те цвета, к которым человеческий глаз наиболее восприимчив.

Ø     Selective (Селективная). Алгоритм Selective основан на предыдущем, но отдает особое предпочтение превалирующим цветам. Он предлагается Photoshop по умолчанию.

Ø     Adaptive (Адаптивная). Алгоритм Adaptive помещает в индексированную палитру цвета, которые превалируют в полноцветном изображении. Если, например, палитра составляется для изображения с лесным пейзажем, то в ней будут преимущественно оттенки зеленого цвета.

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

Второй способ: Чтобы достичь одинаковой цветопередачи на разных компьютерных платформах и на устаревшем видеооборудовании, Photoshop имеет 4 стандартные палитры:

Ø     Две системные (MacOS и Windows). Они соответствуют цветам, используемым операционной системой. Если вы задействуете цвета этих палитр, это даст гарантию их правильного и одинакового воспроизведения на любом компьютере выбранной платформы.

Ø     Палитра Web. Используется браузерами. Ее применение обеспечит практически одинаковое воспроизведение цветов индексированного изображения любым браузером на любом компьютере.

Ø     Равномерная палитра. Её составляют цвета, полученные равномерным делением всего цветового диапазона изображения на количество цветов индексированной палитры.

Фиксированные предопределенные палитры не позволяют достичь столь точного соответствия цветов оригиналу, как алгоритмические — они предназначены для специальных целей.

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

Такие «синтезированные» цвета называют гибридными, а имитацию отсутствующих цветов — сглаживанием (dithering).

Рис. 9. Имитация цвета индексированного изображения, отсутствующего в палитре

Алгоритмы сглаживания

Adobe Photoshop предлагает несколько алгоритмов сглаживания:

Ø                 Pattern (Узор), работает примерно так, как было описано выше. Отсутствующие цвета заменяются «узором» из пикселей, имеющихся в палитре индексированного изображения. Этот способ не всегда дает удовлетворительный результат, поскольку проявляется хорошо заметная регулярная структура «узоров».

Ø                 Лучший внешний вид дает алгоритм Diffusion (Диффузия). Photoshop начинает сглаживание с первого, левого верхнего пикселя изображения и следует построчно к последнему, правому нижнему. Цвет первого пикселя заменяется на ближайший из ограниченной палитры. Цвет второго пикселя выбирается таким образом, чтобы вместе с первым они давали цвет, наиболее близкий к цвету второго пикселя оригинала. Такой алгоритм позволяет «рассеять» ошибку в выборе цвета по всему изображению без появления регулярных узоров.

Ø                 Алгоритм, Noise (Шум), представляет собой усовершенствованный вариант алгоритма Diffusion (Диффузия), создающий менее регулярное сглаживание.

vtk34.narod.ru

Растровая и векторная графика — Блог Академии — HTML Academy

Давайте попробуем разобраться, в чём отличие растровой графики от векторной?

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

Растровое изображение, как мозаика, складывается из множества маленьких ячеек — пикселей, где каждый пиксель содержит информацию о цвете. Определить растровое изображение можно увеличив его масштаб: на определённом этапе станет заметно множество маленьких квадратов — это и есть пиксели.

Наиболее распространённые растровые форматы: JPEG, PNG.

Применение

Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий. Самый популярный редактор растровой графики — Adobe Photoshop.

Преимущества

• Возможность создать изображение любой сложности — с огромным количеством деталей и широкой цветовой гаммой.
• Растровые изображения наиболее распространённые.
• Работать с растровой графикой проще, так как механизмы её создания и редактирования более привычны и распространены.

Недостатки

• Большой занимаемый объём памяти: чем больше «размер» изображения, тем больше в нём пикселей и, соответственно, тем больше места нужно для хранения/передачи такого изображения.
• Невозможность масштабирования: растровое изображение невозможно масштабировать без потерь. При изменении размера оригинального изображения неизбежно (в результате процесса интерполяции) произойдёт потеря качества.

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

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

Самые популярные векторные форматы: SVG, AI.

Применение

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

Преимущества

• Малый объём занимаемой памяти — векторные изображения имеют меньший размер, так как содержат в себе малое количество информации.
• Векторные изображения отлично масштабируются — можно бесконечно изменять размер изображения без потерь качества.

Недостатки

• Чтобы отобразить векторное изображение требуется произвести ряд вычислений, соответственно, сложные изображения могут требовать повышенных вычислительных мощностей.
• Не каждая графическая сцена может быть представлена в векторном виде: для сложного изображения с широкой цветовой гаммой может потребоваться огромное количество точек и кривых, что сведёт «на нет» все преимущества векторной графики.
• Процесс создания и редактирования векторной графики отличается от привычной многим модели — для работы с вектором потребуются дополнительные знания.

Итог

Мы приходим к выводу, что не существует «серебряной пули»: и растровая, и векторная графика имеют свои достоинства и недостатки, соответственно, стоит выбирать формат, который подходит для решения поставленных перед вами задач.

Подробнее про форматы можно посмотреть в статье «Форматы изображений».

htmlacademy.ru