Учебное пособие по PAINT. Paint: компьютерные цвета Как подобрать цвет в paint

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

Итак, в этой теме будет говориться о том, как сделать фон в Paint . По умолчанию, он в данном простом редакторе является белым.

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

Многие интересуются, используя Paint как сделать прозрачный фон ? К сожалению, в данном устаревшем приложении его невозможно создать таким. Поэтому в этом случае, нужно использовать усовершенствованную версию этой программы, которую можно скачать в интернете - Paint.Net. если у вас операционная система семейства Windows 7, то вам нет необходимости скачивать это приложение, так как оно идет в комплекте. Итак, запустим Пеинт.Net и увидим измененный интерфейс программы, который в отличии от предыдущей версии очень сильно изменился.

Для того, чтобы сделать прозрачный фон в данном графическом редакторе, вам необходимо выделить всю рабочую область специальным инструментом выделения или вы можете воспользоваться комбинацией клавиш Ctrl+A, что выделит всю рабочую область. После выделения вам нужно просто нажать кнопку Del, которая удаляет выделенные объекты. Удалив выделенную область, вы обнаружите на изображении различные чередующиеся цветами квадратики. Это говорит о том, что ваша рабочая область стала без цвета.

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

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

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

Существуют несколько основных способов представления цветов, например когда каждый цвет или оттенок, обозначается HTML кодом и цветовой палитрой RGB в виде #FF7700. Это представление в виде трёх пар шестнадцатеричных цифр, в которых каждая пара отвечает за свой цвет:
первые две цифры — красный цвет, т.е. — R (red)
две в середине — зелёный — G (green)
последние две цифры — синий — B (blue)
Довольно часто используют крадкое представление цвета в виде трех символов #F70, что будет равносильно #FF7700.

Кстати, на веб-ресурсах цвета обычно указываются в стилях CSS.

Давайте перейдем к ответу на главный вопрос — Как узнать цвет пикселя на экране монитора или картинке?

Способов большое множество...

Способ 1. Узнаем цвет в photoshop

Итак, сделаем "снимок экрана" нажатием на клавиатуре клавиши — Print Screen (PrtSc), в том месте, где хотим узнать код нашего цвета. Во время нажатия клавиши система сохранит снимок в буфере обмена. Можно просто скопировать изображение, например из браузера, без PrtSc. Теперь остается только вставить изображение из буфера в фотошоп.

Открываем фотошоп и вставляем изображение (Файл — Создать, Редактирование — Вставить). Ищем на панели инструментов "Пипетка" (Клавиша I), далее щелкаем левой кнопкой мыши в ту область, в котрой хотим "снять" цвет. Все готово! Теперь остается перейти в палитру и узнать код цвета.

Способ 2. Узнаем цвет в Paint

Заходим в Paint — вставляем картинку — используем инструмент "палитра" — переходим в "изменение цветов":

В нашем случае красный — 252, зеленый — 168, синий — 10, т.е. RGB(252,168,10) или в HEX формате #FCA80A.

Способ 3. Просмотреть код элемента в браузере

Опишу способ для браузера Opera. Выделяем мышкой элемент на сайте и щелкаем по нему правой кнопкой мыши — "Просмотреть код элемента" (Ctrl + Shift + C). Откроется панель с html и css кодом, нужно будет найти что-то подобное "color".

Способ 4. Использование специальных средств или программ.

Существует большое количество специальных программ для снятия цвета, мне нравится очень простая прога под названием "Pixie" с весом около 10-11 Кб. Управление очень простое. Достаточно просто навести мышь в нужную точку на экране монитора и нажать следующие клавиши — Ctrl + Alt + C, в результате чего цветовой код скопируется в буфер обмена.

— Возникло подозрение, что картинки, которые ты показал нам прошлый раз, нарисованы не в Paint! — Вася с досадой посмотрел на Шурика.

— Почему ты так решил?

— Хотел повторить эти рисунки, но не мог найти нужных цветов! Для картинки с образцами материала я обнаружил в палитре Paint только два подходящих цвета, не считая белого и чёрного:

— На панели цвета в Paint размещается 28 красок. Однако для рисования можно использовать миллионы компьютерных цветов!

— Ого! Но где же брать эти цвета?

Выбор цвета

— Можно “забрать краску” с готового рисунка при помощи инструмента Выбор цветов :

Курсор принимает форму пипетки:

Краска для основного цвета (щелчок левой кнопкой) и цвета фона (щелчок правой кнопкой) набирается в пипетку с нужного участка рисунка:

— А если рисунка с нужными цветами под рукой нет?

Основная палитра

— Можно заменить любой цвет рабочей палитры одним из 48 цветов основной палитры.

Алгоритм замены цвета

— В основной палитре всего 48 красок. А ты говорил, что в редакторе можно использовать миллионы компьютерных цветов!

— Так оно и есть! Посмотри: под основной палитрой в окошке Изменение палитры есть область Дополнительные цвета с 16 пустыми “коробочками” для краски. Их можно заполнить любыми цветами, которые только способен построить компьютер.

— А как это сделать?

Дополнительные цвета

— Нужно в окне Изменение палитры нажать кнопку Определить цвет . В расширенном окне появляются средства для задания нового цвета:

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

— Верно. Таким образом, например, можно получить комплект серых красок для придания объёма изображению металлической трубы:

— Я заметил, что чем меньше диаметр трубы, тем более она походит на настоящую!

— Для придания объёма на всех трубах использованы пять цветов. Белая полоска по центру создаёт эффект максимальной освещенности. Серые цвета с уменьшающейся яркостью имитируют удаление поверхности от источника света.

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

— А как работать с палитрой дополнительных цветов?

— Замена цвета в рабочей палитре редактора на цвет из основной или дополнительной палитры выполняется одинаково, но эти цвета пропадают, как только закрывается окно редактора.

Заливка

— На панели инструментов редактора есть забавная пиктограмма с изображением баночки. Что в ней? Освежающий напиток для уставшего художника?

— Этот инструмент называется Заливка . Он предназначен для закрашивания замкнутых областей рисунка.

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

Щелчком левой кнопки область окрашивается в основной цвет, а щелчком правой — в цвет фона.

При работе с инструментом надо внимательно следить за замкнутостью окрашиваемой области: краска способна “протечь” наружу через дырочку в один пиксел:

Почему трава зелёная

— Почему трава — зелёная, а песок — жёлтый?

— Потому, что трава отражает зелёный цвет, а остальные цвета — нет. Потому, что песок отражает жёлтый цвет, а остальные — нет.

— Как трава может отражать зелёный цвет, а песок — жёлтый, если они освещаются не зелёным, не жёлтым, а белым цветом?

— Как известно, белый цвет являются смесью всех цветов. Это легко увидеть, если пропустить его через стеклянную призму. Так как разные цвета имеют разные углы преломления, то мы увидим все составляющие белого цвета по отдельности. Условно эти цвета разбивают на семь групп (“цвета радуги”):

Только не надо думать, что белый цвет состоит из семи цветов! Просто в семь групп собраны все оттенки красного, оранжевого, жёлтого, зелёного, голубого, синего и фиолетового цвета. А на рисунке каждая группа условно изображена одним “чистым” цветом.

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

— Остальные цвета трава поглощает.

— А песок поглощает все цвета, кроме жёлтого?

— Верно. Жёлтый цвет песок отражает, и мы таким его видим.

— А как глаз человека различает цвета?

— Свет попадает на светочувствительные клетки глаза (сетчатку). Эти нервные клетки разделяются на колбочки и палочки . Палочки “отвечают” за чёрно-белое вечернее и ночное зрение, а колбочки — за цветное.

Колбочки, в свою очередь, разделяются на три группы: “красные” (воспринимают только красный цвет), “зелёные” (воспринимают только зелёный цвет), “синие” (воспринимают только синий цвет).

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

— Выходит, что любой цвет получается смешиванием трёх цветов: красного, зелёного и синего?

— Я смешал эти краски и получил… почти белый цвет!

— Всё зависит от того, в каких пропорциях брать эти краски.

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

Равные количества красной и синей краски, дают пурпурный цвет, а равные количества зелёной и синей — голубой:

Если взять синюю краску и 75% от ее количества красной, то получается смесь фиолетового цвета. Оранжевый цвет состоит из равного количества зелёной и синей краски и 30% красной:

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

Компьютерные цвета

— Кодирование цвета при помощи трёх составляющих — красной, зелёной и синей — действительно, принято в компьютерном деле и носит название RGB (от R ed — красный, G reen — зелёный, B lue — синий).

— Я слышал, что разные мониторы могут воспроизводить на экране разное число цветов.

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

Давай подробнее рассмотрим этот вопрос.

Пусть каждый из трёх образующих цветов либо участвует в образовании цвета, либо нет. Тогда для кодирования интенсивности красного, зелёного или синего цвета достаточно двух значений: 0 — цвета нет, 1 — цвет есть. При таком кодировании получается палитра из 8 цветов:

Число 8 (цветность монитора) получается перемножением трёх двоек, каждая из которых обозначает число вариантов интенсивности составляющих цветов: 8 = 2 · 2 · 2.

“Чёрный” пиксел (отсутствие красной, зелёной и синей составляющей) имеет цвет экрана монитора в выключенном состоянии.

Давай определим теперь размер видеопамяти необходимой для 8-цветного монитора с разрешением 640x480.

— Придётся опять заняться умножением! Каждый составляющий цвет требует для кодирования один бит (0 — цвета нет, 1 — цвет есть). Значит, для каждого пиксела потребуется 3 бита, чтобы закодировать все три его RGB-цвета.

Получается, что для такого монитора нужна память в 3 · 640 · 480 = 921 600 бит.

— В байтах это: 921 600 / 8 = 115 200 байт. Учитывая, что в одном килобайте 1024 байт, получаем, что видеопамяти в 113 КБ будет достаточно (115 200 / 1024 = 112.5).

Рассмотрим общие правила вычисления цветности монитора и размера видеопамяти, необходимой для работы монитора в заданном разрешении.

Вычисление цветности монитора

Цветное пятно получается наложением RGB-лучей трёх прожекторов:

Пусть каждый прожектор имеет два состояния: выключен и включён.

Сколько цветов на экране смогут создать такие прожекторы?

Если прожектор один, то он создаёт два цвета (один из них чёрный):

Пусть теперь прожекторов два. В каждом состоянии первого второй может быть выключен или включён:

Получается, что двумя прожекторами можно получить 4 цвета: каждое из двух состояний первого прожектора “умножается” на два состояния второго.

Добавим третий прожектор. Каждое его состояние обеспечивает 4 цвета изменением состояний двух других прожекторов. Значит, тремя прожекторами можно получить 8 цветов (2 · 4):

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

Пусть число вариантов интенсивности каждой RGB-компоненты равно k . Получаем универсальную формулу для вычисления цветности C:

C = k · k · k = k 3

Вычисление размера видеопамяти

Сначала определим, сколько бит потребуется для кодирования k состояний одной RGB-компоненты.

Пусть k = 2 (прожектор выключен, прожектор включён). Для кодирования этих состояний прожектора достаточно одного бита:

Для k = 3 потребуется 2 бита:

Двух битов достаточно для кодирования и четырёх состояний:

А вот для кодирования 5 состояний двух битов уже мало:

Заметим, что число битов, необходимых для кодирования k состояний, равно числу двоичных разрядов в двоичной записи числа (k-1) .

Алгоритм вычисления размера видеопамяти

Пусть монитор работает в разрешении w x h , и каждая RGB-компонента может быть в одном из k состояний. Определить V  — размер необходимой видеопамяти.

1. Определим число бит для кодирования одной компоненты. Для этого запишем число k-1 двоичным кодом и подсчитаем число получившихся двоичных разрядов b .
2. Определим число бит, необходимых для кодирования одного пиксела:

   P = 3·b (кодирование 3-х компонент)

3. Определим размер видеопамяти:

   V = p·w·h

Пример

Подсчитаем необходимый размер видеопамяти для разрешения 640x480, если каждая RGB-компонента имеет 6 градаций интенсивности.

Дано: k = 6 w = 640 h = 480

1. Определим число бит для кодирования одной компоненты. Для этого запишем число k-1 = 5 двоичным кодом и подсчитаем получившееся число двоичных разрядов: 5 = 101 b = 3
2. Определим число бит, необходимых для кодирования одного пиксела: p = 3·3 = 9 бит
3. Определим размер видеопамяти: V = 9·640·480 = 2 764 800 бит = 345 600 байт

Режимы работы монитора

— В настройках цветовой палитры моего монитора написано “True Color (24 бита)”. Что это означает?

— Английское выражение “True Color” переводится как “естественные цвета”. Каждый составляющий RGB-цвет кодируется в этой палитре 8 битами. Для трёх цветов получается 24 бита на один пиксел.

— Сколько же градаций интенсивности цвета можно закодировать 8 битами?

— Восемью битами можно кодировать числа от 0 до 255, то есть всего можно закодировать 256 значений.

Ниже приводятся примеры 8 цветов из 24-битной палитры. Рядом с каждым цветом указаны значения его RGB-составляющих. Указан двоичный 8-битный код и десятичное число, соответствующее этому коду.

Вот задание для тебя: подсчитай, сколько всего цветов в 24-битной палитре, и сколько видеопамяти потребуется для хранения полного экрана монитора с разрешением 640x480.

— Число цветов определяется перемножением числа вариантов RGB-составляющих. Получается: 256 · 256 · 256 = 16 777 216.

О-го-го! Более 16 миллионов цветов!

Теперь подсчитаем объём видеопамяти: 24 · 640 · 480 = 7 372 800 бит.

В килобайтах это получается: 7 372 800 / 8 / 1024 = 900 КБ.

Конструирование цвета

— Конструируя новый цвет в графическом редакторе, можно работать движками цвета и яркости, а можно записывать числовые значения RGB-компонент в окошках ввода:

— А что означают еще три окошка с надписями Оттенок , Контраст и Яркость ?

— Числа в этих окошках описывают цвет в другой системе кодирования — HSB (от H ue — цветовой тон, оттенок; S aturation — насыщенность, контрастность; B rightness — яркость).

Выбор цвета при помощи движков в окне Изменение палитры как раз соответствует цветовой модели HSB. Перемещение движка цвета по горизонтали меняет оттенок (H), по вертикали — контрастность (S). Перемещение треугольного движка (по отдельной вертикальной линейке) меняет яркость (B).

Оттенок (тон) — это цвет на радуге.

Контрастность (насыщенность) — это содержание в цвете серой примеси. Цвет максимальной насыщенности не содержит серого вообще, а при нулевой насыщенности — все цвета серые.

Яркость — это интенсивность, с которой излучается цвет. При максимальной яркости все цвета превращаются в белый цвет, при нулевой — в чёрный.

— Подбирать цвет по системе HSB, конечно, проще, чем задавать его в виде RGB-компонент! Сначала выбираешь цвет на радуге (слева направо), потом устанавливаешь его контрастность (сверху вниз), а затем задаёшь яркость отдельным движком.

1. Как можно “забрать” цвет с готового рисунка?
2. Как закрасить замкнутую область?
3. Что произойдёт, когда контур закрашиваемой области имеет разрыв?
4. Расскажите алгоритм замена цвета рабочей палитры на цвет из основной или дополнительной палитры.
5. Почему трава зелёная, а песок жёлтый?
6. Что произойдёт, если белый цвет пропустить через стеклянную призму?
7. Верно ли, что радуга состоит из 7 цветов?
8. Объясните устройство человеческого глаза.
9. Какие нервные клетки отвечают за чёрно-белое, сумеречное зрение?
10. Какие нервные клетки отвечают за цветное зрение?
11. Как формируется информация о цвете в зрительном нерве?
12. Какой цвет получится, если смешивать красную, зелёную и синие компоненты?
13. Какой цвет получится, если смешать равное количество красок чистого красного, зелёного и синего цвета?
14. Какой цвет получится, если смешать равное количество красок чистого красного и зелёного цвета?
15. Какой цвет получится, если смешать равное количество красок чистого зелёного и синего цвета?
16. Какой цвет получится, если смешать равное количество красок чистого красного и синего цвета?
17. Как называется система кодирования цвета в компьютере?
18. Как задаётся цвет в системе кодирования RGB?
19. Назовите цвета 8-цветной палитры и их двоичные коды.
20. Как получаются чёрный и белый цвета на экране компьютера?
21. Почему при выборе монитора рекомендуется обращать внимание на цвет экрана в выключенном состоянии?
22. Что такое цветовая палитра монитора?
23. Чем определяется число битов, необходимых для кодирования цвета одного пиксела?
24. Что хранится в видеопамяти компьютера?
25. От чего зависит размер видеопамяти, необходимой для показа на экране цветного изображения?
26. Как рассчитать необходимый размер видеопамяти?
27. Как рассчитать цветность монитора, если задано число вариантов интенсивности RGB-компонент?
28. Как называется система кодирования цвета, на основе которой построен интерфейс подбора цвета в графическом редакторе?
29. Как задаётся цвет в системе кодирования HSB?
30. Что такое тон, насыщенность (контрастность) и яркость цвета?
31. Расскажите алгоритм конструирования цвета при помощи HSB-интерфейса.

Вариант 1

Сколько памяти (в битах) потребуется для кодирования цвета одного пиксела на чёрно-белом мониторе (без полутонов)? Как можно закодировать состояние пиксела?

На чёрно-белом мониторе отображаются только двухцветные изображения с разрешением 640х200. Какой минимальный объём в байтах должна иметь видеопамять для хранения такого изображения?

В следующей таблице представлена кодировка 8-цветной палитры с помощью трёхразрядного двоичного кода:

Определите по таблице, смешением каких цветов получается цвет:

• голубой,
• розовый,
• жёлтый,
• чёрный?

Вариант 2

1. Исследуйте возможные настройки вашего домашнего монитора — палитру и разрешение (щёлкните правой кнопкой мыши по Рабочему столу , затем из контекстного меню выберите Свойства , вкладка Настройка , выпадающий список Цветовая палитра и бегунок Область экрана ). Запишите значения из списка и с бегунка.

   Рассчитайте по обнаруженным данным минимальный и максимальный объём видеопамяти в КБ и МБ, которая используется при работе вашего монитора.

Вариант 3

Первый способ.
Так можно избавиться от белого фона на картинках PNG, часто выставляемых для скачивания в Интернете.

1. Открыть файл (Файл - Открыть - Выбрать нужное изображение из папки.)

2. Берём "Волшебную палочку" (щелчок левой кнопки мыши) слева в Панели инструментов, кликаем по белому фону на картинке. Белый фон потемнеет.

3.В Меню программы выбираем "Правка"- "Инвертировать выделение"

4. Теперь выбираем "Изображение" - "Обрезать по выделению".

Можно и не инвентировать, а выбрать "Изображение" - "Очистить выделение".

А теперь смотрим, что получилось.

Теперь второй способ . С помощью плагина цветозаменяемости Color Replace

После открытия картинки, идём "Эффекты" - "Color Replace"
Двигаем рычажки, наблюдая за эффектом. Можно отключить не нужные цвета (убрать галочки).

Как видим, очистился и белый фон у губ, и белки глаз. Нужно снова их подкрасить.
Цвет в Палитре ставим белый. Берем снова Волшебную палочку" и щелкаем по тем местам, где будем закрашивать. Не забываем держать нажатой Ctrl на клавиатуре, чтобы не выделять каждую область отдельно. Затем "Правка" - "Заполнить выделение".

Вот, что у нас получается.

Вырезаем нужный участок

Открываем картинку, берём "Лассо" и выделяем нужный участок. Я выделю бутон мака. Выделять нужно, чтобы обязательно было замкнутое пространство.

Теперь идём в Меню. "Изображение" - "Обрезать по выделению"

Можно подправить кое-что ластиком.

Чтобы узнать точный цвет (оттенок цвета) на картинке (фотографии) существует много способов.
Кратко расскажу только о 5-ти таких возможностях:
определении цвета на изображении в графических редакторах (GIMP и Paint.NET ), с помощью расширений для Google Chrome - Color Pick и Eye Dropper , а также программой-утилитой Color Pix .

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

Рис.1. Инструмент Пипетка в графическом редакторе GIMP.

2. В другом графическом редакторе Paint.NET это будет выглядеть так.

Рис.2. Инструмент Пипетка в графическом редакторе Paint.NET.

При работе в интернете для определения цвета определённого участка (рисунка) на веб-странице можно использовать специальные программы и расширения браузера.
Так, например, в Google Chrome есть несколько симпатичных расширений.
Я попробовала использовать Color Pick и Eye Dropper.

3. Расширение Color Pick для Google Chrome после установки выглядит так.



Расширение можно “оторвать” от панели расширений браузера, нажав кнопку “Открыть в отдельном окне” (внизу справа см. рис.3), после чего переместить его в нужное место.
Внешний вид расширения и выводимую информацию можно настроить по своим предпочтениям.

Рис.4. Настройки расширения Color Pick.

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

4. Расширение Eye Dropper для Google Chrome более информативное.
Оно имеет 3 вкладки: Выбор цвета с веб-страницы, Палитра цветов и О программе.
Расширение удобно тем, что запоминает несколько образцов ранее выбранного цвета (см. “История” на рис.5).
После щелчка по кнопке “Выбрать цвет с веб-страницы” возле курсора мыши появляется квадратик-образец цвета, а также внизу экрана появляется информационное окошко (см. рис.6).

Рис.6. Информационное окошко Eye Dropper.

Расширение так же имеет настройки: Основные, Внешний вид, Выбор цвета, Сочетание клавиш.