Вся необходимая информация для работы с изображениями через выделение объектов и пикселей. Разбираем инструменты от простых к сложным на примере реальных задач — бытовых и профессиональных.
Введение
Основа работы с растровыми изображениями — выделение областей. Любое серьёзное изменение изображения требует обращения к конкретной группе точек изображения (пикселей).
В этом уроке мы поговорим о принципах работы выделения областей на фото, изучим все основные инструменты выделения и разберём их применение на практике. Будем разбирать методы на реальных задачах из сферы графического дизайна, веб-разработки, e-commerce, smm и бытовых нужд.
Кому полезен навык
Умение выделять объекты на фото открывает большие возможности для редактирования фото. Удаление/замена объектов, фона, цветокоррекция, трансформации и деформации.
- Дизайнеры — очевидно, но не все им владеют. Чаще пользуются простыми конструкторами и готовыми решениями, ограничивая свои творческие возможности.
- Веб-разработчики — подготовка изображений для сайта зачастую требует небольших коррекций цвета и формы, навык позволяет повышать качество и гармоничность изображений и как следствие самого сайта.
- E-commerce — если вы работаете с карточками товаров, фото товаров, то базовые навыки выделения объектов — необходимы. Оно позволяет использовать множество автоматизированных инструментов Photoshop по улучшению качества фото и его привлекательности для покупателей. От цветокррекции до удаления дефектов с фото в пару кликов.
- SMM и блогеры — еще одна очевидная сфера применения. Выделение лежит в основе создания коллажей (артов), ярких и привлекающих картинок для читателей.
- Быт — выделить объект на фото для автоматической замены/удаления, перекрасить объект на фото для соц. сетей. Применений найдётся много, если вы готовы изучать редактор.
Где применяется и какие задачи решает
Выделение пикселей — обращение к конкретным областям изображения, лежит в основе большинства процессов обработки изображений.
- Создание сложных коллажей и композиций — сложные, или реалистичные изменения изображений невозможны без правильной работы с выделением. Точность выделения объекта напрямую влияет на гармоничность и реалистичность итогового изображения.
- Цветокоррекция — эффективная коррекция отдельных областей изображения может кратно увеличить привлекательность фотографии. Незаменимо при обработке фотографий товаров.
- Ретушь — качественное удаление дефектов с фотографии невозможно без точечного выделения нужных областей.
- Рисование — задание рамки формы позволяет упростить и ускорить процесс рисования, или дорисовки областей изображения.
- Работа с автоматическими инструментами — заливки, генерации, автозамены. Выделение областей задаёт жесткие рамки для работы большинства функций фотошопа.
- Деформации и трансформации — с помощью выделения пикселей можно изменять и перемещать объекты на фото. Увеличить, уменьшить, повернуть, покрутить, наклонить.
- Обтравка и обрезка — самая частая задача, которая решается выделением. Когда нам нужно удалить фон у фотографии, или обрезать лишнее — качественное выделение нужной области решает эту задачу.
Как работает выделение в Photoshop
Можно изучать принципы на практике, но выделение — это тот случай, когда понимание теории мгновенно объясняет работу большенства инструментов Photoshop.
Что такое пиксели и как формируется изображение
Привычные нам цифровые изображения состоят из набора цветных точек — пикселей.
Такие изображения мы видим через мониторы. На мониторе пиксель — это группа из трёх мельчайших цветных лампочек. Один пиксель — это три лампочки красного, зеленого и синего цветов (R,G,B). Яркостью каждой отдельной лампочки задаётся цвет пикселя (одной точки монитора).
Фото: RGB лампочки пикселя монитора
Аналогично строятся и распечатанные на принтере фотографии. Но они уже состоят из просто цветных точек (капель краски разных цветов C,M,Y,K).
Изображения состоят из пикселей и мониторы состоят из пикселей. Изображение, фактически, это просто набор данных, который говорит монитору какие лампочки и с какой яркостью зажечь, чтобы получить нужный рисунок на экране.
То есть изображение — это просто набор точек определённого цвета и последовательностью (координатами). Координаты говорят монитору какой пиксель зажечь, а цвет — с какой яркостью зажечь каждую из трёх цветных лампочек точки (пикселя).
Когда мы выделяем в редакторе область изображения (группу пикселей/точек), мы работаем с координатами точек. Так работают простые инструменты выделения.
Если нам нужно выделить все точки изображения конкретного цвета — мы уже работаем со значениями цвета точек. Этот параметр используют более сложные инструменты выделения.
Принцип выделения
Мы пришли к тому, что все инструменты выделения работают через цвет точки и её координаты. В зависимости от инструмента используется либо только один параметр, либо сразу оба.
Теперь поговорим о логике и алгоритме выделения. Будет немного нудно и усложнённо, но это время окупится при изучении первого же инструмента выделения. Еще это очень пригодится при изучении принципов цветокоррекции.
Выделение по координатам
Изображение состоит из цветных точек. Правильная последовательность этих точек — формирует изображение.
Фото: Пример логики цветных точек (пикселей) — конструктор мозабрик
Возьмём изображение/монитор размером 1920х1080px. Получаем сетку шириной 1920 и высотой 1080 точек/клеток (она же матрица, она же двумерный массив).
Каждая клетка — RGB пиксель из трёх лампочек.
Мы можем взять любой диапазон клеток по ширине и высоте, так мы выделим прямоугольную область изображения. Далее мы можем менять значения цветов точек выбранной области. Перекрасить, или переместить в новое место.
Фото: Пример сетки из пикселей
На изображении мы взяли область с 4 по 7 точку изображения по ширине и с 3 по 6 точку изображения по высоте. Получили область 4х4 пикселя, которую мы можем изменять отдельно в редакторе. Например, отдать команду перекрасить её в новый цвет.
Так происходит работа с отдельными областями изображения. Если говорить грубо, то, редактируя изображения, мы просто перекрашиваем отдельные пиксели в новые цвета. А нужные пиксели изображения мы выбираем с помощью выделения.
В Photoshop выбор прямоугольной области происходит по двум противоположным точкам. В месте клика мышью по изображению задаётся первая точка, а в месте, где мы отпускаем клавишу, ставится вторая точка и создаётся область выделения.
Фото: Пример прямоугольно выделения по 2м точкам.
Из геометрии мы знаем, что по двум точкам можно построить еще и окружность. Так в редакторе создаются круглые области и овалы.
Самый очевидный способ выделить область изображения — провести курсором по нужной области. Просто обводим нужную часть изображения как карандашом по бумаге. Правда точность такой обводки низкая, поэтому в редакторе есть множество инструментов для более точной обводки нужных областей.
Можно использовать выделение и другими фигурами, но это уже менее популярные способы. Примером такого способа может служить выделение по контуру текста. Пишем текст, создаём выделение по контуру букв. Редактируем выделенные пиксели.
Фото: Пример выделения по форме текста
Самое важное, что нужно понимать: все выделения происходят по границам пикселей. Мы уже знаем, что пиксели монитора представляют собой «квадратики» из 3х лампочек. Поэтому круглые области выделения при масштабировании выглядят вот так:
Фото: Принцип выделения по границам пикселей изображения
Здесь мы видим, что области выделяются не по «кругу», а именно по границам квадратных пикселей. Когда пикселей много — они маленькие и эти ступеньки/лесенки не видны. Но если разрешение изображения низкое (мало точек), то лесенки круглых объектов становятся видны.
Фото: Пример фигур низкого разрешения с эффектом ступенек на границах
От этих лесенок/ступенек мы переходим к выделению областей изображения по значениям цветов. Т.к. именно из-за особенностей цифровых изображений появляются эти артефакты на стыке пикселей.
Выделение по цвету
Цвет на экранах задаётся яркостью свечения каждой из трёх цветных лампочек пикселя. Лампочки соответственно имеют три цвета: R— красный (red), G — зеленый (green), B — синий (blue).
Каждая лампочка может светится с разной яркостью. Диапазон яркости лампочки задаётся диапазоном от 0 до 255 единиц. 0 — лампочка выключена, 255 — максимальная яркость. Поэтому значение любого цвета в RGB формате задаётся тремя числами в этом диапазоне.
Чтобы получить красную точку экрана/изображения нужно назначить лампочкам пикселя следующие значения: R=255, G=0, B=0. Получим максимальный яркий красный цвет. Меняя значения яркости каждой лампочки — получаем разные цвета. Когда мы работаем с выделением пикселей по цвету, то фактическим работаем именно с этими значениями RGB.
Мы можем обращаться как к конкретному цвету (значению RGB), так и к диапазону. Например выделить все пиксели у которых значение красного (R) в диапазоне от 230 до 255. Многие инструменты Photoshop умеют работать с диапазонами, которые можно задать разными формулами.
Такая же логика используется в цветокоррекции. Можно взять конкретное значение цвета и «примешать» к нему другой цвет изменив значение RGB. Алгоритмы по которым мы изменяем значения RGB — являются разными инструментами цветокоррекции. Умножение, деление, складывание, % и прочие математические операции с этими значениями и дают разные эффекты цветокорра и фильтров.
Координаты, цвет и прозрачность (наложение)
Теперь пара слов о том, что можно совмещать выделение по координатам и выделение по цвету. Например, можно выделить все нужные цвета в области. Или уточнить границы выделяемой области изображения по цвету.
В моей работе чаще применяется либо ручное выделение области (обведением), либо выделением диапазона цветов внутри выделенной вручную области. Однако, есть еще
Простые инструменты выделения
Прямоугольное и овальное выделение
Лассо и многоугольное лассо
Магнитное лассо
Маски и базовая работа с выделением
Маска слоя
Работа с краями выделения
Альфа-каналы
Продвинутые методы выделения
Перо (Pen Tool)
Автоматические инструменты
Выделение через цвет
Выделение через каналы
Практика: реальные задачи
Как выбирать инструмент под задачу
Итоги
Прежде че
Фото: Приложения включенные в подписку Adobe Creative Cloud
Фото: Пример плагинов для фотошоп
Фото: Две идентичные композиции с разным содержимым, сделано с помощью смарт-объекта
Принцип генерации изображений нейросетями
Принцип перекрашивания точек (пикселей) по определённым закономерностям используется и при создании изображений нейросетями. С небольшим обобщением и допущением можно сказать, что нейросеть учат искать и определять закономерности распределения цветных точек на изображении. Затем, опираясь на эти закономерности, из случайных данных (например, белого шума) нейросеть формирует изображение, просто перекрашивая нужные точки в нужный цвет, который соответствует закономерностям требуемого изображения.
Нейросеть не видит картинку как таковую — она «видит» цифровой код с данными о распределении цветов среди заданного количества точек. Закономерности множества таких кодов, описывающих похожие объекты (например, фотографии людей), используются для создания «нового» изображения нейросетью.
Отсюда и появляются изображения с четырьмя пальцами у людей: нейросеть просто недостаточно точно определила закономерность отображения рук в коде фотографии и при создании своего изображения её «видение» (закономерности) соответствует полученному результату. Чем точнее определены закономерности, тем реалистичнее получается изображение.
Подробнее про перекрашивание неоднородных объектов и принцип цветокоррекции
Если хочется лучше понять, как редактор понимает, какие «соседние» цвета/точки выбрать для работы и как их соответственно перекрасить, стоит рассматривать сам цвет как набор параметров или надстроек.
Наши мониторы состоят из цветных лампочек красного, зелёного и синего цветов (RGB — red, green, blue), именно эти три лампочки формируют пиксель. Пиксель светится разными цветами за счёт регулировки яркости каждой из трёх цветных лампочек. Меняя яркость каждой лампочки, мы получаем новый цвет.
Пример: у нас есть красный цвет/объект, при этом лампочка красного светит на 100%, а соседние лампочки синего и зелёного — на 0% яркости. Чтобы перекрасить объект в зелёный, нужно сместить этот шаблон настроек яркости (RGB: 100% 0% 0%) на одну «лампочку» — получится RGB: 0% 100% 0%, то есть зелёный цвет. Ещё дальше — синий, ещё дальше — снова красный.
Если яркости не максимальные и минимальные, например, 24% 78% 9%, то это будет другой цвет. При перестановке этих цифр местами мы получаем вариации цвета, меняя настройки на 1 условную единицу лампочки.
Можно смещать цвет не на целую лампочку, а на дробную долю, например 0.2% — тогда в первом примере получится оранжевый цвет, а не зелёный. Легкое «смещение» цвета даёт огромное количество вариаций. Если пропорционально снизить яркость всех трёх лампочек, появится ещё большее разнообразие оттенков — так работают параметры «цветовой тон» и «яркость».
Когда у нас несколько цветных точек, при применении таких коррекций сразу к ним, меняются их смещение и яркость на одинаковое значение. Так сохраняется естественный переход цвета с сохранением контраста и яркости.
Посмотрите на видео ниже, где я пользуюсь заменой цвета.
Главное не запутайтесь, в центре её скриншот, а не сама панель «палитра цветов».
Смещая немного цвета, все точки пропорционально перекрашиваются. Пока мы не приходим в тот же цвет, сделав полный оборот вокруг RGB лампочек. Проще говоря, меняя цвета, мы просто крутим яркость лампочек по кругу. А на видео, мы наглядно видим смещение цветов от начального положения к новому. Цвета не «перекрашиваются», а просто смещаются на заданное нами «расстояние» к соседним цветам/лампочкам.
Я говорю про лампочки для удобства, но каждый цвет, действительно, имеет «соседние» (вспомните термин «цветовой круг», это оно), к которым мы можем обращаться и без учета RGB лампочек, они здесь для простоты восприятия.
Так работают мониторы и цветокоррекция.
Figma не нужна графическим дизайнерам, Самозванцы и Нейросети
Как обстоят дела на рынке труда в IT сфере? Почему одни имеют синдром самозванца, а другие являются самозванцами? Разбираемся в статье…
Самозванцы в IT. Рынок труда, бесплатные курсы и синдром самозванца.
Стоит ли учить и использовать Figma в 2025 году, когда так активно развиваются нейросети для генерации изображений? Почему фигма – основной инструмент самозванца?
Изображения в растровой графике состоят из набора цветных точек (пикселей), каждая из которых имеет свои координаты и цвет. Точки на экране обычно имеют квадратную форму. Именно к растровым изображениям применяется параметр «разрешение», который обозначает количество точек на единицу площади экрана/монитора. Последовательность этих точек формирует изображения, которые мы привыкли видеть на экране.
Маленький размер точек (пикселей) и высокая плотность их размещения на дюйм (dpi) позволяют нам видеть единое реалистичное изображение, хотя оно и состоит из отдельных точек.
Если увеличить размер точек и уменьшить плотность, то мы получит знакомую всем LED RGB панель как на фото выше.
Изображения в растровой графике — идеально подходят для небольших носителей, таких как экраны телефонов, мониторов, телевизоров, а также для печати на форматах А3, А4, визитках и т.п..
Все цифровые изображения и видео являются растровой графикой. Растровые изображения отличаются реалистичностью и сложностью, содержа в себе бесконечный набор информации с помощью лишь цвета и координат.
Также читайте подробную статью про разрешение, DPI, PPI, Px, формат, пропорции, вектор и растр.
Векторная графика состоит из геометрических примитивов (круг, прямоугольник, прямая, кривая, точка и т.д.). Эти примитивы задаются не цветными точками, а математическими функциями, которые мы изучали на уроках геометрии (y=x^2 Помним?). Таким образом, векторные изображения описываются математически и представляют собой график или чертёж.
Как известно из геометрии, любая линия (отрезок, луч, прямая) состоит из бесконечного количества точек, и для создания векторного изображения нужно рассчитать координаты каждой точки по соответствующей математической функции. В результате у таких объектов (примитивов) есть формула, цвет и параметры пропорций, которые определяют корректные размеры и расстояния между объектами. Эти данные и создают векторное изображение
Сверху вы можете видеть сравнение векторного (слева) и растрового (справа) черного круга. Разница становится более очевидной при увеличении масштаба. Растровая графика состоит из точек (пикселей), а векторная из математических функций, поэтому при масштабировании мы видим пиксели (квадратики/ступеньки) у растрового круга, а вот векторный круг выглядит таким же круглым, поскольку его форма пересчитывается под новый размер на экране.
Важно отметить, что векторная графика — математическая модель, она не может быть визуализирована. Тогда, что мы видим на экранах? А мы видим растровое представление векторного объекта. Т.к. экран состоит из цветных RGB точек, то мы видим растровое изображение векторного объекта. Тогда почему векторная графика существует и выглядит «качественнее» растровой?
Поскольку векторная графика задаётся функциями, то при увеличении масштаба наше устройство (телефон, компьютер) может создавать новые точки (пиксели) по функциям, которые описывают это векторное изображение. Таким образом, при увеличении масштаба у нас появляются новые точки изображения на экране (буквально создаются новые области изображения), а вот растровое изображение имеет просто последовательный набор цветных точек и при увеличении масштаба, добавить новые точки устройство не может, т.к. для этого нет закономерности/инструкции, из-за этого мы видим просто увеличенные цветные квадратики из которых состоит растровое изображение, а это создаёт эффект «мутности» изображений.
Отсюда векторная графика всегда выглядит «чёткой», а растровая «мутной», особенно при масштабировании. Эти буквы, которые вы читаете — векторные. Они на любом мониторе и экране будут выглядеть максимально гладко и хорошо насколько это возможно, т.к. устройство рисует их конкретно под ваш экран.
Таким образом, векторная графика состоит из графических примитивов (функций), которые формируют изображения. Далее цифровые устройства по этим функциям рассчитывают растровый вариант под конкретно ваше устройство, из-за чего такая графика (уже растровая и состоящая из цветных точек) выглядит максимально хорошо на Вашем экране.
Каждое изменение масштаба/размера векторного объекта заставляет устройство рассчитывать (создавать) новое растровое изображение под новые параметры. Отсюда появляется возможность бесконечного масштабирования векторных изображений без потери детализации.
Также читайте подробную статью про разрешение, DPI, PPI, Px, формат, пропорции, вектор и растр.