полезные инструменты, книги, статьи для веб-дизайнеров

• Дизайн
• 4 мин на чтение
• 3418

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

Инструменты

Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.

Multicolr — полезный поисковый сервис, который умеет находить по одному или нескольким цветам фотографии на Flickr (более 10 миллионов под лицензией Creative Commons).

Check My Colours — сервис, проверяющий читабельность текста на любом сайта. На скриншоте — часть результатов Хабра.

Sphere — выбор цветов в соответствии с теорией цвета, почти научный подход к выбору палитры

.>

0to255 — помогает тонко выбрать нужный оттенок цвета.

CSS Color Names — наглядно демонстрирует все 147 названий цветов на английском.

Color Hexa — небольшая интерактивная энциклопедия цвета с полезными функциями.

Color Blender — «смешивает» два цвета, находя промежуточный

Таблица «безопасных» цветов, которые можно использовать в веб-дизайне, от Студии Артемия Лебедева. Штука несколько устаревшая, полезна скорее для общего развития, чем практического применения.

Color Palette Generator — составляет цветовую палитру любого изображения.

color.hailpixel.com — полноэкранный выбор цветов, удобно.

Flat UI Colors — простой сервис для выбора цветов из набора Flat UI от Designmodo.

Статьи

В качестве введения полезны статьи из Википедии: Цвет и Список цветов.

Статья о теории цвета на Хабре.

Серия статей о цвете от Smashing Magazine с упором на веб-дизайн, теория и практика, обязательна к прочтению:

1. Color Theory For Designers, Part 1: The Meaning of Color
2. Color Theory For Designers, Part 2: Understanding Concepts And Terminology
3. Color Theory For Designers, Part 3: Creating Your Own Color Palettes

Colors in Web Design: An Exploration — статья на Six Revisions, где на практических примерах объясняется правильное использование цветов в веб-дизайне.

An Introduction to Color Theory for Web Designers — статья от Tutsplus для веб-дизайнеров об использовании цветов на сайтах, в том числе в типографике.

How to Calibrate Color for the Web — подробно описывается калибровка цветов в изображениях, предназначенных для интернета.

Colors in Web Design: Choosing a right combination for your Website — статья от 1stwebdesigner, рассказывающая о пользовательском восприятии цветов в веб-дизайне.

20 colour tips for website design — лаконичные советы по правильному использованию цветов в веб-дизайне.

Книги и другое полезное чтиво

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

Искусство Цвета, автор Иоханнес Иттен (1888-1967) — одна из самых популярных книг по теории цвета во всем мире. Есть на Озоне.

Color Design Workbook: A Real World Guide to Using Color in Graphic Design — хорошая книга об использовании цветов в дизайне.

The Ultimate Guide to Fantastic Color Usage — не совсем книга от Smashing Magazine, просто так называется, очень практично и структурированно рассказывается о цвете, применительно к веб-дизайну.

The Psychology of Color — удобная памятка о восприятии цветов.

UPD

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

© rutm, habrahabr.ru

• #дизайн
• #инструмент
• #книга

• 0

Работа с цветом—Справка | Документация

• Определения цвета
• Создание нового цвета
• Создание нового цвета с помощью Менеджера стилей
• Определение нулевого цвета
• Работа с настройками монитора

Цвет — одно из основных свойств для всех символов и элементов карты.

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

Определения цвета

В ArcMap цвет может быть задан в одной из пяти моделей:

• RGB—Красный, зеленый, синий
• CMYK — голубой, пурпурный, желтый, черный
• HSV — тон, насыщенность, значение
• Серый — гамма оттенков серого цвета
• Имя- названия цветов в ArcInfo

Создание нового цвета

Вы можете создавать новые цвета для символов, щелкнув условное обозначение в таблице содержания правой кнопкой мыши или щелкнув ниспадающее меню Цвет в диалоговом окне. Меню Цвет (Color) открывается из диалоговых окон Свойства слоя (Layer Properties), Выбор символа (Symbol Selector), диалогового окна Свойства (Properties) графики и диалогового окна Менеджер надписей (Label Manager).

Шаги:

1. Щелкните стрелку ниспадающего списка Цвет (Color).
2. Выберите новый цвет или щелкните Другие цвета (More Colors), чтобы перейти к выбору дополнительных цветов.
3. Используйте диалоговое окно Выбор цвета (Color Selector), чтобы создать новый цвет, если вы выбрали Дополнительные цвета (More Colors).
4. Нажмите кнопку со стрелкой и выберите Сохранить цвет (Save Color), чтобы сохранить новый цвет.
5. Введите название для нового цвета.
   • Цвет будет сохранен в вашем персональном стиле.

Создание нового цвета с помощью Менеджера стилей

Шаги:

1. Щёлкните Настройка (Customize) > > Менеджер стилей (Style Manager).
2. Выберите стиль, в который сохранить новый цвет:
   • Если стиль, в который вы хотите добавить символы, в настоящий момент используется, он будет находиться в списке на левой панели диалогового окна Менеджер стилей (Style Manager).
   • В противном случае, щелкните кнопку Стили (Styles), чтобы выбрать нужный стиль из списка доступных.
   • Если нужный стиль не находится в списке, щелкните кнопку Добавить стиль в список (Add Style to List), чтобы найти другой стиль или щелкните кнопку Создать новый стиль (Create New Style), при этом откроется новый пустой файл стиля.
3. Когда нужный стиль появится на левой панели в диалоговом окне Менеджер стилей (Style Manager), разверните его, чтобы просмотреть структуру его папок. Увеличьте диалоговое окно Менеджера стилей (Style Manager), если необходимо.
4. Откройте папку Цвета. Если в стиле есть цвета, они будут перечислены.
5. Щелкните правой кнопкой мыши на пустом пространстве правой панели.
6. В контекстном меню щелкните Новый (New), а затем выберите подходящую цветовую модель. Откроется диалоговое окно Редактор свойств символа (Symbol Property Editor).
7. Выберите цвет в окне Цвет (Color) или используйте изменяемые числовые поля в вашей цветовой модели для того, чтобы получить необходимый цвет.
8. Нажмите ОК.
9. Введите название для нового цвета в диалоговом окне Содержание (Contents).

Определение нулевого цвета

Использование опции нулевой цвет позволяет вам создавать прозрачные участки в ваших символах. Оно также позволяет вам отключать отображение контуров. Для того, чтобы определить нулевой цвет, вы должны задать свойство Прозрачный цвет (Color is Null). Значение нулевого цвета не может быть использовано для того, чтобы скрывать или блокировать отображение других цветов.

Опция Нет цвета (No Color) на цветовой палитре производит тот же визуальный эффект, что и Прозрачный цвет (Color is Null), но при включении опции Прозрачный цвет (Color is Null) ArcMap сохраняет предыдущее значение цвета. (На рисунке выше видно, что при выключенной опции Прозрачный цвет (Color is Null) отображается исходный коралловый цвет заливки. При использовании опции Нет цвета (No Color) коралловый цвет теряется.)

Подсказка:

Вы можете использовать инструмент Пипетка (Eye Dropper) для определения значений RGB для любого цвета на карте и сохранения этого цвета в вашем персональном стиле. В меню Настройка (Customize) в ArcMap выберите Режим настройки (Customize Mode), чтобы открыть диалоговое окно Настройка (Customize). Щелкните закладку Команды (Commands) и перейдите к категории Компоновка страницы (Page Layout). Перетащите инструмент Пипетка (Eye Dropper) на требуемую панель инструментов.

Работа с настройками монитора

Диалоговое окно Настройки монитора (Monitor Setup) позволяет изменять визуальное оформление цветов в ArcMap, чтобы они отображались, как на мониторе вашего компьютера.

Более подробно:

В диалоговом окне Настройка монитора (Monitor Setup) используйте элемент управления Монитор (Monitor) для определения устройства отображения. Фактор отклика Контрастность (Gamma) используется в качестве «мощности» для изменения входного напряжения и выходной яркости; введите целое число между 1 и 3. Белая точка (White Point) изменяет фактор входного источника света. Температура источника света измеряется в кельвинах. 6500 K приводит к постоянному освещению, не зависящему от внешних влияний. В меню Фосфор (Phosphorus) можно выбрать пункт Пользовательский (Custom) для ввода личных настроек.

Связанные разделы

Преобразователь цветов

, RGB в HEX; конвертировать RGB в HEX, HSB, HSL, CIELab

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

Цвет RGB
Состоит из компонентов красного, зеленого и синего. Это базовая цветовая модель для конвертера.

Цвет HEX
Это шестнадцатеричное представление десятичного числа RGB. ценности.

Яркость (относительная)
Расчетное значение относительной яркости для определенного цвета с точки зрения RGB-серого.

Цвет HSB
Состоит из компонентов оттенка, насыщенности и яркости. Он получен из цветовой модели RGB. Чтобы лучше понять эту цветовую модель можно представить как HTS (оттенок, оттенок, оттенок) модель.

Цвет HSL
Состоит из компонентов оттенок, насыщенность и яркость . Он получен из цветовой модели RGB. Говорят, что модель HSL чтобы представить наиболее естественный способ того, как мы думаем о цвете.

Цвет CMYK
Состоит из компонентов голубого, пурпурного, желтого и черного (ключевой). Это стандартная цветовая модель для печати. Эти значения ни в коем случае не подходят для практического использования! очень простая формула используется для преобразования расчета обратные значения RGB и применение упрощенного серого компонента Логика замены. Это показывает, что настройка управления цветом требуется для качественного преобразования и важно понимать разницу между относительным и абсолютным цветовые пространства.

CIE L*a*b* или CIELAB
Состоит из компонентов luma , зеленого/красного и синего/желтого. Если вы преодолеете определенный порог в положительном или отрицательном направлении для значения a* или b*, которые вы перемещаете за пределами цветового пространства sRGB, и поэтому значения RGB больше не меняются.

winHSL240
Состоит из компонентов оттенка, насыщенности и легкость . Это внутренняя цветовая модель ОС Windows™, например. используется в краске и Вордпад. Компоненты имеют диапазон 0-239, 0-240 и 0-240.

winHSL255
Состоит из компонентов оттенок, насыщенность и яркость . Это цветовая модель, используемая в программах Microsoft® Office. Компоненты имеют диапазон 0-254, 0-255 и 0-255.

pHSL color
Состоит из компонентов тона, насыщенности и светлоты . Это собственная разработанная цветовая модель Painter HSL, охватывающая подмножество HSL с намерением потенциально выбрать более эстетичный привлекательные цвета.

Web color
Показывает цвет web, ближайший к текущему активному цвету, находя наименьшее расстояние значений RGB.

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

Ссылка на эту страницу:

URL-адрес

HTML-ссылка

Цитирование

Электронная почта

Скопируйте и вставьте следующий текст:

Нажмите здесь, чтобы отправить адрес страницы с помощью почтовой программы.

воспринимаемая яркость, яркость и контрастность

Определенный цвет можно определить по оттенку (0° — 360°), насыщенности (0% — 100%) и яркость (0% — 100%). Яркость с другой рука является мерой для описания воспринимаемой яркости цвет (Британская энциклопедия: «яркость, или визуально воспринимаемой яркости»). Вы можете осветлить или затемнить цвет, регулируя его значение яркости, но легкость не единственная размер, который следует учитывать для яркости. Это потому, что каждый оттенок естественно имеет индивидуальное значение яркости.

В цветовом пространстве HSL чистый оттенок определяется на уровне насыщенности 100% и уровень яркости 50%. Для визуализации личности яркость оттенка, давайте посмотрим на основные оттенки цвета колесо с постоянными уровнями насыщенности и яркости преобразовано в оттенки серого.

Таким образом отображаются три измерения цвета. к одному измерению, т. е. к свету (несовости), со ссылкой на белый = 100%.

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

Если яркость зависит от оттенка, она также зависит от насыщенности. Снижение уровня насыщенности любого чистого оттенка до 0% приводит к 50% серого и 50% значения яркости соответственно. Итак, по оттенкам при естественной яркости выше 50% яркость уменьшается, когда уровень насыщения снижается. Для оттенков с естественной яркостью ниже 50%, яркость увеличивается при снижении уровня насыщенности.

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

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

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

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