Как определить цвет в фотошопе

Не могу найти код цвета в Фотошопе!

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

По всем руководствам после того, как я два раза щелкну по образцу цвета в основной палитре, я должна видеть следующее:

где закономерно есть строчка, в которой отображается код цвета rgb.

Я же после выполнения указанных действий вижу такое окошко:

соответственно строки «код цвета» тут нет. А очень нужно.

Дело в настройках? Где и что изменить, чтобы у меня отображалось окно как на 1-й картинке. Или где еще искать код цвета? У меня Фотошоп CS2.

Узнать цвет пикселя онлайн

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

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

Определение цвета в браузере

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

Определение цвета в браузере:

1. Следует кликнуть правой кнопкой мыши в любой части страницы сайта;
2. Выбрать в контекстном меню пункт «Просмотреть код» («Просмотреть код элемента»). Либо можно нажать комбинации клавиш Ctrl + Shift + I или Ctrl + Shift + C , после чего откроется HTML и CSS код сайта;
   
3. Необходимо в колонке с CSS кодом найти любой элемент, у которого задан цвет. Его отыскать не сложно, ориентироваться нужно по цветным квадратикам. См. скриншот ниже;
   
4. Следует кликнуть по этому квадратику, после чего на том же месте откроется инструмент подбора цветовой палитры. При этом, если переместить мышку на страницу сайта, то курсор поменяет свой вид и будет выглядеть, как прицел, а рядом с ним будет круг, в котором отображены многократно увеличенные, попадающие в этот самый прицел пиксели.
   
5. Достаточно навести курсор на нужный пиксель и кликнуть левой кнопкой мыши. После чего в окне с палитрой будет выбран нужный цвет. Он будет отображен в кружке. Кроме того, будет указана информация о коде цвета в HEX. Если нажать на стрелочки с правой стороны от кода цвет, то можно выбрать другую систему кодирования цвета, например, RGB, RGBA, HSV.
   

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

Перемещая курсор по палитре можно изменить цвет выбранного элемента (не работает с картинками и фото).

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

Достаточно сделать следующее:

1. Открыть браузер;
2. Зажать файл картинки левой кнопкой мыши;
3. Не отпуская, перенести его в окно браузера;
4. После того, как картинка будет открыта в браузере, можно смело использоваться инструмент.

Как определить цвет пикселя на картинке онлайн

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

Подобных онлайн-сервисов огромное множество. Я добавлю ссылки лишь на 3:

Все они очень простые в использовании. Нужно:

1. Открыть любой онлайн-сервис по ссылке выше;
2. Загрузить картинку с компьютера;
3. Кликнуть мышкой по картинке, после чего будет указан точный цвет пикселя и его код в различных форматах.

Photoshop и Paint: как узнать цвет с помощью пипетки

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

Определение цвета с помощью палитры в Paint:

1. Следует открыть Paint;
2. Загрузить нужную картинку;
3. В верхнем меню выбрать инструмент «Палитра», после чего появится значок пипетки;
4. Достаточно просто клацнуть мышкой в нужном месте картинки;
5. В разделе «Цвета» отобразится нужный цвет;
   
6. Далее следует перейти в «Изменение цветов», где в нижней правой части окна будет отображен цветовой код картинки в формате RGB.
   

Определение цвета с помощью пипетки в Photoshop:

1. Нужно запустить Photoshop;
2. Загрузить нужную фотографию или картинку;
3. Нажать на инструмент «Пипетка»;
4. Кликнуть в нужной части изображения (если кликнуть по нужному пикселю сложно, то можно увеличить масштаб картинки до приемлемого размера);
5. В правой части экрана будет отображен нужный цвет;
   
6. Если кликнуть по маленькой иконке цвета, то откроется окно с детальной информацией о цвете выбранного пикселя.
   

Приложения для определения цвета для Google Chrome

Для быстрого определения цвета онлайн можно использовать вспомогательные расширения (плагины).

Все они очень просты в использовании. Нужно:

1. Установить любое расширение;
2. Запустить его стандартным образом, нажав на значок расширения в верхнем правом углу экрана браузера.

Конечно же, подобные плагины есть не только для Google Chrome, но и для Mozilla Firefox, Opera, Яндекс браузера. Чтобы их найти необходимо в магазине расширений в своем браузере в поле поиска вбить «Color Picker».

Программа для определения цвета на экране

Для выполнения поставленной задачи, можно использовать программы для определения цвета на экране.

Pixie – очень простая в использовании программа, которая легко поможет определить какого цвета пиксель на экране монитора.

Photoshop для верстальщика

Напомню, сперва для сайта делается дизайн. Дизайн — это изображение будущего сайта. Дизайнится каждая типовая страница сайта (главная страница, страница новости, страница товара, страница каталога, страница записи блога и т.д.).

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

А вот Photoshop требует небольшого обучения. И Photoshop — это самая популярная программа для создания дизайнов.

Уточню, что дизайн это не цельное изображение. Дизайн страницы сайта состоит из множества частей и картинок. Каждую отдельную картинку из Photoshop можно скачать и установить в верстку. Но лучше это, конечно, понять на деле.

Photoshop нужно скачать и установить на компьютер.

Изучать Photoshop Вы будете на примере этого дизайна design.zip.

Скачайте архив. Внутри находится только 1 файл design.psd. Откройте этот файл в Photoshop.

При открытии файла у Вас появится несколько диалоговых окон:

Здесь нажмите «Сохранить слои».

Здесь нажмите «ОК».

3. И третьей окно, в котором написано «Некоторые текстовые слои содержат шрифты. «. Здесь нажмите «ОК».

После этого откроется дизайн.

Первое на что нужно обратить внимание, это чтобы в левой панели фотошопа был выбран курсор:

Дальше. Сейчас у Вас дизайн открыт в маленьком масштабе. Чтобы увеличивать или уменьшать масштаб нужно зажать клавишу Alt и крутить колесико мышки.

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

Извлечь определенную картинку из дизайна в Photoshop

Чтобы вставлять в верстку разные картинки из дизайна, эти картинки нужно сохранить к себе на компьютер. Как это сделать. Мы будем извлекать из нашего дизайна вот такую картинку:

Чтобы выбрать любой объект в дизайне нужно зажать клавишу ALT и щелкнуть по этому объекту правой кнопкой мыши. Поэтому зажмите клавишу Alt и щелкните правой кнопкой мыши по указанной картинке.

Посмотрите в правую панель фотошопа. Там выделена наша картинка:

Теперь здесь в правой панели нажмите на название этой картинки правой кнопкой мыши. Именно на название картинки, а не на квадратик. После нажатия появится окно, в котором нужно выбрать «Создать дубликат слоя. «.

Появится другое окно:

В этом окне нужно в поле Документ выбрать «Новый» и нажать кнопку ОК.

После этого картинка откроется в отдельном окне фотошопа:

Но вместе с картинкой иногда открывается лишняя область. Чтобы эту область убрать нужно сделать следующее. Зажать клавишу Ctrl и в правой панели фотошопа нажать мышкой на квадратик рядом с названием картинки:

После этого картинка выделится пунктирной линией. Теперь нужно в левой панели выбрать инструмент «Рамка» и нажать на Enter 2 раза:

После этих действий у вас останется только картинка без лишней области. Осталось картинку сохранить на компьютер. Делается это сочетанием 4 клавиш: Ctrl+Alt+Shift+S. Вот так в фотошопе. Нужно постараться, чтобы сохранить картинку. Если не хотите нажимать эти 4 клавиши, то можно мышкой выбрать меню «Файл», а в нем выбрать «Сохранить для Web. «:

После этого откроется диалоговое окно для сохранения картинки:

Здесь нужно просто выбрать формат: обычно это JPEG или PNG-24. И нажать кнопку «Сохранить».

Определить код цвета в Photoshop

Следующее, что часто нужно будет делать — это точно определить цвет. Делается это очень просто. В левой панели фотошопа нужно выбрать инструмент «Пипетка»:

И теперь этой пипеткой можно ткнуть в нужный цвет в дизайне. Ткнуть достаточно 1 раз. Нужный цвет можно будет посмотреть в левой панели фотошопа вот здесь:

Просто кликните 1 раз по этому квадратику и у Вас откроется диалоговое окно, где можно скопировать код цвета:

Определение шрифта в Photoshop

Часто нужно определить шрифт, его размер и цвет. А также, обычный стиль шрифта (Regular) или жирный (Bold).

Для этого, так же как и для выбора картинки нужно зажать клавишу Alt и правой кнопкой мыши нажать на нужный шрифт. Например, в нашем дизайне определим шрифт для навигации в самом верху. Зажмите Alt и правой кнопкой мыши нажмите на слово Home. В правой панели фотошопа выделится нужный шрифт. Здесь же в правой панели нажмите двойным кликом на квадрат с буквой Т рядом со шрифтом:

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

Сейчас Вы нажали «ОК» и у Вас выделился весь выбранный текст в дизайне. А вверху фотошопа появилась вся информация о выделенном шрифте:

Стрелками я указал, какая информация нам интересна. Слева направо:

• семейство шрифтов (название шрифта). В CSS это font-family;
• стиль и начертание шрифта. Если здесь указано Regular, то это обычный шрифт. Если Bold, это это жирный шрифт и в CSS у него будет font-weight: bold;. Если Italic, то это курсив, и в CSS нужно будет прописать font-style: italic;
• размер шрифта. В CSS размер шрифта указывается свойством font-size;
• цвет шрифта. В нашем случае здесь стоит знак вопроса, потому что не весь шрифт одного цвета. Слово Services в навигации отличается цветом. Чтобы узнать цвет конкретного слова, нужно выделить мышью именно это слово прямо в дизайне. Например, если Вы сейчас выделите слово Home, то знак вопроса пропадет. Чтобы получить цвет, нужно кликнуть мышью по этому прямоугольнику с цветом шрифта, и появится уже знакомое диалоговое окно с кодом цвета.

Кстати, в дизайне в навигации слово Services сделано другим цветом не просто так. Таким образом дизайнер показал, как в верстке должны будут выглядеть ссылки навигации при наведении на них курсора мыши. Ведь навигация на сайте представлена ссылками. Если говорить об этом дизайне, то на будущем сайте можно будет нажать на Home, About, Services и т.д.

Ну, а эффект наведения в верстке делается в CSS псевдоклассом :hover.

Помните, чтобы выделить текст, он должен быть сперва выбран в правой панели фотошопа. Если Вы просто в дизайне начнете стараться выделить каждый текст, как делаете это в Word, то у Вас ничего не получится. Нужно сперва зажать Alt и нажать на текст правой кнопкой мыши, и действовать далее, как уже описано выше.

Определить расстояние, размеры

В CSS существуют внешние и внутренние отступы (margin и padding). Когда Вы будете делать верстку по дизайну, нужно будет прописывать отступы между элементами в соответствии с дизайном. Определить расстояние между элементами в Photoshop можно разными способами. Один из самых простых — это использовать инструмент «Прямоугольная область» в левой панели фотошопа.

В левой панели фотошопа выберите инструмент «Прямоугольная область»:

И теперь попробуйте определить расстояние между словами Home и About в дизайне:

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

Потом, чтобы убрать получившийся прямоугольник, просто нажмите сочетание клавиш Ctrl+D.

Чтобы получать наиболее точные расстояние увеличивайте масштаб дизайна зажав Alt и крутя колесико мышки.

Инструментом «Прямоугольная область» можно также определять размеры элементов и радиус закругления элемента (в CSS это свойство border-radius).

Чтобы определить радиус закругления нужно измерить сам закругленный угол. Обычно для этого нужно сперва очень сильно увеличить масштаб дизайна:

Еще немного о Photoshop

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

Обратите еще внимание на правую панель. А именно на иконки глаза. Если Вы выключите иконку глаза у какого-либо элемента, то в дизайне он станет невидимым. Если выключите эту иконку у всей папки, то пропадет всё, что есть в этой папке:

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

Иногда можно увидеть скрытый слой под название grid. Его верстать не надо — это вспомогательная прослойка в дизайне. Эта прослойка помогает как дизайнеру ровно размещать элементы, так может помочь и Вам быстро определять отступы.

Вместо слоя grid дизайнер мог использовать направляющие:

Их тоже верстать не надо. Чтобы их скрыть или отобразить нужно нажать сочетание клавиш Ctrl+;. Или можно вверху фотошопа зайти в «Просмотр», там выбрать «Показать» и там кликнуть на «Направляющие.

Еще момент. Иногда удобно видеть рамку вокруг элемента, с которым Вы работаете. Для этого в верхней панели Photoshop нужно нажать галочку «Показать упр. элем.»:

Кстати, после этого можно будет мышкой изменять размеры элемента. Но Вам как верстальщику это не нужно будет делать.

Дальше. В левой панели почти у всех инструментов есть сопутствующие инструменты. Чтобы их увидеть нужно на инструмент нажать правой кнопкой мыши:

Ну, и последнее, прямо сейчас поменяйте пункты на пиксели. После этого шрифт у Вас будет измеряться в пикселях (px), а не в пунктах (pt). Для этого зайдите в «Редактирование» → «Установки» → «Основные»:

Откроется окно. В нем зайдите в «Единицы измерения и линейки». И там для линеек и текста выберите пиксели. Нажмите кнопку «Ок»:

Как определить цвет в фотошопе?

Автор: Накрошаев Олег. Дата публикации: 02 марта 2020 . Категория: Обработка фотографий в фотошопе.

Как определить цвет в фотошопе?

Любой фотошоп мастер обрабатывает свои фотографии.

И в процессе обработки приходит к выводу, что ему следует научиться «читать» цвет.

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

Мы практически всегда работаем в фотошопе со снимком, который находится в цветовом пространстве RGB.

Но, в этом пространстве цвет определять по цифрам довольно трудно.

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

В 1981 г. американцы Дэвид Хьюбл (David H.Hubel) и Торстен Вайзел (Torsten N.Wiesel) получили Нобелевскую премию за исследование зрения человека.

Они доказали, что глаза человека выдают в мозг информацию вовсе не о красном (R), зелёном (G) и синем (B) цветах.

Оказывается, мозг получает информацию о разнице яркости белого и чёрного, о разнице цветов Green (зеленый) и Magenta (пурпурный), и о разнице цветов Blue (синий) и Yellow (желтый).

Т.е., именно LAB более физиологично и максимально соответствует специфике зрительного восприятия человека.

Давайте мысленно сравним анализ цвета в случае RGB и LAB.

В первом случае (RGB) считываем три цифры, которые одновременно определяют и яркость, и цвет. Причём их визуализация требует ощутимых мысленных усилий.

Во втором случае (LAB) тоже имеем три цифры.

Но! — первая из них означает яркость в %.

А цвет определяют две остальные.

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

А их абсолютная величина определяет насыщенность цвета.

Становится очевидным, почему и насколько считывание цвета в LAB проще и информативнее, чем в RGB.