Как-то я заказал баннер на мероприятие. Отдал в печать логотип, который просто скачал с сайта, — маленькую картинку, на экране чёткую. Через день приезжаю: баннер три на два метра, а логотип на нём вылез лесенкой из квадратиков, будто собран из кубиков лего. Печатник пожал плечами: «Прислали растр, я растянул. Нужен был вектор». Тогда я и запомнил, что картинка картинке рознь. Один и тот же логотип можно хранить двумя способами, и от выбора зависит, переживёт он увеличение или рассыплется.
После урока сможешь:
— объяснить, чем растровое изображение отличается от векторного;
— предсказать, что случится с картинкой при сильном увеличении;
— по одному признаку определить, растровый перед тобой редактор или векторный;
— выбрать тип графики под задачу: фотография, логотип или чертёж.
Вспомни: в уроке 1.3 мы разобрали пиксель — крохотную цветную точку экрана — и разрешение, то есть сколько таких точек помещается по ширине и высоте. Держи это в голове: растровая картинка устроена ровно так же, из сетки пикселей.
Два способа хранить картинку
Возьми любую фотографию и приблизь её до предела. Картинка распадётся на крохотные цветные квадратики. Каждый квадратик — один пиксель, и компьютер помнит его цвет отдельно. Так устроено растровое изображение: это сетка из пикселей, где у каждой клетки записан свой цвет. Фотография среднего телефона — несколько миллионов таких клеток, разложенных рядами.
Есть другой способ. Можно не хранить каждую точку, а записать рецепт: нарисуй круг с центром здесь, радиусом вот такой, залей синим, обведи чёрной линией. Компьютер прочитает это описание и построит фигуру сам. Так устроено векторное изображение: набор фигур, заданных формулами — точки, линии, кривые и заливки. Файл помнит не точки, а инструкции, как их получить.
РАСТР — сетка пикселей. Буква «А» — это раскрашенные клетки:
□ □ ■ ■ □ □
□ ■ □ □ ■ □
□ ■ ■ ■ ■ □
□ ■ □ □ ■ □
□ ■ □ □ ■ □
Компьютер помнит ЦВЕТ каждой клетки. Клеток — миллионы.
ВЕКТОР — описание фигур формулами. Тот же круг задаётся строкой:
круг: центр (100, 100), радиус 50, заливка синяя, контур чёрный 2px
Компьютер помнит НЕ точки, а РЕЦЕПТ фигуры
и рисует её заново под любой размер.
Что происходит при увеличении
Разница между двумя способами прячется, пока картинка маленькая. Она вылезает, как только начинаешь увеличивать. Растр помнит готовые точки, и новых взять неоткуда: при сильном увеличении пиксели просто становятся крупнее, и картинка рассыпается на заметные квадраты. Ту же беду видно на растянутом баннере, где мелкое фото раздули на всю стену. Вектор помнит формулу, а формулу можно пересчитать под любой размер. Поэтому векторный логотип остаётся гладким хоть на визитке, хоть на стене дома.
Со способом хранения связан и размер файла. Растр запоминает цвет каждого пикселя, поэтому его вес растёт с числом точек и богатством палитры: фотография в высоком разрешении легко весит несколько мегабайт. Вектор хранит короткие описания фигур, и его размер зависит от их количества, а не от того, на какой размер ты растянешь картинку. Простой логотип в векторе — это пара килобайт, и они не изменятся, даже если напечатать его во всю стену.
Где что применяют
Отсюда понятно, где какой способ уместен. Фотография, скан документа, сложная картинка с плавными переходами цвета — это растр: живую фотографию формулами не опишешь, там миллионы оттенков. А логотип, иконка, шрифт, схема или чертёж — это вектор: чёткие линии, которые должны оставаться резкими при любом размере. Инженер чертит деталь в векторе именно поэтому: чертёж печатают и мелко, и крупно, и линии обязаны быть точными.
ПРИЗНАК РАСТР ВЕКТОР
──────────────────────────────────────────────────────────────────
из чего состоит сетка пикселей (точек) фигуры-формулы: точки,
линии, кривые, заливки
при увеличении рассыпается на квадраты остаётся гладким
(пиксели видны) (фигуры пересчитываются)
размер файла больше; растёт с числом меньше; зависит от числа
пикселей и цветов фигур, не от размера
где применяют фотографии, сканы, логотипы, чертежи,
сложные картинки иконки, шрифты
редакторы Photoshop, GIMP, Paint CorelDraw, Illustrator,
Inkscape, Компас-3D
Редакторы: кто красит пиксели, кто описывает фигуры
Программы для работы с графикой делятся по тому же признаку. Растровые редакторы работают с сеткой пикселей — красят и стирают отдельные точки. Сюда относятся Adobe Photoshop (обработка фотографий), бесплатный GIMP и простой Paint из стандартного набора Windows. Ими правят фотографии и рисуют попиксельно.
Векторные редакторы работают с фигурами — ты двигаешь и меняешь линии и кривые, а не отдельные точки. Это CorelDraw и Adobe Illustrator (логотипы, макеты, иллюстрации), бесплатный Inkscape и Компас-3D — российская программа для чертежей и инженерной графики. В них создают то, что должно тянуться без потери чёткости.
Запутаться в названиях легко, а список длинный и всё время пополняется. Поэтому держи в голове не список, а один критерий: редактор красит пиксели или описывает фигуры? Красит пиксели — растровый. Описывает фигуры — векторный. Этот вопрос работает даже с программой, которую ты видишь впервые.
Как это спрашивают на экзамене. Частый вопрос: «Какие программы предназначены для работы с векторной графикой?» — и просят отметить не меньше двух. В вариантах намеренно мешают редакторы обоих типов: Компас-3D и CorelDraw (вектор) рядом с Photoshop и GIMP (растр). Не заучивай списки — прикладывай критерий: программа красит пиксели или описывает фигуры? Черчение и логотипы — это фигуры, значит вектор.
Контрольный вопрос. Растровое изображение — это …
Подсказка: Слово «растр» означает решётку, сетку. Из каких мельчайших клеток она собрана?
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Векторное изображение — это …
Подсказка: Спроси: что короче помнить — цвет каждой точки или запись, как построить фигуру?
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Мельчайший элемент растрового изображения, одна цветная клетка сетки, — это … Впиши одно слово в единственном числе.
Подсказка: Про эту крохотную точку ты уже читал в уроке про монитор и разрешение экрана.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Ты сильно увеличиваешь растровое изображение на экране. Что произойдёт?
Подсказка: Помни, из чего собран растр. Что станет видно, если разглядывать эти клетки в упор?
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Ты увеличиваешь векторный рисунок в десять раз. Что произойдёт?
Подсказка: Вектор хранит формулу фигуры, а не готовые точки. Формулу можно пересчитать под любой масштаб.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Обычная фотография, снятая на телефон, хранится как … изображение. Впиши одно слово: растровое или векторное.
Подсказка: Фотоаппарат ловит свет миллионами крошечных датчиков и запоминает цвет каждой точки, а не формулы фигур.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. От чего в первую очередь зависит размер растрового файла?
Подсказка: Растр помнит цвет каждой точки. Чем больше точек и богаче палитра, тем больше нужно запомнить.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Отметь все растровые графические редакторы (не менее двух вариантов).
Выберите все верные варианты.
Подсказка: Растровый редактор закрашивает отдельные точки сетки. Два варианта из списка, наоборот, задают фигуры формулами — это черчение и вёрстка логотипов.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие программы предназначены для работы с векторной графикой? (не менее двух вариантов)
Выберите все верные варианты.
Подсказка: Приложи критерий к каждой программе: она закрашивает пиксели или задаёт фигуры формулами? Черчение и рисование логотипов — это фигуры.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Редактора Paint.NET не было в наших списках. Работает он так: закрашивает отдельные пиксели на сетке. С каким типом графики он работает? Впиши одно слово: растровой или векторной.
Подсказка: Не ищи название в таблице — приложи критерий. Если программа красит отдельные точки-пиксели, значит она работает с какой графикой?
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Логотип фирмы напечатают и на визитке размером со спичечный коробок, и на билборде размером с дом. Чтобы он оставался чётким при любом размере, в каком виде дизайнер его нарисует? Впиши одно слово: растровом или векторном.
Подсказка: Один размер сменится другим в сотни раз. Какой тип графики переживает увеличение без квадратов?
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Один и тот же простой круг сохранили двумя способами: как векторный файл (запись «центр, радиус, цвет») и как растровую картинку 4000 × 4000 пикселей. Какой из двух файлов получится заметно меньше по размеру? Впиши одно слово: векторный или растровый.
Подсказка: Посчитай, что хранит каждый файл. Один помнит короткую строку-формулу, другой — цвет каждой из шестнадцати миллионов точек.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Итог.
— Растровое изображение — сетка пикселей, у каждого свой цвет. Векторное — описание фигур формулами: точки, линии, кривые, заливки.
— При увеличении растр рассыпается на квадраты, вектор остаётся гладким, потому что фигуры пересчитываются заново.
— Растровый файл тем тяжелее, чем больше пикселей и цветов. Фотографии — растр; логотипы, иконки и чертежи — вектор.
— Критерий для любого редактора: он красит пиксели или описывает фигуры? Растровые — Photoshop, GIMP, Paint. Векторные — CorelDraw, Illustrator, Inkscape, Компас-3D.
